@anker-in/headless-ui 1.0.26-alpha.1761893017767 → 1.0.26-alpha.1761902931346

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

@@ -1,4 +1,4 @@
-import type { Img, Theme } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 export interface ImageTextFeatureItem {
     /** 功能图标 */
     icon: string;
@@ -14,11 +14,11 @@ export interface ImageTextFeatureProps {
         /** 副标题 */
         subtitle?: string;
         /** PC端图片 */
-        imageUrl: string | Img;
+        pcImage: Media;
         /** 移动端图片 */
-        mobImageUrl?: string | Img;
+        mobileImage: Media;
         /** 平板端图片 */
-        padImageUrl?: string | Img;
+        padImage?: Media;
         /** 功能项列表 */
         items: ImageTextFeatureItem[];
         /** 图片位置，默认 left */

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import h,{useImperativeHandle as u,useRef as T}from"react";import{Heading as i,Picture as v,Text as N}from"../../components/index.js";import{cn as I}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as k}from"../../hooks/useExposure.js";const y="image",D="image_with_text",l=h.forwardRef(({data:n,className:r},c)=>{const{title:a,subtitle:t,desc:m,descIcon:x,imageUrl:d,padImageUrl:f,mobImageUrl:g,theme:s="dark"}=n,p=T(null);return k(p,{componentType:y,componentName:D,componentTitle:a,componentDescription:t}),u(c,()=>p.current),o("section",{ref:p,"data-ui-component-id":"ImageWithText",className:I("flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]",{"text-white":s==="dark","text-[#1f1f1f]":s==="light"},r),children:[o("div",{className:"flex flex-col justify-center",children:[e(i,{as:"h2",size:4,html:a}),t&&e(N,{as:"p",size:3,html:t,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),o("div",{className:"flex flex-row gap-[8px]",children:[x&&e("img",{src:x,alt:"icon",className:"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),m&&e(i,{as:"h4",size:5,html:m,className:"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]})]}),e("div",{className:"",children:e(v,{source:`${d},${f} 1024, ${g} 768`,className:"rounded-[10px] laptop:rounded-[16px]"})})]})});l.displayName="ImageWithText";var R=w(l);export{R as default};
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import g,{useImperativeHandle as h,useRef as T}from"react";import{Heading as s,Picture as v,Text as N}from"../../components/index.js";import{cn as I}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as k}from"../../hooks/useExposure.js";const y="image",D="image_with_text",r=g.forwardRef(({data:n,className:c},d)=>{const{title:m,subtitle:t,desc:x,descIcon:i,image:p,padImage:f,mobileImage:u,theme:l="dark"}=n,o=T(null);return k(o,{componentType:y,componentName:D,componentTitle:m,componentDescription:t}),h(d,()=>o.current),a("section",{ref:o,"data-ui-component-id":"ImageWithText",className:I("flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]",{"text-white":l==="dark","text-[#1f1f1f]":l==="light"},c),children:[a("div",{className:"flex flex-col justify-center",children:[e(s,{as:"h2",size:4,html:m}),t&&e(N,{as:"p",size:3,html:t,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),a("div",{className:"flex flex-row gap-[8px]",children:[i&&e("img",{src:i,alt:"icon",className:"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),x&&e(s,{as:"h4",size:5,html:x,className:"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]})]}),e("div",{className:"",children:e(v,{source:`${p.url},${f?.url||p.url} 1024, ${u?.url||p.url} 768`,className:"rounded-[10px] laptop:rounded-[16px]"})})]})});r.displayName="ImageWithText";var R=w(r);export{R as default};
 //# sourceMappingURL=ImageWithText.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 { ImageWithTextProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    imageUrl,\n    padImageUrl,\n    mobImageUrl,\n    theme = 'dark',\n  } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]',\n        {\n          'text-white': theme === 'dark',\n          'text-[#1f1f1f]': theme === 'light',\n        },\n        className\n      )}\n    >\n      <div className=\"flex flex-col justify-center\">\n        <Heading as={'h2'} size={4} html={title} />\n        {subtitle && (\n          <Text\n            as={'p'}\n            size={3}\n            html={subtitle}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n        <div className=\"flex flex-row gap-[8px]\">\n          {descIcon && (\n            <img\n              src={descIcon}\n              alt=\"icon\"\n              className=\"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n            />\n          )}\n          {desc && (\n            <Heading\n              as={'h4'}\n              size={5}\n              html={desc}\n              className=\"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"\">\n        <Picture\n          source={`${imageUrl},${padImageUrl} 1024, ${mobImageUrl} 768`}\n          className=\"rounded-[10px] laptop:rounded-[16px]\"\n        />\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "aAgDQ,cAAAA,EASA,QAAAC,MATA,oBA/CR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,kBAEhBC,EAAgBX,EAAM,WAA+C,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvG,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,MAAAC,EAAQ,MACV,EAAIV,EAEEW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,gBACrB,UAAWjB,EACT,mFACA,CACE,aAAcgB,IAAU,OACxB,iBAAkBA,IAAU,OAC9B,EACAT,CACF,EAEA,UAAAd,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMY,EAAO,EACxCC,GACClB,EAACO,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,yHACZ,EAEFjB,EAAC,OAAI,UAAU,0BACZ,UAAAmB,GACCpB,EAAC,OACC,IAAKoB,EACL,IAAI,OACJ,UAAU,sDACZ,EAEDD,GACCnB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,4GACZ,GAEJ,GACF,EACAnB,EAAC,OAAI,UAAU,GACb,SAAAA,EAACM,EAAA,CACC,OAAQ,GAAGe,CAAQ,IAAIC,CAAW,UAAUC,CAAW,OACvD,UAAU,uCACZ,EACF,GACF,CAEJ,CAAC,EAEDV,EAAc,YAAc,gBAE5B,IAAOa,EAAQjB,EAAWI,CAAa",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "imageUrl", "padImageUrl", "mobImageUrl", "theme", "boxRef", "ImageWithText_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 { ImageWithTextProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, descIcon, image, padImage, mobileImage, theme = 'dark' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]',\n        {\n          'text-white': theme === 'dark',\n          'text-[#1f1f1f]': theme === 'light',\n        },\n        className\n      )}\n    >\n      <div className=\"flex flex-col justify-center\">\n        <Heading as={'h2'} size={4} html={title} />\n        {subtitle && (\n          <Text\n            as={'p'}\n            size={3}\n            html={subtitle}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n        <div className=\"flex flex-row gap-[8px]\">\n          {descIcon && (\n            <img src={descIcon} alt=\"icon\" className=\"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\" />\n          )}\n          {desc && (\n            <Heading\n              as={'h4'}\n              size={5}\n              html={desc}\n              className=\"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"\">\n        <Picture\n          source={`${image.url},${padImage?.url || image.url} 1024, ${mobileImage?.url || image.url} 768`}\n          className=\"rounded-[10px] laptop:rounded-[16px]\"\n        />\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "aAuCQ,cAAAA,EASA,QAAAC,MATA,oBAtCR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,kBAEhBC,EAAgBX,EAAM,WAA+C,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,YAAAC,EAAa,MAAAC,EAAQ,MAAO,EAAIV,EAEpFW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,gBACrB,UAAWjB,EACT,mFACA,CACE,aAAcgB,IAAU,OACxB,iBAAkBA,IAAU,OAC9B,EACAT,CACF,EAEA,UAAAd,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMY,EAAO,EACxCC,GACClB,EAACO,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,yHACZ,EAEFjB,EAAC,OAAI,UAAU,0BACZ,UAAAmB,GACCpB,EAAC,OAAI,IAAKoB,EAAU,IAAI,OAAO,UAAU,sDAAsD,EAEhGD,GACCnB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,4GACZ,GAEJ,GACF,EACAnB,EAAC,OAAI,UAAU,GACb,SAAAA,EAACM,EAAA,CACC,OAAQ,GAAGe,EAAM,GAAG,IAAIC,GAAU,KAAOD,EAAM,GAAG,UAAUE,GAAa,KAAOF,EAAM,GAAG,OACzF,UAAU,uCACZ,EACF,GACF,CAEJ,CAAC,EAEDR,EAAc,YAAc,gBAE5B,IAAOa,EAAQjB,EAAWI,CAAa",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "boxRef", "ImageWithText_default"]
 }

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

@@ -1,4 +1,4 @@
-import type { Theme } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 export interface ImageWithTextProps {
     data: {
         /** 主标题 */
@@ -10,11 +10,11 @@ export interface ImageWithTextProps {
         /** 描述文本图标 */
         descIcon?: string;
         /** PC端图片 URL */
-        imageUrl: string;
+        image: Media;
         /** 平板端图片 URL */
-        padImageUrl?: string;
+        padImage?: Media;
         /** 移动端图片 URL */
-        mobImageUrl?: string;
+        mobileImage?: Media;
         /** 主题，默认 dark */
         theme?: Theme;
     };

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import f,{useRef as x,useImperativeHandle as b}from"react";import{Heading as a,Button as h,Picture as H,Text as P}from"../../components/index.js";import{cn as v}from"../../helpers/utils.js";import{withLayout as N}from"../../shared/Styles.js";import{useExposure as g}from"../../hooks/useExposure.js";const k="image",w="product_hero",l=f.forwardRef(({data:r,className:i},m)=>{const{title:p,subtitle:e,ctaText:c,poster:n,mobPoster:d,ctaLink:u}=r,o=x(null);return g(o,{componentType:k,componentName:w,componentTitle:p,componentDescription:e}),b(m,()=>o.current),s("section",{ref:o,"data-ui-component-id":"ProductHero",className:v("flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",i),children:[s("div",{className:"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[s("div",{children:[t(a,{as:"h3",size:4,html:p}),t(a,{as:"h4",size:2,html:e,className:"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),t(P,{as:"p",size:2,html:e,className:"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),t("a",{href:u,children:t(h,{className:"w-fit",children:c})})]}),t(H,{className:"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${n}, ${d} 768`})]})});l.displayName="ProductHero";var R=N(l);export{R as default};
+"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import f,{useRef as x,useImperativeHandle as b}from"react";import{Heading as a,Button as h,Picture as H,Text as P}from"../../components/index.js";import{cn as v}from"../../helpers/utils.js";import{withLayout as N}from"../../shared/Styles.js";import{useExposure as g}from"../../hooks/useExposure.js";const k="image",w="product_hero",l=f.forwardRef(({data:r,className:i},m)=>{const{title:p,subtitle:e,ctaText:c,poster:n,mobPoster:u,ctaLink:d}=r,o=x(null);return g(o,{componentType:k,componentName:w,componentTitle:p,componentDescription:e}),b(m,()=>o.current),s("section",{ref:o,"data-ui-component-id":"ProductHero",className:v("flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",i),children:[s("div",{className:"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[s("div",{children:[t(a,{as:"h3",size:4,html:p}),t(a,{as:"h4",size:2,html:e,className:"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),t(P,{as:"p",size:2,html:e,className:"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),t("a",{href:d,children:t(h,{className:"w-fit",children:c})})]}),t(H,{className:"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${n.url}, ${u.url} 768`})]})});l.displayName="ProductHero";var R=N(l);export{R as default};
 //# sourceMappingURL=ProductHero.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, 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 { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n        className\n      )}\n    >\n      <div className=\"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n          />\n        </div>\n        <a href={ctaLink}>\n          <Button className=\"w-fit\">{ctaText}</Button>\n        </a>\n      </div>\n      <Picture\n        className=\"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n        source={`${poster}, ${mobPoster} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
-  "mappings": "aAmCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcZ,EAAM,WAA6C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,EAASrB,EAAuB,IAAI,EAE1C,OAAAQ,EAAYa,EAAQ,CAClB,cAAAZ,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMO,EAAO,OAAyB,EAG7DvB,EAAC,WACC,IAAKuB,EACL,uBAAqB,cACrB,UAAWf,EACT,uHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,oFACb,UAAAA,EAAC,OACC,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,EAAO,EACzClB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,kEACZ,EACAnB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,kEACZ,GACF,EACAnB,EAAC,KAAE,KAAMuB,EACP,SAAAvB,EAACM,EAAA,CAAO,UAAU,QAAS,SAAAc,EAAQ,EACrC,GACF,EACApB,EAACO,EAAA,CACC,UAAU,6FACV,OAAQ,GAAGc,CAAM,KAAKC,CAAS,OACjC,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOW,EAAQf,EAAWI,CAAW",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, 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 { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n        className\n      )}\n    >\n      <div className=\"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n          />\n        </div>\n        <a href={ctaLink}>\n          <Button className=\"w-fit\">{ctaText}</Button>\n        </a>\n      </div>\n      <Picture\n        className=\"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n        source={`${poster.url}, ${mobPoster.url} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
+  "mappings": "aAmCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcZ,EAAM,WAA6C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,EAASrB,EAAuB,IAAI,EAE1C,OAAAQ,EAAYa,EAAQ,CAClB,cAAAZ,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMO,EAAO,OAAyB,EAG7DvB,EAAC,WACC,IAAKuB,EACL,uBAAqB,cACrB,UAAWf,EACT,uHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,oFACb,UAAAA,EAAC,OACC,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,EAAO,EACzClB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,kEACZ,EACAnB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,kEACZ,GACF,EACAnB,EAAC,KAAE,KAAMuB,EACP,SAAAvB,EAACM,EAAA,CAAO,UAAU,QAAS,SAAAc,EAAQ,EACrC,GACF,EACApB,EAACO,EAAA,CACC,UAAU,6FACV,OAAQ,GAAGc,EAAO,GAAG,KAAKC,EAAU,GAAG,OACzC,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOW,EAAQf,EAAWI,CAAW",
   "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Heading", "Button", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ProductHero", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "boxRef", "ProductHero_default"]
 }

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

@@ -1,3 +1,4 @@
+import type { Media } from '../../types/props';
 export interface ProductHeroProps {
     data: {
         /** 主标题 */
@@ -9,9 +10,9 @@ export interface ProductHeroProps {
         /** CTA 按钮链接 */
         ctaLink: string;
         /** 桌面端图片 URL */
-        poster: string;
+        poster: Media;
         /** 移动端图片 URL */
-        mobPoster: string;
+        mobPoster: Media;
         /** 3D 模型源（可选，暂未使用） */
         modelSrc?: string;
     };

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import I,{useState as x,useEffect as N,useRef as d,useImperativeHandle as k}from"react";import{Heading as f,Picture as D,Text as E}from"../../components/index.js";import{cn as u}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as L}from"../../hooks/useExposure.js";import{motion as M,AnimatePresence as W}from"framer-motion";const P="image",R="tab_with_image",b=I.forwardRef(({data:v,className:h},g)=>{const{title:n,subtitle:z,desc:p,imageUrl:A,mobImageUrl:S,datalist:i=[]}=v,m=d(null);L(m,{componentType:P,componentName:R,componentTitle:n,componentDescription:p}),k(g,()=>m.current);const w=(o,t)=>{y(o),t.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[a,y]=x(0),r=d([]),[c,T]=x({left:0,width:0});return N(()=>{const o=r.current[a];if(o){const{offsetLeft:t,offsetWidth:l}=o;T({left:t,width:l})}},[a,i.length]),s("section",{ref:m,"data-ui-component-id":"TabWithImage",className:u("flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",h),children:[s("div",{className:"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{children:[e(f,{as:"h3",size:4,html:n}),e(E,{as:"p",size:1,html:p,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:c.left,width:c.width}}),i.map((o,t)=>e("div",{ref:l=>{r.current[t]=l},onClick:l=>w(t,l),className:u("relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",a===t?"text-black":"text-white"),children:e(f,{as:"h1",size:1,html:o?.title,className:"text-balance-normal !whitespace-nowrap md:text-[14px]"})},t))]})})]}),e("div",{className:" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]",children:e(W,{mode:"wait",children:e(M.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"absolute left-0 top-0 w-full",children:e(D,{source:`${i[a].image} ,${i[a].imgPad} 1440, ${i[a].imageMob} 767`,className:"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},i[a].image)})})]})});b.displayName="TabWithImage";var V=H(b);export{V as default};
+"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import I,{useState as x,useEffect as N,useRef as d,useImperativeHandle as k}from"react";import{Heading as f,Picture as D,Text as E}from"../../components/index.js";import{cn as u}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as L}from"../../hooks/useExposure.js";import{motion as M,AnimatePresence as W}from"framer-motion";const P="image",R="tab_with_image",b=I.forwardRef(({data:v,className:h},g)=>{const{title:n,subtitle:z,desc:p,image:A,mobileImage:S,datalist:a=[]}=v,m=d(null);L(m,{componentType:P,componentName:R,componentTitle:n,componentDescription:p}),k(g,()=>m.current);const w=(l,i)=>{y(l),i.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[e,y]=x(0),r=d([]),[c,T]=x({left:0,width:0});return N(()=>{const l=r.current[e];if(l){const{offsetLeft:i,offsetWidth:o}=l;T({left:i,width:o})}},[e,a.length]),s("section",{ref:m,"data-ui-component-id":"TabWithImage",className:u("flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",h),children:[s("div",{className:"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{children:[t(f,{as:"h3",size:4,html:n}),t(E,{as:"p",size:1,html:p,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),t("div",{className:"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[t("div",{className:"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:c.left,width:c.width}}),a.map((l,i)=>t("div",{ref:o=>{r.current[i]=o},onClick:o=>w(i,o),className:u("relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",e===i?"text-black":"text-white"),children:t(f,{as:"h1",size:1,html:l?.title,className:"text-balance-normal !whitespace-nowrap md:text-[14px]"})},i))]})})]}),t("div",{className:" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]",children:t(W,{mode:"wait",children:t(M.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"absolute left-0 top-0 w-full",children:t(D,{source:`${a[e].image.url} ,${a[e].imgPad?.url||a[e].image.url} 1440, ${a[e].imageMob?.url||a[e].image.url} 767`,alt:a[e].image.alt,className:"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},a[e].image.url)})})]})});b.displayName="TabWithImage";var q=H(b);export{q as default};
 //# sourceMappingURL=TabWithImage.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabWithImage/TabWithImage.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, 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 { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, imageUrl, mobImageUrl, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn(\n        'flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]',\n        className\n      )}\n    >\n      <div className=\"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={(el) => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={(e) => handleClick(index, e)}\n                className={cn(\n                  'relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={datalist[activeIndex].image}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"absolute left-0 top-0 w-full\"\n          >\n            <Picture\n              source={`${datalist[activeIndex].image} ,${datalist[activeIndex].imgPad} 1440, ${datalist[activeIndex].imageMob} 767`}\n              className=\"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "motion", "AnimatePresence", "componentType", "componentName", "TabWithImage", "data", "className", "ref", "title", "subtitle", "desc", "imageUrl", "mobImageUrl", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el", "TabWithImage_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, 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 { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn('flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]', className)}\n    >\n      <div className=\"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={el => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={e => handleClick(index, e)}\n                className={cn(\n                  'relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={datalist[activeIndex].image.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"absolute left-0 top-0 w-full\"\n          >\n            <Picture\n              source={`${datalist[activeIndex].image.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image.url} 767`}\n              alt={datalist[activeIndex].image.alt}\n              className=\"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "motion", "AnimatePresence", "componentType", "componentName", "TabWithImage", "data", "className", "ref", "title", "subtitle", "desc", "image", "mobileImage", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el", "TabWithImage_default"]
 }

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

@@ -1,10 +1,11 @@
+import type { Media } from '../../types/props';
 export interface TabWithImageDataItem {
     /** 桌面端图片 URL */
-    image: string;
+    image: Media;
     /** 平板端图片 URL */
-    imgPad?: string;
+    imgPad?: Media;
     /** 移动端图片 URL */
-    imageMob?: string;
+    imageMob?: Media;
     /** Tab 标题 */
     title: string;
 }
@@ -17,9 +18,9 @@ export interface TabWithImageProps {
         /** 描述文本 */
         desc: string;
         /** 默认图片 URL（可选） */
-        imageUrl?: string;
+        image?: Media;
         /** 默认移动端图片 URL（可选） */
-        mobImageUrl?: string;
+        mobileImage?: Media;
         /** 数据列表 */
         datalist: TabWithImageDataItem[];
     };

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as o,jsxs as S}from"react/jsx-runtime";import A,{useEffect as U,useImperativeHandle as B,useMemo as V,useRef as x,useState as g}from"react";import{Heading as M,Picture as _,Text as q}from"../../components/index.js";import{cn as p}from"../../helpers/utils.js";import{withLayout as O}from"../../shared/Styles.js";import{useExposure as Q}from"../../hooks/useExposure.js";import{Swiper as G,SwiperSlide as J}from"swiper/react";import{Pagination as K,EffectFade as X}from"swiper/modules";import{motion as Y,AnimatePresence as Z}from"framer-motion";import{useMediaQuery as $}from"react-responsive";const ee="video",te="tabs_with_media",ie=[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3},{time:2.6,point:12.8,highlightIdx:4},{time:3.2,point:16,highlightIdx:5}],E=A.forwardRef(({data:R,className:C},D)=>{const{title:w,poster:H,videoUrl:P,mobvideoUrl:W,items:f=[],timeIdx:a=ie}=R,[y,z]=g(null),b=x([]),T=x(null),u=x(null),h=x(null);Q(h,{componentType:ee,componentName:te,componentTitle:w}),B(D,()=>h.current);const oe=e=>{const i=T.current,s=b.current[e];if(i&&s){const t=i.getBoundingClientRect(),m=s.getBoundingClientRect().left-t.left-i.clientWidth/2+s.clientWidth/2;i.scrollTo({left:i.scrollLeft+m,behavior:"smooth"})}},k=$({query:"(max-width: 768px)"}),[ne,v,j,l,F]=V(()=>{const s=f.length,t=f?.map((n,r)=>({...n,key:r,index:r}))||[];return[t,t.concat(t),5,2,s]},[f,k]),[d,I]=g(l),[c,N]=g(v.slice(0,j)),L=(e,i,s)=>{if(e!==d&&i!==l){if(i>l){const t=i-l,n=[...c];n.splice(0,t);const r=c[c.length-1]?.key+1,m=[...v].splice(r,t);n.push(...m),N([...n])}if(i<l){const t=l-i,n=[...c];n.splice(-t);const r=c[0]?.key,m=[...v].splice(F+r-t,t);n.unshift(...m),N([...n])}if(I(e),y?.slideTo(e),!s){let t=0;a.forEach(n=>{n.highlightIdx<e&&(t+=n.time)}),u.current&&(u.current.currentTime=t)}}};return U(()=>{const e=u.current;if(!e)return;const i=()=>{const s=e.currentTime;for(let t=0;t<a.length;t++){const n=t===0?0:a[t-1].point;if(s>=n&&s<a[t].point){L(a[t].highlightIdx,a[t].highlightIdx,!0);break}}s>=a[a.length-1].point&&(e.currentTime=0,e.play())};return e.addEventListener("timeupdate",i),()=>{e.removeEventListener("timeupdate",i)}},[y,a]),S("section",{ref:h,"data-ui-component-id":"TabsWithMedia",className:p("flex flex-col overflow-hidden text-[#fff] sm:overflow-visible",C),children:[o(M,{as:"h3",size:4,html:w,className:"text-center"}),o("div",{className:" relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible",children:o("div",{className:p("mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit"),children:o("div",{className:p("flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]"),ref:T,children:o(Z,{mode:"popLayout",children:c?.map((e,i)=>o(Y.div,{layout:!0,ref:s=>{b.current[e?.index]=s},onClick:()=>{L(e?.key,i)},className:"min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible",initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeOut"},children:o("div",{className:"flex items-center justify-between",children:S("div",{className:p("flex",{"flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1":d===e?.key}),children:[o("div",{className:p("flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]",{"h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]":d!==e?.index}),style:d===e?.key?{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))"}:void 0,children:o(_,{source:e?.icon,className:"h-[22px] w-[22px] md:h-[14px] md:w-[14px]"})}),o("div",{className:"",children:o(M,{as:"h4",size:2,html:e?.tab,className:p("dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]",{"h-auto w-[calc-size(auto,size)] px-[6px] opacity-100":d===e?.key})})})]})})},e?.key))})})})}),o("div",{className:"mt-[16px] lg-desktop:mt-[24px]",children:o(G,{slidesPerView:1,effect:"fade",fadeEffect:{crossFade:!0},modules:[K,X],onSlideChange:e=>{const i=e.realIndex;I(i)},onSwiper:e=>z(e),children:f.map((e,i)=>o(J,{style:{transition:"opacity 1s ease-in-out"},className:"rounded-[26px]",children:o("div",{children:o(q,{as:"p",size:2,html:e.desc,className:"text-center desktop:text-[20px] lg-desktop:text-[18px]"})})},i))})}),o("div",{className:"mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]",children:o("video",{className:"mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]",src:k?W:P,poster:H,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,ref:u})})]})});E.displayName="TabsWithMedia";var ue=O(E);export{ue as default};
+"use client";import{jsx as o,jsxs as S}from"react/jsx-runtime";import A,{useEffect as B,useImperativeHandle as V,useMemo as _,useRef as x,useState as g}from"react";import{Heading as M,Picture as q,Text as O}from"../../components/index.js";import{cn as p}from"../../helpers/utils.js";import{withLayout as Q}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{Swiper as G,SwiperSlide as J}from"swiper/react";import{Pagination as K,EffectFade as X}from"swiper/modules";import{motion as Y,AnimatePresence as Z}from"framer-motion";import{useMediaQuery as $}from"react-responsive";const ee="video",te="tabs_with_media",ie=[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3},{time:2.6,point:12.8,highlightIdx:4},{time:3.2,point:16,highlightIdx:5}],E=A.forwardRef(({data:R,className:C},D)=>{const{title:w,poster:H,video:P,mobvideo:W,items:f=[],timeIdx:a=ie}=R,[y,z]=g(null),b=x([]),T=x(null),u=x(null),h=x(null);U(h,{componentType:ee,componentName:te,componentTitle:w}),V(D,()=>h.current);const oe=e=>{const i=T.current,s=b.current[e];if(i&&s){const t=i.getBoundingClientRect(),m=s.getBoundingClientRect().left-t.left-i.clientWidth/2+s.clientWidth/2;i.scrollTo({left:i.scrollLeft+m,behavior:"smooth"})}},k=$({query:"(max-width: 768px)"}),[ne,v,j,l,F]=_(()=>{const s=f.length,t=f?.map((n,r)=>({...n,key:r,index:r}))||[];return[t,t.concat(t),5,2,s]},[f,k]),[d,I]=g(l),[c,N]=g(v.slice(0,j)),L=(e,i,s)=>{if(e!==d&&i!==l){if(i>l){const t=i-l,n=[...c];n.splice(0,t);const r=c[c.length-1]?.key+1,m=[...v].splice(r,t);n.push(...m),N([...n])}if(i<l){const t=l-i,n=[...c];n.splice(-t);const r=c[0]?.key,m=[...v].splice(F+r-t,t);n.unshift(...m),N([...n])}if(I(e),y?.slideTo(e),!s){let t=0;a.forEach(n=>{n.highlightIdx<e&&(t+=n.time)}),u.current&&(u.current.currentTime=t)}}};return B(()=>{const e=u.current;if(!e)return;const i=()=>{const s=e.currentTime;for(let t=0;t<a.length;t++){const n=t===0?0:a[t-1].point;if(s>=n&&s<a[t].point){L(a[t].highlightIdx,a[t].highlightIdx,!0);break}}s>=a[a.length-1].point&&(e.currentTime=0,e.play())};return e.addEventListener("timeupdate",i),()=>{e.removeEventListener("timeupdate",i)}},[y,a]),S("section",{ref:h,"data-ui-component-id":"TabsWithMedia",className:p("flex flex-col overflow-hidden text-[#fff] sm:overflow-visible",C),children:[o(M,{as:"h3",size:4,html:w,className:"text-center"}),o("div",{className:" relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible",children:o("div",{className:p("mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit"),children:o("div",{className:p("flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]"),ref:T,children:o(Z,{mode:"popLayout",children:c?.map((e,i)=>o(Y.div,{layout:!0,ref:s=>{b.current[e?.index]=s},onClick:()=>{L(e?.key,i)},className:"min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible",initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeOut"},children:o("div",{className:"flex items-center justify-between",children:S("div",{className:p("flex",{"flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1":d===e?.key}),children:[o("div",{className:p("flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]",{"h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]":d!==e?.index}),style:d===e?.key?{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))"}:void 0,children:o(q,{source:e?.icon?.url,alt:e?.icon?.alt,className:"h-[22px] w-[22px] md:h-[14px] md:w-[14px]"})}),o("div",{className:"",children:o(M,{as:"h4",size:2,html:e?.tab,className:p("dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]",{"h-auto w-[calc-size(auto,size)] px-[6px] opacity-100":d===e?.key})})})]})})},e?.key))})})})}),o("div",{className:"mt-[16px] lg-desktop:mt-[24px]",children:o(G,{slidesPerView:1,effect:"fade",fadeEffect:{crossFade:!0},modules:[K,X],onSlideChange:e=>{const i=e.realIndex;I(i)},onSwiper:e=>z(e),children:f.map((e,i)=>o(J,{style:{transition:"opacity 1s ease-in-out"},className:"rounded-[26px]",children:o("div",{children:o(O,{as:"p",size:2,html:e.desc,className:"text-center desktop:text-[20px] lg-desktop:text-[18px]"})})},i))})}),o("div",{className:"mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]",children:o("video",{className:"mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]",src:k?W?.url:P?.url,poster:H?.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,ref:u})})]})});E.displayName="TabsWithMedia";var ue=Q(E);export{ue as default};
 //# sourceMappingURL=TabsWithMedia.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabsWithMedia/TabsWithMedia.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useMemo, useRef, useState } 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 { TabsWithMediaProps, TabItem, TimeIndex } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, EffectFade } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { useMediaQuery } from 'react-responsive'\n\nconst componentType = 'video'\nconst componentName = 'tabs_with_media'\n\n// \u9ED8\u8BA4\u65F6\u95F4\u70B9\u914D\u7F6E\nconst defaultTimeIdx: TimeIndex[] = [\n  { time: 2.4, point: 2.4, highlightIdx: 0 },\n  { time: 2.5, point: 4.9, highlightIdx: 1 },\n  { time: 2.5, point: 7.4, highlightIdx: 2 },\n  { time: 2.8, point: 10.2, highlightIdx: 3 },\n  { time: 2.6, point: 12.8, highlightIdx: 4 },\n  { time: 3.2, point: 16, highlightIdx: 5 },\n]\n\nconst TabsWithMedia = React.forwardRef<HTMLDivElement, TabsWithMediaProps>(({ data, className }, ref) => {\n  const { title, poster, videoUrl, mobvideoUrl, items = [], timeIdx = defaultTimeIdx } = data\n\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const tabRefs = useRef<(HTMLDivElement | null)[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(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  const scrollToTabCenter = (index: number) => {\n    const container = scrollContainerRef.current\n    const tab = tabRefs.current[index]\n\n    if (container && tab) {\n      const containerRect = container.getBoundingClientRect()\n      const tabRect = tab.getBoundingClientRect()\n      const offset = tabRect.left - containerRect.left\n      const scroll = offset - container.clientWidth / 2 + tab.clientWidth / 2\n\n      container.scrollTo({\n        left: container.scrollLeft + scroll,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const isMob = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [list, listDouble, row, center, listLength] = useMemo(() => {\n    const row = 5\n    const center = 2\n    const listLength = items.length\n\n    const list =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index,\n          index: index,\n        }\n      }) || []\n\n    return [list, list.concat(list), row, center, listLength]\n  }, [items, isMob])\n\n  const [idx, setIdx] = useState(center)\n\n  const [cureentList, setCureentList] = useState(listDouble.slice(0, row))\n\n  // \u70B9\u51FB tab \u8DF3\u8F6C\u5BF9\u5E94\u89C6\u9891\u4F4D\u7F6E\n  const handleNavClick = (key: number, index: number, isAuto?: boolean) => {\n    if (key === idx) return\n    if (index === center) return\n    if (index > center) {\n      const gap = index - center\n      const copy = [...cureentList]\n      copy.splice(0, gap)\n      const lastkey = (cureentList[cureentList.length - 1] as any)?.key + 1\n      const add = [...listDouble].splice(lastkey, gap)\n      copy.push(...add)\n      setCureentList([...copy])\n    }\n    if (index < center) {\n      const gap = center - index\n      const copy = [...cureentList]\n      copy.splice(-gap)\n      const firstkey = (cureentList[0] as any)?.key\n      const add = [...listDouble].splice(listLength + firstkey - gap, gap)\n      copy.unshift(...add)\n      setCureentList([...copy])\n    }\n\n    setIdx(key)\n    swiper?.slideTo(key)\n\n    if (!isAuto) {\n      let time = 0\n      timeIdx.forEach((item) => {\n        if (item.highlightIdx < key) {\n          time += item.time\n        }\n      })\n      if (videoRef.current) {\n        videoRef.current.currentTime = time\n      }\n    }\n  }\n\n  // \u64AD\u653E\u65F6\u6839\u636E\u65F6\u95F4\u5207\u6362 Swiper + tab\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n\n    const handleTimeUpdate = () => {\n      const currentTime = video.currentTime\n\n      // \u81EA\u52A8\u5207\u6362\u5185\u5BB9\n      for (let i = 0; i < timeIdx.length; i++) {\n        const prev = i === 0 ? 0 : timeIdx[i - 1].point\n        if (currentTime >= prev && currentTime < timeIdx[i].point) {\n          handleNavClick(timeIdx[i].highlightIdx, timeIdx[i].highlightIdx, true)\n          break\n        }\n      }\n\n      // \u4FEE\u590D\uFF1A\u64AD\u653E\u5230\u6700\u540E\u540E\u81EA\u52A8\u5F52\u96F6\u5E76\u91CD\u65B0\u64AD\u653E\n      if (currentTime >= timeIdx[timeIdx.length - 1].point) {\n        video.currentTime = 0\n        video.play()\n      }\n    }\n\n    video.addEventListener('timeupdate', handleTimeUpdate)\n    return () => {\n      video.removeEventListener('timeupdate', handleTimeUpdate)\n    }\n  }, [swiper, timeIdx])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabsWithMedia\"\n      className={cn('flex flex-col overflow-hidden text-[#fff] sm:overflow-visible', className)}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"text-center\" />\n      <div className=\" relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible\">\n        <div className={cn('mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit')}>\n          <div\n            className={cn(\n              'flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]'\n            )}\n            ref={scrollContainerRef}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {cureentList?.map((item: any, index: number) => (\n                <motion.div\n                  layout\n                  key={item?.key}\n                  ref={(el) => {\n                    tabRefs.current[item?.index] = el\n                  }}\n                  onClick={() => {\n                    handleNavClick(item?.key, index)\n                  }}\n                  className=\"min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible\"\n                  initial={{ opacity: 1 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  transition={{\n                    duration: 0.3,\n                    ease: 'easeOut',\n                  }}\n                >\n                  <div className=\"flex items-center justify-between\">\n                    <div\n                      className={cn('flex', {\n                        'flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1':\n                          idx === item?.key,\n                      })}\n                    >\n                      <div\n                        className={cn(\n                          'flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]',\n                          {\n                            'h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]':\n                              idx !== item?.index,\n                          }\n                        )}\n                        style={\n                          idx === item?.key\n                            ? {\n                                background:\n                                  'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                              }\n                            : undefined\n                        }\n                      >\n                        <Picture\n                          source={item?.icon}\n                          className=\"h-[22px] w-[22px] md:h-[14px] md:w-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            'dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]',\n                            {\n                              'h-auto w-[calc-size(auto,size)] px-[6px] opacity-100':\n                                idx === item?.key,\n                            }\n                          )}\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-[16px] lg-desktop:mt-[24px]\">\n        <Swiper\n          slidesPerView={1}\n          effect=\"fade\"\n          fadeEffect={{ crossFade: true }}\n          modules={[Pagination, EffectFade]}\n          onSlideChange={(swiper) => {\n            const newIndex = swiper.realIndex\n            setIdx(newIndex)\n          }}\n          onSwiper={(swiper) => setSwiper(swiper)}\n        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide\n              key={ind}\n              style={{ transition: 'opacity 1s ease-in-out' }}\n              className=\"rounded-[26px]\"\n            >\n              <div>\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"text-center desktop:text-[20px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]\">\n        <video\n          className=\"mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]\"\n          src={isMob ? mobvideoUrl : videoUrl}\n          poster={poster}\n          playsInline\n          autoPlay\n          muted\n          loop\n          ref={videoRef}\n        />\n      </div>\n    </section>\n  )\n})\n\nTabsWithMedia.displayName = 'TabsWithMedia'\n\nexport default withLayout(TabsWithMedia)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Pagination", "EffectFade", "motion", "AnimatePresence", "useMediaQuery", "componentType", "componentName", "defaultTimeIdx", "TabsWithMedia", "data", "className", "ref", "title", "poster", "videoUrl", "mobvideoUrl", "items", "timeIdx", "swiper", "setSwiper", "tabRefs", "scrollContainerRef", "videoRef", "boxRef", "scrollToTabCenter", "index", "container", "tab", "containerRect", "scroll", "isMob", "list", "listDouble", "row", "center", "listLength", "item", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "video", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind", "TabsWithMedia_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useMemo, useRef, useState } 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 { TabsWithMediaProps, TabItem, TimeIndex } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, EffectFade } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { useMediaQuery } from 'react-responsive'\n\nconst componentType = 'video'\nconst componentName = 'tabs_with_media'\n\n// \u9ED8\u8BA4\u65F6\u95F4\u70B9\u914D\u7F6E\nconst defaultTimeIdx: TimeIndex[] = [\n  { time: 2.4, point: 2.4, highlightIdx: 0 },\n  { time: 2.5, point: 4.9, highlightIdx: 1 },\n  { time: 2.5, point: 7.4, highlightIdx: 2 },\n  { time: 2.8, point: 10.2, highlightIdx: 3 },\n  { time: 2.6, point: 12.8, highlightIdx: 4 },\n  { time: 3.2, point: 16, highlightIdx: 5 },\n]\n\nconst TabsWithMedia = React.forwardRef<HTMLDivElement, TabsWithMediaProps>(({ data, className }, ref) => {\n  const { title, poster, video, mobvideo, items = [], timeIdx = defaultTimeIdx } = data\n\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const tabRefs = useRef<(HTMLDivElement | null)[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(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  const scrollToTabCenter = (index: number) => {\n    const container = scrollContainerRef.current\n    const tab = tabRefs.current[index]\n\n    if (container && tab) {\n      const containerRect = container.getBoundingClientRect()\n      const tabRect = tab.getBoundingClientRect()\n      const offset = tabRect.left - containerRect.left\n      const scroll = offset - container.clientWidth / 2 + tab.clientWidth / 2\n\n      container.scrollTo({\n        left: container.scrollLeft + scroll,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const isMob = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [list, listDouble, row, center, listLength] = useMemo(() => {\n    const row = 5\n    const center = 2\n    const listLength = items.length\n\n    const list =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index,\n          index: index,\n        }\n      }) || []\n\n    return [list, list.concat(list), row, center, listLength]\n  }, [items, isMob])\n\n  const [idx, setIdx] = useState(center)\n\n  const [cureentList, setCureentList] = useState(listDouble.slice(0, row))\n\n  // \u70B9\u51FB tab \u8DF3\u8F6C\u5BF9\u5E94\u89C6\u9891\u4F4D\u7F6E\n  const handleNavClick = (key: number, index: number, isAuto?: boolean) => {\n    if (key === idx) return\n    if (index === center) return\n    if (index > center) {\n      const gap = index - center\n      const copy = [...cureentList]\n      copy.splice(0, gap)\n      const lastkey = (cureentList[cureentList.length - 1] as any)?.key + 1\n      const add = [...listDouble].splice(lastkey, gap)\n      copy.push(...add)\n      setCureentList([...copy])\n    }\n    if (index < center) {\n      const gap = center - index\n      const copy = [...cureentList]\n      copy.splice(-gap)\n      const firstkey = (cureentList[0] as any)?.key\n      const add = [...listDouble].splice(listLength + firstkey - gap, gap)\n      copy.unshift(...add)\n      setCureentList([...copy])\n    }\n\n    setIdx(key)\n    swiper?.slideTo(key)\n\n    if (!isAuto) {\n      let time = 0\n      timeIdx.forEach(item => {\n        if (item.highlightIdx < key) {\n          time += item.time\n        }\n      })\n      if (videoRef.current) {\n        videoRef.current.currentTime = time\n      }\n    }\n  }\n\n  // \u64AD\u653E\u65F6\u6839\u636E\u65F6\u95F4\u5207\u6362 Swiper + tab\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n\n    const handleTimeUpdate = () => {\n      const currentTime = video.currentTime\n\n      // \u81EA\u52A8\u5207\u6362\u5185\u5BB9\n      for (let i = 0; i < timeIdx.length; i++) {\n        const prev = i === 0 ? 0 : timeIdx[i - 1].point\n        if (currentTime >= prev && currentTime < timeIdx[i].point) {\n          handleNavClick(timeIdx[i].highlightIdx, timeIdx[i].highlightIdx, true)\n          break\n        }\n      }\n\n      // \u4FEE\u590D\uFF1A\u64AD\u653E\u5230\u6700\u540E\u540E\u81EA\u52A8\u5F52\u96F6\u5E76\u91CD\u65B0\u64AD\u653E\n      if (currentTime >= timeIdx[timeIdx.length - 1].point) {\n        video.currentTime = 0\n        video.play()\n      }\n    }\n\n    video.addEventListener('timeupdate', handleTimeUpdate)\n    return () => {\n      video.removeEventListener('timeupdate', handleTimeUpdate)\n    }\n  }, [swiper, timeIdx])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabsWithMedia\"\n      className={cn('flex flex-col overflow-hidden text-[#fff] sm:overflow-visible', className)}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"text-center\" />\n      <div className=\" relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible\">\n        <div className={cn('mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit')}>\n          <div\n            className={cn('flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]')}\n            ref={scrollContainerRef}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {cureentList?.map((item: any, index: number) => (\n                <motion.div\n                  layout\n                  key={item?.key}\n                  ref={el => {\n                    tabRefs.current[item?.index] = el\n                  }}\n                  onClick={() => {\n                    handleNavClick(item?.key, index)\n                  }}\n                  className=\"min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible\"\n                  initial={{ opacity: 1 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  transition={{\n                    duration: 0.3,\n                    ease: 'easeOut',\n                  }}\n                >\n                  <div className=\"flex items-center justify-between\">\n                    <div\n                      className={cn('flex', {\n                        'flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1':\n                          idx === item?.key,\n                      })}\n                    >\n                      <div\n                        className={cn(\n                          'flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]',\n                          {\n                            'h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]':\n                              idx !== item?.index,\n                          }\n                        )}\n                        style={\n                          idx === item?.key\n                            ? {\n                                background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                              }\n                            : undefined\n                        }\n                      >\n                        <Picture\n                          source={item?.icon?.url}\n                          alt={item?.icon?.alt}\n                          className=\"h-[22px] w-[22px] md:h-[14px] md:w-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            'dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]',\n                            {\n                              'h-auto w-[calc-size(auto,size)] px-[6px] opacity-100': idx === item?.key,\n                            }\n                          )}\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n      <div className=\"mt-[16px] lg-desktop:mt-[24px]\">\n        <Swiper\n          slidesPerView={1}\n          effect=\"fade\"\n          fadeEffect={{ crossFade: true }}\n          modules={[Pagination, EffectFade]}\n          onSlideChange={swiper => {\n            const newIndex = swiper.realIndex\n            setIdx(newIndex)\n          }}\n          onSwiper={swiper => setSwiper(swiper)}\n        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide key={ind} style={{ transition: 'opacity 1s ease-in-out' }} className=\"rounded-[26px]\">\n              <div>\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"text-center desktop:text-[20px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]\">\n        <video\n          className=\"mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]\"\n          src={isMob ? mobvideo?.url : video?.url}\n          poster={poster?.url}\n          playsInline\n          autoPlay\n          muted\n          loop\n          ref={videoRef}\n        />\n      </div>\n    </section>\n  )\n})\n\nTabsWithMedia.displayName = 'TabsWithMedia'\n\nexport default withLayout(TabsWithMedia)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Pagination", "EffectFade", "motion", "AnimatePresence", "useMediaQuery", "componentType", "componentName", "defaultTimeIdx", "TabsWithMedia", "data", "className", "ref", "title", "poster", "video", "mobvideo", "items", "timeIdx", "swiper", "setSwiper", "tabRefs", "scrollContainerRef", "videoRef", "boxRef", "scrollToTabCenter", "index", "container", "tab", "containerRect", "scroll", "isMob", "list", "listDouble", "row", "center", "listLength", "item", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind", "TabsWithMedia_default"]
 }

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

@@ -1,16 +1,17 @@
+import type { Media } from "../../types/props";
 export interface TabItem {
     /** Tab 标签文本 */
     tab: string;
     /** 描述文本 */
     desc: string;
     /** Tab 图标 URL */
-    icon: string;
+    icon: Media;
     /** 视频封面图 */
-    poster?: string;
+    poster?: Media;
     /** Tab 图标（可选） */
-    tabIcon?: string;
+    tabIcon?: Media;
     /** 视频 URL（可选） */
-    videoUrl?: string;
+    video?: Media;
 }
 export interface TimeIndex {
     /** 片段时长 */
@@ -25,11 +26,11 @@ export interface TabsWithMediaProps {
         /** 主标题 */
         title: string;
         /** 默认视频封面图 */
-        poster?: string;
+        poster?: Media;
         /** 桌面端视频 URL */
-        videoUrl: string;
+        video: Media;
         /** 移动端视频 URL */
-        mobvideoUrl?: string;
+        mobvideo?: Media;
         /** Tab 项列表 */
         items: TabItem[];
         /** 时间点配置（可选，用于视频时间自动切换） */

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import D,{useImperativeHandle as L,useRef as o,useState as a}from"react";import{Heading as N,Text as T}from"../../components/index.js";import{cn as w}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as M}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as p}from"../../hooks/useIntersectionObserver.js";const E="video",R="video_feature",n=D.forwardRef(({data:m,className:u},x)=>{const{title:l,subtitle:i,poster:f,videoUrl:v,mobPoster:b,mobvideoUrl:s}=m,t=o(null),r=o(null),d=o(null),[h,V]=a(""),[y,k]=a("");return M(t,{componentType:E,componentName:R,componentTitle:l,componentDescription:i}),L(x,()=>t.current),p(r,{once:!0,threshold:.1,callback:()=>{V(v)}}),p(d,{once:!0,threshold:.1,callback:()=>{s&&k(s)}}),c("section",{ref:t,"data-ui-component-id":"VideoFeature",className:w("flex flex-col items-center rounded-[16px] text-white",u),children:[e(N,{as:"h2",size:4,html:l,className:"w-full text-left laptop:text-center"}),e(T,{as:"p",size:4,html:i,className:"mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),c("div",{className:"mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]",children:[e("div",{ref:r,children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:f,src:h,loop:!0,className:"hidden h-full w-full object-cover xl:h-[360px] tablet:block"})}),e("div",{ref:d,children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:b,src:y,loop:!0,className:"block tablet:hidden"})})]})]})});n.displayName="VideoFeature";var U=H(n);export{U as default};
+"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import D,{useImperativeHandle as L,useRef as o,useState as a}from"react";import{Heading as N,Text as T}from"../../components/index.js";import{cn as w}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as M}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as p}from"../../hooks/useIntersectionObserver.js";const E="video",R="video_feature",n=D.forwardRef(({data:m,className:u},x)=>{const{title:l,subtitle:i,poster:f,video:v,mobPoster:b,mobvideo:r}=m,t=o(null),s=o(null),d=o(null),[h,V]=a(""),[y,k]=a("");return M(t,{componentType:E,componentName:R,componentTitle:l,componentDescription:i}),L(x,()=>t.current),p(s,{once:!0,threshold:.1,callback:()=>{V(v.url)}}),p(d,{once:!0,threshold:.1,callback:()=>{r?.url&&k(r.url)}}),c("section",{ref:t,"data-ui-component-id":"VideoFeature",className:w("flex flex-col items-center rounded-[16px] text-white",u),children:[e(N,{as:"h2",size:4,html:l,className:"w-full text-left laptop:text-center"}),e(T,{as:"p",size:4,html:i,className:"mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),c("div",{className:"mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]",children:[e("div",{ref:s,children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:f?.url,src:h,loop:!0,className:"hidden h-full w-full object-cover xl:h-[360px] tablet:block"})}),e("div",{ref:d,children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:b?.url||"",src:y,loop:!0,className:"block tablet:hidden"})})]})]})});n.displayName="VideoFeature";var j=H(n);export{j as default};
 //# sourceMappingURL=VideoFeature.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/VideoFeature/VideoFeature.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport type { VideoFeatureProps } from './types.js'\n\nconst componentType = 'video'\nconst componentName = 'video_feature'\n\nconst VideoFeature = React.forwardRef<HTMLDivElement, VideoFeatureProps>(({ data, className }, ref) => {\n  const { title, subtitle, poster, videoUrl, mobPoster, mobvideoUrl } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n  // \u63A7\u5236\u89C6\u9891\u662F\u5426\u52A0\u8F7D\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      setLoadedDesktopVideoSrc(videoUrl)\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobvideoUrl) {\n        setLoadedMobileVideoSrc(mobvideoUrl)\n      }\n    },\n  })\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"VideoFeature\"\n      className={cn('flex flex-col items-center rounded-[16px] text-white', className)}\n    >\n      <Heading as={'h2'} size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n      <Text\n        as={'p'}\n        size={4}\n        html={subtitle}\n        className=\"mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div className=\"mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]\">\n        <div ref={desktopVideoRef}>\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={poster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"hidden h-full w-full object-cover xl:h-[360px] tablet:block\"\n          ></video>\n        </div>\n        <div ref={mobileVideoRef}>\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobPoster}\n            src={loadedMobileVideoSrc}\n            loop\n            className=\"block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    </section>\n  )\n})\n\nVideoFeature.displayName = 'VideoFeature'\n\nexport default withLayout(VideoFeature)\n"],
-  "mappings": "aA0DM,cAAAA,EAOA,QAAAC,MAPA,oBAzDN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAC7D,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,gCAAAC,MAAoC,yCAG7C,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAeZ,EAAM,WAA8C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,SAAAC,EAAU,UAAAC,EAAW,YAAAC,CAAY,EAAIR,EAEhES,EAASpB,EAAuB,IAAI,EACpCqB,EAAkBrB,EAAuB,IAAI,EAC7CsB,EAAiBtB,EAAuB,IAAI,EAG5C,CAACuB,EAAuBC,CAAwB,EAAIvB,EAAS,EAAE,EAC/D,CAACwB,EAAsBC,CAAuB,EAAIzB,EAAS,EAAE,EAEnE,OAAAK,EAAYc,EAAQ,CAClB,cAAAZ,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDhB,EAAoBc,EAAK,IAAMO,EAAO,OAAyB,EAG/Db,EAA6Bc,EAAiB,CAC5C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACdG,EAAyBP,CAAQ,CACnC,CACF,CAAC,EAGDV,EAA6Be,EAAgB,CAC3C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACVH,GACFO,EAAwBP,CAAW,CAEvC,CACF,CAAC,EAGCtB,EAAC,WACC,IAAKuB,EACL,uBAAqB,eACrB,UAAWhB,EAAG,uDAAwDQ,CAAS,EAE/E,UAAAhB,EAACM,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMY,EAAO,UAAU,sCAAsC,EACzFlB,EAACO,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMY,EACN,UAAU,4JACZ,EACAlB,EAAC,OAAI,UAAU,wDACb,UAAAD,EAAC,OAAI,IAAKyB,EACR,SAAAzB,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQoB,EACR,IAAKO,EACL,KAAI,GACJ,UAAU,8DACX,EACH,EACA3B,EAAC,OAAI,IAAK0B,EACR,SAAA1B,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQsB,EACR,IAAKO,EACL,KAAI,GACJ,UAAU,sBACX,EACH,GACF,GACF,CAEJ,CAAC,EAEDf,EAAa,YAAc,eAE3B,IAAOiB,EAAQtB,EAAWK,CAAY",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Heading", "Text", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "componentType", "componentName", "VideoFeature", "data", "className", "ref", "title", "subtitle", "poster", "videoUrl", "mobPoster", "mobvideoUrl", "boxRef", "desktopVideoRef", "mobileVideoRef", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "VideoFeature_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport type { VideoFeatureProps } from './types.js'\n\nconst componentType = 'video'\nconst componentName = 'video_feature'\n\nconst VideoFeature = React.forwardRef<HTMLDivElement, VideoFeatureProps>(({ data, className }, ref) => {\n  const { title, subtitle, poster, video, mobPoster, mobvideo } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n  // \u63A7\u5236\u89C6\u9891\u662F\u5426\u52A0\u8F7D\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      setLoadedDesktopVideoSrc(video.url)\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobvideo?.url) {\n        setLoadedMobileVideoSrc(mobvideo.url)\n      }\n    },\n  })\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"VideoFeature\"\n      className={cn('flex flex-col items-center rounded-[16px] text-white', className)}\n    >\n      <Heading as={'h2'} size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n      <Text\n        as={'p'}\n        size={4}\n        html={subtitle}\n        className=\"mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div className=\"mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]\">\n        <div ref={desktopVideoRef}>\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={poster?.url}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"hidden h-full w-full object-cover xl:h-[360px] tablet:block\"\n          ></video>\n        </div>\n        <div ref={mobileVideoRef}>\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobPoster?.url || ''}\n            src={loadedMobileVideoSrc}\n            loop\n            className=\"block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    </section>\n  )\n})\n\nVideoFeature.displayName = 'VideoFeature'\n\nexport default withLayout(VideoFeature)\n"],
+  "mappings": "aA0DM,cAAAA,EAOA,QAAAC,MAPA,oBAzDN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAC7D,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,gCAAAC,MAAoC,yCAG7C,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAeZ,EAAM,WAA8C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAO,UAAAC,EAAW,SAAAC,CAAS,EAAIR,EAE1DS,EAASpB,EAAuB,IAAI,EACpCqB,EAAkBrB,EAAuB,IAAI,EAC7CsB,EAAiBtB,EAAuB,IAAI,EAG5C,CAACuB,EAAuBC,CAAwB,EAAIvB,EAAS,EAAE,EAC/D,CAACwB,EAAsBC,CAAuB,EAAIzB,EAAS,EAAE,EAEnE,OAAAK,EAAYc,EAAQ,CAClB,cAAAZ,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDhB,EAAoBc,EAAK,IAAMO,EAAO,OAAyB,EAG/Db,EAA6Bc,EAAiB,CAC5C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACdG,EAAyBP,EAAM,GAAG,CACpC,CACF,CAAC,EAGDV,EAA6Be,EAAgB,CAC3C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACVH,GAAU,KACZO,EAAwBP,EAAS,GAAG,CAExC,CACF,CAAC,EAGCtB,EAAC,WACC,IAAKuB,EACL,uBAAqB,eACrB,UAAWhB,EAAG,uDAAwDQ,CAAS,EAE/E,UAAAhB,EAACM,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMY,EAAO,UAAU,sCAAsC,EACzFlB,EAACO,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMY,EACN,UAAU,4JACZ,EACAlB,EAAC,OAAI,UAAU,wDACb,UAAAD,EAAC,OAAI,IAAKyB,EACR,SAAAzB,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQoB,GAAQ,IAChB,IAAKO,EACL,KAAI,GACJ,UAAU,8DACX,EACH,EACA3B,EAAC,OAAI,IAAK0B,EACR,SAAA1B,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQsB,GAAW,KAAO,GAC1B,IAAKO,EACL,KAAI,GACJ,UAAU,sBACX,EACH,GACF,GACF,CAEJ,CAAC,EAEDf,EAAa,YAAc,eAE3B,IAAOiB,EAAQtB,EAAWK,CAAY",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Heading", "Text", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "componentType", "componentName", "VideoFeature", "data", "className", "ref", "title", "subtitle", "poster", "video", "mobPoster", "mobvideo", "boxRef", "desktopVideoRef", "mobileVideoRef", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "VideoFeature_default"]
 }

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

@@ -1,3 +1,4 @@
+import type { Media } from '../../types/props';
 export interface VideoFeatureProps {
     data: {
         /** 主标题 */
@@ -5,13 +6,13 @@ export interface VideoFeatureProps {
         /** 副标题/描述 */
         subtitle?: string;
         /** 桌面端视频 URL */
-        videoUrl: string;
+        video: Media;
         /** 桌面端视频封面图 */
-        poster?: string;
+        poster?: Media;
         /** 移动端视频 URL */
-        mobvideoUrl?: string;
+        mobvideo?: Media;
         /** 移动端视频封面图 */
-        mobPoster?: string;
+        mobPoster?: Media;
     };
     /** 自定义类名 */
     className?: string;

package/dist/esm/stories/featureCards.stories.js

@@ -1,2 +1,2 @@
-import"react";import s from"../biz-components/FeatureCards/index.js";const a={title:"Biz Components/FeatureCards",component:s,parameters:{layout:"padded",docs:{description:{component:"\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8"}}},tags:["autodocs"]};var n=a;const t={title:"Personalized Carpet Cleaning Mode",subtitle:"You can customize the carpet cleaning mode to suit your needs.",items:[{link:"",theme:"dark",title:"Carpet Avoidance",imageUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",subtitle:"Automatically avoids carpets based on personalized settings."},{link:"",theme:"dark",title:"Mop Lifting",imageUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",subtitle:"Lifts the mop to prevent wetting carpets"},{link:"",theme:"dark",title:"Carpet Detection",imageUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",subtitle:"Increases suction power when carpets are detected."}]},p={args:{data:t}},l={args:{data:{...t,items:t.items.map(e=>({...e,theme:"light"}))}}},m={args:{data:{...t,items:t.items.map(e=>({...e,link:"https://www.example.com"}))}}},d={args:{data:{...t,items:t.items.slice(0,2)}}},c={args:{data:{...t,items:[t.items[0]]}}},f={args:{data:{title:"Personalized Carpet Cleaning Mode",items:t.items}}},g={args:{data:{...t,items:[...t.items,{link:"",theme:"dark",title:"Smart Scheduling",imageUrl:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",subtitle:"Schedule cleaning tasks automatically based on your preferences."}]}}};export{p as Default,g as FourCards,l as LightTheme,c as SingleCard,d as TwoCards,m as WithLinks,f as WithoutSubtitle,n as default};
+import"react";import s from"../biz-components/FeatureCards/index.js";const i={title:"Biz Components/FeatureCards",component:s,parameters:{layout:"padded",docs:{description:{component:"\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8"}}},tags:["autodocs"]};var n=i;const e={title:"Personalized Carpet Cleaning Mode",subtitle:"You can customize the carpet cleaning mode to suit your needs.",items:[{link:"",theme:"dark",title:"Carpet Avoidance",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Carpet Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Automatically avoids carpets based on personalized settings."},{link:"",theme:"dark",title:"Mop Lifting",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",alt:"Mop Lifting",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429",mimeType:"image/png"},subtitle:"Lifts the mop to prevent wetting carpets"},{link:"",theme:"dark",title:"Carpet Detection",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",alt:"Carpet Detection",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429",mimeType:"image/png"},subtitle:"Increases suction power when carpets are detected."}]},p={args:{data:e}},m={args:{data:{...e,items:e.items.map(t=>({...t,theme:"light"}))}}},l={args:{data:{...e,items:e.items.map(t=>({...t,link:"https://www.example.com"}))}}},c={args:{data:{...e,items:e.items.slice(0,2)}}},d={args:{data:{...e,items:[e.items[0]]}}},f={args:{data:{title:"Personalized Carpet Cleaning Mode",items:e.items}}},g={args:{data:{...e,items:[...e.items,{link:"",theme:"dark",title:"Smart Scheduling",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423",mimeType:"image/png"},subtitle:"Schedule cleaning tasks automatically based on your preferences."}]}}};export{p as Default,g as FourCards,m as LightTheme,d as SingleCard,c as TwoCards,l as WithLinks,f as WithoutSubtitle,n as default};
 //# sourceMappingURL=featureCards.stories.js.map

package/dist/esm/stories/featureCards.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/featureCards.stories.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport FeatureCards from '../biz-components/FeatureCards/index.js'\nimport type { FeatureCardsProps } from '../biz-components/FeatureCards/types.js'\n\nconst meta = {\n  title: 'Biz Components/FeatureCards',\n  component: FeatureCards,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component: '\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof FeatureCards>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: FeatureCardsProps['data'] = {\n  title: 'Personalized Carpet Cleaning Mode',\n  subtitle: 'You can customize the carpet cleaning mode to suit your needs.',\n  items: [\n    {\n      link: '',\n      theme: 'dark',\n      title: 'Carpet Avoidance',\n      imageUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n      subtitle: 'Automatically avoids carpets based on personalized settings.',\n    },\n    {\n      link: '',\n      theme: 'dark',\n      title: 'Mop Lifting',\n      imageUrl:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n      subtitle: 'Lifts the mop to prevent wetting carpets',\n    },\n    {\n      link: '',\n      theme: 'dark',\n      title: 'Carpet Detection',\n      imageUrl:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n      subtitle: 'Increases suction power when carpets are detected.',\n    },\n  ],\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: defaultData.items.map((item) => ({\n        ...item,\n        theme: 'light',\n      })),\n    },\n  },\n}\n\nexport const WithLinks: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: defaultData.items.map((item) => ({\n        ...item,\n        link: 'https://www.example.com',\n      })),\n    },\n  },\n}\n\nexport const TwoCards: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: defaultData.items.slice(0, 2),\n    },\n  },\n}\n\nexport const SingleCard: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: [defaultData.items[0]],\n    },\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  args: {\n    data: {\n      title: 'Personalized Carpet Cleaning Mode',\n      items: defaultData.items,\n    },\n  },\n}\n\nexport const FourCards: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: [\n        ...defaultData.items,\n        {\n          link: '',\n          theme: 'dark',\n          title: 'Smart Scheduling',\n          imageUrl: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n          subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n        },\n      ],\n    },\n  },\n}\n"],
-  "mappings": "AAAA,MAAkB,QAElB,OAAOA,MAAkB,0CAGzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,gNACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIf,MAAME,EAAyC,CAC7C,MAAO,oCACP,SAAU,iEACV,MAAO,CACL,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,SAAU,wFACV,SAAU,8DACZ,EACA,CACE,KAAM,GACN,MAAO,OACP,MAAO,cACP,SACE,iHACF,SAAU,0CACZ,EACA,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,SACE,iHACF,SAAU,oDACZ,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,MAAOA,EAAY,MAAM,IAAKG,IAAU,CACtC,GAAGA,EACH,MAAO,OACT,EAAE,CACJ,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGJ,EACH,MAAOA,EAAY,MAAM,IAAKG,IAAU,CACtC,GAAGA,EACH,KAAM,yBACR,EAAE,CACJ,CACF,CACF,EAEaE,EAAkB,CAC7B,KAAM,CACJ,KAAM,CACJ,GAAGL,EACH,MAAOA,EAAY,MAAM,MAAM,EAAG,CAAC,CACrC,CACF,CACF,EAEaM,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGN,EACH,MAAO,CAACA,EAAY,MAAM,CAAC,CAAC,CAC9B,CACF,CACF,EAEaO,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,oCACP,MAAOP,EAAY,KACrB,CACF,CACF,EAEaQ,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGR,EACH,MAAO,CACL,GAAGA,EAAY,MACf,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,SAAU,wFACV,SAAU,kEACZ,CACF,CACF,CACF,CACF",
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport FeatureCards from '../biz-components/FeatureCards/index.js'\nimport type { FeatureCardsProps } from '../biz-components/FeatureCards/types.js'\n\nconst meta = {\n  title: 'Biz Components/FeatureCards',\n  component: FeatureCards,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component: '\u7279\u6027\u5361\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u529F\u80FD\u6216\u7279\u6027\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C Swiper \u6ED1\u52A8',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof FeatureCards>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: FeatureCardsProps['data'] = {\n  title: 'Personalized Carpet Cleaning Mode',\n  subtitle: 'You can customize the carpet cleaning mode to suit your needs.',\n  items: [\n    {\n      link: '',\n      theme: 'dark',\n      title: 'Carpet Avoidance',\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n        alt: 'Carpet Avoidance',\n        thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n        mimeType: 'image/png',\n      },\n      subtitle: 'Automatically avoids carpets based on personalized settings.',\n    },\n    {\n      link: '',\n      theme: 'dark',\n      title: 'Mop Lifting',\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n        alt: 'Mop Lifting',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/2_b45338ef-d3e5-42fd-aea3-f6ee8f564c31.png?v=1752499429',\n        mimeType: 'image/png',\n      },\n      subtitle: 'Lifts the mop to prevent wetting carpets',\n    },\n    {\n      link: '',\n      theme: 'dark',\n      title: 'Carpet Detection',\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n        alt: 'Carpet Detection',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3_99cbfc97-44f5-44f6-a6b0-4b0bbcd26588.png?v=1752499429',\n        mimeType: 'image/png',\n      },\n      subtitle: 'Increases suction power when carpets are detected.',\n    },\n  ],\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: defaultData.items.map((item) => ({\n        ...item,\n        theme: 'light',\n      })),\n    },\n  },\n}\n\nexport const WithLinks: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: defaultData.items.map((item) => ({\n        ...item,\n        link: 'https://www.example.com',\n      })),\n    },\n  },\n}\n\nexport const TwoCards: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: defaultData.items.slice(0, 2),\n    },\n  },\n}\n\nexport const SingleCard: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: [defaultData.items[0]],\n    },\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  args: {\n    data: {\n      title: 'Personalized Carpet Cleaning Mode',\n      items: defaultData.items,\n    },\n  },\n}\n\nexport const FourCards: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: [\n        ...defaultData.items,\n        {\n          link: '',\n          theme: 'dark',\n          title: 'Smart Scheduling',\n          image: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n            alt: 'Smart Scheduling',\n            thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Design_Detail.png?v=1752499423',\n            mimeType: 'image/png',\n          },\n          subtitle: 'Schedule cleaning tasks automatically based on your preferences.',\n        },\n      ],\n    },\n  },\n}\n"],
+  "mappings": "AAAA,MAAkB,QAElB,OAAOA,MAAkB,0CAGzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,gNACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIf,MAAME,EAAyC,CAC7C,MAAO,oCACP,SAAU,iEACV,MAAO,CACL,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,wFACL,IAAK,mBACL,aAAc,wFACd,SAAU,WACZ,EACA,SAAU,8DACZ,EACA,CACE,KAAM,GACN,MAAO,OACP,MAAO,cACP,MAAO,CACL,IAAK,iHACL,IAAK,cACL,aACE,iHACF,SAAU,WACZ,EACA,SAAU,0CACZ,EACA,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,iHACL,IAAK,mBACL,aACE,iHACF,SAAU,WACZ,EACA,SAAU,oDACZ,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,MAAOA,EAAY,MAAM,IAAKG,IAAU,CACtC,GAAGA,EACH,MAAO,OACT,EAAE,CACJ,CACF,CACF,EAEaC,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGJ,EACH,MAAOA,EAAY,MAAM,IAAKG,IAAU,CACtC,GAAGA,EACH,KAAM,yBACR,EAAE,CACJ,CACF,CACF,EAEaE,EAAkB,CAC7B,KAAM,CACJ,KAAM,CACJ,GAAGL,EACH,MAAOA,EAAY,MAAM,MAAM,EAAG,CAAC,CACrC,CACF,CACF,EAEaM,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGN,EACH,MAAO,CAACA,EAAY,MAAM,CAAC,CAAC,CAC9B,CACF,CACF,EAEaO,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,oCACP,MAAOP,EAAY,KACrB,CACF,CACF,EAEaQ,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGR,EACH,MAAO,CACL,GAAGA,EAAY,MACf,CACE,KAAM,GACN,MAAO,OACP,MAAO,mBACP,MAAO,CACL,IAAK,wFACL,IAAK,mBACL,aAAc,wFACd,SAAU,WACZ,EACA,SAAU,kEACZ,CACF,CACF,CACF,CACF",
   "names": ["FeatureCards", "meta", "featureCards_stories_default", "defaultData", "Default", "LightTheme", "item", "WithLinks", "TwoCards", "SingleCard", "WithoutSubtitle", "FourCards"]
 }

package/dist/esm/stories/featureShowcase.stories.js

@@ -1,2 +1,2 @@
-import"react";import t from"../biz-components/FeatureShowcase/index.js";const a={title:"Biz Components/FeatureShowcase",component:t,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:"\u529F\u80FD\u5C55\u793A\u7EC4\u4EF6\uFF0C\u5C55\u793A\u591A\u4E2A\u5E26\u6587\u5B57\u8986\u76D6\u7684\u56FE\u7247\u5361\u7247\uFF0C\u652F\u6301\u6A2A\u5411\u6EDA\u52A8"}}},tags:["autodocs"]};var c=a;const e={datalist:[{desc:"Saves energy by charging during off-peak hours.",image:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/12f00a84-d4f7-4f7d-af6b-361b49c70a87_Frame_2121235336.png?v=1751425415",title:"Off-Peak Charging",imageMob:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/0dd1df60-4732-45a3-995e-43977d45d2b2_Frame_2121235316.png?v=1751547005"},{desc:"Keep RoboVac out of restricted areas.",image:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/45dacd44-c1c2-43b2-af50-bfe539925428_Frame_2121235337.png?v=1751425570",title:"No-Go Zones",imageMob:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7aabcf2e-5601-4b1f-b66f-95c9a5d1c55d_Frame_2121235317.png?v=1751547075"}],datalists:[{desc:"Prevents accidental  activation.",image:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b9b2cb76-411c-4e95-9a21-590522a2b8b5_Frame_2121235339.png?v=1751452403",title:"Child Lock Protection",imageMob:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/feae0e5e-85fb-49d1-bdc1-b59d632210b8_Frame_2121235516.png?v=1751547104"},{desc:"Automatically resumes cleaning after charging.",image:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/eb323290-a12b-4b42-80f3-76641e5d0fab_Frame_2121235338.png?v=1751452429",title:"Recharge and Resume",imageMob:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7a90f1b9-b20a-4958-9088-a3639d23b4b4_Frame_2121235516_1.png?v=1751547133"}]},r={args:{data:e}},d={args:{data:{datalist:e.datalist,datalists:[]}}},f={args:{data:{datalist:[e.datalist[0]],datalists:[e.datalists[0]]}}},p={args:{data:{datalist:[],datalists:[]}}};export{r as Default,p as EmptyLists,f as SingleItemPerList,d as SingleList,c as default};
+import"react";import a from"../biz-components/FeatureShowcase/index.js";const t={title:"Biz Components/FeatureShowcase",component:a,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:"\u529F\u80FD\u5C55\u793A\u7EC4\u4EF6\uFF0C\u5C55\u793A\u591A\u4E2A\u5E26\u6587\u5B57\u8986\u76D6\u7684\u56FE\u7247\u5361\u7247\uFF0C\u652F\u6301\u6A2A\u5411\u6EDA\u52A8"}}},tags:["autodocs"]};var f=t;const e={datalist:[{desc:"Saves energy by charging during off-peak hours.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/12f00a84-d4f7-4f7d-af6b-361b49c70a87_Frame_2121235336.png?v=1751425415",alt:"Off-Peak Charging",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/12f00a84-d4f7-4f7d-af6b-361b49c70a87_Frame_2121235336.png?v=1751425415",mimeType:"image/png"},title:"Off-Peak Charging",imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/0dd1df60-4732-45a3-995e-43977d45d2b2_Frame_2121235316.png?v=1751547005",alt:"Off-Peak Charging Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/0dd1df60-4732-45a3-995e-43977d45d2b2_Frame_2121235316.png?v=1751547005",mimeType:"image/png"}},{desc:"Keep RoboVac out of restricted areas.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/45dacd44-c1c2-43b2-af50-bfe539925428_Frame_2121235337.png?v=1751425570",alt:"No-Go Zones",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/45dacd44-c1c2-43b2-af50-bfe539925428_Frame_2121235337.png?v=1751425570",mimeType:"image/png"},title:"No-Go Zones",imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7aabcf2e-5601-4b1f-b66f-95c9a5d1c55d_Frame_2121235317.png?v=1751547075",alt:"No-Go Zones Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7aabcf2e-5601-4b1f-b66f-95c9a5d1c55d_Frame_2121235317.png?v=1751547075",mimeType:"image/png"}}],datalists:[{desc:"Prevents accidental  activation.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b9b2cb76-411c-4e95-9a21-590522a2b8b5_Frame_2121235339.png?v=1751452403",alt:"Child Lock Protection",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/b9b2cb76-411c-4e95-9a21-590522a2b8b5_Frame_2121235339.png?v=1751452403",mimeType:"image/png"},title:"Child Lock Protection",imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/feae0e5e-85fb-49d1-bdc1-b59d632210b8_Frame_2121235516.png?v=1751547104",alt:"Child Lock Protection Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/feae0e5e-85fb-49d1-bdc1-b59d632210b8_Frame_2121235516.png?v=1751547104",mimeType:"image/png"}},{desc:"Automatically resumes cleaning after charging.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/eb323290-a12b-4b42-80f3-76641e5d0fab_Frame_2121235338.png?v=1751452429",alt:"Recharge and Resume",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/eb323290-a12b-4b42-80f3-76641e5d0fab_Frame_2121235338.png?v=1751452429",mimeType:"image/png"},title:"Recharge and Resume",imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7a90f1b9-b20a-4958-9088-a3639d23b4b4_Frame_2121235516_1.png?v=1751547133",alt:"Recharge and Resume Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7a90f1b9-b20a-4958-9088-a3639d23b4b4_Frame_2121235516_1.png?v=1751547133",mimeType:"image/png"}}]},c={args:{data:e}},m={args:{data:{datalist:e.datalist,datalists:[]}}},p={args:{data:{datalist:[e.datalist[0]],datalists:[e.datalists[0]]}}},l={args:{data:{datalist:[],datalists:[]}}};export{c as Default,l as EmptyLists,p as SingleItemPerList,m as SingleList,f as default};
 //# sourceMappingURL=featureShowcase.stories.js.map