npm - @anker-in/headless-ui - Versions diffs - 1.1.78 → 1.1.80 - Mend

@anker-in/headless-ui 1.1.78 → 1.1.80

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 (173) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/biz-components/ImageWithText/ImageWithText.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import he,{useImperativeHandle as ge,useRef as g,useState as v,useEffect as Q}from"react";import{Heading as k,Picture as S,Text as M,Link as U}from"../../components/index.js";import{cn as r,getLocalizedPath as X}from"../../helpers/utils.js";import{withLayout as ve}from"../../shared/Styles.js";import{useExposure as be}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as we}from"../../hooks/useIntersectionObserver.js";import{useAiuiContext as _e}from"../AiuiProvider/index.js";import{motion as Y,AnimatePresence as ee}from"framer-motion";const ye="image",ke="image_with_text",te=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:e("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),ie=he.forwardRef(({data:ae,className:oe},le)=>{const{title:b,subtitle:N,desc:f,descIcon:T,image:w,padImage:D,mobileImage:z,theme:se="dark",items:E=[],layout:re="left",mediaType:ne="image",datalist:s=[],video:H,padVideo:j,mobVideo:R,button:u,textAlign:l="left"}=ae,i=re,{locale:W="us"}=_e(),V=g(null),I=g(null),L=g(null),P=g(null),C=g(null),[p,me]=v(0),A=g([]),[q,de]=v({left:0,width:0}),[h,$]=v(""),[B,F]=v(""),[O,Z]=v(""),m=s.length>0,_=ne==="video";be(V,{componentType:ye,componentName:ke,componentTitle:b,componentDescription:N}),ge(le,()=>V.current),Q(()=>{if(s.length>0){const t=A.current[p];if(t){const{offsetLeft:o,offsetWidth:a}=t;de({left:o,width:a})}}},[p,s.length]);const[G,pe]=v(!1);we(C,{once:!0,threshold:.01,callback:()=>{pe(!0)}}),Q(()=>{if(!G||!_)return;let t="",o="",a="";if(m&&s[p]){const c=s[p];t=c.video?.url||"",o=c.padVideo?.url||t,a=c.mobVideo?.url||t}else t=H?.url||"",o=j?.url||t,a=R?.url||t;t&&$(t),o&&F(o),a&&Z(a),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},200)},[G,_,m,p,s,H?.url,j?.url,R?.url]);const ce=(t,o)=>{if(me(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),_&&m&&s[t]){const a=s[t];a.video?.url&&$(a.video.url),a.padVideo?.url&&F(a.padVideo.url),a.mobVideo?.url&&Z(a.mobVideo.url),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},300)}},xe=()=>!y||!u?.text?null:e("div",{className:r("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":l==="center","flex justify-start":l==="left","laptop:hidden":i==="top"||i==="bottom"}),children:e(U,{href:X(u.link||"",W),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:te,children:u.text})}),n=E.length>0,y=!!u,J=()=>{if(m&&s[p]){const t=s[p];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return w?`${w?.url},${D?.url||w?.url} 1024, ${z?.url||w?.url} 768`:""},K=()=>{if(m){const c=s[p],x=c.image?.url,ue=c.imgPad?.url||x,fe=c.imageMob?.url||x;return e(ee,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:d("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:I,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:h,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:L,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ue,src:B||h,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:P,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:fe,src:O||h,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=w?.url,o=D?.url||t,a=z?.url||t;return d("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:I,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:h,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:L,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:B||h,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:P,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:O||h,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return d("section",{ref:V,"data-ui-component-id":"ImageWithText",className:r("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!m,"flex-col":!m&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!m&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":m,"aiui-dark":se==="dark"},oe),children:[m&&(b||f||s.length>0)&&d("div",{className:r("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":l==="left","text-center":l==="center"}),children:[d("div",{className:"image-with-text__header",children:[e(k,{as:"h3",size:4,html:b,className:"image-with-text__title"}),e(M,{as:"p",size:1,html:f,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),e("div",{className:r("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":l==="center"}),children:d("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:q.left,width:q.width}}),s.map((t,o)=>e("div",{ref:a=>{A.current[o]=a},onClick:a=>ce(o,a),className:r("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",p===o?"image-with-text__tab--active text-black":"text-white"),children:e(k,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!m&&(b||N||f||T||n||y)&&d("div",{className:r("image-with-text__content flex flex-col",{"justify-center":!y,"justify-between":y,"w-full laptop:w-fit":n,"items-start":l==="left","items-center":l==="center","text-left":l==="left","text-center":l==="center","laptop:order-1":i==="left"}),children:[d("div",{className:r("image-with-text__main-content",{"flex flex-col":y}),children:[d("div",{className:r("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&u?.text}),children:[d("div",{className:"image-with-text__title-wrapper flex flex-col",children:[e(k,{as:"h2",size:4,html:b,className:r("image-with-text__title",{"w-full":n,"text-left":n&&l==="left","text-center":n&&l==="center"})}),N&&e(M,{as:"p",size:n?4:3,html:N,className:r("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!n,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":n,"text-left":n&&l==="left","text-center":n&&l==="center"})})]}),(i==="top"||i==="bottom")&&u?.text&&e(U,{href:X(u.link||"",W),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:te,children:u.text})]}),!n&&(f||T)&&d("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[T&&e("img",{src:T,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),f&&e(k,{as:"h4",size:5,html:f,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),n&&e("div",{className:r("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:E.map((t,o)=>d("div",{className:r("image-with-text__item",{"text-center":l==="center"}),children:[d("div",{className:r("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":l==="center","justify-start":l==="left"}),children:[e(S,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),e(k,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(M,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},o))})]}),xe()]}),e("div",{ref:C,className:r("image-with-text__media-wrapper",{"w-[60%] shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":n,"laptop:basis-[63%] desktop:basis-[57%]":n&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":m,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:m?_?K():e(ee,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(S,{source:J(),alt:s[p].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},s[p].image?.url)}):_?K():e(S,{source:J(),className:r("image-with-text__image rounded-box laptop:rounded-box")})})]})});ie.displayName="ImageWithText";var De=ve(ie);export{De as default};
+"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import he,{useImperativeHandle as ge,useRef as g,useState as v,useEffect as Q}from"react";import{Heading as y,Picture as S,Text as M,Link as U}from"../../components/index.js";import{cn as r,getLocalizedPath as X}from"../../helpers/utils.js";import{withLayout as ve}from"../../shared/Styles.js";import{useExposure as be}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as we}from"../../hooks/useIntersectionObserver.js";import{useAiuiContext as _e}from"../AiuiProvider/index.js";import{motion as Y,AnimatePresence as ee}from"framer-motion";const ye="image",ke="image_with_text",te=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:e("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),ie=he.forwardRef(({data:ae,className:oe},le)=>{const{title:b,subtitle:k,desc:f,descIcon:P,image:w,padImage:D,mobileImage:z,theme:se="dark",items:E=[],layout:re="left",mediaType:ne="image",datalist:s=[],video:H,padVideo:j,mobVideo:R,button:u,textAlign:l="left"}=ae,i=re,{locale:W="us"}=_e(),V=g(null),N=g(null),T=g(null),I=g(null),C=g(null),[p,me]=v(0),A=g([]),[q,de]=v({left:0,width:0}),[h,$]=v(""),[B,F]=v(""),[O,Z]=v(""),n=s.length>0,_=ne==="video";be(V,{componentType:ye,componentName:ke,componentTitle:b,componentDescription:k}),ge(le,()=>V.current),Q(()=>{if(s.length>0){const t=A.current[p];if(t){const{offsetLeft:o,offsetWidth:a}=t;de({left:o,width:a})}}},[p,s.length]);const[G,pe]=v(!1);we(C,{once:!0,threshold:.01,callback:()=>{pe(!0)}}),Q(()=>{if(!G||!_)return;let t="",o="",a="";if(n&&s[p]){const c=s[p];t=c.video?.url||"",o=c.padVideo?.url||t,a=c.mobVideo?.url||t}else t=H?.url||"",o=j?.url||t,a=R?.url||t;t&&$(t),o&&F(o),a&&Z(a),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},200)},[G,_,n,p,s,H?.url,j?.url,R?.url]);const ce=(t,o)=>{if(me(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),_&&n&&s[t]){const a=s[t];a.video?.url&&$(a.video.url),a.padVideo?.url&&F(a.padVideo.url),a.mobVideo?.url&&Z(a.mobVideo.url),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},300)}},xe=()=>!L||!u?.text?null:e("div",{className:r("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":l==="center","flex justify-start":l==="left","laptop:hidden":i==="top"||i==="bottom"}),children:e(U,{href:X(u.link||"",W),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:te,children:u.text})}),m=E.length>0,L=!!u,J=()=>{if(n&&s[p]){const t=s[p];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return w?`${w?.url},${D?.url||w?.url} 1024, ${z?.url||w?.url} 768`:""},K=()=>{if(n){const c=s[p],x=c.image?.url,ue=c.imgPad?.url||x,fe=c.imageMob?.url||x;return e(ee,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:d("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:h,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ue,src:B||h,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:fe,src:O||h,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=w?.url,o=D?.url||t,a=z?.url||t;return d("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:h,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:B||h,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:O||h,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return d("section",{ref:V,"data-ui-component-id":"ImageWithText",className:r("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!n,"flex-col":!n&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!n&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":n,"aiui-dark":se==="dark"},oe),children:[n&&(b||f||s.length>0)&&d("div",{className:r("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":l==="left","text-center":l==="center"}),children:[d("div",{className:"image-with-text__header",children:[e(y,{as:"h3",size:4,html:b,className:"image-with-text__title"}),e(M,{as:"p",size:1,html:f,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),e("div",{className:r("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":l==="center"}),children:d("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:q.left,width:q.width}}),s.map((t,o)=>e("div",{ref:a=>{A.current[o]=a},onClick:a=>ce(o,a),className:r("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",p===o?"image-with-text__tab--active text-black":"text-white"),children:e(y,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!n&&(b||k||f)&&d("div",{className:r("image-with-text__content flex flex-col",{"justify-center":!L,"justify-between":L,"w-full laptop:w-fit":m,"items-start":l==="left","items-center":l==="center","text-left":l==="left","text-center":l==="center","laptop:order-1":i==="left"}),children:[d("div",{className:r("image-with-text__main-content",{"flex flex-col":L}),children:[d("div",{className:r("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&u?.text}),children:[d("div",{className:"image-with-text__title-wrapper flex flex-col",children:[e(y,{as:"h2",size:4,html:b,className:r("image-with-text__title",{"w-full":m,"text-left":m&&l==="left","text-center":m&&l==="center"})}),k&&e(M,{as:"p",size:m?4:3,html:k,className:r("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!m,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":m,"text-left":m&&l==="left","text-center":m&&l==="center"})})]}),(i==="top"||i==="bottom")&&u?.text&&e(U,{href:X(u.link||"",W),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:te,children:u.text})]}),!m&&(f||P)&&d("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[P&&e("img",{src:P,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),f&&e(y,{as:"h4",size:5,html:f,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),m&&e("div",{className:r("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:E.map((t,o)=>d("div",{className:r("image-with-text__item",{"text-center":l==="center"}),children:[d("div",{className:r("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":l==="center","justify-start":l==="left"}),children:[e(S,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),e(y,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(M,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},o))})]}),xe()]}),e("div",{ref:C,className:r("image-with-text__media-wrapper",{"laptop:w-[60%] w-full shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":m,"laptop:basis-[63%] desktop:basis-[57%]":m&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":n,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:n?_?K():e(ee,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(S,{source:J(),alt:s[p].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},s[p].image?.url)}):_?K():e(S,{source:J(),className:r("image-with-text__image rounded-box laptop:rounded-box")})})]})});ie.displayName="ImageWithText";var De=ve(ie);export{De as default};
 //# sourceMappingURL=ImageWithText.js.map