@anker-in/headless-ui 1.1.55 → 1.1.57

package/dist/esm/biz-components/CreditsShelf/ProductsList.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import type { CreditsShelfLayoutMode } from './types.js';
+/**
+ * 产品列表组件 Props
+ */
+export interface CreditsShelfProductsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 布局模式：网格布局或横向滑动 */
+    layoutMode?: CreditsShelfLayoutMode;
+    /** 子组件（ProductCard 或自定义卡片） */
+    children: React.ReactNode;
+}
+/**
+ * CreditsShelf 产品列表组件
+ *
+ * @description 支持网格布局和横向滑动两种布局模式
+ */
+declare const CreditsShelfProductsList: React.ForwardRefExoticComponent<CreditsShelfProductsListProps & React.RefAttributes<HTMLDivElement>>;
+export { CreditsShelfProductsList };

package/dist/esm/biz-components/CreditsShelf/ProductsList.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import*as i from"react";import"../../helpers/index.js";import{Swiper as L,SwiperSlide as S}from"swiper/react";import{Navigation as y}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import{useCreditsShelfContext as C}from"./context.js";const E=({disabled:o})=>d("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"lg-desktop:size-[56px] laptop:block hidden size-[40px]",children:[t("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"black",fillOpacity:o?"0.2":"0.6"}),t("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),N=({disabled:o})=>d("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"lg-desktop:size-[56px] laptop:block hidden size-[40px]",children:[t("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"black",fillOpacity:o?"0.2":"0.6"}),t("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),w=i.forwardRef(({layoutMode:o="flex",className:v,children:b,...x},k)=>{const p=C()?.copy,c=i.useId().replace(/:/g,""),g=`swiper-button-next-custom-${c}`,u=`swiper-button-prev-custom-${c}`,[s,h]=i.useState({isBeginning:!0,isEnd:!1}),m=i.useRef(null),r=i.useCallback(()=>{const e=m.current;if(!e?.slides||e.slides.length===0)return;e.slides.forEach(l=>{l.style.height="auto"});const n=Array.from(e.slides).map(l=>l.scrollHeight),f=Math.max(...n);f>0&&e.slides.forEach(l=>{l.style.height=`${f}px`})},[]);i.useEffect(()=>{const e=()=>{requestAnimationFrame(r)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[r]);const a=i.Children.toArray(b);return a.length===0?null:t("div",{ref:k,className:v,...x,children:o==="flex"?t("div",{className:"lg-desktop:gap-6 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 grid grid-cols-1 justify-start gap-4",children:a.map((e,n)=>t("div",{className:"shrink-0",children:e},n))}):d("div",{className:"group relative",children:[t(L,{modules:[y],spaceBetween:16,slidesPerView:"auto",navigation:{nextEl:`.${g}`,prevEl:`.${u}`},onSwiper:e=>{m.current=e,h({isBeginning:e.isBeginning,isEnd:e.isEnd}),setTimeout(r,100)},onSlideChange:e=>{h({isBeginning:e.isBeginning,isEnd:e.isEnd})},className:"!overflow-visible",children:a.map((e,n)=>t(S,{className:"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] rounded-box h-fit !w-[296px] overflow-hidden",children:t("div",{className:"w-full max-w-full",children:e})},n))}),!s.isBeginning&&t("button",{className:`${u} tablet:group-hover:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2`,"aria-label":p?.previousSlideLabel,disabled:s.isBeginning,children:t(E,{disabled:s.isBeginning})}),!s.isEnd&&t("button",{className:`${g} tablet:group-hover:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2`,"aria-label":p?.nextSlideLabel,disabled:s.isEnd,children:t(N,{disabled:s.isEnd})})]})})});w.displayName="CreditsShelf.ProductsList";export{w as CreditsShelfProductsList};
+//# sourceMappingURL=ProductsList.js.map

package/dist/esm/biz-components/CreditsShelf/ProductsList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CreditsShelf/ProductsList.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\n// Import Swiper styles\nimport 'swiper/css'\nimport 'swiper/css/navigation'\n\nimport { useCreditsShelfContext } from './context.js'\nimport type { CreditsShelfLayoutMode } from './types.js'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"lg-desktop:size-[56px] laptop:block hidden size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n      fill=\"black\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"lg-desktop:size-[56px] laptop:block hidden size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n      fill=\"black\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 Props\n */\nexport interface CreditsShelfProductsListProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u5E03\u5C40\u6A21\u5F0F\uFF1A\u7F51\u683C\u5E03\u5C40\u6216\u6A2A\u5411\u6ED1\u52A8 */\n  layoutMode?: CreditsShelfLayoutMode\n  /** \u5B50\u7EC4\u4EF6\uFF08ProductCard \u6216\u81EA\u5B9A\u4E49\u5361\u7247\uFF09 */\n  children: React.ReactNode\n}\n\n/**\n * CreditsShelf \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6\n *\n * @description \u652F\u6301\u7F51\u683C\u5E03\u5C40\u548C\u6A2A\u5411\u6ED1\u52A8\u4E24\u79CD\u5E03\u5C40\u6A21\u5F0F\n */\nconst CreditsShelfProductsList = React.forwardRef<HTMLDivElement, CreditsShelfProductsListProps>(\n  ({ layoutMode = 'flex', className, children, ...props }, ref) => {\n    const context = useCreditsShelfContext()\n    const copy = context?.copy\n\n    // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n    const id = React.useId().replace(/:/g, '')\n    // \u9884\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE\u9009\u62E9\u5668\uFF0C\u907F\u514D\u591A\u6B21\u62FC\u63A5\n    const nextButtonClass = `swiper-button-next-custom-${id}`\n    const prevButtonClass = `swiper-button-prev-custom-${id}`\n\n    // Swiper \u5BFC\u822A\u72B6\u6001\n    const [swiperState, setSwiperState] = React.useState({\n      isBeginning: true,\n      isEnd: false,\n    })\n\n    // Swiper \u5B9E\u4F8B\u5F15\u7528\n    const swiperRef = React.useRef<any>(null)\n\n    // \u8BA1\u7B97\u5E76\u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u9AD8\u9AD8\u5EA6\n    const equalizeSlideHeights = React.useCallback(() => {\n      const swiper = swiperRef.current\n      if (!swiper?.slides || swiper.slides.length === 0) return\n\n      // \u5148\u91CD\u7F6E\u6240\u6709 slide \u9AD8\u5EA6\u4EE5\u83B7\u53D6\u771F\u5B9E\u5185\u5BB9\u9AD8\u5EA6\n      swiper.slides.forEach((slide: HTMLElement) => {\n        slide.style.height = 'auto'\n      })\n\n      // \u8BA1\u7B97\u6700\u5927\u9AD8\u5EA6\n      // @ts-ignore\n      const heights = Array.from(swiper.slides).map((slide: HTMLElement) => slide.scrollHeight)\n      const maxHeight = Math.max(...heights)\n\n      // \u8BBE\u7F6E\u6240\u6709 slide \u4E3A\u6700\u5927\u9AD8\u5EA6\n      if (maxHeight > 0) {\n        swiper.slides.forEach((slide: HTMLElement) => {\n          slide.style.height = `${maxHeight}px`\n        })\n      }\n    }, [])\n\n    // \u76D1\u542C\u7A97\u53E3 resize \u91CD\u65B0\u8BA1\u7B97\u9AD8\u5EA6\n    React.useEffect(() => {\n      const handleResize = () => {\n        // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u66F4\u65B0\u5B8C\u6210\n        requestAnimationFrame(equalizeSlideHeights)\n      }\n\n      window.addEventListener('resize', handleResize)\n      return () => window.removeEventListener('resize', handleResize)\n    }, [equalizeSlideHeights])\n\n    // \u5C06 children \u8F6C\u6362\u4E3A\u6570\u7EC4\n    const childrenArray = React.Children.toArray(children)\n\n    if (childrenArray.length === 0) {\n      return null\n    }\n\n    return (\n      <div ref={ref} className={className} {...props}>\n        {layoutMode === 'flex' ? (\n          /* \u7F51\u683C\u5E03\u5C40 */\n          <div className=\"lg-desktop:gap-6 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 grid grid-cols-1 justify-start gap-4\">\n            {childrenArray.map((child, index) => (\n              <div key={index} className=\"shrink-0\">\n                {child}\n              </div>\n            ))}\n          </div>\n        ) : (\n          /* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */\n          <div className=\"group relative\">\n            <Swiper\n              modules={[Navigation]}\n              spaceBetween={16}\n              slidesPerView=\"auto\"\n              navigation={{\n                nextEl: `.${nextButtonClass}`,\n                prevEl: `.${prevButtonClass}`,\n              }}\n              onSwiper={swiper => {\n                swiperRef.current = swiper\n                setSwiperState({\n                  isBeginning: swiper.isBeginning,\n                  isEnd: swiper.isEnd,\n                })\n                // \u5EF6\u8FDF\u6267\u884C\u4EE5\u786E\u4FDD\u5185\u5BB9\u6E32\u67D3\u5B8C\u6210\n                setTimeout(equalizeSlideHeights, 100)\n              }}\n              onSlideChange={swiper => {\n                setSwiperState({\n                  isBeginning: swiper.isBeginning,\n                  isEnd: swiper.isEnd,\n                })\n              }}\n              className=\"!overflow-visible\"\n            >\n              {childrenArray.map((child, index) => (\n                <SwiperSlide\n                  key={index}\n                  className=\"tablet:!w-[288px] desktop:!w-[316px] lg-desktop:!w-[404px] rounded-box h-fit !w-[296px] overflow-hidden\"\n                >\n                  <div className=\"w-full max-w-full\">{child}</div>\n                </SwiperSlide>\n              ))}\n            </Swiper>\n\n            {/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE - hover \u65F6\u663E\u793A\uFF0C\u5230\u5934\u65F6\u9690\u85CF */}\n            {!swiperState.isBeginning && (\n              <button\n                className={`${prevButtonClass} tablet:group-hover:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2`}\n                aria-label={copy?.previousSlideLabel}\n                disabled={swiperState.isBeginning}\n              >\n                <PrevIcon disabled={swiperState.isBeginning} />\n              </button>\n            )}\n            {!swiperState.isEnd && (\n              <button\n                className={`${nextButtonClass} tablet:group-hover:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2`}\n                aria-label={copy?.nextSlideLabel}\n                disabled={swiperState.isEnd}\n              >\n                <NextIcon disabled={swiperState.isEnd} />\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nCreditsShelfProductsList.displayName = 'CreditsShelf.ProductsList'\n\nexport { CreditsShelfProductsList }\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "Swiper", "SwiperSlide", "Navigation", "useCreditsShelfContext", "PrevIcon", "disabled", "NextIcon", "CreditsShelfProductsList", "layoutMode", "className", "children", "props", "ref", "copy", "id", "nextButtonClass", "prevButtonClass", "swiperState", "setSwiperState", "swiperRef", "equalizeSlideHeights", "swiper", "slide", "heights", "maxHeight", "handleResize", "childrenArray", "child", "index"]
+}

package/dist/esm/biz-components/CreditsShelf/Root.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { type CreditsShelfContextValue } from './context.js';
+export interface CreditsShelfRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 主标题 */
+    title?: string;
+    /** 副标题 */
+    subtitle?: string;
+    /** 主题 */
+    theme?: 'light' | 'dark';
+    /** 文案配置 */
+    copy?: CreditsShelfContextValue['copy'];
+    /** 是否展示标签 */
+    showTags?: boolean;
+    /** 是否展示原价 */
+    showOriginalPrice?: boolean;
+    /** 语义化类名 */
+    classNames?: CreditsShelfContextValue['classNames'];
+    /** 次要按钮文案 */
+    secondaryButtonText?: string;
+    /** 次要按钮功能 */
+    secondaryButtonFun?: CreditsShelfContextValue['secondaryButtonFun'];
+    /** 主要按钮文案 */
+    primaryButtonText?: string;
+    /** 主要按钮功能 */
+    primaryButtonFun?: CreditsShelfContextValue['primaryButtonFun'];
+    /** 了解更多回调 */
+    onLearnMore?: CreditsShelfContextValue['onLearnMore'];
+    /** 立即购买回调 */
+    onShopNow?: CreditsShelfContextValue['onShopNow'];
+    /** 加入购物车回调 */
+    onAddToCart?: CreditsShelfContextValue['onAddToCart'];
+    /** 产品图片点击回调 */
+    onProductImageClick?: CreditsShelfContextValue['onProductImageClick'];
+    /** 子组件 */
+    children: React.ReactNode;
+}
+/**
+ * CreditsShelf Root 组件
+ *
+ * @description 组合式组件的容器，提供 Context 配置
+ */
+declare const CreditsShelfRoot: React.ForwardRefExoticComponent<CreditsShelfRootProps & React.RefAttributes<HTMLDivElement>>;
+export { CreditsShelfRoot };

package/dist/esm/biz-components/CreditsShelf/Root.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as l,jsxs as V}from"react/jsx-runtime";import*as p from"react";import{cn as t}from"../../helpers/index.js";import{Heading as M,Text as P}from"../../components/index.js";import{CreditsShelfContext as T}from"./context.js";const c=p.forwardRef(({title:o,subtitle:r,theme:i="light",copy:n,showTags:a,showOriginalPrice:d,classNames:e,secondaryButtonText:s,secondaryButtonFun:C,primaryButtonText:f,primaryButtonFun:h,onLearnMore:u,onShopNow:m,onAddToCart:x,onProductImageClick:S,className:v,children:R,...g},y)=>{const b=p.useMemo(()=>({theme:i,copy:n,showTags:a,showOriginalPrice:d,classNames:e,secondaryButtonText:s,secondaryButtonFun:C,primaryButtonText:f,primaryButtonFun:h,onLearnMore:u,onShopNow:m,onAddToCart:x,onProductImageClick:S}),[i,n,a,d,e,s,C,f,h,u,m,x,S]);return l(T.Provider,{value:b,children:V("div",{ref:y,className:t("text-info-primary w-full",{"aiui-dark":i==="dark"},v,e?.root),...g,children:[(o||r)&&V("div",{className:t("mb-6",e?.header),children:[o&&l(M,{as:"h2",size:4,className:t("text-info-primary mb-2",e?.title),html:o}),r&&l(P,{as:"p",size:3,className:t("",e?.subtitle),html:r})]}),R]})})});c.displayName="CreditsShelf.Root";export{c as CreditsShelfRoot};
+//# sourceMappingURL=Root.js.map

package/dist/esm/biz-components/CreditsShelf/Root.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CreditsShelf/Root.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { CreditsShelfContext, type CreditsShelfContextValue } from './context.js'\n\nexport interface CreditsShelfRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** \u526F\u6807\u9898 */\n  subtitle?: string\n  /** \u4E3B\u9898 */\n  theme?: 'light' | 'dark'\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CreditsShelfContextValue['copy']\n  /** \u662F\u5426\u5C55\u793A\u6807\u7B7E */\n  showTags?: boolean\n  /** \u662F\u5426\u5C55\u793A\u539F\u4EF7 */\n  showOriginalPrice?: boolean\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: CreditsShelfContextValue['classNames']\n  /** \u6B21\u8981\u6309\u94AE\u6587\u6848 */\n  secondaryButtonText?: string\n  /** \u6B21\u8981\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: CreditsShelfContextValue['secondaryButtonFun']\n  /** \u4E3B\u8981\u6309\u94AE\u6587\u6848 */\n  primaryButtonText?: string\n  /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: CreditsShelfContextValue['primaryButtonFun']\n  /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: CreditsShelfContextValue['onLearnMore']\n  /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: CreditsShelfContextValue['onShopNow']\n  /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: CreditsShelfContextValue['onAddToCart']\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: CreditsShelfContextValue['onProductImageClick']\n  /** \u5B50\u7EC4\u4EF6 */\n  children: React.ReactNode\n}\n\n/**\n * CreditsShelf Root \u7EC4\u4EF6\n *\n * @description \u7EC4\u5408\u5F0F\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u63D0\u4F9B Context \u914D\u7F6E\n */\nconst CreditsShelfRoot = React.forwardRef<HTMLDivElement, CreditsShelfRootProps>(\n  (\n    {\n      title,\n      subtitle,\n      theme = 'light',\n      copy,\n      showTags,\n      showOriginalPrice,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      onProductImageClick,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const contextValue = React.useMemo<CreditsShelfContextValue>(\n      () => ({\n        theme,\n        copy,\n        showTags,\n        showOriginalPrice,\n        classNames,\n        secondaryButtonText,\n        secondaryButtonFun,\n        primaryButtonText,\n        primaryButtonFun,\n        onLearnMore,\n        onShopNow,\n        onAddToCart,\n        onProductImageClick,\n      }),\n      [\n        theme,\n        copy,\n        showTags,\n        showOriginalPrice,\n        classNames,\n        secondaryButtonText,\n        secondaryButtonFun,\n        primaryButtonText,\n        primaryButtonFun,\n        onLearnMore,\n        onShopNow,\n        onAddToCart,\n        onProductImageClick,\n      ]\n    )\n\n    return (\n      <CreditsShelfContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'text-info-primary w-full',\n            {\n              'aiui-dark': theme === 'dark',\n            },\n            className,\n            classNames?.root\n          )}\n          {...props}\n        >\n          {/* \u6807\u9898\u533A\u57DF */}\n          {(title || subtitle) && (\n            <div className={cn('mb-6', classNames?.header)}>\n              {title && (\n                <Heading as=\"h2\" size={4} className={cn('text-info-primary mb-2', classNames?.title)} html={title} />\n              )}\n              {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n            </div>\n          )}\n\n          {children}\n        </div>\n      </CreditsShelfContext.Provider>\n    )\n  }\n)\n\nCreditsShelfRoot.displayName = 'CreditsShelf.Root'\n\nexport { CreditsShelfRoot }\n"],
+  "mappings": "aAwHY,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAtHZ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,uBAAAC,MAA0D,eA0CnE,MAAMC,EAAmBL,EAAM,WAC7B,CACE,CACE,MAAAM,EACA,SAAAC,EACA,MAAAC,EAAQ,QACR,KAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAezB,EAAM,QACzB,KAAO,CACL,MAAAQ,EACA,KAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,UAAAC,EACA,YAAAC,EACA,oBAAAC,CACF,GACA,CACEZ,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,CACF,CACF,EAEA,OACEtB,EAACM,EAAoB,SAApB,CAA6B,MAAOqB,EACnC,SAAA1B,EAAC,OACC,IAAKyB,EACL,UAAWvB,EACT,2BACA,CACE,YAAaO,IAAU,MACzB,EACAa,EACAT,GAAY,IACd,EACC,GAAGW,EAGF,WAAAjB,GAASC,IACTR,EAAC,OAAI,UAAWE,EAAG,OAAQW,GAAY,MAAM,EAC1C,UAAAN,GACCR,EAACI,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWD,EAAG,yBAA0BW,GAAY,KAAK,EAAG,KAAMN,EAAO,EAEpGC,GAAYT,EAACK,EAAA,CAAK,GAAG,IAAI,KAAM,EAAG,UAAWF,EAAG,GAAIW,GAAY,QAAQ,EAAG,KAAML,EAAU,GAC9F,EAGDe,GACH,EACF,CAEJ,CACF,EAEAjB,EAAiB,YAAc",
+  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Text", "CreditsShelfContext", "CreditsShelfRoot", "title", "subtitle", "theme", "copy", "showTags", "showOriginalPrice", "classNames", "secondaryButtonText", "secondaryButtonFun", "primaryButtonText", "primaryButtonFun", "onLearnMore", "onShopNow", "onAddToCart", "onProductImageClick", "className", "children", "props", "ref", "contextValue"]
+}

package/dist/esm/biz-components/CreditsShelf/context.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { ButtonFunctionType, CopyConfig, CreditsShelfSemanticName, CreditsProductCardData } from './types.js';
+/**
+ * CreditsShelf Context 值类型
+ */
+export interface CreditsShelfContextValue {
+    /** 主题 */
+    theme?: 'light' | 'dark';
+    /** 文案配置 */
+    copy?: CopyConfig;
+    /** 是否展示标签 */
+    showTags?: boolean;
+    /** 是否展示原价 */
+    showOriginalPrice?: boolean;
+    /** 语义化类名 */
+    classNames?: Partial<Record<CreditsShelfSemanticName, string>>;
+    /** 次要按钮文案 */
+    secondaryButtonText?: string;
+    /** 次要按钮功能 */
+    secondaryButtonFun?: ButtonFunctionType;
+    /** 主要按钮文案 */
+    primaryButtonText?: string;
+    /** 主要按钮功能 */
+    primaryButtonFun?: ButtonFunctionType;
+    /** 了解更多回调 */
+    onLearnMore?: (product: CreditsProductCardData) => void;
+    /** 立即购买回调 */
+    onShopNow?: (product: CreditsProductCardData) => void;
+    /** 加入购物车回调 */
+    onAddToCart?: (product: CreditsProductCardData) => void;
+    /** 产品图片点击回调 */
+    onProductImageClick?: (product: CreditsProductCardData) => void;
+}
+declare const CreditsShelfContext: React.Context<CreditsShelfContextValue | null>;
+/**
+ * 获取 CreditsShelf Context
+ * @returns Context 值，如果在 Root 外使用则返回 null
+ */
+export declare function useCreditsShelfContext(): CreditsShelfContextValue | null;
+export { CreditsShelfContext };

package/dist/esm/biz-components/CreditsShelf/context.js

@@ -0,0 +1,2 @@
+"use client";import*as t from"react";const e=t.createContext(null);function o(){return t.useContext(e)}export{e as CreditsShelfContext,o as useCreditsShelfContext};
+//# sourceMappingURL=context.js.map

package/dist/esm/biz-components/CreditsShelf/context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CreditsShelf/context.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { ButtonFunctionType, CopyConfig, CreditsShelfSemanticName, CreditsProductCardData } from './types.js'\n\n/**\n * CreditsShelf Context \u503C\u7C7B\u578B\n */\nexport interface CreditsShelfContextValue {\n  /** \u4E3B\u9898 */\n  theme?: 'light' | 'dark'\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CopyConfig\n  /** \u662F\u5426\u5C55\u793A\u6807\u7B7E */\n  showTags?: boolean\n  /** \u662F\u5426\u5C55\u793A\u539F\u4EF7 */\n  showOriginalPrice?: boolean\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<CreditsShelfSemanticName, string>>\n  /** \u6B21\u8981\u6309\u94AE\u6587\u6848 */\n  secondaryButtonText?: string\n  /** \u6B21\u8981\u6309\u94AE\u529F\u80FD */\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u4E3B\u8981\u6309\u94AE\u6587\u6848 */\n  primaryButtonText?: string\n  /** \u4E3B\u8981\u6309\u94AE\u529F\u80FD */\n  primaryButtonFun?: ButtonFunctionType\n  /** \u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: CreditsProductCardData) => void\n  /** \u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: CreditsProductCardData) => void\n  /** \u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: CreditsProductCardData) => void\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: (product: CreditsProductCardData) => void\n}\n\nconst CreditsShelfContext = React.createContext<CreditsShelfContextValue | null>(null)\n\n/**\n * \u83B7\u53D6 CreditsShelf Context\n * @returns Context \u503C\uFF0C\u5982\u679C\u5728 Root \u5916\u4F7F\u7528\u5219\u8FD4\u56DE null\n */\nexport function useCreditsShelfContext() {\n  return React.useContext(CreditsShelfContext)\n}\n\nexport { CreditsShelfContext }\n"],
+  "mappings": "aAEA,UAAYA,MAAW,QAmCvB,MAAMC,EAAsBD,EAAM,cAA+C,IAAI,EAM9E,SAASE,GAAyB,CACvC,OAAOF,EAAM,WAAWC,CAAmB,CAC7C",
+  "names": ["React", "CreditsShelfContext", "useCreditsShelfContext"]
+}

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

@@ -0,0 +1,15 @@
+import { CreditsShelfRoot } from './Root.js';
+import { CreditsShelfProductsList } from './ProductsList.js';
+import { CreditsProductCard } from './ProductCard.js';
+export type { CreditsShelfSemanticName, CreditsProductCardData, CopyConfig, ButtonFunctionType, CreditsShelfLayoutMode, } from './types.js';
+export type { CreditsShelfRootProps } from './Root.js';
+export type { CreditsShelfProductsListProps } from './ProductsList.js';
+export type { CreditsProductCardProps } from './ProductCard.js';
+export type { CreditsShelfContextValue } from './context.js';
+export { CreditsShelfRoot, CreditsShelfProductsList, CreditsProductCard };
+declare const CreditsShelf: {
+    Root: import("react").ForwardRefExoticComponent<import("./Root.js").CreditsShelfRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    ProductsList: import("react").ForwardRefExoticComponent<import("./ProductsList.js").CreditsShelfProductsListProps & import("react").RefAttributes<HTMLDivElement>>;
+    ProductCard: import("react").ForwardRefExoticComponent<import("./ProductCard.js").CreditsProductCardProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default CreditsShelf;

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

@@ -0,0 +1,2 @@
+"use client";import{CreditsShelfRoot as t}from"./Root.js";import{CreditsShelfProductsList as o}from"./ProductsList.js";import{CreditsProductCard as r}from"./ProductCard.js";const e={Root:t,ProductsList:o,ProductCard:r};var p=e;export{r as CreditsProductCard,o as CreditsShelfProductsList,t as CreditsShelfRoot,p as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CreditsShelf/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport { CreditsShelfRoot } from './Root.js'\nimport { CreditsShelfProductsList } from './ProductsList.js'\nimport { CreditsProductCard } from './ProductCard.js'\n\n// \u5BFC\u51FA\u7C7B\u578B\nexport type {\n  CreditsShelfSemanticName,\n  CreditsProductCardData,\n  CopyConfig,\n  ButtonFunctionType,\n  CreditsShelfLayoutMode,\n} from './types.js'\n\nexport type { CreditsShelfRootProps } from './Root.js'\nexport type { CreditsShelfProductsListProps } from './ProductsList.js'\nexport type { CreditsProductCardProps } from './ProductCard.js'\nexport type { CreditsShelfContextValue } from './context.js'\n\n// \u5BFC\u51FA\u5B50\u7EC4\u4EF6\nexport { CreditsShelfRoot, CreditsShelfProductsList, CreditsProductCard }\n\n// \u7EC4\u5408\u5F0F\u7EC4\u4EF6\nconst CreditsShelf = {\n  Root: CreditsShelfRoot,\n  ProductsList: CreditsShelfProductsList,\n  ProductCard: CreditsProductCard,\n}\n\nexport default CreditsShelf\n"],
+  "mappings": "aAEA,OAAS,oBAAAA,MAAwB,YACjC,OAAS,4BAAAC,MAAgC,oBACzC,OAAS,sBAAAC,MAA0B,mBAoBnC,MAAMC,EAAe,CACnB,KAAMH,EACN,aAAcC,EACd,YAAaC,CACf,EAEA,IAAOE,EAAQD",
+  "names": ["CreditsShelfRoot", "CreditsShelfProductsList", "CreditsProductCard", "CreditsShelf", "CreditsShelf_default"]
+}

package/dist/esm/biz-components/CreditsShelf/types.d.ts

@@ -0,0 +1,73 @@
+import type { BadgeProps } from '../../components/badge.js';
+/**
+ * 按钮功能类型
+ */
+export type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore';
+/**
+ * CreditShelf 文案配置接口
+ */
+export interface CopyConfig {
+    /** 积分兑换标签文本 */
+    redeemLabel?: string;
+    /** 积分抵现提示文本模板，支持 {amount} 占位符 */
+    creditsSavingLabel?: string;
+    /** 上一页滑动按钮的无障碍标签 */
+    previousSlideLabel?: string;
+    /** 下一页滑动按钮的无障碍标签 */
+    nextSlideLabel?: string;
+    /** 售罄标签文本 */
+    outOfStockLabel?: string;
+}
+/**
+ * 语义化类名
+ */
+export type CreditsShelfSemanticName = 'root' | 'header' | 'title' | 'subtitle' | 'description' | 'productCard' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton' | 'creditTip';
+/**
+ * 组件布局模式
+ */
+export type CreditsShelfLayoutMode = 'flex' | 'horizontal';
+/**
+ * 基础产品数据接口（来自外部数据源）
+ */
+export interface BaseProductData {
+    sku: string;
+    name: string;
+    image: string;
+    value: string;
+    handle: string;
+    shopify_id: string;
+    custom_name?: string;
+    custom_description?: string;
+}
+/**
+ * Shopify 变体数据接口
+ */
+export interface VariantData {
+    /** 产品描述 */
+    description?: string;
+    /** 变体id */
+    variantId: string;
+    /** 产品链接, 点击图片的时候跳转到该链接 */
+    listingLink: string;
+    /** 原价 */
+    originalPrice?: string;
+    /** 现价 */
+    price: string;
+    /** 价格上面展示的标签文本（如 Redeem Credits） */
+    priceLabel?: string;
+    /** 是否可售 */
+    availableForSale: boolean;
+    /** 积分抵现金额（用于底部提示） */
+    creditSavingAmount?: string;
+    /** tags 列表(会员价，折扣，new, hot等标签信息) */
+    tags: Array<{
+        label: string;
+        variant: BadgeProps['variant'];
+        promotionalType?: BadgeProps['promotionalType'];
+    } | React.ReactNode>;
+}
+/**
+ * 完整的产品卡片数据接口
+ */
+export interface CreditsProductCardData extends BaseProductData, VariantData {
+}

package/dist/esm/biz-components/CreditsShelf/types.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/CreditsShelf/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

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

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import G,{useImperativeHandle as re,useRef as x,useState as le,useEffect as se}from"react";import y from"gsap";import{ScrollTrigger as v}from"gsap/dist/ScrollTrigger";import{useMediaQuery as q}from"react-responsive";import{useInView as ne}from"react-intersection-observer";import ie from"../../helpers/ScrollLoadVideo.js";import{Button as C,Heading as pe,Picture as A,Text as V,Countdown as ce}from"../../components/index.js";import{cn as l}from"../../helpers/index.js";import{withLayout as ue}from"../../shared/Styles.js";import{useExposure as me}from"../../hooks/useExposure.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";import{sizeMap as de}from"../../components/button.js";import{VideoModal as ge}from"../VideoModal/index.js";const s="image",n="hero_banner",be=({size:m="base"})=>{const{width:w,height:f}=de[m];return e("svg",{width:w,height:f,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{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",fill:"currentcolor"})})},Q=G.forwardRef(({data:m,className:w,classNames:f={},onSecondaryClick:Z,onPrimaryClick:J},K)=>{const{label:I,title:a,subtitle:o,endDate:R,endDate_tz:O,dateFormat:W,pcImage:k,padImage:S,mobileImage:h,pcVideo:X,padVideo:Y,mobileVideo:M,isShowVideo:ee,primaryButton:i,secondaryButton:t,theme:te="light",size:N="default",titleSize:$,caption:B=[],blockLink:L,iconArray:ae}=m,D=q({query:"(max-width: 768px)"}),E=q({query:"(max-width: 1024px)"}),[U,_]=le(!1),{ref:oe,inView:j}=ne(),z=x(null),H=x(null),T=x(null),d=x(null),p=x(null);return me(p,{componentType:s,componentName:n,componentTitle:a,componentDescription:o}),re(K,()=>p.current),se(()=>{y.registerPlugin(v);function r(){if(!d.current)return;const u=p.current?.clientHeight||100;window.innerHeight<=u?z.current=v.create({trigger:p.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const b=g.progress*40-20;y.set(d.current,{yPercent:b})}}):(T.current=v.create({trigger:p.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:g=>{const b=g.progress*20-20;y.set(d.current,{yPercent:b})}}),H.current=v.create({trigger:p.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:g=>{const b=g.progress*20;y.set(d.current,{yPercent:b})}}))}return j&&r(),()=>{z.current&&z.current.kill(),T.current&&T.current.kill(),H.current&&H.current.kill()}},[j]),e("div",{ref:oe,"data-ui-component-id":"HeroBanner",children:c("div",{ref:p,className:l(te==="dark"?"aiui-dark":"","text-info-primary relative  w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":N==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":N==="sm"},w),children:[L&&e("a",{className:"absolute inset-0 z-10",href:P(L,`${s}_${n}`),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${a}#${o}`,tabIndex:-1,"aria-hidden":"true","aria-label":a}),e("div",{ref:d,className:l("absolute left-0 top-0 size-full"),children:ee?e(ie,{poster:D?h?.url:E?S?.url||h?.url:k?.url,src:D?M?.url:E?Y?.url||M?.url:X?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${S?.url??(h?.url||"")} 1024, ${h?.url||""} 767`})}),c("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[c("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[I&&e(V,{size:2,as:"p",className:l("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:I}),a&&e(pe,{as:$==="4"?"h1":"h2",html:a,className:l("hero-banner-title",f.title),size:$?Number($||"5"):N==="sm"?4:5}),o&&e(V,{as:"p",size:2,className:l("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:o}),R&&e("div",{className:"mt-3",children:e(ce,{endDate:R,endDate_tz:O,dateFormat:W})})]}),c("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[t?.isShowPlayVideoButton&&t?.playVideoButtonText?c(C,{onClick:()=>_(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${a}#${o}#${t?.playVideoButtonText}`,children:[t?.playVideoButtonText," ",e(be,{size:"lg"})]}):t?.text?c(C,{"aria-label":a??o,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:t?.isCustomSecondaryButton?"button":"a",href:P(t?.link,`${s}_${n}`),onClick:r=>t?.isCustomSecondaryButton&&Z?.(m,r),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${a}#${o}#${t?.text}`,children:[t?.text,e("span",{className:"sr-only",children:a??o})]}):null,i&&i.text&&e(C,{"aria-label":a??o,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:i?.isCustomPrimaryButton?"button":"a",href:P(i.link,`${s}_${n}`),onClick:r=>i?.isCustomPrimaryButton&&J?.(m,r),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${a}#${o}#${i?.text}`,children:i.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:ae?.map((r,u)=>e("div",{className:"h-12",children:e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:r?.pcImage?.alt||"",source:r?.pcImage?.url})},u))})]}),B.length>0&&e("div",{className:l("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",f.captionGroup),children:B.map((r,u)=>c(G.Fragment,{children:[e(V,{size:2,className:l("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:r.title}),u<B.length-1&&e("div",{className:l("bg-info-primary w-px")})]},u))}),U&&e(ge,{visible:U,videoUrl:t?.videoUrl?.url,youTubeId:t?.youtubeId,onCloseModal:()=>_(!1)})]})})});Q.displayName="HeroBanner";var Ve=ue(Q);export{Ve as default};
+"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import G,{useImperativeHandle as re,useRef as b,useState as le,useEffect as se}from"react";import h from"gsap";import{ScrollTrigger as y}from"gsap/dist/ScrollTrigger";import{useMediaQuery as q}from"react-responsive";import{useInView as ne}from"react-intersection-observer";import ie from"../../helpers/ScrollLoadVideo.js";import{Button as C,Heading as pe,Picture as A,Text as I,Countdown as ce}from"../../components/index.js";import{cn as l}from"../../helpers/index.js";import{withLayout as ue}from"../../shared/Styles.js";import{useExposure as me}from"../../hooks/useExposure.js";import{trackUrlRef as V}from"../../shared/trackUrlRef.js";import{sizeMap as de}from"../../components/button.js";import{VideoModal as ge}from"../VideoModal/index.js";const s="image",n="hero_banner",be=({size:u="base"})=>{const{width:v,height:x}=de[u];return e("svg",{width:v,height:x,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{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",fill:"currentcolor"})})},Q=G.forwardRef(({data:u,className:v,classNames:x={},onSecondaryClick:Z,onPrimaryClick:J},K)=>{const{label:P,title:o,subtitle:r,endDate:R,endDate_tz:O,dateFormat:W,pcImage:w,padImage:S,mobileImage:f,pcVideo:X,padVideo:Y,mobileVideo:M,isShowVideo:ee,primaryButton:i,secondaryButton:a,theme:te="light",size:k="default",titleSize:N,caption:$=[],blockLink:L,iconArray:ae}=u,D=q({query:"(max-width: 768px)"}),E=q({query:"(max-width: 1024px)"}),[U,_]=le(!1),{ref:oe,inView:j}=ne(),B=b(null),z=b(null),H=b(null),m=b(null),p=b(null);return me(p,{componentType:s,componentName:n,componentTitle:o,componentDescription:r}),re(K,()=>p.current),se(()=>{h.registerPlugin(y);function t(){if(!m.current)return;const T=p.current?.clientHeight||100;window.innerHeight<=T?B.current=y.create({trigger:p.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:d=>{const g=d.progress*40-20;h.set(m.current,{yPercent:g})}}):(H.current=y.create({trigger:p.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:d=>{const g=d.progress*20-20;h.set(m.current,{yPercent:g})}}),z.current=y.create({trigger:p.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:d=>{const g=d.progress*20;h.set(m.current,{yPercent:g})}}))}return j&&t(),()=>{B.current&&B.current.kill(),H.current&&H.current.kill(),z.current&&z.current.kill()}},[j]),e("div",{ref:oe,"data-ui-component-id":"HeroBanner",children:c("div",{ref:p,className:l(te==="dark"?"aiui-dark":"","text-info-primary relative  w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":k==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":k==="sm"},v),children:[L&&e("a",{className:"absolute inset-0 z-10",href:V(L,`${s}_${n}`),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${o}#${r}`,tabIndex:-1,"aria-hidden":"true","aria-label":o}),e("div",{ref:m,className:l("absolute left-0 top-0 size-full"),children:ee?e(ie,{poster:D?f?.url:E?S?.url||f?.url:w?.url,src:D?M?.url:E?Y?.url||M?.url:X?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:w?.alt||"",source:`${w?.url||""} , ${S?.url??(f?.url||"")} 1024, ${f?.url||""} 767`})}),c("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[c("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[P&&e(I,{size:2,as:"p",className:l("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:P}),o&&e(pe,{as:N==="4"?"h1":"h2",html:o,className:l("hero-banner-title",x.title),size:N?Number(N||"5"):k==="sm"?4:5}),r&&e(I,{as:"p",size:2,className:l("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:r}),R&&e("div",{className:"mt-3",children:e(ce,{endDate:R,endDate_tz:O,dateFormat:W})})]}),c("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[a?.isShowPlayVideoButton&&a?.playVideoButtonText?c(C,{onClick:()=>_(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${o}#${r}#${a?.playVideoButtonText}`,children:[a?.playVideoButtonText," ",e(be,{size:"lg"})]}):a?.text?c(C,{"aria-label":o??r,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:a?.isCustomSecondaryButton?"button":"a",href:V(a?.link,`${s}_${n}`),onClick:t=>a?.isCustomSecondaryButton&&Z?.(u,t),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${o}#${r}#${a?.text}`,children:[a?.text,e("span",{className:"sr-only",children:o??r})]}):null,i&&i.text&&e(C,{"aria-label":o??r,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:i?.isCustomPrimaryButton?"button":"a",href:V(i.link,`${s}_${n}`),onClick:t=>i?.isCustomPrimaryButton&&J?.(u,t),"data-headless-type-name":`${s}#${n}`,"data-headless-title-desc-button":`${o}#${r}#${i?.text}`,children:i.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:ae?.map(t=>e("div",{className:"h-12",children:e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:t?.pcImage?.alt||"",source:t?.pcImage?.url})},t?.pcImage?.url||t?.pcImage?.alt))})]}),$.length>0&&e("div",{className:l("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",x.captionGroup),children:$.map((t,T)=>c(G.Fragment,{children:[e(I,{size:2,className:l("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:t.title}),T<$.length-1&&e("div",{className:l("bg-info-primary w-px")})]},t.title))}),U&&e(ge,{visible:U,videoUrl:a?.videoUrl?.url,youTubeId:a?.youtubeId,onCloseModal:()=>_(!1)})]})})});Q.displayName="HeroBanner";var Ie=ue(Q);export{Ie as default};
 //# sourceMappingURL=HeroBanner.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'subtitle'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n  | 'captionGroup'\n\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 HeroBanner = React.forwardRef<\n  HTMLDivElement,\n  HeroBannerProps & {\n    classNames?: Partial<Record<HeroBannerSemanticName, string>>\n  }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    titleSize,\n    caption = [],\n    blockLink,\n    iconArray,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          'text-info-primary relative  w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n              size === 'default',\n            'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n              size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n            {label && (\n              <Text\n                size={2}\n                as=\"p\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && (\n              <Heading\n                as={titleSize === '4' ? 'h1' : 'h2'}\n                html={title}\n                className={cn('hero-banner-title', classNames.title)}\n                size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n              />\n            )}\n            {subtitle && (\n              <Text\n                as=\"p\"\n                size={2}\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className=\"hero-banner-icon-group flex items-center gap-2\">\n            {iconArray?.map((icon, index) => (\n              <div key={index} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div\n            className={cn(\n              'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n              classNames.captionGroup\n            )}\n          >\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "e", "icon", "index", "c", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nexport type HeroBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'subtitle'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n  | 'captionGroup'\n\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 HeroBanner = React.forwardRef<\n  HTMLDivElement,\n  HeroBannerProps & {\n    classNames?: Partial<Record<HeroBannerSemanticName, string>>\n  }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick }, ref) => {\n  const {\n    label,\n    title,\n    subtitle,\n    endDate,\n    endDate_tz,\n    dateFormat,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    titleSize,\n    caption = [],\n    blockLink,\n    iconArray,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          'text-info-primary relative  w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n              size === 'default',\n            'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n              size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${subtitle}`}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n            {label && (\n              <Text\n                size={2}\n                as=\"p\"\n                className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n                html={label}\n              />\n            )}\n            {title && (\n              <Heading\n                as={titleSize === '4' ? 'h1' : 'h2'}\n                html={title}\n                className={cn('hero-banner-title', classNames.title)}\n                size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n              />\n            )}\n            {subtitle && (\n              <Text\n                as=\"p\"\n                size={2}\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n            {endDate && (\n              <div className=\"mt-3\">\n                <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n              </div>\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n                onClick={e => secondaryButton?.isCustomSecondaryButton && onSecondaryClick?.(data, e)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                onClick={e => primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n          <div className=\"hero-banner-icon-group flex items-center gap-2\">\n            {iconArray?.map(icon => (\n              <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n                <Picture\n                  className=\"laptop:w-full h-full\"\n                  imgClassName=\"h-full object-cover\"\n                  loading=\"eager\"\n                  alt={icon?.pcImage?.alt || ''}\n                  source={icon?.pcImage?.url}\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div\n            className={cn(\n              'hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]',\n              classNames.captionGroup\n            )}\n          >\n            {caption.map((c, index) => (\n              <React.Fragment key={c.title}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "e", "icon", "c", "index", "HeroBanner_default"]
 }

package/dist/esm/biz-components/ImageOverlayShelf/ProductCard.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as E,jsx as o,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{cn as t}from"../../helpers/utils.js";import _ from"../../components/badge.js";import{Text as z}from"../../components/text.js";import u from"../../components/button.js";import R from"../../components/picture.js";import{Heading as D}from"../../components/heading.js";const I={center:"object-center",top:"object-top",bottom:"object-bottom",left:"object-left",right:"object-right","top-left":"object-left-top","top-right":"object-right-top","bottom-left":"object-left-bottom","bottom-right":"object-right-bottom"},m=r.forwardRef(({product:e,className:h,showTags:k=!0,showOriginalPrice:j=!0,onLearnMore:w,onShopNow:P,onAddToCart:C,onProductImageClick:c,classNames:i,secondaryButtonText:b,secondaryButtonFun:f,primaryButtonText:p,primaryButtonFun:g,copy:L},S)=>{const[O,B]=r.useState(!1),[N,T]=r.useState(!1),s=!e.availableForSale,x=async(a,l)=>{if(!a)return;const y=l==="primary"?B:T;y(!0);try{switch(a){case"buyNow":await P?.(e);break;case"addCart":await C?.(e);break;case"learnMore":await w?.(e);break;default:break}}finally{y(!1)}},d=e.custom_name||e.name,v=e.custom_description||e.description,M=e.custom_theme??"dark";return o("div",{ref:S,className:t("rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]","min-w-[296px] max-w-[824px]",{"aiui-dark":M==="dark"},h,i?.productCard),children:n("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[o("a",{onClick:()=>c?.(e),...!c&&e.listingLink&&{href:e.listingLink},rel:"noreferrer",className:t("absolute inset-0",i?.productImage),children:o(R,{alt:e.name,source:e.custom_image??e.image,className:t("rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full"),imgClassName:t("object-cover",I[e.imageObjectPosition??"center"])})}),n("div",{className:t("desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4",i?.productContent),children:[k&&e.tags?.length?o("div",{className:t("mb-2 box-border flex flex-wrap gap-1 overflow-visible",i?.tagsContainer),children:e.tags.map((a,l)=>a.label?o(_,{size:"sm",variant:a.variant||"outline",promotionalType:a.promotionalType,children:a.label},l):r.isValidElement(a)&&o(r.Fragment,{children:"123"},l))}):null,d?o(D,{as:"h3",title:d,html:d,className:t("lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold",i?.productTitle)}):null,v?o(z,{size:2,html:v,className:t("lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold",i?.productDescription)}):null,o("div",{className:t("mb-1 mt-4 flex items-center",i?.priceContainer),children:s?o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",i?.productPrice),children:L?.outOfStockLabel??"Sold Out"}):n(E,{children:[o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",i?.productPrice),children:e.price}),j&&e.originalPrice&&o("div",{className:t("tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",i?.originalPrice),children:e.originalPrice})]})}),n("div",{className:t("lg-desktop:gap-3 pointer-events-auto flex items-center gap-2",i?.buttonGroup),children:[b&&o(u,{variant:"secondary",onClick:()=>x(f,"secondary"),disabled:s&&f!=="learnMore",loading:N,className:t(i?.secondaryButton),children:b}),p&&o(u,{variant:"primary",onClick:()=>x(g,"primary"),disabled:s&&g!=="learnMore",loading:O,className:t(i?.primaryButton),children:p})]})]})]})})});m.displayName="ImageOverlayShelf.ProductCard";var J=m;export{m as ProductCard,J as default};
+"use client";import{Fragment as E,jsx as o,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{cn as t}from"../../helpers/utils.js";import _ from"../../components/badge.js";import{Text as z}from"../../components/text.js";import y from"../../components/button.js";import R from"../../components/picture.js";import{Heading as D}from"../../components/heading.js";const I={center:"object-center",top:"object-top",bottom:"object-bottom",left:"object-left",right:"object-right","top-left":"object-left-top","top-right":"object-right-top","bottom-left":"object-left-bottom","bottom-right":"object-right-bottom"},m=r.forwardRef(({product:e,className:h,showTags:k=!0,showOriginalPrice:j=!0,onLearnMore:w,onShopNow:P,onAddToCart:C,onProductImageClick:c,classNames:i,secondaryButtonText:b,secondaryButtonFun:f,primaryButtonText:p,primaryButtonFun:g,copy:L},S)=>{const[O,B]=r.useState(!1),[N,T]=r.useState(!1),s=!e.availableForSale,x=async(a,l)=>{if(!a)return;const u=l==="primary"?B:T;u(!0);try{switch(a){case"buyNow":await P?.(e);break;case"addCart":await C?.(e);break;case"learnMore":await w?.(e);break;default:break}}finally{u(!1)}},d=e.custom_name||e.name,v=e.custom_description||e.description,M=e.custom_theme??"dark";return o("div",{ref:S,className:t("rounded-box relative box-border w-full cursor-pointer overflow-hidden duration-300","desktop:h-[384px] lg-desktop:h-[480px] h-[360px]","tablet:min-w-[auto] min-w-[296px] max-w-[824px]",{"aiui-dark":M==="dark"},h,i?.productCard),children:n("div",{className:"box-border flex h-full flex-col justify-between overflow-hidden",children:[o("a",{onClick:()=>c?.(e),...!c&&e.listingLink&&{href:e.listingLink},rel:"noreferrer",className:t("absolute inset-0",i?.productImage),children:o(R,{alt:e.name,source:e.custom_image??e.image,className:t("rounded-box h-full overflow-hidden object-cover transition-all duration-300 [&_img]:size-full"),imgClassName:t("object-cover",I[e.imageObjectPosition??"center"])})}),n("div",{className:t("desktop:p-6 collection-shelves-product-content pointer-events-none z-10 box-border flex flex-1 flex-col justify-end overflow-hidden p-4",i?.productContent),children:[k&&e.tags?.length?o("div",{className:t("mb-2 box-border flex flex-wrap gap-1 overflow-visible",i?.tagsContainer),children:e.tags.map((a,l)=>a.label?o(_,{size:"sm",variant:a.variant||"outline",promotionalType:a.promotionalType,children:a.label},l):r.isValidElement(a)&&o(r.Fragment,{children:"123"},l))}):null,d?o(D,{as:"h3",title:d,html:d,className:t("lg-desktop:text-2xl lg-desktop:leading-7 tablet:text-xl text-info-primary tablet:leading-6 line-clamp-2 text-base font-bold",i?.productTitle)}):null,v?o(z,{size:2,html:v,className:t("lg-desktop:text-lg desktop:text-base text-info-primary line-clamp-1 text-sm font-bold",i?.productDescription)}):null,o("div",{className:t("mb-1 mt-4 flex items-center",i?.priceContainer),children:s?o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",i?.productPrice),children:L?.outOfStockLabel??"Sold Out"}):n(E,{children:[o("div",{className:t("tablet:text-2xl text-info-primary text-xl font-bold",i?.productPrice),children:e.price}),j&&e.originalPrice&&o("div",{className:t("tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",i?.originalPrice),children:e.originalPrice})]})}),n("div",{className:t("lg-desktop:gap-3 pointer-events-auto flex items-center gap-2",i?.buttonGroup),children:[b&&o(y,{variant:"secondary",onClick:()=>x(f,"secondary"),disabled:s&&f!=="learnMore",loading:N,className:t(i?.secondaryButton),children:b}),p&&o(y,{variant:"primary",onClick:()=>x(g,"primary"),disabled:s&&g!=="learnMore",loading:O,className:t(i?.primaryButton),children:p})]})]})]})})});m.displayName="ImageOverlayShelf.ProductCard";var J=m;export{m as ProductCard,J as default};
 //# sourceMappingURL=ProductCard.js.map