@anker-in/headless-ui 1.0.26-temp-111002 → 1.0.26-temp-111401-alpha.1763091370012

package/dist/cjs/biz-components/Specs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Specs/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport DropDown from './dropdown'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n  const { data, buildData, onChange } = page || {}\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [active, setActive] = useState<any>({})\n  const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const { locale = 'us' } = useAiuiContext()\n\n  const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n  const isImageUrl = (urlPath: string) => {\n    try {\n      const url = new URL(urlPath)\n      const path = url.pathname.toLowerCase()\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n    } catch (e) {\n      // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n    }\n  }\n\n  const skuNode = (product: any, index: number) => {\n    const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n    const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n    const coupon = findSku?.coupons?.[0]\n    const { price, basePrice } = formatVariantPrice({\n      locale: locale || 'us',\n      amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n      baseAmount: coupon ? findSku?.price : 0,\n      currencyCode: product?.price?.currencyCode || 'USD',\n    })\n    return (\n      <div className=\"box-border specs-sku-node-wrap\">\n        <Text\n          className={`relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text`}\n          onClick={() => setVisibleActive({ ...visibleActive, [index]: !visibleActive?.[index] })}\n        >\n          <div className=\"flex items-center justify-between overflow-hidden\">\n            <div\n              className=\"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title\"\n              title={active?.[index]?.name}\n            >\n              {active?.[index]?.name || ''}\n            </div>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"25\"\n              viewBox=\"0 0 24 25\"\n              fill=\"none\"\n              className=\"openDropDown\"\n            >\n              <path\n                d=\"M6 9.5L12 15.5L18 9.5\"\n                stroke=\"#1D1D1F\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n          <DropDown\n            index={index}\n            list={buildData?.products}\n            active={active}\n            filterActive={active}\n            setActive={setActive}\n            visible={visibleActive}\n            setVisible={setVisibleActive}\n          />\n        </Text>\n        <div className=\"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]\">\n          <Picture\n            source={findSku?.image?.url || ''}\n            className=\"aspect-h-[280] aspect-w-[280]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n        {findSku?.availableForSale ? (\n          <div className=\"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl\">\n            <div className=\"text-[#1D1D1F] specs-sku-node-price\">{price || ''}</div>\n            {basePrice && (\n              <div className=\"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price\">\n                {basePrice}\n              </div>\n            )}\n          </div>\n        ) : (\n          false\n        )}\n        {DefaultSelectMenu?.buttonText ? (\n          <Button onClick={() => onChange?.(product)} className=\"specs-sku-node-button\">\n            {DefaultSelectMenu?.buttonText}\n          </Button>\n        ) : null}\n      </div>\n    )\n  }\n\n  const normalNode = (v: any) => {\n    if (!v) return\n    if (v && typeof v !== 'string') {\n      return (\n        <div className=\"size-full\">\n          <p\n            className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n            dangerouslySetInnerHTML={{\n              __html: v?.text || '',\n            }}\n          />\n          <Picture\n            source={v?.imgUrl}\n            className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      )\n    }\n    return (\n      <div className=\"break-all\">\n        {isImageUrl(v) ? (\n          <Picture\n            source={v}\n            className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <p\n            className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n\n  const productNode = (data: any) => {\n    return data.map((st: any, idx: number) => {\n      const isFirstParameter = idx === 0\n      return (\n        <div\n          key={st}\n          className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n        >\n          <Heading\n            as=\"h3\"\n            html={st || ''}\n            className=\"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title\"\n          />\n          <div\n            className={`col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body`}\n          >\n            {Object.keys(active)?.map?.((item: string) => {\n              const currentData = active?.[item]\n              const currentMenus = RightMenu?.menus?.find?.(\n                (item: any) => item?.handle === currentData?.handle\n              )?.subTitle\n              return normalNode(currentMenus?.[st])\n            })}\n          </div>\n        </div>\n      )\n    })\n  }\n\n  // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n  const childrenNode = (node: any) => {\n    if (!active) return\n    const { subTitle, isProduct } = node\n    // \u5982\u679C\u662F\u4EA7\u54C1\n    if (isProduct) {\n      return (\n        <>\n          <div\n            className={`box-border grid w-full cursor-pointer grid-cols-3 border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product`}\n          >\n            {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n            <div\n              className={`col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body`}\n            >\n              {Object.keys(active)?.map((item: string, index: number) => {\n                const currentData = active?.[item]\n                const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n                return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n              })}\n            </div>\n          </div>\n          {subTitle?.length ? productNode(subTitle) : null}\n        </>\n      )\n    }\n    return productNode(subTitle)\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    if (!buildData?.products?.length) return\n    const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n    let currentActive = {}\n    skus?.forEach?.((sku: string, index: number) => {\n      const findData = buildData?.products?.find?.((item: any) => {\n        const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n        if (findSku) return true\n      })\n      if (findData) {\n        currentActive = {\n          ...currentActive,\n          [index]: {\n            sku: sku,\n            name: findData?.name,\n            handle: findData?.handle,\n          },\n        }\n      }\n    })\n    setActive(currentActive)\n  }, [buildData])\n\n  useEffect(() => {\n    if (isMobile) {\n      const currentActive = Object.keys(active || {})\n      if (currentActive?.length > 2) {\n        const newActive = currentActive?.slice?.(0, 2)\n        let newShowActive = {}\n        newActive?.forEach?.((item: string) => {\n          newShowActive = { ...newShowActive, [item]: active?.[item] }\n        })\n        setActive(newShowActive)\n      }\n    }\n  }, [isMobile])\n\n  return (\n    <div className=\"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper\" ref={innerRef}>\n      {LeftMenu?.data ? (\n        <div className=\"box-border w-full overflow-hidden specs-wrapper-content\">\n          {LeftMenu?.data?.map?.((item: any, index: number) => {\n            return (\n              <div key={index} className=\"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item\">\n                {childrenNode(item)}\n              </div>\n            )\n          })}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDU,IAAAI,EAAA,6BAlDVC,EAAqB,yBACrBC,EAA+B,oCAC/BC,EAA8B,4BAC9BC,EAA6C,iBAC7CC,EAA2B,kCAC3BC,EAAmC,2CACnCC,EAA0D,qCAC1DH,EAAmD,oBAEnD,MAAMI,EAAQ,EAAAC,QAAM,WAAgC,CAACC,EAAWC,IAAQ,CACtE,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,SAAAC,CAAS,EAAIJ,GAAQ,CAAC,EAEzCK,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAExD,CAACC,EAAQC,CAAS,KAAI,YAAc,CAAC,CAAC,EACtC,CAACC,EAAeC,CAAgB,KAAI,YAAqC,CAAC,CAAC,EAE3EC,KAAW,UAAuB,IAAI,EAEtC,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAEnC,CAAE,SAAAC,EAAU,UAAAC,EAAW,kBAAAC,CAAkB,KAAI,WAAQ,IAAMZ,GAAM,MAAQ,CAAC,EAAG,CAACA,GAAM,IAAI,CAAC,EAEzFa,EAAcC,GAAoB,CACtC,GAAI,CAEF,MAAMC,EADM,IAAI,IAAID,CAAO,EACV,SAAS,YAAY,EACtC,MAAO,0CAA0C,KAAKC,CAAI,CAC5D,MAAY,CAEV,MAAO,2CAA2C,KAAKD,CAAO,CAChE,CACF,EAEME,EAAU,CAACC,EAAcC,IAAkB,CAC/C,MAAMC,EAAkBR,GAAW,OAAO,OAAQS,GAAcA,GAAM,SAAWH,GAAS,MAAM,EAC1FI,EAAUJ,GAAS,UAAU,OAAQG,GAAcA,GAAM,MAAQH,GAAS,KAAOE,GAAiB,GAAG,EACrGG,EAASD,GAAS,UAAU,CAAC,EAC7B,CAAE,MAAAE,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQf,GAAU,KAClB,OAAQa,EAASA,GAAQ,qBAAuBD,GAAS,MACzD,WAAYC,EAASD,GAAS,MAAQ,EACtC,aAAcJ,GAAS,OAAO,cAAgB,KAChD,CAAC,EACD,SACE,QAAC,OAAI,UAAU,iCACb,qBAAC,QACC,UAAW,iPACX,QAAS,IAAMV,EAAiB,CAAE,GAAGD,EAAe,CAACY,CAAK,EAAG,CAACZ,IAAgBY,CAAK,CAAE,CAAC,EAEtF,qBAAC,OAAI,UAAU,oDACb,oBAAC,OACC,UAAU,mGACV,MAAOd,IAASc,CAAK,GAAG,KAEvB,SAAAd,IAASc,CAAK,GAAG,MAAQ,GAC5B,KACA,OAAC,OACC,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,UAAU,eAEV,mBAAC,QACC,EAAE,wBACF,OAAO,UACP,eAAa,IACb,iBAAe,QACf,kBAAgB,QAClB,EACF,GACF,KACA,OAAC,EAAAO,QAAA,CACC,MAAOP,EACP,KAAMjB,GAAW,SACjB,OAAQG,EACR,aAAcA,EACd,UAAWC,EACX,QAASC,EACT,WAAYC,EACd,GACF,KACA,OAAC,OAAI,UAAU,gFACb,mBAAC,WACC,OAAQc,GAAS,OAAO,KAAO,GAC/B,UAAU,gCACV,aAAa,6BACf,EACF,EACCA,GAAS,oBACR,QAAC,OAAI,UAAU,oEACb,oBAAC,OAAI,UAAU,sCAAuC,SAAAE,GAAS,GAAG,EACjEC,MACC,OAAC,OAAI,UAAU,yFACZ,SAAAA,EACH,GAEJ,EAEA,GAEDZ,GAAmB,cAClB,OAAC,UAAO,QAAS,IAAMV,IAAWe,CAAO,EAAG,UAAU,wBACnD,SAAAL,GAAmB,WACtB,EACE,MACN,CAEJ,EAEMc,EAAcC,GAAW,CAC7B,GAAKA,EACL,OAAIA,GAAK,OAAOA,GAAM,YAElB,QAAC,OAAI,UAAU,YACb,oBAAC,KACC,UAAU,uFACV,wBAAyB,CACvB,OAAQA,GAAG,MAAQ,EACrB,EACF,KACA,OAAC,WACC,OAAQA,GAAG,OACX,UAAU,qEACV,aAAa,6BACf,GACF,KAIF,OAAC,OAAI,UAAU,YACZ,SAAAd,EAAWc,CAAC,KACX,OAAC,WACC,OAAQA,EACR,UAAU,qEACV,aAAa,6BACf,KAEA,OAAC,KACC,UAAU,uFACV,wBAAyB,CACvB,OAAQA,GAAK,EACf,EACF,EAEJ,CAEJ,EAEMC,EAAe5B,GACZA,EAAK,IAAI,CAAC6B,EAASC,IAAgB,CACxC,MAAMC,EAAmBD,IAAQ,EACjC,SACE,QAAC,OAEC,UAAW,yJAEX,oBAAC,WACC,GAAG,KACH,KAAMD,GAAM,GACZ,UAAU,8IACZ,KACA,OAAC,OACC,UAAW,2JAEV,gBAAO,KAAKzB,CAAM,GAAG,MAAOgB,GAAiB,CAC5C,MAAMY,EAAc5B,IAASgB,CAAI,EAC3Ba,EAAetB,GAAW,OAAO,OACpCS,GAAcA,GAAM,SAAWY,GAAa,MAC/C,GAAG,SACH,OAAON,EAAWO,IAAeJ,CAAE,CAAC,CACtC,CAAC,EACH,IAlBKA,CAmBP,CAEJ,CAAC,EAIGK,EAAgBC,GAAc,CAClC,GAAI,CAAC/B,EAAQ,OACb,KAAM,CAAE,SAAAgC,EAAU,UAAAC,CAAU,EAAIF,EAEhC,OAAIE,KAEA,oBACE,qBAAC,OACC,UAAW,6IAEV,UAAAF,GAAM,UAAS,OAAC,WAAQ,GAAG,KAAK,KAAMA,GAAM,OAAS,GAAI,UAAU,oCAAoC,KACxG,OAAC,OACC,UAAW,gKAEV,gBAAO,KAAK/B,CAAM,GAAG,IAAI,CAACgB,EAAcF,IAAkB,CACzD,MAAMc,EAAc5B,IAASgB,CAAI,EAC3BkB,EAAiBrC,GAAW,UAAU,OAAQmB,GAAcA,GAAM,SAAWY,GAAa,MAAM,EACtG,SAAO,OAAC,OAAgB,SAAAhB,EAAQ,CAAE,GAAGsB,EAAgB,IAAKN,GAAa,IAAK,KAAMZ,CAAK,EAAGF,CAAK,GAA9EE,CAAgF,CACnG,CAAC,EACH,GACF,EACCgB,GAAU,OAASR,EAAYQ,CAAQ,EAAI,MAC9C,EAGGR,EAAYQ,CAAQ,CAC7B,EAEA,gCAAoBrC,EAAK,IAAMS,EAAS,OAAyB,KAEjE,aAAU,IAAM,CACd,GAAI,CAACP,GAAW,UAAU,OAAQ,OAClC,MAAMsC,EAAO3B,GAAmB,KAAK,QAAQ,GAAG,GAAK,CAAC,EACtD,IAAI4B,EAAgB,CAAC,EACrBD,GAAM,UAAU,CAACE,EAAavB,IAAkB,CAC9C,MAAMwB,EAAWzC,GAAW,UAAU,OAAQmB,GAAc,CAE1D,GADgBA,GAAM,UAAU,OAAQO,GAAWA,GAAG,MAAQc,CAAG,EACpD,MAAO,EACtB,CAAC,EACGC,IACFF,EAAgB,CACd,GAAGA,EACH,CAACtB,CAAK,EAAG,CACP,IAAKuB,EACL,KAAMC,GAAU,KAChB,OAAQA,GAAU,MACpB,CACF,EAEJ,CAAC,EACDrC,EAAUmC,CAAa,CACzB,EAAG,CAACvC,CAAS,CAAC,KAEd,aAAU,IAAM,CACd,GAAIE,EAAU,CACZ,MAAMqC,EAAgB,OAAO,KAAKpC,GAAU,CAAC,CAAC,EAC9C,GAAIoC,GAAe,OAAS,EAAG,CAC7B,MAAMG,EAAYH,GAAe,QAAQ,EAAG,CAAC,EAC7C,IAAII,EAAgB,CAAC,EACrBD,GAAW,UAAWvB,GAAiB,CACrCwB,EAAgB,CAAE,GAAGA,EAAe,CAACxB,CAAI,EAAGhB,IAASgB,CAAI,CAAE,CAC7D,CAAC,EACDf,EAAUuC,CAAa,CACzB,CACF,CACF,EAAG,CAACzC,CAAQ,CAAC,KAGX,OAAC,OAAI,UAAU,oDAAoD,IAAKK,EACrE,SAAAE,GAAU,QACT,OAAC,OAAI,UAAU,0DACZ,SAAAA,GAAU,MAAM,MAAM,CAACU,EAAWF,OAE/B,OAAC,OAAgB,UAAU,+EACxB,SAAAgB,EAAad,CAAI,GADVF,CAEV,CAEH,EACH,EACE,KACN,CAEJ,CAAC,EAEDtB,EAAM,YAAc,QAEpB,IAAOV,KAAQ,cAAWU,CAAK",
-  "names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "Specs", "React", "page", "ref", "data", "buildData", "onChange", "isMobile", "active", "setActive", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive"]
+  "sourcesContent": ["'use client'\n\nimport DropDown from './dropdown'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n  const { data, buildData, onChange, onSecondaryChange } = page || {}\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [active, setActive] = useState<any>({})\n  const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const { locale = 'us' } = useAiuiContext()\n\n  const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n  const isImageUrl = (urlPath: string) => {\n    try {\n      const url = new URL(urlPath)\n      const path = url.pathname.toLowerCase()\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n    } catch (e) {\n      // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n    }\n  }\n\n  const skuNode = (product: any, index: number) => {\n    const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n    const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n    const coupon = findSku?.coupons?.[0]\n    const { price, basePrice } = formatVariantPrice({\n      locale: locale || 'us',\n      amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n      baseAmount: coupon ? findSku?.price : 0,\n      currencyCode: product?.price?.currencyCode || 'USD',\n    })\n    const buttonTextValue = typeof DefaultSelectMenu?.buttonText === 'string' \n      ? DefaultSelectMenu?.buttonText \n      : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n    return (\n      <div className=\"box-border specs-sku-node-wrap\">\n        <Text\n          className={`relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text`}\n          onClick={() => setVisibleActive({ ...visibleActive, [index]: !visibleActive?.[index] })}\n        >\n          <div className=\"flex items-center justify-between overflow-hidden\">\n            <div\n              className=\"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title\"\n              title={active?.[index]?.name}\n            >\n              {active?.[index]?.name || ''}\n            </div>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"25\"\n              viewBox=\"0 0 24 25\"\n              fill=\"none\"\n              className=\"openDropDown\"\n            >\n              <path\n                d=\"M6 9.5L12 15.5L18 9.5\"\n                stroke=\"#1D1D1F\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n          <DropDown\n            index={index}\n            list={buildData?.products}\n            active={active}\n            filterActive={active}\n            setActive={setActive}\n            visible={visibleActive}\n            setVisible={setVisibleActive}\n          />\n        </Text>\n        <div className=\"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]\">\n          <Picture\n            source={findSku?.image?.url || ''}\n            className=\"aspect-h-[280] aspect-w-[280]\"\n            imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n          />\n        </div>\n        {findSku?.availableForSale ? (\n          <div className=\"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl\">\n            <div className=\"text-[#1D1D1F] specs-sku-node-price\">{price || ''}</div>\n            {basePrice && (\n              <div className=\"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price\">\n                {basePrice}\n              </div>\n            )}\n          </div>\n        ) : (\n          false\n        )}\n        {buttonTextValue ? (\n          <Button onClick={() => {\n            onChange?.(product, index)\n          }} className=\"specs-sku-node-button\">\n            {buttonTextValue}\n          </Button>\n        ) : null}\n      </div>\n    )\n  }\n\n  const normalNode = (v: any) => {\n    if (!v) return\n    if (v && typeof v !== 'string') {\n      return (\n        <div className=\"size-full\">\n          <p\n            className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n            dangerouslySetInnerHTML={{\n              __html: v?.text || '',\n            }}\n          />\n          <Picture\n            source={v?.imgUrl}\n            className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      )\n    }\n    return (\n      <div className=\"break-all\">\n        {isImageUrl(v) ? (\n          <Picture\n            source={v}\n            className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <p\n            className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n\n  const productNode = (data: any) => {\n    return data.map((st: any, idx: number) => {\n      const isFirstParameter = idx === 0\n      return (\n        <div\n          key={st}\n          className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n        >\n          <Heading\n            as=\"h3\"\n            html={st || ''}\n            className=\"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title\"\n          />\n          <div\n            className={`col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body`}\n          >\n            {Object.keys(active)?.map?.((item: string) => {\n              const currentData = active?.[item]\n              const currentMenus = RightMenu?.menus?.find?.(\n                (item: any) => item?.handle === currentData?.handle\n              )?.subTitle\n              return normalNode(currentMenus?.[st])\n            })}\n          </div>\n        </div>\n      )\n    })\n  }\n\n  // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n  const childrenNode = (node: any) => {\n    if (!active) return\n    const { subTitle, isProduct } = node\n    // \u5982\u679C\u662F\u4EA7\u54C1\n    if (isProduct) {\n      return (\n        <>\n          <div\n            className={`box-border grid w-full cursor-pointer grid-cols-3 border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product`}\n          >\n            {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n            <div\n              className={`col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body`}\n            >\n              {Object.keys(active)?.map((item: string, index: number) => {\n                const currentData = active?.[item]\n                const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n                return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n              })}\n            </div>\n          </div>\n          {subTitle?.length ? productNode(subTitle) : null}\n        </>\n      )\n    }\n    return productNode(subTitle)\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    if (!buildData?.products?.length) return\n    const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n    let currentActive = {}\n    skus?.forEach?.((sku: string, index: number) => {\n      const findData = buildData?.products?.find?.((item: any) => {\n        const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n        if (findSku) return true\n      })\n      if (findData) {\n        currentActive = {\n          ...currentActive,\n          [index]: {\n            sku: sku,\n            name: findData?.name,\n            handle: findData?.handle,\n          },\n        }\n      }\n    })\n    setActive(currentActive)\n  }, [buildData])\n\n  useEffect(() => {\n    if (isMobile) {\n      const currentActive = Object.keys(active || {})\n      if (currentActive?.length > 2) {\n        const newActive = currentActive?.slice?.(0, 2)\n        let newShowActive = {}\n        newActive?.forEach?.((item: string) => {\n          newShowActive = { ...newShowActive, [item]: active?.[item] }\n        })\n        setActive(newShowActive)\n      }\n    }\n  }, [isMobile])\n\n  return (\n    <div className=\"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper\" ref={innerRef}>\n      {LeftMenu?.data ? (\n        <div className=\"box-border w-full overflow-hidden specs-wrapper-content\">\n          {LeftMenu?.data?.map?.((item: any, index: number) => {\n            return (\n              <div key={index} className=\"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item\">\n                {childrenNode(item)}\n              </div>\n            )\n          })}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
+  "mappings": "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",
+  "names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "Specs", "React", "page", "ref", "data", "buildData", "onChange", "onSecondaryChange", "isMobile", "active", "setActive", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "buttonTextValue", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive"]
 }

package/dist/cjs/biz-components/SpecsComparison/SpecsComparison.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SpecsComparisonProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<SpecsComparisonProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/TabWithImage/TabWithImage.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TabWithImageProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TabWithImageProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/TabWithImage/TabWithImage.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var D=Object.create;var x=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var l in a)x(t,l,{get:a[l],enumerable:!0})},v=(t,a,l,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of H(a))!M.call(t,p)&&p!==l&&x(t,p,{get:()=>a[p],enumerable:!(c=E(a,p))||c.enumerable});return t};var P=(t,a,l)=>(l=t!=null?D(L(t)):{},v(a||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),R=t=>v(x({},"__esModule",{value:!0}),t);var $={};W($,{default:()=>S});module.exports=R($);var e=require("react/jsx-runtime"),i=P(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),T=require("../../hooks/useExposure.js"),b=require("framer-motion");const z="image",A="tab_with_image",_=i.default.forwardRef(({data:t,className:a},l)=>{const{title:c,subtitle:p,desc:h,image:j,mobileImage:C,datalist:s=[]}=t,f=(0,i.useRef)(null);(0,T.useExposure)(f,{componentType:z,componentName:A,componentTitle:c,componentDescription:h}),(0,i.useImperativeHandle)(l,()=>f.current);const N=(r,o)=>{I(r),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[m,I]=(0,i.useState)(0),u=(0,i.useRef)([]),[w,k]=(0,i.useState)({left:0,width:0});return(0,i.useEffect)(()=>{const r=u.current[m];if(r){const{offsetLeft:o,offsetWidth:d}=r;k({left:o,width:d})}},[m,s.length]),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"TabWithImage",className:(0,g.cn)("tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",a),children:[(0,e.jsxs)("div",{className:"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"tab-with-image__header",children:[(0,e.jsx)(n.Heading,{as:"h3",size:4,html:c,className:"tab-with-image__title"}),(0,e.jsx)(n.Text,{as:"p",size:1,html:h,className:"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:w.left,width:w.width}}),s.map((r,o)=>(0,e.jsx)("div",{ref:d=>{u.current[o]=d},onClick:d=>N(o,d),className:(0,g.cn)("tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",m===o?"tab-with-image__tab--active text-black":"text-white"),children:(0,e.jsx)(n.Heading,{as:"h1",size:1,html:r?.title,className:"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),(0,e.jsx)("div",{className:"tab-with-image__image-wrapper relative w-full flex-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]",children:(0,e.jsx)(b.AnimatePresence,{mode:"wait",children:s[m]&&(0,e.jsx)(b.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"tab-with-image__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(n.Picture,{source:`${s[m].image.url} ,${s[m].imgPad?.url||s[m].image.url} 1440, ${s[m].imageMob?.url||s[m].image.url} 767`,alt:s[m].image.alt,className:"tab-with-image__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},s[m].image.url)})})]})});_.displayName="TabWithImage";var S=(0,y.withLayout)(_);
+"use strict";"use client";var D=Object.create;var x=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var l in a)x(t,l,{get:a[l],enumerable:!0})},v=(t,a,l,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of H(a))!M.call(t,p)&&p!==l&&x(t,p,{get:()=>a[p],enumerable:!(c=E(a,p))||c.enumerable});return t};var P=(t,a,l)=>(l=t!=null?D(L(t)):{},v(a||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),R=t=>v(x({},"__esModule",{value:!0}),t);var $={};W($,{default:()=>S});module.exports=R($);var e=require("react/jsx-runtime"),i=P(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),T=require("../../hooks/useExposure.js"),b=require("framer-motion");const z="image",A="tab_with_image",_=i.default.forwardRef(({data:t,className:a},l)=>{const{title:c,subtitle:p,desc:h,image:j,mobileImage:C,datalist:s=[]}=t,f=(0,i.useRef)(null);(0,T.useExposure)(f,{componentType:z,componentName:A,componentTitle:c,componentDescription:h}),(0,i.useImperativeHandle)(l,()=>f.current);const N=(r,o)=>{I(r),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[m,I]=(0,i.useState)(0),u=(0,i.useRef)([]),[w,k]=(0,i.useState)({left:0,width:0});return(0,i.useEffect)(()=>{const r=u.current[m];if(r){const{offsetLeft:o,offsetWidth:d}=r;k({left:o,width:d})}},[m,s.length]),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"TabWithImage",className:(0,g.cn)("tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",a),children:[(0,e.jsxs)("div",{className:"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"tab-with-image__header",children:[(0,e.jsx)(n.Heading,{as:"h3",size:4,html:c,className:"tab-with-image__title"}),(0,e.jsx)(n.Text,{as:"p",size:1,html:h,className:"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:w.left,width:w.width}}),s.map((r,o)=>(0,e.jsx)("div",{ref:d=>{u.current[o]=d},onClick:d=>N(o,d),className:(0,g.cn)("tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",m===o?"tab-with-image__tab--active text-black":"text-white"),children:(0,e.jsx)(n.Heading,{as:"h1",size:1,html:r?.title,className:"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),(0,e.jsx)("div",{className:"tab-with-image__image-wrapper relative w-full flex-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]",children:(0,e.jsx)(b.AnimatePresence,{mode:"wait",children:s[m]&&(0,e.jsx)(b.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"tab-with-image__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(n.Picture,{source:`${s[m].image?.url} ,${s[m].imgPad?.url||s[m].image?.url} 1440, ${s[m].imageMob?.url||s[m].image?.url} 767`,alt:s[m].image?.alt,className:"tab-with-image__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},s[m].image?.url)})})]})});_.displayName="TabWithImage";var S=(0,y.withLayout)(_);
 //# sourceMappingURL=TabWithImage.js.map

package/dist/cjs/biz-components/TabWithImage/TabWithImage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabWithImage/TabWithImage.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn(\n        'tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]',\n        className\n      )}\n    >\n      <div className=\"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div className=\"tab-with-image__header\">\n          <Heading as={'h3'} size={4} html={title} className=\"tab-with-image__title\" />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={el => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={e => handleClick(index, e)}\n                className={cn(\n                  'tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'tab-with-image__tab--active text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\"tab-with-image__image-wrapper relative w-full flex-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        <AnimatePresence mode=\"wait\">\n          {datalist[activeIndex] && (\n            <motion.div\n              key={datalist[activeIndex].image.url}\n              {...({\n                initial: { opacity: 0 },\n                animate: { opacity: 1 },\n                exit: { opacity: 0 },\n                transition: { duration: 0.3 },\n              } as any)}\n              className=\"tab-with-image__image-motion absolute left-0 top-0 w-full\"\n            >\n              <Picture\n                source={`${datalist[activeIndex].image.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image.url} 767`}\n                alt={datalist[activeIndex].image.alt}\n                className=\"tab-with-image__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn(\n        'tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]',\n        className\n      )}\n    >\n      <div className=\"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div className=\"tab-with-image__header\">\n          <Heading as={'h3'} size={4} html={title} className=\"tab-with-image__title\" />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={el => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={e => handleClick(index, e)}\n                className={cn(\n                  'tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'tab-with-image__tab--active text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\"tab-with-image__image-wrapper relative w-full flex-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        <AnimatePresence mode=\"wait\">\n          {datalist[activeIndex] && (\n            <motion.div\n              key={datalist[activeIndex].image?.url}\n              {...({\n                initial: { opacity: 0 },\n                animate: { opacity: 1 },\n                exit: { opacity: 0 },\n                transition: { duration: 0.3 },\n              } as any)}\n              className=\"tab-with-image__image-motion absolute left-0 top-0 w-full\"\n            >\n              <Picture\n                source={`${datalist[activeIndex].image?.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image?.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image?.url} 767`}\n                alt={datalist[activeIndex].image?.alt}\n                className=\"tab-with-image__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyDQ,IAAAI,EAAA,6BAxDRC,EAAwE,oBACxEC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAE5BC,EAAwC,yBAExC,MAAMC,EAAgB,QAChBC,EAAgB,iBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAW,CAAC,CAAE,EAAIR,EAE/DS,KAAS,UAAuB,IAAI,KAE1C,eAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBE,CACxB,CAAC,KAED,uBAAoBH,EAAK,IAAMO,EAAO,OAAyB,EAE/D,MAAMC,EAAc,CAACC,EAAeC,IAAwC,CAC1EC,EAAeF,CAAK,EAClBC,EAAE,OAAuB,eAAe,CACxC,SAAU,SACV,OAAQ,SACR,MAAO,SACT,CAAC,CACH,EAEM,CAACE,EAAaD,CAAc,KAAI,YAAS,CAAC,EAC1CE,KAAU,UAAqC,CAAC,CAAC,EACjD,CAACC,EAAaC,CAAc,KAAI,YAAS,CAAE,KAAM,EAAG,MAAO,CAAE,CAAC,EAEpE,sBAAU,IAAM,CACd,MAAMC,EAAUH,EAAQ,QAAQD,CAAW,EAC3C,GAAII,EAAS,CACX,KAAM,CAAE,WAAAC,EAAY,YAAAC,CAAY,EAAIF,EACpCD,EAAe,CAAE,KAAME,EAAY,MAAOC,CAAY,CAAC,CACzD,CACF,EAAG,CAACN,EAAaN,EAAS,MAAM,CAAC,KAG/B,QAAC,WACC,IAAKC,EACL,uBAAqB,eACrB,aAAW,MACT,mGACAR,CACF,EAEA,qBAAC,OAAI,UAAU,mGACb,qBAAC,OAAI,UAAU,yBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,wBAAwB,KAC3E,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAME,EACN,UAAU,oIACZ,GACF,KAEA,OAAC,OAAI,UAAU,oGACb,oBAAC,OAAI,UAAU,8FAEb,oBAAC,OACC,UAAU,iHACV,MAAO,CACL,KAAMW,EAAY,KAClB,MAAOA,EAAY,KACrB,EACF,EAGCR,EAAS,IAAI,CAACa,EAA4BV,OACzC,OAAC,OAEC,IAAKW,GAAM,CACTP,EAAQ,QAAQJ,CAAK,EAAIW,CAC3B,EACA,QAASV,GAAKF,EAAYC,EAAOC,CAAC,EAClC,aAAW,MACT,uNACAE,IAAgBH,EAAQ,yCAA2C,YACrE,EAEA,mBAAC,WACC,GAAG,KACH,KAAM,EACN,KAAMU,GAAM,MACZ,UAAU,kFACZ,GAfKV,CAgBP,CACD,GACH,EACF,GACF,KACA,OAAC,OAAI,UAAU,2NACb,mBAAC,mBAAgB,KAAK,OACnB,SAAAH,EAASM,CAAW,MACnB,OAAC,SAAO,IAAP,CAGG,QAAS,CAAE,QAAS,CAAE,EACtB,QAAS,CAAE,QAAS,CAAE,EACtB,KAAM,CAAE,QAAS,CAAE,EACnB,WAAY,CAAE,SAAU,EAAI,EAE9B,UAAU,4DAEV,mBAAC,WACC,OAAQ,GAAGN,EAASM,CAAW,EAAE,OAAO,GAAG,KAAKN,EAASM,CAAW,EAAE,QAAQ,KAAON,EAASM,CAAW,EAAE,OAAO,GAAG,UAAUN,EAASM,CAAW,EAAE,UAAU,KAAON,EAASM,CAAW,EAAE,OAAO,GAAG,OACtM,IAAKN,EAASM,CAAW,EAAE,OAAO,IAClC,UAAU,oLACZ,GAbKN,EAASM,CAAW,EAAE,OAAO,GAcpC,EAEJ,EACF,GACF,CAEJ,CAAC,EAEDhB,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
   "names": ["TabWithImage_exports", "__export", "TabWithImage_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_framer_motion", "componentType", "componentName", "TabWithImage", "React", "data", "className", "ref", "title", "subtitle", "desc", "image", "mobileImage", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el"]
 }

package/dist/cjs/biz-components/Tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import type { TabsProps } from './types.js';
 import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TabsProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/Tabs/Tabs.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var c=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,r)=>{for(var s in r)c(e,s,{get:r[s],enumerable:!0})},f=(e,r,s,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of G(r))!w.call(e,o)&&o!==s&&c(e,o,{get:()=>r[o],enumerable:!(l=A(r,o))||l.enumerable});return e};var t=(e,r,s)=>(s=e!=null?L(q(e)):{},f(r||!e||!e.__esModule?c(s,"default",{value:e,enumerable:!0}):s,e)),D=e=>f(c({},"__esModule",{value:!0}),e);var R={};B(R,{default:()=>M});module.exports=D(R);var i=require("react/jsx-runtime"),b=require("../../shared/Styles.js"),p=t(require("../../components/tabs.js")),n=require("../../helpers/index.js"),u=t(require("react")),y=t(require("../ShelfDisplay/index.js")),d=t(require("../AccordionCards/index.js")),k=t(require("../Faq/index.js")),N=t(require("../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js")),h=t(require("../Title/index.js")),g=t(require("../Graphic/index.js"));const I=u.default.forwardRef(({data:e,className:r},s)=>{const{theme:l,shape:o,align:v,tabs:m=[],sectionTitle:T}=e,P=a=>a?.blockType==="ipc-shelfdisplay"?(0,i.jsx)(y.default,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?(0,i.jsx)(N.default,{data:a}):a?.blockType==="ipc-accordioncards"?(0,i.jsx)(d.default,{data:a}):a?.blockType==="ipc-faq"?(0,i.jsx)(k.default,{data:a}):a?.blockType==="ipc-graphic"?(0,i.jsx)(g.default,{data:a}):null;return(0,i.jsxs)("section",{ref:s,className:(0,n.cn)(l==="dark"?"aiui-dark":"",r),children:[T&&(0,i.jsx)(h.default,{className:"section-title",data:{title:T}}),(0,i.jsxs)(p.Tabs,{shape:o,align:v,defaultValue:m?.[0]?.tabName,children:[(0,i.jsx)(p.TabsList,{className:"tabs-list",children:(Array.isArray(m)?m:[])?.map(a=>(0,i.jsx)(p.TabsTrigger,{value:a.tabName,className:"tabs-trigger",children:a.tabName},a.tabName))}),(Array.isArray(m)?m:[])?.map(a=>(0,i.jsx)(p.TabsContent,{value:a.tabName,className:"tabs-content",children:a.tabContent?.[0]?P(a.tabContent?.[0]):null},a.tabName))]})]})});var M=(0,b.withLayout)(I);
+"use strict";"use client";var L=Object.create;var p=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,i)=>{for(var s in i)p(e,s,{get:i[s],enumerable:!0})},f=(e,i,s,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of G(i))!w.call(e,o)&&o!==s&&p(e,o,{get:()=>i[o],enumerable:!(l=A(i,o))||l.enumerable});return e};var t=(e,i,s)=>(s=e!=null?L(q(e)):{},f(i||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e)),D=e=>f(p({},"__esModule",{value:!0}),e);var R={};B(R,{default:()=>M});module.exports=D(R);var r=require("react/jsx-runtime"),d=require("../../shared/Styles.js"),c=t(require("../../components/tabs.js")),n=require("../../helpers/index.js"),u=t(require("react")),y=t(require("../ShelfDisplay/index.js")),b=t(require("../AccordionCards/index.js")),k=t(require("../Faq/index.js")),N=t(require("../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js")),h=t(require("../Title/index.js")),g=t(require("../Graphic/index.js"));const I=u.default.forwardRef(({data:e,className:i},s)=>{const{theme:l,shape:o,align:v,tabs:m=[],sectionTitle:T}=e,P=a=>a?.blockType==="ipc-shelfdisplay"?(0,r.jsx)(y.default,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?(0,r.jsx)(N.default,{data:a}):a?.blockType==="ipc-accordioncards"?(0,r.jsx)(b.default,{data:a}):a?.blockType==="ipc-faq"?(0,r.jsx)(k.default,{data:a}):a?.blockType==="ipc-graphic"?(0,r.jsx)(g.default,{data:a}):null;return(0,r.jsxs)("section",{ref:s,className:(0,n.cn)(l==="dark"?"aiui-dark":"",i),children:[T&&(0,r.jsx)(h.default,{className:"section-title",data:{title:T}}),(0,r.jsxs)(c.Tabs,{shape:o,align:v,defaultValue:m?.[0]?.id||m?.[0]?.tabName,children:[(0,r.jsx)(c.TabsList,{className:"tabs-list",children:(Array.isArray(m)?m:[])?.map(a=>(0,r.jsx)(c.TabsTrigger,{value:a.id||a.tabName,className:"tabs-trigger",children:a.tabName},a.id||a.tabName))}),(Array.isArray(m)?m:[])?.map(a=>(0,r.jsx)(c.TabsContent,{value:a.id||a.tabName,className:"tabs-content mt-[24px]",children:a.tabContent?.[0]?P(a.tabContent?.[0]):null},a.id||a.tabName))]})]})});var M=(0,d.withLayout)(I);
 //# sourceMappingURL=Tabs.js.map

package/dist/cjs/biz-components/Tabs/Tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Tabs/Tabs.tsx"],
-  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabContentItem, TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs = [], sectionTitle } = data\n\n  const renderTabContent = (tabContent: TabContentItem) => {\n    if (tabContent?.blockType === 'ipc-shelfdisplay') {\n      return <ShelfDisplay data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n      return <MultiLayoutGraphicBlock data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-accordioncards') {\n      return <AccordionCards data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-faq') {\n      return <Faq data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-graphic') {\n      return <Graphic data={tabContent} />\n    } else {\n      return null\n    }\n  }\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {(Array.isArray(tabs)\n          ? tabs\n          : [])?.map((tab: any) => (\n              <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n                {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n              </TabsPrimitive.TabsContent>\n            ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(Tabs)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkBa,IAAAI,EAAA,6BAjBbC,EAA2B,kCAC3BC,EAA+B,uCAC/BC,EAAmB,kCAEnBC,EAAkB,oBAClBC,EAAyB,uCACzBC,EAA2B,yCAC3BC,EAAgB,8BAChBC,EAAoC,oEACpCC,EAAkB,gCAClBC,EAAoB,kCAEpB,MAAMC,EAAO,EAAAC,QAAM,WAAsC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,sBACrB,OAAC,EAAAC,QAAA,CAAa,KAAMD,EAAY,EAC9BA,GAAY,YAAc,iCAC5B,OAAC,EAAAE,QAAA,CAAwB,KAAMF,EAAY,EACzCA,GAAY,YAAc,wBAC5B,OAAC,EAAAG,QAAA,CAAe,KAAMH,EAAY,EAChCA,GAAY,YAAc,aAC5B,OAAC,EAAAI,QAAA,CAAI,KAAMJ,EAAY,EACrBA,GAAY,YAAc,iBAC5B,OAAC,EAAAK,QAAA,CAAQ,KAAML,EAAY,EAE3B,KAIX,SACE,QAAC,WAAQ,IAAKP,EAAc,aAAW,MAAGC,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,MAAgB,OAAC,EAAAQ,QAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOR,CAAa,EAAG,KACjF,QAAClB,EAAc,KAAd,CAAmB,MAAOe,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,QACvE,oBAACjB,EAAc,SAAd,CAAuB,UAAU,YAC9B,gBAAM,QAAQiB,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAIU,MACtC,OAAC3B,EAAc,YAAd,CAA4C,MAAO2B,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,GACE,MAAM,QAAQV,CAAI,EAChBA,EACA,CAAC,IAAI,IAAKU,MACR,OAAC3B,EAAc,YAAd,CAA4C,MAAO2B,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,aAAa,CAAC,EAAIR,EAAiBQ,EAAI,aAAa,CAAC,CAAC,EAAI,MADjCA,EAAI,OAEpC,CACD,GACP,GACF,CAEJ,CAAC,EAED,IAAO/B,KAAQ,cAAWa,CAAI",
+  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabContentItem, TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs = [], sectionTitle } = data\n\n  const renderTabContent = (tabContent: TabContentItem) => {\n    if (tabContent?.blockType === 'ipc-shelfdisplay') {\n      return <ShelfDisplay data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n      return <MultiLayoutGraphicBlock data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-accordioncards') {\n      return <AccordionCards data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-faq') {\n      return <Faq data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-graphic') {\n      return <Graphic data={tabContent} />\n    } else {\n      return null\n    }\n  }\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.id || tab.tabName} value={tab.id || tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n          <TabsPrimitive.TabsContent key={tab.id || tab.tabName} value={tab.id || tab.tabName} className=\"tabs-content mt-[24px]\">\n            {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(Tabs)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkBa,IAAAI,EAAA,6BAjBbC,EAA2B,kCAC3BC,EAA+B,uCAC/BC,EAAmB,kCAEnBC,EAAkB,oBAClBC,EAAyB,uCACzBC,EAA2B,yCAC3BC,EAAgB,8BAChBC,EAAoC,oEACpCC,EAAkB,gCAClBC,EAAoB,kCAEpB,MAAMC,EAAO,EAAAC,QAAM,WAAsC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,sBACrB,OAAC,EAAAC,QAAA,CAAa,KAAMD,EAAY,EAC9BA,GAAY,YAAc,iCAC5B,OAAC,EAAAE,QAAA,CAAwB,KAAMF,EAAY,EACzCA,GAAY,YAAc,wBAC5B,OAAC,EAAAG,QAAA,CAAe,KAAMH,EAAY,EAChCA,GAAY,YAAc,aAC5B,OAAC,EAAAI,QAAA,CAAI,KAAMJ,EAAY,EACrBA,GAAY,YAAc,iBAC5B,OAAC,EAAAK,QAAA,CAAQ,KAAML,EAAY,EAE3B,KAIX,SACE,QAAC,WAAQ,IAAKP,EAAc,aAAW,MAAGC,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,MAAgB,OAAC,EAAAQ,QAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOR,CAAa,EAAG,KACjF,QAAClB,EAAc,KAAd,CAAmB,MAAOe,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,IAAMA,IAAO,CAAC,GAAG,QACxF,oBAACjB,EAAc,SAAd,CAAuB,UAAU,YAC9B,gBAAM,QAAQiB,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAIU,MACtC,OAAC3B,EAAc,YAAd,CAAsD,MAAO2B,EAAI,IAAMA,EAAI,QAAS,UAAU,eAC5F,SAAAA,EAAI,SADyBA,EAAI,IAAMA,EAAI,OAE9C,CACD,EACH,GACE,MAAM,QAAQV,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAKU,MACvC,OAAC3B,EAAc,YAAd,CAAsD,MAAO2B,EAAI,IAAMA,EAAI,QAAS,UAAU,yBAC5F,SAAAA,EAAI,aAAa,CAAC,EAAIR,EAAiBQ,EAAI,aAAa,CAAC,CAAC,EAAI,MADjCA,EAAI,IAAMA,EAAI,OAE9C,CACD,GACH,GACF,CAEJ,CAAC,EAED,IAAO/B,KAAQ,cAAWa,CAAI",
   "names": ["Tabs_exports", "__export", "Tabs_default", "__toCommonJS", "import_jsx_runtime", "import_Styles", "TabsPrimitive", "import_helpers", "import_react", "import_ShelfDisplay", "import_AccordionCards", "import_Faq", "import_MultiLayoutGraphicBlock", "import_Title", "import_Graphic", "Tabs", "React", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "ShelfDisplay", "MultiLayoutGraphicBlock", "AccordionCards", "Faq", "Graphic", "Title", "tab"]
 }

package/dist/cjs/biz-components/Tabs/types.d.ts

@@ -22,6 +22,7 @@ export type TabsProps = {
         shape: Shape;
         align: Align;
         tabs: Array<{
+            id: string;
             tabName: string;
             tabContent: TabContentItem[];
         }>;

package/dist/cjs/biz-components/Tabs/types.js

@@ -1,2 +1,2 @@
-"use strict";var e=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var l=(a,p,r,o)=>{if(p&&typeof p=="object"||typeof p=="function")for(let t of s(p))!c.call(a,t)&&t!==r&&e(a,t,{get:()=>p[t],enumerable:!(o=i(p,t))||o.enumerable});return a};var y=a=>l(e({},"__esModule",{value:!0}),a);var m={};module.exports=y(m);
+"use strict";var r=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var l=(a,p,e,o)=>{if(p&&typeof p=="object"||typeof p=="function")for(let t of s(p))!c.call(a,t)&&t!==e&&r(a,t,{get:()=>p[t],enumerable:!(o=i(p,t))||o.enumerable});return a};var y=a=>l(r({},"__esModule",{value:!0}),a);var m={};module.exports=y(m);
 //# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/Tabs/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Tabs/types.ts"],
-  "sourcesContent": ["import type { Align, Shape, Theme } from '../../types/props.js'\nimport type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js'\nimport type { ShelfDisplayProps } from '../ShelfDisplay/shelfDisplay.js'\nimport type { AccordionCardsType } from '../AccordionCards/index.js'\nimport type { FaqProps } from '../Faq/types.js'\nimport type { GraphicProps } from '../Graphic/index.js'\nexport type TabContentItem =\n  | (ShelfDisplayProps['data'] & { blockType: 'ipc-shelfdisplay' })\n  | (MultiLayoutGraphicBlockProps['data'] & { blockType: 'ipc-multiLayoutGraphicBlock' })\n  | (AccordionCardsType['data'] & { blockType: 'ipc-accordioncards' })\n  | (FaqProps['data'] & { blockType: 'ipc-faq' })\n  | (GraphicProps['data'] & { blockType: 'ipc-graphic' })\n\nexport type TabsProps = {\n  data: {\n    sectionTitle?: string\n    theme: Theme\n    shape: Shape\n    align: Align\n    tabs: Array<{\n      tabName: string\n      tabContent: TabContentItem[] // \u6539\u4E3A\u6570\u7EC4\u5143\u7D20\u53EF\u4EE5\u662F\u4E0D\u540C\u7C7B\u578B\n    }>\n  }\n  className?: string\n}"],
+  "sourcesContent": ["import type { Align, Shape, Theme } from '../../types/props.js'\nimport type { MultiLayoutGraphicBlockProps } from '../MultiLayoutGraphicBlock/types.js'\nimport type { ShelfDisplayProps } from '../ShelfDisplay/shelfDisplay.js'\nimport type { AccordionCardsType } from '../AccordionCards/index.js'\nimport type { FaqProps } from '../Faq/types.js'\nimport type { GraphicProps } from '../Graphic/index.js'\nexport type TabContentItem =\n  | (ShelfDisplayProps['data'] & { blockType: 'ipc-shelfdisplay' })\n  | (MultiLayoutGraphicBlockProps['data'] & { blockType: 'ipc-multiLayoutGraphicBlock' })\n  | (AccordionCardsType['data'] & { blockType: 'ipc-accordioncards' })\n  | (FaqProps['data'] & { blockType: 'ipc-faq' })\n  | (GraphicProps['data'] & { blockType: 'ipc-graphic' })\n\nexport type TabsProps = {\n  data: {\n    sectionTitle?: string\n    theme: Theme\n    shape: Shape\n    align: Align\n    tabs: Array<{\n      id: string\n      tabName: string\n      tabContent: TabContentItem[] // \u6539\u4E3A\u6570\u7EC4\u5143\u7D20\u53EF\u4EE5\u662F\u4E0D\u540C\u7C7B\u578B\n    }>\n  }\n  className?: string\n}"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/TabsGroup/index.d.ts

@@ -1,7 +1,7 @@
 import type { TabsGroupProps } from './types.js';
 import React from 'react';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TabsGroupProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/TabsWithMedia/TabsWithMedia.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TabsWithMediaProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TabsWithMediaProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/TextMarquee/index.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import 'swiper/css';
 import 'swiper/css/pagination';
 declare const _default: import("react").ForwardRefExoticComponent<Omit<{
     data: any;
 }, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.d.ts

@@ -5,7 +5,7 @@ import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/effect-coverflow';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ThreeDCarouselProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/Title/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TitleProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TitleProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/Title/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var G=Object.create;var m=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(t,e)=>{for(var n in e)m(t,n,{get:e[n],enumerable:!0})},H=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of K(e))!W.call(t,i)&&i!==n&&m(t,i,{get:()=>e[i],enumerable:!(c=J(e,i))||c.enumerable});return t};var Y=(t,e,n)=>(n=t!=null?G(Q(t)):{},H(e||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t)),Z=t=>H(m({},"__esModule",{value:!0}),t);var et={};X(et,{default:()=>tt});module.exports=Z(et);var o=require("react/jsx-runtime"),r=Y(require("react")),u=require("gsap"),w=require("gsap/dist/SplitText"),v=require("gsap/dist/ScrollTrigger"),T=require("../../helpers/utils.js"),D=require("../../components/index.js"),P=require("../../shared/Styles.js"),nt=require("../../hooks/useExposure.js"),S=require("../../shared/trackUrlRef.js"),z=require("react-intersection-observer");const M="link",N="title",$=r.default.forwardRef(({data:t,className:e,as:n="h2"},c)=>{const{title:i,caption:f,theme:k,extensions:p,align:d="left"}=t,y=(0,r.useRef)(null),l=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:I,inView:b}=(0,z.useInView)();return(0,r.useImperativeHandle)(c,()=>y.current),(0,r.useEffect)(()=>{u.gsap.registerPlugin(w.SplitText,v.ScrollTrigger);function V(){if(!l.current)return;const U=l.current?.clientHeight||80;s.current&&s.current.revert(),a.current&&a.current.kill(),s.current=new w.SplitText(l.current,{type:"words",wordsClass:"word"});const g=s.current.words;u.gsap.set(g,{opacity:0}),a.current=v.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${U*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:j=>{const B=j.progress,R=g.length||1,C=.5,h=1/R,L=h*(1-C),E=(R-1)*L+h,F=Math.min(1,E>0?B/E:0);g.forEach((O,_)=>{const q=_*L,A=h;let x=(F-q)/A;x=Math.max(0,Math.min(1,x)),u.gsap.set(O,{opacity:x})})}})}return b&&V(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[b]),(i||f)&&(0,o.jsxs)("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:y,children:[(0,o.jsx)("div",{ref:I,className:(0,T.cn)("space-y-4 flex-1",e,{"aiui-dark":k==="dark","text-center":d==="center","text-right":d==="right","text-left":d==="left"}),children:(0,o.jsx)(D.Heading,{ref:l,as:n,size:4,html:f||i})}),p?.textLink&&(0,o.jsxs)("a",{className:(0,T.cn)({"aiui-dark":k==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,S.trackUrlRef)(p?.link,`${M}_${N}`),"data-headless-type-name":`${M}#${N}`,"data-headless-title-desc-button":`${i}#${f}`,children:[p?.textLink,(0,o.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,o.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});$.displayName="Title";var tt=(0,P.withLayout)($);
+"use strict";"use client";var J=Object.create;var d=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of Q(e))!X.call(t,o)&&o!==n&&d(t,o,{get:()=>e[o],enumerable:!(c=K(e,o))||c.enumerable});return t};var Z=(t,e,n)=>(n=t!=null?J(W(t)):{},M(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),tt=t=>M(d({},"__esModule",{value:!0}),t);var rt={};Y(rt,{default:()=>et});module.exports=tt(rt);var i=require("react/jsx-runtime"),r=Z(require("react")),f=require("gsap"),x=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),k=require("../../helpers/utils.js"),z=require("../../components/index.js"),P=require("../../shared/Styles.js"),S=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer");const E="link",$="title",D=r.default.forwardRef(({data:t,className:e,as:n="h2",weight:c="bold"},o)=>{const{title:p,caption:u,theme:b,extensions:m,align:g="left"}=t,y=(0,r.useRef)(null),l=(0,r.useRef)(null),s=(0,r.useRef)(null),a=(0,r.useRef)(null),{ref:V,inView:R}=(0,I.useInView)();return(0,r.useImperativeHandle)(o,()=>y.current),(0,r.useEffect)(()=>{f.gsap.registerPlugin(x.SplitText,T.ScrollTrigger);function B(){if(!l.current)return;const U=l.current?.clientHeight||80;s.current&&s.current.revert(),a.current&&a.current.kill(),s.current=new x.SplitText(l.current,{type:"words",wordsClass:"word"});const h=s.current.words;f.gsap.set(h,{opacity:0}),a.current=T.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${U*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:j=>{const C=j.progress,L=h.length||1,F=.5,w=1/L,N=w*(1-F),H=(L-1)*N+w,O=Math.min(1,H>0?C/H:0);h.forEach((_,q)=>{const A=q*N,G=w;let v=(O-A)/G;v=Math.max(0,Math.min(1,v)),f.gsap.set(_,{opacity:v})})}})}return R&&B(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[R]),(p||u)&&(0,i.jsxs)("div",{id:m?.id,className:"titleBottom mb-6 flex gap-2 items-end justify-between overflow-hidden title-box",ref:y,children:[(0,i.jsx)("div",{ref:V,className:(0,k.cn)("space-y-4 flex-1",e,{"aiui-dark":b==="dark","text-center":g==="center","text-right":g==="right","text-left":g==="left"}),children:(0,i.jsx)(z.Heading,{ref:l,as:n,size:4,html:u||p,weight:c})}),m?.textLink&&(0,i.jsxs)("a",{className:(0,k.cn)({"aiui-dark":b==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] overflow-hidden transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,S.trackUrlRef)(m?.link,`${E}_${$}`),"data-headless-type-name":`${E}#${$}`,"data-headless-title-desc-button":`${p}#${u}`,children:[(0,i.jsx)("div",{className:"flex-1 truncate whitespace-nowrap",children:m?.textLink}),(0,i.jsx)("div",{className:"size-6",children:(0,i.jsx)("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:(0,i.jsx)("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})})]})]})});D.displayName="Title";var et=(0,P.withLayout)(D);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Title/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2' }, ref) => {\n  const { title, caption, theme, extensions, align = 'left' } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      if (splitTextInstance.current) {\n        splitTextInstance.current.revert()\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n      }\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        invalidateOnRefresh: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length || 1\n          const overlap = 0.5\n          const interval = 1 / total\n          const step = interval * (1 - overlap)\n          const lastEnd = (total - 1) * step + interval\n          const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n          words.forEach((word: any, i: number) => {\n            const start = i * step\n            const width = interval\n            let opacity = (normalizedProgress - start) / width\n            opacity = Math.max(0, Math.min(1, opacity))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n        <div\n          ref={inViewRef}\n          className={cn('space-y-4 flex-1', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-right': align === 'right',\n            'text-left': align === 'left',\n          })}\n        >\n          <Heading ref={titleRef} as={as} size={4} html={caption || title} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            {extensions?.textLink}\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n              ></path>\n            </svg>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "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",
-  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n  const { title, caption, theme, extensions, align = 'left' } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      if (splitTextInstance.current) {\n        splitTextInstance.current.revert()\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n      }\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        invalidateOnRefresh: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length || 1\n          const overlap = 0.5\n          const interval = 1 / total\n          const step = interval * (1 - overlap)\n          const lastEnd = (total - 1) * step + interval\n          const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n          words.forEach((word: any, i: number) => {\n            const start = i * step\n            const width = interval\n            let opacity = (normalizedProgress - start) / width\n            opacity = Math.max(0, Math.min(1, opacity))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div\n        id={extensions?.id}\n        className=\"titleBottom mb-6 flex gap-2 items-end justify-between overflow-hidden title-box\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('space-y-4 flex-1', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-right': align === 'right',\n            'text-left': align === 'left',\n          })}\n        >\n          <Heading ref={titleRef} as={as} size={4} html={caption || title} weight={weight} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center text-base font-[700] leading-[1.4] text-[#777] overflow-hidden transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            <div className=\"flex-1 truncate whitespace-nowrap\">{extensions?.textLink}</div>\n            <div className=\"size-6\">\n              <svg\n                width=\"24\"\n                height=\"24\"\n                className=\"mb-[3px]\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n              >\n                <path\n                  className=\"transition-all duration-[0.4s]\"\n                  d=\"M10.5 8L14.5 12L10.5 16\"\n                  stroke=\"#777\"\n                  stroke-width=\"1.5\"\n                  stroke-linecap=\"round\"\n                ></path>\n              </svg>\n            </div>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "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",
+  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "as", "weight", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity"]
 }

package/dist/cjs/biz-components/Title/types.d.ts

@@ -31,4 +31,5 @@ export interface TitleProps {
      */
     className?: string;
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    weight?: 'bold' | 'medium' | 'semibold' | 'extraBold' | 'black';
 }

package/dist/cjs/biz-components/Title/types.js

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var o=(t,e,a,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of h(e))!p.call(t,i)&&i!==a&&s(t,i,{get:()=>e[i],enumerable:!(r=n(e,i))||r.enumerable});return t};var g=t=>o(s({},"__esModule",{value:!0}),t);var l={};module.exports=g(l);
+"use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var h=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of l(e))!o.call(t,i)&&i!==s&&a(t,i,{get:()=>e[i],enumerable:!(r=n(e,i))||r.enumerable});return t};var m=t=>h(a({},"__esModule",{value:!0}),t);var p={};module.exports=m(p);
 //# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/Title/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/types.ts"],
-  "sourcesContent": ["import type { Align, Theme } from '../../types/props.js'\n\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface TitleProps {\n  data: {\n    align?: Align\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title?: string\n    caption?: string\n    /**\n     * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\u8272\n     */\n    theme?: Theme\n    /**\n     * \u6269\u5C55\u6570\u636E\n     */\n    extensions?: any\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n}\n"],
+  "sourcesContent": ["import type { Align, Theme } from '../../types/props.js'\n\nexport interface Feature {\n  /**\n   * \u7279\u6027\u6807\u9898\n   */\n  title: string\n}\n\nexport interface TitleProps {\n  data: {\n    align?: Align\n    /**\n     * \u4E3B\u6807\u9898\n     */\n    title?: string\n    caption?: string\n    /**\n     * \u7279\u6027\u5217\u8868\uFF0C\u6700\u591A\u652F\u63013\u4E2A\n     */\n    features?: Feature[]\n    /**\n     * \u4E3B\u9898\u8272\n     */\n    theme?: Theme\n    /**\n     * \u6269\u5C55\u6570\u636E\n     */\n    extensions?: any\n  }\n  /**\n   * \u81EA\u5B9A\u4E49\u7C7B\u540D\n   */\n  className?: string\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n  weight?: 'bold' | 'medium' | 'semibold' | 'extraBold' | 'black'\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/VideoFeature/VideoFeature.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { VideoFeatureProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<VideoFeatureProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/VideoFeature/VideoFeature.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var a=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},v=(e,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of H(t))!E.call(e,d)&&d!==i&&a(e,d,{get:()=>t[d],enumerable:!(r=T(t,d))||r.enumerable});return e};var F=(e,t,i)=>(i=e!=null?L(M(e)):{},v(t||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e)),P=e=>v(a({},"__esModule",{value:!0}),e);var z={};R(z,{default:()=>g});module.exports=P(z);var l=require("react/jsx-runtime"),o=F(require("react")),s=require("../../components/index.js"),x=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),n=require("../../hooks/useIntersectionObserver.js");const S="video",I="video_feature",f=o.default.forwardRef(({data:e,className:t},i)=>{const{title:r,subtitle:d,poster:h,video:k,mobPoster:V,mobvideo:c}=e,p=(0,o.useRef)(null),u=(0,o.useRef)(null),m=(0,o.useRef)(null),[y,N]=(0,o.useState)(""),[D,w]=(0,o.useState)("");return(0,_.useExposure)(p,{componentType:S,componentName:I,componentTitle:r,componentDescription:d}),(0,o.useImperativeHandle)(i,()=>p.current),(0,n.useIntersectionObserverDelay)(u,{once:!0,threshold:.1,callback:()=>{N(k.url)}}),(0,n.useIntersectionObserverDelay)(m,{once:!0,threshold:.1,callback:()=>{c?.url&&w(c.url)}}),(0,l.jsxs)("section",{ref:p,"data-ui-component-id":"VideoFeature",className:(0,x.cn)("video-feature flex flex-col items-center rounded-[16px] text-white",t),children:[(0,l.jsx)(s.Heading,{as:"h2",size:4,html:r,className:"video-feature__title w-full text-left laptop:text-center"}),(0,l.jsx)(s.Text,{as:"p",size:4,html:d,className:"video-feature__subtitle mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,l.jsxs)("div",{className:"video-feature__video-wrapper mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]",children:[(0,l.jsx)("div",{ref:u,className:"video-feature__desktop-video-container",children:(0,l.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h?.url,src:y,loop:!0,className:"video-feature__video video-feature__video--desktop hidden h-full w-full object-cover xl:h-[360px] tablet:block"})}),(0,l.jsx)("div",{ref:m,className:"video-feature__mobile-video-container",children:(0,l.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:V?.url||"",src:D,loop:!0,className:"video-feature__video video-feature__video--mobile block tablet:hidden"})})]})]})});f.displayName="VideoFeature";var g=(0,b.withLayout)(f);
+"use strict";"use client";var L=Object.create;var a=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var R=(e,t)=>{for(var i in t)a(e,i,{get:t[i],enumerable:!0})},v=(e,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of H(t))!E.call(e,d)&&d!==i&&a(e,d,{get:()=>t[d],enumerable:!(r=T(t,d))||r.enumerable});return e};var F=(e,t,i)=>(i=e!=null?L(M(e)):{},v(t||!e||!e.__esModule?a(i,"default",{value:e,enumerable:!0}):i,e)),P=e=>v(a({},"__esModule",{value:!0}),e);var z={};R(z,{default:()=>g});module.exports=P(z);var l=require("react/jsx-runtime"),o=F(require("react")),s=require("../../components/index.js"),x=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),n=require("../../hooks/useIntersectionObserver.js");const S="video",I="video_feature",f=o.default.forwardRef(({data:e,className:t},i)=>{const{title:r,subtitle:d,poster:h,video:k,mobPoster:V,mobvideo:c}=e,p=(0,o.useRef)(null),u=(0,o.useRef)(null),m=(0,o.useRef)(null),[y,N]=(0,o.useState)(""),[D,w]=(0,o.useState)("");return(0,_.useExposure)(p,{componentType:S,componentName:I,componentTitle:r,componentDescription:d}),(0,o.useImperativeHandle)(i,()=>p.current),(0,n.useIntersectionObserverDelay)(u,{once:!0,threshold:.1,callback:()=>{N(k?.url)}}),(0,n.useIntersectionObserverDelay)(m,{once:!0,threshold:.1,callback:()=>{c?.url&&w(c?.url)}}),(0,l.jsxs)("section",{ref:p,"data-ui-component-id":"VideoFeature",className:(0,x.cn)("video-feature flex flex-col items-center rounded-[16px] text-white",t),children:[(0,l.jsx)(s.Heading,{as:"h2",size:4,html:r,className:"video-feature__title w-full text-left laptop:text-center"}),(0,l.jsx)(s.Text,{as:"p",size:4,html:d,className:"video-feature__subtitle mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,l.jsxs)("div",{className:"video-feature__video-wrapper mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]",children:[(0,l.jsx)("div",{ref:u,className:"video-feature__desktop-video-container",children:(0,l.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h?.url,src:y,loop:!0,className:"video-feature__video video-feature__video--desktop hidden h-full w-full object-cover xl:h-[360px] tablet:block"})}),(0,l.jsx)("div",{ref:m,className:"video-feature__mobile-video-container",children:(0,l.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:V?.url||"",src:D,loop:!0,className:"video-feature__video video-feature__video--mobile block tablet:hidden"})})]})]})});f.displayName="VideoFeature";var g=(0,b.withLayout)(f);
 //# sourceMappingURL=VideoFeature.js.map

package/dist/cjs/biz-components/VideoFeature/VideoFeature.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/VideoFeature/VideoFeature.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport type { VideoFeatureProps } from './types.js'\n\nconst componentType = 'video'\nconst componentName = 'video_feature'\n\nconst VideoFeature = React.forwardRef<HTMLDivElement, VideoFeatureProps>(({ data, className }, ref) => {\n  const { title, subtitle, poster, video, mobPoster, mobvideo } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n  // \u63A7\u5236\u89C6\u9891\u662F\u5426\u52A0\u8F7D\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      setLoadedDesktopVideoSrc(video.url)\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobvideo?.url) {\n        setLoadedMobileVideoSrc(mobvideo.url)\n      }\n    },\n  })\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"VideoFeature\"\n      className={cn('video-feature flex flex-col items-center rounded-[16px] text-white', className)}\n    >\n      <Heading as={'h2'} size={4} html={title} className=\"video-feature__title w-full text-left laptop:text-center\" />\n      <Text\n        as={'p'}\n        size={4}\n        html={subtitle}\n        className=\"video-feature__subtitle mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div className=\"video-feature__video-wrapper mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]\">\n        <div ref={desktopVideoRef} className=\"video-feature__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={poster?.url}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"video-feature__video video-feature__video--desktop hidden h-full w-full object-cover xl:h-[360px] tablet:block\"\n          ></video>\n        </div>\n        <div ref={mobileVideoRef} className=\"video-feature__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobPoster?.url || ''}\n            src={loadedMobileVideoSrc}\n            loop\n            className=\"video-feature__video video-feature__video--mobile block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    </section>\n  )\n})\n\nVideoFeature.displayName = 'VideoFeature'\n\nexport default withLayout(VideoFeature)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0DM,IAAAI,EAAA,6BAzDNC,EAA6D,oBAC7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA6C,kDAG7C,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAO,UAAAC,EAAW,SAAAC,CAAS,EAAIR,EAE1DS,KAAS,UAAuB,IAAI,EACpCC,KAAkB,UAAuB,IAAI,EAC7CC,KAAiB,UAAuB,IAAI,EAG5C,CAACC,EAAuBC,CAAwB,KAAI,YAAS,EAAE,EAC/D,CAACC,EAAsBC,CAAuB,KAAI,YAAS,EAAE,EAEnE,wBAAYN,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG/D,gCAA6BC,EAAiB,CAC5C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACdG,EAAyBP,EAAM,GAAG,CACpC,CACF,CAAC,KAGD,gCAA6BK,EAAgB,CAC3C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACVH,GAAU,KACZO,EAAwBP,EAAS,GAAG,CAExC,CACF,CAAC,KAGC,QAAC,WACC,IAAKC,EACL,uBAAqB,eACrB,aAAW,MAAG,qEAAsER,CAAS,EAE7F,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,2DAA2D,KAC9G,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMC,EACN,UAAU,oLACZ,KACA,QAAC,OAAI,UAAU,qFACb,oBAAC,OAAI,IAAKM,EAAiB,UAAU,yCACnC,mBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQL,GAAQ,IAChB,IAAKO,EACL,KAAI,GACJ,UAAU,iHACX,EACH,KACA,OAAC,OAAI,IAAKD,EAAgB,UAAU,wCAClC,mBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQJ,GAAW,KAAO,GAC1B,IAAKO,EACL,KAAI,GACJ,UAAU,wEACX,EACH,GACF,GACF,CAEJ,CAAC,EAEDhB,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport type { VideoFeatureProps } from './types.js'\n\nconst componentType = 'video'\nconst componentName = 'video_feature'\n\nconst VideoFeature = React.forwardRef<HTMLDivElement, VideoFeatureProps>(({ data, className }, ref) => {\n  const { title, subtitle, poster, video, mobPoster, mobvideo } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n  // \u63A7\u5236\u89C6\u9891\u662F\u5426\u52A0\u8F7D\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      setLoadedDesktopVideoSrc(video?.url)\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobvideo?.url) {\n        setLoadedMobileVideoSrc(mobvideo?.url)\n      }\n    },\n  })\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"VideoFeature\"\n      className={cn('video-feature flex flex-col items-center rounded-[16px] text-white', className)}\n    >\n      <Heading as={'h2'} size={4} html={title} className=\"video-feature__title w-full text-left laptop:text-center\" />\n      <Text\n        as={'p'}\n        size={4}\n        html={subtitle}\n        className=\"video-feature__subtitle mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div className=\"video-feature__video-wrapper mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]\">\n        <div ref={desktopVideoRef} className=\"video-feature__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={poster?.url}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"video-feature__video video-feature__video--desktop hidden h-full w-full object-cover xl:h-[360px] tablet:block\"\n          ></video>\n        </div>\n        <div ref={mobileVideoRef} className=\"video-feature__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobPoster?.url || ''}\n            src={loadedMobileVideoSrc}\n            loop\n            className=\"video-feature__video video-feature__video--mobile block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    </section>\n  )\n})\n\nVideoFeature.displayName = 'VideoFeature'\n\nexport default withLayout(VideoFeature)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0DM,IAAAI,EAAA,6BAzDNC,EAA6D,oBAC7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA6C,kDAG7C,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAO,UAAAC,EAAW,SAAAC,CAAS,EAAIR,EAE1DS,KAAS,UAAuB,IAAI,EACpCC,KAAkB,UAAuB,IAAI,EAC7CC,KAAiB,UAAuB,IAAI,EAG5C,CAACC,EAAuBC,CAAwB,KAAI,YAAS,EAAE,EAC/D,CAACC,EAAsBC,CAAuB,KAAI,YAAS,EAAE,EAEnE,wBAAYN,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG/D,gCAA6BC,EAAiB,CAC5C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACdG,EAAyBP,GAAO,GAAG,CACrC,CACF,CAAC,KAGD,gCAA6BK,EAAgB,CAC3C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACVH,GAAU,KACZO,EAAwBP,GAAU,GAAG,CAEzC,CACF,CAAC,KAGC,QAAC,WACC,IAAKC,EACL,uBAAqB,eACrB,aAAW,MAAG,qEAAsER,CAAS,EAE7F,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,2DAA2D,KAC9G,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMC,EACN,UAAU,oLACZ,KACA,QAAC,OAAI,UAAU,qFACb,oBAAC,OAAI,IAAKM,EAAiB,UAAU,yCACnC,mBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQL,GAAQ,IAChB,IAAKO,EACL,KAAI,GACJ,UAAU,iHACX,EACH,KACA,OAAC,OAAI,IAAKD,EAAgB,UAAU,wCAClC,mBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQJ,GAAW,KAAO,GAC1B,IAAKO,EACL,KAAI,GACJ,UAAU,wEACX,EACH,GACF,GACF,CAEJ,CAAC,EAEDhB,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
   "names": ["VideoFeature_exports", "__export", "VideoFeature_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_useIntersectionObserver", "componentType", "componentName", "VideoFeature", "React", "data", "className", "ref", "title", "subtitle", "poster", "video", "mobPoster", "mobvideo", "boxRef", "desktopVideoRef", "mobileVideoRef", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc"]
 }

package/dist/cjs/biz-components/WhyChoose/WhyChoose.d.ts

@@ -7,8 +7,8 @@ declare const WhyChooseItem: {
     displayName: string;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<WhyChooseProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export { WhyChooseItem };

package/dist/cjs/biz-components/index.d.ts

@@ -121,3 +121,12 @@ export declare const PAYLOAD_COMPONENT_MAP: {
     'ipc-whychoose': string;
     ksp: string;
 };
+export { default as CollectionsFilters } from './CollectionsFilters/index.js';
+export { default as FilterList } from './CollectionsFilters/FilterList.js';
+export { default as FilterHeader } from './CollectionsFilters/FilterHeader.js';
+export { default as FilterCardWrap } from './CollectionsFilters/FilterCardWrap.js';
+export { default as FilterCardWrapItem } from './CollectionsFilters/FilterCardWrapItem.js';
+export { default as Paginator } from './Paginator/index.js';
+export { default as CollectionsBanner } from './CollectionsBanner/index.js';
+export { default as TextMarquee } from './TextMarquee/index.js';
+export { default as CollectionShelves } from './CollectionShelves/index.js';