const imgSubtract = "https://www.figma.com/api/mcp/asset/ba85cf5e-0b87-4554-9946-4bff400123ba";
const imgSubtract1 = "https://www.figma.com/api/mcp/asset/0c91e15e-50f0-4d11-8647-1345bf36c41f";
const imgSubtract2 = "https://www.figma.com/api/mcp/asset/99b9e665-ac4b-49e4-a19b-f24e1fcca2fd";
const imgSubtract3 = "https://www.figma.com/api/mcp/asset/6193ff5d-c119-4273-a19b-fbeddf3c4ce4";
const imgEllipse141 = "https://www.figma.com/api/mcp/asset/fdce6f36-4a38-41c1-a7e8-4cbe2b24abe6";
const imgSubtract4 = "https://www.figma.com/api/mcp/asset/f0984605-1683-4fa4-a7b2-3526aac1ff85";
const imgSubtract5 = "https://www.figma.com/api/mcp/asset/a90793ea-749e-4229-843c-a588154bc222";
const imgEllipse142 = "https://www.figma.com/api/mcp/asset/d76fe4af-b9cd-40de-a95d-d8dce0381989";
const imgSubtract6 = "https://www.figma.com/api/mcp/asset/bf9f060b-73d3-4948-b384-634137080bde";
const imgSubtract7 = "https://www.figma.com/api/mcp/asset/bba7242b-af5b-40d9-99d7-52789636bef7";

type RadioProps = {
  className?: string;
  darkTheme?: boolean;
  enable?: boolean;
  status?: boolean;
};

function Radio({ className, darkTheme = true, enable = true, status = false }: RadioProps) {
  const isDarkThemeAndNotStatusAndTrue = darkTheme && !status && enable;
  const isNotDarkThemeAndNotStatusAndTrue = !darkTheme && !status && enable;
  const isNotDarkThemeAndStatusAndTrue = !darkTheme && status && enable;
  return (
    <div className={className || "relative size-[16px]"} id={isNotDarkThemeAndNotStatusAndTrue ? "node-374_376" : isDarkThemeAndNotStatusAndTrue ? "node-374_372" : isNotDarkThemeAndStatusAndTrue ? "node-374_378" : "node-374_374"}>
      <div className="absolute inset-[6.25%]" id={isNotDarkThemeAndNotStatusAndTrue ? "node-374_363" : isDarkThemeAndNotStatusAndTrue ? "node-374_358" : isNotDarkThemeAndStatusAndTrue ? "node-374_343" : "node-374_338"} data-name="Subtract">
        <img alt="" className="absolute block inset-0 max-w-none size-full" src={!status && enable ? imgSubtract2 : isNotDarkThemeAndStatusAndTrue ? imgSubtract1 : imgSubtract} />
      </div>
    </div>
  );
}

type Radio1Props = {
  className?: string;
  children?: React.ReactNode | null;
  darkTheme?: boolean;
  enable?: boolean;
  showIcon?: boolean;
  showOption?: boolean;
  status?: boolean;
};

export default function Radio1({ className, children = null, darkTheme = true, enable = true, showIcon = true, showOption = true, status = false }: Radio1Props) {
  const isDarkThemeAndNotStatusAndEnable = darkTheme && !status && enable;
  const isDarkThemeAndNotStatusAndNotEnable = darkTheme && !status && !enable;
  const isDarkThemeAndStatusAndEnable = darkTheme && status && enable;
  const isDarkThemeAndStatusAndNotEnable = darkTheme && status && !enable;
  const isNotDarkThemeAndNotStatusAndEnable = !darkTheme && !status && enable;
  const isNotDarkThemeAndNotStatusAndNotEnable = !darkTheme && !status && !enable;
  const isNotDarkThemeAndStatusAndEnable = !darkTheme && status && enable;
  const isNotDarkThemeAndStatusAndNotEnable = !darkTheme && status && !enable;
  return (
    <div className={className || "content-stretch flex gap-[8px] items-center relative"} id={isNotDarkThemeAndStatusAndNotEnable ? "node-374_859" : isNotDarkThemeAndNotStatusAndNotEnable ? "node-374_858" : isNotDarkThemeAndStatusAndEnable ? "node-374_860" : isNotDarkThemeAndNotStatusAndEnable ? "node-374_857" : isDarkThemeAndStatusAndEnable ? "node-374_856" : isDarkThemeAndStatusAndNotEnable ? "node-374_855" : isDarkThemeAndNotStatusAndNotEnable ? "node-374_854" : "node-374_853"}>
      {isDarkThemeAndNotStatusAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-center relative shrink-0" data-node-id="4600:21416" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1715:32296" data-name="radio">
              <div className="absolute inset-[6.25%]" data-node-id="I1715:32296;374:358" data-name="Subtract">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract3} />
              </div>
            </div>
          )}
        </div>
      )}
      {isDarkThemeAndNotStatusAndEnable && showOption && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)] whitespace-nowrap" data-node-id="374:823" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isDarkThemeAndNotStatusAndNotEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-center relative shrink-0" data-node-id="4600:21652" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:36855" data-name="radio">
              <div className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 size-[14px] top-1/2" data-node-id="I1548:36855;1624:26077">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgEllipse141} />
              </div>
              <div className="absolute inset-[6.25%]" data-node-id="I1548:36855;1624:26025" data-name="Subtract">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract4} />
              </div>
            </div>
          )}
        </div>
      )}
      {isDarkThemeAndNotStatusAndNotEnable && showOption && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/disable,#595959)] whitespace-nowrap" data-node-id="374:841" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isDarkThemeAndStatusAndNotEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-center relative shrink-0" data-node-id="4600:21825" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:37004" data-name="radio">
              <div className="absolute inset-[6.25%]" data-node-id="I1548:37004;374:348" data-name="Subtract">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract5} />
              </div>
            </div>
          )}
        </div>
      )}
      {isDarkThemeAndStatusAndNotEnable && showOption && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/disable,#595959)] whitespace-nowrap" data-node-id="374:843" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isDarkThemeAndStatusAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-center relative shrink-0" data-node-id="4600:21687" data-name="Icon">
          {children || <Radio className="relative shrink-0 size-[16px]" status />}
        </div>
      )}
      {isDarkThemeAndStatusAndEnable && showOption && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)] whitespace-nowrap" data-node-id="374:833" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndNotStatusAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-center relative shrink-0" data-node-id="4600:21830" data-name="Icon">
          {children || <Radio className="relative shrink-0 size-[16px]" darkTheme={false} />}
        </div>
      )}
      {isNotDarkThemeAndNotStatusAndEnable && showOption && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-13-\#141414,#141414)] whitespace-nowrap" data-node-id="374:845" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndStatusAndEnable && showIcon && (
        <div className="content-stretch flex items-center relative shrink-0" data-node-id="4600:21925" data-name="Icon">
          {children || <Radio className="relative shrink-0 size-[16px]" darkTheme={false} status />}
        </div>
      )}
      {isNotDarkThemeAndStatusAndEnable && showOption && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-13-\#141414,#141414)] whitespace-nowrap" data-node-id="374:851" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndNotStatusAndNotEnable && showIcon && (
        <div className="content-stretch flex items-center relative shrink-0" data-node-id="4600:21908" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:37553" data-name="radio">
              <div className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 size-[14px] top-1/2" data-node-id="I1548:37553;1624:27149">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgEllipse142} />
              </div>
              <div className="absolute inset-[6.25%]" data-node-id="I1548:37553;1624:27069" data-name="Subtract">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract6} />
              </div>
            </div>
          )}
        </div>
      )}
      {isNotDarkThemeAndNotStatusAndNotEnable && showOption && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/disable,#ccc)] whitespace-nowrap" data-node-id="374:847" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndStatusAndNotEnable && showIcon && (
        <div className="content-stretch flex items-center relative shrink-0" data-node-id="4600:21974" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:37683" data-name="radio">
              <div className="absolute inset-[6.25%]" data-node-id="I1548:37683;374:353" data-name="Subtract">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract7} />
              </div>
            </div>
          )}
        </div>
      )}
      {isNotDarkThemeAndStatusAndNotEnable && showOption && (
        <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/disable,#ccc)] whitespace-nowrap" data-node-id="374:849" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
    </div>
  );
}SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.
Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.These styles are contained in the design: Green: #33AB4F, Roboto/14 body: Font(family: "Roboto", style: Regular, size: 14, weight: 400, lineHeight: 1.5, letterSpacing: 0).Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: <img src={image} />. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.