@anker-in/headless-ui 1.1.17-alpha.1766026822963 → 1.1.17-alpha.1766039673793

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture } from '../../components/index.js'\nimport Countdown from '../HeroBanner/Countdown.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { sizeMap } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'superTitle'\n  | 'subtitle'\n  | 'content'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n\n// \u64AD\u653E\u6309\u94AE\u56FE\u6807\u7EC4\u4EF6\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst secondaryBannerVariants = cva(\n  // \u57FA\u7840\u6837\u5F0F\n  'text-info-primary relative w-full',\n  {\n    variants: {\n      size: {\n        sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n        base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n        lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n        xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n      },\n    },\n    defaultVariants: {\n      size: 'base',\n    },\n  }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n  /** \u4E3B\u6807\u9898*/\n  title?: string\n  /**\n   * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n   * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n   */\n  superTitle?: string\n  /**\n   * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n   * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n   */\n  subtitle?: string\n  /**\n   * \u5C3A\u5BF8:\n   *  sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n   *  base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n   *  lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n   *  xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n   */\n  size?: 'sm' | 'base' | 'lg' | 'xlg'\n  pcImage?: MediaType\n  padImage?: MediaType\n  mobileImage?: MediaType\n\n  /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n  endDate?: string\n  /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n  endDate_tz?: string\n  /**\n   * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n   * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n   */\n  dateFormat?: string\n\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: {\n    text: string\n    link?: string\n    onClick?: () => void\n  } & Omit<ButtonProps, 'children'>\n  /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: {\n    text: string\n    link?: string\n    onClick?: () => void\n  } & Omit<ButtonProps, 'children'>\n\n  iconArray?: Array<{ pcImage: MediaType }>\n  theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: SecondaryBannerData\n  classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n  ({ className, classNames = {}, data, ...props }, ref) => {\n    const {\n      pcImage,\n      padImage,\n      mobileImage,\n      endDate,\n      endDate_tz,\n      dateFormat,\n      size = 'base',\n      iconArray: icons,\n      theme = 'light',\n      primaryButton,\n      secondaryButton,\n    } = data\n    const alt = pcImage?.alt || padImage?.alt || mobileImage?.alt || ''\n\n    // \u89C6\u9891\u5F39\u7A97\u72B6\u6001\n    const [visible, setVisible] = React.useState<boolean>(false)\n\n    // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n    const bannerId = React.useId()\n    const titleId = data.title ? `${bannerId}-title` : undefined\n    const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n    const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n    // \u6784\u5EFAaria-describedby\n    const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n    return (\n      <section\n        ref={ref}\n        role=\"banner\"\n        aria-labelledby={titleId}\n        aria-describedby={describedBy}\n        className={cn(\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          secondaryBannerVariants({ size: size }),\n          className,\n          classNames?.root\n        )}\n        {...props}\n      >\n        <Media\n          pcImage={pcImage}\n          padImage={padImage}\n          mobileImage={mobileImage}\n          className=\"absolute inset-0 size-full object-cover\"\n          imgClassName=\"object-cover\"\n          videoClassName=\"object-cover\"\n          muted={true}\n          loop={true}\n          playsInline={true}\n          autoPlay={true}\n        />\n        <div\n          className={cn(\n            'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)]  absolute top-24 z-10 flex flex-col items-start justify-center  px-[16px] text-left',\n            classNames?.content\n          )}\n        >\n          <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n            {data.superTitle && (\n              <Text\n                as=\"p\"\n                size={2}\n                id={superTitleId}\n                className={cn('banner-super-title opacity-75', classNames?.superTitle)}\n              >\n                {data.superTitle}\n              </Text>\n            )}\n\n            {data.title && (\n              <Heading\n                as=\"h1\"\n                size={['xlg', 'lg'].includes(size) ? 5 : 4}\n                weight=\"bold\"\n                id={titleId}\n                className={cn('banner-title ', classNames?.title)}\n              >\n                {data.title}\n              </Heading>\n            )}\n\n            {data.subtitle && (\n              <Text as=\"p\" size={3} id={subtitleId} className={cn('banner-subtitle', classNames?.subtitle)}>\n                {data.subtitle}\n              </Text>\n            )}\n          </div>\n\n          {endDate && (\n            <div className=\"banner-countdown mt-3\" role=\"timer\" aria-label=\"event countdown\">\n              <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n            </div>\n          )}\n\n          <div\n            className={cn(\n              'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n              classNames?.buttonGroup\n            )}\n          >\n            {secondaryButton?.text && (\n              <Button\n                variant=\"secondary\"\n                onClick={secondaryButton.onClick}\n                className={cn('', classNames?.secondaryButton)}\n                aria-describedby={titleId}\n                {...(secondaryButton.link ? { as: 'a', href: secondaryButton.link } : {})}\n              >\n                {secondaryButton.text}\n              </Button>\n            )}\n            {primaryButton?.text && (\n              <Button\n                onClick={primaryButton.onClick}\n                className={cn('', classNames?.primaryButton)}\n                aria-describedby={titleId}\n                {...(primaryButton.link ? { as: 'a', href: primaryButton.link } : {})}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n\n          {Array.isArray(icons) && icons.length > 0 && (\n            <div\n              className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n              role=\"group\"\n              aria-label=\"brand icons\"\n            >\n              {icons.map((icon, index) =>\n                icon.pcImage ? (\n                  <Picture\n                    key={index}\n                    source={icon.pcImage.url}\n                    alt={icon.pcImage.alt || `icon ${index + 1}`}\n                    role=\"img\"\n                    className=\"h-auto max-w-none\"\n                  />\n                ) : null\n              )}\n            </div>\n          )}\n        </div>\n      </section>\n    )\n  }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "cva", "cn", "Text", "Button", "Heading", "Picture", "Countdown", "withLayout", "Media", "sizeMap", "PlayButtonAppendIcon", "size", "width", "height", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "props", "ref", "pcImage", "padImage", "mobileImage", "endDate", "endDate_tz", "dateFormat", "icons", "theme", "primaryButton", "secondaryButton", "alt", "visible", "setVisible", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "icon", "index", "SecondaryBanner_default"]
+}

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as c,jsxs as de}from"react/jsx-runtime";import U,{useState as B,useEffect as S,useRef as w,useImperativeHandle as X}from"react";import{cn as Y}from"../../helpers/utils.js";import ee from"./tabSwitch.js";import te from"../Title/index.js";import ne from"../SwiperBox/index.js";import{withLayout as se}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as ae}from"react-responsive";import{useRollout as ie}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as re,ShelfDisplayHorizontalItem as oe}from"./shelfDisplayItem.js";const le="image",ce="product_shelf",me=m=>m==null?"default":String(m).replace(/[^a-zA-Z0-9_-]/g,"")||"default",fe=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,pe=U.forwardRef(({key:m,data:f,event:V,buildData:y,breakpoints:L,className:N="",recommendedData:i,target:z="_self",metafields:A,isDisplayGudgments:v=!1,isDisplayBackImage:$=!1},q)=>{const{productsTab:r=[],productsCard:T=[],title:k,isShowTab:p=!0,tabShape:O="square",isShowTag:K=!1,isShowOriginalPrice:Q=!0,isShowRecommendedCard:I=!1,...W}=f,[d,R]=B(""),[s,g]=B([]),M=w(!1),b=w(!1),D=w(null),Z=w(fe()),j=ae({query:"(max-width: 768px)"}),[F,P]=ie({threshold:0}),u=s?.length<=1&&v,o=!j&&s?.length<=2&&v,_=e=>{switch(e){case 1440:return o?s?.length:4;case 1024:return o?s?.length:3;default:return o?s?.length:2.3}},x=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,a)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:a+1}})}})},l=(e,a)=>{if(a){const h=i?.map?.(n=>({...n,isShowRecommended:!0}));g(h?.length?h||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const H=y?.products?.find(J=>J?.handle===t?.handle);if(H)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...H}})?.filter(t=>t);g(n?.length?n||[]:[])}else g([])};X(q,()=>D.current),S(()=>{P&&i?.length&&!M.current&&(M.current=!0,x())},[P,i]),S(()=>{if(!b.current){if(!b.current&&i?.length&&(b.current=!0),p){const e=r?.find(a=>a?.tab===d)||r?.[0];R(e?.tab||""),l(e?.data||[],e?.isShowRecommendedTab);return}l(T,I)}},[i]),S(()=>{if(p){const e=r?.find(a=>a?.tab===d)||r?.[0];l(e?.data||[],e?.isShowRecommendedTab);return}l(T,I)},[y]);const G=me(d),C=`${Z.current}-${G}`;return de("div",{ref:D,className:Y("shelf-display-wrap w-full",N,{"aiui-dark":f?.theme==="dark"}),children:[k&&c(te,{data:{title:k}}),p&&c("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:c(ee,{value:d,tabs:r,tabShape:O,onTabClick:e=>{if(R(e?.tab),l(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:le,component_name:ce,component_title:f?.title,component_position:1,navigation:e?.tab}});return}x()}})}),c("div",{ref:F,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:c(ne,{data:{list:s,configuration:{...W,event:V,isShowTag:K,isShowOriginalPrice:Q,target:z,metafields:A,itemLength:s?.length,isDisplayBackImage:$}},id:C,className:`${p?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:o?"flex-1":"",Slide:o?oe:re,breakpoints:L||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u?1:1.2},768:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_()},1024:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_(1024)},1440:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_(1440)}}},C)})]})});var ke=se(pe);export{ke as default};
+"use client";import{jsx as c,jsxs as de}from"react/jsx-runtime";import X,{useState as B,useEffect as y,useRef as w,useImperativeHandle as Y}from"react";import{cn as ee}from"../../helpers/utils.js";import te from"./tabSwitch.js";import ne from"../Title/index.js";import se from"../SwiperBox/index.js";import{withLayout as ae}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as ie}from"react-responsive";import{useRollout as re}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as oe,ShelfDisplayHorizontalItem as le}from"./shelfDisplayItem.js";const ce="image",me="product_shelf",fe=m=>m==null?"default":String(m).replace(/[^a-zA-Z0-9_-]/g,"")||"default",pe=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,V=X.forwardRef(({key:m,data:f,event:L,buildData:S,breakpoints:N,className:z="",recommendedData:i,target:A="_self",metafields:$,isDisplayGudgments:v=!1,isDisplayBackImage:q=!1},O)=>{const{productsTab:r=[],productsCard:T=[],title:k,isShowTab:p=!0,tabShape:K="square",isShowTag:Q=!1,isShowOriginalPrice:W=!0,isShowRecommendedCard:I=!1,...Z}=f,[d,R]=B(""),[s,g]=B([]),D=w(!1),b=w(!1),M=w(null),j=w(pe()),F=ie({query:"(max-width: 768px)"}),[G,P]=re({threshold:0}),u=s?.length<=1&&v,o=!F&&s?.length<=2&&v,_=e=>{switch(e){case 1440:return o?s?.length:4;case 1024:return o?s?.length:3;default:return o?s?.length:2.3}},x=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,a)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:a+1}})}})},l=(e,a)=>{if(a){const h=i?.map?.(n=>({...n,isShowRecommended:!0}));g(h?.length?h||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const H=S?.products?.find(U=>U?.handle===t?.handle);if(H)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...H}})?.filter(t=>t);g(n?.length?n||[]:[])}else g([])};Y(O,()=>M.current),y(()=>{P&&i?.length&&!D.current&&(D.current=!0,x())},[P,i]),y(()=>{if(!b.current){if(!b.current&&i?.length&&(b.current=!0),p){const e=r?.find(a=>a?.tab===d)||r?.[0];R(e?.tab||""),l(e?.data||[],e?.isShowRecommendedTab);return}l(T,I)}},[i]),y(()=>{if(p){const e=r?.find(a=>a?.tab===d)||r?.[0];l(e?.data||[],e?.isShowRecommendedTab);return}l(T,I)},[S]);const J=fe(d),C=`${j.current}-${J}`;return de("div",{ref:M,className:ee("shelf-display-wrap w-full",z,{"aiui-dark":f?.theme==="dark"}),children:[k&&c(ne,{data:{title:k}}),p&&c("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:c(te,{value:d,tabs:r,tabShape:K,onTabClick:e=>{if(R(e?.tab),l(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ce,component_name:me,component_title:f?.title,component_position:1,navigation:e?.tab}});return}x()}})}),c("div",{ref:G,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:c(se,{data:{list:s,configuration:{...Z,event:L,isShowTag:Q,isShowOriginalPrice:W,target:A,metafields:$,itemLength:s?.length,isDisplayBackImage:q}},id:C,className:`${p?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:o?"flex-1":"",Slide:o?le:oe,breakpoints:N||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u?1:1.2},768:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_()},1024:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_(1024)},1440:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_(1440)}}},C)})]})});V.displayName="ShelfDisplay";var ke=ae(V);export{ke as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const instanceIdRef = useRef<string>(createInstanceId())\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\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                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        setTabId(currentTab?.tab || '')\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    useEffect(() => {\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n      // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n    }, [buildData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            key={swiperInstanceId}\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={swiperInstanceId}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const instanceIdRef = useRef<string>(createInstanceId())\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\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                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        setTabId(currentTab?.tab || '')\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    useEffect(() => {\n      if (isShowTab) {\n        const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n        handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n      // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n    }, [buildData])\n\n    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            key={swiperInstanceId}\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={swiperInstanceId}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as r,jsxs as G}from"react/jsx-runtime";import l,{useImperativeHandle as q,useRef as i,useEffect as B}from"react";import{gsap as h}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as J,Text as K}from"../../components/index.js";import{withLayout as O}from"../../shared/Styles.js";import{useInView as Q}from"react-intersection-observer";const lt="copy",it="brand_slogan";function W(f=[],m=3){const g=[];for(let n=0;n<f.length;n+=m)g.push(f.slice(n,n+m));return g}const D=l.forwardRef(({data:f,className:m=""},g)=>{const{title:n,features:o=[],featureChunkSize:H=3}=f,[v,N]=l.useState(0),[j,w]=l.useState(!0),k=i(null),y=i(null),b=i(null),d=W(o,H),T=d.length,a=o.length>H,C=a?[...d,d[0]]:d,E=40;q(g,()=>k.current);const{ref:P,inView:I}=Q();l.useEffect(()=>{if(!a)return;const t=setInterval(()=>{N(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[T,a]),l.useEffect(()=>{if(a)if(v===T){const t=setTimeout(()=>{w(!1),N(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,T,a]);const c=i(null),M=i(null),x=i(null);return B(()=>{h.registerPlugin(R,z);function t(){if(!c.current)return;x.current=new z(c.current,{type:"words",wordsClass:"word"});const e=c.current?.clientHeight||100,u=x.current.words;h.set(u,{opacity:0}),y.current=R.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${e*1.5}px bottom-=4%`,scrub:!0,onUpdate:s=>{const V=s.progress,L=u.length,F=1/L,$=.5;u.forEach((U,A)=>{const Y=A/L*(1-$),_=F*(1+$);let S=(V-Y)/_;S=Math.max(0,Math.min(S,1)),h.set(U,{opacity:S})})}}),o&&o.length>0&&(b.current=R.create({trigger:M.current,start:`bottom+=${e*2}px bottom-=6%`,end:`bottom+=${e*2+100}px bottom-=6%`,onUpdate:s=>{h.set(M.current,{opacity:s.progress})}}))}return I&&t(),()=>{x.current&&x.current.revert(),y.current&&y.current.kill(),b.current&&b.current.kill()}},[I]),r("div",{ref:P,children:G("div",{ref:k,className:p("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",m),children:[r(J,{ref:c,as:"h2",size:2,weight:"bold",align:"left",className:p("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:n}),o&&o.length>0&&r("div",{className:p("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:r("div",{className:p(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*E}px)`},children:C.map((t,e)=>r("div",{className:p("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:t.map((u,s)=>G(l.Fragment,{children:[s>0&&r("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),r(K,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:u.title})]},s))},e))})})]})})});D.displayName="Slogan";var at=O(D);export{it as componentName,lt as componentType,at as default};
+"use client";import{jsx as r,jsxs as G}from"react/jsx-runtime";import l,{useImperativeHandle as q,useRef as i,useEffect as B}from"react";import{gsap as h}from"gsap";import{SplitText as z}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as p}from"../../helpers/utils.js";import{Heading as J,Text as K}from"../../components/index.js";import{withLayout as O}from"../../shared/Styles.js";import{useInView as Q}from"react-intersection-observer";const lt="copy",it="brand_slogan";function W(f=[],m=3){const g=[];for(let n=0;n<f.length;n+=m)g.push(f.slice(n,n+m));return g}const D=l.forwardRef(({data:f,className:m=""},g)=>{const{title:n,features:o=[],featureChunkSize:H=3}=f,[v,N]=l.useState(0),[j,w]=l.useState(!0),k=i(null),y=i(null),b=i(null),d=W(o,H),T=d.length,a=o.length>H,C=a?[...d,d[0]]:d,E=40;q(g,()=>k.current);const{ref:P,inView:I}=Q();l.useEffect(()=>{if(!a)return;const t=setInterval(()=>{N(e=>e+1),w(!0)},3e3);return()=>clearInterval(t)},[T,a]),l.useEffect(()=>{if(a)if(v===T){const t=setTimeout(()=>{w(!1),N(0)},500);return()=>clearTimeout(t)}else w(!0)},[v,T,a]);const c=i(null),M=i(null),x=i(null);return B(()=>{h.registerPlugin(R,z);function t(){if(!c.current)return;x.current=new z(c.current,{type:"words",wordsClass:"word"});const e=c.current?.clientHeight||100,u=x.current.words;h.set(u,{opacity:0}),y.current=R.create({trigger:c.current,start:"bottom bottom-=4%",end:`bottom+=${e*1.5}px bottom-=4%`,scrub:!0,onUpdate:s=>{const V=s.progress,L=u.length,F=1/L,$=.5;u.forEach((U,A)=>{const Y=A/L*(1-$),_=F*(1+$);let S=(V-Y)/_;S=Math.max(0,Math.min(S,1)),h.set(U,{opacity:S})})}}),o&&o.length>0&&(b.current=R.create({trigger:M.current,start:`bottom+=${e*2}px bottom-=6%`,end:`bottom+=${e*2+100}px bottom-=6%`,onUpdate:s=>{h.set(M.current,{opacity:s.progress})}}))}return I&&t(),()=>{x.current&&x.current.revert(),y.current&&y.current.kill(),b.current&&b.current.kill()}},[I]),r("div",{ref:P,children:G("div",{ref:k,className:p("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",m),children:[r(J,{ref:c,as:"h1",size:2,weight:"bold",align:"left",className:p("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:n}),o&&o.length>0&&r("div",{className:p("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${E}px]`),children:r("div",{className:p(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${v*E}px)`},children:C.map((t,e)=>r("div",{className:p("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${E}px]`),children:t.map((u,s)=>G(l.Fragment,{children:[s>0&&r("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),r(K,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:u.title})]},s))},e))})})]})})});D.displayName="Slogan";var at=O(D);export{it as componentName,lt as componentType,at as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\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 scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(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  const { ref: inViewRef, inView } = useInView()\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\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\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      scrollTriggerRef.current = 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        featuresTriggerRef.current = 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\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\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\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end 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 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    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useEffect } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\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 scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const featuresTriggerRef = useRef<ScrollTrigger | null>(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  const { ref: inViewRef, inView } = useInView()\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\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n\n    function gsapResize() {\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      scrollTriggerRef.current = 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        featuresTriggerRef.current = 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\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      featuresTriggerRef.current && featuresTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef}>\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=\"h1\"\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\n                  ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]'\n                  : '!transition-none',\n              ])}\n              style={{\n                transform: `translateY(-${groupIndex * groupHeight}px)`,\n              }}\n            >\n              {displayGroups.map((group, idx) => (\n                <div\n                  className={cn(\n                    'laptop:justify-end 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 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    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withLayout(Slogan)\n"],
   "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useEffect", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "Text", "withLayout", "useInView", "componentType", "componentName", "chunkArray", "array", "size", "result", "i", "Slogan", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "scrollTriggerRef", "featuresTriggerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "inViewRef", "inView", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "group", "idx", "feature", "index", "Slogan_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as K,jsx as s,jsxs as c}from"react/jsx-runtime";import P from"./dropdown.js";import{useAiuiContext as _}from"../AiuiProvider/index.js";import{useMediaQuery as $}from"react-responsive";import{useMemo as U,useState as x,useEffect as E}from"react";import{withLayout as V}from"../../shared/Styles.js";import{formatVariantPrice as B}from"../ShelfDisplay/shelfDisplay.js";import{Picture as g,Text as q,Button as z,Heading as M}from"../../components/index.js";import Q,{useImperativeHandle as G,useRef as J}from"react";const A=Q.forwardRef((j,T)=>{const{data:v,buildData:p,onChange:F,onSecondaryChange:W}=j||{},h=$({query:"(max-width: 768px)"}),[n,m]=x({}),[k,w]=x(!1),[b,y]=x({}),N=J(null),{locale:L="us"}=_(),{LeftMenu:D,RightMenu:S,DefaultSelectMenu:u}=U(()=>v?.data||{},[v?.data]),H=e=>{try{const a=new URL(e).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(a)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(e)}},R=(e,t)=>{const a=S?.menus?.find?.(f=>f?.handle===e?.handle),l=e?.variants?.find?.(f=>f?.sku===e?.sku||a?.sku),o=l?.coupons?.[0],{price:r,basePrice:d}=B({locale:L||"us",amount:o?o?.variant_price4wscode:l?.price,baseAmount:o?l?.price:0,currencyCode:e?.price?.currencyCode||"USD"}),i=typeof u?.buttonText=="string"?u?.buttonText:u?.buttonText?.[String(t)]||"";return c("div",{className:"specs-sku-node-wrap box-border",children:[c(q,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(Object.keys(n||{})?.length<=2)return null;y({...b,[t]:!b?.[t]})},children:[c("div",{className:"flex items-center justify-between overflow-hidden",children:[s("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:n?.[t]?.name||"",children:n?.[t]?.name||""}),Object.keys(n||{})?.length>2?s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:s("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})}):null]}),s(P,{index:t,list:p?.products,active:n,filterActive:n,setActive:m,visible:b,setVisible:y})]}),s("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:s(g,{source:l?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),l?.availableForSale?c("div",{className:"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold",children:[s("div",{className:"specs-sku-node-price text-[#080A0F]",children:r||""}),d&&s("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:d})]}):!1,i?s(z,{onClick:()=>{F?.(e,t)},className:"specs-sku-node-button",children:i}):null]})},I=e=>e&&typeof e!="string"?c("div",{className:"size-full",children:[s("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:e?.text||""}}),s(g,{source:e?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):s("div",{className:"break-all",children:H(e)?s(g,{source:e,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):s("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:e||""}})}),C=e=>e.map((t,a)=>{const l=a===0;return c("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6]  specs-product-node-wrap",children:[s(M,{as:"h3",html:t||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),s("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${k?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(n)?.map?.(o=>{const r=n?.[o],d=S?.menus?.find?.(i=>i?.handle===r?.handle)?.subTitle;return I(d?.[t])})})]},t)}),O=e=>{if(!n)return;const{subTitle:t,isProduct:a}=e;return a?c(K,{children:[c("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[e?.title&&s(M,{as:"h3",html:e?.title||"",className:"l:hidden specs-item-product-title"}),s("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${k?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(n)?.map((l,o)=>{const r=n?.[l],d=p?.products?.find?.(i=>i?.handle===r?.handle);return s("div",{children:R({...d,sku:r?.sku,item:l},o)},l)})})]}),t?.length?C(t):null]}):C(t)};return G(T,()=>N.current),E(()=>{if(!p?.products?.length)return;const e=u?.sku?.split?.(",")||[];let t={};e?.forEach?.((a,l)=>{const o=p?.products?.find?.(r=>{if(r?.variants?.find?.(i=>i?.sku===a))return!0});o&&(t={...t,[l]:{sku:a,name:o?.name||o?.title,handle:o?.handle}})}),m(t),w(e?.length>2)},[p]),E(()=>{if(h){const e=Object.keys(n||{});if(e?.length>2){const t=e?.slice?.(0,2);let a={};t?.forEach?.(l=>{a={...a,[l]:n?.[l]}}),w(!1),m(a)}}},[h]),s("div",{className:"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",ref:N,children:D?.data?s("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:D?.data?.map?.((e,t)=>s("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:O(e)},t))}):null})});A.displayName="Specs";var oe=V(A);export{oe as default};
+"use client";import{Fragment as J,jsx as s,jsxs as c}from"react/jsx-runtime";import P from"./dropdown.js";import{useAiuiContext as _}from"../AiuiProvider/index.js";import{useMediaQuery as $}from"react-responsive";import{useMemo as U,useState as x,useEffect as M}from"react";import{withLayout as V}from"../../shared/Styles.js";import{formatVariantPrice as B}from"../ShelfDisplay/shelfDisplay.js";import{Picture as g,Text as q,Button as z,Heading as A}from"../../components/index.js";import Q,{useImperativeHandle as W,useRef as G}from"react";const C=Q.forwardRef((j,L)=>{const{data:v,buildData:p,onChange:T,onSecondaryChange:K}=j||{},h=$({query:"(max-width: 768px)"}),[o,m]=x({}),[k,w]=x(!1),[b,y]=x({}),N=G(null),{locale:F="us"}=_(),{LeftMenu:D,RightMenu:S,DefaultSelectMenu:u}=U(()=>v?.data||{},[v?.data]),H=e=>{try{const a=new URL(e).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(a)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(e)}},R=(e,t)=>{const a=S?.menus?.find?.(f=>f?.handle===e?.handle),l=e?.variants?.find?.(f=>f?.sku===e?.sku||a?.sku),n=l?.coupons?.[0],{price:r,basePrice:d}=B({locale:F||"us",amount:n?n?.variant_price4wscode:l?.price,baseAmount:n?l?.price:0,currencyCode:e?.price?.currencyCode||"USD"}),i=typeof u?.buttonText=="string"?u?.buttonText:u?.buttonText?.[String(t)]||"";return c("div",{className:"specs-sku-node-wrap box-border",children:[c(q,{className:"md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold",onClick:()=>{if(Object.keys(o||{})?.length<=2)return null;y({...b,[t]:!b?.[t]})},children:[c("div",{className:"flex items-center justify-between overflow-hidden",children:[s("div",{className:"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base",title:o?.[t]?.name||"",children:o?.[t]?.name||""}),Object.keys(o||{})?.length>2?s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:s("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):null]}),s(P,{index:t,list:p?.products,active:o,filterActive:o,setActive:m,visible:b,setVisible:y})]}),s("div",{className:"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]",children:s(g,{source:l?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),l?.availableForSale?c("div",{className:"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold",children:[s("div",{className:"specs-sku-node-price text-[#080A0F]",children:r||""}),d&&s("div",{className:"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through",children:d})]}):!1,i?s(z,{onClick:()=>{T?.(e,t)},className:"specs-sku-node-button",children:i}):null]})},I=e=>e&&typeof e!="string"?c("div",{className:"size-full",children:[s("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:e?.text||""}}),s(g,{source:e?.imgUrl,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"})]}):s("div",{className:"break-all",children:H(e)?s(g,{source:e,className:"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]",imgClassName:"w-full h-full object-cover"}):s("p",{className:"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm",dangerouslySetInnerHTML:{__html:e||""}})}),E=e=>e.map((t,a)=>{const l=a===0;return c("div",{className:"l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6]  specs-product-node-wrap",children:[s(A,{as:"h3",html:t||"",className:"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm"}),s("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${k?3:2} specs-product-node-body col-span-2 grid flex-1 py-6`,children:Object.keys(o)?.map?.(n=>{const r=o?.[n],d=S?.menus?.find?.(i=>i?.handle===r?.handle)?.subTitle;return I(d?.[t])})})]},t)}),O=e=>{if(!o)return;const{subTitle:t,isProduct:a}=e;return a?c(J,{children:[c("div",{className:"l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]",children:[e?.title&&s(A,{as:"h3",html:e?.title||"",className:"l:hidden specs-item-product-title"}),s("div",{className:`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${k?3:2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`,children:Object.keys(o)?.map((l,n)=>{const r=o?.[l],d=p?.products?.find?.(i=>i?.handle===r?.handle);return s("div",{children:R({...d,sku:r?.sku,item:l},n)},l)})})]}),t?.length?E(t):null]}):E(t)};return W(L,()=>N.current),M(()=>{if(!p?.products?.length)return;const e=u?.sku?.split?.(",")||[];let t={};e?.forEach?.((a,l)=>{const n=p?.products?.find?.(r=>{if(r?.variants?.find?.(i=>i?.sku===a))return!0});n&&(t={...t,[l]:{sku:a,name:n?.name||n?.title,handle:n?.handle}})}),m(t),w(e?.length>2)},[p]),M(()=>{if(h){const e=Object.keys(o||{});if(e?.length>2){const t=e?.slice?.(0,2);let a={};t?.forEach?.(l=>{a={...a,[l]:o?.[l]}}),w(!1),m(a)}}},[h]),s("div",{className:"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]",ref:N,children:D?.data?s("div",{className:"specs-wrapper-content box-border w-full overflow-hidden",children:D?.data?.map?.((e,t)=>s("div",{className:"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0",children:O(e)},t))}):null})});C.displayName="Specs";var oe=V(C);export{oe as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Specs/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n  const { data, buildData, onChange, onSecondaryChange } = page || {}\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [active, setActive] = useState<any>({})\n  const [isShowMax, setIsShowMax] = useState<boolean>(false)\n  const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const { locale = 'us' } = useAiuiContext()\n\n  const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n  const isImageUrl = (urlPath: string) => {\n    try {\n      const url = new URL(urlPath)\n      const path = url.pathname.toLowerCase()\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n    } catch (e) {\n      // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n    }\n  }\n\n  const skuNode = (product: any, index: number) => {\n    const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n    const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n    const coupon = findSku?.coupons?.[0]\n    const { price, basePrice } = formatVariantPrice({\n      locale: locale || 'us',\n      amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n      baseAmount: coupon ? findSku?.price : 0,\n      currencyCode: product?.price?.currencyCode || 'USD',\n    })\n    const buttonTextValue =\n      typeof DefaultSelectMenu?.buttonText === 'string'\n        ? DefaultSelectMenu?.buttonText\n        : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n    return (\n      <div className=\"specs-sku-node-wrap box-border\">\n        <Text\n          className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n          onClick={() => {\n            if (Object.keys(active || {})?.length <= 2) return null\n\n            setVisibleActive({\n              ...visibleActive,\n              [index]: !visibleActive?.[index],\n            })\n          }}\n        >\n          <div className=\"flex items-center justify-between overflow-hidden\">\n            <div\n              className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n              title={active?.[index]?.name || ''}\n            >\n              {active?.[index]?.name || ''}\n            </div>\n            {Object.keys(active || {})?.length > 2 ? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"25\"\n                viewBox=\"0 0 24 25\"\n                fill=\"none\"\n                className=\"openDropDown\"\n              >\n                <path\n                  d=\"M6 9.5L12 15.5L18 9.5\"\n                  stroke=\"#1D1D1F\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            ) : null}\n          </div>\n          <DropDown\n            index={index}\n            list={buildData?.products}\n            active={active}\n            filterActive={active}\n            setActive={setActive}\n            visible={visibleActive}\n            setVisible={setVisibleActive}\n          />\n        </Text>\n        <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n          <Picture\n            source={findSku?.image?.url || ''}\n            className=\"aspect-h-[280] aspect-w-[280]\"\n            imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n          />\n        </div>\n        {findSku?.availableForSale ? (\n          <div className=\"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold\">\n            <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n            {basePrice && (\n              <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n                {basePrice}\n              </div>\n            )}\n          </div>\n        ) : (\n          false\n        )}\n        {buttonTextValue ? (\n          <Button\n            onClick={() => {\n              onChange?.(product, index)\n            }}\n            className=\"specs-sku-node-button\"\n          >\n            {buttonTextValue}\n          </Button>\n        ) : null}\n      </div>\n    )\n  }\n\n  const normalNode = (v: any) => {\n    if (v && typeof v !== 'string') {\n      return (\n        <div className=\"size-full\">\n          <p\n            className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n            dangerouslySetInnerHTML={{\n              __html: v?.text || '',\n            }}\n          />\n          <Picture\n            source={v?.imgUrl}\n            className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      )\n    }\n    return (\n      <div className=\"break-all\">\n        {isImageUrl(v) ? (\n          <Picture\n            source={v}\n            className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <p\n            className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n\n  const productNode = (data: any) => {\n    return data.map((st: any, idx: number) => {\n      const isFirstParameter = idx === 0\n      return (\n        <div\n          key={st}\n          className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n        >\n          <Heading\n            as=\"h3\"\n            html={st || ''}\n            className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n          />\n          <div\n            className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n          >\n            {Object.keys(active)?.map?.((item: string) => {\n              const currentData = active?.[item]\n              const currentMenus = RightMenu?.menus?.find?.(\n                (item: any) => item?.handle === currentData?.handle\n              )?.subTitle\n              return normalNode(currentMenus?.[st])\n            })}\n          </div>\n        </div>\n      )\n    })\n  }\n\n  // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n  const childrenNode = (node: any) => {\n    if (!active) return\n    const { subTitle, isProduct } = node\n    // \u5982\u679C\u662F\u4EA7\u54C1\n    if (isProduct) {\n      return (\n        <>\n          <div\n            className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n          >\n            {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n            <div\n              className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n            >\n              {Object.keys(active)?.map((item: string, index: number) => {\n                const currentData = active?.[item]\n                const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n                return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n              })}\n            </div>\n          </div>\n          {subTitle?.length ? productNode(subTitle) : null}\n        </>\n      )\n    }\n    return productNode(subTitle)\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    if (!buildData?.products?.length) return\n    const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n    let currentActive = {}\n    skus?.forEach?.((sku: string, index: number) => {\n      const findData = buildData?.products?.find?.((item: any) => {\n        const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n        if (findSku) return true\n      })\n      if (findData) {\n        currentActive = {\n          ...currentActive,\n          [index]: {\n            sku: sku,\n            name: findData?.name || findData?.title,\n            handle: findData?.handle,\n          },\n        }\n      }\n    })\n    setActive(currentActive)\n    setIsShowMax(skus?.length > 2)\n  }, [buildData])\n\n  useEffect(() => {\n    if (isMobile) {\n      const currentActive = Object.keys(active || {})\n      if (currentActive?.length > 2) {\n        const newActive = currentActive?.slice?.(0, 2)\n        let newShowActive = {}\n        newActive?.forEach?.((item: string) => {\n          newShowActive = { ...newShowActive, [item]: active?.[item] }\n        })\n        setIsShowMax(false)\n        setActive(newShowActive)\n      }\n    }\n  }, [isMobile])\n\n  return (\n    <div className=\"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]\" ref={innerRef}>\n      {LeftMenu?.data ? (\n        <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n          {LeftMenu?.data?.map?.((item: any, index: number) => {\n            return (\n              <div key={index} className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\">\n                {childrenNode(item)}\n              </div>\n            )\n          })}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport DropDown from './dropdown.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n  const { data, buildData, onChange, onSecondaryChange } = page || {}\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [active, setActive] = useState<any>({})\n  const [isShowMax, setIsShowMax] = useState<boolean>(false)\n  const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  const { locale = 'us' } = useAiuiContext()\n\n  const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n  const isImageUrl = (urlPath: string) => {\n    try {\n      const url = new URL(urlPath)\n      const path = url.pathname.toLowerCase()\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n    } catch (e) {\n      // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n      return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n    }\n  }\n\n  const skuNode = (product: any, index: number) => {\n    const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n    const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n    const coupon = findSku?.coupons?.[0]\n    const { price, basePrice } = formatVariantPrice({\n      locale: locale || 'us',\n      amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n      baseAmount: coupon ? findSku?.price : 0,\n      currencyCode: product?.price?.currencyCode || 'USD',\n    })\n    const buttonTextValue =\n      typeof DefaultSelectMenu?.buttonText === 'string'\n        ? DefaultSelectMenu?.buttonText\n        : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n    return (\n      <div className=\"specs-sku-node-wrap box-border\">\n        <Text\n          className={`md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold`}\n          onClick={() => {\n            if (Object.keys(active || {})?.length <= 2) return null\n\n            setVisibleActive({\n              ...visibleActive,\n              [index]: !visibleActive?.[index],\n            })\n          }}\n        >\n          <div className=\"flex items-center justify-between overflow-hidden\">\n            <div\n              className=\"openDropDown md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title flex-1 truncate text-base\"\n              title={active?.[index]?.name || ''}\n            >\n              {active?.[index]?.name || ''}\n            </div>\n            {Object.keys(active || {})?.length > 2 ? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"25\"\n                viewBox=\"0 0 24 25\"\n                fill=\"none\"\n                className=\"openDropDown\"\n              >\n                <path\n                  d=\"M6 9.5L12 15.5L18 9.5\"\n                  stroke=\"#1D1D1F\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n            ) : null}\n          </div>\n          <DropDown\n            index={index}\n            list={buildData?.products}\n            active={active}\n            filterActive={active}\n            setActive={setActive}\n            visible={visibleActive}\n            setVisible={setVisibleActive}\n          />\n        </Text>\n        <div className=\"lg-desktop:max-h-[196px] lg-desktop:max-w-[196px] max-h-[138px] max-w-[138px]\">\n          <Picture\n            source={findSku?.image?.url || ''}\n            className=\"aspect-h-[280] aspect-w-[280]\"\n            imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n          />\n        </div>\n        {findSku?.availableForSale ? (\n          <div className=\"lg-desktop:text-2xl mb-2 mt-6 flex items-center text-xl font-bold\">\n            <div className=\"specs-sku-node-price text-[#080A0F]\">{price || ''}</div>\n            {basePrice && (\n              <div className=\"lg-desktop:text-2xl specs-sku-node-base-price ml-1 text-xl text-[#86868C] line-through\">\n                {basePrice}\n              </div>\n            )}\n          </div>\n        ) : (\n          false\n        )}\n        {buttonTextValue ? (\n          <Button\n            onClick={() => {\n              onChange?.(product, index)\n            }}\n            className=\"specs-sku-node-button\"\n          >\n            {buttonTextValue}\n          </Button>\n        ) : null}\n      </div>\n    )\n  }\n\n  const normalNode = (v: any) => {\n    if (v && typeof v !== 'string') {\n      return (\n        <div className=\"size-full\">\n          <p\n            className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n            dangerouslySetInnerHTML={{\n              __html: v?.text || '',\n            }}\n          />\n          <Picture\n            source={v?.imgUrl}\n            className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        </div>\n      )\n    }\n    return (\n      <div className=\"break-all\">\n        {isImageUrl(v) ? (\n          <Picture\n            source={v}\n            className=\"l:max-h-[174px] l:max-w-[174px] m-auto max-h-[360px] max-w-[360px]\"\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <p\n            className=\"min-xxl:text-lg specs-normal-node-text text-base font-bold text-[#080A0F] md:text-sm\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        )}\n      </div>\n    )\n  }\n\n  const productNode = (data: any) => {\n    return data.map((st: any, idx: number) => {\n      const isFirstParameter = idx === 0\n      return (\n        <div\n          key={st}\n          className={`l-tablet:flex l-tablet:flex-col box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n        >\n          <Heading\n            as=\"h3\"\n            html={st || ''}\n            className=\"tablet:py-6 l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title mr-4 flex-1 pt-4 text-base font-bold md:text-sm\"\n          />\n          <div\n            className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-product-node-body col-span-2 grid flex-1 py-6`}\n          >\n            {Object.keys(active)?.map?.((item: string) => {\n              const currentData = active?.[item]\n              const currentMenus = RightMenu?.menus?.find?.(\n                (item: any) => item?.handle === currentData?.handle\n              )?.subTitle\n              return normalNode(currentMenus?.[st])\n            })}\n          </div>\n        </div>\n      )\n    })\n  }\n\n  // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n  const childrenNode = (node: any) => {\n    if (!active) return\n    const { subTitle, isProduct } = node\n    // \u5982\u679C\u662F\u4EA7\u54C1\n    if (isProduct) {\n      return (\n        <>\n          <div\n            className={`l-tablet:flex l-tablet:flex-col specs-content-item-product box-border grid w-full cursor-pointer grid-cols-3 border-t-0 border-t-[#E4E5E6]`}\n          >\n            {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n            <div\n              className={`l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:px-6 desktop:pb-6 lg-desktop:gap-16 grid-cols-${isShowMax ? 3 : 2} specs-item-product-body col-span-2 grid flex-1 pb-4 pr-0`}\n            >\n              {Object.keys(active)?.map((item: string, index: number) => {\n                const currentData = active?.[item]\n                const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n                return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n              })}\n            </div>\n          </div>\n          {subTitle?.length ? productNode(subTitle) : null}\n        </>\n      )\n    }\n    return productNode(subTitle)\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    if (!buildData?.products?.length) return\n    const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n    let currentActive = {}\n    skus?.forEach?.((sku: string, index: number) => {\n      const findData = buildData?.products?.find?.((item: any) => {\n        const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n        if (findSku) return true\n      })\n      if (findData) {\n        currentActive = {\n          ...currentActive,\n          [index]: {\n            sku: sku,\n            name: findData?.name || findData?.title,\n            handle: findData?.handle,\n          },\n        }\n      }\n    })\n    setActive(currentActive)\n    setIsShowMax(skus?.length > 2)\n  }, [buildData])\n\n  useEffect(() => {\n    if (isMobile) {\n      const currentActive = Object.keys(active || {})\n      if (currentActive?.length > 2) {\n        const newActive = currentActive?.slice?.(0, 2)\n        let newShowActive = {}\n        newActive?.forEach?.((item: string) => {\n          newShowActive = { ...newShowActive, [item]: active?.[item] }\n        })\n        setIsShowMax(false)\n        setActive(newShowActive)\n      }\n    }\n  }, [isMobile])\n\n  return (\n    <div className=\"specs-wrapper w-full overflow-hidden bg-[#F5F5F7]\" ref={innerRef}>\n      {LeftMenu?.data ? (\n        <div className=\"specs-wrapper-content box-border w-full overflow-hidden\">\n          {LeftMenu?.data?.map?.((item: any, index: number) => {\n            return (\n              <div key={index} className=\"specs-wrapper-content-item w-full overflow-hidden pt-10 [&:first-child]:pt-0\">\n                {childrenNode(item)}\n              </div>\n            )\n          })}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "DropDown", "useAiuiContext", "useMediaQuery", "useMemo", "useState", "useEffect", "withLayout", "formatVariantPrice", "Picture", "Text", "Button", "Heading", "React", "useImperativeHandle", "useRef", "Specs", "page", "ref", "data", "buildData", "onChange", "onSecondaryChange", "isMobile", "active", "setActive", "isShowMax", "setIsShowMax", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "buttonTextValue", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive", "Specs_default"]
 }

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+/**
+ * StockShelf 业务组件数据接口
+ */
+export interface StockShelfData {
+    /** 组件标题 */
+    title?: string;
+    /** 组件描述 */
+    description?: string;
+}
+export interface StockShelfProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: StockShelfData;
+}
+/**
+ * StockShelf - 库存货架
+ *
+ * @description 能够实时显示商品库存信息和会员价的货架
+ */
+declare const StockShelf: React.ForwardRefExoticComponent<StockShelfProps & React.RefAttributes<HTMLDivElement>>;
+export default StockShelf;

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as c from"react";import{cn as r}from"../../helpers/index.js";const l=c.forwardRef(({className:o,data:t,...s},i)=>a("div",{ref:i,className:r("w-full",o),...s,children:[t.title&&e("h2",{className:"mb-4 text-2xl font-bold",children:t.title}),t.description&&e("p",{className:"mb-6 text-gray-600",children:t.description}),e("div",{className:"stock-shelf-content",children:e("p",{className:"text-gray-500",children:"\u5E93\u5B58\u8D27\u67B6\u4E1A\u52A1\u5185\u5BB9\u533A\u57DF"})})]}));l.displayName="StockShelf";var n=l;export{n as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/StockShelf/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\n\n/**\n * StockShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface StockShelfData {\n  /** \u7EC4\u4EF6\u6807\u9898 */\n  title?: string\n  /** \u7EC4\u4EF6\u63CF\u8FF0 */\n  description?: string\n}\n\nexport interface StockShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: StockShelfData\n}\n\n/**\n * StockShelf - \u5E93\u5B58\u8D27\u67B6\n *\n * @description \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6\n */\nconst StockShelf = React.forwardRef<HTMLDivElement, StockShelfProps>(({ className, data, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn('w-full', className)} {...props}>\n      {data.title && <h2 className=\"mb-4 text-2xl font-bold\">{data.title}</h2>}\n      {data.description && <p className=\"mb-6 text-gray-600\">{data.description}</p>}\n\n      {/* \u5E93\u5B58\u8D27\u67B6\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n      <div className=\"stock-shelf-content\">\n        <p className=\"text-gray-500\">\u5E93\u5B58\u8D27\u67B6\u4E1A\u52A1\u5185\u5BB9\u533A\u57DF</p>\n      </div>\n    </div>\n  )\n})\n\nStockShelf.displayName = 'StockShelf'\nexport default StockShelf\n"],
+  "mappings": "aA2BI,OACiB,OAAAA,EADjB,QAAAC,MAAA,oBAzBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBAsBnB,MAAMC,EAAaF,EAAM,WAA4C,CAAC,CAAE,UAAAG,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAEjGP,EAAC,OAAI,IAAKO,EAAK,UAAWL,EAAG,SAAUE,CAAS,EAAI,GAAGE,EACpD,UAAAD,EAAK,OAASN,EAAC,MAAG,UAAU,0BAA2B,SAAAM,EAAK,MAAM,EAClEA,EAAK,aAAeN,EAAC,KAAE,UAAU,qBAAsB,SAAAM,EAAK,YAAY,EAGzEN,EAAC,OAAI,UAAU,sBACb,SAAAA,EAAC,KAAE,UAAU,gBAAgB,wEAAU,EACzC,GACF,CAEH,EAEDI,EAAW,YAAc,aACzB,IAAOK,EAAQL",
+  "names": ["jsx", "jsxs", "React", "cn", "StockShelf", "className", "data", "props", "ref", "StockShelf_default"]
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Subscribe/index.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { LoadingDots } from '../../components/index.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n  subscribeMetadata,\n  onSubmit,\n  className,\n  loading,\n}: {\n  subscribeMetadata: any\n  onSubmit?: ({\n    email,\n    terms,\n    news,\n    dealsType,\n    onSuccess,\n  }: {\n    email: string\n    terms: string\n    news: string\n    dealsType?: string\n    onSuccess?: () => void\n  }) => void\n  className?: string\n  loading?: boolean\n}) => {\n  const [error, setError] = useState<string | null>(null)\n  const [termsError, setTermsError] = useState<string | null>(null)\n  const [success, setSuccess] = useState<boolean>(false)\n  const [email, setEmail] = useState<string>('')\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.target as HTMLFormElement)\n    const email = formData.get('email')\n    const terms = formData.get('terms')\n    const news = formData.get('news')\n    if (!email) {\n      setError(subscribeMetadata?.emptyError)\n      return\n    }\n    if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n      setError(subscribeMetadata?.formatError)\n      return\n    }\n    if (!terms) {\n      setTermsError(subscribeMetadata?.termsError)\n      return\n    }\n    onSubmit?.({\n      email: email as string,\n      terms: terms as string,\n      news: news as string,\n      dealsType: subscribeMetadata?.dealsType,\n      onSuccess: () => {\n        setSuccess(true)\n        let timer = setTimeout(() => {\n          setSuccess(false)\n          clearTimeout(timer)\n        }, 3000)\n      },\n    })\n  }\n\n  return (\n    <div\n      className={cn(\n        'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n        className\n      )}\n    >\n      <style jsx global>\n        {`\n          .subscribe-component input:-webkit-autofill,\n          .subscribe-component input:-webkit-autofill:hover,\n          .subscribe-component input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n            -webkit-text-fill-color: #fff !important;\n            transition: background-color 9999s ease-in-out 0s !important;\n            caret-color: #fff;\n          }\n        `}\n      </style>\n      <div className=\"laptop:flex-1\">\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.title}\n          className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n        />\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.subtitle}\n          className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n        />\n      </div>\n      <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n        <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n          <div className=\"tablet:max-w-[320px] laptop:max-w-[404px] relative h-full flex-1\">\n            <input\n              name=\"email\"\n              onFocus={() => setError(null)}\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              placeholder={subscribeMetadata?.placeholder}\n              className=\"desktop:text-base rounded-l-btn size-full rounded-r-none border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n            />\n            <button\n              onClick={() => setEmail('')}\n              className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n                hidden: !email,\n              })}\n            >\n              \u2715\n            </button>\n          </div>\n          <Button\n            type=\"submit\"\n            className=\"desktop:px-7 rounded-r-btn desktop:text-base h-full !rounded-l-none bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n          >\n            {loading ? (\n              <LoadingDots />\n            ) : (\n              <Text html={subscribeMetadata?.button} className=\"desktop:text-base text-sm font-bold leading-[1.2]\" />\n            )}\n          </Button>\n        </div>\n        {error && (\n          <Text as=\"p\" html={error} className=\"laptop:text-base mt-2 text-sm font-bold leading-[1.2] text-[#F84D4F]\" />\n        )}\n        <div className=\"mt-4 flex flex-col gap-2\">\n          <div className=\"laptop:items-center flex items-start gap-2\">\n            <Checkbox\n              name=\"terms\"\n              id=\"terms\"\n              size=\"base\"\n              checked={subscribeMetadata?.termsChecked}\n              onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]\"\n            />\n            <label htmlFor=\"terms\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.terms}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {termsError && (\n            <Text\n              as=\"p\"\n              html={termsError}\n              className=\"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\"\n            />\n          )}\n          <div className=\"flex items-start gap-2\">\n            <Checkbox\n              name=\"news\"\n              id=\"news\"\n              size=\"base\"\n              checked={subscribeMetadata?.newsChecked}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]\"\n            />\n            <label htmlFor=\"news\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.news}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {success && (\n            <Text\n              as=\"p\"\n              html={subscribeMetadata?.successMessage}\n              className=\"text-brand-0 text-base font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default Subscribe\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport React, { useState } from 'react'\nimport { Text, Checkbox, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { LoadingDots } from '../../components/index.js'\n\n/**\n * Subscribe \u8BA2\u9605\u6A21\u5757\n * @param subscribeMetadata \u8BA2\u9605\u6A21\u5757\u6570\u636E\n * @param onSubmit \u63D0\u4EA4\u4E8B\u4EF6\n * @param className \u7C7B\u540D\n * @returns\n */\nconst Subscribe = ({\n  subscribeMetadata,\n  onSubmit,\n  className,\n  loading,\n}: {\n  subscribeMetadata: any\n  onSubmit?: ({\n    email,\n    terms,\n    news,\n    dealsType,\n    onSuccess,\n  }: {\n    email: string\n    terms: string\n    news: string\n    dealsType?: string\n    onSuccess?: () => void\n  }) => void\n  className?: string\n  loading?: boolean\n}) => {\n  const [error, setError] = useState<string | null>(null)\n  const [termsError, setTermsError] = useState<string | null>(null)\n  const [success, setSuccess] = useState<boolean>(false)\n  const [email, setEmail] = useState<string>('')\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.target as HTMLFormElement)\n    const email = formData.get('email')\n    const terms = formData.get('terms')\n    const news = formData.get('news')\n    if (!email) {\n      setError(subscribeMetadata?.emptyError)\n      return\n    }\n    if (!/^[a-zA-Z0-9.,%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.test(email as string)) {\n      setError(subscribeMetadata?.formatError)\n      return\n    }\n    if (!terms) {\n      setTermsError(subscribeMetadata?.termsError)\n      return\n    }\n    onSubmit?.({\n      email: email as string,\n      terms: terms as string,\n      news: news as string,\n      dealsType: subscribeMetadata?.dealsType,\n      onSuccess: () => {\n        setSuccess(true)\n        let timer = setTimeout(() => {\n          setSuccess(false)\n          clearTimeout(timer)\n        }, 3000)\n      },\n    })\n  }\n\n  return (\n    <div\n      className={cn(\n        'subscribe-component laptop:flex-row laptop:gap-4 desktop:flex-col desktop:gap-8 flex flex-col gap-4',\n        className\n      )}\n    >\n      {/* TODO: @seasail \u7528tailwind \u539F\u5B50\u7C7B\u6216\u8005\u884C\u5185\u6837\u5F0F(Inline Style)\u4EE3\u66FF jsx global */}\n      <style jsx global>\n        {`\n          .subscribe-component input:-webkit-autofill,\n          .subscribe-component input:-webkit-autofill:hover,\n          .subscribe-component input:-webkit-autofill:focus {\n            -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n            -webkit-text-fill-color: #fff !important;\n            transition: background-color 9999s ease-in-out 0s !important;\n            caret-color: #fff;\n          }\n        `}\n      </style>\n      <div className=\"laptop:flex-1\">\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.title}\n          className=\"desktop:text-base text-sm font-bold leading-[1.4] text-white\"\n        />\n        <Text\n          as=\"p\"\n          html={subscribeMetadata?.subtitle}\n          className=\"desktop:mt-2 desktop:text-[32px] mt-1 text-2xl font-bold leading-[1.2] text-white\"\n        />\n      </div>\n      <form className=\"laptop:flex-1\" onSubmit={handleSubmit}>\n        <div className=\"desktop:h-[48px] flex h-[38px] items-center\">\n          <div className=\"tablet:max-w-[320px] laptop:max-w-[404px] relative h-full flex-1\">\n            <input\n              name=\"email\"\n              onFocus={() => setError(null)}\n              value={email}\n              onChange={e => setEmail(e.target.value)}\n              placeholder={subscribeMetadata?.placeholder}\n              className=\"desktop:text-base rounded-l-btn size-full rounded-r-none border border-[#B6B6BA] bg-transparent px-4 text-sm font-bold leading-[1.2] text-white\"\n            />\n            <button\n              onClick={() => setEmail('')}\n              className={cn('absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600', {\n                hidden: !email,\n              })}\n            >\n              \u2715\n            </button>\n          </div>\n          <Button\n            type=\"submit\"\n            className=\"desktop:px-7 rounded-r-btn desktop:text-base h-full !rounded-l-none bg-white px-5 text-sm font-bold leading-[1.2] text-black\"\n          >\n            {loading ? (\n              <LoadingDots />\n            ) : (\n              <Text html={subscribeMetadata?.button} className=\"desktop:text-base text-sm font-bold leading-[1.2]\" />\n            )}\n          </Button>\n        </div>\n        {error && (\n          <Text as=\"p\" html={error} className=\"laptop:text-base mt-2 text-sm font-bold leading-[1.2] text-[#F84D4F]\" />\n        )}\n        <div className=\"mt-4 flex flex-col gap-2\">\n          <div className=\"laptop:items-center flex items-start gap-2\">\n            <Checkbox\n              name=\"terms\"\n              id=\"terms\"\n              size=\"base\"\n              checked={subscribeMetadata?.termsChecked}\n              onCheckedChange={(checked: boolean) => checked && setTermsError(null)}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]\"\n            />\n            <label htmlFor=\"terms\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.terms}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {termsError && (\n            <Text\n              as=\"p\"\n              html={termsError}\n              className=\"laptop:text-base text-sm font-bold leading-[1.2] text-[#F84D4F]\"\n            />\n          )}\n          <div className=\"flex items-start gap-2\">\n            <Checkbox\n              name=\"news\"\n              id=\"news\"\n              size=\"base\"\n              checked={subscribeMetadata?.newsChecked}\n              className=\"border-[#B6B6BA] data-[state=checked]:bg-white data-[state=checked]:text-[#080A0F]\"\n            />\n            <label htmlFor=\"news\">\n              <Text\n                as=\"p\"\n                html={subscribeMetadata?.news}\n                className=\"desktop:text-base text-sm font-bold leading-[1.4] text-[#B6B6BA]\"\n              />\n            </label>\n          </div>\n          {success && (\n            <Text\n              as=\"p\"\n              html={subscribeMetadata?.successMessage}\n              className=\"text-brand-0 text-base font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default Subscribe\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useState", "Text", "Checkbox", "Button", "cn", "LoadingDots", "Subscribe", "subscribeMetadata", "onSubmit", "className", "loading", "error", "setError", "termsError", "setTermsError", "success", "setSuccess", "email", "setEmail", "handleSubmit", "e", "formData", "terms", "news", "timer", "checked", "Subscribe_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{withLayout as n}from"../../shared/Styles.js";import*as r from"../../components/tabs.js";import{cn as d}from"../../helpers/index.js";import u from"react";import y from"../ShelfDisplay/index.js";import b from"../AccordionCards/index.js";import h from"../Faq/index.js";import g from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import k from"../Title/index.js";import N from"../Graphic/index.js";const v=u.forwardRef(({data:o,className:m},l)=>{const{theme:p,shape:c,align:T,tabs:i=[],sectionTitle:s}=o,f=a=>a?.blockType==="ipc-shelfdisplay"?e(y,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?e(g,{data:a}):a?.blockType==="ipc-accordioncards"?e(b,{data:a}):a?.blockType==="ipc-faq"?e(h,{data:a}):a?.blockType==="ipc-graphic"?e(N,{data:a}):null;return t("section",{ref:l,className:d(p==="dark"?"aiui-dark":"",m),children:[s&&e(k,{className:"section-title",data:{title:s}}),t(r.Tabs,{shape:c,align:T,defaultValue:i?.[0]?.id||i?.[0]?.tabName,children:[Array.isArray(i)&&i.length>1&&e(r.TabsList,{className:"tabs-list",children:i.map(a=>e(r.TabsTrigger,{value:a.id||a.tabName,className:"tabs-trigger",children:a.tabName},a.id||a.tabName))}),(Array.isArray(i)?i:[])?.map(a=>e(r.TabsContent,{value:a.id||a.tabName,className:`tabs-content ${i?.length>1?"mt-[24px]":""}`,children:a.tabContent?.[0]?f(a.tabContent?.[0]):null},a.id||a.tabName))]})]})});var M=n(v);export{M as default};
+"use client";import{jsx as e,jsxs as m}from"react/jsx-runtime";import{withLayout as d}from"../../shared/Styles.js";import*as r from"../../components/tabs.js";import{cn as u}from"../../helpers/index.js";import y from"react";import b from"../ShelfDisplay/index.js";import h from"../AccordionCards/index.js";import N from"../Faq/index.js";import g from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import k from"../Title/index.js";import v from"../Graphic/index.js";const t=y.forwardRef(({data:o,className:l},p)=>{const{theme:c,shape:T,align:f,tabs:i=[],sectionTitle:s}=o,n=a=>a?.blockType==="ipc-shelfdisplay"?e(b,{data:a}):a?.blockType==="ipc-multiLayoutGraphicBlock"?e(g,{data:a}):a?.blockType==="ipc-accordioncards"?e(h,{data:a}):a?.blockType==="ipc-faq"?e(N,{data:a}):a?.blockType==="ipc-graphic"?e(v,{data:a}):null;return m("section",{ref:p,className:u(c==="dark"?"aiui-dark":"",l),children:[s&&e(k,{className:"section-title",data:{title:s}}),m(r.Tabs,{shape:T,align:f,defaultValue:i?.[0]?.id||i?.[0]?.tabName,children:[Array.isArray(i)&&i.length>1&&e(r.TabsList,{className:"tabs-list",children:i.map(a=>e(r.TabsTrigger,{value:a.id||a.tabName,className:"tabs-trigger",children:a.tabName},a.id||a.tabName))}),(Array.isArray(i)?i:[])?.map(a=>e(r.TabsContent,{value:a.id||a.tabName,className:`tabs-content ${i?.length>1?"mt-[24px]":""}`,children:a.tabContent?.[0]?n(a.tabContent?.[0]):null},a.id||a.tabName))]})]})});t.displayName="Tabs";var M=d(t);export{M as default};
 //# sourceMappingURL=Tabs.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Tabs/Tabs.tsx"],
-  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabContentItem, TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs = [], sectionTitle } = data\n\n  const renderTabContent = (tabContent: TabContentItem) => {\n    if (tabContent?.blockType === 'ipc-shelfdisplay') {\n      return <ShelfDisplay data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n      return <MultiLayoutGraphicBlock data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-accordioncards') {\n      return <AccordionCards data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-faq') {\n      return <Faq data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-graphic') {\n      return <Graphic data={tabContent} />\n    } else {\n      return null\n    }\n  }\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n        {/* <TabsPrimitive.TabsList className=\"tabs-list\">\n          {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n            <TabsPrimitive.TabsTrigger\n              key={tab.id || tab.tabName}\n              value={tab.id || tab.tabName}\n              className=\"tabs-trigger\"\n            >\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList> */}\n        {/* Tab\u4E3A1\u65F6\uFF0C\u4E0D\u5C55\u793Atab\u6309\u94AE */}\n        {Array.isArray(tabs) && tabs.length > 1 && (\n          <TabsPrimitive.TabsList className=\"tabs-list\">\n            {tabs.map(tab => (\n              <TabsPrimitive.TabsTrigger\n                key={tab.id || tab.tabName}\n                value={tab.id || tab.tabName}\n                className=\"tabs-trigger\"\n              >\n                {tab.tabName}\n              </TabsPrimitive.TabsTrigger>\n            ))}\n          </TabsPrimitive.TabsList>\n        )}\n        {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n          <TabsPrimitive.TabsContent\n            key={tab.id || tab.tabName}\n            value={tab.id || tab.tabName}\n            className={`tabs-content ${tabs?.length > 1 ? 'mt-[24px]' : ''}`}\n          >\n            {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(Tabs)\n"],
-  "mappings": "aAkBa,cAAAA,EAiBP,QAAAC,MAjBO,oBAjBb,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAClB,OAAOC,MAAkB,2BACzB,OAAOC,MAAoB,6BAC3B,OAAOC,MAAS,kBAChB,OAAOC,MAA6B,wDACpC,OAAOC,MAAW,oBAClB,OAAOC,MAAa,sBAEpB,MAAMC,EAAOP,EAAM,WAAsC,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,mBACrBtB,EAACM,EAAA,CAAa,KAAMgB,EAAY,EAC9BA,GAAY,YAAc,8BAC5BtB,EAACS,EAAA,CAAwB,KAAMa,EAAY,EACzCA,GAAY,YAAc,qBAC5BtB,EAACO,EAAA,CAAe,KAAMe,EAAY,EAChCA,GAAY,YAAc,UAC5BtB,EAACQ,EAAA,CAAI,KAAMc,EAAY,EACrBA,GAAY,YAAc,cAC5BtB,EAACW,EAAA,CAAQ,KAAMW,EAAY,EAE3B,KAIX,OACErB,EAAC,WAAQ,IAAKc,EAAc,UAAWX,EAAGY,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,GAAgBpB,EAACU,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOU,CAAa,EAAG,EACjFnB,EAACE,EAAc,KAAd,CAAmB,MAAOc,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,IAAMA,IAAO,CAAC,GAAG,QAavF,gBAAM,QAAQA,CAAI,GAAKA,EAAK,OAAS,GACpCnB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAgB,EAAK,IAAII,GACRvB,EAACG,EAAc,YAAd,CAEC,MAAOoB,EAAI,IAAMA,EAAI,QACrB,UAAU,eAET,SAAAA,EAAI,SAJAA,EAAI,IAAMA,EAAI,OAKrB,CACD,EACH,GAEA,MAAM,QAAQJ,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAKI,GACvCvB,EAACG,EAAc,YAAd,CAEC,MAAOoB,EAAI,IAAMA,EAAI,QACrB,UAAW,gBAAgBJ,GAAM,OAAS,EAAI,YAAc,EAAE,GAE7D,SAAAI,EAAI,aAAa,CAAC,EAAIF,EAAiBE,EAAI,aAAa,CAAC,CAAC,EAAI,MAJ1DA,EAAI,IAAMA,EAAI,OAKrB,CACD,GACH,GACF,CAEJ,CAAC,EAED,IAAOC,EAAQtB,EAAWU,CAAI",
+  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabContentItem, TabsProps } from './types.js'\nimport React from 'react'\nimport ShelfDisplay from '../ShelfDisplay/index.js'\nimport AccordionCards from '../AccordionCards/index.js'\nimport Faq from '../Faq/index.js'\nimport MultiLayoutGraphicBlock from '../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js'\nimport Title from '../Title/index.js'\nimport Graphic from '../Graphic/index.js'\n\nconst Tabs = React.forwardRef<HTMLDivElement, TabsProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs = [], sectionTitle } = data\n\n  const renderTabContent = (tabContent: TabContentItem) => {\n    if (tabContent?.blockType === 'ipc-shelfdisplay') {\n      return <ShelfDisplay data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-multiLayoutGraphicBlock') {\n      return <MultiLayoutGraphicBlock data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-accordioncards') {\n      return <AccordionCards data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-faq') {\n      return <Faq data={tabContent} />\n    } else if (tabContent?.blockType === 'ipc-graphic') {\n      return <Graphic data={tabContent} />\n    } else {\n      return null\n    }\n  }\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      {sectionTitle && <Title className=\"section-title\" data={{ title: sectionTitle }} />}\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs?.[0]?.id || tabs?.[0]?.tabName}>\n        {/* <TabsPrimitive.TabsList className=\"tabs-list\">\n          {(Array.isArray(tabs) ? tabs : [])?.map(tab => (\n            <TabsPrimitive.TabsTrigger\n              key={tab.id || tab.tabName}\n              value={tab.id || tab.tabName}\n              className=\"tabs-trigger\"\n            >\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList> */}\n        {/* Tab\u4E3A1\u65F6\uFF0C\u4E0D\u5C55\u793Atab\u6309\u94AE */}\n        {Array.isArray(tabs) && tabs.length > 1 && (\n          <TabsPrimitive.TabsList className=\"tabs-list\">\n            {tabs.map(tab => (\n              <TabsPrimitive.TabsTrigger\n                key={tab.id || tab.tabName}\n                value={tab.id || tab.tabName}\n                className=\"tabs-trigger\"\n              >\n                {tab.tabName}\n              </TabsPrimitive.TabsTrigger>\n            ))}\n          </TabsPrimitive.TabsList>\n        )}\n        {(Array.isArray(tabs) ? tabs : [])?.map((tab: any) => (\n          <TabsPrimitive.TabsContent\n            key={tab.id || tab.tabName}\n            value={tab.id || tab.tabName}\n            className={`tabs-content ${tabs?.length > 1 ? 'mt-[24px]' : ''}`}\n          >\n            {tab.tabContent?.[0] ? renderTabContent(tab.tabContent?.[0]) : null}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\nTabs.displayName = 'Tabs'\nexport default withLayout(Tabs)\n"],
+  "mappings": "aAkBa,cAAAA,EAiBP,QAAAC,MAjBO,oBAjBb,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAClB,OAAOC,MAAkB,2BACzB,OAAOC,MAAoB,6BAC3B,OAAOC,MAAS,kBAChB,OAAOC,MAA6B,wDACpC,OAAOC,MAAW,oBAClB,OAAOC,MAAa,sBAEpB,MAAMC,EAAOP,EAAM,WAAsC,CAAC,CAAE,KAAAQ,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CAC9F,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,EAAO,CAAC,EAAG,aAAAC,CAAa,EAAIP,EAEnDQ,EAAoBC,GACpBA,GAAY,YAAc,mBACrBtB,EAACM,EAAA,CAAa,KAAMgB,EAAY,EAC9BA,GAAY,YAAc,8BAC5BtB,EAACS,EAAA,CAAwB,KAAMa,EAAY,EACzCA,GAAY,YAAc,qBAC5BtB,EAACO,EAAA,CAAe,KAAMe,EAAY,EAChCA,GAAY,YAAc,UAC5BtB,EAACQ,EAAA,CAAI,KAAMc,EAAY,EACrBA,GAAY,YAAc,cAC5BtB,EAACW,EAAA,CAAQ,KAAMW,EAAY,EAE3B,KAIX,OACErB,EAAC,WAAQ,IAAKc,EAAc,UAAWX,EAAGY,IAAU,OAAS,YAAc,GAAIF,CAAS,EACrF,UAAAM,GAAgBpB,EAACU,EAAA,CAAM,UAAU,gBAAgB,KAAM,CAAE,MAAOU,CAAa,EAAG,EACjFnB,EAACE,EAAc,KAAd,CAAmB,MAAOc,EAAO,MAAOC,EAAO,aAAcC,IAAO,CAAC,GAAG,IAAMA,IAAO,CAAC,GAAG,QAavF,gBAAM,QAAQA,CAAI,GAAKA,EAAK,OAAS,GACpCnB,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAgB,EAAK,IAAII,GACRvB,EAACG,EAAc,YAAd,CAEC,MAAOoB,EAAI,IAAMA,EAAI,QACrB,UAAU,eAET,SAAAA,EAAI,SAJAA,EAAI,IAAMA,EAAI,OAKrB,CACD,EACH,GAEA,MAAM,QAAQJ,CAAI,EAAIA,EAAO,CAAC,IAAI,IAAKI,GACvCvB,EAACG,EAAc,YAAd,CAEC,MAAOoB,EAAI,IAAMA,EAAI,QACrB,UAAW,gBAAgBJ,GAAM,OAAS,EAAI,YAAc,EAAE,GAE7D,SAAAI,EAAI,aAAa,CAAC,EAAIF,EAAiBE,EAAI,aAAa,CAAC,CAAC,EAAI,MAJ1DA,EAAI,IAAMA,EAAI,OAKrB,CACD,GACH,GACF,CAEJ,CAAC,EACDX,EAAK,YAAc,OACnB,IAAOY,EAAQtB,EAAWU,CAAI",
   "names": ["jsx", "jsxs", "withLayout", "TabsPrimitive", "cn", "React", "ShelfDisplay", "AccordionCards", "Faq", "MultiLayoutGraphicBlock", "Title", "Graphic", "Tabs", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "sectionTitle", "renderTabContent", "tabContent", "tab", "Tabs_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as s,jsxs as u}from"react/jsx-runtime";import{withLayout as n}from"../../shared/Styles.js";import*as e from"../../components/tabs.js";import{cn as p}from"../../helpers/index.js";import l from"react";const c=l.forwardRef(({data:i,className:r},m)=>{const{theme:o,shape:b,align:T,tabs:t}=i;return s("section",{ref:m,className:p(o==="dark"?"aiui-dark":"",r),children:u(e.Tabs,{shape:b,align:T,defaultValue:t[0].tabName,children:[s(e.TabsList,{className:"tabs-list",children:t.map(a=>s(e.TabsTrigger,{value:a.tabName,className:"tabs-trigger",children:a.tabName},a.tabName))}),t.map(a=>s(e.TabsContent,{value:a.tabName,className:"tabs-content",children:a.children(a.tabContent?.[0])},a.tabName))]})})});var v=n(c);export{v as default};
+"use client";import{jsx as s,jsxs as u}from"react/jsx-runtime";import{withLayout as n}from"../../shared/Styles.js";import*as e from"../../components/tabs.js";import{cn as l}from"../../helpers/index.js";import c from"react";const i=c.forwardRef(({data:r,className:m},o)=>{const{theme:b,shape:T,align:p,tabs:t}=r;return s("section",{ref:o,className:l(b==="dark"?"aiui-dark":"",m),children:u(e.Tabs,{shape:T,align:p,defaultValue:t[0].tabName,children:[s(e.TabsList,{className:"tabs-list",children:t.map(a=>s(e.TabsTrigger,{value:a.tabName,className:"tabs-trigger",children:a.tabName},a.tabName))}),t.map(a=>s(e.TabsContent,{value:a.tabName,className:"tabs-content",children:a.children(a.tabContent?.[0])},a.tabName))]})})});i.displayName="TabsGroup";var v=n(i);export{v as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabsGroup/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsGroupProps } from './types.js'\nimport React from 'react'\n\nconst TabsGroup = React.forwardRef<HTMLDivElement, TabsGroupProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs } = data\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {tabs.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {tabs.map(tab => (\n          <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n            {tab.children(tab.tabContent?.[0])}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nexport default withLayout(TabsGroup)\n"],
-  "mappings": "aAYM,OAGM,OAAAA,EAHN,QAAAC,MAAA,oBAXN,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAElB,MAAMC,EAAYD,EAAM,WAA2C,CAAC,CAAE,KAAAE,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CACxG,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,CAAK,EAAIN,EAEtC,OACEP,EAAC,WAAQ,IAAKS,EAAc,UAAWL,EAAGM,IAAU,OAAS,YAAc,GAAIF,CAAS,EACtF,SAAAP,EAACE,EAAc,KAAd,CAAmB,MAAOQ,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,UAAAb,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAU,EAAK,IAAIC,GACRd,EAACG,EAAc,YAAd,CAA4C,MAAOW,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCD,EAAK,IAAIC,GACRd,EAACG,EAAc,YAAd,CAA4C,MAAOW,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SAASA,EAAI,aAAa,CAAC,CAAC,GADHA,EAAI,OAEpC,CACD,GACH,EACF,CAEJ,CAAC,EAED,IAAOC,EAAQb,EAAWI,CAAS",
+  "sourcesContent": ["'use client'\nimport { withLayout } from '../../shared/Styles.js'\nimport * as TabsPrimitive from '../../components/tabs.js'\nimport { cn } from '../../helpers/index.js'\nimport type { TabsGroupProps } from './types.js'\nimport React from 'react'\n\nconst TabsGroup = React.forwardRef<HTMLDivElement, TabsGroupProps>(({ data, className }, forwardedRef) => {\n  const { theme, shape, align, tabs } = data\n\n  return (\n    <section ref={forwardedRef} className={cn(theme === 'dark' ? 'aiui-dark' : '', className)}>\n      <TabsPrimitive.Tabs shape={shape} align={align} defaultValue={tabs[0].tabName}>\n        <TabsPrimitive.TabsList className=\"tabs-list\">\n          {tabs.map(tab => (\n            <TabsPrimitive.TabsTrigger key={tab.tabName} value={tab.tabName} className=\"tabs-trigger\">\n              {tab.tabName}\n            </TabsPrimitive.TabsTrigger>\n          ))}\n        </TabsPrimitive.TabsList>\n        {tabs.map(tab => (\n          <TabsPrimitive.TabsContent key={tab.tabName} value={tab.tabName} className=\"tabs-content\">\n            {tab.children(tab.tabContent?.[0])}\n          </TabsPrimitive.TabsContent>\n        ))}\n      </TabsPrimitive.Tabs>\n    </section>\n  )\n})\n\nTabsGroup.displayName = 'TabsGroup'\nexport default withLayout(TabsGroup)\n"],
+  "mappings": "aAYM,OAGM,OAAAA,EAHN,QAAAC,MAAA,oBAXN,OAAS,cAAAC,MAAkB,yBAC3B,UAAYC,MAAmB,2BAC/B,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAW,QAElB,MAAMC,EAAYD,EAAM,WAA2C,CAAC,CAAE,KAAAE,EAAM,UAAAC,CAAU,EAAGC,IAAiB,CACxG,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,MAAAC,EAAO,KAAAC,CAAK,EAAIN,EAEtC,OACEP,EAAC,WAAQ,IAAKS,EAAc,UAAWL,EAAGM,IAAU,OAAS,YAAc,GAAIF,CAAS,EACtF,SAAAP,EAACE,EAAc,KAAd,CAAmB,MAAOQ,EAAO,MAAOC,EAAO,aAAcC,EAAK,CAAC,EAAE,QACpE,UAAAb,EAACG,EAAc,SAAd,CAAuB,UAAU,YAC/B,SAAAU,EAAK,IAAIC,GACRd,EAACG,EAAc,YAAd,CAA4C,MAAOW,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SADyBA,EAAI,OAEpC,CACD,EACH,EACCD,EAAK,IAAIC,GACRd,EAACG,EAAc,YAAd,CAA4C,MAAOW,EAAI,QAAS,UAAU,eACxE,SAAAA,EAAI,SAASA,EAAI,aAAa,CAAC,CAAC,GADHA,EAAI,OAEpC,CACD,GACH,EACF,CAEJ,CAAC,EAEDR,EAAU,YAAc,YACxB,IAAOS,EAAQb,EAAWI,CAAS",
   "names": ["jsx", "jsxs", "withLayout", "TabsPrimitive", "cn", "React", "TabsGroup", "data", "className", "forwardedRef", "theme", "shape", "align", "tabs", "tab", "TabsGroup_default"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Dialog as x,DialogContent as d}from"../../components/dialog.js";import{Picture as n,Text as l}from"../../components/index.js";const m=i=>{const{textVisible:s,extension:e,onCloseModal:o}=i;return t(x,{open:s,onOpenChange:()=>o(),children:t(d,{className:"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl z-[9999] mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:a("div",{className:"tablet:rounded-2xl md-tablet:flex md-tablet:flex-col overflow-hidden rounded-lg",children:[t("div",{className:"md-tablet:flex-1 min-h-[260px] w-full",children:t(n,{source:`${e?.textPcImg?.url||""} , ${e?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),t("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:t(l,{html:e?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),t("div",{onClick:()=>o(),className:"absolute right-4 top-4 cursor-pointer",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:t("g",{"clip-path":"url(#clip0_2548_10038)",children:t("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),a("div",{className:"tablet:p-8 tablet:max-h-60 md-tablet:flex-1 overflow-y-auto p-4 text-[#080A0F]",children:[t(l,{html:e?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),t("br",{}),t(l,{html:e?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};export{m as TextModal};
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Dialog as x,DialogContent as d}from"../../components/dialog.js";import{Picture as n,Text as l}from"../../components/index.js";const m=i=>{const{textVisible:s,extension:e,onCloseModal:o}=i;return t(x,{open:s,onOpenChange:()=>o(),children:t(d,{className:"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl z-[9999] mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:a("div",{className:"tablet:rounded-2xl md-tablet:flex md-tablet:flex-col overflow-hidden rounded-lg",children:[t("div",{className:"md-tablet:flex-1 min-h-[260px] w-full",children:t(n,{source:`${e?.textPcImg?.url||""} , ${e?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),t("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:t(l,{html:e?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),t("div",{onClick:()=>o(),className:"absolute right-4 top-4 cursor-pointer",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:t("g",{clipPath:"url(#clip0_2548_10038)",children:t("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),a("div",{className:"tablet:p-8 tablet:max-h-60 md-tablet:flex-1 overflow-y-auto p-4 text-[#080A0F]",children:[t(l,{html:e?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),t("br",{}),t(l,{html:e?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};export{m as TextModal};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TextModal/index.tsx"],
-  "sourcesContent": ["import { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n  textVisible: boolean\n  extension?: {\n    textPcImg: Img\n    textMobileImg: Img\n    textTitle: string\n    text: string\n    textDesc: string\n  }\n  onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n  const { textVisible, extension, onCloseModal } = props\n\n  return (\n    <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl z-[9999] mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n        <div className=\"tablet:rounded-2xl md-tablet:flex md-tablet:flex-col overflow-hidden rounded-lg\">\n          <div className=\"md-tablet:flex-1 min-h-[260px] w-full\">\n            <Picture\n              source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n              className=\"size-full\"\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          </div>\n          <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n            <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n          </div>\n          <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n              <g clip-path=\"url(#clip0_2548_10038)\">\n                <path\n                  d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n                  fill=\"white\"\n                />\n              </g>\n            </svg>\n          </div>\n          <div className=\"tablet:p-8 tablet:max-h-60 md-tablet:flex-1 overflow-y-auto p-4 text-[#080A0F]\">\n            <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n            <br />\n            <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { TextModal }\n"],
-  "mappings": "AAwBY,cAAAA,EAmBF,QAAAC,MAnBE,oBAxBZ,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAe9B,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAa,aAAc,IAAME,EAAa,EAC1D,SAAAV,EAACG,EAAA,CAAc,UAAU,yJACvB,SAAAF,EAAC,OAAI,UAAU,kFACb,UAAAD,EAAC,OAAI,UAAU,wCACb,SAAAA,EAACI,EAAA,CACC,OAAQ,GAAGK,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,EACAT,EAAC,OAAI,UAAU,yDACb,SAAAA,EAACK,EAAA,CAAK,KAAMI,GAAW,UAAW,UAAU,yDAAyD,EACvG,EACAT,EAAC,OAAI,QAAS,IAAMU,EAAa,EAAG,UAAU,wCAC5C,SAAAV,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,KAAE,YAAU,yBACX,SAAAA,EAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,EACAC,EAAC,OAAI,UAAU,iFACb,UAAAD,EAACK,EAAA,CAAK,KAAMI,GAAW,KAAM,UAAU,mDAAmD,EAC1FT,EAAC,OAAG,EACJA,EAACK,EAAA,CAAK,KAAMI,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
+  "sourcesContent": ["import { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n  textVisible: boolean\n  extension?: {\n    textPcImg: Img\n    textMobileImg: Img\n    textTitle: string\n    text: string\n    textDesc: string\n  }\n  onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n  const { textVisible, extension, onCloseModal } = props\n\n  return (\n    <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl z-[9999] mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n        <div className=\"tablet:rounded-2xl md-tablet:flex md-tablet:flex-col overflow-hidden rounded-lg\">\n          <div className=\"md-tablet:flex-1 min-h-[260px] w-full\">\n            <Picture\n              source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n              className=\"size-full\"\n              imgClassName=\"w-full h-full object-cover\"\n            />\n          </div>\n          <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n            <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n          </div>\n          <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n              <g clipPath=\"url(#clip0_2548_10038)\">\n                <path\n                  d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n                  fill=\"white\"\n                />\n              </g>\n            </svg>\n          </div>\n          <div className=\"tablet:p-8 tablet:max-h-60 md-tablet:flex-1 overflow-y-auto p-4 text-[#080A0F]\">\n            <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n            <br />\n            <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { TextModal }\n"],
+  "mappings": "AAwBY,cAAAA,EAmBF,QAAAC,MAnBE,oBAxBZ,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAe9B,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAa,aAAc,IAAME,EAAa,EAC1D,SAAAV,EAACG,EAAA,CAAc,UAAU,yJACvB,SAAAF,EAAC,OAAI,UAAU,kFACb,UAAAD,EAAC,OAAI,UAAU,wCACb,SAAAA,EAACI,EAAA,CACC,OAAQ,GAAGK,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,EACAT,EAAC,OAAI,UAAU,yDACb,SAAAA,EAACK,EAAA,CAAK,KAAMI,GAAW,UAAW,UAAU,yDAAyD,EACvG,EACAT,EAAC,OAAI,QAAS,IAAMU,EAAa,EAAG,UAAU,wCAC5C,SAAAV,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,KAAE,SAAS,yBACV,SAAAA,EAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,EACAC,EAAC,OAAI,UAAU,iFACb,UAAAD,EAACK,EAAA,CAAK,KAAMI,GAAW,KAAM,UAAU,mDAAmD,EAC1FT,EAAC,OAAG,EACJA,EAACK,EAAA,CAAK,KAAMI,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
   "names": ["jsx", "jsxs", "Dialog", "DialogContent", "Picture", "Text", "TextModal", "props", "textVisible", "extension", "onCloseModal"]
 }