const imgCheckboxCheckedDisable = "https://www.figma.com/api/mcp/asset/76067792-7f70-458a-b1f5-c0c8bc6cfd2c";
const imgCheckboxCheckedDisable1 = "https://www.figma.com/api/mcp/asset/c0ff51e3-e387-47fc-92e3-4c729eb8c93f";
const imgCheckboxCheckedDisable2 = "https://www.figma.com/api/mcp/asset/7bc6e94a-efba-4d5a-9554-ac626aa27146";
const imgCheckboxCheckedDisable3 = "https://www.figma.com/api/mcp/asset/24168f1e-7838-4cca-98ad-7fc9c66cca9e";
const imgCheckboxCheckedDisable4 = "https://www.figma.com/api/mcp/asset/ffc71ad0-a93c-41f9-9d8d-00d818d075f6";

type CheckBoxProps = {
  className?: string;
  darkTheme?: boolean;
  enable?: boolean;
  status?: "off" | "on" | "some";
};

function CheckBox({ className, darkTheme = true, enable = true, status = "off" }: CheckBoxProps) {
  const isDarkThemeAndOffAndTrue = darkTheme && status === "off" && enable;
  const isDarkThemeAndSomeAndTrue = darkTheme && status === "some" && enable;
  const isNotDarkThemeAndOnAndTrue = !darkTheme && status === "on" && enable;
  const isNotDarkThemeAndSomeAndTrue = !darkTheme && status === "some" && enable;
  const isNotDarkThemeAndTrue = !darkTheme && enable;
  const isOnAndTrue = status === "on" && enable;
  const isTrueAndIsOnOrSome = enable && ["on", "some"].includes(status);
  return (
    <div className={className || "relative size-[16px]"} id={isDarkThemeAndOffAndTrue ? "node-374_505" : isNotDarkThemeAndSomeAndTrue ? "node-374_516" : isDarkThemeAndSomeAndTrue ? "node-374_509" : isNotDarkThemeAndOnAndTrue ? "node-374_513" : "node-374_508"}>
      {isTrueAndIsOnOrSome && (
        <>
          <div className={`absolute inset-[6.25%] rounded-[1.2px] ${!darkTheme && enable && ["on", "some"].includes(status) ? String.raw`bg-[var(--ux\/brand\/brand,#299f45)]` : String.raw`bg-[var(--ux\/brand\/brand,#2fb54e)]`}`} id={isNotDarkThemeAndSomeAndTrue ? "node-374_475" : isDarkThemeAndSomeAndTrue ? "node-374_470" : isNotDarkThemeAndOnAndTrue ? "node-374_452" : "node-374_446"} />
          <div className={`absolute ${status === "some" && enable ? String.raw`bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] bottom-[43.75%] left-1/4 right-1/4 rounded-[10px] top-[43.75%]` : "flex inset-[31.25%_21.27%_24.56%_34.53%] items-center justify-center"}`} id={isNotDarkThemeAndSomeAndTrue ? "node-374_476" : isDarkThemeAndSomeAndTrue ? "node-374_471" : undefined} style={isOnAndTrue ? { containerType: "size" } : undefined}>
            {isOnAndTrue && (
              <div className="flex-none h-[hypot(-20cqw,-20cqh)] rotate-135 w-[hypot(-80cqw,80cqh)]">
                <div className="bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] relative rounded-[10px] size-full" id={isNotDarkThemeAndTrue ? "node-374_453" : "node-374_447"} />
              </div>
            )}
          </div>
        </>
      )}
      {isOnAndTrue && (
        <div className={`absolute flex items-center justify-center ${isNotDarkThemeAndTrue ? "inset-[44.51%_47.98%_24.75%_21.27%]" : "inset-[44.51%_47.99%_24.76%_21.27%]"}`} style={{ containerType: "size" }}>
          <div className={`-rotate-135 flex-none ${isNotDarkThemeAndTrue ? "h-[hypot(28.7481cqw,-28.7481cqh)] w-[hypot(-71.2519cqw,-71.2519cqh)]" : "h-[hypot(28.7548cqw,-28.7548cqh)] w-[hypot(-71.2452cqw,-71.2452cqh)]"}`}>
            <div className="bg-[var(--ux\/grey\/grey-1-\#ffffff,white)] relative rounded-[10px] size-full" id={isNotDarkThemeAndTrue ? "node-374_454" : "node-374_448"} />
          </div>
        </div>
      )}
      {isDarkThemeAndOffAndTrue && (
        <div className="absolute inset-[6.25%]" data-node-id="374:489" data-name="checkbox_checked_disable">
          <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgCheckboxCheckedDisable} />
        </div>
      )}
    </div>
  );
}

type CheckBox1Props = {
  className?: string;
  children?: React.ReactNode | null;
  darkTheme?: boolean;
  enable?: boolean;
  showIcon?: boolean;
  showOption?: boolean;
  status?: "off" | "on" | "some";
};

export default function CheckBox1({ className, children = null, darkTheme = true, enable = true, showIcon = true, showOption = true, status = "off" }: CheckBox1Props) {
  const isDarkThemeAndOffAndEnable = darkTheme && status === "off" && enable;
  const isDarkThemeAndOffAndNotEnable = darkTheme && status === "off" && !enable;
  const isDarkThemeAndOnAndEnable = darkTheme && status === "on" && enable;
  const isDarkThemeAndOnAndNotEnable = darkTheme && status === "on" && !enable;
  const isDarkThemeAndSomeAndEnable = darkTheme && status === "some" && enable;
  const isDarkThemeAndSomeAndNotEnable = darkTheme && status === "some" && !enable;
  const isNotDarkThemeAndOffAndEnable = !darkTheme && status === "off" && enable;
  const isNotDarkThemeAndOffAndNotEnable = !darkTheme && status === "off" && !enable;
  const isNotDarkThemeAndOnAndEnable = !darkTheme && status === "on" && enable;
  const isNotDarkThemeAndOnAndNotEnable = !darkTheme && status === "on" && !enable;
  const isNotDarkThemeAndSomeAndEnable = !darkTheme && status === "some" && enable;
  const isNotDarkThemeAndSomeAndNotEnable = !darkTheme && status === "some" && !enable;
  return (
    <div className={className || "content-stretch flex gap-[8px] items-center relative"} id={isNotDarkThemeAndOffAndNotEnable ? "node-374_779" : isNotDarkThemeAndOnAndNotEnable ? "node-374_778" : isNotDarkThemeAndSomeAndNotEnable ? "node-374_777" : isNotDarkThemeAndSomeAndEnable ? "node-374_776" : isNotDarkThemeAndOnAndEnable ? "node-374_775" : isNotDarkThemeAndOffAndEnable ? "node-374_774" : isDarkThemeAndSomeAndEnable ? "node-374_773" : isDarkThemeAndOnAndEnable ? "node-374_772" : isDarkThemeAndSomeAndNotEnable ? "node-374_780" : isDarkThemeAndOnAndNotEnable ? "node-374_782" : isDarkThemeAndOffAndNotEnable ? "node-374_783" : "node-374_771"}>
      {isDarkThemeAndOffAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:13391" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:32070" data-name="check box">
              <div className="absolute inset-[6.25%]" data-node-id="I1548:32070;374:489" data-name="checkbox_checked_disable">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgCheckboxCheckedDisable1} />
              </div>
            </div>
          )}
        </div>
      )}
      {isDarkThemeAndOffAndEnable && 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:747" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isDarkThemeAndOffAndNotEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15981" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="4600:14027" data-name="check box">
              <div className="-translate-x-1/2 -translate-y-1/2 absolute bg-[var(--color-type\/icon\/disable,#595959)] left-1/2 rounded-[1.2px] size-[14px] top-1/2" data-node-id="I4600:14027;1624:22862" />
              <div className="absolute inset-[6.25%]" data-node-id="I4600:14027;1624:22813" data-name="checkbox_checked_disable">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgCheckboxCheckedDisable2} />
              </div>
            </div>
          )}
        </div>
      )}
      {isDarkThemeAndOffAndNotEnable && 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:753" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isDarkThemeAndOnAndNotEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15178" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:33953" data-name="check box">
              <div className="absolute bg-[var(--ux\/brand\/disable,#1a652c)] inset-[6.25%] rounded-[1.2px]" data-node-id="I1548:33953;374:458" />
              <div className="absolute flex inset-[31.25%_21.27%_24.56%_34.53%] items-center justify-center" style={{ containerType: "size" }}>
                <div className="flex-none h-[hypot(-20cqw,-20cqh)] rotate-135 w-[hypot(-80cqw,80cqh)]">
                  <div className="bg-[var(--ux\/grey\/grey-6-\#9e9e9e,#9e9e9e)] relative rounded-[10px] size-full" data-node-id="I1548:33953;374:459" />
                </div>
              </div>
              <div className="absolute flex inset-[44.51%_47.97%_24.74%_21.27%] items-center justify-center" style={{ containerType: "size" }}>
                <div className="-rotate-135 flex-none h-[hypot(28.7416cqw,-28.7416cqh)] w-[hypot(-71.2584cqw,-71.2584cqh)]">
                  <div className="bg-[var(--ux\/grey\/grey-6-\#9e9e9e,#9e9e9e)] relative rounded-[10px] size-full" data-node-id="I1548:33953;374:460" />
                </div>
              </div>
            </div>
          )}
        </div>
      )}
      {isDarkThemeAndOnAndNotEnable && 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:755" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isDarkThemeAndSomeAndNotEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15225" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:34006" data-name="check box">
              <div className="absolute bg-[var(--ux\/brand\/disable,#1a652c)] inset-[6.25%] rounded-[1.2px]" data-node-id="I1548:34006;374:480" />
              <div className="absolute bg-[var(--ux\/grey\/grey-6-\#9e9e9e,#9e9e9e)] bottom-[43.75%] left-1/4 right-1/4 rounded-[10px] top-[43.75%]" data-node-id="I1548:34006;374:481" />
            </div>
          )}
        </div>
      )}
      {isDarkThemeAndSomeAndNotEnable && 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:756" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isDarkThemeAndOnAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:14450" data-name="Icon">
          {children || <CheckBox className="relative shrink-0 size-[16px]" status="on" />}
        </div>
      )}
      {isDarkThemeAndOnAndEnable && 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:749" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isDarkThemeAndSomeAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15219" data-name="Icon">
          {children || <CheckBox className="relative shrink-0 size-[16px]" status="some" />}
        </div>
      )}
      {isDarkThemeAndSomeAndEnable && 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:751" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndOffAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15231" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:34012" data-name="check box">
              <div className="absolute inset-[6.25%]" data-node-id="I1548:34012;374:495" data-name="checkbox_checked_disable">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgCheckboxCheckedDisable3} />
              </div>
            </div>
          )}
        </div>
      )}
      {isNotDarkThemeAndOffAndEnable && 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:759" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndOnAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15448" data-name="Icon">
          {children || <CheckBox className="relative shrink-0 size-[16px]" darkTheme={false} status="on" />}
        </div>
      )}
      {isNotDarkThemeAndOnAndEnable && 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:761" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndSomeAndEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15605" data-name="Icon">
          {children || <CheckBox className="relative shrink-0 size-[16px]" darkTheme={false} status="some" />}
        </div>
      )}
      {isNotDarkThemeAndSomeAndEnable && 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:763" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndSomeAndNotEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15611" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:35387" data-name="check box">
              <div className="absolute bg-[var(--ux\/brand\/disable,#8fcc9d)] inset-[6.25%] rounded-[1.2px]" data-node-id="I1548:35387;374:485" />
              <div className="absolute bg-[var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)] bottom-[43.75%] left-1/4 right-1/4 rounded-[10px] top-[43.75%]" data-node-id="I1548:35387;374:486" />
            </div>
          )}
        </div>
      )}
      {isNotDarkThemeAndSomeAndNotEnable && 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:765" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndOnAndNotEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15569" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:35294" data-name="check box">
              <div className="absolute bg-[var(--ux\/brand\/disable,#8fcc9d)] inset-[6.25%] rounded-[1.2px]" data-node-id="I1548:35294;374:464" />
              <div className="absolute flex inset-[31.25%_21.27%_24.56%_34.53%] items-center justify-center" style={{ containerType: "size" }}>
                <div className="flex-none h-[hypot(-20cqw,-20cqh)] rotate-135 w-[hypot(-80cqw,80cqh)]">
                  <div className="bg-[var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)] relative rounded-[10px] size-full" data-node-id="I1548:35294;374:465" />
                </div>
              </div>
              <div className="absolute flex inset-[44.51%_47.95%_24.72%_21.27%] items-center justify-center" style={{ containerType: "size" }}>
                <div className="-rotate-135 flex-none h-[hypot(28.7203cqw,-28.7203cqh)] w-[hypot(-71.2797cqw,-71.2797cqh)]">
                  <div className="bg-[var(--ux\/grey\/grey-2-\#f8f8f8,#f8f8f8)] relative rounded-[10px] size-full" data-node-id="I1548:35294;374:466" />
                </div>
              </div>
            </div>
          )}
        </div>
      )}
      {isNotDarkThemeAndOnAndNotEnable && 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:767" style={{ fontVariationSettings: "'wdth' 100" }}>
          Option
        </p>
      )}
      {isNotDarkThemeAndOffAndNotEnable && showIcon && (
        <div className="content-stretch flex gap-[var(--spacing\/xs,0px)] items-start overflow-clip relative shrink-0" data-node-id="4600:15417" data-name="Icon">
          {children || (
            <div className="relative shrink-0 size-[16px]" data-node-id="1548:35341" data-name="check box">
              <div className="-translate-x-1/2 -translate-y-1/2 absolute bg-[var(--ux\/grey\/grey-3-\#f0f0f0,#f0f0f0)] left-1/2 rounded-[1.2px] size-[14px] top-1/2" data-node-id="I1548:35341;1624:23826" />
              <div className="absolute inset-[6.25%]" data-node-id="I1548:35341;1624:23689" data-name="checkbox_checked_disable">
                <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgCheckboxCheckedDisable4} />
              </div>
            </div>
          )}
        </div>
      )}
      {isNotDarkThemeAndOffAndNotEnable && 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:769" 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: 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.