@anker-in/headless-ui 1.1.79 → 1.1.80

package/dist/esm/biz-components/Faq/Faq.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Faq/Faq.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n  ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current!)\n\n    // \u5C06 defaultOpenIndex \u8F6C\u6362\u4E3A\u6570\u7EC4\u65B9\u4FBF\u5224\u65AD\n    const openIndexes = Array.isArray(defaultOpenIndex)\n      ? defaultOpenIndex\n      : defaultOpenIndex !== undefined\n        ? [defaultOpenIndex]\n        : []\n\n    return (\n      <div ref={innerRef} className={cn(className, classNames.root)}>\n        <div>\n          {data?.productData?.map((item: any, index: number) => (\n            <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n  data: ItemType\n  defaultOpen?: boolean\n  classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n  const [open, setOpen] = useState(defaultOpen)\n\n  const handleToggle = () => {\n    setOpen(!open)\n  }\n\n  return (\n    <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n      <div>\n        <div\n          onClick={handleToggle}\n          className={cn(\n            'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n            classNames.itemHeader\n          )}\n        >\n          <Heading\n            as=\"h3\"\n            html={data?.title}\n            className={cn(\n              'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n              classNames.title\n            )}\n          />\n          <div className={cn('transition-transform duration-300', classNames.icon)}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n              width=\"20\"\n              height=\"21\"\n              viewBox=\"0 0 20 21\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n                fill=\"#1D1D1F\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n        <div\n          className={cn(\n            'overflow-hidden transition-all duration-300',\n            open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n            classNames.content\n          )}\n        >\n          <Text\n            html={data?.desc}\n            className={cn(\n              'desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]',\n              classNames.description\n            )}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
-  "mappings": "aAuBY,cAAAA,EA0BJ,QAAAC,MA1BI,oBAtBZ,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAE7D,OAAS,QAAAC,EAAM,WAAAC,MAAe,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAMR,EAAM,WAChB,CAAC,CAAE,KAAAS,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,EAAWZ,EAAuB,IAAI,EAC5CD,EAAoBY,EAAK,IAAMC,EAAS,OAAQ,EAGhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EACjB,CAAC,EAEP,OACEb,EAAC,OAAI,IAAKgB,EAAU,UAAWR,EAAGI,EAAWE,EAAW,IAAI,EAC1D,SAAAd,EAAC,OACE,SAAAW,GAAM,aAAa,IAAI,CAACO,EAAWC,IAClCnB,EAACoB,EAAA,CAAoB,KAAMF,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAT,EAAI,YAAc,MAQlB,MAAMU,EAAU,CAAC,CAAE,KAAAT,EAAM,YAAAU,EAAc,GAAO,WAAAP,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACQ,EAAMC,CAAO,EAAIlB,EAASgB,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,OACEtB,EAAC,OAAI,UAAWQ,EAAG,6CAA8CM,EAAW,IAAI,EAC9E,SAAAb,EAAC,OACC,UAAAA,EAAC,OACC,QAASuB,EACT,UAAWhB,EACT,4EACAM,EAAW,UACb,EAEA,UAAAd,EAACO,EAAA,CACC,GAAG,KACH,KAAMI,GAAM,MACZ,UAAWH,EACT,yFACAM,EAAW,KACb,EACF,EACAd,EAAC,OAAI,UAAWQ,EAAG,oCAAqCM,EAAW,IAAI,EACrE,SAAAd,EAAC,OACC,MAAM,6BACN,UAAWQ,EAAG,6CAA8Cc,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAtB,EAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,EAGAA,EAAC,OACC,UAAWQ,EACT,8CACAc,EAAO,iCAAmC,oBAC1CR,EAAW,OACb,EAEA,SAAAd,EAACM,EAAA,CACC,KAAMK,GAAM,KACZ,UAAWH,EACT,2FACAM,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAM,EAAQ,YAAc,UAEtB,IAAOK,EAAQhB,EAAWC,CAAG",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n  ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current!)\n\n    // \u5C06 defaultOpenIndex \u8F6C\u6362\u4E3A\u6570\u7EC4\u65B9\u4FBF\u5224\u65AD\n    const openIndexes = Array.isArray(defaultOpenIndex)\n      ? defaultOpenIndex\n      : defaultOpenIndex !== undefined\n        ? [defaultOpenIndex]\n        : []\n\n    return (\n      <div ref={innerRef} className={cn(className, classNames.root)}>\n        <div>\n          {data?.productData?.map((item: any, index: number) => (\n            <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n  data: ItemType\n  defaultOpen?: boolean\n  classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n  const [open, setOpen] = useState(defaultOpen)\n\n  const handleToggle = () => {\n    setOpen(!open)\n  }\n\n  return (\n    <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n      <div>\n        <div\n          onClick={handleToggle}\n          className={cn(\n            'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n            classNames.itemHeader\n          )}\n        >\n          <Heading\n            as=\"h3\"\n            html={data?.title}\n            className={cn(\n              'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n              classNames.title\n            )}\n          />\n          <div className={cn('transition-transform duration-300', classNames.icon)}>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n              width=\"20\"\n              height=\"21\"\n              viewBox=\"0 0 20 21\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n                fill=\"#1D1D1F\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n        <div\n          className={cn(\n            'overflow-hidden text-[#4A4C56] transition-all duration-300',\n            open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n            classNames.content\n          )}\n        >\n          <Text\n            html={data?.desc}\n            className={cn(\n              'desktop:text-base lg-desktop:text-lg text-info-secondary text-sm font-bold leading-[1.4]',\n              classNames.description\n            )}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
+  "mappings": "aAuBY,cAAAA,EA0BJ,QAAAC,MA1BI,oBAtBZ,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAE7D,OAAS,QAAAC,EAAM,WAAAC,MAAe,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAMR,EAAM,WAChB,CAAC,CAAE,KAAAS,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,EAAWZ,EAAuB,IAAI,EAC5CD,EAAoBY,EAAK,IAAMC,EAAS,OAAQ,EAGhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EACjB,CAAC,EAEP,OACEb,EAAC,OAAI,IAAKgB,EAAU,UAAWR,EAAGI,EAAWE,EAAW,IAAI,EAC1D,SAAAd,EAAC,OACE,SAAAW,GAAM,aAAa,IAAI,CAACO,EAAWC,IAClCnB,EAACoB,EAAA,CAAoB,KAAMF,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAT,EAAI,YAAc,MAQlB,MAAMU,EAAU,CAAC,CAAE,KAAAT,EAAM,YAAAU,EAAc,GAAO,WAAAP,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACQ,EAAMC,CAAO,EAAIlB,EAASgB,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,OACEtB,EAAC,OAAI,UAAWQ,EAAG,6CAA8CM,EAAW,IAAI,EAC9E,SAAAb,EAAC,OACC,UAAAA,EAAC,OACC,QAASuB,EACT,UAAWhB,EACT,4EACAM,EAAW,UACb,EAEA,UAAAd,EAACO,EAAA,CACC,GAAG,KACH,KAAMI,GAAM,MACZ,UAAWH,EACT,yFACAM,EAAW,KACb,EACF,EACAd,EAAC,OAAI,UAAWQ,EAAG,oCAAqCM,EAAW,IAAI,EACrE,SAAAd,EAAC,OACC,MAAM,6BACN,UAAWQ,EAAG,6CAA8Cc,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAtB,EAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,EAGAA,EAAC,OACC,UAAWQ,EACT,6DACAc,EAAO,iCAAmC,oBAC1CR,EAAW,OACb,EAEA,SAAAd,EAACM,EAAA,CACC,KAAMK,GAAM,KACZ,UAAWH,EACT,2FACAM,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAM,EAAQ,YAAc,UAEtB,IAAOK,EAAQhB,EAAWC,CAAG",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Text", "Heading", "cn", "withLayout", "Faq", "data", "className", "defaultOpenIndex", "classNames", "ref", "innerRef", "openIndexes", "item", "index", "FaqItem", "defaultOpen", "open", "setOpen", "handleToggle", "Faq_default"]
 }

package/dist/esm/biz-components/Features/index.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as c,jsx as t,jsxs as s}from"react/jsx-runtime";import{withLayout as x}from"../../shared/Styles.js";import{Picture as p,Text as a}from"../../components/index.js";const g=i=>{const{data:l,className:d,...r}=i,{list:n}=l;return t(c,{children:s("div",{...r,className:d,children:[l?.title&&t("div",{className:"desktop:w-[800px] pb-[24px]",children:t(a,{html:l?.title,className:" desktop:!text-[32px] lg-desktop:text-lg line-clamp-3 !text-[24px] !leading-[1.2] [&_*_strong]:!font-bold"})}),l?.img?.url&&t(p,{className:"md-tablet:hidden aspect-[1664/560] rounded-2xl",imgClassName:"",source:l?.img?.url,alt:l?.img?.alt||""}),l?.mobileImg?.url&&t(p,{className:"tablet:hidden aspect-[358/360] rounded-2xl",imgClassName:"",source:l?.mobileImg?.url,alt:l?.mobileImg?.alt||""}),t("div",{className:"",children:t("div",{className:"flex flex-col gap-0",children:n.map((e,o)=>s("div",{className:`desktop:flex tablet:gap-8 laptop:gap-[64px] gap-4 pt-[64px] ${o%2===0?"laptop:flex-row-reverse":""}`,children:[s("div",{className:"desktop:w-[500px] lg-desktop:w-[640px] flex shrink-0 flex-col justify-center",children:[t(a,{html:e?.title,className:"graphic-title  desktop:text-[32px] line-clamp-3 text-[24px] leading-[1.2] [&_*_strong]:!font-bold"}),t(a,{html:e?.description,className:"graphic-title desktop:pt-[8px] lg-desktop:text-[18px] desktop:text-[16px] pt-[4px] text-[14px] leading-[1.2] [&_*_strong]:!font-bold"}),e?.numberOne&&s("div",{className:"desktop:pt-[48px] desktop:flex-col desktop:gap-[48px] flex flex-row gap-[24px] pt-[24px]",children:[s("div",{className:"",children:[t(a,{style:{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))",backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent"},html:e?.numberOne,className:"graphic-title desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold"}),t(a,{html:e?.textOne,className:"graphic-title lg-desktop:text-lg desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold"})]}),s("div",{children:[t(a,{style:{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))",backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent"},html:e?.numberTwo,className:"graphic-title desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold"}),t(a,{html:e?.textTwo,className:"graphic-title lg-desktop:text-lg desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold"})]})]}),e?.icon?.url&&t("div",{className:"desktop:pt-[24px] lg-desktop:pt-[48px] pt-[24px]",children:t(p,{className:"desktop:w-[368px] lg-desktop:w-[488px] w-[358px]",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),t("div",{className:"md-tablet:hidden laptop:mt-[24px] desktop:pt-0 mt-[24px] aspect-[964/560] overflow-hidden rounded-2xl",children:t(p,{className:"size-full object-cover ",source:e?.img?.url,alt:e?.img?.alt||""})}),t("div",{className:"tablet:hidden mt-[24px] aspect-[358/360] overflow-hidden rounded-2xl",children:t(p,{className:"size-full object-cover",source:e?.mobileImg?.url,alt:e?.mobileImg?.alt||""})})]},o))})})]})})};var b=x(g);export{b as default};
+"use client";import{Fragment as m,jsx as t,jsxs as p}from"react/jsx-runtime";import{withLayout as x}from"../../shared/Styles.js";import{Picture as s,Text as a}from"../../components/index.js";const g=i=>{const{data:l,className:d,...r}=i,{list:n}=l;return t(m,{children:p("div",{...r,className:d,children:[l?.title&&t("div",{className:"desktop:w-[800px] pb-[24px]",children:t(a,{html:l?.title,className:" desktop:!text-[32px] lg-desktop:text-lg line-clamp-3 !text-[24px] !leading-[1.2] [&_*_strong]:!font-bold"})}),l?.img?.url&&t(s,{className:"md-tablet:hidden aspect-[1664/560] rounded-2xl",imgClassName:"",source:l?.img?.url,alt:l?.img?.alt||""}),l?.mobileImg?.url&&t(s,{className:"tablet:hidden aspect-[358/360] rounded-2xl",imgClassName:"",source:l?.mobileImg?.url,alt:l?.mobileImg?.alt||""}),t("div",{className:"",children:t("div",{className:"flex flex-col gap-0",children:n.map((e,o)=>p("div",{className:`desktop:flex tablet:gap-8 laptop:gap-[64px] gap-4 pt-[64px] ${o%2===0?"laptop:flex-row-reverse":""}`,children:[p("div",{className:"desktop:w-[500px] lg-desktop:w-[640px] flex shrink-0 flex-col justify-center",children:[t(a,{html:e?.title,className:"graphic-title  desktop:text-[32px] line-clamp-3 text-[24px] leading-[1.2] [&_*_strong]:!font-bold"}),t(a,{html:e?.description,className:"graphic-title desktop:pt-[8px] lg-desktop:text-[18px] tablet:max-w-[463px] laptop:max-w-[563px] desktop:max-w-none desktop:text-[16px] pt-[4px] text-[14px] leading-[1.4] [&_*_strong]:!font-bold"}),e?.numberOne&&p("div",{className:"desktop:pt-[48px] desktop:flex-col desktop:gap-[48px] flex flex-row gap-[24px] pt-[24px]",children:[p("div",{className:"",children:[t(a,{style:{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))",backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent"},html:e?.numberOne,className:"graphic-title desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold"}),t(a,{html:e?.textOne,className:"graphic-title lg-desktop:text-lg desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold"})]}),p("div",{children:[t(a,{style:{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))",backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent"},html:e?.numberTwo,className:"graphic-title desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold"}),t(a,{html:e?.textTwo,className:"graphic-title lg-desktop:text-lg desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold"})]})]}),e?.icon?.url&&t("div",{className:"desktop:pt-[24px] lg-desktop:pt-[48px] pt-[24px]",children:t(s,{className:"desktop:w-[368px] lg-desktop:w-[488px] w-[358px]",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),t("div",{className:"md-tablet:hidden laptop:mt-[24px] desktop:pt-0 mt-[24px] aspect-[964/560] overflow-hidden rounded-2xl",children:t(s,{className:"size-full object-cover ",source:e?.img?.url,alt:e?.img?.alt||""})}),t("div",{className:"tablet:hidden mt-[24px] aspect-[358/360] overflow-hidden rounded-2xl",children:t(s,{className:"size-full object-cover",source:e?.mobileImg?.url,alt:e?.mobileImg?.alt||""})})]},o))})})]})})};var b=x(g);export{b as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Features/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Features/index.tsx"],
-  "sourcesContent": ["'use client'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type FeaturesDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  numberOne: string\n  textOne: string\n  numberTwo: string\n  textTwo: string\n  icon: Img\n}\ntype FeaturesType = React.HTMLAttributes<HTMLDivElement> & {\n  data: {\n    title: string\n    img: Img\n    mobileImg: Img\n    list: FeaturesDataType[]\n  }\n}\n\nconst Features = (props: FeaturesType) => {\n  const { data, className, ...rest } = props\n  const { list } = data\n\n  return (\n    <>\n      <div {...rest} className={className}>\n        {data?.title && (\n          <div className=\"desktop:w-[800px] pb-[24px]\">\n            <Text\n              html={data?.title}\n              className=\" desktop:!text-[32px] lg-desktop:text-lg line-clamp-3 !text-[24px] !leading-[1.2] [&_*_strong]:!font-bold\"\n            />\n          </div>\n        )}\n        {data?.img?.url && (\n          <Picture\n            className=\"md-tablet:hidden aspect-[1664/560] rounded-2xl\"\n            imgClassName=\"\"\n            source={data?.img?.url}\n            alt={data?.img?.alt || ''}\n          />\n        )}\n        {data?.mobileImg?.url && (\n          <Picture\n            className=\"tablet:hidden aspect-[358/360] rounded-2xl\"\n            imgClassName=\"\"\n            source={data?.mobileImg?.url}\n            alt={data?.mobileImg?.alt || ''}\n          />\n        )}\n        <div className=\"\">\n          <div className=\"flex flex-col gap-0\">\n            {list.map((item, index) => (\n              <div\n                key={index}\n                className={`desktop:flex tablet:gap-8 laptop:gap-[64px] gap-4 pt-[64px] ${index % 2 === 0 ? 'laptop:flex-row-reverse' : ''}`}\n              >\n                <div className=\"desktop:w-[500px] lg-desktop:w-[640px] flex shrink-0 flex-col justify-center\">\n                  <Text\n                    html={item?.title}\n                    className=\"graphic-title  desktop:text-[32px] line-clamp-3 text-[24px] leading-[1.2] [&_*_strong]:!font-bold\"\n                  />\n                  <Text\n                    html={item?.description}\n                    className=\"graphic-title desktop:pt-[8px] lg-desktop:text-[18px] desktop:text-[16px] pt-[4px] text-[14px] leading-[1.2] [&_*_strong]:!font-bold\"\n                  />\n                  {/* \u6E10\u53D8\u8272 */}\n                  {item?.numberOne && (\n                    <div className=\"desktop:pt-[48px] desktop:flex-col desktop:gap-[48px] flex flex-row gap-[24px] pt-[24px]\">\n                      <div className=\"\">\n                        <Text\n                          style={{\n                            background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                            backgroundClip: 'text',\n                            WebkitBackgroundClip: 'text',\n                            WebkitTextFillColor: 'transparent',\n                            color: 'transparent', // \u5EFA\u8BAE\u52A0\u4E0A\uFF0C\u517C\u5BB9\u90E8\u5206\u6D4F\u89C8\u5668\n                          }}\n                          html={item?.numberOne}\n                          className=\"graphic-title desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold\"\n                        />\n                        <Text\n                          html={item?.textOne}\n                          className=\"graphic-title lg-desktop:text-lg desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold\"\n                        />\n                      </div>\n                      <div>\n                        <Text\n                          style={{\n                            background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                            backgroundClip: 'text',\n                            WebkitBackgroundClip: 'text',\n                            WebkitTextFillColor: 'transparent',\n                            color: 'transparent', // \u5EFA\u8BAE\u52A0\u4E0A\uFF0C\u517C\u5BB9\u90E8\u5206\u6D4F\u89C8\u5668\n                          }}\n                          html={item?.numberTwo}\n                          className=\"graphic-title desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold\"\n                        />\n                        <Text\n                          html={item?.textTwo}\n                          className=\"graphic-title lg-desktop:text-lg desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold\"\n                        />\n                      </div>\n                    </div>\n                  )}\n                  {item?.icon?.url && (\n                    <div className=\"desktop:pt-[24px] lg-desktop:pt-[48px] pt-[24px]\">\n                      <Picture\n                        className=\"desktop:w-[368px] lg-desktop:w-[488px] w-[358px]\"\n                        source={item?.icon?.url}\n                        alt={item?.icon?.alt || ''}\n                      />\n                    </div>\n                  )}\n                </div>\n                <div className=\"md-tablet:hidden laptop:mt-[24px] desktop:pt-0 mt-[24px] aspect-[964/560] overflow-hidden rounded-2xl\">\n                  <Picture className=\"size-full object-cover \" source={item?.img?.url} alt={item?.img?.alt || ''} />\n                </div>\n                <div className=\"tablet:hidden mt-[24px] aspect-[358/360] overflow-hidden rounded-2xl\">\n                  <Picture\n                    className=\"size-full object-cover\"\n                    source={item?.mobileImg?.url}\n                    alt={item?.mobileImg?.alt || ''}\n                  />\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(Features)\n"],
-  "mappings": "aA6BI,mBAAAA,EAIQ,OAAAC,EAyCU,QAAAC,MA7ClB,oBA3BJ,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAqB9B,MAAMC,EAAYC,GAAwB,CACxC,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAIH,EAC/B,CAAE,KAAAI,CAAK,EAAIH,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAK,GAAGQ,EAAM,UAAWD,EACvB,UAAAD,GAAM,OACLP,EAAC,OAAI,UAAU,8BACb,SAAAA,EAACI,EAAA,CACC,KAAMG,GAAM,MACZ,UAAU,4GACZ,EACF,EAEDA,GAAM,KAAK,KACVP,EAACG,EAAA,CACC,UAAU,iDACV,aAAa,GACb,OAAQI,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,KAChBP,EAACG,EAAA,CACC,UAAU,6CACV,aAAa,GACb,OAAQI,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,EAEFP,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,sBACZ,SAAAU,EAAK,IAAI,CAACC,EAAMC,IACfX,EAAC,OAEC,UAAW,+DAA+DW,EAAQ,IAAM,EAAI,0BAA4B,EAAE,GAE1H,UAAAX,EAAC,OAAI,UAAU,+EACb,UAAAD,EAACI,EAAA,CACC,KAAMO,GAAM,MACZ,UAAU,oGACZ,EACAX,EAACI,EAAA,CACC,KAAMO,GAAM,YACZ,UAAU,uIACZ,EAECA,GAAM,WACLV,EAAC,OAAI,UAAU,2FACb,UAAAA,EAAC,OAAI,UAAU,GACb,UAAAD,EAACI,EAAA,CACC,MAAO,CACL,WAAY,6DACZ,eAAgB,OAChB,qBAAsB,OACtB,oBAAqB,cACrB,MAAO,aACT,EACA,KAAMO,GAAM,UACZ,UAAU,kGACZ,EACAX,EAACI,EAAA,CACC,KAAMO,GAAM,QACZ,UAAU,sHACZ,GACF,EACAV,EAAC,OACC,UAAAD,EAACI,EAAA,CACC,MAAO,CACL,WAAY,6DACZ,eAAgB,OAChB,qBAAsB,OACtB,oBAAqB,cACrB,MAAO,aACT,EACA,KAAMO,GAAM,UACZ,UAAU,kGACZ,EACAX,EAACI,EAAA,CACC,KAAMO,GAAM,QACZ,UAAU,sHACZ,GACF,GACF,EAEDA,GAAM,MAAM,KACXX,EAAC,OAAI,UAAU,mDACb,SAAAA,EAACG,EAAA,CACC,UAAU,mDACV,OAAQQ,GAAM,MAAM,IACpB,IAAKA,GAAM,MAAM,KAAO,GAC1B,EACF,GAEJ,EACAX,EAAC,OAAI,UAAU,wGACb,SAAAA,EAACG,EAAA,CAAQ,UAAU,0BAA0B,OAAQQ,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EAClG,EACAX,EAAC,OAAI,UAAU,uEACb,SAAAA,EAACG,EAAA,CACC,UAAU,yBACV,OAAQQ,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,EACF,IAtEKC,CAuEP,CACD,EACH,EACF,GACF,EACF,CAEJ,EAEA,IAAOC,EAAQX,EAAWG,CAAQ",
+  "sourcesContent": ["'use client'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type FeaturesDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  numberOne: string\n  textOne: string\n  numberTwo: string\n  textTwo: string\n  icon: Img\n}\ntype FeaturesType = React.HTMLAttributes<HTMLDivElement> & {\n  data: {\n    title: string\n    img: Img\n    mobileImg: Img\n    list: FeaturesDataType[]\n  }\n}\n\nconst Features = (props: FeaturesType) => {\n  const { data, className, ...rest } = props\n  const { list } = data\n\n  return (\n    <>\n      <div {...rest} className={className}>\n        {data?.title && (\n          <div className=\"desktop:w-[800px] pb-[24px]\">\n            <Text\n              html={data?.title}\n              className=\" desktop:!text-[32px] lg-desktop:text-lg line-clamp-3 !text-[24px] !leading-[1.2] [&_*_strong]:!font-bold\"\n            />\n          </div>\n        )}\n        {data?.img?.url && (\n          <Picture\n            className=\"md-tablet:hidden aspect-[1664/560] rounded-2xl\"\n            imgClassName=\"\"\n            source={data?.img?.url}\n            alt={data?.img?.alt || ''}\n          />\n        )}\n        {data?.mobileImg?.url && (\n          <Picture\n            className=\"tablet:hidden aspect-[358/360] rounded-2xl\"\n            imgClassName=\"\"\n            source={data?.mobileImg?.url}\n            alt={data?.mobileImg?.alt || ''}\n          />\n        )}\n        <div className=\"\">\n          <div className=\"flex flex-col gap-0\">\n            {list.map((item, index) => (\n              <div\n                key={index}\n                className={`desktop:flex tablet:gap-8 laptop:gap-[64px] gap-4 pt-[64px] ${index % 2 === 0 ? 'laptop:flex-row-reverse' : ''}`}\n              >\n                <div className=\"desktop:w-[500px] lg-desktop:w-[640px] flex shrink-0 flex-col justify-center\">\n                  <Text\n                    html={item?.title}\n                    className=\"graphic-title  desktop:text-[32px] line-clamp-3 text-[24px] leading-[1.2] [&_*_strong]:!font-bold\"\n                  />\n                  <Text\n                    html={item?.description}\n                    className=\"graphic-title desktop:pt-[8px] lg-desktop:text-[18px] tablet:max-w-[463px] laptop:max-w-[563px] desktop:max-w-none desktop:text-[16px] pt-[4px] text-[14px] leading-[1.4] [&_*_strong]:!font-bold\"\n                  />\n                  {/* \u6E10\u53D8\u8272 */}\n                  {item?.numberOne && (\n                    <div className=\"desktop:pt-[48px] desktop:flex-col desktop:gap-[48px] flex flex-row gap-[24px] pt-[24px]\">\n                      <div className=\"\">\n                        <Text\n                          style={{\n                            background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                            backgroundClip: 'text',\n                            WebkitBackgroundClip: 'text',\n                            WebkitTextFillColor: 'transparent',\n                            color: 'transparent', // \u5EFA\u8BAE\u52A0\u4E0A\uFF0C\u517C\u5BB9\u90E8\u5206\u6D4F\u89C8\u5668\n                          }}\n                          html={item?.numberOne}\n                          className=\"graphic-title desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold\"\n                        />\n                        <Text\n                          html={item?.textOne}\n                          className=\"graphic-title lg-desktop:text-lg desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold\"\n                        />\n                      </div>\n                      <div>\n                        <Text\n                          style={{\n                            background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                            backgroundClip: 'text',\n                            WebkitBackgroundClip: 'text',\n                            WebkitTextFillColor: 'transparent',\n                            color: 'transparent', // \u5EFA\u8BAE\u52A0\u4E0A\uFF0C\u517C\u5BB9\u90E8\u5206\u6D4F\u89C8\u5668\n                          }}\n                          html={item?.numberTwo}\n                          className=\"graphic-title desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold\"\n                        />\n                        <Text\n                          html={item?.textTwo}\n                          className=\"graphic-title lg-desktop:text-lg desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold\"\n                        />\n                      </div>\n                    </div>\n                  )}\n                  {item?.icon?.url && (\n                    <div className=\"desktop:pt-[24px] lg-desktop:pt-[48px] pt-[24px]\">\n                      <Picture\n                        className=\"desktop:w-[368px] lg-desktop:w-[488px] w-[358px]\"\n                        source={item?.icon?.url}\n                        alt={item?.icon?.alt || ''}\n                      />\n                    </div>\n                  )}\n                </div>\n                <div className=\"md-tablet:hidden laptop:mt-[24px] desktop:pt-0 mt-[24px] aspect-[964/560] overflow-hidden rounded-2xl\">\n                  <Picture className=\"size-full object-cover \" source={item?.img?.url} alt={item?.img?.alt || ''} />\n                </div>\n                <div className=\"tablet:hidden mt-[24px] aspect-[358/360] overflow-hidden rounded-2xl\">\n                  <Picture\n                    className=\"size-full object-cover\"\n                    source={item?.mobileImg?.url}\n                    alt={item?.mobileImg?.alt || ''}\n                  />\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(Features)\n"],
+  "mappings": "aA6BI,mBAAAA,EAIQ,OAAAC,EAyCU,QAAAC,MA7ClB,oBA3BJ,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAqB9B,MAAMC,EAAYC,GAAwB,CACxC,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAIH,EAC/B,CAAE,KAAAI,CAAK,EAAIH,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAK,GAAGQ,EAAM,UAAWD,EACvB,UAAAD,GAAM,OACLP,EAAC,OAAI,UAAU,8BACb,SAAAA,EAACI,EAAA,CACC,KAAMG,GAAM,MACZ,UAAU,4GACZ,EACF,EAEDA,GAAM,KAAK,KACVP,EAACG,EAAA,CACC,UAAU,iDACV,aAAa,GACb,OAAQI,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,KAChBP,EAACG,EAAA,CACC,UAAU,6CACV,aAAa,GACb,OAAQI,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,EAEFP,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,sBACZ,SAAAU,EAAK,IAAI,CAACC,EAAMC,IACfX,EAAC,OAEC,UAAW,+DAA+DW,EAAQ,IAAM,EAAI,0BAA4B,EAAE,GAE1H,UAAAX,EAAC,OAAI,UAAU,+EACb,UAAAD,EAACI,EAAA,CACC,KAAMO,GAAM,MACZ,UAAU,oGACZ,EACAX,EAACI,EAAA,CACC,KAAMO,GAAM,YACZ,UAAU,oMACZ,EAECA,GAAM,WACLV,EAAC,OAAI,UAAU,2FACb,UAAAA,EAAC,OAAI,UAAU,GACb,UAAAD,EAACI,EAAA,CACC,MAAO,CACL,WAAY,6DACZ,eAAgB,OAChB,qBAAsB,OACtB,oBAAqB,cACrB,MAAO,aACT,EACA,KAAMO,GAAM,UACZ,UAAU,kGACZ,EACAX,EAACI,EAAA,CACC,KAAMO,GAAM,QACZ,UAAU,sHACZ,GACF,EACAV,EAAC,OACC,UAAAD,EAACI,EAAA,CACC,MAAO,CACL,WAAY,6DACZ,eAAgB,OAChB,qBAAsB,OACtB,oBAAqB,cACrB,MAAO,aACT,EACA,KAAMO,GAAM,UACZ,UAAU,kGACZ,EACAX,EAACI,EAAA,CACC,KAAMO,GAAM,QACZ,UAAU,sHACZ,GACF,GACF,EAEDA,GAAM,MAAM,KACXX,EAAC,OAAI,UAAU,mDACb,SAAAA,EAACG,EAAA,CACC,UAAU,mDACV,OAAQQ,GAAM,MAAM,IACpB,IAAKA,GAAM,MAAM,KAAO,GAC1B,EACF,GAEJ,EACAX,EAAC,OAAI,UAAU,wGACb,SAAAA,EAACG,EAAA,CAAQ,UAAU,0BAA0B,OAAQQ,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EAClG,EACAX,EAAC,OAAI,UAAU,uEACb,SAAAA,EAACG,EAAA,CACC,UAAU,yBACV,OAAQQ,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,EACF,IAtEKC,CAuEP,CACD,EACH,EACF,GACF,EACF,CAEJ,EAEA,IAAOC,EAAQX,EAAWG,CAAQ",
   "names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "Features", "props", "data", "className", "rest", "list", "item", "index", "Features_default"]
 }

package/dist/esm/biz-components/GiftBox/index.d.ts

@@ -1,8 +1,5 @@
-import type { Img } from '../../types/props.js';
-export type GiftBoxDataType = {
-    img: Img;
-    mobileImg: Img;
-    title: string;
-};
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 declare const _default: any;
 export default _default;

package/dist/esm/biz-components/GiftBox/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import"react";import{cn as r}from"../../helpers/utils.js";import{withLayout as d}from"../../shared/Styles.js";import{Picture as l,Text as c}from"../../components/index.js";const g=({data:o,className:i,...p})=>{const{list:s}=o;return e("div",{...p,className:r("w-full rounded-2xl bg-[#EAEAEC]",i),children:e("div",{className:"laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6 grid grid-cols-2 gap-3",children:s.map((t,m)=>a("div",{className:"laptop:p-[20px] flex flex-col items-center justify-center p-[12px]",children:[a("div",{children:[t?.img?.url&&e(l,{className:"laptop:hidden aspect-[194/194]",imgClassName:"",source:t?.img?.url,alt:t?.img?.alt||""}),t?.mobileImg?.url&&e(l,{className:"laptop:hidden aspect-[120/120]",imgClassName:"",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt||""})]}),e(c,{html:t?.title,className:"laptop:text-[18px] text-[14px] font-bold leading-[1.4]"})]},m))})})};var y=d(g);export{y as default};
+"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import"react";import{withLayout as c}from"../../shared/Styles.js";import{Picture as o,Text as n}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{Swiper as u,SwiperSlide as f}from"swiper/react";import{Pagination as w,Mousewheel as g,FreeMode as x}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";const m=({item:t})=>i("div",{className:"rounded-card laptop:p-[20px] tablet:h-full tablet:px-3 laptop:px-4 lg-desktop:p-8 flex h-[120px] flex-col items-center justify-center overflow-hidden bg-[#EAEAEC] px-4 py-[12px]",children:[i("div",{className:"min-h-0 flex-1",children:[t?.img?.url&&e(o,{className:"laptop:block desktop:w-[116px] lg-desktop:w-[146px] hidden aspect-[194/194] w-[88px]",imgClassName:"",source:t?.img?.url,alt:t?.img?.alt||""}),t?.mobileImg?.url&&e(o,{className:"laptop:hidden block aspect-[120/120] h-full",imgClassName:"",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt||""})]}),e(n,{html:t?.title,className:"laptop:text-[18px] line-clamp-2 shrink-0 text-center text-[14px] font-bold leading-[1.4]"})]}),b=t=>{const{data:d,className:s}=t,{list:p}=d;return i("div",{className:"w-full",children:[e("div",{className:r("tablet:hidden grid grid-cols-2 gap-3",s),children:p.map((l,a)=>e(m,{item:l},`mobile-${a}`))}),e("div",{className:r("tablet:block hidden",s),children:i("div",{className:"relative",children:[e(u,{modules:[w,g,x],freeMode:!0,spaceBetween:16,slidesPerView:"auto",pagination:{clickable:!0,el:".gift-box-pagination"},mousewheel:{forceToAxis:!0},breakpoints:{768:{spaceBetween:12,slidesPerView:4},1025:{spaceBetween:16,slidesPerView:4},1440:{spaceBetween:16,slidesPerView:6}},className:"laptop:!overflow-visible [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch",children:p.map((l,a)=>e(f,{className:"!h-full items-stretch",children:e(m,{item:l})},`carousel-${a}`))}),e("div",{className:"gift-box-pagination laptop:hidden mt-3 flex justify-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:size-2 [&_.swiper-pagination-bullet]:rounded-full [&_.swiper-pagination-bullet]:bg-[#767880] [&_.swiper-pagination-bullet]:opacity-100"})]})})]})};var A=c(b);export{A as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/GiftBox/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GiftBox/index.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport type { Img } from '../../types/props.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type GiftBoxDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n}\n\ninterface GiftBoxType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    list: GiftBoxDataType[]\n  }\n}\n\nconst GiftBox = ({ data, className, ...rest }: GiftBoxType) => {\n  const { list } = data\n\n  return (\n    <div {...rest} className={cn('w-full rounded-2xl bg-[#EAEAEC]', className)}>\n      <div className=\"laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6 grid grid-cols-2 gap-3\">\n        {list.map((item, index) => (\n          <div key={index} className=\"laptop:p-[20px] flex flex-col items-center justify-center p-[12px]\">\n            <div>\n              {item?.img?.url && (\n                <Picture\n                  className=\"laptop:hidden aspect-[194/194]\"\n                  imgClassName=\"\"\n                  source={item?.img?.url}\n                  alt={item?.img?.alt || ''}\n                />\n              )}\n              {item?.mobileImg?.url && (\n                <Picture\n                  className=\"laptop:hidden aspect-[120/120]\"\n                  imgClassName=\"\"\n                  source={item?.mobileImg?.url}\n                  alt={item?.mobileImg?.alt || ''}\n                />\n              )}\n            </div>\n            <Text html={item?.title} className=\"laptop:text-[18px] text-[14px] font-bold leading-[1.4]\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(GiftBox)\n"],
-  "mappings": "aA2BY,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBA1BZ,MAAuB,QAEvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAc9B,MAAMC,EAAU,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAmB,CAC7D,KAAM,CAAE,KAAAC,CAAK,EAAIH,EAEjB,OACEP,EAAC,OAAK,GAAGS,EAAM,UAAWP,EAAG,kCAAmCM,CAAS,EACvE,SAAAR,EAAC,OAAI,UAAU,uHACZ,SAAAU,EAAK,IAAI,CAACC,EAAMC,IACfX,EAAC,OAAgB,UAAU,qEACzB,UAAAA,EAAC,OACE,UAAAU,GAAM,KAAK,KACVX,EAACI,EAAA,CACC,UAAU,iCACV,aAAa,GACb,OAAQO,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,KAChBX,EAACI,EAAA,CACC,UAAU,iCACV,aAAa,GACb,OAAQO,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,EACAX,EAACK,EAAA,CAAK,KAAMM,GAAM,MAAO,UAAU,yDAAyD,IAnBpFC,CAoBV,CACD,EACH,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAO",
-  "names": ["jsx", "jsxs", "cn", "withLayout", "Picture", "Text", "GiftBox", "data", "className", "rest", "list", "item", "index", "GiftBox_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, Mousewheel, FreeMode } from 'swiper/modules'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport type { GiftBoxDataType, GiftBoxType } from './types.js'\n\nconst GiftItem = ({ item }: { item: GiftBoxDataType }) => (\n  <div className=\"rounded-card laptop:p-[20px] tablet:h-full tablet:px-3 laptop:px-4 lg-desktop:p-8 flex h-[120px] flex-col items-center justify-center overflow-hidden bg-[#EAEAEC] px-4 py-[12px]\">\n    <div className=\"min-h-0 flex-1\">\n      {item?.img?.url && (\n        <Picture\n          className=\"laptop:block desktop:w-[116px] lg-desktop:w-[146px] hidden aspect-[194/194] w-[88px]\"\n          imgClassName=\"\"\n          source={item?.img?.url}\n          alt={item?.img?.alt || ''}\n        />\n      )}\n      {item?.mobileImg?.url && (\n        <Picture\n          className=\"laptop:hidden block aspect-[120/120] h-full\"\n          imgClassName=\"\"\n          source={item?.mobileImg?.url}\n          alt={item?.mobileImg?.alt || ''}\n        />\n      )}\n    </div>\n    <Text\n      html={item?.title}\n      className=\"laptop:text-[18px] line-clamp-2 shrink-0 text-center text-[14px] font-bold leading-[1.4]\"\n    />\n  </div>\n)\n\nconst GiftBox = (props: GiftBoxType) => {\n  const { data, className } = props\n  const { list } = data\n\n  return (\n    <div className=\"w-full\">\n      {/* Mobile: Grid \u9759\u6001\u5E03\u5C40 2 \u5217 (<768px) */}\n      <div className={cn('tablet:hidden grid grid-cols-2 gap-3', className)}>\n        {list.map((item, index) => (\n          <GiftItem key={`mobile-${index}`} item={item} />\n        ))}\n      </div>\n\n      {/* Tablet+: Swiper \u8F6E\u64AD (\u2265768px)\n          - 768px~1024px (tablet~laptop): 4 \u4E2A\u53EF\u89C1\n          - \u22651025px (laptop+): 4.2 \u4E2A\u53EF\u89C1\n          - \u22651440px (desktop+): 6 \u4E2A\u53EF\u89C1\n      */}\n      <div className={cn('tablet:block hidden', className)}>\n        <div className=\"relative\">\n          <Swiper\n            modules={[Pagination, Mousewheel, FreeMode]}\n            freeMode={true}\n            spaceBetween={16}\n            slidesPerView=\"auto\"\n            pagination={{\n              clickable: true,\n              el: '.gift-box-pagination',\n            }}\n            mousewheel={{\n              forceToAxis: true,\n            }}\n            breakpoints={{\n              768: {\n                spaceBetween: 12,\n                slidesPerView: 4,\n              },\n              1025: {\n                spaceBetween: 16,\n                slidesPerView: 4,\n              },\n              1440: {\n                spaceBetween: 16,\n                slidesPerView: 6,\n              },\n            }}\n            className=\"laptop:!overflow-visible [&_.swiper-slide]:!h-auto [&_.swiper-wrapper]:items-stretch\"\n          >\n            {list.map((item, index) => (\n              <SwiperSlide key={`carousel-${index}`} className=\"!h-full items-stretch\">\n                <GiftItem item={item} />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n          {/* \u81EA\u5B9A\u4E49 Pagination - \u4EC5 tablet \u663E\u793A */}\n          <div className=\"gift-box-pagination laptop:hidden mt-3 flex justify-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:size-2 [&_.swiper-pagination-bullet]:rounded-full [&_.swiper-pagination-bullet]:bg-[#767880] [&_.swiper-pagination-bullet]:opacity-100\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(GiftBox)\n"],
+  "mappings": "aAcI,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAbJ,MAAgC,QAChC,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eACpC,OAAS,cAAAC,EAAY,cAAAC,EAAY,YAAAC,MAAgB,iBACjD,MAAO,aACP,MAAO,wBACP,MAAO,wBAGP,MAAMC,EAAW,CAAC,CAAE,KAAAC,CAAK,IACvBX,EAAC,OAAI,UAAU,oLACb,UAAAA,EAAC,OAAI,UAAU,iBACZ,UAAAW,GAAM,KAAK,KACVZ,EAACG,EAAA,CACC,UAAU,uFACV,aAAa,GACb,OAAQS,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,KAChBZ,EAACG,EAAA,CACC,UAAU,8CACV,aAAa,GACb,OAAQS,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,EACAZ,EAACI,EAAA,CACC,KAAMQ,GAAM,MACZ,UAAU,2FACZ,GACF,EAGIC,EAAWC,GAAuB,CACtC,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEd,EAAC,OAAI,UAAU,SAEb,UAAAD,EAAC,OAAI,UAAWK,EAAG,uCAAwCW,CAAS,EACjE,SAAAC,EAAK,IAAI,CAACL,EAAMM,IACflB,EAACW,EAAA,CAAiC,KAAMC,GAAzB,UAAUM,CAAK,EAAgB,CAC/C,EACH,EAOAlB,EAAC,OAAI,UAAWK,EAAG,sBAAuBW,CAAS,EACjD,SAAAf,EAAC,OAAI,UAAU,WACb,UAAAD,EAACM,EAAA,CACC,QAAS,CAACE,EAAYC,EAAYC,CAAQ,EAC1C,SAAU,GACV,aAAc,GACd,cAAc,OACd,WAAY,CACV,UAAW,GACX,GAAI,sBACN,EACA,WAAY,CACV,YAAa,EACf,EACA,YAAa,CACX,IAAK,CACH,aAAc,GACd,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,cAAe,CACjB,CACF,EACA,UAAU,uFAET,SAAAO,EAAK,IAAI,CAACL,EAAMM,IACflB,EAACO,EAAA,CAAsC,UAAU,wBAC/C,SAAAP,EAACW,EAAA,CAAS,KAAMC,EAAM,GADN,YAAYM,CAAK,EAEnC,CACD,EACH,EAEAlB,EAAC,OAAI,UAAU,qRAAqR,GACtS,EACF,GACF,CAEJ,EAEA,IAAOmB,EAAQjB,EAAWW,CAAO",
+  "names": ["jsx", "jsxs", "withLayout", "Picture", "Text", "cn", "Swiper", "SwiperSlide", "Pagination", "Mousewheel", "FreeMode", "GiftItem", "item", "GiftBox", "props", "data", "className", "list", "index", "GiftBox_default"]
 }

package/dist/esm/biz-components/GiftBox/types.d.ts

@@ -0,0 +1,13 @@
+import type { Img } from '../../types/props.js';
+export type GiftBoxDataType = {
+    img: Img;
+    mobileImg: Img;
+    title: string;
+};
+export type GiftBoxData = {
+    list: GiftBoxDataType[];
+};
+export type GiftBoxType = {
+    data: GiftBoxData;
+    className?: string;
+};

package/dist/esm/biz-components/GiftBox/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/Graphic/index.d.ts

@@ -14,6 +14,13 @@ type GraphicType = {
     buttonText?: string;
     icon?: Img;
     theme?: Theme;
+    backgroundImage?: {
+        default?: Img;
+        tablet?: Img;
+        laptop?: Img;
+        desktop?: Img;
+        lgDesktop?: Img;
+    };
     extension?: {
         text: string;
         textDesc: string;

package/dist/esm/biz-components/Graphic/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import{useMediaQuery as z}from"react-responsive";import D,{useImperativeHandle as H,useRef as y,useState as l}from"react";import{createPortal as E}from"react-dom";import{cn as m,getLocalizedPath as T}from"../../helpers/utils.js";import{withLayout as R}from"../../shared/Styles.js";import j from"../SwiperBox/index.js";import{Button as _,Heading as Y,Picture as v,Text as A}from"../../components/index.js";import q from"../Title/index.js";import{VideoModal as Q}from"../VideoModal/index.js";import{TextModal as X}from"../TextModal/index.js";import{useExposure as k}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";import{useAiuiContext as Z}from"../AiuiProvider/index.js";const p="image",c="graphic",N="descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]",F=({data:e,configuration:s})=>{const d=y(null),[n,u]=l({visible:!1,x:0,y:0,text:""}),a=()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}},x=o=>{e?.description&&u({visible:!0,x:o.clientX,y:o.clientY,text:e.description})},h=()=>{u(o=>({...o,visible:!1}))};return k(d,{componentType:p,componentName:c,componentTitle:e?.title,componentDescription:e?.description,position:s?.index+1}),t("div",{ref:d,className:m(a(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:m("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:r("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:M(T(e?.href||"",s?.locale||"us"),`${p}_${c}`),className:"block size-full overflow-hidden","data-headless-nav-position":`''#${s?.index+1}`,"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(v,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):t("div",{className:"block size-full overflow-hidden",children:t(v,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),r("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[r("div",{className:m("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[r("div",{className:"flex-1 overflow-hidden",children:[t(A,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&r("div",{onMouseMove:x,onMouseLeave:h,children:[e?.title?t(Y,{html:e?.description,style:{color:e?.textColor},as:"h3",className:`${N} graphic-description`}):t("h3",{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${N} graphic-description-item`}),typeof window<"u"&&n.visible&&E(t("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${n.x+16}px`,top:`${n.y+16}px`},children:n.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:t(v,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(_,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:M(T(e?.href||"",s?.locale||"us"),`${p}_${c}`),"data-headless-nav-position":`''#${s?.index+1}`,"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},I=D.forwardRef(({data:e,className:s,...d},n)=>{const u=z({query:"(max-width: 768px)"}),a=y(null),[x,h]=l(!1),[o,C]=l(""),[V,$]=l(""),[P,G]=l(""),[L,g]=l(null),[S,w]=l(!1),{locale:B="us"}=Z(),b=f=>{const i=e?.items?.length>3,U=e?.items?.length>2;switch(f){case 1440:return i?4:e?.items?.length;case 1024:return i?3:e?.items?.length;case 768:return e?.items?.length===1?1:i||U?2.3:2;default:return e?.items?.length===1?1:1.2}};return H(n,()=>a.current),k(a,{componentType:p,componentName:c,componentTitle:e?.title}),r("div",{...d,ref:a,className:m("graphicBlock",s),children:[r("div",{className:"graphic-box",children:[e?.title&&t(q,{data:{title:e?.title}}),t(j,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:B,onVideoPlayBtnClick:(f,i)=>{h(!0),i?.isYouTube?$?.(i?.youtubeId||""):(C?.(i?.video?.url||""),G?.(i?.mobileVideo?.url||""))},onIconClick:f=>{w(!0),g(f)},title:e?.title}},Slide:F,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:b()},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:b(1440)}}})]}),t(Q,{visible:x,youTubeId:V,onCloseModal:()=>h(!1),videoUrl:u&&P||o}),t(X,{textVisible:S,extension:L?.extension,onCloseModal:()=>{w(!1),g(null)}})]})});I.displayName="Graphic";var ae=R(I);export{ae as default};
+"use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import{useMediaQuery as U}from"react-responsive";import z,{useImperativeHandle as H,useRef as k,useState as p}from"react";import{createPortal as E}from"react-dom";import{cn as b,getLocalizedPath as R}from"../../helpers/utils.js";import{withLayout as j}from"../../shared/Styles.js";import _ from"../SwiperBox/index.js";import{Button as Y,Heading as A,Picture as x,Text as q}from"../../components/index.js";import Q from"../Title/index.js";import{VideoModal as X}from"../VideoModal/index.js";import{TextModal as Z}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";const d="image",u="graphic",I=e=>{let s="";const l=o=>(o?.url&&(s=o.url),s),i=l(e.lgDesktop),a=l(e.desktop),n=l(e.laptop),h=l(e.tablet),m=e.default?.url;return[`${i} 9999`,`${a} 1919`,`${n} 1439`,`${h} 1024`,`${m} 768`].join(", ")},M="descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]",J=({data:e,configuration:s})=>{const l=k(null),[i,a]=p({visible:!1,x:0,y:0,text:""}),n=()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}},h=o=>{e?.description&&a({visible:!0,x:o.clientX,y:o.clientY,text:e.description})},m=()=>{a(o=>({...o,visible:!1}))};return y(l,{componentType:d,componentName:u,componentTitle:e?.title,componentDescription:e?.description,position:s?.index+1}),t("div",{ref:l,className:b(n(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:b("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:c("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:T(e?.href||"",`${d}_${u}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${d}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(x,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?I(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}):t("div",{className:"rounded-card block size-full overflow-hidden",children:t(x,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?I(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),c("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[c("div",{className:b("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[c("div",{className:"flex-1 overflow-hidden",children:[t(q,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&c("div",{onMouseMove:h,onMouseLeave:m,children:[e?.title?t(A,{html:e?.description,style:{color:e?.textColor},as:"h3",className:`${M} graphic-description`}):t("h3",{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${M} graphic-description-item`}),typeof window<"u"&&i.visible&&E(t("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${i.x+16}px`,top:`${i.y+16}px`},children:i.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:t(x,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(Y,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:T(R(e?.href||"",s?.locale||"us"),`${d}_${u}`),"data-headless-nav-position":`''#${s?.index+1}`,"data-headless-type-name":`${d}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},N=z.forwardRef(({data:e,className:s,...l},i)=>{const a=U({query:"(max-width: 768px)"}),n=k(null),[h,m]=p(!1),[o,$]=p(""),[C,V]=p(""),[S,P]=p(""),[G,v]=p(null),[D,w]=p(!1),{locale:L="us"}=F(),f=g=>{const r=e?.items?.length>3,B=e?.items?.length>2;switch(g){case 1440:return r?4:e?.items?.length;case 1024:return r?3:e?.items?.length;case 768:return e?.items?.length===1?1:r||B?2.3:2;default:return e?.items?.length===1?1:1.2}};return H(i,()=>n.current),y(n,{componentType:d,componentName:u,componentTitle:e?.title}),c("div",{...l,ref:n,className:b("graphicBlock",s),children:[c("div",{className:"graphic-box",children:[e?.title&&t(Q,{data:{title:e?.title}}),t(_,{id:"Graphic",className:b("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:L,onVideoPlayBtnClick:(g,r)=>{m(!0),r?.isYouTube?V?.(r?.youtubeId||""):($?.(r?.video?.url||""),P?.(r?.mobileVideo?.url||""))},onIconClick:g=>{w(!0),v(g)},title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),t(X,{visible:h,youTubeId:C,onCloseModal:()=>m(!1),videoUrl:a&&S||o}),t(Z,{textVisible:D,extension:G?.extension,onCloseModal:()=>{w(!1),v(null)}})]})});N.displayName="Graphic";var me=j(N);export{me as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Graphic/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n}\n\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${componentType}_${componentName}`\n              )}\n              className=\"block size-full overflow-hidden\"\n              data-headless-nav-position={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as=\"h3\"\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <h3\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <div\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        >\n                          {tooltip.text}\n                        </div>,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(\n                  getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-nav-position={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              locale,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Graphic", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "_", "Graphic_default"]
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  backgroundImage?: {\n    default?: Img\n    tablet?: Img\n    laptop?: Img\n    desktop?: Img\n    lgDesktop?: Img\n  }\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n}\n\n/**\n * \u5C06 backgroundImage \u5404\u5C3A\u5BF8\u5B57\u6BB5\u62FC\u63A5\u6210 Picture source \u5B57\u7B26\u4E32\u683C\u5F0F\n *\n * Picture \u5185\u90E8\u5339\u914D\u89C4\u5219\uFF1A\u5BF9\u6BCF\u4E2A deviceSize\uFF0C\u8FC7\u6EE4 breakpoint >= deviceSize \u7684\u6761\u76EE\uFF0C\u53D6\u6700\u540E\u4E00\u4E2A (.pop())\u3002\n * \u56E0\u6B64 source \u5B57\u7B26\u4E32\u5185\u65AD\u70B9\u5FC5\u987B\u300C\u7531\u5927\u5230\u5C0F\u300D\u6392\u5217\uFF0C\u624D\u80FD\u8BA9 .pop() \u5339\u914D\u5230\u6700\u63A5\u8FD1\u81EA\u8EAB\u7684\u65AD\u70B9\u3002\n *\n * \u65AD\u70B9\u5BF9\u5E94\u5173\u7CFB (max-width):\n *   lgDesktop \u2192 1919px  (\u22641920px, \u5145\u5F53\u6700\u5927\u5C4F\u5C4F\u5E55\u5339\u914D\u5C42)\n *   desktop  \u2192 1439px  (1440px - 1919px)\n *   laptop   \u2192 1024px  (1025px - 1439px)\n *   tablet   \u2192 767px   (768px - 1024px)\n *   default  \u2192 \u9996\u4F4D\u65E0\u65AD\u70B9\uFF0C\u5145\u5F53 <img src> (\u79FB\u52A8\u7AEF <768px \u5C4F\u5E55)\n *\n * \u7EE7\u627F\u89C4\u5219\uFF08\u5927 \u2192 \u5C0F\uFF09\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u81EA\u52A8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\uFF0C\u6700\u7EC8 fallback \u5230 default\n */\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n  // \u7531\u5927\u5230\u5C0F\u7EE7\u627F\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\n  let last = ''\n  const resolve = (img?: Img) => {\n    if (img?.url) last = img.url\n    return last\n  }\n  const lgDesktopSrc = resolve(bg.lgDesktop)\n  const desktopSrc = resolve(bg.desktop)\n  const laptopSrc = resolve(bg.laptop)\n  const tabletSrc = resolve(bg.tablet)\n  // default \u65E0\u65AD\u70B9\uFF0C\u4F5C\u4E3A\u9996\u4F4D\u5145\u5F53 <img src>(\u79FB\u52A8\u7AEF\u5C4F\u5E55)\n  const defaultSrc = bg.default?.url\n  return [\n    `${lgDesktopSrc} 9999`, // \u22641920px\n    `${desktopSrc} 1919`, // 1440-1919px\n    `${laptopSrc} 1439`, // 1025-1439px\n    `${tabletSrc} 1024`, // 768-1024px\n    `${defaultSrc} 768`, // \u9996\u4F4D\u65E0\u65AD\u70B9 \u2192 <img src>(<768px)\n  ].join(', ')\n}\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"rounded-card block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n            </a>\n          ) : (\n            <div className=\"rounded-card block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={\n                  data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n                }\n                alt={\n                  data?.backgroundImage?.lgDesktop?.alt ||\n                  data?.backgroundImage?.default?.alt ||\n                  data?.imgUrl?.alt ||\n                  ''\n                }\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as=\"h3\"\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <h3\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <div\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        >\n                          {tooltip.text}\n                        </div>,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(\n                  getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-nav-position={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n  const { locale = 'us' } = useAiuiContext()\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  return (\n    <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              locale,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Graphic", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "_", "Graphic_default"]
 }

package/dist/esm/biz-components/GraphicMore/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{cn as l}from"../../helpers/utils.js";import{withLayout as c}from"../../shared/Styles.js";import{Grid as u,GridItem as f}from"../../components/grid.js";import{Picture as p,Text as a}from"../../components/index.js";const x=({data:m,className:r,...n})=>{const{productsTab:s,shape:i}=m;return o("div",{...n,className:l(r),children:[t("div",{className:l("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#080A0F]"),children:t(u,{className:l("tablet:gap-4 grid grid-cols-12 gap-3 ",r),children:s?.map((e,d)=>o(f,{span:e.span,className:l("text-info-primary relative w-full overflow-hidden",i==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":e?.theme==="dark"}),children:[t(p,{source:e?.img?.url,className:"size-full",imgClassName:""}),o("div",{className:"footBottom desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4",children:[e?.title&&t(a,{html:e?.title,as:"p",className:"desktop:text-[32px] line-clamp-2 text-2xl font-bold leading-[1.2]"}),e?.description&&t(a,{html:e?.description,className:"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold"})]})]},d))})}),t("div",{className:"tablet:hidden block text-[#080A0F]",children:t("div",{className:" flex flex-wrap gap-[12px]",children:s?.map((e,d)=>o("div",{className:l("text-info-primary relative overflow-hidden",i==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":e?.theme==="dark"},e?.fullWidth==="true"?"w-full flex-none":" w-[calc(50%-6px)]"),children:[t(p,{source:e?.mobileImg?.url,className:"size-full",imgClassName:"h-full object-cover"}),o("div",{className:"footBottomMob desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4",children:[e?.title&&t(a,{html:e?.title,as:"p",className:"desktop:text-[32px] line-clamp-2 text-2xl font-bold leading-[1.2]"}),e?.description&&t(a,{html:e?.description,className:"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"})]})]},d))})})]})};var k=c(x);export{k as default};
+"use client";import{jsx as t,jsxs as o}from"react/jsx-runtime";import{cn as l}from"../../helpers/utils.js";import{withLayout as c}from"../../shared/Styles.js";import{Grid as u,GridItem as f}from"../../components/grid.js";import{Picture as p,Text as a}from"../../components/index.js";const x=({data:m,className:r,...n})=>{const{productsTab:s,shape:i}=m;return o("div",{...n,className:l(r),children:[t("div",{className:l("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#080A0F]"),children:t(u,{className:l("laptop:gap-4 grid grid-cols-12 gap-3 ",r),children:s?.map((e,d)=>o(f,{span:e.span,className:l("text-info-primary relative w-full overflow-hidden",i==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":e?.theme==="dark"}),children:[t(p,{source:e?.img?.url,className:"size-full",imgClassName:""}),o("div",{className:"footBottom desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4",children:[e?.title&&t(a,{html:e?.title,as:"p",className:"desktop:text-2xl line-clamp-2 text-xl font-bold leading-[1.2]"}),e?.description&&t(a,{html:e?.description,className:"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold"})]})]},d))})}),t("div",{className:"tablet:hidden block text-[#080A0F]",children:t("div",{className:" flex flex-wrap gap-[12px]",children:s?.map((e,d)=>o("div",{className:l("text-info-primary relative overflow-hidden",i==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":e?.theme==="dark"},e?.fullWidth==="true"?"w-full flex-none":" w-[calc(50%-6px)]"),children:[t(p,{source:e?.mobileImg?.url,className:"size-full",imgClassName:"h-full object-cover"}),o("div",{className:"footBottomMob desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4",children:[e?.title&&t(a,{html:e?.title,as:"p",className:"lg-desktop:text-2xl text-xl font-bold leading-[1.2]"}),e?.description&&t(a,{html:e?.description,className:"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold leading-[1.4]"})]})]},d))})})]})};var k=c(x);export{k as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/GraphicMore/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicMore/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type GraphicMoreDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  fullWidth: 'true' | 'false'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\ninterface GraphicMoreType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n}\n\nconst GraphicMore = ({ data, className, ...rest }: GraphicMoreType) => {\n  const { productsTab, shape } = data\n\n  return (\n    <div {...rest} className={cn(className)}>\n      <div\n        className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#080A0F]')}\n      >\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  '',\n                  {\n                    'aiui-dark': item?.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item?.img?.url} className=\"size-full\" imgClassName=\"\" />\n                <div className=\"footBottom desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4\">\n                  {item?.title && (\n                    <Text\n                      html={item?.title}\n                      as=\"p\"\n                      className=\"desktop:text-[32px] line-clamp-2 text-2xl font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {item?.description && (\n                    <Text\n                      html={item?.description}\n                      className=\"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold\"\n                    />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"tablet:hidden block text-[#080A0F]\">\n        <div className=\" flex flex-wrap gap-[12px]\">\n          {productsTab?.map((it, ind) => {\n            return (\n              <div\n                key={ind}\n                className={cn(\n                  'text-info-primary relative overflow-hidden',\n                  shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n                  { 'aiui-dark': it?.theme === 'dark' },\n                  it?.fullWidth === 'true'\n                    ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n                    : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n                )}\n              >\n                <Picture source={it?.mobileImg?.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"footBottomMob desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4\">\n                  {it?.title && (\n                    <Text\n                      html={it?.title}\n                      as=\"p\"\n                      className=\"desktop:text-[32px] line-clamp-2 text-2xl font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {it?.description && (\n                    <Text\n                      html={it?.description}\n                      className=\"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n                    />\n                  )}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
-  "mappings": "aA6CgB,cAAAA,EACA,QAAAC,MADA,oBA5ChB,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAiB9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIJ,EAE/B,OACER,EAAC,OAAK,GAAGU,EAAM,UAAWT,EAAGQ,CAAS,EACpC,UAAAV,EAAC,OACC,UAAWE,EAAG,sBAAuB,sEAAsE,EAE3G,SAAAF,EAACI,EAAA,CAAK,UAAWF,EAAG,wCAAyCQ,CAAS,EACnE,SAAAE,GAAa,IAAI,CAACE,EAAMC,IAErBd,EAACI,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWZ,EACT,oDACAW,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,UAAAd,EAACM,EAAA,CAAQ,OAAQQ,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,EACvEb,EAAC,OAAI,UAAU,kFACZ,UAAAa,GAAM,OACLd,EAACO,EAAA,CACC,KAAMO,GAAM,MACZ,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAM,aACLd,EAACO,EAAA,CACC,KAAMO,GAAM,YACZ,UAAU,2EACZ,GAEJ,IA1BKC,CA2BP,CAEH,EACH,EACF,EACAf,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OAAI,UAAU,6BACZ,SAAAY,GAAa,IAAI,CAACI,EAAIC,IAEnBhB,EAAC,OAEC,UAAWC,EACT,6CACAW,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,UAAAhB,EAACM,EAAA,CAAQ,OAAQU,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,EAC9Ff,EAAC,OAAI,UAAU,qFACZ,UAAAe,GAAI,OACHhB,EAACO,EAAA,CACC,KAAMS,GAAI,MACV,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAI,aACHhB,EAACO,EAAA,CACC,KAAMS,GAAI,YACV,UAAU,yFACZ,GAEJ,IAzBKC,CA0BP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOC,EAAQf,EAAWK,CAAW",
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type GraphicMoreDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  fullWidth: 'true' | 'false'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\ninterface GraphicMoreType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n}\n\nconst GraphicMore = ({ data, className, ...rest }: GraphicMoreType) => {\n  const { productsTab, shape } = data\n\n  return (\n    <div {...rest} className={cn(className)}>\n      <div\n        className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#080A0F]')}\n      >\n        <Grid className={cn('laptop:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  '',\n                  {\n                    'aiui-dark': item?.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item?.img?.url} className=\"size-full\" imgClassName=\"\" />\n                <div className=\"footBottom desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4\">\n                  {item?.title && (\n                    <Text\n                      html={item?.title}\n                      as=\"p\"\n                      className=\"desktop:text-2xl line-clamp-2 text-xl font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {item?.description && (\n                    <Text\n                      html={item?.description}\n                      className=\"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold\"\n                    />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"tablet:hidden block text-[#080A0F]\">\n        <div className=\" flex flex-wrap gap-[12px]\">\n          {productsTab?.map((it, ind) => {\n            return (\n              <div\n                key={ind}\n                className={cn(\n                  'text-info-primary relative overflow-hidden',\n                  shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n                  { 'aiui-dark': it?.theme === 'dark' },\n                  it?.fullWidth === 'true'\n                    ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n                    : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n                )}\n              >\n                <Picture source={it?.mobileImg?.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"footBottomMob desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4\">\n                  {it?.title && (\n                    <Text html={it?.title} as=\"p\" className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.2]\" />\n                  )}\n                  {it?.description && (\n                    <Text\n                      html={it?.description}\n                      className=\"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n                    />\n                  )}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
+  "mappings": "aA6CgB,cAAAA,EACA,QAAAC,MADA,oBA5ChB,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAiB9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIJ,EAE/B,OACER,EAAC,OAAK,GAAGU,EAAM,UAAWT,EAAGQ,CAAS,EACpC,UAAAV,EAAC,OACC,UAAWE,EAAG,sBAAuB,sEAAsE,EAE3G,SAAAF,EAACI,EAAA,CAAK,UAAWF,EAAG,wCAAyCQ,CAAS,EACnE,SAAAE,GAAa,IAAI,CAACE,EAAMC,IAErBd,EAACI,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWZ,EACT,oDACAW,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,UAAAd,EAACM,EAAA,CAAQ,OAAQQ,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,EACvEb,EAAC,OAAI,UAAU,kFACZ,UAAAa,GAAM,OACLd,EAACO,EAAA,CACC,KAAMO,GAAM,MACZ,GAAG,IACH,UAAU,gEACZ,EAEDA,GAAM,aACLd,EAACO,EAAA,CACC,KAAMO,GAAM,YACZ,UAAU,2EACZ,GAEJ,IA1BKC,CA2BP,CAEH,EACH,EACF,EACAf,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OAAI,UAAU,6BACZ,SAAAY,GAAa,IAAI,CAACI,EAAIC,IAEnBhB,EAAC,OAEC,UAAWC,EACT,6CACAW,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,UAAAhB,EAACM,EAAA,CAAQ,OAAQU,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,EAC9Ff,EAAC,OAAI,UAAU,qFACZ,UAAAe,GAAI,OACHhB,EAACO,EAAA,CAAK,KAAMS,GAAI,MAAO,GAAG,IAAI,UAAU,sDAAsD,EAE/FA,GAAI,aACHhB,EAACO,EAAA,CACC,KAAMS,GAAI,YACV,UAAU,yFACZ,GAEJ,IArBKC,CAsBP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOC,EAAQf,EAAWK,CAAW",
   "names": ["jsx", "jsxs", "cn", "withLayout", "Grid", "GridItem", "Picture", "Text", "GraphicMore", "data", "className", "rest", "productsTab", "shape", "item", "index", "it", "ind", "GraphicMore_default"]
 }

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as n}from"react/jsx-runtime";import{formatPrice as c}from"../../utils/index.js";import{useAiuiContext as u}from"../../../AiuiProvider/index.js";import{Text as r}from"../../../../components/index.js";import{cn as t}from"../../../../helpers/index.js";import{ShippingMethodMode as f}from"./type.js";const y=({item:e,index:p,active:d,toggleShipping:a,currencyCode:i,metafields:x,className:s=""})=>{const{copyWriting:m,locale:b="us"}=u();return n("div",{role:"button",tabIndex:0,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&a(e,p)},className:t("laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer  justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]",{"cursor-not-allowed opacity-60":e.disabled,"border-brand":d},s),onClick:()=>a(e,p),children:[n("div",{className:"relative",children:[o(r,{className:t("laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]",{}),as:"p",html:e.title}),o(r,{className:t("laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]",{}),as:"p",html:e.subtitle})]}),o(r,{className:t("relative my-auto h-fit text-xl font-bold",{}),as:"p",html:e.price?c({amount:e.price,currencyCode:i,locale:b,removeTrailingZeros:!0}):m?.free}),e.mode!==f.FREE&&o("div",{className:t("bg-brand-0 absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white"),children:x?.memberOnly})]})};var w=y;export{w as default};
+import{jsx as o,jsxs as a}from"react/jsx-runtime";import{formatPrice as b}from"../../utils/index.js";import{useAiuiContext as f}from"../../../AiuiProvider/index.js";import{Text as r}from"../../../../components/index.js";import{cn as t}from"../../../../helpers/index.js";import{ShippingMethodMode as u}from"./type.js";const g=({item:e,index:p,active:i,toggleShipping:l,currencyCode:n,metafields:x,className:s=""})=>{const{copyWriting:m,locale:c="us"}=f();return a("div",{role:"button",tabIndex:0,onKeyDown:d=>{(d.key==="Enter"||d.key===" ")&&l(e,p)},className:t("relative flex cursor-pointer  justify-between gap-[16px] desktop:gap-3 lg-desktop:gap-5 overflow-hidden rounded-box border-2 border-[#E8E8E8] px-4 text-[#1F2021]",{"cursor-not-allowed opacity-60":e.disabled,"border-brand":i},s),onClick:()=>l(e,p),children:[a("div",{className:"relative flex flex-col justify-center",children:[o(r,{className:t("laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]",{}),as:"p",html:e.title}),o(r,{className:t("laptop:text-[14px] lg-desktop:mt-1 text-[12px] font-bold leading-[1.4] text-[#6D6D6F]",{}),as:"p",html:e.subtitle})]}),o(r,{className:t("relative my-auto h-fit text-[18px] desktop:text-xl lg-desktop:text-2xl font-bold",{}),as:"p",html:e.price?b({amount:e.price,currencyCode:n,locale:c,removeTrailingZeros:!0}):m?.free}),e.mode!==u.FREE&&o("div",{className:t("bg-brand-0 absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] overflow-hidden px-[8px] py-[2px] desktop:text-[14px] text-[12px] font-bold leading-[1.4] text-white"),children:x?.memberOnly})]})};var w=g;export{w as default};
 //# sourceMappingURL=ShippingMethod.js.map

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingMethod.tsx"],
-  "sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n  item,\n  index,\n  active,\n  toggleShipping,\n  currencyCode,\n  metafields,\n  className = '',\n}: {\n  item: any\n  index: number\n  active: boolean\n  toggleShipping: (item: any, index: number) => void\n  currencyCode: string\n  metafields: any\n  className?: string\n}) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          toggleShipping(item, index)\n        }\n      }}\n      className={cn(\n        'laptop:rounded-2xl laptop:py-5 relative flex cursor-pointer  justify-between gap-[16px] overflow-hidden rounded-xl border-2 border-[#E8E8E8] p-4 text-[#1F2021]',\n        {\n          'cursor-not-allowed opacity-60': item.disabled,\n          'border-brand': active,\n        },\n        className\n      )}\n      onClick={() => toggleShipping(item, index)}\n    >\n      <div className=\"relative\">\n        <Text\n          className={cn('laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]', {})}\n          as=\"p\"\n          html={item.title}\n        />\n        <Text\n          className={cn('laptop:text-[14px] mt-[8px] text-[12px] font-bold leading-[1.4] text-[#6D6D6F]', {})}\n          as=\"p\"\n          html={item.subtitle}\n        />\n      </div>\n\n      <Text\n        className={cn('relative my-auto h-fit text-xl font-bold', {})}\n        as=\"p\"\n        html={\n          item.price\n            ? formatPrice({\n                amount: item.price,\n                currencyCode,\n                locale,\n                removeTrailingZeros: true,\n              })\n            : copyWriting?.free\n        }\n      />\n      {item.mode !== ShippingMethodMode.FREE && (\n        <div\n          className={cn(\n            'bg-brand-0 absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] px-[8px] py-[3px] text-[12px] font-bold leading-[1.4] text-white'\n          )}\n        >\n          {metafields?.memberOnly}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ShippingMethod\n"],
-  "mappings": "AA4CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA5CN,OAAS,eAAAC,MAAmB,uBAC5B,OAAS,kBAAAC,MAAsB,iCAC/B,OAAS,QAAAC,MAAY,kCACrB,OAAS,MAAAC,MAAU,+BACnB,OAAS,sBAAAC,MAA0B,YAEnC,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,EACd,IAQM,CACJ,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,EAAIb,EAAe,EAEtD,OACEF,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWgB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCN,EAAeH,EAAMC,CAAK,CAE9B,EACA,UAAWJ,EACT,kKACA,CACE,gCAAiCG,EAAK,SACtC,eAAgBE,CAClB,EACAI,CACF,EACA,QAAS,IAAMH,EAAeH,EAAMC,CAAK,EAEzC,UAAAR,EAAC,OAAI,UAAU,WACb,UAAAD,EAACI,EAAA,CACC,UAAWC,EAAG,gFAAiF,CAAC,CAAC,EACjG,GAAG,IACH,KAAMG,EAAK,MACb,EACAR,EAACI,EAAA,CACC,UAAWC,EAAG,iFAAkF,CAAC,CAAC,EAClG,GAAG,IACH,KAAMG,EAAK,SACb,GACF,EAEAR,EAACI,EAAA,CACC,UAAWC,EAAG,2CAA4C,CAAC,CAAC,EAC5D,GAAG,IACH,KACEG,EAAK,MACDN,EAAY,CACV,OAAQM,EAAK,MACb,aAAAI,EACA,OAAAI,EACA,oBAAqB,EACvB,CAAC,EACDD,GAAa,KAErB,EACCP,EAAK,OAASF,EAAmB,MAChCN,EAAC,OACC,UAAWK,EACT,0IACF,EAEC,SAAAQ,GAAY,WACf,GAEJ,CAEJ,EAEA,IAAOK,EAAQX",
+  "sourcesContent": ["import { formatPrice } from '../../utils/index.js'\nimport { useAiuiContext } from '../../../AiuiProvider/index.js'\nimport { Text } from '../../../../components/index.js'\nimport { cn } from '../../../../helpers/index.js'\nimport { ShippingMethodMode } from './type.js'\n\nconst ShippingMethod = ({\n  item,\n  index,\n  active,\n  toggleShipping,\n  currencyCode,\n  metafields,\n  className = '',\n}: {\n  item: any\n  index: number\n  active: boolean\n  toggleShipping: (item: any, index: number) => void\n  currencyCode: string\n  metafields: any\n  className?: string\n}) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n\n  return (\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={e => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          toggleShipping(item, index)\n        }\n      }}\n      className={cn(\n        'relative flex cursor-pointer  justify-between gap-[16px] desktop:gap-3 lg-desktop:gap-5 overflow-hidden rounded-box border-2 border-[#E8E8E8] px-4 text-[#1F2021]',\n        {\n          'cursor-not-allowed opacity-60': item.disabled,\n          'border-brand': active,\n        },\n        className\n      )}\n      onClick={() => toggleShipping(item, index)}\n    >\n      <div className=\"relative flex flex-col justify-center\">\n        <Text\n          className={cn('laptop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4]', {})}\n          as=\"p\"\n          html={item.title}\n        />\n        <Text\n          className={cn('laptop:text-[14px] lg-desktop:mt-1 text-[12px] font-bold leading-[1.4] text-[#6D6D6F]', {})}\n          as=\"p\"\n          html={item.subtitle}\n        />\n      </div>\n\n      <Text\n        className={cn('relative my-auto h-fit text-[18px] desktop:text-xl lg-desktop:text-2xl font-bold', {})}\n        as=\"p\"\n        html={\n          item.price\n            ? formatPrice({\n                amount: item.price,\n                currencyCode,\n                locale,\n                removeTrailingZeros: true,\n              })\n            : copyWriting?.free\n        }\n      />\n      {item.mode !== ShippingMethodMode.FREE && (\n        <div\n          className={cn(\n            'bg-brand-0 absolute -right-px -top-px rounded-bl-[8px] rounded-tr-[8px] overflow-hidden px-[8px] py-[2px] desktop:text-[14px] text-[12px] font-bold leading-[1.4] text-white'\n          )}\n        >\n          {metafields?.memberOnly}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ShippingMethod\n"],
+  "mappings": "AA4CM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA5CN,OAAS,eAAAC,MAAmB,uBAC5B,OAAS,kBAAAC,MAAsB,iCAC/B,OAAS,QAAAC,MAAY,kCACrB,OAAS,MAAAC,MAAU,+BACnB,OAAS,sBAAAC,MAA0B,YAEnC,MAAMC,EAAiB,CAAC,CACtB,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,UAAAC,EAAY,EACd,IAQM,CACJ,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,EAAIb,EAAe,EAEtD,OACEF,EAAC,OACC,KAAK,SACL,SAAU,EACV,UAAWgB,GAAK,EACVA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MACjCN,EAAeH,EAAMC,CAAK,CAE9B,EACA,UAAWJ,EACT,oKACA,CACE,gCAAiCG,EAAK,SACtC,eAAgBE,CAClB,EACAI,CACF,EACA,QAAS,IAAMH,EAAeH,EAAMC,CAAK,EAEzC,UAAAR,EAAC,OAAI,UAAU,wCACb,UAAAD,EAACI,EAAA,CACC,UAAWC,EAAG,gFAAiF,CAAC,CAAC,EACjG,GAAG,IACH,KAAMG,EAAK,MACb,EACAR,EAACI,EAAA,CACC,UAAWC,EAAG,wFAAyF,CAAC,CAAC,EACzG,GAAG,IACH,KAAMG,EAAK,SACb,GACF,EAEAR,EAACI,EAAA,CACC,UAAWC,EAAG,mFAAoF,CAAC,CAAC,EACpG,GAAG,IACH,KACEG,EAAK,MACDN,EAAY,CACV,OAAQM,EAAK,MACb,aAAAI,EACA,OAAAI,EACA,oBAAqB,EACvB,CAAC,EACDD,GAAa,KAErB,EACCP,EAAK,OAASF,EAAmB,MAChCN,EAAC,OACC,UAAWK,EACT,8KACF,EAEC,SAAAQ,GAAY,WACf,GAEJ,CAEJ,EAEA,IAAOK,EAAQX",
   "names": ["jsx", "jsxs", "formatPrice", "useAiuiContext", "Text", "cn", "ShippingMethodMode", "ShippingMethod", "item", "index", "active", "toggleShipping", "currencyCode", "metafields", "className", "copyWriting", "locale", "e", "ShippingMethod_default"]
 }

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as l}from"react/jsx-runtime";import{Dialog as d,DialogContent as g,Text as o,Link as m,DialogHeader as x,DialogTitle as c}from"../../../../components/index.js";const v=({data:e,onClose:p,open:s})=>t(d,{open:s,onOpenChange:p,children:l(g,{overlayClassName:"z-[100]",className:"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[t(x,{className:"laptop:pt-4 pb-2 pt-4",children:t(c,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:e?.title})}),l("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[t(o,{className:"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]",html:e?.shippingCoupon?.title}),t("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((i,a)=>l("li",{className:"flex text-[18px]",children:[l("span",{className:"text-[#86868C]",children:[a+1,"."]}),t("span",{className:"ml-[4px] font-bold text-[#86868C]",children:i})]},a))}),l("div",{className:"mt-[24px] md:mt-[16px]",children:[t(o,{className:"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]",html:e?.shippingService?.title}),t("div",{className:"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1",children:e?.shippingService?.list.map((i,a)=>l("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[t(o,{as:"p",className:"text-base font-bold !leading-[1.2] text-[#1d1d1f]",html:i.title}),t("div",{className:"mt-3 grid grid-flow-row",children:i.list.map((n,r)=>t(o,{as:"p",className:"text-base font-bold text-[#86868C]",children:n},r))})]},a))})]}),t(m,{className:"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});export{v as ShippingPolicyModal};
+import{jsx as t,jsxs as l}from"react/jsx-runtime";import{Dialog as g,DialogContent as d,Text as o,Link as x,DialogHeader as m,DialogTitle as c}from"../../../../components/index.js";const f=({data:e,onClose:s,open:p})=>t(g,{open:p,onOpenChange:s,children:l(d,{overlayClassName:"z-[100]",className:"tablet:top-1/2 tablet:max-w-[90vw] max-w-none rounded-t-box tablet:bottom-auto tablet:-translate-y-1/2 bg-white tablet:h-auto tablet:w-[896px] tablet:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]",children:[t(m,{className:"laptop:pt-4 pb-2 pt-4",children:t(c,{className:"laptop:text-[24px] text-left text-[20px] font-bold",children:e?.title})}),l("div",{className:"laptop:gap-8 laptop:py-8 py-6",children:[t(o,{className:"tablet:text-[20px] font-bold leading-[1.2] text-[#1d1d1f] text-[16px]",html:e?.shippingCoupon?.title}),t("ul",{className:"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]",children:e?.shippingCoupon?.list.map((a,i)=>l("li",{className:"flex text-[18px]",children:[l("span",{className:"text-[#86868C]",children:[i+1,"."]}),t("span",{className:"ml-[4px] font-bold text-[#86868C]",children:a})]},i))}),l("div",{className:"tablet:mt-[24px] mt-[16px]",children:[t(o,{className:"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]",html:e?.shippingService?.title}),t("div",{className:"mt-1 grid w-full tablet:grid-cols-2 gap-[12px] grid-cols-1",children:e?.shippingService?.list.map((a,i)=>l("div",{className:"rounded-[12px] bg-[#EAEAEC] p-4",children:[t(o,{as:"p",className:"text-base font-bold !leading-[1.2] text-[#1d1d1f]",html:a.title}),t("div",{className:"mt-3 grid grid-flow-row",children:a.list.map((n,r)=>t(o,{as:"p",className:"text-base font-bold text-[#86868C]",children:n},r))})]},i))})]}),t(x,{className:"text-brand-0 mt-8 block text-[16px] font-bold leading-[1.2] underline",href:`${e?.terms?.url}`,children:e?.terms?.text})]})]})});export{f as ShippingPolicyModal};
 //# sourceMappingURL=ShippingPolicyModal.js.map

package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/ShippingPolicyModal.tsx"],
-  "sourcesContent": ["import { Dialog, DialogContent, Text, Link, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"laptop:top-1/2 laptop:max-w-[90vw] laptop:bottom-auto laptop:-translate-y-1/2 laptop:h-auto laptop:w-[896px] laptop:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{data?.title}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n          <Text\n            className=\"text-[20px] font-bold leading-[1.2] text-[#1d1d1f] md:text-[16px]\"\n            html={data?.shippingCoupon?.title}\n          />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"flex text-[18px]\" key={index}>\n                <span className=\"text-[#86868C]\">{index + 1}.</span>\n                <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"mt-[24px] md:mt-[16px]\">\n            <Text className=\"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]\" html={data?.shippingService?.title} />\n            <div className=\"mt-1 grid w-full grid-cols-2 gap-[12px] md:grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n                  <Text as=\"p\" className=\"text-base font-bold !leading-[1.2] text-[#1d1d1f]\" html={item.title} />\n                  <div className=\"mt-3 grid grid-flow-row\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"text-brand-0 mt-8 block text-[16px] font-medium leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAsCU,cAAAA,EAUM,QAAAC,MAVN,oBAtCV,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,QAAAC,EAAM,QAAAC,EAAM,gBAAAC,EAAc,eAAAC,MAAmB,kCA8BtE,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDX,EAACE,EAAA,CAAO,KAAMS,EAAM,aAAcD,EAChC,SAAAT,EAACE,EAAA,CACC,iBAAiB,UACjB,UAAU,oWAEV,UAAAH,EAACM,EAAA,CAAa,UAAU,wBACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,qDAAsD,SAAAE,GAAM,MAAM,EAC3F,EACAR,EAAC,OAAI,UAAU,gCACb,UAAAD,EAACI,EAAA,CACC,UAAU,oEACV,KAAMK,GAAM,gBAAgB,MAC9B,EACAT,EAAC,MAAG,UAAU,4DACX,SAAAS,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCZ,EAAC,MAAG,UAAU,mBACZ,UAAAA,EAAC,QAAK,UAAU,iBAAkB,UAAAY,EAAQ,EAAE,KAAC,EAC7Cb,EAAC,QAAK,UAAU,oCAAqC,SAAAY,EAAK,IAFtBC,CAGtC,CACD,EACH,EACAZ,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACI,EAAA,CAAK,UAAU,sDAAsD,KAAMK,GAAM,iBAAiB,MAAO,EAC1GT,EAAC,OAAI,UAAU,yDACZ,SAAAS,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCZ,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACI,EAAA,CAAK,GAAG,IAAI,UAAU,oDAAoD,KAAMQ,EAAK,MAAO,EAC7FZ,EAAC,OAAI,UAAU,0BACZ,SAAAY,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBf,EAACI,EAAA,CAAK,GAAG,IAAI,UAAU,qCACpB,SAAAU,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,EAEAb,EAACK,EAAA,CACC,UAAU,0EACV,KAAM,GAAGI,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
+  "sourcesContent": ["import { Dialog, DialogContent, Text, Link, DialogHeader, DialogTitle } from '../../../../components/index.js'\n\ninterface Terms {\n  text: string\n  url: string\n}\n\ninterface List {\n  title: string\n  list: string[]\n}\n\ninterface ShippingService {\n  title: string\n  list: List[]\n}\n\ninterface Data {\n  title: string\n  shippingCoupon: List\n  shippingService: ShippingService\n  terms: Terms\n}\n\ninterface Props {\n  data: Data\n  onClose: () => void\n  open: boolean\n}\n\nexport const ShippingPolicyModal = ({ data, onClose, open }: Props) => {\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent\n        overlayClassName=\"z-[100]\"\n        className=\"tablet:top-1/2 tablet:max-w-[90vw] max-w-none rounded-t-box tablet:bottom-auto tablet:-translate-y-1/2 bg-white tablet:h-auto tablet:w-[896px] tablet:px-8 bottom-0 top-auto z-[110]  h-[calc(100vh-240px)] max-h-[80vh] translate-y-0 gap-0 overflow-hidden overflow-y-auto !py-0 px-4 [&_.dialog-close-button]:focus:!ring-0 [&_.dialog-close-icon]:!size-6 [&_.dialog-close-icon]:text-[#6D6D6F]\"\n      >\n        <DialogHeader className=\"laptop:pt-4 pb-2 pt-4\">\n          <DialogTitle className=\"laptop:text-[24px] text-left text-[20px] font-bold\">{data?.title}</DialogTitle>\n        </DialogHeader>\n        <div className=\"laptop:gap-8 laptop:py-8 py-6\">\n          <Text\n            className=\"tablet:text-[20px] font-bold leading-[1.2] text-[#1d1d1f] text-[16px]\"\n            html={data?.shippingCoupon?.title}\n          />\n          <ul className=\"mt-3 grid grid-flow-row gap-[4px] font-bold leading-[1.4]\">\n            {data?.shippingCoupon?.list.map((item, index) => (\n              <li className=\"flex text-[18px]\" key={index}>\n                <span className=\"text-[#86868C]\">{index + 1}.</span>\n                <span className=\"ml-[4px] font-bold text-[#86868C]\">{item}</span>\n              </li>\n            ))}\n          </ul>\n          <div className=\"tablet:mt-[24px] mt-[16px]\">\n            <Text className=\"text-[18px] font-bold leading-[1.2]  text-[#1d1d1f]\" html={data?.shippingService?.title} />\n            <div className=\"mt-1 grid w-full tablet:grid-cols-2 gap-[12px] grid-cols-1\">\n              {data?.shippingService?.list.map((item, index) => (\n                <div className=\"rounded-[12px] bg-[#EAEAEC] p-4\" key={index}>\n                  <Text as=\"p\" className=\"text-base font-bold !leading-[1.2] text-[#1d1d1f]\" html={item.title} />\n                  <div className=\"mt-3 grid grid-flow-row\">\n                    {item.list.map((subItem, subIndex) => (\n                      <Text as=\"p\" className=\"text-base font-bold text-[#86868C]\" key={subIndex}>\n                        {subItem}\n                      </Text>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          <Link\n            className=\"text-brand-0 mt-8 block text-[16px] font-bold leading-[1.2] underline\"\n            href={`${data?.terms?.url}`}\n          >\n            {data?.terms?.text}\n          </Link>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAsCU,cAAAA,EAUM,QAAAC,MAVN,oBAtCV,OAAS,UAAAC,EAAQ,iBAAAC,EAAe,QAAAC,EAAM,QAAAC,EAAM,gBAAAC,EAAc,eAAAC,MAAmB,kCA8BtE,MAAMC,EAAsB,CAAC,CAAE,KAAAC,EAAM,QAAAC,EAAS,KAAAC,CAAK,IAEtDX,EAACE,EAAA,CAAO,KAAMS,EAAM,aAAcD,EAChC,SAAAT,EAACE,EAAA,CACC,iBAAiB,UACjB,UAAU,sYAEV,UAAAH,EAACM,EAAA,CAAa,UAAU,wBACtB,SAAAN,EAACO,EAAA,CAAY,UAAU,qDAAsD,SAAAE,GAAM,MAAM,EAC3F,EACAR,EAAC,OAAI,UAAU,gCACb,UAAAD,EAACI,EAAA,CACC,UAAU,wEACV,KAAMK,GAAM,gBAAgB,MAC9B,EACAT,EAAC,MAAG,UAAU,4DACX,SAAAS,GAAM,gBAAgB,KAAK,IAAI,CAACG,EAAMC,IACrCZ,EAAC,MAAG,UAAU,mBACZ,UAAAA,EAAC,QAAK,UAAU,iBAAkB,UAAAY,EAAQ,EAAE,KAAC,EAC7Cb,EAAC,QAAK,UAAU,oCAAqC,SAAAY,EAAK,IAFtBC,CAGtC,CACD,EACH,EACAZ,EAAC,OAAI,UAAU,6BACb,UAAAD,EAACI,EAAA,CAAK,UAAU,sDAAsD,KAAMK,GAAM,iBAAiB,MAAO,EAC1GT,EAAC,OAAI,UAAU,6DACZ,SAAAS,GAAM,iBAAiB,KAAK,IAAI,CAACG,EAAMC,IACtCZ,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACI,EAAA,CAAK,GAAG,IAAI,UAAU,oDAAoD,KAAMQ,EAAK,MAAO,EAC7FZ,EAAC,OAAI,UAAU,0BACZ,SAAAY,EAAK,KAAK,IAAI,CAACE,EAASC,IACvBf,EAACI,EAAA,CAAK,GAAG,IAAI,UAAU,qCACpB,SAAAU,GAD8DC,CAEjE,CACD,EACH,IARoDF,CAStD,CACD,EACH,GACF,EAEAb,EAACK,EAAA,CACC,UAAU,wEACV,KAAM,GAAGI,GAAM,OAAO,GAAG,GAExB,SAAAA,GAAM,OAAO,KAChB,GACF,GACF,EACF",
   "names": ["jsx", "jsxs", "Dialog", "DialogContent", "Text", "Link", "DialogHeader", "DialogTitle", "ShippingPolicyModal", "data", "onClose", "open", "item", "index", "subItem", "subIndex"]
 }

package/dist/esm/biz-components/Listing/components/PaidShipping/index.js

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as T}from"react/jsx-runtime";import{Text as c}from"../../../../components/index.js";import{useCallback as h,useEffect as L,useMemo as b,useState as g}from"react";import{cn as O}from"../../../../helpers/index.js";import z from"./ShippingMethod.js";import{ShippingPolicyModal as D}from"./ShippingPolicyModal.js";import{isWeightAvailable as v}from"./utils.js";import E from"./LearnMore.js";import{useBizProductContext as I}from"../../BizProductProvider.js";import{withLayout as V}from"../../../../shared/Styles.js";const W=({metafields:p,productList:m,onShippingInfoChange:u,variant:y,className:P})=>{const{isLogin:w,openSignInPopup:_}=I(),[C,M]=g(!1),[x,N]=g(!1),[A,f]=g(null),S=b(()=>m.reduce((e,i)=>e+(i?.variant?.weight||0),0),[m]),r=h((e,i,n)=>({id:`${e.__code}__${e.price}`,code:e.__code,mode:e.__mode,title:e.title,disabled:!v(i,e),price:e.price,subtitle:e.subtitle,tag:n!==0?p?.memberOnly:"",error:v(i,e)?"":p.overWeightError}),[p?.memberOnly,p.overWeightError]),l=b(()=>{const e=p?.list?.map((i,n)=>r(i,S,n));return e?.reduce((i,n)=>{const d=e.filter(t=>t.code==n.code);let s;return d.every(t=>t.disabled)?s=d[d.length-1]:s=d.find(t=>!t.disabled),i.find(t=>s.id===t.id)?i:[...i,s]},[])},[r,p?.list,S]),a=h(e=>{u({selected_delivery_code:e.code,selected_delivery_mode:e.mode})},[u]);L(()=>{if(p?.list?.length>0&&!x){const e=r(p?.list[0],0,0);f(e),a(e),N(!0)}},[r,p?.list,a,x]);const k=h(e=>{e.disabled||(f(e),a(e))},[w,l,y.sku,a,_]);return T("div",{id:"ipc-product-paid-shipping",className:O(" laptop-md:mt-[96px] lg-desktop:mt-[128px] tablet:px-8 laptop:px-16 laptop-md:px-0 mt-16 px-4",P),children:[o("div",{className:"flex flex-wrap justify-between space-x-2 md:space-x-1",children:o(c,{className:"text-[16px] font-bold leading-[1.2] text-[#1F2021]",html:p?.title})}),T("div",{className:"lg-desktop:mt-[16px] laptop-md:flex-nowrap mt-[12px] flex flex-wrap gap-[12px] overflow-hidden",children:[l.map((e,i)=>o(z,{index:i,item:e,active:A?.code===e.code,toggleShipping:()=>k(e),currencyCode:y.price.currencyCode,metafields:p,className:"laptop:w-[calc(50%-6px)] laptop-md:flex-1 w-full"},i)),o(E,{setOpenShippingPolicyModal:M,metafields:p,className:"laptop:w-[calc(50%-6px)] laptop-md:w-[calc(33.33%-16px)] lg-desktop:w-[calc(33.33%-24px)] w-full"})]}),l.find(e=>e?.error)&&o(c,{className:"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]",html:l.find(e=>e.error)?.error,as:"p"}),p?.seeAvailableArea&&o(c,{as:"div",className:"mt-[16px] font-bold leading-[1.4] text-[#080A0F] [&_a]:underline",html:p?.seeAvailableArea}),p?.shippingPolicy&&o(D,{data:p?.shippingPolicy,onClose:()=>M(!1),open:C})]})};var R=V(W);export{R as default};
+import{jsx as o,jsxs as T}from"react/jsx-runtime";import{Text as c}from"../../../../components/index.js";import{useCallback as h,useEffect as L,useMemo as b,useState as g}from"react";import{cn as O}from"../../../../helpers/index.js";import z from"./ShippingMethod.js";import{ShippingPolicyModal as D}from"./ShippingPolicyModal.js";import{isWeightAvailable as v}from"./utils.js";import E from"./LearnMore.js";import{useBizProductContext as I}from"../../BizProductProvider.js";import{withLayout as V}from"../../../../shared/Styles.js";const W=({metafields:p,productList:m,onShippingInfoChange:u,variant:y,className:P})=>{const{isLogin:w,openSignInPopup:_}=I(),[C,x]=g(!1),[M,N]=g(!1),[k,f]=g(null),S=b(()=>m.reduce((e,i)=>e+(i?.variant?.weight||0),0),[m]),r=h((e,i,n)=>({id:`${e.__code}__${e.price}`,code:e.__code,mode:e.__mode,title:e.title,disabled:!v(i,e),price:e.price,subtitle:e.subtitle,tag:n!==0?p?.memberOnly:"",error:v(i,e)?"":p.overWeightError}),[p?.memberOnly,p.overWeightError]),l=b(()=>{const e=p?.list?.map((i,n)=>r(i,S,n));return e?.reduce((i,n)=>{const d=e.filter(t=>t.code==n.code);let s;return d.every(t=>t.disabled)?s=d[d.length-1]:s=d.find(t=>!t.disabled),i.find(t=>s.id===t.id)?i:[...i,s]},[])},[r,p?.list,S]),a=h(e=>{u({selected_delivery_code:e.code,selected_delivery_mode:e.mode})},[u]);L(()=>{if(p?.list?.length>0&&!M){const e=r(p?.list[0],0,0);f(e),a(e),N(!0)}},[r,p?.list,a,M]);const A=h(e=>{e.disabled||(f(e),a(e))},[w,l,y.sku,a,_]);return T("div",{id:"ipc-product-paid-shipping",className:O(" laptop-md:mt-[96px] lg-desktop:mt-[128px] tablet:px-8 laptop:px-16 laptop-md:px-0 mt-16 px-4",P),children:[o("div",{className:"flex flex-wrap justify-between space-x-2 md:space-x-1",children:o(c,{className:"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]",html:p?.title})}),T("div",{className:"lg-desktop:mt-[16px] laptop-md:flex-nowrap mt-[12px] flex flex-wrap gap-[12px] overflow-hidden",children:[l.map((e,i)=>o(z,{index:i,item:e,active:k?.code===e.code,toggleShipping:()=>A(e),currencyCode:y.price.currencyCode,metafields:p,className:"laptop:w-[calc(50%-6px)] laptop-md:flex-1 w-full"},i)),o(E,{setOpenShippingPolicyModal:x,metafields:p,className:"laptop:w-[calc(50%-6px)] laptop-md:w-[calc(33.33%-16px)] lg-desktop:w-[calc(33.33%-24px)] w-full"})]}),l.find(e=>e?.error)&&o(c,{className:"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]",html:l.find(e=>e.error)?.error,as:"p"}),p?.seeAvailableArea&&o(c,{as:"div",className:"mt-[16px] font-bold leading-[1.4] text-[#080A0F] [&_a]:underline",html:p?.seeAvailableArea}),p?.shippingPolicy&&o(D,{data:p?.shippingPolicy,onClose:()=>x(!1),open:C})]})};var R=V(W);export{R as default};
 //# sourceMappingURL=index.js.map