npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1762243303200 → 1.0.26-alpha.1762264700743 - Mend

@anker-in/headless-ui 1.0.26-alpha.1762243303200 → 1.0.26-alpha.1762264700743

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

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

@@ -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 } from './types.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\n// import { withStyles } from '../../shared/Styles.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(({ data, className }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current!)\n\n  return (\n    <div ref={innerRef} className={cn(className)}>\n      <div>{data?.productData?.map((item: any, index: number) => <FaqItem key={index} data={item} />)}</div>\n    </div>\n  )\n})\n\nFaq.displayName = 'Faq'\n\nconst FaqItem = ({ data }: { data: ItemType }) => {\n  const [open, setOpen] = useState(false)\n\n  const handleToggle = () => {\n    setOpen(!open)\n  }\n\n  return (\n    <div className=\"tablet:py-[24px] border-b border-[#E4E5E6] py-[16px]\">\n      <div>\n        <div\n          onClick={handleToggle}\n          className=\"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-[16px]\"\n        >\n          <Text\n            html={data?.title}\n            className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#1D1D1F]\"\n          />\n          <div className=\" transition-transform duration-300\">\n            <Picture\n              source={data?.img?.url}\n              className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n            />\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-500',\n            open ? 'mt-[8px] max-h-[500px] opacity-100' : 'max-h-0 opacity-0'\n          )}\n        >\n          <Text\n            html={data?.desc}\n            className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.4] text-[#6D6D6F]\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
-  "mappings": "aAciE,cAAAA,EAiBzD,QAAAC,MAjByD,oBAbjE,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAE7D,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAMR,EAAM,WAAqC,CAAC,CAAE,KAAAS,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnF,MAAMC,EAAWV,EAAuB,IAAI,EAC5C,OAAAD,EAAoBU,EAAK,IAAMC,EAAS,OAAQ,EAG9Cd,EAAC,OAAI,IAAKc,EAAU,UAAWN,EAAGI,CAAS,EACzC,SAAAZ,EAAC,OAAK,SAAAW,GAAM,aAAa,IAAI,CAACI,EAAWC,IAAkBhB,EAACiB,EAAA,CAAoB,KAAMF,GAAbC,CAAmB,CAAE,EAAE,EAClG,CAEJ,CAAC,EAEDN,EAAI,YAAc,MAElB,MAAMO,EAAU,CAAC,CAAE,KAAAN,CAAK,IAA0B,CAChD,KAAM,CAACO,EAAMC,CAAO,EAAId,EAAS,EAAK,EAMtC,OACEL,EAAC,OAAI,UAAU,uDACb,SAAAC,EAAC,OACC,UAAAA,EAAC,OACC,QARa,IAAM,CACzBkB,EAAQ,CAACD,CAAI,CACf,EAOQ,UAAU,iFAEV,UAAAlB,EAACO,EAAA,CACC,KAAMI,GAAM,MACZ,UAAU,gGACZ,EACAX,EAAC,OAAI,UAAU,qCACb,SAAAA,EAACM,EAAA,CACC,OAAQK,GAAM,KAAK,IACnB,UAAWH,EAAG,6CAA8CU,GAAQ,YAAY,EAClF,EACF,GACF,EAGAlB,EAAC,OACC,UAAWQ,EACT,+CACAU,EAAO,qCAAuC,mBAChD,EAEA,SAAAlB,EAACO,EAAA,CACC,KAAMI,GAAM,KACZ,UAAU,gGACZ,EACF,GACF,EACF,CAEJ,EAEAM,EAAQ,YAAc,UAEtB,IAAOG,EAAQX,EAAWC,CAAG",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Picture", "Text", "cn", "withLayout", "Faq", "data", "className", "ref", "innerRef", "item", "index", "FaqItem", "open", "setOpen", "Faq_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType } from './types.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(({ data, className }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current!)\n\n  return (\n    <div ref={innerRef} className={cn(className)}>\n      <div>{data?.productData?.map((item: any, index: number) => <FaqItem key={index} data={item} />)}</div>\n    </div>\n  )\n})\n\nFaq.displayName = 'Faq'\n\nconst FaqItem = ({ data }: { data: ItemType }) => {\n  const [open, setOpen] = useState(false)\n\n  const handleToggle = () => {\n    setOpen(!open)\n  }\n\n  return (\n    <div className=\"tablet:py-6 border-b border-[#E4E5E6] py-4\">\n      <div>\n        <div\n          onClick={handleToggle}\n          className=\"tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4\"\n        >\n          <Text\n            html={data?.title}\n            className=\"desktop:text-base lg-desktop:text-lg text-sm font-bold leading-[1.4] text-[#1D1D1F]\"\n          />\n          <div className=\" transition-transform duration-300\">\n            {/* <Picture\n              source={data?.img?.url}\n              className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n            /> */}\n            <svg xmlns=\"http://www.w3.org/2000/svg\" className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')} width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\">\n              <path 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\" fill=\"#1D1D1F\"/>\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          )}\n        >\n          <Text\n            html={data?.desc}\n            className=\"desktop:text-base lg-desktop:text-lg text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
+  "mappings": "aAaiE,cAAAA,EAiBzD,QAAAC,MAjByD,oBAZjE,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAE7D,OAAkB,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAMP,EAAM,WAAqC,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnF,MAAMC,EAAWT,EAAuB,IAAI,EAC5C,OAAAD,EAAoBS,EAAK,IAAMC,EAAS,OAAQ,EAG9Cb,EAAC,OAAI,IAAKa,EAAU,UAAWN,EAAGI,CAAS,EACzC,SAAAX,EAAC,OAAK,SAAAU,GAAM,aAAa,IAAI,CAACI,EAAWC,IAAkBf,EAACgB,EAAA,CAAoB,KAAMF,GAAbC,CAAmB,CAAE,EAAE,EAClG,CAEJ,CAAC,EAEDN,EAAI,YAAc,MAElB,MAAMO,EAAU,CAAC,CAAE,KAAAN,CAAK,IAA0B,CAChD,KAAM,CAACO,EAAMC,CAAO,EAAIb,EAAS,EAAK,EAMtC,OACEL,EAAC,OAAI,UAAU,6CACb,SAAAC,EAAC,OACC,UAAAA,EAAC,OACC,QARa,IAAM,CACzBiB,EAAQ,CAACD,CAAI,CACf,EAOQ,UAAU,4EAEV,UAAAjB,EAACM,EAAA,CACC,KAAMI,GAAM,MACZ,UAAU,sFACZ,EACAV,EAAC,OAAI,UAAU,qCAKb,SAAAA,EAAC,OAAI,MAAM,6BAA6B,UAAWO,EAAG,6CAA8CU,GAAQ,YAAY,EAAG,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACzK,SAAAjB,EAAC,QAAK,EAAE,kUAAkU,KAAK,UAAS,EAC1V,EACF,GACF,EAGAA,EAAC,OACC,UAAWO,EACT,8CACAU,EAAO,iCAAmC,mBAC5C,EAEA,SAAAjB,EAACM,EAAA,CACC,KAAMI,GAAM,KACZ,UAAU,sFACZ,EACF,GACF,EACF,CAEJ,EAEAM,EAAQ,YAAc,UAEtB,IAAOG,EAAQX,EAAWC,CAAG",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Text", "cn", "withLayout", "Faq", "data", "className", "ref", "innerRef", "item", "index", "FaqItem", "open", "setOpen", "Faq_default"]
 }

package/dist/esm/biz-components/Features/index.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import type { Img } from '../../types/props.js';
+export type FeaturesDataType = {
+    img: Img;
+    mobileImg: Img;
+    title: string;
+    description: string;
+    numberOne: string;
+    textOne: string;
+    numberTwo: string;
+    textTwo: string;
+    icon: Img;
+};
+type FeaturesType = {
+    data: {
+        title: string;
+        img: Img;
+        mobileImg: Img;
+        list: FeaturesDataType[];
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<FeaturesType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

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

	@@ -0,0 +1,2 @@
1	+ "use client";import{Fragment as n,jsx as t,jsxs as a}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as r}from"../../shared/Styles.js";import{Picture as p,Text as s}from"../../components/index.js";const x=d=>{const{data:l,className:g}=d,{list:i}=l;return t(n,{children:a("div",{className:"",children:[l?.title&&t("div",{className:"pb-[24px] desktop:w-[800px]",children:t(s,{html:l?.title,className:" desktop:!text-[32px] line-clamp-3 lg-desktop:text-lg desktop:text-base !text-[24px] [&__strong]:!font-bold !leading-[1.2]"})}),l?.img?.url&&t(p,{className:"aspect-[1664/560] rounded-2xl md-tablet:hidden",imgClassName:"",source:l?.img?.url,alt:l?.img?.alt\|\|""}),l?.mobileImg?.url&&t(p,{className:"aspect-[358/360] rounded-2xl tablet:hidden",imgClassName:"",source:l?.mobileImg?.url,alt:l?.mobileImg?.alt\|\|""}),t("div",{className:"",children:t("div",{className:"flex flex-col gap-4",children:i.map((e,o)=>a("div",{className:`desktop:flex pt-[64px] gap-4 tablet:gap-8 laptop:gap-[64px] ${o%2===0?"laptop:flex-row-reverse":""}`,children:[a("div",{className:"flex flex-col flex-shrink-0 justify-center desktop:w-[500px] lg-desktop:w-[640px]",children:[t(s,{html:e?.title,className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[32px] text-[24px] [&__strong]:!font-bold leading-[1.2]"}),t(s,{html:e?.description,className:"graphic-title pt-[4px] desktop:pt-[8px] lg-desktop:text-lg desktop:text-base lg-desktop:text-[18px] desktop:text-[16px] text-[14px] [&__strong]:!font-bold leading-[1.2]"}),e?.numberOne&&a("div",{className:"desktop:pt-[48px] pt-[24px] flex desktop:flex-col flex-row desktop:gap-[48px] gap-[24px]",children:[a("div",{className:"",children:[t(s,{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 line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[64px] text-[40px] [&__strong]:!font-bold leading-[1]"}),t(s,{html:e?.textOne,className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[18px] text-[14px] [&__strong]:!font-bold leading-[1.4]"})]}),a("div",{children:[t(s,{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 line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[64px] text-[40px] [&__strong]:!font-bold leading-[1]"}),t(s,{html:e?.textTwo,className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[18px] text-[14px] [&_*_strong]:!font-bold leading-[1.4]"})]})]}),e?.icon?.url&&t("div",{className:"pt-[24px] desktop:pt-[24px] lg-desktop:pt-[48px]",children:t(p,{className:"w-[358px] desktop:w-[368px] lg-desktop:w-[488px]",source:e?.icon?.url,alt:e?.icon?.alt\|\|""})})]}),t("div",{className:"aspect-[964/560] md-tablet:hidden rounded-2xl overflow-hidden pt-[24px] laptop:pt-[32px] desktop:pt-[0px]",children:t(p,{className:"w-full h-full object-cover ",source:e?.img?.url,alt:e?.img?.alt\|\|""})}),t("div",{className:"aspect-[358/360] tablet:hidden rounded-2xl overflow-hidden mt-[24px]",children:t(p,{className:"w-full h-full object-cover",source:e?.mobileImg?.url,alt:e?.mobileImg?.alt\|\|""})})]},o))})})]})})};var f=r(x);export{f as default};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Features/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\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}\n\ntype FeaturesType = {\n  data: {\n    title: string\n    img: Img\n    mobileImg: Img\n    list: FeaturesDataType[]\n  }\n  className?: string\n}\n\nconst Features = (props: FeaturesType) => {\n  const { data, className } = props\n  const { list } = data\n\n  return (\n    <>\n      <div className=''>\n        {data?.title && (\n            <div className='pb-[24px] desktop:w-[800px]'>\n            <Text\n                html={data?.title}\n                className=\" desktop:!text-[32px] line-clamp-3 lg-desktop:text-lg desktop:text-base !text-[24px] [&_*_strong]:!font-bold !leading-[1.2]\"\n            />\n            </div>\n        )}\n\n        {data?.img?.url && (\n            <Picture\n                className=\"aspect-[1664/560] rounded-2xl md-tablet:hidden\"\n                imgClassName=\"\"\n                source={data?.img?.url}\n                alt={data?.img?.alt || ''}\n            />\n        )}\n        {data?.mobileImg?.url && (\n            <Picture\n                className=\"aspect-[358/360] rounded-2xl tablet:hidden\"\n                imgClassName=\"\"\n                source={data?.mobileImg?.url}\n                alt={data?.mobileImg?.alt || ''}\n            />\n        )}\n        <div className=''>\n        <div className='flex flex-col gap-4'>\n            {list.map((item, index) => (\n                <div key={index} className={`desktop:flex pt-[64px] gap-4 tablet:gap-8 laptop:gap-[64px] ${index % 2 === 0 ? 'laptop:flex-row-reverse' : ''}`}>\n                    <div className='flex flex-col flex-shrink-0 justify-center desktop:w-[500px] lg-desktop:w-[640px]'>\n                        <Text\n                            html={item?.title}\n                            className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[32px] text-[24px] [&_*_strong]:!font-bold leading-[1.2]\"\n                        />\n                        <Text\n                            html={item?.description}\n                            className=\"graphic-title pt-[4px] desktop:pt-[8px] lg-desktop:text-lg desktop:text-base lg-desktop:text-[18px] desktop:text-[16px] text-[14px] [&_*_strong]:!font-bold leading-[1.2]\"\n                        />\n                        {/* \u6E10\u53D8\u8272 */}\n                        {item?.numberOne && \n                        <div className='desktop:pt-[48px] pt-[24px] flex desktop:flex-col flex-row desktop:gap-[48px] gap-[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 line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[64px] text-[40px] [&_*_strong]:!font-bold leading-[1]\"\n                            />\n                            <Text\n                                html={item?.textOne}\n                                className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[18px] text-[14px] [&_*_strong]:!font-bold leading-[1.4]\"\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 line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[64px] text-[40px] [&_*_strong]:!font-bold leading-[1]\"\n                                />\n                                <Text\n                                    html={item?.textTwo}\n                                    className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base desktop:text-[18px] text-[14px] [&_*_strong]:!font-bold leading-[1.4]\"\n                                />\n                            </div>\n                            \n                            \n                        </div>\n                        }\n                        {item?.icon?.url && \n                        <div className='pt-[24px] desktop:pt-[24px] lg-desktop:pt-[48px]'><Picture className='w-[358px] desktop:w-[368px] lg-desktop:w-[488px]' source={item?.icon?.url} alt={item?.icon?.alt || ''} /></div>\n                        }\n                    </div>\n                    <div className='aspect-[964/560] md-tablet:hidden rounded-2xl overflow-hidden pt-[24px] laptop:pt-[32px] desktop:pt-[0px]'>\n                        <Picture className='w-full h-full object-cover ' source={item?.img?.url} alt={item?.img?.alt || ''} />\n                    </div>\n                    <div className='aspect-[358/360] tablet:hidden rounded-2xl overflow-hidden mt-[24px]'>\n                        <Picture className='w-full h-full object-cover' source={item?.mobileImg?.url} alt={item?.mobileImg?.alt || ''} />\n                    </div>\n                </div>\n            ))}\n        </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(Features)\n"],
+  "mappings": "aAkCI,mBAAAA,EAIQ,OAAAC,EAuCgB,QAAAC,MA3CxB,oBAjCJ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAwB9B,MAAMC,EAAYC,GAAwB,CACxC,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAU,GACZ,UAAAM,GAAM,OACHP,EAAC,OAAI,UAAU,8BACf,SAAAA,EAACI,EAAA,CACG,KAAMG,GAAM,MACZ,UAAU,8HACd,EACA,EAGHA,GAAM,KAAK,KACRP,EAACG,EAAA,CACG,UAAU,iDACV,aAAa,GACb,OAAQI,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GAC3B,EAEHA,GAAM,WAAW,KACdP,EAACG,EAAA,CACG,UAAU,6CACV,aAAa,GACb,OAAQI,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GACjC,EAEJP,EAAC,OAAI,UAAU,GACf,SAAAA,EAAC,OAAI,UAAU,sBACV,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACbV,EAAC,OAAgB,UAAW,+DAA+DU,EAAQ,IAAM,EAAI,0BAA4B,EAAE,GACvI,UAAAV,EAAC,OAAI,UAAU,oFACX,UAAAD,EAACI,EAAA,CACG,KAAMM,GAAM,MACZ,UAAU,wIACd,EACAV,EAACI,EAAA,CACG,KAAMM,GAAM,YACZ,UAAU,4KACd,EAECA,GAAM,WACPT,EAAC,OAAI,UAAU,2FACX,UAAAA,EAAC,OAAI,UAAU,GACX,UAAAD,EAACI,EAAA,CACD,MAAO,CACH,WAAY,6DACZ,eAAgB,OAChB,qBAAsB,OACtB,oBAAqB,cACrB,MAAO,aACX,EACA,KAAMM,GAAM,UACZ,UAAU,sIACd,EACAV,EAACI,EAAA,CACG,KAAMM,GAAM,QACZ,UAAU,wIACd,GACA,EACAT,EAAC,OACG,UAAAD,EAACI,EAAA,CACG,MAAO,CACH,WAAY,6DACZ,eAAgB,OAChB,qBAAsB,OACtB,oBAAqB,cACrB,MAAO,aACX,EACA,KAAMM,GAAM,UACZ,UAAU,sIACd,EACAV,EAACI,EAAA,CACG,KAAMM,GAAM,QACZ,UAAU,wIACd,GACJ,GAGJ,EAECA,GAAM,MAAM,KACbV,EAAC,OAAI,UAAU,mDAAmD,SAAAA,EAACG,EAAA,CAAQ,UAAU,mDAAmD,OAAQO,GAAM,MAAM,IAAK,IAAKA,GAAM,MAAM,KAAO,GAAI,EAAE,GAEnM,EACAV,EAAC,OAAI,UAAU,4GACX,SAAAA,EAACG,EAAA,CAAQ,UAAU,8BAA8B,OAAQO,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EACxG,EACAV,EAAC,OAAI,UAAU,uEACX,SAAAA,EAACG,EAAA,CAAQ,UAAU,6BAA6B,OAAQO,GAAM,WAAW,IAAK,IAAKA,GAAM,WAAW,KAAO,GAAI,EACnH,IA5DMC,CA6DV,CACH,EACL,EACA,GACF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAQ",
+  "names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "Features", "props", "data", "className", "list", "item", "index", "Features_default"]
+}

package/dist/esm/biz-components/FootCharger/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+type FootChargerType = {
+    data: {
+        title: string;
+        text: string;
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<FootChargerType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/FootCharger/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{Fragment as l,jsx as t,jsxs as m}from"react/jsx-runtime";import"../../helpers/utils.js";import{withLayout as i}from"../../shared/Styles.js";import{Text as e}from"../../components/index.js";const p=o=>{const{data:s}=o,{title:a,text:r}=s;return t(l,{children:m("div",{className:"",children:[t("div",{children:t(e,{html:a,className:"text-[#6D6D6F] font-bold leading-[1.4] [&_span]:text-[#1D1D1F] text-[16px] desktop:text-[18px]"})}),t("div",{className:"mt-[24px]",children:t(e,{html:r,className:"text-[#3D3D3F] [&_*_strong]:!font-bold leading-[1.4] text-[14px]"})})]})})};var f=i(p);export{f as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/FootCharger/index.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/FootCharger/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 { Picture, Text } from '../../components/index.js'\n\n\ntype FootChargerType = {\n  data: {\n    title: string\n    text: string\n  }\n  className?: string\n}\n\nconst FootCharger = (props: FootChargerType) => {\n  const { data } = props\n  const { title, text } = data\n\n  return (\n    <>\n      <div className=''>\n        <div>\n          <Text html={title} className='text-[#6D6D6F] font-bold leading-[1.4] [&_span]:text-[#1D1D1F] text-[16px] desktop:text-[18px]' />\n        </div>\n        <div className='mt-[24px]'>\n          <Text html={text} className='text-[#3D3D3F] [&_*_strong]:!font-bold leading-[1.4] text-[14px]' />\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(FootCharger)\n"],
+  "mappings": "aAoBI,mBAAAA,EAGM,OAAAC,EAFJ,QAAAC,MADF,oBAnBJ,MAAmB,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAkB,QAAAC,MAAY,4BAW9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,MAAAE,EAAO,KAAAC,CAAK,EAAIF,EAExB,OACEN,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAU,GACb,UAAAD,EAAC,OACC,SAAAA,EAACG,EAAA,CAAK,KAAMI,EAAO,UAAU,iGAAiG,EAChI,EACAP,EAAC,OAAI,UAAU,YACb,SAAAA,EAACG,EAAA,CAAK,KAAMK,EAAM,UAAU,mEAAmE,EACjG,GACF,EACF,CAEJ,EAEA,IAAOC,EAAQP,EAAWE,CAAW",
+  "names": ["Fragment", "jsx", "jsxs", "withLayout", "Text", "FootCharger", "props", "data", "title", "text", "FootCharger_default"]
+}

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

@@ -0,0 +1,17 @@
+import type { Img } from '../../types/props.js';
+export type GiftBoxDataType = {
+    img: Img;
+    mobileImg: Img;
+    title: string;
+};
+type GiftBoxType = {
+    data: {
+        list: GiftBoxDataType[];
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<GiftBoxType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

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

	@@ -0,0 +1,2 @@
1	+ "use client";import{jsx as l,jsxs as a}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as m}from"../../shared/Styles.js";import{Picture as e,Text as r}from"../../components/index.js";const d=o=>{const{data:s,className:g}=o,{list:i}=s;return l("div",{className:"w-full bg-[#EAEAEC] rounded-2xl",children:l("div",{className:"grid grid-cols-2 gap-3 laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6",children:i.map((t,p)=>a("div",{className:"flex flex-col items-center justify-center laptop:p-[20px] p-[12px]",children:[a("div",{children:[t?.img?.url&&l(e,{className:"aspect-[194/194] l-tablet:hidden",imgClassName:"",source:t?.img?.url,alt:t?.img?.alt\|\|""}),t?.mobileImg?.url&&l(e,{className:"aspect-[120/120] laptop:hidden",imgClassName:"",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt\|\|""})]}),l(r,{html:t?.title,className:"text-[14px] font-bold leading-[1.4] laptop:text-[18px]"})]},p))})})};var N=m(d);export{N as default};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GiftBox/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.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\ntype GiftBoxType = {\n  data: {\n    list: GiftBoxDataType[]\n  }\n  className?: string\n}\n\nconst GiftBox = (props: GiftBoxType) => {\n  const { data, className } = props\n  const { list } = data\n\n  return (\n    <div className=\"w-full bg-[#EAEAEC] rounded-2xl\">\n      <div className=\"grid grid-cols-2 gap-3 laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6\">\n        {list.map((item, index) => (\n          <div key={index} className=\"flex flex-col items-center justify-center laptop:p-[20px] p-[12px]\">\n            <div>\n              {item?.img?.url && (\n                <Picture\n                  className=\"aspect-[194/194] l-tablet:hidden\"\n                  imgClassName=\"\"\n                  source={item?.img?.url}\n                  alt={item?.img?.alt || ''}\n                />\n              )}\n              {item?.mobileImg?.url && (\n                <Picture\n                  className=\"aspect-[120/120] laptop:hidden\"\n                  imgClassName=\"\"\n                  source={item?.mobileImg?.url}\n                  alt={item?.mobileImg?.alt || ''}\n                />\n              )}\n            </div>\n            <Text html={item?.title} className=\"text-[14px] font-bold leading-[1.4] laptop:text-[18px]\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(GiftBox)\n"],
+  "mappings": "aA6BY,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBA5BZ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAe9B,MAAMC,EAAWC,GAAuB,CACtC,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAC,OAAI,UAAU,kCACb,SAAAA,EAAC,OAAI,UAAU,uHACZ,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACfV,EAAC,OAAgB,UAAU,qEACzB,UAAAA,EAAC,OACE,UAAAS,GAAM,KAAK,KACVV,EAACG,EAAA,CACC,UAAU,mCACV,aAAa,GACb,OAAQO,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,KAChBV,EAACG,EAAA,CACC,UAAU,iCACV,aAAa,GACb,OAAQO,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,EACAV,EAACI,EAAA,CAAK,KAAMM,GAAM,MAAO,UAAU,yDAAyD,IAnBpFC,CAoBV,CACD,EACH,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAO",
+  "names": ["jsx", "jsxs", "withLayout", "Picture", "Text", "GiftBox", "props", "data", "className", "list", "item", "index", "GiftBox_default"]
+}

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useMediaQuery as G}from"react-responsive";import B,{useEffect as D,useImperativeHandle as E,useRef as w,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as U,Heading as z,Picture as f,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as q}from"../VideoModal/index.js";import{TextModal as Y}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";const n="image",p="graphic",_=({data:e,configuration:o})=>{const d=w(null),u=()=>{switch(o.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]"}};return y(d,{componentType:n,componentName:p,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1}),t("div",{ref:d,className:m(u(),"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":o?.itemShape==="round"}),children:a("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:k(e?.href||"",`${n}_${p}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{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 cursor-pointer overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),a("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[a("div",{className:m("flex items-end overflow-hidden","graphic-bottom"),children:[a("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description 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]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:l=>{l.preventDefault(),l.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-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:l=>{l.preventDefault(),l.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:k(e?.href,`${n}_${p}`),"data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},T=B.forwardRef(({data:e,className:o},d)=>{const u=G({query:"(max-width: 768px)"}),l=w(null),[N,b]=r(!1),[g,M]=r(""),[I,V]=r(""),[C,P]=r(""),[$,x]=r(null),[S,v]=r(!1),h=i=>{const s=e?.items?.length>3,c=e?.items?.length>2;switch(i){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||c?2.3:2;default:return 1.2}};return E(d,()=>l.current),y(l,{componentType:n,componentName:p,componentTitle:e?.title}),D(()=>{const i=l.current?.querySelectorAll(".graphic-description");if(i&&i.length>0){let s=0;i.forEach(c=>{s=Math.max(s,c.offsetHeight)}),i.forEach(c=>{c.style.height=`${s}px`})}},[]),a("div",{className:m("graphicBlock",o),ref:l,children:[a("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(L,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(i,s)=>{b(!0),s?.isYouTube?V?.(s?.youtubeId||""):(M?.(s?.video?.url||""),P?.(s?.mobileVideo?.url||""))},onIconClick:i=>{v(!0),x(i)},title:e?.title}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h()},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:h(1440)}}})]}),t(q,{visible:N,youTubeId:I,onCloseModal:()=>b(!1),videoUrl:u&&C||g}),t(Y,{textVisible:S,extension:$?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});T.displayName="Graphic";var se=H(T);export{se as default};
+"use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import{useMediaQuery as S}from"react-responsive";import B,{useEffect as D,useImperativeHandle as E,useRef as w,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as U,Heading as z,Picture as f,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as q}from"../VideoModal/index.js";import{TextModal as Y}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";const n="image",p="graphic",_=({data:e,configuration:o})=>{const h=w(null),u=()=>{switch(o.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]"}};return y(h,{componentType:n,componentName:p,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1}),t("div",{ref:h,className:m(u(),"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":o?.itemShape==="round"}),children:c("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:k(e?.href||"",`${n}_${p}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{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 cursor-pointer overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,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:m("flex items-end overflow-hidden","graphic-bottom"),children:[c("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description 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]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:i=>{i.preventDefault(),i.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-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:i=>{i.preventDefault(),i.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:k(e?.href,`${n}_${p}`),"data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},T=B.forwardRef(({data:e,className:o},h)=>{const u=S({query:"(max-width: 768px)"}),i=w(null),[N,b]=r(!1),[g,M]=r(""),[I,V]=r(""),[C,P]=r(""),[$,x]=r(null),[G,v]=r(!1),d=l=>{const s=e?.items?.length>3,a=e?.items?.length>2;switch(l){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return e?.items?.length===1?1:s||a?2.3:2;default:return e?.items?.length===1?1:1.2}};return E(h,()=>i.current),y(i,{componentType:n,componentName:p,componentTitle:e?.title}),D(()=>{const l=i.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let s=0;l.forEach(a=>{s=Math.max(s,a.offsetHeight)}),l.forEach(a=>{a.style.height=`${s}px`})}},[]),c("div",{className:m("graphicBlock",o),ref:i,children:[c("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(L,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(l,s)=>{b(!0),s?.isYouTube?V?.(s?.youtubeId||""):(M?.(s?.video?.url||""),P?.(s?.mobileVideo?.url||""))},onIconClick:l=>{v(!0),x(l)},title:e?.title}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:d()},768:{spaceBetween:16,freeMode:!1,slidesPerView:d(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:d(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:d(1440)}}})]}),t(q,{visible:N,youTubeId:I,onCloseModal:()=>b(!1),videoUrl:u&&C||g}),t(Y,{textVisible:G,extension:$?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});T.displayName="Graphic";var se=H(T);export{se as default};
 //# sourceMappingURL=index.js.map

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

@@ -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 { cn } 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 type { Media } from '../../types/props.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  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\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 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 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 className=\"relative block size-full cursor-pointer overflow-hidden\">\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full cursor-pointer 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?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full cursor-pointer 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 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description 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]\"\n                  />\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 bg-opacity-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 rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\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=\"mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\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}#${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 }, 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\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        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\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  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={cn('graphicBlock', className)} ref={innerRef}>\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              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": "aAyGc,cAAAA,EAmBA,QAAAC,MAnBA,oBAxGd,OAAS,iBAAAC,MAAqB,mBAC9B,OAAOC,GAAS,aAAAC,EAAW,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QACxE,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAOC,MAAW,oBAClB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,aAAAC,MAAiB,wBAE1B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,UAuChBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,EAAMnB,EAAuB,IAAI,EACjCoB,EAAe,IAAM,CACzB,OAAQF,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,EAED,OAAAN,EAAYO,EAAK,CACd,cAAAL,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,qBAAsBA,GAAM,YAC5B,SAAUC,GAAe,MAAQ,CACnC,CAAC,EAGCxB,EAAC,OACC,IAAKyB,EACL,UAAWjB,EACTkB,EAAa,EACb,cACA,uFACA,CACE,YAAaH,EAAK,QAAU,MAC9B,CACF,EAEA,SAAAvB,EAAC,OACC,UAAWQ,EAAG,mBAAoB,CAC/B,gDAAkDgB,GAAe,YAAc,OAClF,CAAC,EAED,SAAAvB,EAAC,OAAI,UAAU,0DACZ,UAAAsB,GAAM,KACLvB,EAAC,KACC,aAAYuB,GAAM,OAASA,GAAM,YACjC,KAAMJ,EAAYI,GAAM,MAAQ,GAAI,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACvE,UAAU,iDACV,4BAA2B,MAAMG,GAAe,MAAQ,CAAC,GACzD,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,WAAW,GAEpE,SAAAvB,EAACa,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACtB,IAAKA,GAAM,QAAQ,KAAO,GAC5B,EACF,EAEAvB,EAAC,OAAI,UAAU,iDACb,SAAAA,EAACa,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACtB,IAAKA,GAAM,QAAQ,KAAO,GAC5B,EACF,EAEFtB,EAAC,OAAI,UAAU,yEACb,UAAAA,EAAC,OAAI,UAAWO,EAAG,iCAAkC,gBAAgB,EACnE,UAAAP,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACc,EAAA,CACC,KAAMS,GAAM,MACZ,MAAO,CAAE,MAAOA,GAAM,SAAU,EAEhC,UAAU,kGACZ,EACCA,GAAM,aACLvB,EAACY,EAAA,CACC,KAAMW,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,wJACZ,GAEJ,EACC,CAACA,GAAM,aAAeA,GAAM,OAAO,KAAOA,GAAM,YAC/CvB,EAAC,UACC,aAAW,aACX,QAAU2B,GAAW,CACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBH,GAAe,sBAAsBA,GAAe,OAAS,EAAGD,CAAI,CACtE,EACA,UAAU,+GAEV,SAAAvB,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEDuB,GAAM,YAAcA,GAAM,MAAM,KAC/BvB,EAAC,UACC,QAAU2B,GAAW,CACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBH,GAAe,cAAcD,EAAMC,CAAa,CAClD,EACA,UAAU,8HAEV,SAAAxB,EAACa,EAAA,CACC,UAAU,SACV,aAAa,sBACb,OAAQU,GAAM,MAAM,IACpB,IAAKA,GAAM,MAAM,KAAO,GAC1B,EACF,GAEJ,EACCA,EAAK,YACJvB,EAACW,EAAA,CACC,GAAG,IACH,aAAYY,GAAM,OAASA,GAAM,YACjC,QAAQ,YACR,UAAU,sBACV,KAAMJ,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,4BAA2B,MAAMG,GAAe,MAAQ,CAAC,GACzD,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,WAAW,IAAIA,GAAM,UAAU,GAEvF,SAAAA,EAAK,WACR,GAEJ,GACF,EACF,EACF,CAEJ,EAEMK,EAAUzB,EAAM,WAAyC,CAAC,CAAE,KAAAoB,EAAM,UAAAM,CAAU,EAAGJ,IAAQ,CAC3F,MAAMK,EAAW5B,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxD6B,EAAWzB,EAAuB,IAAI,EACtC,CAAC0B,EAASC,CAAU,EAAI1B,EAAkB,EAAK,EAC/C,CAAC2B,EAAUC,CAAW,EAAI5B,EAAiB,EAAE,EAC7C,CAAC6B,EAAWC,CAAY,EAAI9B,EAAiB,EAAE,EAC/C,CAAC+B,EAAgBC,CAAiB,EAAIhC,EAAiB,EAAE,EACzD,CAACiC,EAAaC,CAAc,EAAIlC,EAA6B,IAAI,EACjE,CAACmC,EAAaC,CAAc,EAAIpC,EAAkB,EAAK,EAEvDqC,EAAoBC,GAAmB,CAC3C,MAAMC,EAAUvB,GAAM,OAAyB,OAAS,EAClDO,EAAYP,GAAM,OAAyB,OAAS,EAC1D,OAAQsB,EAAO,CACb,IAAK,MACH,OAAOC,EAAS,EAAIvB,GAAM,OAAO,OACnC,IAAK,MACH,OAAOuB,EAAS,EAAIvB,GAAM,OAAO,OACnC,IAAK,KACH,OAAOuB,GAAehB,EAAN,IAAuB,EACzC,QACE,MAAO,IACX,CACF,EAEA,OAAAzB,EAAoBoB,EAAK,IAAMM,EAAS,OAAyB,EAEjEb,EAAYa,EAAU,CACpB,cAAAX,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAEDnB,EAAU,IAAM,CACd,MAAM2C,EAAehB,EAAS,SAAS,iBAAiC,sBAAsB,EAC9F,GAAIgB,GAAgBA,EAAa,OAAS,EAAG,CAC3C,IAAIC,EAAY,EAChBD,EAAa,QAASE,GAAuB,CAC3CD,EAAY,KAAK,IAAIA,EAAWC,EAAG,YAAY,CACjD,CAAC,EACDF,EAAa,QAASE,GAAuB,CAC3CA,EAAG,MAAM,OAAS,GAAGD,CAAS,IAChC,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAGH/C,EAAC,OAAI,UAAWO,EAAG,eAAgBqB,CAAS,EAAG,IAAKE,EAClD,UAAA9B,EAAC,OAAI,UAAU,cACZ,UAAAsB,GAAM,OAASvB,EAACe,EAAA,CAAM,KAAM,CAAE,MAAOQ,GAAM,KAAM,EAAG,EACrDvB,EAACU,EAAA,CACC,GAAG,UACH,UAAWF,EAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMe,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,EAC5B,oBAAqB,CAAC2B,EAAW3B,IAAsB,CACrDU,EAAW,EAAI,EACXV,GAAM,UACRc,IAAed,GAAM,WAAa,EAAE,GAEpCY,IAAcZ,GAAM,OAAO,KAAO,EAAE,EACpCgB,IAAoBhB,GAAM,aAAa,KAAO,EAAE,EAEpD,EACA,YAAcA,GAAsB,CAClCoB,EAAe,EAAI,EACnBF,EAAelB,CAAI,CACrB,EACA,MAAOA,GAAM,KACf,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAesB,EAAiB,CAClC,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,GAAG,CACrC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,CACF,EACF,GACF,EACA5C,EAACgB,EAAA,CACC,QAASgB,EACT,UAAWI,EACX,aAAc,IAAMH,EAAW,EAAK,EACpC,SAAUH,GAAWQ,GAAkBJ,EACzC,EACAlC,EAACiB,EAAA,CACC,YAAayB,EACb,UAAWF,GAAa,UACxB,aAAc,IAAM,CAClBG,EAAe,EAAK,EACpBF,EAAe,IAAI,CACrB,EACF,GACF,CAEJ,CAAC,EAEDb,EAAQ,YAAc,UAEtB,IAAOuB,GAAQ1C,EAAWmB,CAAO",
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } 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 type { Media } from '../../types/props.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  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\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 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 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 className=\"relative block size-full cursor-pointer overflow-hidden\">\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full cursor-pointer 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?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full cursor-pointer 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 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description 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]\"\n                  />\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 bg-opacity-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 rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\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(data?.href, `${componentType}_${componentName}`)}\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}#${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 }, 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\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  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={cn('graphicBlock', className)} ref={innerRef}>\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              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": "aAyGc,cAAAA,EAmBA,QAAAC,MAnBA,oBAxGd,OAAS,iBAAAC,MAAqB,mBAC9B,OAAOC,GAAS,aAAAC,EAAW,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QACxE,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAOC,MAAW,oBAClB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,aAAAC,MAAiB,wBAE1B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,UAuChBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,EAAMnB,EAAuB,IAAI,EACjCoB,EAAe,IAAM,CACzB,OAAQF,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,EAED,OAAAN,EAAYO,EAAK,CACd,cAAAL,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,qBAAsBA,GAAM,YAC5B,SAAUC,GAAe,MAAQ,CACnC,CAAC,EAGCxB,EAAC,OACC,IAAKyB,EACL,UAAWjB,EACTkB,EAAa,EACb,cACA,uFACA,CACE,YAAaH,EAAK,QAAU,MAC9B,CACF,EAEA,SAAAvB,EAAC,OACC,UAAWQ,EAAG,mBAAoB,CAC/B,gDAAkDgB,GAAe,YAAc,OAClF,CAAC,EAED,SAAAvB,EAAC,OAAI,UAAU,0DACZ,UAAAsB,GAAM,KACLvB,EAAC,KACC,aAAYuB,GAAM,OAASA,GAAM,YACjC,KAAMJ,EAAYI,GAAM,MAAQ,GAAI,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACvE,UAAU,iDACV,4BAA2B,MAAMG,GAAe,MAAQ,CAAC,GACzD,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,WAAW,GAEpE,SAAAvB,EAACa,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACtB,IAAKA,GAAM,QAAQ,KAAO,GAC5B,EACF,EAEAvB,EAAC,OAAI,UAAU,iDACb,SAAAA,EAACa,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACtB,IAAKA,GAAM,QAAQ,KAAO,GAC5B,EACF,EAEFtB,EAAC,OAAI,UAAU,yEACb,UAAAA,EAAC,OAAI,UAAWO,EAAG,iCAAkC,gBAAgB,EACnE,UAAAP,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACc,EAAA,CACC,KAAMS,GAAM,MACZ,MAAO,CAAE,MAAOA,GAAM,SAAU,EAEhC,UAAU,kGACZ,EACCA,GAAM,aACLvB,EAACY,EAAA,CACC,KAAMW,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,wJACZ,GAEJ,EACC,CAACA,GAAM,aAAeA,GAAM,OAAO,KAAOA,GAAM,YAC/CvB,EAAC,UACC,aAAW,aACX,QAAU2B,GAAW,CACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBH,GAAe,sBAAsBA,GAAe,OAAS,EAAGD,CAAI,CACtE,EACA,UAAU,+GAEV,SAAAvB,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEDuB,GAAM,YAAcA,GAAM,MAAM,KAC/BvB,EAAC,UACC,QAAU2B,GAAW,CACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBH,GAAe,cAAcD,EAAMC,CAAa,CAClD,EACA,UAAU,8HAEV,SAAAxB,EAACa,EAAA,CACC,UAAU,SACV,aAAa,sBACb,OAAQU,GAAM,MAAM,IACpB,IAAKA,GAAM,MAAM,KAAO,GAC1B,EACF,GAEJ,EACCA,EAAK,YACJvB,EAACW,EAAA,CACC,GAAG,IACH,aAAYY,GAAM,OAASA,GAAM,YACjC,QAAQ,YACR,UAAU,+BACV,KAAMJ,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,4BAA2B,MAAMG,GAAe,MAAQ,CAAC,GACzD,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,WAAW,IAAIA,GAAM,UAAU,GAEvF,SAAAA,EAAK,WACR,GAEJ,GACF,EACF,EACF,CAEJ,EAEMK,EAAUzB,EAAM,WAAyC,CAAC,CAAE,KAAAoB,EAAM,UAAAM,CAAU,EAAGJ,IAAQ,CAC3F,MAAMK,EAAW5B,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxD6B,EAAWzB,EAAuB,IAAI,EACtC,CAAC0B,EAASC,CAAU,EAAI1B,EAAkB,EAAK,EAC/C,CAAC2B,EAAUC,CAAW,EAAI5B,EAAiB,EAAE,EAC7C,CAAC6B,EAAWC,CAAY,EAAI9B,EAAiB,EAAE,EAC/C,CAAC+B,EAAgBC,CAAiB,EAAIhC,EAAiB,EAAE,EACzD,CAACiC,EAAaC,CAAc,EAAIlC,EAA6B,IAAI,EACjE,CAACmC,EAAaC,CAAc,EAAIpC,EAAkB,EAAK,EAEvDqC,EAAoBC,GAAmB,CAC3C,MAAMC,EAAUvB,GAAM,OAAyB,OAAS,EAClDO,EAAYP,GAAM,OAAyB,OAAS,EAC1D,OAAQsB,EAAO,CACb,IAAK,MACH,OAAOC,EAAS,EAAIvB,GAAM,OAAO,OACnC,IAAK,MACH,OAAOuB,EAAS,EAAIvB,GAAM,OAAO,OACnC,IAAK,KACH,OAAKA,GAAM,OAAyB,SAAW,EAAU,EAClDuB,GAAehB,EAAN,IAAuB,EACzC,QACE,OAAKP,GAAM,OAAyB,SAAW,EAAU,EAClD,GACX,CACF,EAEA,OAAAlB,EAAoBoB,EAAK,IAAMM,EAAS,OAAyB,EAEjEb,EAAYa,EAAU,CACpB,cAAAX,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAEDnB,EAAU,IAAM,CACd,MAAM2C,EAAehB,EAAS,SAAS,iBAAiC,sBAAsB,EAC9F,GAAIgB,GAAgBA,EAAa,OAAS,EAAG,CAC3C,IAAIC,EAAY,EAChBD,EAAa,QAASE,GAAuB,CAC3CD,EAAY,KAAK,IAAIA,EAAWC,EAAG,YAAY,CACjD,CAAC,EACDF,EAAa,QAASE,GAAuB,CAC3CA,EAAG,MAAM,OAAS,GAAGD,CAAS,IAChC,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAGH/C,EAAC,OAAI,UAAWO,EAAG,eAAgBqB,CAAS,EAAG,IAAKE,EAClD,UAAA9B,EAAC,OAAI,UAAU,cACZ,UAAAsB,GAAM,OAASvB,EAACe,EAAA,CAAM,KAAM,CAAE,MAAOQ,GAAM,KAAM,EAAG,EACrDvB,EAACU,EAAA,CACC,GAAG,UACH,UAAWF,EAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMe,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,EAC5B,oBAAqB,CAAC2B,EAAW3B,IAAsB,CACrDU,EAAW,EAAI,EACXV,GAAM,UACRc,IAAed,GAAM,WAAa,EAAE,GAEpCY,IAAcZ,GAAM,OAAO,KAAO,EAAE,EACpCgB,IAAoBhB,GAAM,aAAa,KAAO,EAAE,EAEpD,EACA,YAAcA,GAAsB,CAClCoB,EAAe,EAAI,EACnBF,EAAelB,CAAI,CACrB,EACA,MAAOA,GAAM,KACf,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAesB,EAAiB,CAClC,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,GAAG,CACrC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,CACF,EACF,GACF,EACA5C,EAACgB,EAAA,CACC,QAASgB,EACT,UAAWI,EACX,aAAc,IAAMH,EAAW,EAAK,EACpC,SAAUH,GAAWQ,GAAkBJ,EACzC,EACAlC,EAACiB,EAAA,CACC,YAAayB,EACb,UAAWF,GAAa,UACxB,aAAc,IAAM,CAClBG,EAAe,EAAK,EACpBF,EAAe,IAAI,CACrB,EACF,GACF,CAEJ,CAAC,EAEDb,EAAQ,YAAc,UAEtB,IAAOuB,GAAQ1C,EAAWmB,CAAO",
   "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "ref", "handleAspect", "e", "Graphic", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
 }

package/dist/esm/biz-components/GraphicMore/index.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import type { Img } from '../../types/props.js';
+export type GraphicMoreDataType = {
+    img: Img;
+    mobileImg: Img;
+    title: string;
+    description: string;
+    theme: 'light' | 'dark';
+    fullWidth: 'true' | 'false';
+    span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+type GraphicMoreType = {
+    data: {
+        shape?: 'rounded' | 'square';
+        productsTab: GraphicMoreDataType[];
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<GraphicMoreType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

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

	@@ -0,0 +1,2 @@
1	+ "use client";import{Fragment as g,jsx as t,jsxs as l}from"react/jsx-runtime";import{cn as o}from"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as n}from"../../shared/Styles.js";import{Grid as f,GridItem as u}from"../../components/gird.js";import{Picture as s,Text as a}from"../../components/index.js";const x=p=>{const{data:m,className:c}=p,{productsTab:d,shape:i}=m;return l(g,{children:[t("div",{className:o("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]"),children:t(f,{className:o("tablet:gap-4 grid grid-cols-12 gap-3 ",c),children:d?.map((e,r)=>l(u,{span:e.span,className:o("text-info-primary relative w-full overflow-hidden",i==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":e.theme==="dark"}),children:[t(s,{source:e.img.url,className:"size-full",imgClassName:""}),l("div",{className:"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[e.title&&t(a,{html:e.title,as:"p",className:"line-clamp-2 lg-desktop:text-[24px] text-[20px] leading-[1.2] font-bold"}),e.description&&t(a,{html:e.description,className:"line-clamp-2 desktop:text-lg text-sm font-bold"})]})]},r))})}),t("div",{className:"tablet:hidden block text-[#1D1D1F]",children:t("div",{className:" flex gap-[12px] flex-wrap",children:d?.map((e,r)=>l("div",{className:o("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(s,{source:e.mobileImg.url,className:"size-full",imgClassName:"h-full object-cover"}),l("div",{className:"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[e.title&&t(a,{html:e.title,as:"p",className:"text-xl font-bold leading-[1.2] line-clamp-3"}),e.description&&t(a,{html:e.description,className:"text-xl font-bold line-clamp-2"})]})]},r))})})]})};var w=n(x);export{w as default};
2	+ //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GraphicMore/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\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}\n\ntype GraphicMoreType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n  className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]')}>\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 lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n                  {item.title && (\n                    <Text\n                      html={item.title}\n                      as=\"p\"\n                      className=\"line-clamp-2 lg-desktop:text-[24px] text-[20px] leading-[1.2] font-bold\"\n                    />\n                  )}\n                  {item.description && (\n                    <Text html={item.description} className=\"line-clamp-2 desktop:text-lg text-sm font-bold\" />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className='tablet:hidden block text-[#1D1D1F]'>\n        <div className=\" flex gap-[12px] flex-wrap\">\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 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n                {it.title && <Text html={it.title} as=\"p\" className=\"text-xl font-bold leading-[1.2] line-clamp-3\" />}\n                {it.description && <Text html={it.description} className=\"text-xl font-bold line-clamp-2\" />}\n              </div>\n            </div>\n          )\n        })}\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
+  "mappings": "aA+BI,mBAAAA,EAiBY,OAAAC,EACA,QAAAC,MAlBZ,oBA9BJ,OAAS,MAAAC,MAAU,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAoB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,OACET,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAWE,EAAG,sBAAuB,sEAAsE,EAC9G,SAAAF,EAACI,EAAA,CAAK,UAAWF,EAAG,wCAAyCS,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,IAErBd,EAACI,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWZ,EACT,oDACAW,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAd,EAACM,EAAA,CAAQ,OAAQQ,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,GAAG,EACrEb,EAAC,OAAI,UAAU,oJACZ,UAAAa,EAAK,OACJd,EAACO,EAAA,CACC,KAAMO,EAAK,MACX,GAAG,IACH,UAAU,0EACZ,EAEDA,EAAK,aACJd,EAACO,EAAA,CAAK,KAAMO,EAAK,YAAa,UAAU,iDAAiD,GAE7F,IAvBKC,CAwBP,CAEH,EACH,EACF,EACAf,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OAAI,UAAU,6BACd,SAAAY,GAAa,IAAI,CAACI,EAAIC,IAEnBhB,EAAC,OAEC,UAAWC,EACT,6CACAW,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,EAAG,QAAU,MAAO,EACnCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,UAAAhB,EAACM,EAAA,CAAQ,OAAQU,EAAG,UAAU,IAAK,UAAU,YAAY,aAAa,sBAAsB,EAC5Ff,EAAC,OAAI,UAAU,2FACZ,UAAAe,EAAG,OAAShB,EAACO,EAAA,CAAK,KAAMS,EAAG,MAAO,GAAG,IAAI,UAAU,+CAA+C,EAClGA,EAAG,aAAehB,EAACO,EAAA,CAAK,KAAMS,EAAG,YAAa,UAAU,iCAAiC,GAC5F,IAdKC,CAeP,CAEH,EACD,EACF,GACF,CAEJ,EAEA,IAAOC,EAAQf,EAAWK,CAAW",
+  "names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Grid", "GridItem", "Picture", "Text", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind", "GraphicMore_default"]
+}

package/dist/esm/biz-components/Listing/BizProductProvider.d.ts CHANGED Viewed

@@ -58,6 +58,20 @@ export type ModalData = {
     content?: string;
     domContent?: React.ReactNode;
 };
+export type JoinedRecommendBuyProducts = {
+    bundle?: {
+        value?: BundleListItem;
+        canOperate?: boolean;
+    };
+    gift?: {
+        value?: ProductVariant;
+        canOperate?: boolean;
+    };
+    exchange?: {
+        value?: ProductVariant;
+        canOperate?: boolean;
+    };
+};
 export interface ProductContextType {
     isLogin?: boolean;
     isMobile?: boolean;
@@ -83,16 +97,8 @@ export interface ProductContextType {
     setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>;
     checkedBundle?: BundleListItem;
     setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>;
-    joinedRecommendBuyProducts: {
-        bundle?: BundleListItem;
-        gift?: ProductVariant;
-        exchange?: ProductVariant;
-    };
-    setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<{
-        bundle?: BundleListItem;
-        gift?: ProductVariant;
-        exchange?: ProductVariant;
-    }>>;
+    joinedRecommendBuyProducts: JoinedRecommendBuyProducts;
+    setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<JoinedRecommendBuyProducts>>;
     checkedCareBundle?: ProductVariant;
     setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>;
     bundle?: Bundle;
@@ -111,8 +117,10 @@ export interface ProductContextType {
     onUseCouponChange?: (couponSaving: number) => void;
     onUseMemberDiscountChange?: (memberSaving: number) => void;
     discount?: DiscountData;
+    buyNowLoading?: boolean;
+    addToCartLoading?: boolean;
 }
 export declare const BizProductContext: React.Context<ProductContextType>;
 export declare const useBizProductContext: () => ProductContextType;
-declare const ProductProvider: ({ product, isLogin, profile, isMobile, isDesktop, children, renderRating, freeGift, exchangePurchase, bundle, checkedBundle, checkedGift, setCheckedBundle, setCheckedGift, checkedExchangePurchase, setCheckedExchangePurchase, variant, selectedOptions, setSelectedOptions, compareData, coupon, finalPrice, comparePrice, totalSavings, savingDetail, setSavingDetail, selectedVariants, onAddToCart, onBuyNow, creditsRedemptionAmount, memberFunctionResult, openModal, openSignInPopup, openAuthCodePopup, openSignUpPopup, renderAffirm, renderKlarna, renderPaypal, onUseCouponChange, onUseMemberDiscountChange, discount, }: PropsWithChildren<Omit<ProductContextType, "joinedRecommendBuyProducts" | "setJoinedRecommendBuyProducts">>) => import("react/jsx-runtime").JSX.Element;
+declare const ProductProvider: ({ product, isLogin, profile, isMobile, isDesktop, children, renderRating, freeGift, exchangePurchase, bundle, checkedBundle, checkedGift, setCheckedBundle, setCheckedGift, checkedExchangePurchase, setCheckedExchangePurchase, variant, selectedOptions, setSelectedOptions, compareData, coupon, finalPrice, comparePrice, totalSavings, savingDetail, setSavingDetail, selectedVariants, onAddToCart, onBuyNow, creditsRedemptionAmount, memberFunctionResult, openModal, openSignInPopup, openAuthCodePopup, openSignUpPopup, renderAffirm, renderKlarna, renderPaypal, onUseCouponChange, onUseMemberDiscountChange, discount, buyNowLoading, addToCartLoading, }: PropsWithChildren<Omit<ProductContextType, "joinedRecommendBuyProducts" | "setJoinedRecommendBuyProducts">>) => import("react/jsx-runtime").JSX.Element;
 export default ProductProvider;

package/dist/esm/biz-components/Listing/BizProductProvider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as H}from"react/jsx-runtime";import{createContext as J,useContext as n,useState as K}from"react";const e=J({}),Z=()=>{if(!n(e))throw new Error("useProductContext must be used in <ProductProvider>");return n(e)},q=({product:t,isLogin:o,profile:r,isMobile:i,isDesktop:a,children:c,renderRating:d,freeGift:u,exchangePurchase:s,bundle:p,checkedBundle:m,checkedGift:l,setCheckedBundle:P,setCheckedGift:b,checkedExchangePurchase:g,setCheckedExchangePurchase:h,variant:C,selectedOptions:f,setSelectedOptions:v,compareData:y,coupon:S,finalPrice:x,comparePrice:D,totalSavings:B,savingDetail:R,setSavingDetail:V,selectedVariants:_,onAddToCart:k,onBuyNow:A,creditsRedemptionAmount:M,memberFunctionResult:F,openModal:w,openSignInPopup:G,openAuthCodePopup:I,openSignUpPopup:L,renderAffirm:N,renderKlarna:T,renderPaypal:O,onUseCouponChange:U,onUseMemberDiscountChange:W,discount:j})=>{const[z,E]=K({bundle:void 0,gift:void 0});return H(e.Provider,{value:{product:t,variant:C,isMobile:i,isDesktop:a,isLogin:o,profile:r,coupon:S,renderRating:d,finalPrice:x,comparePrice:D,savingDetail:R,setSavingDetail:V,totalSavings:B,selectedOptions:f,setSelectedOptions:v,freeGift:u,exchangePurchase:s,checkedGift:l,setCheckedGift:b,checkedBundle:m,setCheckedBundle:P,bundle:p,compareData:y,selectedVariants:_,onAddToCart:k,onBuyNow:A,joinedRecommendBuyProducts:z,setJoinedRecommendBuyProducts:E,checkedExchangePurchase:g,setCheckedExchangePurchase:h,creditsRedemptionAmount:M,memberFunctionResult:F,openModal:w,openSignInPopup:G,openAuthCodePopup:I,openSignUpPopup:L,renderAffirm:N,renderKlarna:T,renderPaypal:O,onUseCouponChange:U,onUseMemberDiscountChange:W,discount:j},children:c})};var $=q;export{e as BizProductContext,$ as default,Z as useBizProductContext};
+import{jsx as X}from"react/jsx-runtime";import{createContext as q,useContext as n,useState as H}from"react";const e=q({}),ee=()=>{if(!n(e))throw new Error("useProductContext must be used in <ProductProvider>");return n(e)},Q=({product:t,isLogin:o,profile:r,isMobile:a,isDesktop:i,children:c,renderRating:d,freeGift:u,exchangePurchase:s,bundle:p,checkedBundle:m,checkedGift:l,setCheckedBundle:P,setCheckedGift:b,checkedExchangePurchase:g,setCheckedExchangePurchase:h,variant:v,selectedOptions:y,setSelectedOptions:C,compareData:f,coupon:S,finalPrice:x,comparePrice:R,totalSavings:B,savingDetail:D,setSavingDetail:_,selectedVariants:k,onAddToCart:A,onBuyNow:V,creditsRedemptionAmount:O,memberFunctionResult:M,openModal:w,openSignInPopup:F,openAuthCodePopup:N,openSignUpPopup:T,renderAffirm:G,renderKlarna:J,renderPaypal:L,onUseCouponChange:I,onUseMemberDiscountChange:U,discount:W,buyNowLoading:j,addToCartLoading:z})=>{const[E,K]=H({bundle:{value:void 0,canOperate:!0},gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0}});return X(e.Provider,{value:{product:t,variant:v,isMobile:a,isDesktop:i,isLogin:o,profile:r,coupon:S,renderRating:d,finalPrice:x,comparePrice:R,savingDetail:D,setSavingDetail:_,totalSavings:B,selectedOptions:y,setSelectedOptions:C,freeGift:u,exchangePurchase:s,checkedGift:l,setCheckedGift:b,checkedBundle:m,setCheckedBundle:P,bundle:p,compareData:f,selectedVariants:k,onAddToCart:A,onBuyNow:V,joinedRecommendBuyProducts:E,setJoinedRecommendBuyProducts:K,checkedExchangePurchase:g,setCheckedExchangePurchase:h,creditsRedemptionAmount:O,memberFunctionResult:M,openModal:w,openSignInPopup:F,openAuthCodePopup:N,openSignUpPopup:T,renderAffirm:G,renderKlarna:J,renderPaypal:L,onUseCouponChange:I,onUseMemberDiscountChange:U,discount:W,buyNowLoading:j,addToCartLoading:z},children:c})};var te=Q;export{e as BizProductContext,te as default,ee as useBizProductContext};
 //# sourceMappingURL=BizProductProvider.js.map

package/dist/esm/biz-components/Listing/BizProductProvider.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Listing/BizProductProvider.tsx"],
-  "sourcesContent": ["import React, {\n  createContext,\n  useCallback,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type PropsWithChildren,\n  useState,\n} from 'react'\nimport type {\n  Product,\n  ProductPrice,\n  ProductVariant,\n  VariantCoupon,\n  Options,\n  FreeGift,\n  BundleListItem,\n  Bundle,\n} from './types/product'\nimport type { CompareData, DiscountData } from './types.js'\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n\nexport type SavingDetail = { coupon: number; bundle: number; member: number; freeGift: number; compare: number; exchangePurchase: number }\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\n\nexport type FunctionMemberPriceResult = {\n  hasMemberPrice: boolean\n  originalPrice: number\n  withCouponMemberTotalSave: number\n  withoutCouponMaxMemberTotalSave?: number\n  labels: {\n    key: string\n    value: string\n    desc: string\n  }[]\n}\n\nexport type ModalData = {\n  needClickAway?: boolean\n  className?: string\n  title?: string\n  content?: string\n  domContent?: React.ReactNode\n}\nexport interface ProductContextType {\n  isLogin?: boolean\n  isMobile?: boolean\n  isDesktop?: boolean\n  product: Product\n  profile?: UserProfile\n  variant: ProductVariant\n  selectedVariants: Array<variantWithFinalPrice>\n  renderRating?: React.ReactNode\n  coupon?: VariantCoupon\n  savingDetail: SavingDetail\n  setSavingDetail: Dispatch<SetStateAction<SavingDetail>>\n  finalPrice: number\n  comparePrice: number\n  totalSavings: number\n  selectedOptions: Options\n  setSelectedOptions: Dispatch<SetStateAction<Options>>\n  freeGift?: FreeGift\n  checkedGift?: ProductVariant\n  setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  exchangePurchase?: FreeGift\n  checkedExchangePurchase?: ProductVariant\n  setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  checkedBundle?: BundleListItem\n  setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n  joinedRecommendBuyProducts: { bundle?: BundleListItem; gift?: ProductVariant; exchange?: ProductVariant }\n  setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<{ bundle?: BundleListItem; gift?: ProductVariant, exchange?: ProductVariant }>>\n  checkedCareBundle?: ProductVariant\n  setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  bundle?: Bundle\n  compareData?: CompareData['data']\n  onAddToCart?: () => void\n  onBuyNow?: () => void\n  creditsRedemptionAmount?: number\n  memberFunctionResult?: FunctionMemberPriceResult\n  openModal: ({ title, content, domContent }: ModalData) => void\n  openSignInPopup?: () => void\n  openAuthCodePopup?: () => void\n  openSignUpPopup?: () => void\n  renderAffirm?: React.ReactNode\n  renderKlarna?: React.ReactNode\n  renderPaypal?: React.ReactNode\n  onUseCouponChange?: (couponSaving: number) => void\n  onUseMemberDiscountChange?: (memberSaving: number) => void\n  discount?: DiscountData\n}\n\n// const initialState: ProductContextType = {\n//   isLogin: false,\n//   isMobile: false,\n//   product: {} as Product,\n//   variant: {} as ProductVariant,\n//   savingDetail: { coupon: 0, bundle: 0, member: 0, freeGift: 0, compare: 0 },\n//   finalPrice: 0,\n//   comparePrice: 0,\n//   totalSavings: 0,\n//   renderRating: null,\n//   selectedOptions: {} as Options,\n//   setSelectedOptions: () => {},\n//   checkedBundle: undefined,\n//   checkedGift: undefined,\n//   setCheckedBundle: () => {},\n//   setCheckedGift: () => {},\n//   checkedCareBundle: undefined,\n//   setCheckedCareBundle: () => {},\n// }\n\nexport const BizProductContext = createContext<ProductContextType>({} as ProductContextType)\n\nexport const useBizProductContext = () => {\n  const context = useContext(BizProductContext)\n  if (!context) {\n    throw new Error('useProductContext must be used in <ProductProvider>')\n  }\n  return useContext(BizProductContext)\n}\n\nconst ProductProvider = ({\n  product,\n  isLogin,\n  profile,\n  isMobile,\n  isDesktop,\n  children,\n  renderRating,\n  freeGift,\n  exchangePurchase,\n  bundle,\n  checkedBundle,\n  checkedGift,\n  setCheckedBundle,\n  setCheckedGift,\n  checkedExchangePurchase,\n  setCheckedExchangePurchase,\n  variant,\n  selectedOptions,\n  setSelectedOptions,\n  compareData,\n  coupon,\n  finalPrice,\n  comparePrice,\n  totalSavings,\n  savingDetail,\n  setSavingDetail,\n  selectedVariants,\n  onAddToCart,\n  onBuyNow,\n  creditsRedemptionAmount,\n  memberFunctionResult,\n  openModal,\n  openSignInPopup,\n  openAuthCodePopup,\n  openSignUpPopup,\n  renderAffirm,\n  renderKlarna,\n  renderPaypal,\n  onUseCouponChange,\n  onUseMemberDiscountChange,\n  discount,\n}: PropsWithChildren<\n  Omit<\n    ProductContextType,\n    | 'joinedRecommendBuyProducts'\n    | 'setJoinedRecommendBuyProducts'\n  >\n>) => {\n  const [joinedRecommendBuyProducts, setJoinedRecommendBuyProducts] = useState<{\n    bundle?: BundleListItem\n    gift?: ProductVariant\n  }>({\n    bundle: undefined,\n    gift: undefined,\n  })\n\n  return (\n    <BizProductContext.Provider\n      value={{\n        product,\n        variant,\n        isMobile,\n        isDesktop,\n        isLogin,\n        profile,\n        coupon,\n        renderRating,\n        finalPrice,\n        comparePrice,\n        savingDetail,\n        setSavingDetail,\n        totalSavings,\n        selectedOptions,\n        setSelectedOptions,\n        freeGift,\n        exchangePurchase,\n        checkedGift,\n        setCheckedGift,\n        checkedBundle,\n        setCheckedBundle,\n        bundle,\n        compareData,\n        selectedVariants,\n        onAddToCart,\n        onBuyNow,\n        joinedRecommendBuyProducts,\n        setJoinedRecommendBuyProducts,\n        checkedExchangePurchase,\n        setCheckedExchangePurchase,\n        creditsRedemptionAmount,\n        memberFunctionResult,\n        openModal,\n        openSignInPopup,\n        openAuthCodePopup,\n        openSignUpPopup,\n        renderAffirm,\n        renderKlarna,\n        renderPaypal,\n        onUseCouponChange,\n        onUseMemberDiscountChange,\n        discount,\n      }}\n    >\n      {children}\n    </BizProductContext.Provider>\n  )\n}\n\nexport default ProductProvider\n"],
-  "mappings": "AAiNI,cAAAA,MAAA,oBAjNJ,OACE,iBAAAC,EAEA,cAAAC,EAIA,YAAAC,MACK,QAqIA,MAAMC,EAAoBH,EAAkC,CAAC,CAAuB,EAE9EI,EAAuB,IAAM,CAExC,GAAI,CADYH,EAAWE,CAAiB,EAE1C,MAAM,IAAI,MAAM,qDAAqD,EAEvE,OAAOF,EAAWE,CAAiB,CACrC,EAEME,EAAkB,CAAC,CACvB,QAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,wBAAAC,EACA,2BAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,wBAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,CACF,IAMM,CACJ,KAAM,CAACC,EAA4BC,CAA6B,EAAI9C,EAGjE,CACD,OAAQ,OACR,KAAM,MACR,CAAC,EAED,OACEH,EAACI,EAAkB,SAAlB,CACC,MAAO,CACL,QAAAG,EACA,QAAAgB,EACA,SAAAb,EACA,UAAAC,EACA,QAAAH,EACA,QAAAC,EACA,OAAAkB,EACA,aAAAd,EACA,WAAAe,EACA,aAAAC,EACA,aAAAE,EACA,gBAAAC,EACA,aAAAF,EACA,gBAAAN,EACA,mBAAAC,EACA,SAAAX,EACA,iBAAAC,EACA,YAAAG,EACA,eAAAE,EACA,cAAAH,EACA,iBAAAE,EACA,OAAAH,EACA,YAAAU,EACA,iBAAAO,EACA,YAAAC,EACA,SAAAC,EACA,2BAAAa,EACA,8BAAAC,EACA,wBAAA5B,EACA,2BAAAC,EACA,wBAAAc,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,CACF,EAEC,SAAAnC,EACH,CAEJ,EAEA,IAAOsC,EAAQ5C",
-  "names": ["jsx", "createContext", "useContext", "useState", "BizProductContext", "useBizProductContext", "ProductProvider", "product", "isLogin", "profile", "isMobile", "isDesktop", "children", "renderRating", "freeGift", "exchangePurchase", "bundle", "checkedBundle", "checkedGift", "setCheckedBundle", "setCheckedGift", "checkedExchangePurchase", "setCheckedExchangePurchase", "variant", "selectedOptions", "setSelectedOptions", "compareData", "coupon", "finalPrice", "comparePrice", "totalSavings", "savingDetail", "setSavingDetail", "selectedVariants", "onAddToCart", "onBuyNow", "creditsRedemptionAmount", "memberFunctionResult", "openModal", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "renderAffirm", "renderKlarna", "renderPaypal", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "BizProductProvider_default"]
+  "sourcesContent": ["import React, {\n  createContext,\n  useCallback,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type PropsWithChildren,\n  useState,\n} from 'react'\nimport type {\n  Product,\n  ProductPrice,\n  ProductVariant,\n  VariantCoupon,\n  Options,\n  FreeGift,\n  BundleListItem,\n  Bundle,\n} from './types/product'\nimport type { CompareData, DiscountData } from './types.js'\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n\nexport type SavingDetail = {\n  coupon: number\n  bundle: number\n  member: number\n  freeGift: number\n  compare: number\n  exchangePurchase: number\n}\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\n\nexport type FunctionMemberPriceResult = {\n  hasMemberPrice: boolean\n  originalPrice: number\n  withCouponMemberTotalSave: number\n  withoutCouponMaxMemberTotalSave?: number\n  labels: {\n    key: string\n    value: string\n    desc: string\n  }[]\n}\n\nexport type ModalData = {\n  needClickAway?: boolean\n  className?: string\n  title?: string\n  content?: string\n  domContent?: React.ReactNode\n}\n\nexport type JoinedRecommendBuyProducts = {\n  bundle?: {\n    value?: BundleListItem\n    canOperate?: boolean\n  }\n  gift?: {\n    value?: ProductVariant\n    canOperate?: boolean\n  }\n  exchange?: {\n    value?: ProductVariant\n    canOperate?: boolean\n  }\n}\nexport interface ProductContextType {\n  isLogin?: boolean\n  isMobile?: boolean\n  isDesktop?: boolean\n  product: Product\n  profile?: UserProfile\n  variant: ProductVariant\n  selectedVariants: Array<variantWithFinalPrice>\n  renderRating?: React.ReactNode\n  coupon?: VariantCoupon\n  savingDetail: SavingDetail\n  setSavingDetail: Dispatch<SetStateAction<SavingDetail>>\n  finalPrice: number\n  comparePrice: number\n  totalSavings: number\n  selectedOptions: Options\n  setSelectedOptions: Dispatch<SetStateAction<Options>>\n  freeGift?: FreeGift\n  checkedGift?: ProductVariant\n  setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  exchangePurchase?: FreeGift\n  checkedExchangePurchase?: ProductVariant\n  setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  checkedBundle?: BundleListItem\n  setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n  joinedRecommendBuyProducts: JoinedRecommendBuyProducts\n  setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<JoinedRecommendBuyProducts>>\n  checkedCareBundle?: ProductVariant\n  setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  bundle?: Bundle\n  compareData?: CompareData['data']\n  onAddToCart?: () => void\n  onBuyNow?: () => void\n  creditsRedemptionAmount?: number\n  memberFunctionResult?: FunctionMemberPriceResult\n  openModal: ({ title, content, domContent }: ModalData) => void\n  openSignInPopup?: () => void\n  openAuthCodePopup?: () => void\n  openSignUpPopup?: () => void\n  renderAffirm?: React.ReactNode\n  renderKlarna?: React.ReactNode\n  renderPaypal?: React.ReactNode\n  onUseCouponChange?: (couponSaving: number) => void\n  onUseMemberDiscountChange?: (memberSaving: number) => void\n  discount?: DiscountData\n  buyNowLoading?: boolean\n  addToCartLoading?: boolean\n}\n\n// const initialState: ProductContextType = {\n//   isLogin: false,\n//   isMobile: false,\n//   product: {} as Product,\n//   variant: {} as ProductVariant,\n//   savingDetail: { coupon: 0, bundle: 0, member: 0, freeGift: 0, compare: 0 },\n//   finalPrice: 0,\n//   comparePrice: 0,\n//   totalSavings: 0,\n//   renderRating: null,\n//   selectedOptions: {} as Options,\n//   setSelectedOptions: () => {},\n//   checkedBundle: undefined,\n//   checkedGift: undefined,\n//   setCheckedBundle: () => {},\n//   setCheckedGift: () => {},\n//   checkedCareBundle: undefined,\n//   setCheckedCareBundle: () => {},\n// }\n\nexport const BizProductContext = createContext<ProductContextType>({} as ProductContextType)\n\nexport const useBizProductContext = () => {\n  const context = useContext(BizProductContext)\n  if (!context) {\n    throw new Error('useProductContext must be used in <ProductProvider>')\n  }\n  return useContext(BizProductContext)\n}\n\nconst ProductProvider = ({\n  product,\n  isLogin,\n  profile,\n  isMobile,\n  isDesktop,\n  children,\n  renderRating,\n  freeGift,\n  exchangePurchase,\n  bundle,\n  checkedBundle,\n  checkedGift,\n  setCheckedBundle,\n  setCheckedGift,\n  checkedExchangePurchase,\n  setCheckedExchangePurchase,\n  variant,\n  selectedOptions,\n  setSelectedOptions,\n  compareData,\n  coupon,\n  finalPrice,\n  comparePrice,\n  totalSavings,\n  savingDetail,\n  setSavingDetail,\n  selectedVariants,\n  onAddToCart,\n  onBuyNow,\n  creditsRedemptionAmount,\n  memberFunctionResult,\n  openModal,\n  openSignInPopup,\n  openAuthCodePopup,\n  openSignUpPopup,\n  renderAffirm,\n  renderKlarna,\n  renderPaypal,\n  onUseCouponChange,\n  onUseMemberDiscountChange,\n  discount,\n  buyNowLoading,\n  addToCartLoading,\n}: PropsWithChildren<Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts'>>) => {\n  const [joinedRecommendBuyProducts, setJoinedRecommendBuyProducts] = useState<JoinedRecommendBuyProducts>({\n    bundle: {\n      value: undefined,\n      canOperate: true,\n    },\n    gift: {\n      value: undefined,\n      canOperate: true,\n    },\n    exchange: {\n      value: undefined,\n      canOperate: true,\n    },\n  })\n\n  return (\n    <BizProductContext.Provider\n      value={{\n        product,\n        variant,\n        isMobile,\n        isDesktop,\n        isLogin,\n        profile,\n        coupon,\n        renderRating,\n        finalPrice,\n        comparePrice,\n        savingDetail,\n        setSavingDetail,\n        totalSavings,\n        selectedOptions,\n        setSelectedOptions,\n        freeGift,\n        exchangePurchase,\n        checkedGift,\n        setCheckedGift,\n        checkedBundle,\n        setCheckedBundle,\n        bundle,\n        compareData,\n        selectedVariants,\n        onAddToCart,\n        onBuyNow,\n        joinedRecommendBuyProducts,\n        setJoinedRecommendBuyProducts,\n        checkedExchangePurchase,\n        setCheckedExchangePurchase,\n        creditsRedemptionAmount,\n        memberFunctionResult,\n        openModal,\n        openSignInPopup,\n        openAuthCodePopup,\n        openSignUpPopup,\n        renderAffirm,\n        renderKlarna,\n        renderPaypal,\n        onUseCouponChange,\n        onUseMemberDiscountChange,\n        discount,\n        buyNowLoading,\n        addToCartLoading,\n      }}\n    >\n      {children}\n    </BizProductContext.Provider>\n  )\n}\n\nexport default ProductProvider\n"],
+  "mappings": "AA4OI,cAAAA,MAAA,oBA5OJ,OACE,iBAAAC,EAEA,cAAAC,EAIA,YAAAC,MACK,QA6JA,MAAMC,EAAoBH,EAAkC,CAAC,CAAuB,EAE9EI,GAAuB,IAAM,CAExC,GAAI,CADYH,EAAWE,CAAiB,EAE1C,MAAM,IAAI,MAAM,qDAAqD,EAEvE,OAAOF,EAAWE,CAAiB,CACrC,EAEME,EAAkB,CAAC,CACvB,QAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,wBAAAC,EACA,2BAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,wBAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,IAAmH,CACjH,KAAM,CAACC,EAA4BC,CAA6B,EAAIhD,EAAqC,CACvG,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,KAAM,CACJ,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAED,OACEH,EAACI,EAAkB,SAAlB,CACC,MAAO,CACL,QAAAG,EACA,QAAAgB,EACA,SAAAb,EACA,UAAAC,EACA,QAAAH,EACA,QAAAC,EACA,OAAAkB,EACA,aAAAd,EACA,WAAAe,EACA,aAAAC,EACA,aAAAE,EACA,gBAAAC,EACA,aAAAF,EACA,gBAAAN,EACA,mBAAAC,EACA,SAAAX,EACA,iBAAAC,EACA,YAAAG,EACA,eAAAE,EACA,cAAAH,EACA,iBAAAE,EACA,OAAAH,EACA,YAAAU,EACA,iBAAAO,EACA,YAAAC,EACA,SAAAC,EACA,2BAAAe,EACA,8BAAAC,EACA,wBAAA9B,EACA,2BAAAC,EACA,wBAAAc,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAEC,SAAArC,EACH,CAEJ,EAEA,IAAOwC,GAAQ9C",
+  "names": ["jsx", "createContext", "useContext", "useState", "BizProductContext", "useBizProductContext", "ProductProvider", "product", "isLogin", "profile", "isMobile", "isDesktop", "children", "renderRating", "freeGift", "exchangePurchase", "bundle", "checkedBundle", "checkedGift", "setCheckedBundle", "setCheckedGift", "checkedExchangePurchase", "setCheckedExchangePurchase", "variant", "selectedOptions", "setSelectedOptions", "compareData", "coupon", "finalPrice", "comparePrice", "totalSavings", "savingDetail", "setSavingDetail", "selectedVariants", "onAddToCart", "onBuyNow", "creditsRedemptionAmount", "memberFunctionResult", "openModal", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "renderAffirm", "renderKlarna", "renderPaypal", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "buyNowLoading", "addToCartLoading", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "BizProductProvider_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/PaidShipping/index.tsx"],
-  "sourcesContent": ["import { Container, Text } from '../../../../components/index.js'\nimport type { Product, ProductVariant } from '../../types/product'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { cn } from '../../../../helpers'\n\nimport ShippingMethod from './ShippingMethod'\nimport { ShippingPolicyModal } from './ShippingPolicyModal'\nimport type { DeliveryCustom, shippingMetafields, ShippingMethodType } from './type'\nimport { isWeightAvailable } from './utils'\nimport LearnMore from './LearnMore'\nimport { useBizProductContext } from '../../BizProductProvider.js'\n\nconst PaidShipping = ({\n  metafields,\n  productList,\n  onShippingInfoChange,\n  variant,\n  className,\n}: {\n  metafields: any\n  productList: Array<Product & { variant: ProductVariant }>\n  variant: ProductVariant\n  onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void\n  className?: string\n}) => {\n  const { isLogin, openSignInPopup } = useBizProductContext()\n  const [openShippingPolicyModal, setOpenShippingPolicyModal] = useState(false)\n  const [init, setInit] = useState(false)\n\n  const [selectedMethod, setSelectedMethod] = useState<ShippingMethodType | null>(null)\n\n  const weight = useMemo(() => {\n    return productList.reduce((acc, product) => acc + (product?.variant?.weight || 0), 0)\n  }, [productList])\n\n  const normalizedMethod = useCallback(\n    (method: shippingMetafields, weight: number, index: number) => {\n      return {\n        id: `${method.__code}__${method.price}`,\n        code: method.__code,\n        mode: method.__mode,\n        title: method.title,\n        disabled: !isWeightAvailable(weight, method),\n        price: method.price,\n        subtitle: method.subtitle,\n        tag: index !== 0 ? metafields?.memberOnly : '',\n        error: !isWeightAvailable(weight, method) ? metafields.overWeightError : '',\n      }\n    },\n    [metafields?.memberOnly, metafields.overWeightError],\n  )\n\n  const list = useMemo(() => {\n    const normalizedList: ShippingMethodType[] = metafields?.list?.map((method: shippingMetafields, index: number) => normalizedMethod(method, weight, index))\n\n    return normalizedList?.reduce((prev: ShippingMethodType[], method: ShippingMethodType) => {\n      // \u5982\u679C\u8D85\u91CD\uFF0C\u540C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\u7C7B\u578B\u4E0B\uFF0C\u5C55\u793A\u5176\u4E2D\u4E00\u4E2A\u4E14\u4E0D\u53EF\u9009\n      const sameTypeMethod = normalizedList.filter((m: ShippingMethodType) => m.code == method.code)\n      let availableMethod: ShippingMethodType\n      // \u6240\u6709\u7269\u6D41\u9009\u9879\u90FD\u4E0D\u53EF\u9009\n      if (sameTypeMethod.every((m: ShippingMethodType) => m.disabled)) {\n        availableMethod = sameTypeMethod[sameTypeMethod.length - 1]\n      } else {\n        // \u53EF\u9009\u7269\u6D41\u9009\u9879\n        availableMethod = sameTypeMethod.find((m: ShippingMethodType) => !m.disabled)!\n      }\n      // \u5F53\u524D\u7269\u6D41\u9009\u9879\u5DF2\u5B58\u5728\n      const hasSameMethod = prev.find((m: ShippingMethodType) => availableMethod.id === m.id)\n      if (!hasSameMethod) {\n        return [...prev, availableMethod]\n      } else {\n        return prev\n      }\n    }, [] as ShippingMethodType[])\n  }, [normalizedMethod, metafields?.list, weight])\n\n  const handleChangeShippingInfo = useCallback(\n    (selectedMethod: ShippingMethodType) => {\n      onShippingInfoChange({\n        selected_delivery_code: selectedMethod.code,\n        selected_delivery_mode: selectedMethod.mode,\n      })\n    },\n    [onShippingInfoChange],\n  )\n\n  useEffect(() => {\n    // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\n    if (metafields?.list?.length > 0 && !init) {\n      const standardShippingMethod = normalizedMethod(metafields?.list[0], 0, 0)\n      setSelectedMethod(standardShippingMethod)\n      handleChangeShippingInfo(standardShippingMethod)\n      setInit(true)\n    }\n  }, [normalizedMethod, metafields?.list, handleChangeShippingInfo, init])\n\n  const toggleShipping = useCallback(\n    (method: ShippingMethodType) => {\n      if (method.disabled) {\n        return\n      }\n      setSelectedMethod(method)\n      handleChangeShippingInfo(method)\n      // gaTrack({\n      //   event: 'ga4Event',\n      //   event_name: 'lp_button',\n      //   member_active_status: isLogin ? 'active' : 'not active', //\u7528\u4E8E\u8F93\u5165code\u6FC0\u6D3B\u4F1A\u5458\u5F39'\u7A97\u7684\u6309\u94AE\uFF0C\u533A\u5206\u4F1A\u5458\u6FC0\u6D3B\u72B6\u6001\uFF0C\u4F20active\u6216not active\n      //   event_parameters: {\n      //     page_group: 'Product Detail Page' + variant.sku, //\u5982\u679C\u662F\u9996\u9875\uFF0C\u5219\u4F20\"Home Page\";\u5982\u679C\u662Flisting\u7684\u9996\u5C4F\u6309\u94AE\uFF0C\u4F20Product Detail Page+$SKU\n      //     position: 'masterbanner1', //\u4F4D\u7F6E\u6807\u8BB0\u3002\u9996\u9875\u9996\u5C4F\u8F6E\u64AD\u4F4D\u7F6E\u4F20masterbanner1\u3001masterbanner2\u3001masterbanner3\uFF0C\u7B2C\u4E8C\u5C4F\u4F202nd_banner\uFF0C\u7B2C\u4E09\u5C4F\u4F203rd_banner\uFF0C\u6216\u8005\u53D6\u8BE5\u6A21\u5757\u5C0F\u6807\u9898\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6A21\u5757\u4F4D\u7F6E\u7684\u6587\u6848\uFF0C\u5F39\u7A97\u4F20pop;\u5982\u679C\u662F\u8D2D\u7269\u8F66\u4FA7\u8FB9\u680F\uFF0C\u5219\u4F20\"Cart Pop Up\"\n      //     button_name: method.title, //\u53D6\u6309\u94AE\u6587\u6848\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6309\u94AE\u7684\u6587\u6848,\u6BD4\u5982\u53F3\u4E0A\u89D2\u5173\u95ED\u4F20close,\u793E\u5A92\u5206\u4EAB\u56FE\u6807\u4F20\u5BF9\u5E94\u5E73\u53F0\u540D\u5B57\u5982Facebook,\u56FE\u7247\u5207\u6362\u5219\u4F20\u5BF9\u5E94\u5C55\u793A\u56FE\u7247\u7684\u540D\u5B57\n      //     info: '', //\u9ED8\u8BA4\u7A7A\u503C\uFF0C\u4E00\u822C\u4F20\u590D\u9009\u6846\u7684\u6587\u6848\u5185\u5BB9\uFF0C\u7279\u6B8A\u60C5\u51B5\u53EF\u6307\u5B9Ainfo\u503C\n      //   },\n      // })\n    },\n\n    [isLogin, list, variant.sku, handleChangeShippingInfo, openSignInPopup],\n  )\n\n  return (\n    <div\n      id=\"ipc-product-paid-shipping\"\n      className={cn(' mt-8 desktop:mt-16 px-4 tablet:px-0 tablet:px-8 laptop:px-16 desktop:px-0', className)}\n    >\n      <div className=\"flex flex-wrap justify-between space-x-2 md:space-x-1\">\n        <Text\n          className=\"text-[20px] font-bold leading-[1.4] text-[#1F2021] md:text-[16px]\"\n          html={metafields?.title}\n        ></Text>\n        {/* <button\n          onClick={() => {\n            setOpenShippingPolicyModal(true)\n          }}\n          className='text-brand-color text-[16px] font-semibold text-[#595959] underline md:text-[14px]'\n        >\n          {metafields?.policy}\n        </button> */}\n      </div>\n      <div className=\"mt-[16px] flex flex-wrap gap-[12px] overflow-hidden md:mt-[12px] desktop:flex-nowrap\">\n        {list.map((method: ShippingMethodType, index: number) => (\n          <ShippingMethod\n            key={index}\n            index={index}\n            item={method}\n            active={selectedMethod?.code === method.code}\n            toggleShipping={() => toggleShipping(method)}\n            currencyCode={variant.price.currencyCode}\n            metafields={metafields}\n            className=\"w-full laptop:w-[calc(50%-6px)] desktop:flex-1\"\n          />\n        ))}\n        {/* learn more \u5361\u7247 */}\n        <LearnMore\n          setOpenShippingPolicyModal={setOpenShippingPolicyModal}\n          metafields={metafields}\n          className=\"w-full laptop:w-[calc(50%-6px)] desktop:w-[calc(33.33%-16px)] lg-desktop:w-[calc(33.33%-24px)]\"\n        />\n      </div>\n      {list.find((method: ShippingMethodType) => method?.error) && (\n        <Text\n          className=\"mt-[16px] font-bold leading-[1.4] text-[#D41435] md:mt-[12px]\"\n          html={list.find((method: ShippingMethodType) => method.error)?.error as string}\n          as=\"p\"\n        />\n      )}\n\n      {metafields?.seeAvailableArea && (\n        <Text\n          as=\"div\"\n          className=\"mt-[16px] font-bold leading-[1.4] text-[#1F2021] [&_a]:text-[#595959] [&_a]:underline\"\n          html={metafields?.seeAvailableArea}\n        />\n      )}\n      {metafields?.shippingPolicy && (\n        <ShippingPolicyModal\n          data={metafields?.shippingPolicy}\n          onClose={() => setOpenShippingPolicyModal(false)}\n          open={openShippingPolicyModal}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default PaidShipping"],
-  "mappings": "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",
+  "sourcesContent": ["import { Container, Text } from '../../../../components/index.js'\nimport type { Product, ProductVariant } from '../../types/product'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { cn } from '../../../../helpers'\n\nimport ShippingMethod from './ShippingMethod'\nimport { ShippingPolicyModal } from './ShippingPolicyModal'\nimport type { DeliveryCustom, shippingMetafields, ShippingMethodType } from './type'\nimport { isWeightAvailable } from './utils'\nimport LearnMore from './LearnMore'\nimport { useBizProductContext } from '../../BizProductProvider.js'\n\nconst PaidShipping = ({\n  metafields,\n  productList,\n  onShippingInfoChange,\n  variant,\n  className,\n}: {\n  metafields: any\n  productList: Array<Product & { variant: ProductVariant }>\n  variant: ProductVariant\n  onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void\n  className?: string\n}) => {\n  const { isLogin, openSignInPopup } = useBizProductContext()\n  const [openShippingPolicyModal, setOpenShippingPolicyModal] = useState(false)\n  const [init, setInit] = useState(false)\n\n  const [selectedMethod, setSelectedMethod] = useState<ShippingMethodType | null>(null)\n\n  const weight = useMemo(() => {\n    return productList.reduce((acc, product) => acc + (product?.variant?.weight || 0), 0)\n  }, [productList])\n\n  const normalizedMethod = useCallback(\n    (method: shippingMetafields, weight: number, index: number) => {\n      return {\n        id: `${method.__code}__${method.price}`,\n        code: method.__code,\n        mode: method.__mode,\n        title: method.title,\n        disabled: !isWeightAvailable(weight, method),\n        price: method.price,\n        subtitle: method.subtitle,\n        tag: index !== 0 ? metafields?.memberOnly : '',\n        error: !isWeightAvailable(weight, method) ? metafields.overWeightError : '',\n      }\n    },\n    [metafields?.memberOnly, metafields.overWeightError]\n  )\n\n  const list = useMemo(() => {\n    const normalizedList: ShippingMethodType[] = metafields?.list?.map((method: shippingMetafields, index: number) =>\n      normalizedMethod(method, weight, index)\n    )\n\n    return normalizedList?.reduce((prev: ShippingMethodType[], method: ShippingMethodType) => {\n      // \u5982\u679C\u8D85\u91CD\uFF0C\u540C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\u7C7B\u578B\u4E0B\uFF0C\u5C55\u793A\u5176\u4E2D\u4E00\u4E2A\u4E14\u4E0D\u53EF\u9009\n      const sameTypeMethod = normalizedList.filter((m: ShippingMethodType) => m.code == method.code)\n      let availableMethod: ShippingMethodType\n      // \u6240\u6709\u7269\u6D41\u9009\u9879\u90FD\u4E0D\u53EF\u9009\n      if (sameTypeMethod.every((m: ShippingMethodType) => m.disabled)) {\n        availableMethod = sameTypeMethod[sameTypeMethod.length - 1]\n      } else {\n        // \u53EF\u9009\u7269\u6D41\u9009\u9879\n        availableMethod = sameTypeMethod.find((m: ShippingMethodType) => !m.disabled)!\n      }\n      // \u5F53\u524D\u7269\u6D41\u9009\u9879\u5DF2\u5B58\u5728\n      const hasSameMethod = prev.find((m: ShippingMethodType) => availableMethod.id === m.id)\n      if (!hasSameMethod) {\n        return [...prev, availableMethod]\n      } else {\n        return prev\n      }\n    }, [] as ShippingMethodType[])\n  }, [normalizedMethod, metafields?.list, weight])\n\n  const handleChangeShippingInfo = useCallback(\n    (selectedMethod: ShippingMethodType) => {\n      onShippingInfoChange({\n        selected_delivery_code: selectedMethod.code,\n        selected_delivery_mode: selectedMethod.mode,\n      })\n    },\n    [onShippingInfoChange]\n  )\n\n  useEffect(() => {\n    // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\n    if (metafields?.list?.length > 0 && !init) {\n      const standardShippingMethod = normalizedMethod(metafields?.list[0], 0, 0)\n      setSelectedMethod(standardShippingMethod)\n      handleChangeShippingInfo(standardShippingMethod)\n      setInit(true)\n    }\n  }, [normalizedMethod, metafields?.list, handleChangeShippingInfo, init])\n\n  const toggleShipping = useCallback(\n    (method: ShippingMethodType) => {\n      if (method.disabled) {\n        return\n      }\n      setSelectedMethod(method)\n      handleChangeShippingInfo(method)\n      // gaTrack({\n      //   event: 'ga4Event',\n      //   event_name: 'lp_button',\n      //   member_active_status: isLogin ? 'active' : 'not active', //\u7528\u4E8E\u8F93\u5165code\u6FC0\u6D3B\u4F1A\u5458\u5F39'\u7A97\u7684\u6309\u94AE\uFF0C\u533A\u5206\u4F1A\u5458\u6FC0\u6D3B\u72B6\u6001\uFF0C\u4F20active\u6216not active\n      //   event_parameters: {\n      //     page_group: 'Product Detail Page' + variant.sku, //\u5982\u679C\u662F\u9996\u9875\uFF0C\u5219\u4F20\"Home Page\";\u5982\u679C\u662Flisting\u7684\u9996\u5C4F\u6309\u94AE\uFF0C\u4F20Product Detail Page+$SKU\n      //     position: 'masterbanner1', //\u4F4D\u7F6E\u6807\u8BB0\u3002\u9996\u9875\u9996\u5C4F\u8F6E\u64AD\u4F4D\u7F6E\u4F20masterbanner1\u3001masterbanner2\u3001masterbanner3\uFF0C\u7B2C\u4E8C\u5C4F\u4F202nd_banner\uFF0C\u7B2C\u4E09\u5C4F\u4F203rd_banner\uFF0C\u6216\u8005\u53D6\u8BE5\u6A21\u5757\u5C0F\u6807\u9898\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6A21\u5757\u4F4D\u7F6E\u7684\u6587\u6848\uFF0C\u5F39\u7A97\u4F20pop;\u5982\u679C\u662F\u8D2D\u7269\u8F66\u4FA7\u8FB9\u680F\uFF0C\u5219\u4F20\"Cart Pop Up\"\n      //     button_name: method.title, //\u53D6\u6309\u94AE\u6587\u6848\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6309\u94AE\u7684\u6587\u6848,\u6BD4\u5982\u53F3\u4E0A\u89D2\u5173\u95ED\u4F20close,\u793E\u5A92\u5206\u4EAB\u56FE\u6807\u4F20\u5BF9\u5E94\u5E73\u53F0\u540D\u5B57\u5982Facebook,\u56FE\u7247\u5207\u6362\u5219\u4F20\u5BF9\u5E94\u5C55\u793A\u56FE\u7247\u7684\u540D\u5B57\n      //     info: '', //\u9ED8\u8BA4\u7A7A\u503C\uFF0C\u4E00\u822C\u4F20\u590D\u9009\u6846\u7684\u6587\u6848\u5185\u5BB9\uFF0C\u7279\u6B8A\u60C5\u51B5\u53EF\u6307\u5B9Ainfo\u503C\n      //   },\n      // })\n    },\n\n    [isLogin, list, variant.sku, handleChangeShippingInfo, openSignInPopup]\n  )\n\n  return (\n    <div\n      id=\"ipc-product-paid-shipping\"\n      className={cn(\n        ' mt-16 desktop:mt-[96px] lg-desktop:mt-[128px] px-4 tablet:px-0 tablet:px-8 laptop:px-16 desktop:px-0',\n        className\n      )}\n    >\n      <div className=\"flex flex-wrap justify-between space-x-2 md:space-x-1\">\n        <Text\n          className=\"text-[20px] font-bold leading-[1.4] text-[#1F2021] md:text-[16px]\"\n          html={metafields?.title}\n        ></Text>\n        {/* <button\n          onClick={() => {\n            setOpenShippingPolicyModal(true)\n          }}\n          className='text-brand-color text-[16px] font-semibold text-[#595959] underline md:text-[14px]'\n        >\n          {metafields?.policy}\n        </button> */}\n      </div>\n      <div className=\"mt-[16px] flex flex-wrap gap-[12px] overflow-hidden md:mt-[12px] desktop:flex-nowrap\">\n        {list.map((method: ShippingMethodType, index: number) => (\n          <ShippingMethod\n            key={index}\n            index={index}\n            item={method}\n            active={selectedMethod?.code === method.code}\n            toggleShipping={() => toggleShipping(method)}\n            currencyCode={variant.price.currencyCode}\n            metafields={metafields}\n            className=\"w-full laptop:w-[calc(50%-6px)] desktop:flex-1\"\n          />\n        ))}\n        {/* learn more \u5361\u7247 */}\n        <LearnMore\n          setOpenShippingPolicyModal={setOpenShippingPolicyModal}\n          metafields={metafields}\n          className=\"w-full laptop:w-[calc(50%-6px)] desktop:w-[calc(33.33%-16px)] lg-desktop:w-[calc(33.33%-24px)]\"\n        />\n      </div>\n      {list.find((method: ShippingMethodType) => method?.error) && (\n        <Text\n          className=\"mt-[16px] font-bold leading-[1.4] text-[#D41435] md:mt-[12px]\"\n          html={list.find((method: ShippingMethodType) => method.error)?.error as string}\n          as=\"p\"\n        />\n      )}\n\n      {metafields?.seeAvailableArea && (\n        <Text\n          as=\"div\"\n          className=\"mt-[16px] font-bold leading-[1.4] text-[#1F2021] [&_a]:text-[#595959] [&_a]:underline\"\n          html={metafields?.seeAvailableArea}\n        />\n      )}\n      {metafields?.shippingPolicy && (\n        <ShippingPolicyModal\n          data={metafields?.shippingPolicy}\n          onClose={() => setOpenShippingPolicyModal(false)}\n          open={openShippingPolicyModal}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default PaidShipping\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "Text", "useCallback", "useEffect", "useMemo", "useState", "cn", "ShippingMethod", "ShippingPolicyModal", "isWeightAvailable", "LearnMore", "useBizProductContext", "PaidShipping", "metafields", "productList", "onShippingInfoChange", "variant", "className", "isLogin", "openSignInPopup", "openShippingPolicyModal", "setOpenShippingPolicyModal", "init", "setInit", "selectedMethod", "setSelectedMethod", "weight", "acc", "product", "normalizedMethod", "method", "index", "list", "normalizedList", "prev", "sameTypeMethod", "m", "availableMethod", "handleChangeShippingInfo", "standardShippingMethod", "toggleShipping", "PaidShipping_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/BenefitsTab.d.ts CHANGED Viewed

@@ -16,6 +16,7 @@ interface BenefitsTabTextConfig {
     off?: string;
     memberBenefits?: string;
     memberBenefitsNotLogin?: string;
+    memberBenefitsNotLoginText?: string;
     installment?: string;
     forNewMember?: string;
     expressShipping?: string;