const imgSubtract = "https://www.figma.com/api/mcp/asset/f430266b-9a05-441c-8f34-167e082c90a5";
const imgUnion = "https://www.figma.com/api/mcp/asset/37663477-da87-4813-8c77-620dae9aa74a";
const img = "https://www.figma.com/api/mcp/asset/9ec824ae-de0c-4cc6-aedd-94cd8d3ed5a0";
const imgSubtract1 = "https://www.figma.com/api/mcp/asset/f1de83dd-d398-416d-ac4b-c61f30549f8a";
const imgUnion1 = "https://www.figma.com/api/mcp/asset/a588a15b-33b1-4620-8984-394370b3613e";
const img1 = "https://www.figma.com/api/mcp/asset/7c2766f5-79c2-487e-a81c-2de0e77a0f9f";
const img2 = "https://www.figma.com/api/mcp/asset/7d0b61f9-f325-4ca8-a994-0b6100cfa5bf";
const img3 = "https://www.figma.com/api/mcp/asset/fe08bcf2-4830-49ce-a8a4-d6cb2642a0d4";
const img4 = "https://www.figma.com/api/mcp/asset/9fbfb00e-ec4a-4468-9420-469b539cb7df";
const img5 = "https://www.figma.com/api/mcp/asset/445c733a-ad63-4193-bcd1-cdbd25389d24";

type NotificationProps = {
  className?: string;
  children?: React.ReactNode | null;
  status?: "side pop" | "error" | "info" | "quick confirm" | "warning" | "pop confirm" | "secondary warning";
  theme?: "dark" | "light";
};

export default function Notification({ className, children = null, status = "warning", theme = "dark" }: NotificationProps) {
  const isDarkAndError = theme === "dark" && status === "error";
  const isDarkAndInfo = theme === "dark" && status === "info";
  const isDarkAndPopConfirm = theme === "dark" && status === "pop confirm";
  const isDarkAndQuickConfirm = theme === "dark" && status === "quick confirm";
  const isDarkAndSecondaryWarning = theme === "dark" && status === "secondary warning";
  const isDarkAndSidePop = theme === "dark" && status === "side pop";
  const isDarkAndWarning = theme === "dark" && status === "warning";
  const isLight = theme === "light";
  const isLightAndError = theme === "light" && status === "error";
  const isLightAndInfo = theme === "light" && status === "info";
  const isLightAndPopConfirm = theme === "light" && status === "pop confirm";
  const isLightAndQuickConfirm = theme === "light" && status === "quick confirm";
  const isLightAndSecondaryWarning = theme === "light" && status === "secondary warning";
  const isLightAndSidePop = theme === "light" && status === "side pop";
  const isLightAndWarning = theme === "light" && status === "warning";
  return (
    <div className={className || `border-[1.2px] border-solid content-stretch drop-shadow-[0px_6px_8px_rgba(0,0,0,0.08),0px_9px_14px_rgba(0,0,0,0.05),0px_12px_24px_rgba(0,0,0,0.03)] flex flex-col items-start px-[24px] py-[16px] relative rounded-[6px] ${isLightAndSidePop ? String.raw`bg-[var(--color-type\/background\/layer_2,#f8f8f8)] border-[var(--color-type\/line\/light-divider,#ccc)] gap-[12px] w-[320px]` : isDarkAndSidePop ? String.raw`bg-[var(--color-type\/background\/layer_4,#353535)] border-[var(--color-type\/line\/light-divider,#434343)] gap-[12px] w-[320px]` : isLightAndQuickConfirm ? String.raw`bg-[var(--color-type\/background\/layer_2,#f8f8f8)] border-[var(--color-type\/line\/light-divider,#ccc)] gap-[24px] w-[280px]` : isDarkAndQuickConfirm ? String.raw`bg-[var(--color-type\/background\/layer_4,#353535)] border-[var(--color-type\/line\/light-divider,#434343)] gap-[24px] w-[280px]` : theme === "light" && ["warning", "secondary warning", "error", "pop confirm", "info"].includes(status) ? String.raw`bg-[var(--color-type\/background\/layer_2,#f8f8f8)] border-[var(--color-type\/line\/light-divider,#ccc)] gap-[40px] w-[480px]` : String.raw`bg-[var(--color-type\/background\/layer_4,#353535)] border-[var(--color-type\/line\/light-divider,#434343)] gap-[40px] w-[480px]`}`} id={isLightAndInfo ? "node-1408_17130" : isDarkAndInfo ? "node-1408_17124" : isLightAndSidePop ? "node-1408_17133" : isDarkAndSidePop ? "node-1408_17127" : isLightAndQuickConfirm ? "node-1408_17134" : isDarkAndQuickConfirm ? "node-1408_17128" : isLightAndPopConfirm ? "node-1408_17132" : isDarkAndPopConfirm ? "node-1408_17126" : isLightAndError ? "node-1408_17131" : isDarkAndError ? "node-1408_17125" : isLightAndSecondaryWarning ? "node-1539_31691" : isLightAndWarning ? "node-1408_17129" : isDarkAndSecondaryWarning ? "node-1539_31680" : "node-1408_17123"}>
      {status === "side pop" && (
        <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" id={isLight ? "node-1708_25068" : "node-1708_25146"} data-name="title">
          <p className={`flex-[1_0_0] font-["Roboto:SemiBold",sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] ${isLight ? String.raw`text-[color:var(--color-type\/text\/text_1,#141414)]` : String.raw`text-[color:var(--color-type\/text\/text_1,#f8f8f8)]`}`} id={isLight ? "node-1708_25069" : "node-1708_25147"} style={{ fontVariationSettings: "'wdth' 100" }}>
            This is the title
          </p>
          <div className="relative shrink-0 size-[16px]" id={isLight ? "node-1708_25070" : "node-1708_25148"} data-name="icon/Edit/Close">
            <div className="absolute inset-[15%]" id={isLight ? "node-I1708_25070-1480_74296" : "node-I1708_25148-1480_74296"} data-name="Union">
              <img alt="" className="absolute block inset-0 max-w-none size-full" src={isLight ? imgUnion1 : imgUnion} />
            </div>
          </div>
        </div>
      )}
      {isDarkAndWarning && (
        <>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-node-id="1392:579" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[24px]" data-node-id="1392:1786" data-name="icon/Message/Error 4">
                  <div className="absolute inset-[9.97%_6.25%_10.37%_6.25%]" data-node-id="I1392:1786;1538:132" data-name="Subtract">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract} />
                  </div>
                </div>
                <div className="content-stretch flex flex-[1_0_0] flex-col gap-[12px] items-start min-w-px relative" data-node-id="1392:581" data-name="content">
                  <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1392:582" data-name="title">
                    <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)]" data-node-id="1392:583" style={{ fontVariationSettings: "'wdth' 100" }}>
                      This is the title
                    </p>
                    <div className="relative shrink-0 size-[16px]" data-node-id="1392:1817" data-name="icon/Edit/Close">
                      <div className="absolute inset-[15%]" data-node-id="I1392:1817;1480:74296" data-name="Union">
                        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
                      </div>
                    </div>
                  </div>
                  <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] w-full" data-node-id="1392:585" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Though I speak with the tongues of men and of angels, and have not charity ?
                  </p>
                </div>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1392:586" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-9-\#434343,#434343)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="4751:9156" data-name="Button/dark M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-5-\#cccccc,#ccc)] whitespace-nowrap" data-node-id="I4751:9156;302:600" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[#33ab4f] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1396:5168" data-name="Button/dark M">
              <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="I1396:5168;302:464" style={{ fontVariationSettings: "'wdth' 100" }}>
                Confirm
              </p>
            </div>
          </div>
        </>
      )}
      {isDarkAndSecondaryWarning && (
        <>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-node-id="1539:31681" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[24px]" data-node-id="1539:31682" data-name="icon/Message/warning 2">
                  <div className="absolute inset-[6.25%]" data-node-id="I1539:31682;1538:130" data-name="形状">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={img} />
                  </div>
                </div>
                <div className="content-stretch flex flex-[1_0_0] flex-col gap-[12px] items-start min-w-px relative" data-node-id="1539:31683" data-name="content">
                  <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1539:31684" data-name="title">
                    <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)]" data-node-id="1539:31685" style={{ fontVariationSettings: "'wdth' 100" }}>
                      This is the title
                    </p>
                    <div className="relative shrink-0 size-[16px]" data-node-id="1539:31686" data-name="icon/Edit/Close">
                      <div className="absolute inset-[15%]" data-node-id="I1539:31686;1480:74296" data-name="Union">
                        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
                      </div>
                    </div>
                  </div>
                  <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] w-full" data-node-id="1539:31687" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Though I speak with the tongues of men and of angels, and have not charity ?
                  </p>
                </div>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1539:31688" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-9-\#434343,#434343)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="4751:9147" data-name="Button/dark M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-5-\#cccccc,#ccc)] whitespace-nowrap" data-node-id="I4751:9147;302:600" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[#33ab4f] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1539:31690" data-name="Button/dark M">
              <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="I1539:31690;302:464" style={{ fontVariationSettings: "'wdth' 100" }}>
                Confirm
              </p>
            </div>
          </div>
        </>
      )}
      {isLightAndWarning && (
        <>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-node-id="1400:5331" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[24px]" data-node-id="1400:5332" data-name="icon/Message/Error 4">
                  <div className="absolute inset-[9.97%_6.25%_10.37%_6.25%]" data-node-id="I1400:5332;1538:132" data-name="Subtract">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract1} />
                  </div>
                </div>
                <div className="content-stretch flex flex-col gap-[12px] items-start relative shrink-0 w-[392px]" data-node-id="1400:5333" data-name="content">
                  <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1400:5334" data-name="title">
                    <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#141414)]" data-node-id="1400:5335" style={{ fontVariationSettings: "'wdth' 100" }}>
                      This is the title
                    </p>
                    <div className="relative shrink-0 size-[16px]" data-node-id="1400:5336" data-name="icon/Edit/Close">
                      <div className="absolute inset-[15%]" data-node-id="I1400:5336;1480:74296" data-name="Union">
                        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion1} />
                      </div>
                    </div>
                  </div>
                  <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#595959)] w-full" data-node-id="1400:5337" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Though I speak with the tongues of men and of angels, and have not charity ?
                  </p>
                </div>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1400:5338" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-4-\#dbdbdb,#dbdbdb)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5474" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-9-\#434343,#434343)] whitespace-nowrap" data-node-id="I1400:5474;314:44916" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[var(--ux\/brand\/brand,#299f45)] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5483" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-1-\#ffffff,white)] whitespace-nowrap" data-node-id="I1400:5483;314:44874" style={{ fontVariationSettings: "'wdth' 100" }}>
                Confirm
              </p>
            </div>
          </div>
        </>
      )}
      {isLightAndSecondaryWarning && (
        <>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-node-id="1539:31692" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[24px]" data-node-id="1539:31693" data-name="icon/Message/warning 2">
                  <div className="absolute inset-[6.25%]" data-node-id="I1539:31693;1538:130" data-name="形状">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={img1} />
                  </div>
                </div>
                <div className="content-stretch flex flex-[1_0_0] flex-col gap-[12px] items-start min-w-px relative" data-node-id="1539:31694" data-name="content">
                  <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1539:31695" data-name="title">
                    <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#141414)]" data-node-id="1539:31696" style={{ fontVariationSettings: "'wdth' 100" }}>
                      This is the title
                    </p>
                    <div className="relative shrink-0 size-[16px]" data-node-id="1539:31697" data-name="icon/Edit/Close">
                      <div className="absolute inset-[15%]" data-node-id="I1539:31697;1480:74296" data-name="Union">
                        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion1} />
                      </div>
                    </div>
                  </div>
                  <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#595959)] w-full" data-node-id="1539:31698" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Though I speak with the tongues of men and of angels, and have not charity ?
                  </p>
                </div>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1539:31699" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-4-\#dbdbdb,#dbdbdb)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1539:31700" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-9-\#434343,#434343)] whitespace-nowrap" data-node-id="I1539:31700;314:44916" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[var(--ux\/brand\/brand,#299f45)] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1539:31701" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-1-\#ffffff,white)] whitespace-nowrap" data-node-id="I1539:31701;314:44874" style={{ fontVariationSettings: "'wdth' 100" }}>
                Confirm
              </p>
            </div>
          </div>
        </>
      )}
      {isDarkAndError && (
        <>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-node-id="1392:634" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[24px]" data-node-id="1396:5204" data-name="icon/Message/Error 2">
                  <div className="absolute inset-[6.25%]" data-node-id="I1396:5204;1544:33368" data-name="布尔">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={img2} />
                  </div>
                </div>
                <div className="content-stretch flex flex-[1_0_0] flex-col gap-[12px] items-start min-w-px relative" data-node-id="1392:636" data-name="content">
                  <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1392:637" data-name="title">
                    <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)]" data-node-id="1392:638" style={{ fontVariationSettings: "'wdth' 100" }}>
                      This is the title
                    </p>
                    <div className="relative shrink-0 size-[16px]" data-node-id="1396:5217" data-name="icon/Edit/Close">
                      <div className="absolute inset-[15%]" data-node-id="I1396:5217;1480:74296" data-name="Union">
                        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
                      </div>
                    </div>
                  </div>
                  <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] w-full" data-node-id="1392:640" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Though I speak with the tongues of men and of angels, and have not charity ?
                  </p>
                </div>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1396:5229" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-9-\#434343,#434343)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="4751:9141" data-name="Button/dark M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-5-\#cccccc,#ccc)] whitespace-nowrap" data-node-id="I4751:9141;302:600" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[#33ab4f] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1396:5231" data-name="Button/dark M">
              <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="I1396:5231;302:464" style={{ fontVariationSettings: "'wdth' 100" }}>
                Confirm
              </p>
            </div>
          </div>
        </>
      )}
      {isLightAndError && (
        <>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-node-id="1400:5434" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[24px]" data-node-id="1400:5435" data-name="icon/Message/Error 2">
                  <div className="absolute inset-[6.25%]" data-node-id="I1400:5435;1544:33368" data-name="布尔">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={img3} />
                  </div>
                </div>
                <div className="content-stretch flex flex-[1_0_0] flex-col gap-[12px] items-start min-w-px relative" data-node-id="1400:5436" data-name="content">
                  <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1400:5437" data-name="title">
                    <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#141414)]" data-node-id="1400:5438" style={{ fontVariationSettings: "'wdth' 100" }}>
                      This is the title
                    </p>
                    <div className="relative shrink-0 size-[16px]" data-node-id="1400:5439" data-name="icon/Edit/Close">
                      <div className="absolute inset-[15%]" data-node-id="I1400:5439;1480:74296" data-name="Union">
                        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion1} />
                      </div>
                    </div>
                  </div>
                  <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#595959)] w-full" data-node-id="1400:5440" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Though I speak with the tongues of men and of angels, and have not charity ?
                  </p>
                </div>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1400:5468" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-4-\#dbdbdb,#dbdbdb)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5480" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-9-\#434343,#434343)] whitespace-nowrap" data-node-id="I1400:5480;314:44916" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[var(--ux\/brand\/brand,#299f45)] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5489" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-1-\#ffffff,white)] whitespace-nowrap" data-node-id="I1400:5489;314:44874" style={{ fontVariationSettings: "'wdth' 100" }}>
                Confirm
              </p>
            </div>
          </div>
        </>
      )}
      {isDarkAndPopConfirm && (
        <>
          <div className="content-stretch flex flex-col gap-[12px] items-end relative shrink-0 w-full" data-node-id="1396:5256" data-name="Notification_content">
            {children || (
              <>
                <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1545:21987" data-name="title">
                  <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)]" data-node-id="1545:21988" style={{ fontVariationSettings: "'wdth' 100" }}>
                    This is the title
                  </p>
                  <div className="relative shrink-0 size-[16px]" data-node-id="1545:21989" data-name="icon/Edit/Close">
                    <div className="absolute inset-[15%]" data-node-id="I1545:21989;1480:74296" data-name="Union">
                      <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
                    </div>
                  </div>
                </div>
                <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] w-full" data-node-id="1396:5260" style={{ fontVariationSettings: "'wdth' 100" }}>
                  Are you sure you want to delete XXXX? All the events can not be recovered.
                </p>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1396:5261" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-9-\#434343,#434343)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1396:5262" data-name="Button/dark M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-5-\#cccccc,#ccc)] whitespace-nowrap" data-node-id="I1396:5262;302:600" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[#ec5050] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1396:5263" data-name="Button/dark M">
              <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="I1396:5263;302:492" style={{ fontVariationSettings: "'wdth' 100" }}>
                Delete
              </p>
            </div>
          </div>
        </>
      )}
      {isLightAndPopConfirm && (
        <>
          <div className="content-stretch flex flex-col gap-[12px] items-end relative shrink-0 w-full" data-node-id="1400:5493" data-name="Notification_content">
            {children || (
              <>
                <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1545:22065" data-name="title">
                  <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#141414)]" data-node-id="1545:22066" style={{ fontVariationSettings: "'wdth' 100" }}>
                    This is the title
                  </p>
                  <div className="relative shrink-0 size-[16px]" data-node-id="1545:22067" data-name="icon/Edit/Close">
                    <div className="absolute inset-[15%]" data-node-id="I1545:22067;1480:74296" data-name="Union">
                      <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion1} />
                    </div>
                  </div>
                </div>
                <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#595959)] w-full" data-node-id="1400:5495" style={{ fontVariationSettings: "'wdth' 100" }}>
                  Are you sure you want to delete XXXX? All the events can not be recovered.
                </p>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1400:5511" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-4-\#dbdbdb,#dbdbdb)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5512" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-9-\#434343,#434343)] whitespace-nowrap" data-node-id="I1400:5512;314:44916" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[var(--ux\/red\/default,#dc2717)] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5513" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-1-\#ffffff,white)] whitespace-nowrap" data-node-id="I1400:5513;314:44890" style={{ fontVariationSettings: "'wdth' 100" }}>
                Delete
              </p>
            </div>
          </div>
        </>
      )}
      {isDarkAndQuickConfirm && (
        <>
          <div className="content-stretch flex flex-col gap-[12px] h-[70px] items-end relative shrink-0 w-full" data-node-id="1400:5312" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[16px]" data-node-id="1400:5313" data-name="icon/Edit/Close">
                  <div className="absolute inset-[15%]" data-node-id="I1400:5313;1480:74296" data-name="Union">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
                  </div>
                </div>
                <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-full relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)] w-[min-content]" data-node-id="1400:5314" style={{ fontVariationSettings: "'wdth' 100" }}>
                  Are you sure you want to delete ‘XXXX’?
                </p>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1400:5315" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-9-\#434343,#434343)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="4751:9136" data-name="Button/dark M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-5-\#cccccc,#ccc)] whitespace-nowrap" data-node-id="I4751:9136;302:600" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[#ec5050] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5317" data-name="Button/dark M">
              <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="I1400:5317;302:492" style={{ fontVariationSettings: "'wdth' 100" }}>
                Delete
              </p>
            </div>
          </div>
        </>
      )}
      {isLightAndQuickConfirm && (
        <>
          <div className="content-stretch flex flex-col gap-[12px] h-[70px] items-end relative shrink-0 w-full" data-node-id="1400:5532" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[16px]" data-node-id="1400:5533" data-name="icon/Edit/Close">
                  <div className="absolute inset-[15%]" data-node-id="I1400:5533;1480:74296" data-name="Union">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion1} />
                  </div>
                </div>
                <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-full relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_1,#141414)] w-[min-content]" data-node-id="1400:5534" style={{ fontVariationSettings: "'wdth' 100" }}>
                  Are you sure you want to delete ‘XXXX’?
                </p>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1400:5550" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-4-\#dbdbdb,#dbdbdb)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5551" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-9-\#434343,#434343)] whitespace-nowrap" data-node-id="I1400:5551;314:44916" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[var(--ux\/red\/default,#dc2717)] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5552" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-1-\#ffffff,white)] whitespace-nowrap" data-node-id="I1400:5552;314:44890" style={{ fontVariationSettings: "'wdth' 100" }}>
                Delete
              </p>
            </div>
          </div>
        </>
      )}
      {isDarkAndSidePop && (
        <div className="content-stretch flex flex-col items-end relative shrink-0 w-full" data-node-id="1396:5289" data-name="Notification_content">
          {children || (
            <div className="font-['Roboto:Regular',sans-serif] font-normal leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)] w-full" data-node-id="1396:5291" style={{ fontVariationSettings: "'wdth' 100" }}>
              <p className="leading-[1.5] mb-0">Are you sure you want to delete XXXX?</p>
              <p className="leading-[1.5]">All the events can not be recovered.</p>
            </div>
          )}
        </div>
      )}
      {isLightAndSidePop && (
        <div className="content-stretch flex flex-col items-end relative shrink-0 w-full" data-node-id="1400:5518" data-name="Notification_content">
          {children || (
            <div className="font-['Roboto:Regular',sans-serif] font-normal leading-[0] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/text_1,#141414)] w-full" data-node-id="1400:5520" style={{ fontVariationSettings: "'wdth' 100" }}>
              <p className="leading-[1.5] mb-0">Are you sure you want to delete XXXX?</p>
              <p className="leading-[1.5]">All the events can not be recovered.</p>
            </div>
          )}
        </div>
      )}
      {isDarkAndInfo && (
        <>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-node-id="1392:623" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[24px]" data-node-id="1396:5174" data-name="icon/Message/Info 2">
                  <div className="absolute inset-[6.25%]" data-node-id="I1396:5174;1517:27670" data-name="布尔">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={img4} />
                  </div>
                </div>
                <div className="content-stretch flex flex-[1_0_0] flex-col gap-[12px] items-start min-w-px relative" data-node-id="1392:625" data-name="content">
                  <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1392:626" data-name="title">
                    <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#f8f8f8)]" data-node-id="1392:627" style={{ fontVariationSettings: "'wdth' 100" }}>
                      This is the title
                    </p>
                    <div className="relative shrink-0 size-[16px]" data-node-id="1396:5186" data-name="icon/Edit/Close">
                      <div className="absolute inset-[15%]" data-node-id="I1396:5186;1480:74296" data-name="Union">
                        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
                      </div>
                    </div>
                  </div>
                  <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] w-full" data-node-id="1392:629" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Though I speak with the tongues of men and of angels, and have not charity ?
                  </p>
                </div>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1396:5198" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-9-\#434343,#434343)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="4751:9144" data-name="Button/dark M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-5-\#cccccc,#ccc)] whitespace-nowrap" data-node-id="I4751:9144;302:600" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[#33ab4f] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1396:5200" data-name="Button/dark M">
              <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="I1396:5200;302:464" style={{ fontVariationSettings: "'wdth' 100" }}>
                Confirm
              </p>
            </div>
          </div>
        </>
      )}
      {isLightAndInfo && (
        <>
          <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full" data-node-id="1400:5394" data-name="Notification_content">
            {children || (
              <>
                <div className="relative shrink-0 size-[24px]" data-node-id="1400:5395" data-name="icon/Message/Info 2">
                  <div className="absolute inset-[6.25%]" data-node-id="I1400:5395;1517:27670" data-name="布尔">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={img5} />
                  </div>
                </div>
                <div className="content-stretch flex flex-[1_0_0] flex-col gap-[12px] items-start min-w-px relative" data-node-id="1400:5396" data-name="content">
                  <div className="content-stretch flex gap-[16px] items-center relative shrink-0 w-full" data-node-id="1400:5397" data-name="title">
                    <p className="flex-[1_0_0] font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] min-w-px relative text-[16px] text-[color:var(--color-type\/text\/text_1,#141414)]" data-node-id="1400:5398" style={{ fontVariationSettings: "'wdth' 100" }}>
                      This is the title
                    </p>
                    <div className="relative shrink-0 size-[16px]" data-node-id="1400:5399" data-name="icon/Edit/Close">
                      <div className="absolute inset-[15%]" data-node-id="I1400:5399;1480:74296" data-name="Union">
                        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion1} />
                      </div>
                    </div>
                  </div>
                  <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#595959)] w-full" data-node-id="1400:5400" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Though I speak with the tongues of men and of angels, and have not charity ?
                  </p>
                </div>
              </>
            )}
          </div>
          <div className="content-stretch flex gap-[16px] items-start justify-end pl-[264px] relative shrink-0 w-full" data-node-id="1400:5427" data-name="comfirm">
            <div className="border-[1.2px] border-[var(--ux\/grey\/grey-4-\#dbdbdb,#dbdbdb)] border-solid content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5477" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-9-\#434343,#434343)] whitespace-nowrap" data-node-id="I1400:5477;314:44916" style={{ fontVariationSettings: "'wdth' 100" }}>
                Cancel
              </p>
            </div>
            <div className="bg-[var(--ux\/brand\/brand,#299f45)] content-stretch flex h-[32px] items-center justify-center px-[16px] py-[10px] relative rounded-[4px] shrink-0" data-node-id="1400:5486" data-name="Button/light M">
              <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--ux\/grey\/grey-1-\#ffffff,white)] whitespace-nowrap" data-node-id="I1400:5486;314:44874" style={{ fontVariationSettings: "'wdth' 100" }}>
                Confirm
              </p>
            </div>
          </div>
        </>
      )}
    </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/16 pop title: Font(family: "Roboto", style: SemiBold, size: 16, weight: 600, lineHeight: 1.5, letterSpacing: 0), Roboto/14 body: Font(family: "Roboto", style: Regular, size: 14, weight: 400, lineHeight: 1.5, letterSpacing: 0), L3 shadow: Effect(type: DROP_SHADOW, color: #00000008, offset: (0, 12), radius: 48, spread: 16); Effect(type: DROP_SHADOW, color: #0000000D, offset: (0, 9), radius: 28, spread: 0); Effect(type: DROP_SHADOW, color: #00000014, offset: (0, 6), radius: 16, spread: -8).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.