@anker-in/headless-ui 1.0.26-alpha.1762494080693 → 1.0.26-alpha.1762494680050

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Ksp/index.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  imageUrl?: string\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImageUrl?: string\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  videoUrl?: string\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideoUrl?: string\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst ImageCard = ({\n  title,\n  desc,\n  imageUrl,\n  mobImageUrl,\n  videoUrl,\n  mobVideoUrl,\n  className,\n}: ImageCardProps) => {\n  return (\n    <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n      {videoUrl && mobVideoUrl ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={videoUrl}\n            poster={imageUrl}\n            className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideoUrl}\n            poster={mobImageUrl}\n            className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n          />\n        </>\n      ) : (\n        (imageUrl || mobImageUrl) && (\n          <Picture\n            source={`${imageUrl}, ${mobImageUrl} 768`}\n            className=\"ksp-card-image h-full w-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n        <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n        />\n      </div>\n\n    </div>\n  )\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n * \n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u9700\u8981 7 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n * \n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         imageUrl: '/desktop.jpg',\n *         mobImageUrl: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 7 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n  const { title, items } = data\n\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n      {/* ipad, pc\u7AEF */}\n      <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n        <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[0]}\n          />\n          <ImageCard\n            className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[1]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[4]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[3]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[2]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n            {...items[5]}\n          />\n          <ImageCard\n            className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n            {...items[6]}\n          />\n        </div>\n      </div>\n\n      {/* \u624B\u673A\u7AEF */}\n      <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n        <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n        <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[1]} />\n          <ImageCard className=\"w-[50%]\" {...items[2]} />\n        </div>\n        <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n        <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[3]} />\n          <ImageCard className=\"w-[50%]\" {...items[4]} />\n        </div>\n        <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n      </div>\n    </section>\n  )\n}\n\n\nexport default withLayout(Ksp)"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "imageUrl", "mobImageUrl", "videoUrl", "mobVideoUrl", "className", "Ksp", "data", "items", "Ksp_default"]
+  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image?: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  video?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst ImageCard = ({\n  title,\n  desc,\n  image,\n  mobImage,\n  video,\n  mobVideo,\n  className,\n}: ImageCardProps) => {\n  return (\n    <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n      {video && mobVideo ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={video?.url}\n            poster={image?.url}\n            className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={image?.url || mobImage?.url}\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image h-full w-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n        <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n        />\n      </div>\n\n    </div>\n  )\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n * \n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u9700\u8981 7 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n * \n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         image: '/desktop.jpg',\n *         mobImage: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 7 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n  const { title, items } = data\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n      {/* ipad, pc\u7AEF */}\n      <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n        <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[0]}\n          />\n          <ImageCard\n            className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[1]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[4]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[3]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[2]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n            {...items[5]}\n          />\n          <ImageCard\n            className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n            {...items[6]}\n          />\n        </div>\n      </div>\n\n      {/* \u624B\u673A\u7AEF */}\n      <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n        <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n        <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[1]} />\n          <ImageCard className=\"w-[50%]\" {...items[2]} />\n        </div>\n        <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n        <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[3]} />\n          <ImageCard className=\"w-[50%]\" {...items[4]} />\n        </div>\n        <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n      </div>\n    </section>\n  )\n}\n\n\nexport default withLayout(Ksp)"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "Ksp", "data", "items", "Ksp_default"]
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Theme } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 /**
  * 评论项数据结构
  */
@@ -7,7 +7,7 @@ export interface ReviewItem {
     /** 评论者名称 */
     name: string;
     /** 评论者头像 URL */
-    avatar: string;
+    avatar: Media;
     /** 评论内容 */
     comment: string;
     /** 评分(1-5星) */

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Text as m,Heading as c,Avatar as g,AvatarImage as w,AvatarFallback as u}from"../../components/index.js";import{cn as n}from"../../helpers/utils.js";import{withLayout as k}from"../../shared/Styles.js";const x=9,N=3,C=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(i,r)=>t.slice(r*a,(r+1)*a)),b=()=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})}),y=({item:t})=>s("div",{className:"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]",children:[s("div",{className:"flex justify-between",children:[s("div",{className:"flex flex-col",children:[e(m,{size:4,html:t.name,className:"hidden laptop:block"}),e(m,{size:2,html:t.name,className:"block laptop:hidden"}),e("div",{className:"mt-2 flex gap-1",children:new Array(t.rating||5).fill(0).map((a,i)=>e(b,{},i))})]}),s(g,{size:"small",className:" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]",children:[e(w,{src:t.avatar,alt:"avatar"}),e(u,{children:(t.name??"").slice(0,2).toUpperCase()})]})]}),e("div",{children:e(c,{as:"h6",size:2,html:`"${t.comment}`,className:"line-clamp-5 min-h-[120px] text-wrap"})})]});function L({data:t,className:a}){const{title:i,subtitle:r,items:l=[],theme:h="light"}=t,f=C(l.length<x?[...l,...l.slice(x-l.length)]:l,N).slice(0,3).map(o=>[...o,...o]);return s("section",{className:n("flex flex-col items-center justify-center py-3 text-info-primary",a,{"aiui-dark":h==="dark"}),children:[e(c,{as:"h1",size:4,html:i,className:"w-full text-left laptop:text-center"}),e(m,{size:2,html:r,className:"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]"}),e("div",{className:n("mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]"),children:f.map((o,p)=>e("div",{className:n("animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit",{"top-10":p===0||p===2,"hidden desktop:flex":p===1,"hidden tablet:flex":p===2}),children:o.map((d,v)=>e(y,{item:d},v))},p))})]})}var R=k(L);export{R as default};
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Text as m,Heading as c,Avatar as g,AvatarImage as u,AvatarFallback as w}from"../../components/index.js";import{cn as n}from"../../helpers/utils.js";import{withLayout as k}from"../../shared/Styles.js";const x=9,N=3,C=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(i,r)=>t.slice(r*a,(r+1)*a)),b=()=>e("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})}),y=({item:t})=>s("div",{className:"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]",children:[s("div",{className:"flex justify-between",children:[s("div",{className:"flex flex-col",children:[e(m,{size:4,html:t.name,className:"hidden laptop:block"}),e(m,{size:2,html:t.name,className:"block laptop:hidden"}),e("div",{className:"mt-2 flex gap-1",children:new Array(t.rating||5).fill(0).map((a,i)=>e(b,{},i))})]}),s(g,{size:"small",className:" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]",children:[e(u,{src:t.avatar?.url,alt:t.avatar?.alt||""}),e(w,{children:(t.name??"").slice(0,2).toUpperCase()})]})]}),e("div",{children:e(c,{as:"h6",size:2,html:`"${t.comment}`,className:"line-clamp-5 min-h-[120px] text-wrap"})})]});function L({data:t,className:a}){const{title:i,subtitle:r,items:l=[],theme:d="light"}=t,h=C(l.length<x?[...l,...l.slice(x-l.length)]:l,N).slice(0,3).map(o=>[...o,...o]);return s("section",{className:n("flex flex-col items-center justify-center py-3 text-info-primary",a,{"aiui-dark":d==="dark"}),children:[e(c,{as:"h1",size:4,html:i,className:"w-full text-left laptop:text-center"}),e(m,{size:2,html:r,className:"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]"}),e("div",{className:n("mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]"),children:h.map((o,p)=>e("div",{className:n("animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit",{"top-10":p===0||p===2,"hidden desktop:flex":p===1,"hidden tablet:flex":p===2}),children:o.map((f,v)=>e(y,{item:f},v))},p))})]})}var R=k(L);export{R as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MarqueeReview/index.tsx"],
-  "sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Theme } from '../../types/props.js'\n\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n  /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n  name: string\n  /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n  avatar: string\n  /** \u8BC4\u8BBA\u5185\u5BB9 */\n  comment: string\n  /** \u8BC4\u5206(1-5\u661F) */\n  rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n  /** \u4E3B\u6807\u9898 */\n  title: string\n  /** \u526F\u6807\u9898 */\n  subtitle: string\n  /** \u8BC4\u8BBA\u5217\u8868 */\n  items: ReviewItem[]\n  /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n  theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n  /** \u8BC4\u8BBA\u6570\u636E */\n  data: MarqueeReviewData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n  return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n    array.slice(index * size, (index + 1) * size)\n  )\n}\n\nconst StarIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n      fill=\"#F77234\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"hidden laptop:block\" />\n          <Text size={2} html={item.name} className=\"block laptop:hidden\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]\">\n          <AvatarImage src={item.avatar} alt=\"avatar\" />\n          <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n        </Avatar>\n      </div>\n      <div>\n        <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n      </div>\n    </div>\n  )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n *   data={{\n *     title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n *     subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n *     items: [\n *       {\n *         name: \"\u5F20\u4E09\",\n *         avatar: \"/avatar1.jpg\",\n *         comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n *         rating: 5\n *       }\n *     ]\n *   }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n  const { title, subtitle, items = [], theme = 'light' } = data\n\n  const chunkItems = _chunk(\n    items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n    COUNT\n  )\n    .slice(0, 3)\n    .map(item => [...item, ...item])\n\n  return (\n    <section className={cn('flex flex-col items-center justify-center py-3 text-info-primary',  className, { 'aiui-dark': theme === 'dark' })}>\n      <Heading as=\"h1\" size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit', {\n              'top-10': index === 0 || index === 2,\n              'hidden desktop:flex': index === 1,\n              'hidden tablet:flex': index === 2,\n            })}\n          >\n            {items.map((item, innerIndex) => (\n              <Card key={innerIndex} item={item} />\n            ))}\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(MarqueeReview)"],
-  "mappings": "AAsDI,cAAAA,EAeI,QAAAC,MAfJ,oBAtDJ,OAAS,QAAAC,EAAM,WAAAC,EAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,4BACnE,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,IACfhB,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIiB,EAAO,CAAC,CAAE,KAAAC,CAAK,IAEjBjB,EAAC,OAAI,UAAU,uLACb,UAAAA,EAAC,OAAI,UAAU,uBACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,KAAMgB,EAAK,KAAM,UAAU,sBAAsB,EAChElB,EAACE,EAAA,CAAK,KAAM,EAAG,KAAMgB,EAAK,KAAM,UAAU,sBAAsB,EAChElB,EAAC,OAAI,UAAU,kBACZ,aAAI,MAAMkB,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,IAC3Cf,EAACgB,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,EACAd,EAACG,EAAA,CAAO,KAAK,QAAQ,UAAU,sDAC7B,UAAAJ,EAACK,EAAA,CAAY,IAAKa,EAAK,OAAQ,IAAI,SAAS,EAC5ClB,EAACM,EAAA,CAAiB,UAAAY,EAAK,MAAQ,IAAI,MAAM,EAAG,CAAC,EAAE,YAAY,EAAE,GAC/D,GACF,EACAlB,EAAC,OACC,SAAAA,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAM,IAAIe,EAAK,OAAO,GAAI,UAAU,uCAAuC,EACvG,GACF,EA2BJ,SAASC,EAAc,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAuB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,OAAQ,EAAIL,EAEnDM,EAAaf,EACjBa,EAAM,OAASf,EAAmB,CAAC,GAAGe,EAAO,GAAGA,EAAM,MAAMf,EAAmBe,EAAM,MAAM,CAAC,EAAIA,EAChGd,CACF,EACG,MAAM,EAAG,CAAC,EACV,IAAIQ,GAAQ,CAAC,GAAGA,EAAM,GAAGA,CAAI,CAAC,EAEjC,OACEjB,EAAC,WAAQ,UAAWM,EAAG,mEAAqEc,EAAW,CAAE,YAAaI,IAAU,MAAO,CAAC,EACtI,UAAAzB,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMmB,EAAO,UAAU,sCAAsC,EACvFtB,EAACE,EAAA,CACC,KAAM,EACN,KAAMqB,EACN,UAAU,8KACZ,EACAvB,EAAC,OACC,UAAWO,EACT,2HACF,EAEC,SAAAmB,EAAW,IAAI,CAACF,EAAOT,IACtBf,EAAC,OAEC,UAAWO,EAAG,mEAAoE,CAChF,SAAUQ,IAAU,GAAKA,IAAU,EACnC,sBAAuBA,IAAU,EACjC,qBAAsBA,IAAU,CAClC,CAAC,EAEA,SAAAS,EAAM,IAAI,CAACN,EAAMS,IAChB3B,EAACiB,EAAA,CAAsB,KAAMC,GAAlBS,CAAwB,CACpC,GATIZ,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOa,EAAQpB,EAAWW,CAAa",
+  "sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\n\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n  /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n  name: string\n  /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n  avatar: Media\n  /** \u8BC4\u8BBA\u5185\u5BB9 */\n  comment: string\n  /** \u8BC4\u5206(1-5\u661F) */\n  rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n  /** \u4E3B\u6807\u9898 */\n  title: string\n  /** \u526F\u6807\u9898 */\n  subtitle: string\n  /** \u8BC4\u8BBA\u5217\u8868 */\n  items: ReviewItem[]\n  /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n  theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n  /** \u8BC4\u8BBA\u6570\u636E */\n  data: MarqueeReviewData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n  return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n    array.slice(index * size, (index + 1) * size)\n  )\n}\n\nconst StarIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n      fill=\"#F77234\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"hidden laptop:block\" />\n          <Text size={2} html={item.name} className=\"block laptop:hidden\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]\">\n          <AvatarImage src={item.avatar?.url} alt={item.avatar?.alt || ''} />\n          <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n        </Avatar>\n      </div>\n      <div>\n        <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n      </div>\n    </div>\n  )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n *   data={{\n *     title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n *     subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n *     items: [\n *       {\n *         name: \"\u5F20\u4E09\",\n *         avatar: \"/avatar1.jpg\",\n *         comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n *         rating: 5\n *       }\n *     ]\n *   }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n  const { title, subtitle, items = [], theme = 'light' } = data\n\n  const chunkItems = _chunk(\n    items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n    COUNT\n  )\n    .slice(0, 3)\n    .map(item => [...item, ...item])\n\n  return (\n    <section\n      className={cn('flex flex-col items-center justify-center py-3 text-info-primary', className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit', {\n              'top-10': index === 0 || index === 2,\n              'hidden desktop:flex': index === 1,\n              'hidden tablet:flex': index === 2,\n            })}\n          >\n            {items.map((item, innerIndex) => (\n              <Card key={innerIndex} item={item} />\n            ))}\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(MarqueeReview)\n"],
+  "mappings": "AAsDI,cAAAA,EAeI,QAAAC,MAfJ,oBAtDJ,OAAS,QAAAC,EAAM,WAAAC,EAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,4BACnE,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,IACfhB,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIiB,EAAO,CAAC,CAAE,KAAAC,CAAK,IAEjBjB,EAAC,OAAI,UAAU,uLACb,UAAAA,EAAC,OAAI,UAAU,uBACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,KAAMgB,EAAK,KAAM,UAAU,sBAAsB,EAChElB,EAACE,EAAA,CAAK,KAAM,EAAG,KAAMgB,EAAK,KAAM,UAAU,sBAAsB,EAChElB,EAAC,OAAI,UAAU,kBACZ,aAAI,MAAMkB,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,IAC3Cf,EAACgB,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,EACAd,EAACG,EAAA,CAAO,KAAK,QAAQ,UAAU,sDAC7B,UAAAJ,EAACK,EAAA,CAAY,IAAKa,EAAK,QAAQ,IAAK,IAAKA,EAAK,QAAQ,KAAO,GAAI,EACjElB,EAACM,EAAA,CAAiB,UAAAY,EAAK,MAAQ,IAAI,MAAM,EAAG,CAAC,EAAE,YAAY,EAAE,GAC/D,GACF,EACAlB,EAAC,OACC,SAAAA,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAM,IAAIe,EAAK,OAAO,GAAI,UAAU,uCAAuC,EACvG,GACF,EA2BJ,SAASC,EAAc,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAuB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,OAAQ,EAAIL,EAEnDM,EAAaf,EACjBa,EAAM,OAASf,EAAmB,CAAC,GAAGe,EAAO,GAAGA,EAAM,MAAMf,EAAmBe,EAAM,MAAM,CAAC,EAAIA,EAChGd,CACF,EACG,MAAM,EAAG,CAAC,EACV,IAAIQ,GAAQ,CAAC,GAAGA,EAAM,GAAGA,CAAI,CAAC,EAEjC,OACEjB,EAAC,WACC,UAAWM,EAAG,mEAAoEc,EAAW,CAC3F,YAAaI,IAAU,MACzB,CAAC,EAED,UAAAzB,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMmB,EAAO,UAAU,sCAAsC,EACvFtB,EAACE,EAAA,CACC,KAAM,EACN,KAAMqB,EACN,UAAU,8KACZ,EACAvB,EAAC,OACC,UAAWO,EACT,2HACF,EAEC,SAAAmB,EAAW,IAAI,CAACF,EAAOT,IACtBf,EAAC,OAEC,UAAWO,EAAG,mEAAoE,CAChF,SAAUQ,IAAU,GAAKA,IAAU,EACnC,sBAAuBA,IAAU,EACjC,qBAAsBA,IAAU,CAClC,CAAC,EAEA,SAAAS,EAAM,IAAI,CAACN,EAAMS,IAChB3B,EAACiB,EAAA,CAAsB,KAAMC,GAAlBS,CAAwB,CACpC,GATIZ,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOa,EAAQpB,EAAWW,CAAa",
   "names": ["jsx", "jsxs", "Text", "Heading", "Avatar", "AvatarImage", "AvatarFallback", "cn", "withLayout", "FIX_ITEMS_LENGTH", "COUNT", "_chunk", "array", "size", "_", "index", "StarIcon", "Card", "item", "MarqueeReview", "data", "className", "title", "subtitle", "items", "theme", "chunkItems", "innerIndex", "MarqueeReview_default"]
 }

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

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

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

@@ -0,0 +1,11 @@
+"use client";import{Fragment as O,jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as M,useRef as h,useEffect as R,forwardRef as j,useImperativeHandle as H}from"react";import{useMediaQuery as z}from"react-responsive";import{cn as x}from"../../helpers/utils.js";import{withLayout as B}from"../../shared/Styles.js";import{Heading as p,Text as T,Picture as A}from"../../components/index.js";import"../SwiperBox/index.js";import{useExposure as I}from"../../hooks/useExposure.js";import{Swiper as V,SwiperSlide as _}from"swiper/react";import{Autoplay as q}from"swiper/modules";import"swiper/css";const y="media",U="media_scene_switcher",u=3e3,F=({data:t,configuration:a})=>{const c=h(null),d=a?.isActive||!1;return I(c,{componentType:y,componentName:U,componentTitle:t?.title,position:(a?.index??0)+1}),r("div",{ref:c,className:x("media-scene-switcher-item cursor-pointer overflow-hidden rounded-[16px] transition-colors","text-[#B6B6BA]",{"bg-[#1D1D1F] text-white":d}),onClick:()=>a?.onItemClick?.(a?.index??0),children:[r("div",{className:"media-scene-switcher-item-content flex items-center justify-between gap-[24px] laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px]",children:[e("div",{className:"media-scene-switcher-item-title flex-1",children:e(p,{as:"h6",size:2,html:t?.title})}),e("div",{className:"media-scene-switcher-item-badge rounded-[200px] border-[1.6px] px-[18px] py-[7px]",children:e(p,{as:"h6",size:2,html:t?.tag})})]}),e("div",{className:x("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":d}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:d?`progress-bar ${u}ms ease-out`:"none"}})]})},$=({data:t,configuration:a})=>{const c=h(null),d=a?.isActive||!1,v=z({query:"(max-width: 768px)"});I(c,{componentType:y,componentName:U,componentTitle:t?.title,position:(a?.index??0)+1});const o=v&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,n=v&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,s=n||t?.videoUrl?.thumbnailURL||"";return r("div",{ref:c,className:"media-scene-switcher-mobile-item flex h-[360px] w-[296px] flex-col overflow-hidden rounded-[16px]",children:[e("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:o?e("video",{src:o,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:s,className:"size-full object-cover"}):n?e(A,{className:"size-full",imgClassName:"size-full object-cover",source:n,alt:t?.title||""}):null}),r("div",{className:"media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] bg-[#1D1D1F] p-[16px] text-white",children:[e("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:e(p,{as:"h6",size:2,html:t?.title})}),e("div",{className:"media-scene-switcher-mobile-badge flex-shrink-0 rounded-[200px] border-[1.6px] px-[12px] py-[5px]",children:e(p,{as:"h6",size:1,html:t?.tag})})]}),e("div",{className:x("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":d}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:d?`progress-bar ${u}ms ease-out`:"none"}})]})},P=j(({className:t="",data:a,id:c,style:d},v)=>{const{title:o,subtitle:n,items:s=[]}=a||{},[f,w]=M(0),[D,L]=M(0),b=h(null),m=h(0),k=z({query:"(max-width: 1023px)"});H(v,()=>b.current),I(b,{componentType:y,componentName:U,componentTitle:o}),R(()=>{if(!(k||s.length===0))return m.current=window.setInterval(()=>{w(i=>(i+1)%s.length)},u),()=>{m.current&&window.clearInterval(m.current)}},[k,s.length]);const C=i=>{w(i),m.current&&window.clearInterval(m.current),m.current=window.setInterval(()=>{w(l=>(l+1)%s.length)},u)},g=s[f],Q=g?.videoUrl?.url,J=g?.imageUrl?.url||g?.videoUrl?.thumbnailURL||"";return r(O,{children:[e("style",{children:`
+          @keyframes progress-bar {
+            from {
+              transform: translate3d(-100%, -2px, 0);
+            }
+            to {
+              transform: translate3d(0, -2px, 0);
+            }
+          }
+        `}),r("section",{id:c,ref:b,className:x("media-scene-switcher w-full overflow-hidden text-white",t),children:[r("div",{className:"media-scene-switcher-desktop hidden w-full items-stretch gap-[40px] overflow-hidden laptop:flex",children:[e("div",{className:"media-scene-switcher-preview relative aspect-[824/640] max-w-[824px] flex-shrink-0 overflow-hidden rounded-[16px] laptop:flex-1",children:s.map((i,l)=>{const S=i?.videoUrl?.url,N=i?.imageUrl?.url,E=N||i?.videoUrl?.thumbnailURL||"";return e("div",{className:x("media-scene-switcher-media absolute inset-0 hidden size-full overflow-hidden rounded-[16px]",{"inline-block":l===f}),children:S?e("video",{src:S,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:E,className:"size-full object-cover"}):N?e(A,{className:"size-full",imgClassName:"size-full object-cover",source:N,alt:i?.title||""}):null},i.id||l)})}),r("div",{className:"media-scene-switcher-sidebar flex flex-shrink-0 flex-col justify-between laptop:flex-1",children:[r("div",{className:"media-scene-switcher-header flex flex-col",children:[o&&e(p,{as:"h3",html:o,size:4,className:"media-scene-switcher-title text-[40px] leading-tight tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px]"}),n&&e(T,{as:"span",size:4,html:n,className:"media-scene-switcher-subtitle relative -top-2 text-[14px] text-white tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:s.map((i,l)=>e(F,{data:i,configuration:{index:l,isActive:l===f,onItemClick:C}},i.id||l))})]})]}),r("div",{className:"media-scene-switcher-mobile flex flex-col overflow-visible laptop:hidden",children:[r("div",{className:"media-scene-switcher-mobile-header",children:[o&&e(p,{as:"h2",html:o,size:2,className:"media-scene-switcher-title text-[40px] leading-tight tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px]"}),n&&e(T,{as:"span",size:4,html:n,className:"media-scene-switcher-subtitle text-[14px] text-white"})]}),e("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:e(V,{onSlideChange:i=>L(i.realIndex),initialSlide:0,modules:[q],loop:s.length>1,autoplay:s.length>1?{delay:u,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:s.map((i,l)=>e(_,{className:"!h-auto !w-[296px]",children:e($,{data:i,configuration:{index:l,isActive:l===D}})},i.id||l))})})]})]})]})});P.displayName="MediaSceneSwitcher";var ae=B(P);export{ae as default};
+//# sourceMappingURL=MediaSceneSwitcher.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n  data: MediaSceneSwitcherItem\n  configuration?: {\n    index: number\n    isActive?: boolean\n    onItemClick?: (index: number) => void\n  }\n}\n\nconst DesktopItem = ({ data, configuration }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'media-scene-switcher-item cursor-pointer overflow-hidden rounded-[16px] transition-colors',\n        'text-[#B6B6BA]',\n        {\n          'bg-[#1D1D1F] text-white': isActive,\n        }\n      )}\n      onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n    >\n      <div className=\"media-scene-switcher-item-content flex items-center justify-between gap-[24px] laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px]\">\n        <div className=\"media-scene-switcher-item-title flex-1\">\n          <Heading as=\"h6\" size={2} html={data?.title} />\n        </div>\n        <div className=\"media-scene-switcher-item-badge rounded-[200px] border-[1.6px] px-[18px] py-[7px]\">\n          <Heading as=\"h6\" size={2} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, -2px, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration }: ItemProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const isActive = configuration?.isActive || false\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: (configuration?.index ?? 0) + 1,\n  })\n\n  const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n  const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n  const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n  return (\n    <div\n      ref={ref}\n      className=\"media-scene-switcher-mobile-item flex h-[360px] w-[296px] flex-col overflow-hidden rounded-[16px]\"\n    >\n      <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n        {videoUrl ? (\n          <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n        ) : imageUrl ? (\n          <Picture\n            className=\"size-full\"\n            imgClassName=\"size-full object-cover\"\n            source={imageUrl}\n            alt={data?.title || ''}\n          />\n        ) : null}\n      </div>\n      <div className=\"media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] bg-[#1D1D1F] p-[16px] text-white\">\n        <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n          <Heading as=\"h6\" size={2} html={data?.title} />\n        </div>\n        <div className=\"media-scene-switcher-mobile-badge flex-shrink-0 rounded-[200px] border-[1.6px] px-[12px] py-[5px]\">\n          <Heading as=\"h6\" size={1} html={data?.tag} />\n        </div>\n      </div>\n      <div\n        className={cn('media-scene-switcher-progress h-[2px] w-full', {\n          'media-scene-switcher-progress-active': isActive,\n        })}\n        style={{\n          transform: 'translate3d(-100%, -2px, 0)',\n          background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n          animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n        }}\n      />\n    </div>\n  )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n  ({ className = '', data, id, style }, ref) => {\n    const { title, subtitle, items = [] } = data || {}\n    const [currentIndex, setCurrentIndex] = useState(0)\n    const [activeIndex, setActiveIndex] = useState(0)\n    const innerRef = useRef<HTMLDivElement>(null)\n    const intervalRef = useRef<number>(0)\n    const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n    })\n\n    // Auto-play functionality for desktop\n    useEffect(() => {\n      if (isMobile || items.length === 0) return\n\n      intervalRef.current = window.setInterval(() => {\n        setCurrentIndex(prev => (prev + 1) % items.length)\n      }, INTERVAL_TIME)\n\n      return () => {\n        if (intervalRef.current) {\n          window.clearInterval(intervalRef.current)\n        }\n      }\n    }, [isMobile, items.length])\n\n    const handleItemClick = (index: number) => {\n      setCurrentIndex(index)\n      if (intervalRef.current) {\n        window.clearInterval(intervalRef.current)\n      }\n      intervalRef.current = window.setInterval(() => {\n        setCurrentIndex(prev => (prev + 1) % items.length)\n      }, INTERVAL_TIME)\n    }\n\n    const currentItem = items[currentIndex]\n    const videoUrl = currentItem?.videoUrl?.url\n    const imageUrl = currentItem?.imageUrl?.url\n    const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n    return (\n      <>\n        <style>{`\n          @keyframes progress-bar {\n            from {\n              transform: translate3d(-100%, -2px, 0);\n            }\n            to {\n              transform: translate3d(0, -2px, 0);\n            }\n          }\n        `}</style>\n        <section\n          id={id}\n          ref={innerRef}\n          className={cn('media-scene-switcher w-full overflow-hidden text-white', className)}\n        >\n          {/* Desktop Layout */}\n          <div className=\"media-scene-switcher-desktop hidden w-full items-stretch gap-[40px] overflow-hidden laptop:flex\">\n            <div className=\"media-scene-switcher-preview relative aspect-[824/640] max-w-[824px] flex-shrink-0 overflow-hidden rounded-[16px] laptop:flex-1\">\n              {items.map((item, index) => {\n                const itemVideoUrl = item?.videoUrl?.url\n                const itemImageUrl = item?.imageUrl?.url\n                const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n                return (\n                  <div\n                    key={item.id || index}\n                    className={cn(\n                      'media-scene-switcher-media absolute inset-0 hidden size-full overflow-hidden rounded-[16px]',\n                      {\n                        'inline-block': index === currentIndex,\n                      }\n                    )}\n                  >\n                    {itemVideoUrl ? (\n                      <video\n                        src={itemVideoUrl}\n                        playsInline\n                        autoPlay\n                        loop\n                        muted\n                        poster={itemPosterUrl}\n                        className=\"size-full object-cover\"\n                      />\n                    ) : itemImageUrl ? (\n                      <Picture\n                        className=\"size-full\"\n                        imgClassName=\"size-full object-cover\"\n                        source={itemImageUrl}\n                        alt={item?.title || ''}\n                      />\n                    ) : null}\n                  </div>\n                )\n              })}\n            </div>\n\n            <div className=\"media-scene-switcher-sidebar flex flex-shrink-0 flex-col justify-between laptop:flex-1\">\n              <div className=\"media-scene-switcher-header flex flex-col\">\n                {title && (\n                  <Heading\n                    as=\"h3\"\n                    html={title}\n                    size={4}\n                    className=\"media-scene-switcher-title text-[40px] leading-tight tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px]\"\n                  />\n                )}\n                {subtitle && (\n                  <Text\n                    as=\"span\"\n                    size={4}\n                    html={subtitle}\n                    className=\"media-scene-switcher-subtitle relative -top-2 text-[14px] text-white tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  />\n                )}\n              </div>\n\n              <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n                {items.map((item, index) => (\n                  <DesktopItem\n                    key={item.id || index}\n                    data={item}\n                    configuration={{\n                      index,\n                      isActive: index === currentIndex,\n                      onItemClick: handleItemClick,\n                    }}\n                  />\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* Mobile Layout */}\n          <div className=\"media-scene-switcher-mobile flex flex-col overflow-visible laptop:hidden\">\n            <div className=\"media-scene-switcher-mobile-header\">\n              {title && (\n                <Heading\n                  as=\"h2\"\n                  html={title}\n                  size={2}\n                  className=\"media-scene-switcher-title text-[40px] leading-tight tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px]\"\n                />\n              )}\n              {subtitle && (\n                <Text\n                  as=\"span\"\n                  size={4}\n                  html={subtitle}\n                  className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n                />\n              )}\n            </div>\n\n            <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n              <Swiper\n                onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n                initialSlide={0}\n                modules={[Autoplay]}\n                loop={items.length > 1}\n                autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n                spaceBetween={12}\n                slidesPerView=\"auto\"\n                watchSlidesProgress={true}\n                className=\"w-full !overflow-visible\"\n              >\n                {items.map((item, index) => (\n                  <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n                    <MobileItem\n                      data={item}\n                      configuration={{\n                        index,\n                        isActive: index === activeIndex,\n                      }}\n                    />\n                  </SwiperSlide>\n                ))}\n              </Swiper>\n            </div>\n          </div>\n        </section>\n      </>\n    )\n  }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "useMediaQuery", "cn", "withLayout", "Heading", "Text", "Picture", "useExposure", "Swiper", "SwiperSlide", "Autoplay", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "style", "title", "subtitle", "items", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper", "MediaSceneSwitcher_default"]
+}

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

@@ -0,0 +1,2 @@
+export { default } from './MediaSceneSwitcher.js';
+export * from './types.js';

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

@@ -0,0 +1,2 @@
+import{default as e}from"./MediaSceneSwitcher.js";export*from"./types.js";export{e as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaSceneSwitcher/index.ts"],
+  "sourcesContent": ["export { default } from './MediaSceneSwitcher.js'\nexport * from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe,0BACxB,WAAc",
+  "names": ["default"]
+}

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

@@ -0,0 +1,17 @@
+import type { ComponentCommonProps, Media } from '../../types/props.js';
+export interface MediaSceneSwitcherItem {
+    id: string;
+    title: string;
+    tag?: string;
+    videoUrl?: Media | null;
+    imageUrl?: Media | null;
+    mobVideoUrl?: Media | null;
+    mobImageUrl?: Media | null;
+}
+export interface MediaSceneSwitcherProps extends ComponentCommonProps {
+    data: {
+        title?: string;
+        subtitle?: string;
+        items?: MediaSceneSwitcherItem[];
+    };
+}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

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

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

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

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

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

@@ -0,0 +1,2 @@
+"use client";import{Fragment as D,jsx as e,jsxs as o}from"react/jsx-runtime";import _,{useRef as c,useImperativeHandle as g}from"react";import{Heading as a,Picture as n,Text as p}from"../../components/index.js";import{cn as u}from"../../helpers/utils.js";import{withLayout as k}from"../../shared/Styles.js";import{useExposure as N}from"../../hooks/useExposure.js";import{Swiper as h,SwiperSlide as f}from"swiper/react";import{Navigation as S,EffectCoverflow as y}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";import"swiper/css/effect-coverflow";const T="carousel",C="three_d_carousel",L=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),E=()=>o("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",children:[e("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),m=_.forwardRef(({data:w,className:x},v)=>{const{title:i,items:d=[]}=w,r=c(null),l=c(null);return N(l,{componentType:T,componentName:C,componentTitle:i}),g(v,()=>l.current),o("section",{ref:l,"data-ui-component-id":"ThreeDCarousel",className:u("three-d-carousel w-full overflow-visible text-white laptop:overflow-hidden",x),children:[e(a,{as:"h1",size:4,html:i,className:"three-d-carousel__title text-left laptop:text-center"}),o("div",{className:"three-d-carousel__desktop relative mx-auto mt-[24px] hidden w-full laptop:block",children:[e(h,{onSwiper:t=>r.current=t,centeredSlides:!0,initialSlide:1,loop:!0,slidesPerView:"auto",loopAdditionalSlides:1,spaceBetween:0,grabCursor:!0,modules:[y,S],slideToClickedSlide:!0,className:"three-d-carousel__swiper relative aspect-[1386/502] overflow-visible rounded-[16px]",effect:"coverflow",coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:350,depth:300,modifier:1,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:334,depth:300,modifier:1,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:230,depth:300,modifier:1,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:286,depth:300,modifier:1,slideShadows:!0}}},children:d.map((t,s)=>e(f,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden",children:({isActive:b})=>o(D,{children:[e(n,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:u("three-d-carousel__image mx-auto overflow-hidden rounded-xl shadow-lg"),style:{filter:b?"":"brightness(50%) contrast(120%)"}}),o("div",{className:"three-d-carousel__image-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",children:[e(a,{as:"h2",size:2,html:t.title}),e(p,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px] text-white"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:e("button",{className:"three-d-carousel__image-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]})},s))}),o("div",{className:"three-d-carousel__nav-controls absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px]",children:[e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>r.current?.slidePrev(),"aria-label":"Previous slide",children:e(L,{})}),e("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>r.current?.slideNext(),"aria-label":"Next slide",children:e(E,{})})]})]}),e("div",{className:"three-d-carousel__mobile mt-[24px] block w-full overflow-visible laptop:hidden",children:e(h,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:d.map((t,s)=>o(f,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[e(n,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile mx-auto overflow-hidden rounded-xl shadow-lg"}),o("div",{className:"three-d-carousel__image-mobile-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",children:[e(a,{as:"h2",size:2,html:t.title}),e(p,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&e("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:e("button",{className:"three-d-carousel__image-mobile-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]},s))})})]})});m.displayName="ThreeDCarousel";var W=k(m);export{W as default};
+//# sourceMappingURL=ThreeDCarousel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"three-d-carousel__nav-icon scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n  const { title, items = [] } = data\n  const swiperRef = useRef<SwiperType | null>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ThreeDCarousel\"\n      className={cn('three-d-carousel w-full overflow-visible text-white laptop:overflow-hidden', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title text-left laptop:text-center\" />\n\n      {/* Desktop carousel with 3D effect */}\n      <div className=\"three-d-carousel__desktop relative mx-auto mt-[24px] hidden w-full laptop:block\">\n        <Swiper\n          onSwiper={swiper => (swiperRef.current = swiper)}\n          centeredSlides={true}\n          initialSlide={1}\n          loop\n          slidesPerView={'auto'}\n          loopAdditionalSlides={1}\n          spaceBetween={0}\n          grabCursor\n          modules={[EffectCoverflow, Navigation]}\n          slideToClickedSlide\n          className=\"three-d-carousel__swiper relative aspect-[1386/502] overflow-visible rounded-[16px]\"\n          effect=\"coverflow\"\n          coverflowEffect={{\n            rotate: 0,\n            stretch: 427,\n            depth: 300,\n            modifier: 1,\n            slideShadows: true,\n          }}\n          breakpoints={{\n            1921: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 427,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1490: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 350,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1441: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 334,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n            1025: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 230,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n            769: {\n              coverflowEffect: {\n                rotate: 0,\n                stretch: 286,\n                depth: 300,\n                modifier: 1,\n                slideShadows: true,\n              },\n            },\n          }}\n        >\n          {items.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden\"\n            >\n              {({ isActive }) => (\n                <>\n                  <Picture\n                    source={item.imageUrl?.url || ''}\n                    alt={item.imageUrl?.alt || item.title}\n                    className={cn('three-d-carousel__image mx-auto overflow-hidden rounded-xl shadow-lg')}\n                    style={{\n                      filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n                    }}\n                  />\n                  <div className=\"three-d-carousel__image-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1\">\n                    <Heading as=\"h2\" size={2} html={item.title} />\n                    <Text\n                      as=\"p\"\n                      size={4}\n                      html={item.description}\n                      className=\"three-d-carousel__image-description text-[14px] text-white\"\n                    />\n                    {item.buttonText && (\n                      <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n                        <button className=\"three-d-carousel__image-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold\">\n                          {item.buttonText}\n                        </button>\n                      </a>\n                    )}\n                  </div>\n                </>\n              )}\n            </SwiperSlide>\n          ))}\n        </Swiper>\n        <div className=\"three-d-carousel__nav-controls absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px]\">\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n            onClick={() => swiperRef.current?.slidePrev()}\n            aria-label=\"Previous slide\"\n          >\n            <ChevronLeft />\n          </button>\n          <button\n            className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n            onClick={() => swiperRef.current?.slideNext()}\n            aria-label=\"Next slide\"\n          >\n            <ChevronRight />\n          </button>\n        </div>\n      </div>\n\n      {/* Mobile carousel */}\n      <div className=\"three-d-carousel__mobile mt-[24px] block w-full overflow-visible laptop:hidden\">\n        <Swiper\n          loop={true}\n          slidesPerView={'auto'}\n          spaceBetween={12}\n          grabCursor\n          className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n        >\n          {items.map((item, index) => (\n            <SwiperSlide\n              key={index}\n              className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n            >\n              <Picture\n                source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n                alt={item.mobImageUrl?.alt || item.title}\n                className=\"three-d-carousel__image-mobile mx-auto overflow-hidden rounded-xl shadow-lg\"\n              />\n              <div className=\"three-d-carousel__image-mobile-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1\">\n                <Heading as=\"h2\" size={2} html={item.title} />\n                <Text\n                  as=\"p\"\n                  size={4}\n                  html={item.description}\n                  className=\"three-d-carousel__image-mobile-description text-[14px] text-white\"\n                />\n                {item.buttonText && (\n                  <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n                    <button className=\"three-d-carousel__image-mobile-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold\">\n                      {item.buttonText}\n                    </button>\n                  </a>\n                )}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Navigation", "EffectCoverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "data", "className", "ref", "title", "items", "swiperRef", "boxRef", "swiper", "item", "index", "isActive", "ThreeDCarousel_default"]
+}

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

@@ -1,15 +1,2 @@
-interface CarouselItem {
-    imageUrl: string;
-    mobImageUrl?: string;
-    title?: string;
-    description?: string;
-}
-interface ThreeDCarouselProps {
-    data: {
-        title?: string;
-        items: CarouselItem[];
-    };
-    className?: string;
-}
-export default function ThreeDCarousel({ data, className }: ThreeDCarouselProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
+export { default } from './ThreeDCarousel.js';
+export type { ThreeDCarouselProps, ThreeDCarouselItem } from './types.js';

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as l}from"react/jsx-runtime";import"react";import{Heading as O,Picture as D}from"../../components/index.js";import{useRef as x,useState as u,useEffect as E,useCallback as i}from"react";import{cn as C}from"../../helpers/index.js";const F=()=>l("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]",children:[t("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),K=()=>l("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]",children:[t("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]});function Z({data:I,className:S}){const R=x(null),T=x(null),z=x(null),{title:b,items:s=[]}=I,[p,d]=u(1),[a,k]=u(!1),[y,U]=u(0),[N,X]=u(0),r=s.length>0?[s[s.length-1],...s,s[0]]:[],v=i(()=>{d(e=>{const o=e-1;return o<0?r.length-2:o})},[r.length]),h=i(()=>{d(e=>{const o=e+1;return o>=r.length-1?1:o})},[r.length]),A=e=>{k(!0),U(e.pageX),X(p)},m=i(e=>{if(!a)return;e.preventDefault();const o=e.pageX,n=(y-o)/100,c=Math.round(N+n);c>=0&&c<r.length&&d(c)},[a,y,N,r.length]),w=i(()=>{k(!1)},[]),H=i(e=>{},[]),g=i(e=>{e.key==="ArrowLeft"?v():e.key==="ArrowRight"&&h()},[v,h]);E(()=>{if(a)return document.addEventListener("mousemove",m),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",w)}},[a,m,w]),E(()=>(window.addEventListener("keydown",g),()=>{window.removeEventListener("keydown",g)}),[g]);const P=e=>{const o=e-p,n=Math.abs(o),c=typeof window<"u"&&window.innerWidth>=1921,L=typeof window<"u"&&window.innerWidth>=1441,M=typeof window<"u"&&window.innerWidth>=1025;let f=427;!c&&L?f=334:!L&&M?f=230:M||(f=286);const W=o*f,j=n===0?0:-300*n,B=n===0?1:.85-n*.1,_=n===0?1:.6,$=n===0?100:50;return{transform:`translateX(${W}px) translateZ(${j}px) scale(${Math.max(B,.5)})`,opacity:Math.max(_,.3),filter:`brightness(${$}%) contrast(120%)`,transition:a?"none":"all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",zIndex:100-n}};return!s||s.length===0?null:l("section",{className:C("laptop:overflow-hidden w-full overflow-visible text-white",S),ref:R,children:[b&&t(O,{as:"h1",size:4,html:b,className:"laptop:text-center text-left"}),t("div",{className:"laptop:block relative mx-auto mt-[24px] hidden w-full",children:l("div",{className:"relative mx-auto h-[480px] w-full overflow-visible",style:{perspective:"1200px"},children:[t("div",{ref:T,className:C("absolute left-1/2 top-1/2 h-full w-[824px] -translate-x-1/2 -translate-y-1/2",a?"cursor-grabbing":"cursor-grab"),style:{transformStyle:"preserve-3d"},onMouseDown:A,children:r.map((e,o)=>t("div",{className:"absolute left-1/2 top-0 h-full w-[824px] -translate-x-1/2 overflow-hidden rounded-[16px]",style:P(o),onClick:()=>o!==p&&d(o),children:l("div",{className:"relative size-full",children:[t(D,{source:e.imageUrl,alt:e.title||"",className:"size-full object-cover"}),t("div",{className:"absolute inset-0 bg-black/60"}),e.title&&l("div",{className:"absolute inset-x-0 bottom-0 p-8",children:[t("h3",{className:"font-['Mont_For_Anker:SemiBold'] text-[32px] leading-[1.2] tracking-[-1.28px] text-white",children:e.title}),e.description&&t("p",{className:"mt-1 font-['Mont_For_Anker:SemiBold'] text-[18px] leading-[1.4] tracking-[-0.36px] text-white",children:e.description})]})]})},o))}),l("div",{className:"laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] pointer-events-none absolute left-1/2 top-1/2 z-[200] flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[t("button",{onClick:v,className:"pointer-events-auto transition-transform hover:scale-110 active:scale-95","aria-label":"Previous slide",children:t(F,{})}),t("button",{onClick:h,className:"pointer-events-auto transition-transform hover:scale-110 active:scale-95","aria-label":"Next slide",children:t(K,{})})]})]})}),t("div",{className:"laptop:hidden mt-[24px] block w-full",children:t("div",{ref:z,className:"flex gap-3 overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",onScroll:H,children:s.map((e,o)=>l("div",{className:"relative h-[360px] w-[296px] flex-shrink-0 overflow-hidden rounded-xl shadow-lg",children:[t(D,{source:e.mobImageUrl||e.imageUrl,alt:e.title||"",className:"size-full object-cover"}),e.title&&t("div",{className:"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-6",children:t("p",{className:"text-[24px] leading-[1.2] tracking-[-0.96px] text-white",children:e.title})})]},o))})})]})}export{Z as default};
+import{default as o}from"./ThreeDCarousel.js";export{o as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/biz-components/ThreeDCarousel/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Heading, Picture } from '../../components/index.js'\nimport { useRef, useState, useEffect, useCallback } from 'react'\nimport { cn } from '../../helpers/index.js'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\ninterface CarouselItem {\n  imageUrl: string\n  mobImageUrl?: string\n  title?: string\n  description?: string\n}\n\ninterface ThreeDCarouselProps {\n  data: {\n    title?: string\n    items: CarouselItem[]\n  }\n  className?: string\n}\n\nexport default function ThreeDCarousel({ data, className }: ThreeDCarouselProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const trackRef = useRef<HTMLDivElement>(null)\n  const mobileTrackRef = useRef<HTMLDivElement>(null)\n  const { title, items = [] } = data\n\n  const [activeIndex, setActiveIndex] = useState(1)\n  const [isDragging, setIsDragging] = useState(false)\n  const [startX, setStartX] = useState(0)\n  const [scrollLeft, setScrollLeft] = useState(0)\n\n  // \u521B\u5EFA\u5FAA\u73AF\u6570\u7EC4\uFF08\u5728\u5F00\u5934\u548C\u7ED3\u5C3E\u6DFB\u52A0\u514B\u9686\uFF09\n  const extendedItems = items.length > 0 ? [items[items.length - 1], ...items, items[0]] : []\n\n  // \u5904\u7406\u684C\u9762\u7AEF\u5207\u6362\n  const handlePrev = useCallback(() => {\n    setActiveIndex(prev => {\n      const newIndex = prev - 1\n      if (newIndex < 0) {\n        return extendedItems.length - 2\n      }\n      return newIndex\n    })\n  }, [extendedItems.length])\n\n  const handleNext = useCallback(() => {\n    setActiveIndex(prev => {\n      const newIndex = prev + 1\n      if (newIndex >= extendedItems.length - 1) {\n        return 1\n      }\n      return newIndex\n    })\n  }, [extendedItems.length])\n\n  // \u5904\u7406\u684C\u9762\u7AEF\u62D6\u62FD\n  const handleMouseDown = (e: React.MouseEvent) => {\n    setIsDragging(true)\n    setStartX(e.pageX)\n    setScrollLeft(activeIndex)\n  }\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging) return\n      e.preventDefault()\n      const x = e.pageX\n      const walk = (startX - x) / 100 // \u8C03\u6574\u7075\u654F\u5EA6\n      const newIndex = Math.round(scrollLeft + walk)\n\n      if (newIndex >= 0 && newIndex < extendedItems.length) {\n        setActiveIndex(newIndex)\n      }\n    },\n    [isDragging, startX, scrollLeft, extendedItems.length]\n  )\n\n  const handleMouseUp = useCallback(() => {\n    setIsDragging(false)\n  }, [])\n\n  // \u5904\u7406\u79FB\u52A8\u7AEF\u6EDA\u52A8\uFF08\u7528\u4E8E\u672A\u6765\u53EF\u80FD\u7684\u6EDA\u52A8\u6307\u793A\u5668\uFF09\n  const handleMobileScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {\n    // \u53EF\u4EE5\u5728\u8FD9\u91CC\u6DFB\u52A0\u6EDA\u52A8\u4F4D\u7F6E\u8FFD\u8E2A\u903B\u8F91\n  }, [])\n\n  // \u952E\u76D8\u4E8B\u4EF6\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft') {\n        handlePrev()\n      } else if (e.key === 'ArrowRight') {\n        handleNext()\n      }\n    },\n    [handlePrev, handleNext]\n  )\n\n  useEffect(() => {\n    if (isDragging) {\n      document.addEventListener('mousemove', handleMouseMove)\n      document.addEventListener('mouseup', handleMouseUp)\n      return () => {\n        document.removeEventListener('mousemove', handleMouseMove)\n        document.removeEventListener('mouseup', handleMouseUp)\n      }\n    }\n  }, [isDragging, handleMouseMove, handleMouseUp])\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleKeyDown)\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [handleKeyDown])\n\n  // \u8BA1\u7B97\u6BCF\u4E2A\u5361\u7247\u7684\u53D8\u6362\n  const getCardStyle = (index: number) => {\n    const offset = index - activeIndex\n    const absOffset = Math.abs(offset)\n\n    // \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u8C03\u6574\u53C2\u6570\n    const isLargeDesktop = typeof window !== 'undefined' && window.innerWidth >= 1921\n    const isDesktop = typeof window !== 'undefined' && window.innerWidth >= 1441\n    const isSmallDesktop = typeof window !== 'undefined' && window.innerWidth >= 1025\n\n    let stretch = 427\n    if (!isLargeDesktop && isDesktop) stretch = 334\n    else if (!isDesktop && isSmallDesktop) stretch = 230\n    else if (!isSmallDesktop) stretch = 286\n\n    // \u8BA1\u7B97\u4F4D\u7F6E\n    const translateX = offset * stretch\n    const translateZ = absOffset === 0 ? 0 : -300 * absOffset\n    const scale = absOffset === 0 ? 1 : 0.85 - absOffset * 0.1\n    const opacity = absOffset === 0 ? 1 : 0.6\n    const brightness = absOffset === 0 ? 100 : 50\n\n    return {\n      transform: `translateX(${translateX}px) translateZ(${translateZ}px) scale(${Math.max(scale, 0.5)})`,\n      opacity: Math.max(opacity, 0.3),\n      filter: `brightness(${brightness}%) contrast(120%)`,\n      transition: isDragging ? 'none' : 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',\n      zIndex: 100 - absOffset,\n    }\n  }\n\n  if (!items || items.length === 0) {\n    return null\n  }\n\n  return (\n    <section className={cn('laptop:overflow-hidden w-full overflow-visible text-white', className)} ref={containerRef}>\n      {title && <Heading as=\"h1\" size={4} html={title} className=\"laptop:text-center text-left\" />}\n\n      {/* \u684C\u9762\u7AEF 3D \u8F6E\u64AD */}\n      <div className=\"laptop:block relative mx-auto mt-[24px] hidden w-full\">\n        <div className=\"relative mx-auto h-[480px] w-full overflow-visible\" style={{ perspective: '1200px' }}>\n          <div\n            ref={trackRef}\n            className={cn(\n              'absolute left-1/2 top-1/2 h-full w-[824px] -translate-x-1/2 -translate-y-1/2',\n              isDragging ? 'cursor-grabbing' : 'cursor-grab'\n            )}\n            style={{ transformStyle: 'preserve-3d' }}\n            onMouseDown={handleMouseDown}\n          >\n            {extendedItems.map((item, index) => (\n              <div\n                key={index}\n                className=\"absolute left-1/2 top-0 h-full w-[824px] -translate-x-1/2 overflow-hidden rounded-[16px]\"\n                style={getCardStyle(index)}\n                onClick={() => index !== activeIndex && setActiveIndex(index)}\n              >\n                <div className=\"relative size-full\">\n                  <Picture source={item.imageUrl} alt={item.title || ''} className=\"size-full object-cover\" />\n                  <div className=\"absolute inset-0 bg-black/60\" />\n                  {item.title && (\n                    <div className=\"absolute inset-x-0 bottom-0 p-8\">\n                      <h3 className=\"font-['Mont_For_Anker:SemiBold'] text-[32px] leading-[1.2] tracking-[-1.28px] text-white\">\n                        {item.title}\n                      </h3>\n                      {item.description && (\n                        <p className=\"mt-1 font-['Mont_For_Anker:SemiBold'] text-[18px] leading-[1.4] tracking-[-0.36px] text-white\">\n                          {item.description}\n                        </p>\n                      )}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* \u5BFC\u822A\u6309\u94AE */}\n          <div className=\"laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] pointer-events-none absolute left-1/2 top-1/2 z-[200] flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n            <button\n              onClick={handlePrev}\n              className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n              aria-label=\"Previous slide\"\n            >\n              <ChevronLeft />\n            </button>\n            <button\n              onClick={handleNext}\n              className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n              aria-label=\"Next slide\"\n            >\n              <ChevronRight />\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* \u79FB\u52A8\u7AEF\u6A2A\u5411\u6EDA\u52A8 */}\n      <div className=\"laptop:hidden mt-[24px] block w-full\">\n        <div\n          ref={mobileTrackRef}\n          className=\"flex gap-3 overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n          onScroll={handleMobileScroll}\n        >\n          {items.map((item, index) => (\n            <div\n              key={index}\n              className=\"relative h-[360px] w-[296px] flex-shrink-0 overflow-hidden rounded-xl shadow-lg\"\n            >\n              <Picture\n                source={item.mobImageUrl || item.imageUrl}\n                alt={item.title || ''}\n                className=\"size-full object-cover\"\n              />\n              {item.title && (\n                <div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-6\">\n                  <p className=\"text-[24px] leading-[1.2] tracking-[-0.96px] text-white\">{item.title}</p>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "Heading", "Picture", "useRef", "useState", "useEffect", "useCallback", "cn", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "data", "className", "containerRef", "trackRef", "mobileTrackRef", "title", "items", "activeIndex", "setActiveIndex", "isDragging", "setIsDragging", "startX", "setStartX", "scrollLeft", "setScrollLeft", "extendedItems", "handlePrev", "prev", "newIndex", "handleNext", "handleMouseDown", "handleMouseMove", "x", "walk", "handleMouseUp", "handleMobileScroll", "handleKeyDown", "getCardStyle", "index", "offset", "absOffset", "isLargeDesktop", "isDesktop", "isSmallDesktop", "stretch", "translateX", "translateZ", "scale", "opacity", "brightness", "item"]
+  "sources": ["../../../../src/biz-components/ThreeDCarousel/index.ts"],
+  "sourcesContent": ["export { default } from './ThreeDCarousel.js'\nexport type { ThreeDCarouselProps, ThreeDCarouselItem } from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe",
+  "names": ["default"]
 }

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

@@ -0,0 +1,24 @@
+import type { Media } from '../../types/props';
+export interface ThreeDCarouselItem {
+    /** 桌面端图片 */
+    imageUrl: Media | null;
+    /** 移动端图片 */
+    mobImageUrl: Media | null;
+    /** 标题 */
+    title: string;
+    /** 描述 */
+    description: string;
+    /** 按钮文本 */
+    buttonText?: string;
+    /** 按钮链接 */
+    buttonLink?: string | null;
+}
+export interface ThreeDCarouselProps {
+    data: {
+        title: string;
+        /** 轮播项列表 */
+        items: ThreeDCarouselItem[];
+    };
+    /** 自定义类名 */
+    className?: string;
+}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

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

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

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

@@ -80,6 +80,10 @@ export { default as ProductHero } from './ProductHero/index.js';
 export type { ProductHeroProps } from './ProductHero/index.js';
 export { default as SpecsComparison } from './SpecsComparison/index.js';
 export type { SpecsComparisonProps, SpecsComparisonMenuItem, SpecsComparisonLeftMenuItem, } from './SpecsComparison/index.js';
+export { default as MediaSceneSwitcher } from './MediaSceneSwitcher/index.js';
+export type { MediaSceneSwitcherProps } from './MediaSceneSwitcher/types.js';
+export { default as ThreeDCarousel } from './ThreeDCarousel/index.js';
+export type { ThreeDCarouselProps } from './ThreeDCarousel/index.js';
 export declare const PAYLOAD_COMPONENT_MAP: {
     'ipc-accordioncards': string;
     'ipc-aplusdesc': string;
@@ -115,4 +119,5 @@ export declare const PAYLOAD_COMPONENT_MAP: {
     'ipc-text-marquee': string;
     'ipc-title': string;
     'ipc-whychoose': string;
+    ksp: string;
 };

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

@@ -1,2 +1,2 @@
-import{default as t}from"./BrandEquity/index.js";import{default as p}from"./MemberEquity/index.js";import{default as i}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as c}from"./Spacer/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as n}from"./Evaluate/index.js";import{default as P}from"./Category/index.js";import{default as g}from"./HeroBanner/index.js";import{default as S}from"./AccordionCards/index.js";import{default as T}from"./Graphic/index.js";import{default as I}from"./MediaPlayerBase/index.js";import{default as F}from"./MediaPlayerSticky/index.js";import{default as G}from"./MediaPlayerMulti/index.js";import{default as j}from"./Marquee/index.js";import{default as k}from"./MarqueeReview/index.js";import{default as D}from"./WhyChoose/index.js";import{default as E}from"./Faq/index.js";import{MarqueeItem as H,MarqueeImageContent as O,MarqueeTextContent as R}from"./Marquee/index.js";import{default as N}from"./MultiLayoutGraphicBlock/index.js";import{default as V}from"./GraphicAttractionBlock/index.js";import{default as Y}from"./HeaderNavigation/index.js";import{default as Q}from"./FooterNavigation/index.js";import{default as X}from"./SearchPage/index.js";import{IPC_SEARCH_PAGE as $,SearchPageTabType as ee}from"./SearchPage/types.js";import{withLayout as ae}from"../shared/Styles.js";import{default as oe}from"./AiuiProvider/index.js";import{default as se}from"./Tabs/index.js";import{default as fe}from"./CreativeModule/index.js";import{default as de}from"./GraphicOverlay/index.js";import{default as le}from"./Specs/index.js";import{default as xe}from"./TabsGroup/index.js";import{default as he}from"./Listing/index.js";import{default as ye}from"./Listing/BizProductProvider.js";import{default as Me}from"./Listing/components/PurchaseBar/index.js";import{default as Ce}from"./Listing/components/PurchaseBar/ProductActions/index.js";import{default as be}from"./Listing/components/ProductCard/index.js";import{default as Be}from"./Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js";import{default as qe}from"./Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js";import{default as ve}from"./Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js";import{default as Ae}from"./Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js";import{default as we}from"./Listing/components/ProductCard/ProductDetail/ProductOptions/index.js";import{default as We}from"./Listing/components/ProductCard/ProductDetail/ProductBundle/index.js";import{default as Le}from"./Listing/components/ProductCard/ProductGridBox.js";import{default as Oe}from"./Listing/components/ProductCard/ProductGallery/index.js";import{default as Ke}from"./Listing/components/ProductCard/ProductDetail/index.js";import{default as _e}from"./Listing/components/ProductCard/ProductSummary/index.js";import{default as ze}from"./Listing/components/ProductCard/ProductDetail/BenefitsTab";import{default as Je}from"./Listing/components/PaidShipping/index.js";import{default as Ue}from"./GraphicMore/index.js";import{default as Ze}from"./Features/index.js";import{default as er}from"./AplusDesc/index.js";import{default as ar}from"./GiftBox/index.js";import{default as or}from"./SelectStore/index.js";import{default as sr}from"./DownLoad/index.js";import{default as fr}from"./FootCharger/index.js";import{default as dr}from"./ProductCompare/index.js";import{default as lr}from"./Ksp/index.js";import{default as xr}from"./ImageTextFeature/index.js";import{default as hr}from"./FeatureCards/index.js";import{default as yr}from"./ImageWithText/index.js";import{default as Mr}from"./VideoFeature/index.js";import{default as Cr}from"./TabsWithMedia/index.js";import{default as br}from"./TabWithImage/index.js";import{default as Br}from"./FeatureShowcase/index.js";import{default as qr}from"./ProductHero/index.js";import{default as vr}from"./SpecsComparison/index.js";const e={"ipc-accordioncards":"AccordionCards","ipc-aplusdesc":"AplusDesc","ipc-banner":"HeroBanner","ipc-brand-equity":"BrandEquity","ipc-category":"Category","ipc-collection-banner":"CollectionBanner","ipc-collection-shelves":"CollectionShelves","ipc-creativemodule":"CreativeModule","ipc-download":"DownLoad","ipc-evaluate":"Evaluate","ipc-faq":"Faq","ipc-features":"Features","ipc-footcharger":"FootCharger","ipc-ga-block":"GraphicAttractionBlock","ipc-giftbox":"GiftBox","ipc-graphic":"Graphic","ipc-graphicmore":"GraphicMore","ipc-graphicoverlay":"GraphicOverlay","ipc-marquee":"Marquee","ipc-mediaplayerbase":"MediaPlayerBase","ipc-mediaplayermulti":"MediaPlayerMulti","ipc-mediaplayersticky":"MediaPlayerSticky","ipc-member-equity":"MemberEquity","ipc-mlg-block":"MultiLayoutGraphicBlock","ipc-search-page-tabs":"SearchPageBlock","ipc-selectstore":"SelectStore","ipc-shelfdisplay":"ShelfDisplay","ipc-slogan":"Slogan","ipc-spacer":"Spacer","ipc-specs":"Specs","ipc-tabs":"Tabs","ipc-text-marquee":"TextMarquee","ipc-title":"Title","ipc-whychoose":"WhyChoose"};export{S as AccordionCards,oe as AiuiProvider,er as AplusDesc,ze as BenefitsTab,ye as BizProductProvider,t as BrandEquity,P as Category,fe as CreativeModule,sr as DownLoad,n as Evaluate,E as Faq,hr as FeatureCards,Br as FeatureShowcase,Ze as Features,fr as FootCharger,Q as FooterNavigation,ar as GiftBox,T as Graphic,V as GraphicAttractionBlock,Ue as GraphicMore,de as GraphicOverlay,Y as HeaderNavigation,g as HeroBanner,$ as IPC_SEARCH_PAGE,xr as ImageTextFeature,yr as ImageWithText,lr as Ksp,he as Listing,j as Marquee,O as MarqueeImageContent,H as MarqueeItem,k as MarqueeReview,R as MarqueeTextContent,I as MediaPlayerBase,G as MediaPlayerMulti,F as MediaPlayerSticky,p as MemberEquity,N as MultiLayoutGraphicBlock,e as PAYLOAD_COMPONENT_MAP,Je as PaidShipping,Ce as ProductActions,Be as ProductBenefitsTabs,We as ProductBundle,be as ProductCard,dr as ProductCompare,Ke as ProductDetail,Ae as ProductExchangePurchase,ve as ProductFreeGift,Oe as ProductGallery,Le as ProductGridBox,qr as ProductHero,qe as ProductHighlight,we as ProductOptions,_e as ProductSummary,Me as PurchaseBar,X as SearchPage,ee as SearchPageTabType,or as SelectStore,m as ShelfDisplay,i as Slogan,c as Spacer,le as Specs,vr as SpecsComparison,xe as TabGroup,br as TabWithImage,se as Tabs,Cr as TabsWithMedia,u as Title,Mr as VideoFeature,D as WhyChoose,ae as withLayout};
+import{default as t}from"./BrandEquity/index.js";import{default as p}from"./MemberEquity/index.js";import{default as i}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as c}from"./Spacer/index.js";import{default as m}from"./ShelfDisplay/index.js";import{default as n}from"./Evaluate/index.js";import{default as P}from"./Category/index.js";import{default as g}from"./HeroBanner/index.js";import{default as S}from"./AccordionCards/index.js";import{default as T}from"./Graphic/index.js";import{default as I}from"./MediaPlayerBase/index.js";import{default as F}from"./MediaPlayerSticky/index.js";import{default as G}from"./MediaPlayerMulti/index.js";import{default as j}from"./Marquee/index.js";import{default as k}from"./MarqueeReview/index.js";import{default as D}from"./WhyChoose/index.js";import{default as E}from"./Faq/index.js";import{MarqueeItem as H,MarqueeImageContent as K,MarqueeTextContent as O}from"./Marquee/index.js";import{default as N}from"./MultiLayoutGraphicBlock/index.js";import{default as V}from"./GraphicAttractionBlock/index.js";import{default as Y}from"./HeaderNavigation/index.js";import{default as Q}from"./FooterNavigation/index.js";import{default as X}from"./SearchPage/index.js";import{IPC_SEARCH_PAGE as $,SearchPageTabType as ee}from"./SearchPage/types.js";import{withLayout as ae}from"../shared/Styles.js";import{default as oe}from"./AiuiProvider/index.js";import{default as se}from"./Tabs/index.js";import{default as fe}from"./CreativeModule/index.js";import{default as de}from"./GraphicOverlay/index.js";import{default as le}from"./Specs/index.js";import{default as xe}from"./TabsGroup/index.js";import{default as he}from"./Listing/index.js";import{default as ye}from"./Listing/BizProductProvider.js";import{default as Me}from"./Listing/components/PurchaseBar/index.js";import{default as Ce}from"./Listing/components/PurchaseBar/ProductActions/index.js";import{default as be}from"./Listing/components/ProductCard/index.js";import{default as Be}from"./Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js";import{default as qe}from"./Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js";import{default as ve}from"./Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js";import{default as we}from"./Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js";import{default as Ae}from"./Listing/components/ProductCard/ProductDetail/ProductOptions/index.js";import{default as We}from"./Listing/components/ProductCard/ProductDetail/ProductBundle/index.js";import{default as Le}from"./Listing/components/ProductCard/ProductGridBox.js";import{default as Ke}from"./Listing/components/ProductCard/ProductGallery/index.js";import{default as Re}from"./Listing/components/ProductCard/ProductDetail/index.js";import{default as _e}from"./Listing/components/ProductCard/ProductSummary/index.js";import{default as ze}from"./Listing/components/ProductCard/ProductDetail/BenefitsTab";import{default as Je}from"./Listing/components/PaidShipping/index.js";import{default as Ue}from"./GraphicMore/index.js";import{default as Ze}from"./Features/index.js";import{default as er}from"./AplusDesc/index.js";import{default as ar}from"./GiftBox/index.js";import{default as or}from"./SelectStore/index.js";import{default as sr}from"./DownLoad/index.js";import{default as fr}from"./FootCharger/index.js";import{default as dr}from"./ProductCompare/index.js";import{default as lr}from"./Ksp/index.js";import{default as xr}from"./ImageTextFeature/index.js";import{default as hr}from"./FeatureCards/index.js";import{default as yr}from"./ImageWithText/index.js";import{default as Mr}from"./VideoFeature/index.js";import{default as Cr}from"./TabsWithMedia/index.js";import{default as br}from"./TabWithImage/index.js";import{default as Br}from"./FeatureShowcase/index.js";import{default as qr}from"./ProductHero/index.js";import{default as vr}from"./SpecsComparison/index.js";import{default as wr}from"./MediaSceneSwitcher/index.js";import{default as Ar}from"./ThreeDCarousel/index.js";const e={"ipc-accordioncards":"AccordionCards","ipc-aplusdesc":"AplusDesc","ipc-banner":"HeroBanner","ipc-brand-equity":"BrandEquity","ipc-category":"Category","ipc-collection-banner":"CollectionBanner","ipc-collection-shelves":"CollectionShelves","ipc-creativemodule":"CreativeModule","ipc-download":"DownLoad","ipc-evaluate":"Evaluate","ipc-faq":"Faq","ipc-features":"Features","ipc-footcharger":"FootCharger","ipc-ga-block":"GraphicAttractionBlock","ipc-giftbox":"GiftBox","ipc-graphic":"Graphic","ipc-graphicmore":"GraphicMore","ipc-graphicoverlay":"GraphicOverlay","ipc-marquee":"Marquee","ipc-mediaplayerbase":"MediaPlayerBase","ipc-mediaplayermulti":"MediaPlayerMulti","ipc-mediaplayersticky":"MediaPlayerSticky","ipc-member-equity":"MemberEquity","ipc-mlg-block":"MultiLayoutGraphicBlock","ipc-search-page-tabs":"SearchPageBlock","ipc-selectstore":"SelectStore","ipc-shelfdisplay":"ShelfDisplay","ipc-slogan":"Slogan","ipc-spacer":"Spacer","ipc-specs":"Specs","ipc-tabs":"Tabs","ipc-text-marquee":"TextMarquee","ipc-title":"Title","ipc-whychoose":"WhyChoose",ksp:"Ksp"};export{S as AccordionCards,oe as AiuiProvider,er as AplusDesc,ze as BenefitsTab,ye as BizProductProvider,t as BrandEquity,P as Category,fe as CreativeModule,sr as DownLoad,n as Evaluate,E as Faq,hr as FeatureCards,Br as FeatureShowcase,Ze as Features,fr as FootCharger,Q as FooterNavigation,ar as GiftBox,T as Graphic,V as GraphicAttractionBlock,Ue as GraphicMore,de as GraphicOverlay,Y as HeaderNavigation,g as HeroBanner,$ as IPC_SEARCH_PAGE,xr as ImageTextFeature,yr as ImageWithText,lr as Ksp,he as Listing,j as Marquee,K as MarqueeImageContent,H as MarqueeItem,k as MarqueeReview,O as MarqueeTextContent,I as MediaPlayerBase,G as MediaPlayerMulti,F as MediaPlayerSticky,wr as MediaSceneSwitcher,p as MemberEquity,N as MultiLayoutGraphicBlock,e as PAYLOAD_COMPONENT_MAP,Je as PaidShipping,Ce as ProductActions,Be as ProductBenefitsTabs,We as ProductBundle,be as ProductCard,dr as ProductCompare,Re as ProductDetail,we as ProductExchangePurchase,ve as ProductFreeGift,Ke as ProductGallery,Le as ProductGridBox,qr as ProductHero,qe as ProductHighlight,Ae as ProductOptions,_e as ProductSummary,Me as PurchaseBar,X as SearchPage,ee as SearchPageTabType,or as SelectStore,m as ShelfDisplay,i as Slogan,c as Spacer,le as Specs,vr as SpecsComparison,xe as TabGroup,br as TabWithImage,se as Tabs,Cr as TabsWithMedia,Ar as ThreeDCarousel,u as Title,Mr as VideoFeature,D as WhyChoose,ae as withLayout};
 //# sourceMappingURL=index.js.map