@anker-in/headless-ui 1.1.32 → 1.1.34-alpha.1768461697532

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { Media } from '../../types/props.js';
+export type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard';
+/**
+ * 状态化图标配置
+ */
+export interface StateIcon {
+    /** 激活状态的图标 */
+    active: Media;
+    /** 非激活状态的图标 */
+    inactive: Media;
+}
+/**
+ * 活动日程项数据接口
+ */
+export interface EventScheduleItem {
+    /** 标题 */
+    title: string;
+    /** 开始日期（ISO 8601 格式或任何 dayjs 支持的格式，如 '2024-12-01'） */
+    startDate: string;
+    /** 结束日期（ISO 8601 格式或任何 dayjs 支持的格式，如 '2024-12-31'） */
+    endDate: string;
+    /**
+     * 卡片背景图标配置，状态化图标（必须包含 active 和 inactive）
+     *
+     * @example
+     * icon: {
+     *   active: { url: "https://example.com/active-icon.svg", alt: "Active Icon" },
+     *   inactive: { url: "https://example.com/inactive-icon.svg", alt: "Inactive Icon" }
+     * }
+     */
+    icon?: StateIcon;
+    /** 详细信息列表 */
+    items: {
+        /** 图标 (SVG 字符串或 URL) */
+        icon?: Media;
+        /** 文本内容 */
+        label: string;
+    }[];
+}
+/**
+ * EventSchedule 业务组件数据接口
+ */
+export interface EventScheduleData {
+    /** 日程列表 */
+    scheduleList: EventScheduleItem[];
+    /** 是否显示时间轴，默认为 true */
+    showTimeline?: boolean;
+    /** 主题模式 */
+    theme?: 'light' | 'dark';
+}
+export interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: EventScheduleData;
+    classNames?: Partial<Record<EventScheduleSemanticName, string>>;
+}
+/**
+ * EventSchedule - 活动日程组件
+ *
+ * @description 显示活动日程时间轴和活动卡片列表
+ */
+declare const EventSchedule: React.ForwardRefExoticComponent<EventScheduleProps & React.RefAttributes<HTMLDivElement>>;
+export default EventSchedule;

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as a,jsxs as m}from"react/jsx-runtime";import*as r from"react";import{cn as v}from"../../helpers/index.js";import{Text as P,Picture as T,Heading as F}from"../../components/index.js";import{Swiper as y,SwiperSlide as C}from"swiper/react";import x from"dayjs";import{cva as g}from"class-variance-authority";const z=(i,t)=>{const o=x(),c=x(i).startOf("day"),s=x(t).endOf("day");return o.isAfter(c)&&o.isBefore(s)},S=i=>z(i.startDate,i.endDate),R=g("h-2 w-full  overflow-hidden",{variants:{state:{"active-light":"bg-[#F6CD4E]","inactive-light":"bg-[#EAEAEC]","active-dark":"bg-[#D79941]","inactive-dark":"bg-[#75787F]"}},defaultVariants:{state:"inactive-light"}}),j=g("size-4 rounded-full transition-colors",{variants:{state:{"active-light":"bg-[#F6CD4E]","inactive-light":"bg-[#EAEAEC]","active-dark":"bg-[#D79941]","inactive-dark":"bg-[#75787F]"}},defaultVariants:{state:"inactive-light"}}),A=g("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-[#080A0F]","inactive-light":"text-[#4A4C56]","active-dark":"text-white","inactive-dark":"text-[#8A8D92]"}},defaultVariants:{state:"inactive-light"}}),H=g("laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden",{variants:{state:{"active-light":"bg-[#F4E8BC]","inactive-light":"bg-[#EAEAEC]","active-dark":"bg-[#D79941]","inactive-dark":"bg-[#1E2024]"}},defaultVariants:{state:"inactive-light"}}),$=({active:i,theme:t="light",className:o,index:c,nodeLength:s})=>{const l=`${i?"active":"inactive"}-${t}`,n=c===0,d=c===s-1;return m("div",{className:"relative my-1 flex h-2 w-full items-center justify-center",children:[a("div",{className:v(R({state:l}),n&&"rounded-l-full",d&&"rounded-r-full",o)}),a("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",children:a("div",{className:j({state:l})})})]})},O=(i,t)=>{if(i)return t?i.active:i.inactive},q=({active:i,item:t,theme:o="light",className:c})=>{const s=r.useMemo(()=>O(t.icon,i),[t.icon,i]),l=`${i?"active":"inactive"}-${o}`;return m("div",{className:v(H({state:l}),c),children:[s&&a("div",{className:"laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]",children:a(T,{source:s.url,alt:s.alt,className:"aspect-square"})}),m("div",{className:"tablet:px-4 tablet:py-3 laptop:p-4 desktop:px-6 relative z-20 flex h-full flex-col justify-between px-6 py-4",children:[a(F,{html:t.title,className:v("desktop:text-[32px] laptop:text-[24px] line-clamp-1 text-[20px]",A({state:l}))}),a("div",{className:"flex flex-col gap-0.5",children:t.items.map((n,d)=>m("div",{className:"flex items-center gap-2",children:[n.icon&&a("div",{className:"desktop:size-6 size-5 shrink-0",children:a(T,{source:n.icon.url,alt:n.icon.alt,className:"size-full"})}),a(P,{html:n.label,className:v("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]",A({state:l}))})]},d))})]})]})},I=r.forwardRef(({classNames:i={},data:t},o)=>{const c=t.theme||"light",s=r.useRef(null),l=r.useRef(null),n=r.useRef(!1),d=r.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),f=r.useMemo(()=>t.scheduleList.findIndex(e=>S(e)),[t.scheduleList]),h=r.useCallback((e,p=!1)=>{const u=B=>{switch(B){case"mobile":return{slidesPerView:1.17};case"tablet":return e===2?{slidesPerView:2}:{slidesPerView:2.4};case"laptop":return e===2?{}:e===4?{slidesPerView:3.2}:{slidesPerView:e};case"desktop":return e===2?{slidesPerView:2}:{slidesPerView:e}}},w=u("mobile"),k=u("tablet"),N=u("laptop"),E=u("desktop");return p?{0:{...w,spaceBetween:12},768:{...k,spaceBetween:e===1?12:void 0},1024:{...N,spaceBetween:16},1440:{...E,spaceBetween:16}}:{0:w,768:k,1024:N,1440:E}},[]),V=r.useMemo(()=>h(d,!0),[d,h]),D=r.useMemo(()=>h(d,!1),[d,h]),b=t.showTimeline!==!1,L=r.useCallback(e=>{n.current||!l.current||(n.current=!0,l.current.slideTo(e.activeIndex,e.params.speed),setTimeout(()=>{n.current=!1},50))},[]),M=r.useCallback(e=>{n.current||!s.current||(n.current=!0,s.current.slideTo(e.activeIndex,e.params.speed),setTimeout(()=>{n.current=!1},50))},[]);return r.useEffect(()=>{s.current&&l.current&&f>=0&&setTimeout(()=>{n.current=!0,s.current?.slideTo(f,500),l.current?.slideTo(f,500),setTimeout(()=>{n.current=!1},600)},100)},[f]),m("div",{ref:o,className:v("tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] overflow-hidden px-4",i?.root),children:[b&&a(y,{breakpoints:D,className:"h-4 w-full !overflow-visible",onSwiper:e=>{l.current=e},onSlideChange:M,children:t.scheduleList.map((e,p)=>{const u=S(e);return a(C,{className:"",children:a($,{className:i?.timeline,active:u,theme:c,index:p,nodeLength:t.scheduleList.length})},"timelineNode"+p)})}),a(y,{breakpoints:V,className:"w-full !overflow-visible",onSwiper:e=>{s.current=e},onSlideChange:L,children:t.scheduleList.map((e,p)=>{const u=S(e);return a(C,{children:a(q,{active:u,className:v(b?"laptop:mt-4 mt-2":"",i?.eventScheduleCard),item:e,theme:c})},"SwiperSlideItem"+p)})})]})});I.displayName="EventSchedule";var W=I;export{W as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/EventSchedule/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture, Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport type { Swiper as SwiperType } from 'swiper'\nimport dayjs from 'dayjs'\nimport { cva } from 'class-variance-authority'\nimport type { Media } from '../../types/props.js'\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n */\nexport interface StateIcon {\n  /** \u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807 */\n  active: Media\n  /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u56FE\u6807 */\n  inactive: Media\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n  /** \u6807\u9898 */\n  title: string\n  /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n  startDate: string\n  /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n  endDate: string\n  /**\n   * \u5361\u7247\u80CC\u666F\u56FE\u6807\u914D\u7F6E\uFF0C\u72B6\u6001\u5316\u56FE\u6807\uFF08\u5FC5\u987B\u5305\u542B active \u548C inactive\uFF09\n   *\n   * @example\n   * icon: {\n   *   active: { url: \"https://example.com/active-icon.svg\", alt: \"Active Icon\" },\n   *   inactive: { url: \"https://example.com/inactive-icon.svg\", alt: \"Inactive Icon\" }\n   * }\n   */\n  icon?: StateIcon\n  /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n  items: {\n    /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n    icon?: Media\n    /** \u6587\u672C\u5185\u5BB9 */\n    label: string\n  }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n  /** \u65E5\u7A0B\u5217\u8868 */\n  scheduleList: EventScheduleItem[]\n  /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n  showTimeline?: boolean\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: 'light' | 'dark'\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: EventScheduleData\n  classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u5224\u65AD\u5F53\u524D\u65F6\u95F4\u662F\u5426\u5728\u6307\u5B9A\u7684\u65F6\u95F4\u533A\u95F4\u5185\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u662F\u5426\u5728\u533A\u95F4\u5185\n */\nconst isInTimeRange = (startDate: string, endDate: string): boolean => {\n  const now = dayjs()\n  const start = dayjs(startDate).startOf('day')\n  const end = dayjs(endDate).endOf('day')\n  return now.isAfter(start) && now.isBefore(end)\n}\n\n/**\n * \u83B7\u53D6\u6D3B\u52A8\u9879\u7684\u6FC0\u6D3B\u72B6\u6001\n * @param item \u6D3B\u52A8\u9879\n * @returns \u662F\u5426\u6FC0\u6D3B\n */\nconst getItemActiveStatus = (item: EventScheduleItem): boolean => {\n  // \u5426\u5219\u6839\u636E\u65F6\u95F4\u533A\u95F4\u81EA\u52A8\u5224\u65AD\n  return isInTimeRange(item.startDate, item.endDate)\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u72B6\u6001\u6837\u5F0F\u53D8\u4F53\n */\nconst timelineProgressActiveVariants = cva('h-2 w-full  overflow-hidden', {\n  variants: {\n    state: {\n      'active-light': 'bg-[#F6CD4E]',\n      'inactive-light': 'bg-[#EAEAEC]',\n      'active-dark': 'bg-[#D79941]',\n      'inactive-dark': 'bg-[#75787F]',\n    },\n  },\n  defaultVariants: {\n    state: 'inactive-light',\n  },\n})\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u6FC0\u6D3B\u72B6\u6001\u6837\u5F0F\u53D8\u4F53\n */\nconst timelineNodeActiveVariants = cva('size-4 rounded-full transition-colors', {\n  variants: {\n    state: {\n      'active-light': 'bg-[#F6CD4E]',\n      'inactive-light': 'bg-[#EAEAEC]',\n      'active-dark': 'bg-[#D79941]',\n      'inactive-dark': 'bg-[#75787F]',\n    },\n  },\n  defaultVariants: {\n    state: 'inactive-light',\n  },\n})\n\n/**\n * \u5361\u7247\u6587\u672C\u6837\u5F0F\u53D8\u4F53\n */\nconst cardTextVariants = cva('font-bold leading-[1.2]', {\n  variants: {\n    state: {\n      'active-light': 'text-[#080A0F]',\n      'inactive-light': 'text-[#4A4C56]',\n      'active-dark': 'text-white',\n      'inactive-dark': 'text-[#8A8D92]',\n    },\n  },\n  defaultVariants: {\n    state: 'inactive-light',\n  },\n})\n\n/**\n * \u5361\u7247\u5BB9\u5668\u6837\u5F0F\u53D8\u4F53\n */\nconst eventScheduleCardVariants = cva(\n  'laptop:h-[160px] rounded-box relative flex h-[120px] min-w-0 flex-col justify-between gap-2 overflow-hidden',\n  {\n    variants: {\n      state: {\n        'active-light': 'bg-[#F4E8BC]',\n        'inactive-light': 'bg-[#EAEAEC]',\n        'active-dark': 'bg-[#D79941]',\n        'inactive-dark': 'bg-[#1E2024]',\n      },\n    },\n    defaultVariants: {\n      state: 'inactive-light',\n    },\n  }\n)\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6 Props\n */\ninterface TimelineNodeProps {\n  /** \u662F\u5426\u6FC0\u6D3B\u72B6\u6001 */\n  active: boolean\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: 'light' | 'dark'\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u5F53\u524D\u8282\u70B9\u7D22\u5F15 */\n  index: number\n  /** \u8282\u70B9\u603B\u6570 */\n  nodeLength: number\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active, theme = 'light', className, index, nodeLength }: TimelineNodeProps) => {\n  // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n  const state = `${active ? 'active' : 'inactive'}-${theme}` as\n    | 'active-light'\n    | 'inactive-light'\n    | 'active-dark'\n    | 'inactive-dark'\n\n  // \u5224\u65AD\u9996\u5C3E\u4F4D\u7F6E\n  const isFirst = index === 0\n  const isLast = index === nodeLength - 1\n\n  return (\n    <div className=\"relative my-1 flex h-2 w-full items-center justify-center\">\n      {/* \u8FDB\u5EA6\u6761\u80CC\u666F */}\n      <div\n        className={cn(\n          timelineProgressActiveVariants({ state }),\n          isFirst && 'rounded-l-full',\n          isLast && 'rounded-r-full',\n          className\n        )}\n      />\n      {/* \u65F6\u95F4\u8282\u70B9\u5706\u70B9 */}\n      <div className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\">\n        <div className={timelineNodeActiveVariants({ state })} />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u56FE\u6807\n * @param icon \u72B6\u6001\u5316\u56FE\u6807\u914D\u7F6E\n * @param isActive \u662F\u5426\u6FC0\u6D3B\u72B6\u6001\n * @returns \u56FE\u6807 Media \u5BF9\u8C61\n */\nconst getIconByState = (icon: StateIcon | undefined, isActive: boolean): Media | undefined => {\n  if (!icon) return undefined\n  return isActive ? icon.active : icon.inactive\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n  active,\n  item,\n  theme = 'light',\n  className,\n}: {\n  active: boolean\n  item: EventScheduleItem\n  theme?: 'light' | 'dark'\n  className?: string\n}) => {\n  const currentIcon = React.useMemo(() => {\n    return getIconByState(item.icon, active)\n  }, [item.icon, active])\n\n  // \u8BA1\u7B97\u7EC4\u5408\u72B6\u6001\n  const cardState = `${active ? 'active' : 'inactive'}-${theme}` as\n    | 'active-light'\n    | 'inactive-light'\n    | 'active-dark'\n    | 'inactive-dark'\n\n  return (\n    <div className={cn(eventScheduleCardVariants({ state: cardState }), className)}>\n      {/* \u80CC\u666F\u56FE\u6807 */}\n      {currentIcon && (\n        <div className=\"laptop:w-[128px] desktop:w-[160px] absolute bottom-0 right-0 z-10 w-[120px]\">\n          <Picture source={currentIcon.url} alt={currentIcon.alt} className=\"aspect-square\" />\n        </div>\n      )}\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"tablet:px-4 tablet:py-3 laptop:p-4 desktop:px-6 relative z-20 flex h-full flex-col justify-between px-6 py-4\">\n        <Heading\n          html={item.title}\n          className={cn(\n            'desktop:text-[32px] laptop:text-[24px] line-clamp-1 text-[20px]',\n            cardTextVariants({ state: cardState })\n          )}\n        />\n        {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n        <div className=\"flex flex-col gap-0.5\">\n          {item.items.map((detail, index) => (\n            <div key={index} className=\"flex items-center gap-2\">\n              {/* \u56FE\u6807 */}\n              {detail.icon && (\n                <div className=\"desktop:size-6 size-5 shrink-0\">\n                  <Picture source={detail.icon.url} alt={detail.icon.alt} className=\"size-full\" />\n                </div>\n              )}\n              {/* \u6587\u672C */}\n              <Text\n                html={detail.label}\n                className={cn(\n                  'lg-desktop:text-[18px] desktop:text-[16px] line-clamp-1 flex-1 text-[14px] leading-[1.4]',\n                  cardTextVariants({ state: cardState })\n                )}\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(({ classNames = {}, data }, ref) => {\n  const theme = data.theme || 'light'\n  const swiperRef = React.useRef<SwiperType | null>(null)\n  const timelineSwiperRef = React.useRef<SwiperType | null>(null)\n  const isSyncingRef = React.useRef(false) // \u9632\u6B62\u5FAA\u73AF\u89E6\u53D1\n  const itemsPerRow = React.useMemo(() => {\n    return data?.scheduleList?.length || 2\n  }, [data?.scheduleList])\n\n  // \u8BA1\u7B97 active item \u7684\u7D22\u5F15\n  const activeIndex = React.useMemo(() => {\n    return data.scheduleList.findIndex(item => getItemActiveStatus(item))\n  }, [data.scheduleList])\n\n  /**\n   * \u751F\u6210\u7EDF\u4E00\u7684 Swiper \u65AD\u70B9\u914D\u7F6E\n   * @param itemsPerRow \u6BCF\u884C\u663E\u793A\u7684\u9879\u76EE\u6570\n   * @param withSpaceBetween \u662F\u5426\u5305\u542B\u95F4\u8DDD\u914D\u7F6E\n   * @returns Swiper \u65AD\u70B9\u914D\u7F6E\u5BF9\u8C61\n   */\n  const generateSwiperBreakpoints = React.useCallback((itemsPerRow: number, withSpaceBetween: boolean = false) => {\n    // \u6839\u636E itemsPerRow \u786E\u5B9A\u4E0D\u540C\u65AD\u70B9\u4E0B\u7684 slidesPerView\n    const getBreakpointConfig = (breakpoint: 'mobile' | 'tablet' | 'laptop' | 'desktop') => {\n      switch (breakpoint) {\n        case 'mobile':\n          return { slidesPerView: 1.17 }\n        case 'tablet':\n          if (itemsPerRow === 2) return { slidesPerView: 2 }\n          return { slidesPerView: 2.4 }\n        case 'laptop':\n          if (itemsPerRow === 2) return {}\n          if (itemsPerRow === 4) return { slidesPerView: 3.2 }\n          return { slidesPerView: itemsPerRow }\n        case 'desktop':\n          if (itemsPerRow === 2) return { slidesPerView: 2 }\n          return { slidesPerView: itemsPerRow }\n      }\n    }\n\n    const mobileConfig = getBreakpointConfig('mobile')\n    const tabletConfig = getBreakpointConfig('tablet')\n    const laptopConfig = getBreakpointConfig('laptop')\n    const desktopConfig = getBreakpointConfig('desktop')\n\n    // \u5982\u679C\u9700\u8981 spaceBetween\uFF0C\u5219\u6DFB\u52A0\u5230\u914D\u7F6E\u4E2D\n    if (withSpaceBetween) {\n      return {\n        0: { ...mobileConfig, spaceBetween: 12 },\n        768: { ...tabletConfig, spaceBetween: itemsPerRow === 1 ? 12 : undefined },\n        1024: { ...laptopConfig, spaceBetween: 16 },\n        1440: { ...desktopConfig, spaceBetween: 16 },\n      }\n    }\n\n    return {\n      0: mobileConfig,\n      768: tabletConfig,\n      1024: laptopConfig,\n      1440: desktopConfig,\n    }\n  }, [])\n\n  // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\uFF08\u5361\u7247 Swiper - \u5305\u542B\u95F4\u8DDD\uFF09\n  const swiperBreakpoints = React.useMemo(() => {\n    return generateSwiperBreakpoints(itemsPerRow, true)\n  }, [itemsPerRow, generateSwiperBreakpoints])\n\n  // \u65F6\u95F4\u8F74 Swiper \u65AD\u70B9\u914D\u7F6E\uFF08\u4E0D\u5305\u542B\u95F4\u8DDD\uFF09\n  const timeNodeSwiperBreakpoints = React.useMemo(() => {\n    return generateSwiperBreakpoints(itemsPerRow, false)\n  }, [itemsPerRow, generateSwiperBreakpoints])\n\n  const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n  // \u540C\u6B65\u4E24\u4E2A Swiper \u7684\u6ED1\u52A8\n  const handleCardSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n    if (isSyncingRef.current || !timelineSwiperRef.current) return\n    isSyncingRef.current = true\n    timelineSwiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n    // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n    setTimeout(() => {\n      isSyncingRef.current = false\n    }, 50)\n  }, [])\n\n  const handleTimelineSwiperSlideChange = React.useCallback((swiper: SwiperType) => {\n    if (isSyncingRef.current || !swiperRef.current) return\n    isSyncingRef.current = true\n    swiperRef.current.slideTo(swiper.activeIndex, swiper.params.speed)\n    // \u5EF6\u8FDF\u91CD\u7F6E\u6807\u5FD7\uFF0C\u786E\u4FDD\u540C\u6B65\u5B8C\u6210\n    setTimeout(() => {\n      isSyncingRef.current = false\n    }, 50)\n  }, [])\n\n  // \u81EA\u52A8\u6EDA\u52A8\u5230 active item\n  React.useEffect(() => {\n    if (swiperRef.current && timelineSwiperRef.current && activeIndex >= 0) {\n      // \u5EF6\u8FDF\u6267\u884C\uFF0C\u786E\u4FDD Swiper \u5DF2\u7ECF\u5B8C\u5168\u521D\u59CB\u5316\n      setTimeout(() => {\n        isSyncingRef.current = true\n        swiperRef.current?.slideTo(activeIndex, 500)\n        timelineSwiperRef.current?.slideTo(activeIndex, 500)\n        setTimeout(() => {\n          isSyncingRef.current = false\n        }, 600)\n      }, 100)\n    }\n  }, [activeIndex])\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] overflow-hidden px-4',\n        classNames?.root\n      )}\n    >\n      {showTimeline && (\n        <Swiper\n          breakpoints={timeNodeSwiperBreakpoints}\n          className=\"h-4 w-full !overflow-visible\"\n          onSwiper={swiper => {\n            timelineSwiperRef.current = swiper\n          }}\n          onSlideChange={handleTimelineSwiperSlideChange}\n        >\n          {data.scheduleList.map((item, index) => {\n            const isActive = getItemActiveStatus(item)\n            return (\n              <SwiperSlide key={'timelineNode' + index} className=\"\">\n                <TimelineNode\n                  className={classNames?.timeline}\n                  active={isActive}\n                  theme={theme}\n                  index={index}\n                  nodeLength={data.scheduleList.length}\n                />\n              </SwiperSlide>\n            )\n          })}\n        </Swiper>\n      )}\n      <Swiper\n        breakpoints={swiperBreakpoints}\n        className=\"w-full !overflow-visible\"\n        onSwiper={swiper => {\n          swiperRef.current = swiper\n        }}\n        onSlideChange={handleCardSwiperSlideChange}\n      >\n        {data.scheduleList.map((item, index) => {\n          const isActive = getItemActiveStatus(item)\n          return (\n            <SwiperSlide key={'SwiperSlideItem' + index}>\n              <EventScheduleCard\n                active={isActive}\n                className={cn(showTimeline ? 'laptop:mt-4 mt-2' : '', classNames?.eventScheduleCard)}\n                item={item}\n                theme={theme}\n              />\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n    </div>\n  )\n})\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { StateIcon, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Heading", "Swiper", "SwiperSlide", "dayjs", "cva", "isInTimeRange", "startDate", "endDate", "now", "start", "end", "getItemActiveStatus", "item", "timelineProgressActiveVariants", "timelineNodeActiveVariants", "cardTextVariants", "eventScheduleCardVariants", "TimelineNode", "active", "theme", "className", "index", "nodeLength", "state", "isFirst", "isLast", "getIconByState", "icon", "isActive", "EventScheduleCard", "currentIcon", "cardState", "detail", "EventSchedule", "classNames", "data", "ref", "swiperRef", "timelineSwiperRef", "isSyncingRef", "itemsPerRow", "activeIndex", "generateSwiperBreakpoints", "withSpaceBetween", "getBreakpointConfig", "breakpoint", "mobileConfig", "tabletConfig", "laptopConfig", "desktopConfig", "swiperBreakpoints", "timeNodeSwiperBreakpoints", "showTimeline", "handleCardSwiperSlideChange", "swiper", "handleTimelineSwiperSlideChange", "EventSchedule_default"]
+}

package/dist/esm/biz-components/Faq/Faq.d.ts

@@ -6,9 +6,9 @@ declare const FaqItem: {
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<FaqProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: React.ForwardRefExoticComponent<Omit<FaqProps & React.RefAttributes<HTMLDivElement> & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export { FaqItem };

package/dist/esm/biz-components/FeatureCards/FeatureCards.d.ts

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

package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.d.ts

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

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

@@ -19,8 +19,8 @@ type FeaturesType = {
     };
     className?: string;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Omit<FeaturesType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<FeaturesType & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -5,8 +5,8 @@ type FootChargerType = {
     };
     className?: string;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Omit<FootChargerType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<FootChargerType & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import type { FooterNavigationProps } from './types.js';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<FooterNavigationProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<FooterNavigationProps & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -10,8 +10,8 @@ type GiftBoxType = {
     };
     className?: string;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Omit<GiftBoxType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<GiftBoxType & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -31,8 +31,8 @@ export interface GraphicProps extends ComponentCommonProps {
         itemTheme?: Theme;
     };
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: React.ForwardRefExoticComponent<Omit<GraphicProps & React.RefAttributes<HTMLDivElement> & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n}\n\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description &&\n                  (data?.title ? (\n                    <Heading\n                      html={data?.description}\n                      style={{\n                        color: data?.textColor,\n                      }}\n                      as=\"h3\"\n                      title={data?.description || ''}\n                      className={`${descriptionClass} graphic-description`}\n                    />\n                  ) : (\n                    <h3\n                      style={{\n                        color: data?.textColor,\n                      }}\n                      title={data?.description || ''}\n                      dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                      className={`${descriptionClass} graphic-description-item`}\n                    />\n                  ))}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n                data-headless-nav-postion={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={cn('graphicBlock', className)} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "descriptionClass", "Item", "data", "configuration", "ref", "handleAspect", "e", "Graphic", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n}\n\nconst descriptionClass =\n  'descTitle lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]'\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    if (data?.description) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text: data.description,\n      })\n    }\n  }\n\n  const handleMouseLeave = () => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n                    {data?.title ? (\n                      <Heading\n                        html={data?.description}\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        as=\"h3\"\n                        className={`${descriptionClass} graphic-description`}\n                      />\n                    ) : (\n                      <h3\n                        style={{\n                          color: data?.textColor,\n                        }}\n                        dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n                        className={`${descriptionClass} graphic-description-item`}\n                      />\n                    )}\n                    {typeof window !== 'undefined' &&\n                      tooltip.visible &&\n                      createPortal(\n                        <div\n                          className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n                          style={{\n                            left: `${tooltip.x + 16}px`,\n                            top: `${tooltip.y + 16}px`,\n                          }}\n                        >\n                          {tooltip.text}\n                        </div>,\n                        document.body\n                      )}\n                  </div>\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n                data-headless-nav-postion={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={cn('graphicBlock', className)} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Graphic", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
 }

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

@@ -17,9 +17,9 @@ interface GraphicAttractionBlockProps extends ComponentCommonProps {
         attractionItems?: AttractionItem[];
     };
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: React.ForwardRefExoticComponent<Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement> & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export type { GraphicAttractionBlockProps };

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

@@ -15,8 +15,8 @@ type GraphicMoreType = {
     };
     className?: string;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Omit<GraphicMoreType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<GraphicMoreType & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.d.ts

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

package/dist/esm/biz-components/HeaderNavigation/MobileSidebarMenu.js

@@ -1,2 +1,2 @@
-import{Fragment as D,jsx as a,jsxs as c}from"react/jsx-runtime";import{useCallback as R,useEffect as w,useMemo as k,useState as L}from"react";import{Button as p,Text as $,Link as M}from"../../components/index.js";import{HeaderNavigationMenu as S}from"./types.js";import{useNavContext as T}from"./NavProvider.js";import{MenuItem as F,SubSubCategoryItemComp as B,SubSubCategoryContentComp as z}from"./MobileMenuComponents.js";const O=({sidebarCategoriesMetadata:n,seriesMetadata:s})=>{const{currentMenu:v,setCurrentMenu:d,subSubCategory:u,setSubSubCategory:h,setCurrentSeriesMetadata:m,currentSeriesMetadata:o,buildProps:b,onSidebarNavClick:y}=T(),[x,_]=L([]),[f,C]=L([]);w(()=>{n?.subcategories?.length&&_(n?.subcategories?.map((e,l)=>({index:l,open:!1})))},[n]),w(()=>{u?.subSubCategories?.length&&C(u?.subSubCategories?.map((e,l)=>({index:l,open:l===0})))},[u]);const N=R((e,l)=>{d&&d(S.Third),h?.(e);const r=s?.find(t=>l!==void 0?e?.subSubCategories?.[l]?.label?.toLowerCase()===t.label?.toLowerCase():e?.label?.toLowerCase()===t.label?.toLowerCase())||{};if(e?.collections){const t=b?.categories?.[e?.collections]||{};m?.({label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,guide:r?.guide,series:[{products:t?.products}]})}else m?.(r)},[s,d,h,m,b?.categories]),K=k(()=>s?.find(e=>!!e?.guide)?.guide,[s]);return k(()=>{switch(v){case S.Secondary:return c("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[a("div",{children:n?.subcategories?.map((e,l)=>a("div",{children:a(F,{label:e?.label,active:x.find(r=>r.index===l)?.open,onClick:()=>{N(e),y?.(e,l)}})},`${e.label}-${l}`))}),c("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[n?.primary&&a(p,{as:"a",href:`${n?.primary?.url}?ref=${n?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:n?.primary?.label}),n?.secondary&&a(p,{as:"a",href:n?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:n?.secondary?.label})]})]});case S.Third:return a("div",{className:"tablet:px-8 laptop:px-16 p-4",children:u?.subSubCategories?u?.subSubCategories?.map((e,l)=>{const r=s?.find(i=>i.label.toLowerCase()===e?.label?.toLowerCase())||{};let t={};if(e?.collections){const i=b?.categories?.[e?.collections]||{};t={label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,guide:r?.guide,series:[{products:i?.products}]}}else t=r;return c("div",{children:[Reflect.ownKeys(e).length>0&&a(B,{matchSeriesMetadata:t,onSubSubCategoryItemClick:()=>{y?.(e,l),C(i=>i.map((g,E)=>({...g,open:E===l?!g.open:g.open})))},expanded:!!f?.find(i=>i.index===l)?.open}),f?.find(i=>i.index===l)?.open&&c(D,{children:[a(z,{matchSeriesMetadata:t}),t?.primary&&a("div",{className:"my-4 text-center",children:a(p,{as:"a",href:t?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:t?.primary?.label})})]}),t?.guide?.label&&a(M,{href:t?.guide?.url,children:a("div",{className:"mt-4",children:a($,{html:t?.guide?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]},`${e.label}-${l}`)}):c(D,{children:[Reflect.ownKeys(o).length>0&&a(B,{matchSeriesMetadata:o}),a(z,{matchSeriesMetadata:o}),o?.primary&&a("div",{className:"my-4 text-center ",children:a(p,{as:"a",href:`${o?.primary?.url}?ref=${o?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:o?.primary?.label})}),o?.guide?.label&&a(M,{href:o?.guide?.url,children:a("div",{className:"mt-4",children:a($,{html:o?.guide?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]})});default:return null}},[v,n,s,x,f,u,o,b?.categories,N,y])};export{O as MobileSidebarMenu};
+import{Fragment as B,jsx as l,jsxs as c}from"react/jsx-runtime";import{useCallback as _,useEffect as N,useMemo as E,useState as k}from"react";import{Button as b,Text as R,Link as T}from"../../components/index.js";import{HeaderNavigationMenu as v}from"./types.js";import{useNavContext as D}from"./NavProvider.js";import{MenuItem as K,SubSubCategoryItemComp as L,SubSubCategoryContentComp as $}from"./MobileMenuComponents.js";const J=({sidebarCategoriesMetadata:n,seriesMetadata:u})=>{const{currentMenu:g,setCurrentMenu:m,subSubCategory:i,setSubSubCategory:h,setCurrentSeriesMetadata:y,currentSeriesMetadata:s,buildProps:p,onSidebarNavClick:d}=D(),[x,M]=k([]),[f,C]=k([]);N(()=>{n?.subcategories?.length&&M(n?.subcategories?.map((e,a)=>({index:a,open:!1})))},[n]),N(()=>{i?.subSubCategories?.length&&C(i?.subSubCategories?.map((e,a)=>({index:a,open:a===0})))},[i]);const w=_((e,a)=>{m&&m(v.Third),h?.(e);const t=u?.find(r=>a!==void 0?e?.subSubCategories?.[a]?.label?.toLowerCase()===r.label?.toLowerCase():e?.label?.toLowerCase()===r.label?.toLowerCase())||{};if(e?.collections){const r=p?.categories?.[e?.collections]||{};y?.({label:t?.label,isCollection:!0,banner:t?.banner,primary:t?.primary,series:[{products:r?.products}]})}else y?.(t)},[u,m,h,y,p?.categories]);return E(()=>{switch(g){case v.Secondary:return c("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[c("div",{children:[n?.subcategories?.map((e,a)=>l("div",{children:l(K,{label:e?.label,active:x.find(t=>t.index===a)?.open,onClick:()=>{w(e),d?.(e,a)}})},`${e.label}-${a}`)),n?.guide?.label&&l(T,{href:n?.guide?.url,children:l("div",{className:"mt-4",children:l(R,{html:n?.guide?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]}),c("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[n?.primary&&l(b,{as:"a",href:`${n?.primary?.url}?ref=${n?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:n?.primary?.label}),n?.secondary&&l(b,{as:"a",href:n?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:n?.secondary?.label})]})]});case v.Third:return l("div",{className:"tablet:px-8 laptop:px-16 p-4",children:i?.subSubCategories?i?.subSubCategories?.map((e,a)=>{const t=u?.find(o=>o.label.toLowerCase()===e?.label?.toLowerCase())||{};let r={};if(e?.collections){const o=p?.categories?.[e?.collections]||{};r={label:t?.label,isCollection:!0,banner:t?.banner,primary:t?.primary,series:[{products:o?.products}]}}else r=t;return c("div",{children:[Reflect.ownKeys(e).length>0&&l(L,{matchSeriesMetadata:r,onSubSubCategoryItemClick:()=>{d?.(e,a),C(o=>o.map((S,z)=>({...S,open:z===a?!S.open:S.open})))},expanded:!!f?.find(o=>o.index===a)?.open}),f?.find(o=>o.index===a)?.open&&c(B,{children:[l($,{matchSeriesMetadata:r}),r?.primary&&l("div",{className:"my-4 text-center",children:l(b,{as:"a",href:r?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:r?.primary?.label})})]})]},`${e.label}-${a}`)}):c(B,{children:[Reflect.ownKeys(s).length>0&&l(L,{matchSeriesMetadata:s}),l($,{matchSeriesMetadata:s}),s?.primary&&l("div",{className:"my-4 text-center ",children:l(b,{as:"a",href:`${s?.primary?.url}?ref=${s?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:s?.primary?.label})})]})});default:return null}},[g,n,u,x,f,i,s,p?.categories,w,d])};export{J as MobileSidebarMenu};
 //# sourceMappingURL=MobileSidebarMenu.js.map

package/dist/esm/biz-components/HeaderNavigation/MobileSidebarMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/MobileSidebarMenu.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button, Text, Link } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { MenuItem, SubSubCategoryItemComp, SubSubCategoryContentComp } from './MobileMenuComponents.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nexport const MobileSidebarMenu = ({\n  sidebarCategoriesMetadata,\n  seriesMetadata,\n}: {\n  sidebarCategoriesMetadata: any\n  seriesMetadata: any\n}) => {\n  const {\n    currentMenu,\n    setCurrentMenu,\n    subSubCategory,\n    setSubSubCategory,\n    setCurrentSeriesMetadata,\n    currentSeriesMetadata,\n    buildProps,\n    onSidebarNavClick,\n  } = useNavContext()\n  const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n  const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n  useEffect(() => {\n    if (sidebarCategoriesMetadata?.subcategories?.length) {\n      setExpandedSubcategory(\n        sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n          index,\n          open: false,\n        }))\n      )\n    }\n  }, [sidebarCategoriesMetadata])\n\n  useEffect(() => {\n    if (subSubCategory?.subSubCategories?.length) {\n      setExpandedSeriesCategories(\n        subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n          index,\n          open: index === 0,\n        }))\n      )\n    }\n  }, [subSubCategory])\n\n  const handleSubSubCategoryClick = useCallback(\n    (item: any, subIndex?: number) => {\n      setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n      setSubSubCategory?.(item)\n      const curSeriesMetadata =\n        seriesMetadata?.find((seriesItem: any) =>\n          subIndex !== undefined\n            ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n            : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n        ) || {}\n      // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n      if (item?.collections) {\n        const category = buildProps?.categories?.[item?.collections] || {}\n        setCurrentSeriesMetadata?.({\n          label: curSeriesMetadata?.label,\n          isCollection: true,\n          banner: curSeriesMetadata?.banner,\n          primary: curSeriesMetadata?.primary,\n          guide: curSeriesMetadata?.guide,\n          series: [\n            {\n              products: category?.products,\n            },\n          ],\n        })\n      } else {\n        setCurrentSeriesMetadata?.(curSeriesMetadata)\n      }\n    },\n    [seriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata, buildProps?.categories]\n  )\n\n  const defaultGuide = useMemo(() => {\n    return seriesMetadata?.find((item: any) => !!item?.guide)?.guide\n  }, [seriesMetadata])\n\n  const MobileSidebarMenuComp = useMemo(() => {\n    switch (currentMenu) {\n      case HeaderNavigationMenu.Secondary:\n        return (\n          // \u4E8C\u7EA7\u83DC\u5355\n          <div className=\"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4\">\n            <div>\n              {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n                return (\n                  <div key={`${item.label}-${index}`}>\n                    <MenuItem\n                      label={item?.label}\n                      active={expandedSubcategory.find(item => item.index === index)?.open}\n                      onClick={() => {\n                        handleSubSubCategoryClick(item)\n                        onSidebarNavClick?.(item, index)\n                      }}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n            <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n              {sidebarCategoriesMetadata?.primary && (\n                <Button\n                  as=\"a\"\n                  href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n                  variant=\"primary\"\n                  size=\"lg\"\n                  className=\"tablet:w-auto w-full text-base\"\n                >\n                  {sidebarCategoriesMetadata?.primary?.label}\n                </Button>\n              )}\n              {sidebarCategoriesMetadata?.secondary && (\n                <Button\n                  as=\"a\"\n                  href={sidebarCategoriesMetadata?.secondary?.url}\n                  variant=\"link\"\n                  size=\"lg\"\n                  className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n                >\n                  {sidebarCategoriesMetadata?.secondary?.label}\n                </Button>\n              )}\n            </div>\n          </div>\n        )\n      case HeaderNavigationMenu.Third:\n        return (\n          // \u4E09\u7EA7\u83DC\u5355\n          <div className=\"tablet:px-8 laptop:px-16 p-4\">\n            {subSubCategory?.subSubCategories ? (\n              subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n                const curSeriesMetadata =\n                  seriesMetadata?.find(\n                    (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n                  ) || {}\n                let matchSeriesMetadata = {} as any\n                if (subSubCategoryItem?.collections) {\n                  const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n                  matchSeriesMetadata = {\n                    label: curSeriesMetadata?.label,\n                    isCollection: true,\n                    banner: curSeriesMetadata?.banner,\n                    primary: curSeriesMetadata?.primary,\n                    guide: curSeriesMetadata?.guide,\n                    series: [\n                      {\n                        products: category?.products,\n                      },\n                    ],\n                  }\n                } else {\n                  matchSeriesMetadata = curSeriesMetadata\n                }\n                return (\n                  <div key={`${subSubCategoryItem.label}-${index}`}>\n                    {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n                      <SubSubCategoryItemComp\n                        matchSeriesMetadata={matchSeriesMetadata}\n                        onSubSubCategoryItemClick={() => {\n                          onSidebarNavClick?.(subSubCategoryItem, index)\n                          setExpandedSeriesCategories(prev =>\n                            prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n                          )\n                        }}\n                        expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n                      />\n                    )}\n                    {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n                      <>\n                        <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n                        {matchSeriesMetadata?.primary && (\n                          <div className=\"my-4 text-center\">\n                            <Button\n                              as=\"a\"\n                              href={matchSeriesMetadata?.primary?.url}\n                              className=\"text-base leading-[1.2] no-underline\"\n                              variant=\"secondary\"\n                              size=\"base\"\n                            >\n                              {matchSeriesMetadata?.primary?.label}\n                            </Button>\n                          </div>\n                        )}\n                      </>\n                    )}\n                    {matchSeriesMetadata?.guide?.label && (\n                      <Link href={matchSeriesMetadata?.guide?.url}>\n                        <div className=\"mt-4\">\n                          <Text\n                            html={matchSeriesMetadata?.guide?.label}\n                            className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n                          />\n                        </div>\n                      </Link>\n                    )}\n                  </div>\n                )\n              })\n            ) : (\n              <>\n                {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n                  <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n                )}\n                <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n                {currentSeriesMetadata?.primary && (\n                  <div className=\"my-4 text-center \">\n                    <Button\n                      as=\"a\"\n                      href={`${currentSeriesMetadata?.primary?.url}?ref=${currentSeriesMetadata?.label}_viewmore`}\n                      variant=\"secondary\"\n                      size=\"base\"\n                      className=\"text-base leading-[1.2] no-underline\"\n                    >\n                      {currentSeriesMetadata?.primary?.label}\n                    </Button>\n                  </div>\n                )}\n                {currentSeriesMetadata?.guide?.label && (\n                  <Link href={currentSeriesMetadata?.guide?.url}>\n                    <div className=\"mt-4\">\n                      <Text\n                        html={currentSeriesMetadata?.guide?.label}\n                        className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n                      />\n                    </div>\n                  </Link>\n                )}\n              </>\n            )}\n          </div>\n        )\n      default:\n        return null\n    }\n  }, [\n    currentMenu,\n    sidebarCategoriesMetadata,\n    seriesMetadata,\n    expandedSubcategory,\n    expandedSeriesCategories,\n    subSubCategory,\n    currentSeriesMetadata,\n    buildProps?.categories,\n    handleSubSubCategoryClick,\n    onSidebarNavClick,\n  ])\n\n  return MobileSidebarMenuComp\n}\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useCallback", "useEffect", "useMemo", "useState", "Button", "Text", "Link", "HeaderNavigationMenu", "useNavContext", "MenuItem", "SubSubCategoryItemComp", "SubSubCategoryContentComp", "MobileSidebarMenu", "sidebarCategoriesMetadata", "seriesMetadata", "currentMenu", "setCurrentMenu", "subSubCategory", "setSubSubCategory", "setCurrentSeriesMetadata", "currentSeriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "expandedSeriesCategories", "setExpandedSeriesCategories", "_", "index", "handleSubSubCategoryClick", "item", "subIndex", "curSeriesMetadata", "seriesItem", "category", "defaultGuide", "subSubCategoryItem", "matchSeriesMetadata", "prev", "i"]
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Button, Text, Link } from '../../components/index.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport { useNavContext } from './NavProvider.js'\nimport { MenuItem, SubSubCategoryItemComp, SubSubCategoryContentComp } from './MobileMenuComponents.js'\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nexport const MobileSidebarMenu = ({\n  sidebarCategoriesMetadata,\n  seriesMetadata,\n}: {\n  sidebarCategoriesMetadata: any\n  seriesMetadata: any\n}) => {\n  const {\n    currentMenu,\n    setCurrentMenu,\n    subSubCategory,\n    setSubSubCategory,\n    setCurrentSeriesMetadata,\n    currentSeriesMetadata,\n    buildProps,\n    onSidebarNavClick,\n  } = useNavContext()\n  const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n  const [expandedSeriesCategories, setExpandedSeriesCategories] = useState<{ index: number; open: boolean }[]>([])\n\n  useEffect(() => {\n    if (sidebarCategoriesMetadata?.subcategories?.length) {\n      setExpandedSubcategory(\n        sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({\n          index,\n          open: false,\n        }))\n      )\n    }\n  }, [sidebarCategoriesMetadata])\n\n  useEffect(() => {\n    if (subSubCategory?.subSubCategories?.length) {\n      setExpandedSeriesCategories(\n        subSubCategory?.subSubCategories?.map((_: any, index: number) => ({\n          index,\n          open: index === 0,\n        }))\n      )\n    }\n  }, [subSubCategory])\n\n  const handleSubSubCategoryClick = useCallback(\n    (item: any, subIndex?: number) => {\n      setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n      setSubSubCategory?.(item)\n      const curSeriesMetadata =\n        seriesMetadata?.find((seriesItem: any) =>\n          subIndex !== undefined\n            ? item?.subSubCategories?.[subIndex]?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n            : item?.label?.toLowerCase() === seriesItem.label?.toLowerCase()\n        ) || {}\n      // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n      if (item?.collections) {\n        const category = buildProps?.categories?.[item?.collections] || {}\n        setCurrentSeriesMetadata?.({\n          label: curSeriesMetadata?.label,\n          isCollection: true,\n          banner: curSeriesMetadata?.banner,\n          primary: curSeriesMetadata?.primary,\n          series: [\n            {\n              products: category?.products,\n            },\n          ],\n        })\n      } else {\n        setCurrentSeriesMetadata?.(curSeriesMetadata)\n      }\n    },\n    [seriesMetadata, setCurrentMenu, setSubSubCategory, setCurrentSeriesMetadata, buildProps?.categories]\n  )\n\n  const MobileSidebarMenuComp = useMemo(() => {\n    switch (currentMenu) {\n      case HeaderNavigationMenu.Secondary:\n        return (\n          // \u4E8C\u7EA7\u83DC\u5355\n          <div className=\"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4\">\n            <div>\n              {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => {\n                return (\n                  <div key={`${item.label}-${index}`}>\n                    <MenuItem\n                      label={item?.label}\n                      active={expandedSubcategory.find(item => item.index === index)?.open}\n                      onClick={() => {\n                        handleSubSubCategoryClick(item)\n                        onSidebarNavClick?.(item, index)\n                      }}\n                    />\n                  </div>\n                )\n              })}\n              {sidebarCategoriesMetadata?.guide?.label && (\n                <Link href={sidebarCategoriesMetadata?.guide?.url}>\n                  <div className=\"mt-4\">\n                    <Text\n                      html={sidebarCategoriesMetadata?.guide?.label}\n                      className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n                    />\n                  </div>\n                </Link>\n              )}\n            </div>\n            <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n              {sidebarCategoriesMetadata?.primary && (\n                <Button\n                  as=\"a\"\n                  href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n                  variant=\"primary\"\n                  size=\"lg\"\n                  className=\"tablet:w-auto w-full text-base\"\n                >\n                  {sidebarCategoriesMetadata?.primary?.label}\n                </Button>\n              )}\n              {sidebarCategoriesMetadata?.secondary && (\n                <Button\n                  as=\"a\"\n                  href={sidebarCategoriesMetadata?.secondary?.url}\n                  variant=\"link\"\n                  size=\"lg\"\n                  className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\"\n                >\n                  {sidebarCategoriesMetadata?.secondary?.label}\n                </Button>\n              )}\n            </div>\n          </div>\n        )\n      case HeaderNavigationMenu.Third:\n        return (\n          // \u4E09\u7EA7\u83DC\u5355\n          <div className=\"tablet:px-8 laptop:px-16 p-4\">\n            {subSubCategory?.subSubCategories ? (\n              subSubCategory?.subSubCategories?.map((subSubCategoryItem: any, index: number) => {\n                const curSeriesMetadata =\n                  seriesMetadata?.find(\n                    (item: any) => item.label.toLowerCase() === subSubCategoryItem?.label?.toLowerCase()\n                  ) || {}\n                let matchSeriesMetadata = {} as any\n                if (subSubCategoryItem?.collections) {\n                  const category = buildProps?.categories?.[subSubCategoryItem?.collections] || {}\n                  matchSeriesMetadata = {\n                    label: curSeriesMetadata?.label,\n                    isCollection: true,\n                    banner: curSeriesMetadata?.banner,\n                    primary: curSeriesMetadata?.primary,\n                    series: [\n                      {\n                        products: category?.products,\n                      },\n                    ],\n                  }\n                } else {\n                  matchSeriesMetadata = curSeriesMetadata\n                }\n                return (\n                  <div key={`${subSubCategoryItem.label}-${index}`}>\n                    {Reflect.ownKeys(subSubCategoryItem).length > 0 && (\n                      <SubSubCategoryItemComp\n                        matchSeriesMetadata={matchSeriesMetadata}\n                        onSubSubCategoryItemClick={() => {\n                          onSidebarNavClick?.(subSubCategoryItem, index)\n                          setExpandedSeriesCategories(prev =>\n                            prev.map((item, i) => ({ ...item, open: i === index ? !item.open : item.open }))\n                          )\n                        }}\n                        expanded={!!expandedSeriesCategories?.find(item => item.index === index)?.open}\n                      />\n                    )}\n                    {expandedSeriesCategories?.find(item => item.index === index)?.open && (\n                      <>\n                        <SubSubCategoryContentComp matchSeriesMetadata={matchSeriesMetadata} />\n                        {matchSeriesMetadata?.primary && (\n                          <div className=\"my-4 text-center\">\n                            <Button\n                              as=\"a\"\n                              href={matchSeriesMetadata?.primary?.url}\n                              className=\"text-base leading-[1.2] no-underline\"\n                              variant=\"secondary\"\n                              size=\"base\"\n                            >\n                              {matchSeriesMetadata?.primary?.label}\n                            </Button>\n                          </div>\n                        )}\n                      </>\n                    )}\n                  </div>\n                )\n              })\n            ) : (\n              <>\n                {Reflect.ownKeys(currentSeriesMetadata).length > 0 && (\n                  <SubSubCategoryItemComp matchSeriesMetadata={currentSeriesMetadata} />\n                )}\n                <SubSubCategoryContentComp matchSeriesMetadata={currentSeriesMetadata} />\n                {currentSeriesMetadata?.primary && (\n                  <div className=\"my-4 text-center \">\n                    <Button\n                      as=\"a\"\n                      href={`${currentSeriesMetadata?.primary?.url}?ref=${currentSeriesMetadata?.label}_viewmore`}\n                      variant=\"secondary\"\n                      size=\"base\"\n                      className=\"text-base leading-[1.2] no-underline\"\n                    >\n                      {currentSeriesMetadata?.primary?.label}\n                    </Button>\n                  </div>\n                )}\n              </>\n            )}\n          </div>\n        )\n      default:\n        return null\n    }\n  }, [\n    currentMenu,\n    sidebarCategoriesMetadata,\n    seriesMetadata,\n    expandedSubcategory,\n    expandedSeriesCategories,\n    subSubCategory,\n    currentSeriesMetadata,\n    buildProps?.categories,\n    handleSubSubCategoryClick,\n    onSidebarNavClick,\n  ])\n\n  return MobileSidebarMenuComp\n}\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useCallback", "useEffect", "useMemo", "useState", "Button", "Text", "Link", "HeaderNavigationMenu", "useNavContext", "MenuItem", "SubSubCategoryItemComp", "SubSubCategoryContentComp", "MobileSidebarMenu", "sidebarCategoriesMetadata", "seriesMetadata", "currentMenu", "setCurrentMenu", "subSubCategory", "setSubSubCategory", "setCurrentSeriesMetadata", "currentSeriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "expandedSeriesCategories", "setExpandedSeriesCategories", "_", "index", "handleSubSubCategoryClick", "item", "subIndex", "curSeriesMetadata", "seriesItem", "category", "subSubCategoryItem", "matchSeriesMetadata", "prev", "i"]
 }