@anker-in/headless-ui 0.0.27-alpha.98 → 0.0.27

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

@@ -1,2 +1,2 @@
-"use strict";var L=Object.create;var y=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var z=(s,o)=>{for(var a in o)y(s,a,{get:o[a],enumerable:!0})},C=(s,o,a,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of P(o))!q.call(s,i)&&i!==a&&y(s,i,{get:()=>o[i],enumerable:!(m=S(o,i))||m.enumerable});return s};var N=(s,o,a)=>(a=s!=null?L(R(s)):{},C(o||!s||!s.__esModule?y(a,"default",{value:s,enumerable:!0}):a,s)),H=s=>C(y({},"__esModule",{value:!0}),s);var O={};z(O,{default:()=>E});module.exports=H(O);var e=require("react/jsx-runtime"),v=N(require("react")),T=require("react-responsive"),w=require("../../shared/Styles.js"),B=N(require("../../components/picture.js")),g=N(require("../../components/button.js")),I=require("../../components/heading.js"),G=require("../../components/text.js"),r=require("../../components/carousel.js"),d=require("../../components/gird.js"),$=N(require("../Title/index.js")),M=require("../../helpers/utils.js"),u=require("../../components/tabs.js");const x=({item:s,shape:o="square",isTab:a=!1})=>{const m=(0,T.useMediaQuery)({query:"(max-width: 1024px)"}),{theme:i="light",title:h,description:n,imageUrl:f,primaryButton:c,secondaryButton:b}=s,t="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,M.cn)("item-wrapper group relative box-border w-full overflow-hidden",{"rounded-2xl":o==="rounded","aiui-dark":i==="dark","h-[480px]":m&&!a,"h-[400px]":m&&a},"text-info-primary"),children:[(0,e.jsx)(B.default,{source:f?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${f?.width}/${f?.height}`}}),(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(I.Heading,{size:3,className:"item-title",html:h}),(0,e.jsx)(G.Text,{className:"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3",html:n})]}),(0,e.jsxs)("div",{className:"flex gap-[16px]",children:[b&&(0,e.jsx)(g.default,{className:t,variant:"secondary",asChild:!0,children:(0,e.jsx)("a",{href:b.link,children:b.text})}),c&&(0,e.jsx)(g.default,{className:t,variant:"primary",asChild:!0,children:(0,e.jsx)("a",{href:c.link,children:c.text})})]})]})]})},D=v.default.forwardRef((s,o)=>{const{shape:a,sectionTitle:m,groupByTab:i=!1,items:h=[],carousel:n}=s.data,f=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},c=h.map(t=>t.tabName).filter(Boolean).filter((t,l,p)=>p.indexOf(t)===l),b=c.map(t=>({tabName:t,items:h.filter(l=>l.tabName===t)})).reduce((t,l)=>(t[l.tabName]=l.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[m&&(0,e.jsx)($.default,{data:{title:m},className:"section-title"}),i?(0,e.jsxs)(u.Tabs,{shape:a,align:"left",defaultValue:c[0],children:[(0,e.jsx)(u.TabsList,{children:c.map((t,l)=>(0,e.jsx)(u.TabsTrigger,{value:t,children:t},l))}),c.map((t,l)=>(0,e.jsx)(u.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(d.Grid,{className:"w-full",children:[b[t].map((p,k)=>(0,e.jsx)(d.GridItem,{span:f(p.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(x,{item:p,shape:a,isTab:i})},`${p?.title||""}${k}`)),(0,e.jsx)(d.GridItem,{className:"laptop:hidden block",span:12,children:(0,e.jsx)(r.Carousel,{className:"",children:(0,e.jsx)(r.CarouselContent,{className:"flex",children:b[t].map((p,k)=>(0,e.jsx)(r.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(x,{item:p,shape:a,isTab:i})},`${p?.title||""}${k}`))})})})]}),n&&n?.items.length>0?(0,e.jsx)(r.Carousel,{className:"laptop:mt-4 mt-3",children:(0,e.jsx)(r.CarouselContent,{className:"flex",children:n.items.map((p,k)=>(0,e.jsx)(r.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(x,{item:p,shape:a,isTab:i})},k))})}):null]})},l))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(d.Grid,{className:"w-full",children:[h.map((t,l)=>(0,e.jsx)(d.GridItem,{span:f(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(x,{item:t,shape:a})},`${t?.title||""}${l}`)),h.map((t,l)=>(0,e.jsx)(d.GridItem,{span:f("full"),className:"laptop:hidden block",children:(0,e.jsx)(x,{item:t,shape:a})},`${t?.title||""}${l}`))]}),n&&n?.items.length>0?(0,e.jsx)(r.Carousel,{className:"laptop:mt-4 mt-3",children:(0,e.jsx)(r.CarouselContent,{className:"flex",children:n.items.map((t,l)=>(0,e.jsx)(r.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(x,{item:t,shape:a})},`${t?.title||""}${l}`))})}):null]})]})});var E=(0,w.withStyles)(D);
+"use strict";var j=Object.create;var v=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var Q=(s,o)=>{for(var l in o)v(s,l,{get:o[l],enumerable:!0})},V=(s,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of z(o))!U.call(s,i)&&i!==l&&v(s,i,{get:()=>o[i],enumerable:!(p=H(o,i))||p.enumerable});return s};var h=(s,o,l)=>(l=s!=null?j(D(s)):{},V(o||!s||!s.__esModule?v(l,"default",{value:s,enumerable:!0}):l,s)),q=s=>V(v({},"__esModule",{value:!0}),s);var F={};Q(F,{default:()=>O});module.exports=q(F);var t=require("react/jsx-runtime"),n=h(require("react")),G=require("react-responsive"),I=require("../../shared/Styles.js"),M=h(require("../../components/picture.js")),T=h(require("../../components/button.js")),L=require("../../components/heading.js"),_=require("../../components/text.js"),k=require("../../components/gird.js"),$=h(require("../Title/index.js")),S=require("../../helpers/utils.js"),B=h(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),R=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../shared/track.js");const x="image",y="p1_banner",w=({data:s,configuration:o,jIndex:l})=>{const[p,i]=(0,n.useState)(!1),d=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,n.useRef)(null),b=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,R.useExposure)(r,{componentType:x,componentName:y,position:l,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,n.useEffect)(()=>{i(d)},[d]);const{theme:m="light",title:g,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:E}=s,P="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,S.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?b():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:r,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(M.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(M.default,{source:E?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(L.Heading,{size:3,className:"item-title",html:g}),(0,t.jsx)(_.Text,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:f})]}),(0,t.jsxs)("div",{className:"flex gap-[16px]",children:[u&&u.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(u.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"secondary",children:u.text})}),a&&a.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(a.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"primary",children:a.text})})]})]})]})})},A=n.default.forwardRef((s,o)=>{const{shape:l,sectionTitle:p,groupByTab:i=!1,items:d=[],carousel:r}=s.data,b=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),g=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&(0,t.jsx)($.default,{data:{title:p},className:"section-title"}),i?(0,t.jsxs)(c.Tabs,{shape:l,align:"left",defaultValue:m[0],children:[(0,t.jsx)(c.TabsList,{children:m.map((e,a)=>(0,t.jsx)(c.TabsTrigger,{value:e,onClick:()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:y,component_title:p,component_position:1,navigation:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(c.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:l,isTab:i,activeTab:e,num:f?.[e]?.length||0}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:g(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:l,isTab:i}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(k.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:b(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:b("full"),className:"laptop:hidden block",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:l}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var O=(0,I.withStyles)(A);
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({\n  item,\n  shape = 'square',\n  isTab = false,\n}: { item: Item } & { shape?: Shape } & { isTab?: boolean }) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 1024px)' })\n\n  const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper group relative box-border w-full overflow-hidden',\n        {\n          'rounded-2xl': shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !isTab,\n          'h-[400px]': isMobile && isTab,\n        },\n        `text-info-primary`\n      )}\n    >\n      <Picture\n        source={imageUrl?.url}\n        className=\"inset-0 h-full overflow-hidden\"\n        imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n        style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n      />\n      <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n        <div>\n          <Heading size={3} className=\"item-title\" html={title} />\n          <Text className=\"item-description desktop:mt-1 text-text-2 lg-desktop:text-text-3\" html={description} />\n        </div>\n        <div className=\"flex gap-[16px]\">\n          {secondaryButton && (\n            <Button className={lgButtonSize} variant=\"secondary\" asChild>\n              <a href={secondaryButton.link}>{secondaryButton.text}</a>\n            </Button>\n          )}\n          {primaryButton && (\n            <Button className={lgButtonSize} variant=\"primary\" asChild>\n              <a href={primaryButton.link}>{primaryButton.text}</a>\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger key={index} value={tabName!}>\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <Grid className=\"w-full\">\n                  {tabItemsMaps[tabName].map((item, index) => (\n                    <GridItem\n                      key={`${item?.title || ''}${index}`}\n                      span={getSpan(item.width ?? 'full')}\n                      className=\"laptop:block hidden\"\n                    >\n                      <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                    </GridItem>\n                  ))}\n                  {\n                    <GridItem className=\"laptop:hidden block\" span={12}>\n                      <Carousel className=\"\">\n                        <CarouselContent className=\"flex\">\n                          {tabItemsMaps[tabName].map((item, index) => (\n                            <CarouselItem\n                              key={`${item?.title || ''}${index}`}\n                              className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n                            >\n                              <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                            </CarouselItem>\n                          ))}\n                        </CarouselContent>\n                      </Carousel>\n                    </GridItem>\n                  }\n                </Grid>\n                {carousel && carousel?.items.length > 0 ? (\n                  <Carousel className=\"laptop:mt-4 mt-3\">\n                    <CarouselContent className=\"flex\">\n                      {carousel.items.map((item, index) => (\n                        <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n                          <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n                        </CarouselItem>\n                      ))}\n                    </CarouselContent>\n                  </Carousel>\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => (\n              <GridItem\n                key={`${item?.title || ''}${index}`}\n                span={getSpan(item.width ?? 'full')}\n                className=\"laptop:block hidden\"\n              >\n                <ItemBlock item={item} shape={shape} />\n              </GridItem>\n            ))}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock item={item} shape={shape} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <Carousel className=\"laptop:mt-4 mt-3\">\n              <CarouselContent className=\"flex\">\n                {carousel.items.map((item, index) => (\n                  <CarouselItem\n                    key={`${item?.title || ''}${index}`}\n                    className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n                  >\n                    <ItemBlock item={item} shape={shape} />\n                  </CarouselItem>\n                ))}\n              </CarouselContent>\n            </Carousel>\n          ) : null}\n        </>\n      )}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
-  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "import_Title", "import_utils", "import_tabs", "ItemBlock", "item", "shape", "isTab", "isMobile", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "Title"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n  const [isMobile, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        configuration?.isTab\n          ? handleAspect()\n          : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !configuration?.isTab,\n          'h-[400px]': isMobile && configuration?.isTab,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          source={imageUrl?.url}\n          className=\"tablet:block hidden h-full overflow-hidden\"\n          imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n          style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n        />\n        <Picture\n          source={imageMobileUrl?.url || imageUrl?.url}\n          className=\"tablet:hidden block h-full overflow-hidden\"\n          imgClassName=\"h-full transition-all duration-300 object-cover\"\n        />\n        <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n          <div>\n            <Heading size={3} className=\"item-title\" html={title} />\n            <Text\n              size={3}\n              className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\"\n              html={description}\n            />\n          </div>\n          <div className=\"flex gap-[16px]\">\n            {secondaryButton && secondaryButton.text && (\n              <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"secondary\">\n                  {secondaryButton.text}\n                </Button>\n              </a>\n            )}\n            {primaryButton && primaryButton.text && (\n              <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"primary\">\n                  {primaryButton.text}\n                </Button>\n              </a>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={tabName!}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.1,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.1,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => (\n              <GridItem\n                key={`${item?.title || ''}${index}`}\n                span={getSpan(item.width ?? 'full')}\n                className=\"laptop:block hidden\"\n              >\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            // <Carousel className=\"laptop:mt-4 mt-3\">\n            //   <CarouselContent className=\"flex\">\n            //     {carousel.items.map((item, index) => (\n            //       <CarouselItem\n            //         key={`${item?.title || ''}${index}`}\n            //         className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n            //       >\n            //         <ItemBlock item={item} shape={shape} />\n            //       </CarouselItem>\n            //     ))}\n            //   </CarouselContent>\n            // </Carousel>\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.1,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
 }

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

@@ -4,6 +4,7 @@ export type Item = {
     title: string;
     description: string;
     imageUrl: Media;
+    imageMobileUrl?: Media;
     tabName?: string;
     primaryButton: {
         text: string;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/types.tsx"],
-  "sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  tabName?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n}\n\nexport type MultiLayoutGraphicBlockProps = {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    groupByTab?: boolean\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel?: {\n      items: Item[]\n    }\n  }\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  imageMobileUrl?: Media\n  tabName?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n}\n\nexport type MultiLayoutGraphicBlockProps = {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    groupByTab?: boolean\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel?: {\n      items: Item[]\n    }\n  }\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface ShelfDisplayItem {
     id?: string;
     /** 产品图片*/
@@ -18,8 +19,8 @@ export interface ShelfDisplayItem {
     data?: ShelfDisplayItem[];
 }
 type EventType = {
-    primaryButton?: (v: any) => void;
-    secondaryButton?: (v: any) => void;
+    primaryButton?: (v: any, index: number) => void;
+    secondaryButton?: (v: any, index: number) => void;
 };
 export interface ShelfDisplayProps {
     data: {
@@ -39,6 +40,7 @@ export interface ShelfDisplayProps {
         primaryButton?: string;
         /** 副按钮配置 */
         secondaryButton?: string;
+        theme?: 'light' | 'dark';
     };
     buildData?: {
         categories: any[];
@@ -46,16 +48,11 @@ export interface ShelfDisplayProps {
     };
     /** 按钮事件*/
     event?: EventType;
-    /** 主题色*/
-    theme?: 'light' | 'dark';
     className?: string;
     key?: string;
 }
-declare const _default: {
-    (props: Omit<ShelfDisplayProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ShelfDisplayProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,12 +1,8 @@
-"use strict";"use client";var $=Object.create;var x=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var U=(e,t)=>{for(var s in t)x(e,s,{get:t[s],enumerable:!0})},B=(e,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of z(t))!R.call(e,a)&&a!==s&&x(e,a,{get:()=>t[a],enumerable:!(i=j(t,a))||i.enumerable});return e};var y=(e,t,s)=>(s=e!=null?$(L(e)):{},B(t||!e||!e.__esModule?x(s,"default",{value:e,enumerable:!0}):s,e)),Q=e=>B(x({},"__esModule",{value:!0}),e);var J={};U(J,{default:()=>H});module.exports=Q(J);var r=require("react/jsx-runtime"),b=require("react"),u=require("../../helpers/utils.js"),N=y(require("../../components/picture.js")),c=require("../../components/tabs.js"),g=y(require("../../components/button.js")),T=y(require("../Title/index.js")),F=y(require("../SwiperBox/index.js")),C=require("../../shared/Styles.js"),P=require("./shelfDisplay.js"),I=require("react-responsive");const _=({data:e,configuration:t})=>{const s=o=>t?.event?.primaryButton?.(o),i=o=>t?.event?.secondaryButton?.(o),{price:a,basePrice:h}=(0,P.formatVariantPrice)({locale:"us",amount:e?.price.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price.amount||0,currencyCode:e?.price.currencyCode||"USD"}),f=()=>{const o=e?.sku,n=e?.variants;return n?.find(d=>d?.sku===o)?.image?.url||n?.[0]?.image?.url||""};return(0,r.jsxs)("div",{className:(0,u.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]",t?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,r.jsx)("div",{className:(0,u.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,r.jsx)(N.default,{source:f(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((o,n)=>(0,r.jsx)("div",{className:"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]",children:o},n))}),(0,r.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]",children:e?.title||""}),(0,r.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]",children:e?.description||""}),(0,r.jsxs)("div",{className:"mb-2 flex items-center",children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-xl font-bold text-[#1D1D1F]",children:a||""}),(0,r.jsx)("div",{className:"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:h||""})]}),(0,r.jsxs)("div",{className:(0,u.cn)("flex items-center gap-3",t.direction==="vertical"?"flex-col":""),children:[(0,r.jsx)(g.default,{variant:"primary",onClick:()=>s(e),className:`
-            laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
-            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black
-            ${t?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
-            ${t.direction==="vertical"?"w-full":""}
-          `,children:t?.primaryButton||""}),(0,r.jsx)(g.default,{variant:"secondary",onClick:()=>i(e),className:`
-            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
-            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
-            ${t?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
-            ${t.direction==="vertical"?"w-full":""}
-          `,children:t?.secondaryButton||""})]})]},e?.id||e?.handle)},G=({data:e,buildData:t,className:s="",key:i,event:a})=>{const[h,f]=(0,b.useState)(""),[o,n]=(0,b.useState)([]),k=(0,I.useMediaQuery)({query:"(max-width: 768px)"}),{productsTab:d=[],productsCard:M=[],title:D,align:V="left",isShowTab:w=!0,tabShape:E="square",...q}=e,v=l=>{const m=l?.map(p=>{const S=t?.products?.find(A=>A?.handle===p?.handle);if(S)return{sku:p.sku,...S}})?.filter(p=>p);n(m)};return(0,b.useEffect)(()=>{if(w){f(d?.[0]?.tab||""),v(d?.[0]?.data||[]);return}v(M)},[]),(0,r.jsxs)("div",{className:(0,u.cn)("w-full",s),children:[D&&(0,r.jsx)(T.default,{data:{title:D}}),w&&(0,r.jsx)("div",{className:`${k?"w-full overflow-hidden":""}`,children:(0,r.jsx)(c.Tabs,{shape:E,align:V,value:h,onValueChange:l=>{f(l);const m=d?.find(p=>p?.tab===l);v(m?.data||[])},className:"mb-8",children:(0,r.jsx)(c.TabsList,{children:d?.map((l,m)=>(0,r.jsx)(c.TabsTrigger,{value:l?.tab||"",children:l?.tab},m))})})}),(0,r.jsx)(F.default,{className:"!overflow-visible",id:"ShelfDisplay"+i,data:{list:o,configuration:{...q,event:a}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})};var H=(0,C.withStyles)(G);
+"use strict";"use client";var z=Object.create;var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var G=(e,r)=>{for(var n in r)b(e,n,{get:r[n],enumerable:!0})},B=(e,r,n,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of F(r))!W.call(e,s)&&s!==n&&b(e,s,{get:()=>r[s],enumerable:!(p=j(r,s))||p.enumerable});return e};var m=(e,r,n)=>(n=e!=null?z(Q(e)):{},B(r||!e||!e.__esModule?b(n,"default",{value:e,enumerable:!0}):n,e)),J=e=>B(b({},"__esModule",{value:!0}),e);var ee={};G(ee,{default:()=>Z});module.exports=J(ee);var t=require("react/jsx-runtime"),a=m(require("react")),d=require("../../helpers/utils.js"),I=m(require("../../components/picture.js")),C=m(require("./tabSwitch.js")),w=m(require("../../components/button.js")),_=m(require("../Title/index.js")),M=m(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),V=require("./shelfDisplay.js"),q=require("react-responsive"),H=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js");const D="image",P="product_shelf",K=999999999e-2,X=({data:e,configuration:r})=>{const{locale:n="us",copyWriting:p}=(0,$.useAiuiContext)(),s=(i,o)=>r?.event?.primaryButton?.(i,o+1),v=(i,o)=>r?.event?.secondaryButton?.(i,o+1),l=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===K,{price:y,basePrice:h}=(0,V.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const i=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===i)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:g(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,o)=>(0,t.jsx)("div",{className:"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold",children:i},o))}),(0,t.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 flex-1 text-xl font-bold",children:e?.title||""}),(0,t.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 flex items-center",children:u?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:y||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:h||""})]})}),(0,t.jsxs)("div",{className:(0,d.cn)("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(w.default,{variant:"primary",onClick:()=>s(e,r?.index),className:`
+            laptop:text-sm desktop:text-base text-xs
+            ${r.direction==="vertical"?"w-full":""}
+          `,children:r?.primaryButton||""}),(0,t.jsx)(w.default,{variant:"secondary",onClick:()=>v(e,r?.index),className:`
+            laptop:text-sm desktop:text-base text-xs
+            ${r.direction==="vertical"?"w-full":""}
+          `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},Y=a.default.forwardRef(({data:e,buildData:r,className:n="",key:p,event:s},v)=>{const[l,u]=(0,a.useState)(""),[y,h]=(0,a.useState)([]),g=(0,q.useMediaQuery)({query:"(max-width: 768px)"}),i=(0,a.useRef)(null);(0,a.useImperativeHandle)(v,()=>i.current),(0,H.useExposure)(i,{componentType:D,componentName:P,componentTitle:e?.title,navigation:l});const{productsTab:o=[],productsCard:S=[],title:f,align:te="left",isShowTab:N=!0,tabShape:A="square",...L}=e,k=c=>{const O=c?.map(x=>{const T=r?.products?.find(U=>U?.handle===x?.handle);if(T)return{sku:x.sku,...T}})?.filter(x=>x);h(O)};return(0,a.useEffect)(()=>{if(N){u(o?.[0]?.tab||""),k(o?.[0]?.data||[]);return}k(S)},[]),(0,t.jsxs)("div",{ref:i,className:(0,d.cn)("w-full",n,{"aiui-dark":e?.theme==="dark"}),children:[f&&(0,t.jsx)(_.default,{data:{title:f}}),N&&(0,t.jsx)("div",{className:`${g?"w-full overflow-hidden":""}`,children:(0,t.jsx)(C.default,{value:l,tabs:o,tabShape:A,onTabClick:c=>{u(c?.tab),k(c?.data||[]),(0,R.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:D,component_name:P,component_title:e?.title,component_position:1,navigation:c?.tab}})}})}),(0,t.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,t.jsx)(M.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${l}`,data:{list:y,configuration:{...L,event:s}},Slide:X,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var Z=(0,E.withStyles)(Y);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any) => void\n  secondaryButton?: (v: any) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem) => configuration?.event?.primaryButton?.(params)\n\n  const onSecondaryButton = (params: ShelfDisplayItem) => configuration?.event?.secondaryButton?.(params)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price.amount || 0,\n    currencyCode: data?.price.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 flex size-full cursor-pointer flex-col overflow-hidden bg-[#EAEAEC] p-4 duration-300 hover:bg-[#FFFFFF]',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base box-border h-full rounded-2xl border-2 border-[#86868C] px-2 pt-1 text-sm font-bold text-[#1D1D1F]\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 line-clamp-2 max-h-[48px] flex-1 text-xl font-bold text-[#1D1D1F]\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg mb-2 mt-1 h-6 truncate text-sm font-semibold text-[#1D1D1F]\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-xl font-bold text-[#1D1D1F]\">{price || ''}</div>\n        <div className=\"tablet:text-2xl ml-1 text-xl font-bold text-[#86868C]\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data)}\n          className={`\n            laptop:text-sm jus desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-transparent px-4 py-2 text-xs text-[#1D1D1F] hover:bg-transparent hover:text-black\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data)}\n          className={`\n            laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border\n            border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white\n            ${configuration?.shape === 'round' ? 'desktop:rounded-3xl rounded-[20px]' : ''}\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay: React.FC<ShelfDisplayProps> = ({ data, buildData, className = '', key, event }) => {\n  const [tabId, setTabId] = useState<string>('')\n  const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const {\n    productsTab = [],\n    productsCard = [],\n    title,\n    align = 'left',\n    isShowTab = true,\n    tabShape = 'square',\n    ...other\n  } = data\n\n  const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n    const newCurrentData = currentData\n      ?.map(item => {\n        const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n        if (findData) {\n          return {\n            sku: item.sku,\n            ...findData,\n          }\n        }\n      })\n      ?.filter(item => item)\n    setCurrentItems(newCurrentData)\n  }\n\n  useEffect(() => {\n    if (isShowTab) {\n      setTabId(productsTab?.[0]?.tab || '')\n      handleCurrentTab(productsTab?.[0]?.data || [])\n      return\n    }\n    handleCurrentTab(productsCard)\n  }, [])\n\n  return (\n    <div className={cn('w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isShowTab && (\n        <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n          <Tabs\n            shape={tabShape}\n            align={align}\n            value={tabId}\n            onValueChange={v => {\n              setTabId(v)\n              const findData = productsTab?.find((item: any) => item?.tab === v)\n              handleCurrentTab(findData?.data || [])\n            }}\n            className=\"mb-8\"\n          >\n            <TabsList>\n              {productsTab?.map((item: any, index: number) => {\n                return (\n                  <TabsTrigger key={index} value={item?.tab || ''}>\n                    {item?.tab}\n                  </TabsTrigger>\n                )\n              })}\n            </TabsList>\n          </Tabs>\n        </div>\n      )}\n      <SwiperBox\n        className=\"!overflow-visible\"\n        id={'ShelfDisplay' + key}\n        data={{ list: currentItems, configuration: { ...other, event: event } }}\n        Slide={ShelfDisplayItem}\n        breakpoints={{\n          0: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1,\n          },\n          374: {\n            spaceBetween: 12,\n            freeMode: false,\n            slidesPerView: 1.1,\n          },\n          768: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 2,\n          },\n          1024: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 3,\n          },\n          1440: {\n            spaceBetween: 16,\n            freeMode: false,\n            slidesPerView: 4,\n          },\n        }}\n      />\n    </div>\n  )\n}\n\nexport default withStyles(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabs", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "Picture", "index", "Button", "ShelfDisplay", "buildData", "className", "key", "event", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "v", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number) => void\n  secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.primaryButton?.(params, index + 1)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.secondaryButton?.(params, index + 1)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: variant?.price?.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 flex-1 text-xl font-bold\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        {isSoldOut ? (\n          <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n        ) : (\n          <>\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n            <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n          </>\n        )}\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      align = 'left',\n      isShowTab = true,\n      tabShape = 'square',\n      ...other\n    } = data\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n      const newCurrentData = currentData\n        ?.map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      setCurrentItems(newCurrentData)\n    }\n\n    useEffect(() => {\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [])\n        return\n      }\n      handleCurrentTab(productsCard)\n    }, [])\n\n    return (\n      <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'component_click',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    component_type: componentType,\n                    component_name: componentName,\n                    component_title: data?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n          <SwiperBox\n            className=\"mt-6 !overflow-visible\"\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{ list: currentItems, configuration: { ...other, event: event } }}\n            Slide={ShelfDisplayItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.1,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 2.3,\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 3,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
 }

package/dist/cjs/biz-components/ShelfDisplay/tabSwitch.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface TabsProps {
+    tabs: any[];
+    value: string;
+    tabShape?: 'rounded' | 'square';
+    onTabClick?: (value: any) => void;
+}
+declare const TabSwitch: React.FC<TabsProps>;
+export default TabSwitch;

package/dist/cjs/biz-components/ShelfDisplay/tabSwitch.js

@@ -0,0 +1,2 @@
+"use strict";"use client";var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var m=(e,t)=>{for(var n in t)d(e,n,{get:t[n],enumerable:!0})},w=(e,t,n,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!y.call(e,a)&&a!==n&&d(e,a,{get:()=>t[a],enumerable:!(l=x(t,a))||l.enumerable});return e};var k=e=>w(d({},"__esModule",{value:!0}),e);var R={};m(R,{default:()=>C});module.exports=k(R);var b=require("react/jsx-runtime"),c=require("react"),i=require("../../helpers/utils.js");const T=({tabs:e,value:t,onTabClick:n,tabShape:l="square"})=>{const a=(0,c.useRef)(null),f=o=>{n?.(o);const s=document.getElementById(`tab-${o?.tab}`),r=a.current;if(s&&r){const p=s.offsetLeft,u=s.offsetWidth,h=r.offsetWidth,v=p-h/2+u/2;r.scrollTo({left:v,behavior:"smooth"})}};return e?.length>0?(0,b.jsx)("div",{ref:a,className:(0,i.cn)("tab-switch-wrap bg-tabs-list-bg relative flex w-fit max-w-full overflow-x-auto overflow-y-hidden p-1",l==="rounded"?"rounded-[28px]":""),children:e?.map(o=>(0,b.jsx)("button",{id:`tab-${o?.tab}`,onClick:()=>f(o),className:(0,i.cn)("text-info-primary px-5 py-2.5 text-sm font-bold","relative flex-1 shrink-0 whitespace-nowrap transition-all","lg-desktop:text-base lg-desktop:px-7 lg-desktop:py-3.5",o?.tab===t?"bg-btn-primary-disabled-foreground":"",l==="rounded"?"rounded-[28px]":""),children:o?.tab||""},o?.id||o?.tab))}):null};var C=T;
+//# sourceMappingURL=tabSwitch.js.map

package/dist/cjs/biz-components/ShelfDisplay/tabSwitch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ShelfDisplay/tabSwitch.tsx"],
+  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\n\ninterface TabsProps {\n  tabs: any[]\n  value: string\n  tabShape?: 'rounded' | 'square'\n  onTabClick?: (value: any) => void\n}\n\nconst TabSwitch: React.FC<TabsProps> = ({ tabs, value, onTabClick, tabShape = 'square' }) => {\n  const tabRef = useRef<HTMLDivElement>(null)\n\n  const handleTabClick = (item: any) => {\n    onTabClick?.(item)\n    // \u83B7\u53D6\u5F53\u524D\u9009\u4E2D\u7684 tab \u5E76\u8BA1\u7B97\u4E0B\u5212\u7EBF\u4F4D\u7F6E\n    const tabElement = document.getElementById(`tab-${item?.tab}`)\n    // **\u8BA1\u7B97\u6EDA\u52A8\u4F4D\u7F6E**\n    const container = tabRef.current\n    if (tabElement && container) {\n      const tabLeft = tabElement.offsetLeft // \u9009\u4E2D tab \u7684\u5DE6\u4FA7\u504F\u79FB\u91CF\n      const tabWidth = tabElement.offsetWidth\n      const containerWidth = container.offsetWidth\n      // \u8BA1\u7B97\u76EE\u6807\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u4F7F tab \u5C45\u4E2D\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  return tabs?.length > 0 ? (\n    <div\n      ref={tabRef}\n      className={cn(\n        'tab-switch-wrap bg-tabs-list-bg relative flex w-fit max-w-full overflow-x-auto overflow-y-hidden p-1',\n        tabShape === 'rounded' ? 'rounded-[28px]' : ''\n      )}\n    >\n      {tabs?.map(item => (\n        <button\n          key={item?.id || item?.tab}\n          id={`tab-${item?.tab}`}\n          onClick={() => handleTabClick(item)}\n          className={cn(\n            'text-info-primary px-5 py-2.5 text-sm font-bold',\n            'relative flex-1 shrink-0 whitespace-nowrap transition-all',\n            'lg-desktop:text-base lg-desktop:px-7 lg-desktop:py-3.5',\n            item?.tab === value ? 'bg-btn-primary-disabled-foreground' : '',\n            tabShape === 'rounded' ? 'rounded-[28px]' : ''\n          )}\n        >\n          {item?.tab || ''}\n        </button>\n      ))}\n    </div>\n  ) : null\n}\n\nexport default TabSwitch\n"],
+  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0CQ,IAAAI,EAAA,6BAzCRC,EAA8B,iBAC9BC,EAAmB,kCASnB,MAAMC,EAAiC,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,WAAAC,EAAY,SAAAC,EAAW,QAAS,IAAM,CAC3F,MAAMC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAc,CACpCJ,IAAaI,CAAI,EAEjB,MAAMC,EAAa,SAAS,eAAe,OAAOD,GAAM,GAAG,EAAE,EAEvDE,EAAYJ,EAAO,QACzB,GAAIG,GAAcC,EAAW,CAC3B,MAAMC,EAAUF,EAAW,WACrBG,EAAWH,EAAW,YACtBI,EAAiBH,EAAU,YAE3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAEA,OAAOZ,GAAM,OAAS,KACpB,OAAC,OACC,IAAKI,EACL,aAAW,MACT,uGACAD,IAAa,UAAY,iBAAmB,EAC9C,EAEC,SAAAH,GAAM,IAAIM,MACT,OAAC,UAEC,GAAI,OAAOA,GAAM,GAAG,GACpB,QAAS,IAAMD,EAAeC,CAAI,EAClC,aAAW,MACT,kDACA,4DACA,yDACAA,GAAM,MAAQL,EAAQ,qCAAuC,GAC7DE,IAAa,UAAY,iBAAmB,EAC9C,EAEC,SAAAG,GAAM,KAAO,IAXTA,GAAM,IAAMA,GAAM,GAYzB,CACD,EACH,EACE,IACN,EAEA,IAAOZ,EAAQK",
+  "names": ["tabSwitch_exports", "__export", "tabSwitch_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "TabSwitch", "tabs", "value", "onTabClick", "tabShape", "tabRef", "handleTabClick", "item", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo"]
+}

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { SloganProps } from './types.js';
-declare const _default: {
-    (props: Omit<SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const componentType = "copy";
+export declare const componentName = "brand_slogan";
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<SloganProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var q=Object.create;var x=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var Q=(t,e)=>{for(var r in e)x(t,r,{get:e[r],enumerable:!0})},$=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of J(e))!O.call(t,o)&&o!==r&&x(t,o,{get:()=>e[o],enumerable:!(l=B(e,o))||l.enumerable});return t};var V=(t,e,r)=>(r=t!=null?q(K(t)):{},$(e||!t||!t.__esModule?x(r,"default",{value:t,enumerable:!0}):r,t)),W=t=>$(x({},"__esModule",{value:!0}),t);var _={};Q(_,{default:()=>Z});module.exports=W(_);var s=require("react/jsx-runtime"),n=V(require("react")),M=require("@gsap/react"),h=require("gsap"),F=require("gsap/dist/SplitText"),v=require("gsap/dist/ScrollTrigger"),c=require("../../helpers/utils.js"),w=require("../../components/index.js"),A=require("../../shared/Styles.js");function X(t=[],e=3){const r=[];for(let l=0;l<t.length;l+=e)r.push(t.slice(l,l+e));return r}const G=n.default.forwardRef(({data:t,className:e=""},r)=>{const{title:l,features:o=[],featureChunkSize:D=3,theme:H}=t,[b,N]=n.default.useState(0),[C,y]=n.default.useState(!0),m=X(o,D),S=m.length,u=o.length>D,L=u?[...m,m[0]]:m,T=40;n.default.useEffect(()=>{if(!u)return;const a=setInterval(()=>{N(i=>i+1),y(!0)},3e3);return()=>clearInterval(a)},[S,u]),n.default.useEffect(()=>{if(u)if(b===S){const a=setTimeout(()=>{y(!1),N(0)},500);return()=>clearTimeout(a)}else y(!0)},[b,S,u]);const f=(0,n.useRef)(null),E=(0,n.useRef)(null),g=(0,n.useRef)(null);return(0,M.useGSAP)(()=>{if(!f.current)return;g.current=new F.SplitText(f.current,{type:"words",wordsClass:"word"});const a=f.current?.clientHeight||100,i=g.current.words;return h.gsap.set(i,{opacity:0}),v.ScrollTrigger.create({trigger:f.current,start:"bottom bottom-=6%",end:`bottom+=${a*2+80}px bottom-=6%`,scrub:!0,onUpdate:p=>{const d=p.progress,I=i.length,P=1/I,R=.5;i.forEach((j,z)=>{const U=z/I*(1-R),Y=P*(1+R);let k=(d-U)/Y;k=Math.max(0,Math.min(k,1)),h.gsap.set(j,{opacity:k})})}}),o&&o.length>0&&v.ScrollTrigger.create({trigger:E.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:p=>{h.gsap.set(E.current,{opacity:p.progress})}}),()=>{g.current&&g.current.revert(),v.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),(0,s.jsxs)("div",{ref:r,className:(0,c.cn)("laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,s.jsx)(w.Heading,{ref:f,as:"h2",size:2,weight:"bold",align:"left",className:(0,c.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none",{"text-[#1D1D1F]":H!=="dark","text-[#fff]":H==="dark"}),children:l}),o&&o.length>0&&(0,s.jsx)("div",{className:(0,c.cn)("relative h-12 w-full max-w-[500px] overflow-hidden",`tablet:h-[${T}px]`),children:(0,s.jsx)("div",{className:(0,c.cn)(["flex flex-col",C?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${b*T}px)`},children:L.map((a,i)=>(0,s.jsx)("div",{className:(0,c.cn)("flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${T}px]`),children:a.map((p,d)=>(0,s.jsxs)(n.default.Fragment,{children:[d>0&&(0,s.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]"}),(0,s.jsx)(w.Text,{align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]",html:p.title})]},d))},i))})})]})});G.displayName="Slogan";var Z=(0,A.withStyles)(G);
+"use strict";"use client";var J=Object.create;var v=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var n in e)v(t,n,{get:e[n],enumerable:!0})},G=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of O(e))!V.call(t,o)&&o!==n&&v(t,o,{get:()=>e[o],enumerable:!(s=K(e,o))||s.enumerable});return t};var X=(t,e,n)=>(n=t!=null?J(Q(t)):{},G(e||!t||!t.__esModule?v(n,"default",{value:t,enumerable:!0}):n,t)),Z=t=>G(v({},"__esModule",{value:!0}),t);var rt={};W(rt,{componentName:()=>C,componentType:()=>A,default:()=>et});module.exports=Z(rt);var l=require("react/jsx-runtime"),r=X(require("react")),D=require("@gsap/react"),f=require("gsap"),N=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),c=require("../../helpers/utils.js"),y=require("../../components/index.js"),P=require("../../shared/Styles.js"),z=require("../../hooks/useExposure.js");const A="copy",C="brand_slogan";function tt(t=[],e=3){const n=[];for(let s=0;s<t.length;s+=e)n.push(t.slice(s,s+e));return n}const L=r.default.forwardRef(({data:t,className:e=""},n)=>{const{title:s,features:o=[],featureChunkSize:k=3}=t,[b,I]=r.default.useState(0),[j,w]=r.default.useState(!0),T=(0,r.useRef)(null),d=tt(o,k),E=d.length,u=o.length>k,F=u?[...d,d[0]]:d,S=40;(0,r.useImperativeHandle)(n,()=>T.current),(0,z.useExposure)(T,{componentType:A,componentName:C,componentTitle:s}),r.default.useEffect(()=>{if(!u)return;const a=setInterval(()=>{I(i=>i+1),w(!0)},3e3);return()=>clearInterval(a)},[E,u]),r.default.useEffect(()=>{if(u)if(b===E){const a=setTimeout(()=>{w(!1),I(0)},500);return()=>clearTimeout(a)}else w(!0)},[b,E,u]);const m=(0,r.useRef)(null),M=(0,r.useRef)(null),x=(0,r.useRef)(null);return(0,D.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,N.SplitText),!m.current)return;x.current=new N.SplitText(m.current,{type:"words",wordsClass:"word"});const a=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${a*1.5}px bottom-=4%`,scrub:!0,onUpdate:p=>{const h=p.progress,R=i.length,U=1/R,$=.5;i.forEach((Y,_)=>{const q=_/R*(1-$),B=U*(1+$);let H=(h-q)/B;H=Math.max(0,Math.min(H,1)),f.gsap.set(Y,{opacity:H})})}}),o&&o.length>0&&g.ScrollTrigger.create({trigger:M.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:p=>{f.gsap.set(M.current,{opacity:p.progress})}}),()=>{x.current&&x.current.revert(),g.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),(0,l.jsxs)("div",{ref:T,className:(0,c.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,l.jsx)(y.Heading,{ref:m,as:"h2",size:2,weight:"bold",align:"left",className:(0,c.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:s}),o&&o.length>0&&(0,l.jsx)("div",{className:(0,c.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${S}px]`),children:(0,l.jsx)("div",{className:(0,c.cn)(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${b*S}px)`},children:F.map((a,i)=>(0,l.jsx)("div",{className:(0,c.cn)("flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${S}px]`),children:a.map((p,h)=>(0,l.jsxs)(r.default.Fragment,{children:[h>0&&(0,l.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,l.jsx)(y.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:p.title})]},h))},i))})})]})});L.displayName="Slogan";var et=(0,P.withStyles)(L);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/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, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3, theme } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    if (!titleRef.current) return\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const height = titleRef.current?.clientHeight || 100\n\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=6%',\n      end: `bottom+=${height * 2 + 80}px bottom-=6%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=6%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n        onUpdate: (self: any) => {\n          gsap.set(featuresRef.current, { opacity: self.progress })\n        },\n      })\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none',\n          {\n            'text-[#1D1D1F]': theme !== 'dark',\n            'text-[#fff]': theme === 'dark',\n          }\n        )}\n      >\n        {title}\n      </Heading>\n      {features && features.length > 0 && (\n        <div className={cn('relative h-12 w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'flex h-12 w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#D9D9D9]\" />}\n                    <Text\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-2 text-[12px] leading-[1.4] text-[#1D1D1F]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
-  "mappings": "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",
-  "names": ["Slogan_exports", "__export", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "theme", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/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, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n    if (!titleRef.current) return\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const height = titleRef.current?.clientHeight || 100\n\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=4%',\n      end: `bottom+=${height * 1.5}px bottom-=4%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=6%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n        onUpdate: (self: any) => {\n          gsap.set(featuresRef.current, { opacity: self.progress })\n        },\n      })\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={innerRef}\n      className={cn(\n        'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n        )}\n        html={title}\n      />\n      {features && features.length > 0 && (\n        <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                    <Text\n                      size={3}\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
+  "mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,mBAAAE,EAAA,kBAAAC,EAAA,YAAAC,KAAA,eAAAC,EAAAL,IA8HM,IAAAM,EAAA,6BA7HNC,EAAmD,oBACnDA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAE3BC,EAA4B,sCAErB,MAAMX,EAAgB,OAChBD,EAAgB,eAE7B,SAASa,GAAWC,EAA6B,CAAC,EAAGC,EAAe,EAAG,CACrE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAM,OAAQG,GAAKF,EACrCC,EAAO,KAAKF,EAAM,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEtC,OAAOC,CACT,CAEA,MAAME,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CAC9F,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,CAAE,EAAIL,EACjD,CAACM,EAAYC,CAAa,EAAI,EAAAR,QAAM,SAAS,CAAC,EAC9C,CAACS,EAAiBC,CAAkB,EAAI,EAAAV,QAAM,SAAS,EAAI,EAC3DW,KAAW,UAAuB,IAAI,EACtCC,EAAiBlB,GAAWW,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,MAEpB,uBAAoBb,EAAK,IAAMQ,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAA7B,EACA,cAAAD,EACA,eAAgBuB,CAClB,CAAC,EAGD,EAAAJ,QAAM,UAAU,IAAM,CACpB,GAAI,CAACc,EAAc,OACnB,MAAMG,EAAQ,YAAY,IAAM,CAC9BT,EAAc,GAAK,EAAI,CAAC,EACxBE,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcO,CAAK,CAClC,EAAG,CAACJ,EAAaC,CAAY,CAAC,EAG9B,EAAAd,QAAM,UAAU,IAAM,CACpB,GAAKc,EACL,GAAIP,IAAeM,EAAa,CAC9B,MAAMK,EAAS,WAAW,IAAM,CAC9BR,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaU,CAAM,CAClC,MACER,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYM,EAAaC,CAAY,CAAC,EAG1C,MAAMK,KAAW,UAA2B,IAAI,EAC1CC,KAAc,UAAuB,IAAI,EACzCC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CAEZ,GADA,OAAK,eAAe,gBAAe,WAAS,EACxC,CAACF,EAAS,QAAS,OACvBE,EAAkB,QAAU,IAAI,YAAUF,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAASH,EAAS,SAAS,cAAgB,IAE3CI,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASJ,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWG,EAAS,GAAG,gBAC5B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAW/B,IAAc,CACtC,MAAMgC,EAAShC,EAAI4B,GAAU,EAAIE,GAC3BG,EAAQJ,GAAY,EAAIC,GAC9B,IAAII,GAAWP,EAAWK,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIH,EAAM,CAAE,QAAAG,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EAEG3B,GAAYA,EAAS,OAAS,GAChC,gBAAc,OAAO,CACnB,QAASe,EAAY,QACrB,MAAO,WAAWE,EAAS,CAAC,gBAC5B,IAAK,WAAWA,EAAS,EAAI,GAAG,gBAChC,SAAWE,GAAc,CACvB,OAAK,IAAIJ,EAAY,QAAS,CAAE,QAASI,EAAK,QAAS,CAAC,CAC1D,CACF,CAAC,EAGI,IAAM,CACXH,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASY,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAKtB,EACL,aAAW,MACT,2KACAT,CACF,EAEA,oBAAC,WACC,IAAKiB,EACL,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,aAAW,MACT,sGACF,EACA,KAAMf,EACR,EACCC,GAAYA,EAAS,OAAS,MAC7B,OAAC,OAAI,aAAW,MAAG,gDAAiD,aAAaW,CAAW,KAAK,EAC/F,mBAAC,OACC,aAAW,MAAG,CACZ,gBACAP,EAAkB,mEAAqE,kBACzF,CAAC,EACD,MAAO,CACL,UAAW,eAAeF,EAAaS,CAAW,KACpD,EAEC,SAAAD,EAAc,IAAI,CAACmB,EAAOC,OACzB,OAAC,OACC,aAAW,MACT,2DACA,aAAanB,CAAW,KAC1B,EAGC,SAAAkB,EAAM,IAAI,CAACE,EAASC,OACnB,QAAC,EAAArC,QAAM,SAAN,CACE,UAAAqC,EAAQ,MAAK,OAAC,OAAI,UAAU,wDAAwD,KACrF,OAAC,QACC,KAAM,EACN,MAAM,OACN,GAAG,IACH,UAAU,mGACV,KAAMD,EAAQ,MAChB,IARmBC,CASrB,CACD,GAbIF,CAcP,CACD,EACH,EACF,GAEJ,CAEJ,CAAC,EAEDpC,EAAO,YAAc,SAErB,IAAOhB,MAAQ,cAAWgB,CAAM",
+  "names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
 }

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import type { SpacerProps } from './types.js';
-declare const _default: {
-    (props: Omit<SpacerProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<SpacerProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var l=Object.create;var o=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var u=(e,p)=>{for(var t in p)o(e,t,{get:p[t],enumerable:!0})},s=(e,p,t,a)=>{if(p&&typeof p=="object"||typeof p=="function")for(let r of n(p))!S.call(e,r)&&r!==t&&o(e,r,{get:()=>p[r],enumerable:!(a=h(p,r))||a.enumerable});return e};var y=(e,p,t)=>(t=e!=null?l(x(e)):{},s(p||!e||!e.__esModule?o(t,"default",{value:e,enumerable:!0}):t,e)),v=e=>s(o({},"__esModule",{value:!0}),e);var w={};u(w,{default:()=>k});module.exports=v(w);var m=require("react/jsx-runtime"),d=y(require("react")),f=require("../../helpers/utils.js"),i=require("../../shared/Styles.js");const c=d.default.forwardRef(({className:e,data:p})=>{const{space:t="default"}=p;return(0,m.jsx)("div",{className:(0,f.cn)(t==="default"&&"desktop:h-[96px] lg-desktop:h-[128px] h-[64px] ",t==="fixed"&&"h-[64px] ",e)})});c.displayName="Spacer";var k=(0,i.withStyles)(c);
+"use strict";"use client";var d=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(e,p)=>{for(var t in p)a(e,t,{get:p[t],enumerable:!0})},s=(e,p,t,o)=>{if(p&&typeof p=="object"||typeof p=="function")for(let r of n(p))!u.call(e,r)&&r!==t&&a(e,r,{get:()=>p[r],enumerable:!(o=h(p,r))||o.enumerable});return e};var v=(e,p,t)=>(t=e!=null?d(S(e)):{},s(p||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),w=e=>s(a({},"__esModule",{value:!0}),e);var N={};y(N,{default:()=>x});module.exports=w(N);var m=require("react/jsx-runtime"),i=v(require("react")),l=require("../../helpers/utils.js"),f=require("../../shared/Styles.js");const c=i.default.forwardRef(({className:e,data:p})=>{const{space:t="default"}=p;return(0,m.jsx)("div",{className:(0,l.cn)("ipc_spacer",t==="default"&&"laptop:h-16 lg-desktop:h-[128px] tablet:h-8 h-16",t==="fixed"&&"h-16",e)})});c.displayName="Spacer";var x=(0,f.withStyles)(c);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Spacer/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }) => {\n  const { space = 'default' } = data\n  return (\n    <div\n      className={cn(\n        space === 'default' && 'desktop:h-[96px] lg-desktop:h-[128px] h-[64px] ',\n        space === 'fixed' && 'h-[64px] ',\n        className\n      )}\n    ></div>\n  )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withStyles(Spacer)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BARJC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACpF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAID,EAC9B,SACE,OAAC,OACC,aAAW,MACTC,IAAU,WAAa,kDACvBA,IAAU,SAAW,YACrBF,CACF,EACD,CAEL,CAAC,EAEDF,EAAO,YAAc,SAErB,IAAON,KAAQ,cAAWM,CAAM",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }) => {\n  const { space = 'default' } = data\n  return (\n    <div\n      className={cn(\n        'ipc_spacer',\n        space === 'default' && 'laptop:h-16 lg-desktop:h-[128px] tablet:h-8 h-16',\n        space === 'fixed' && 'h-16',\n        className\n      )}\n    ></div>\n  )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withStyles(Spacer)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BARJC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACpF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAID,EAC9B,SACE,OAAC,OACC,aAAW,MACT,aACAC,IAAU,WAAa,mDACvBA,IAAU,SAAW,OACrBF,CACF,EACD,CAEL,CAAC,EAEDF,EAAO,YAAc,SAErB,IAAON,KAAQ,cAAWM,CAAM",
   "names": ["Spacer_exports", "__export", "Spacer_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "Spacer", "React", "className", "data", "space"]
 }