npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1762500570709 → 1.0.26-alpha.1762502118179 - Mend

@anker-in/headless-ui 1.0.26-alpha.1762500570709 → 1.0.26-alpha.1762502118179

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

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

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

package/dist/esm/biz-components/MediaPlayerSticky/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as N,jsx as e,jsxs as p}from"react/jsx-runtime";import J,{useState as u,useRef as d,useEffect as y,forwardRef as K}from"react";import{debounce as U}from"es-toolkit";import{useInView as X}from"react-intersection-observer";import{cn as v}from"../../helpers/utils.js";import{withLayout as Z}from"../../shared/Styles.js";import ee from"../Slogan/index.js";import{YouTubePlayer as te}from"../VideoModal/YouTubePlayer.js";import{Grid as re,GridItem as k}from"../../components/gird.js";import{Container as se}from"../../components/container.js";import ae from"../BrandEquity/index.js";import ne from"../MemberEquity/index.js";import le from"../Spacer/index.js";import ie from"gsap";import{convertLexicalToHTML as E}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as P}from"react-responsive";import oe from"../../helpers/ScrollLoadVideo.js";const S=({defaultConverters:l})=>({...l,text:r=>{const{node:t}=r;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:l,spaceY:r,className:t})=>{const s=P({query:"(max-width: 768px)"});return e(se,{spaceY:r,className:v("!bg-transparent",t),children:p(re,{children:[!s&&e(k,{span:1}),e(k,{span:s?12:10,children:l}),!s&&e(k,{span:1})]})})},ce=J.forwardRef(({children:l,id:r,components:t})=>{const s=d(null);return p("div",{ref:s,className:"relative z-10",children:[e(N,{children:l}),e(N,{children:t?.map(a=>{switch(a.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(x,{spaceY:"none",children:e(ae,{data:a,style:a?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(x,{spaceY:"none",children:e(ne,{data:a,className:"w-full",style:a?.style})})});case"ipc-spacer":return e(le,{data:a,style:a?.style,className:"!bg-transparent"});default:return null}})})]})}),ue=K(({className:l="",id:r,data:{title:t,videoTitle:s,mobVideo:a,mobImg:m,img:f,isYouTube:L,youtubePcId:R,youtubeMobileId:B,video:g,theme:M,shape:$,components:Y}})=>{const H=d(null),b=d(null),{ref:q,inView:o}=X(),[de,F]=u(0),[T,I]=u(!1),[j,G]=u(!1),V=d(null),n=d(null),O=typeof t=="string"?t:t&&E({data:t,converters:S});typeof s=="string"||s&&E({data:s,converters:S});const[Q,W]=u(0),[i,_]=u(!1),z=P({query:"(max-width: 768px)"});y(()=>{_(z)},[z]);const w=U(()=>{if(b.current){const h=b.current.getBoundingClientRect(),c=i?window.screen.height:window.innerHeight,A=window.scrollY||window.pageYOffset,D=h.bottom+A,C=document.documentElement.scrollHeight-D;W(C>c?c:C),F(c)}},2e3);return y(()=>{o&&!T&&(H.current?.play(),I(!0))},[o,T]),y(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),y(()=>{function h(){const c=i?window.screen.height:window.innerHeight;n.current&&(n.current.scrollTrigger?.kill(),n.current.kill(),n.current=null),n.current=ie.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${c*1.8}px bottom`,scrub:.5,invalidateOnRefresh:!0},defaults:{ease:"none",force3D:!0}}).to(`.${r} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${r} .media-content`,{yPercent:140,duration:1},"<")}return o&&h(),()=>{n.current&&(n.current.scrollTrigger?.kill(),n.current.kill(),n.current=null)}},[o,i,r]),p(N,{children:[e("div",{id:r,className:v("relative z-20 h-screen w-full",l,{"aiui-dark":M==="dark","rounded-box":$==="rounded"}),ref:V,children:e("div",{ref:q,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(x,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ee,{className:"sticky-title antialiased",data:{title:O||"",theme:M}})})})}),p("div",{ref:b,style:{marginBottom:`-${Q}px`,zIndex:o?2:1},className:v(r,"relative mt-[-200vh]"),children:[e("div",{className:"sticky top-0 ",children:p("div",{className:v("media-cover","relative h-screen w-full"),children:[L?e(te,{youTubeId:i&&B||R}):g?.url&&e(oe,{videoRef:H,poster:i&&m?.url?m?.url:f?.url,src:i&&a?.url?a?.url:g?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{G(!0)}}),f?.url&&(!g?.url||j)&&e("img",{src:i&&m?.url?m?.url:f?.url,alt:f?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});var Ce=Z(ue);export{Ce as default};
+"use client";import{Fragment as N,jsx as e,jsxs as p}from"react/jsx-runtime";import J,{useState as u,useRef as d,useEffect as y,forwardRef as K}from"react";import{debounce as U}from"es-toolkit";import{useInView as X}from"react-intersection-observer";import{cn as v}from"../../helpers/utils.js";import{withLayout as Z}from"../../shared/Styles.js";import ee from"../Slogan/index.js";import{YouTubePlayer as te}from"../VideoModal/YouTubePlayer.js";import{Grid as re,GridItem as k}from"../../components/gird.js";import{Container as se}from"../../components/container.js";import ae from"../BrandEquity/index.js";import ne from"../MemberEquity/index.js";import le from"../Spacer/index.js";import ie from"gsap";import{convertLexicalToHTML as E}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as P}from"react-responsive";import oe from"../../helpers/ScrollLoadVideo.js";const S=({defaultConverters:l})=>({...l,text:r=>{const{node:t}=r;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:l,spaceY:r,className:t})=>{const s=P({query:"(max-width: 768px)"});return e(se,{spaceY:r,className:v("!bg-transparent",t),children:p(re,{children:[!s&&e(k,{span:1}),e(k,{span:s?12:10,children:l}),!s&&e(k,{span:1})]})})},ce=J.forwardRef(({children:l,id:r,components:t})=>{const s=d(null);return p("div",{ref:s,className:"relative z-10",children:[e(N,{children:l}),e(N,{children:t?.map(a=>{switch(a.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(x,{spaceY:"none",children:e(ae,{data:a,style:a?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(x,{spaceY:"none",children:e(ne,{data:a,className:"w-full",style:a?.style})})});case"ipc-spacer":return e(le,{data:a,style:a?.style,className:"!bg-transparent"});default:return null}})})]})}),ue=K(({className:l="",id:r,data:{title:t,videoTitle:s,mobVideo:a,mobImg:m,img:f,isYouTube:L,youtubePcId:R,youtubeMobileId:B,video:g,theme:M,shape:$,components:Y}})=>{const H=d(null),b=d(null),{ref:q,inView:o}=X(),[de,F]=u(0),[T,I]=u(!1),[j,G]=u(!1),V=d(null),n=d(null),O=typeof t=="string"?t:t&&E({data:t,converters:S});typeof s=="string"||s&&E({data:s,converters:S});const[Q,W]=u(0),[i,_]=u(!1),z=P({query:"(max-width: 768px)"});y(()=>{_(z)},[z]);const w=U(()=>{if(b.current){const h=b.current.getBoundingClientRect(),c=i?window.screen.height:window.innerHeight,A=window.scrollY||window.pageYOffset,D=h.bottom+A,C=document.documentElement.scrollHeight-D;W(C>c?c:C),F(c)}},2e3);return y(()=>{o&&!T&&(H.current?.play(),I(!0))},[o,T]),y(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),y(()=>{function h(){const c=i?window.screen.height:window.innerHeight;n.current&&(n.current.scrollTrigger?.kill(),n.current.kill(),n.current=null),n.current=ie.timeline({scrollTrigger:{trigger:`#${r}`,start:"top top",end:`top+=${c*1.8}px bottom`,scrub:.5,invalidateOnRefresh:!0},defaults:{ease:"none",force3D:!0}}).to(`.${r} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${r} .media-content`,{yPercent:150,duration:1},"<")}return o&&h(),()=>{n.current&&(n.current.scrollTrigger?.kill(),n.current.kill(),n.current=null)}},[o,i,r]),p(N,{children:[e("div",{id:r,className:v("relative z-20 h-screen w-full",l,{"aiui-dark":M==="dark","rounded-box":$==="rounded"}),ref:V,children:e("div",{ref:q,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(x,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ee,{className:"sticky-title antialiased",data:{title:O||"",theme:M}})})})}),p("div",{ref:b,style:{marginBottom:`-${Q}px`,zIndex:o?2:1},className:v(r,"relative mt-[-200vh]"),children:[e("div",{className:"sticky top-0 ",children:p("div",{className:v("media-cover","relative h-screen w-full"),children:[L?e(te,{youTubeId:i&&B||R}):g?.url&&e(oe,{videoRef:H,poster:i&&m?.url?m?.url:f?.url,src:i&&a?.url?a?.url:g?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{G(!0)}}),f?.url&&(!g?.url||j)&&e("img",{src:i&&m?.url?m?.url:f?.url,alt:f?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});var Ce=Z(ue);export{Ce as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/MediaPlayerSticky/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  ({\n    className = '',\n    id,\n    data: {\n      title,\n      videoTitle,\n      mobVideo,\n      mobImg,\n      img,\n      isYouTube,\n      youtubePcId,\n      youtubeMobileId,\n      video,\n      theme,\n      shape,\n      components,\n    },\n  }) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const tlRef = useRef<gsap.core.Timeline | null>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        if (tlRef.current) {\n          tlRef.current.scrollTrigger?.kill()\n          tlRef.current.kill()\n          tlRef.current = null\n        }\n        tlRef.current = gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n              invalidateOnRefresh: true,\n            },\n            defaults: { ease: 'none', force3D: true },\n          })\n          .to(`.${id} .sticky-cover`, { backdropFilter: 'blur(8px)', duration: 0.4 })\n          .to(`#${id} .media-content`, { yPercent: 140, duration: 1 }, '<')\n      }\n      if (inView) {\n        gsapResize()\n      }\n      return () => {\n        if (tlRef.current) {\n          tlRef.current.scrollTrigger?.kill()\n          tlRef.current.kill()\n          tlRef.current = null\n        }\n      }\n    }, [inView, isMobile, id])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]')}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)', willChange: 'backdrop-filter' }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst SubContainer = ({\n  children,\n  spaceY,\n  className,\n}: {\n  children: React.ReactNode\n  spaceY?: string\n  className?: string\n}) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  return (\n    <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n      <Grid>\n        {!isMobile && <GridItem span={1} />}\n        <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n        {!isMobile && <GridItem span={1} />}\n      </Grid>\n    </Container>\n  )\n}\n\nconst SubBox = React.forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  {\n    children?: React.ReactNode\n    id?: string\n    components?: MediaPlayerComponent[]\n  }\n>(({ children, id, components }) => {\n  const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n      <>{children}</>\n      <>\n        {components?.map((componentData: any) => {\n          switch (componentData.blockType) {\n            case 'ipc-brand-equity': {\n              return (\n                <div className=\"relative z-20 bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <BrandEquity data={componentData} style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-member-equity': {\n              return (\n                <div className=\"relative z-20 w-full bg-transparent\">\n                  <SubContainer spaceY=\"none\">\n                    <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n                  </SubContainer>\n                </div>\n              )\n            }\n            case 'ipc-spacer': {\n              return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n            }\n            default:\n              return null\n          }\n        })}\n      </>\n    </div>\n  )\n})\n\nconst MediaPlayerSticky = forwardRef<\n  {\n    mediaPlayerStickyRef: HTMLDivElement\n  },\n  MediaPlayerBaseProps\n>(\n  ({\n    className = '',\n    id,\n    data: {\n      title,\n      videoTitle,\n      mobVideo,\n      mobImg,\n      img,\n      isYouTube,\n      youtubePcId,\n      youtubeMobileId,\n      video,\n      theme,\n      shape,\n      components,\n    },\n  }) => {\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const boxRef = useRef<HTMLDivElement>(null)\n    const { ref: inViewRef, inView } = useInView()\n    const [screenHeight, setScreenHeight] = useState(0)\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [isEntered, setIsEntered] = useState(false)\n    const wrapperRef = useRef<HTMLDivElement>(null)\n    const tlRef = useRef<gsap.core.Timeline | null>(null)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    typeof videoTitle === 'string'\n      ? videoTitle\n      : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    const [btb, setbtb] = useState(0)\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const debouncedHandleResize = debounce(() => {\n      if (boxRef.current) {\n        const rect = boxRef.current.getBoundingClientRect()\n        const screenHeight = isMobile ? window.screen.height : window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n        setScreenHeight(screenHeight)\n      }\n    }, 2000)\n\n    useEffect(() => {\n      if (inView && !isPlaying) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      }\n    }, [inView, isPlaying])\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        const height = isMobile ? window.screen.height : window.innerHeight\n        if (tlRef.current) {\n          tlRef.current.scrollTrigger?.kill()\n          tlRef.current.kill()\n          tlRef.current = null\n        }\n        tlRef.current = gsap\n          .timeline({\n            scrollTrigger: {\n              trigger: `#${id}`,\n              start: 'top top',\n              end: `top+=${height * 1.8}px bottom`,\n              scrub: 0.5,\n              invalidateOnRefresh: true,\n            },\n            defaults: { ease: 'none', force3D: true },\n          })\n          .to(`.${id} .sticky-cover`, { backdropFilter: 'blur(8px)', duration: 0.4 })\n          .to(`#${id} .media-content`, { yPercent: 150, duration: 1 }, '<')\n      }\n      if (inView) {\n        gsapResize()\n      }\n      return () => {\n        if (tlRef.current) {\n          tlRef.current.scrollTrigger?.kill()\n          tlRef.current.kill()\n          tlRef.current = null\n        }\n      }\n    }, [inView, isMobile, id])\n\n    return (\n      <>\n        <div\n          id={id}\n          className={cn('relative z-20 h-screen w-full', className, {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n          })}\n          ref={wrapperRef}\n        >\n          <div\n            ref={inViewRef}\n            className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n            style={{ willChange: 'transform', contain: 'paint' }}\n          >\n            <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n              <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n            </SubContainer>\n          </div>\n        </div>\n\n        <div\n          ref={boxRef}\n          style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n          className={cn(id, 'relative mt-[-200vh]')}\n        >\n          <div className=\"sticky top-0 \">\n            <div className={cn('media-cover', 'relative h-screen w-full')}>\n              {isYouTube ? (\n                <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n              ) : (\n                video?.url && (\n                  <ScrollLoadVideo\n                    videoRef={videoRef}\n                    poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                    src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n                    className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n                    videoClassName=\" object-cover object-[82%]\"\n                    muted\n                    loop={false}\n                    playsInline\n                    onEnded={() => {\n                      setIsEntered(true)\n                    }}\n                  />\n                )\n              )}\n              {img?.url && (!video?.url || isEntered) && (\n                <img\n                  src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n                  alt={img?.alt}\n                  className=\"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]\"\n                />\n              )}\n              <div\n                className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n                style={{ backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)', willChange: 'backdrop-filter' }}\n              />\n            </div>\n          </div>\n\n          <div className=\"relative h-screen w-full\" />\n          <SubBox components={components}></SubBox>\n          <div className=\"relative h-screen w-full\" />\n        </div>\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
   "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "tlRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
 }

package/dist/esm/biz-components/Title/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as o,jsxs as R}from"react/jsx-runtime";import C,{useEffect as F,useRef as n,useImperativeHandle as O}from"react";import{gsap as u}from"gsap";import{SplitText as v}from"gsap/dist/SplitText";import{ScrollTrigger as x}from"gsap/dist/ScrollTrigger";import{cn as T}from"../../helpers/utils.js";import{Heading as _}from"../../components/index.js";import{withLayout as q}from"../../shared/Styles.js";import"../../hooks/useExposure.js";import{trackUrlRef as A}from"../../shared/trackUrlRef.js";import{useInView as G}from"react-intersection-observer";const k="link",y="title",b=C.forwardRef(({data:L,className:E,as:H="h2"},M)=>{const{title:i,caption:s,theme:p,extensions:l}=L,f=n(null),e=n(null),t=n(null),r=n(null),{ref:N,inView:d}=G();return O(M,()=>f.current),F(()=>{u.registerPlugin(v,x);function $(){if(!e.current)return;const D=e.current?.clientHeight||80;t.current&&t.current.revert(),r.current&&r.current.kill(),t.current=new v(e.current,{type:"words",wordsClass:"word"});const a=t.current.words;u.set(a,{opacity:0}),r.current=x.create({trigger:e.current,start:"bottom bottom-=4%",end:`bottom+=${D*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:P=>{const S=P.progress,g=a.length||1,z=.5,c=1/g,h=c*(1-z),w=(g-1)*h+c,I=Math.min(1,w>0?S/w:0);a.forEach((V,U)=>{const j=U*h,B=c;let m=(I-j)/B;m=Math.max(0,Math.min(1,m)),u.set(V,{opacity:m})})}})}return d&&$(),()=>{t.current&&t.current.revert(),r.current&&r.current.kill()}},[d]),(i||s)&&R("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:f,children:[o("div",{ref:N,className:T("space-y-4 flex-1",E,{"aiui-dark":p==="dark"}),children:o(_,{ref:e,as:H,size:4,html:s||i})}),l?.textLink&&R("a",{className:T({"aiui-dark":p==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:A(l?.link,`${k}_${y}`),"data-headless-type-name":`${k}#${y}`,"data-headless-title-desc-button":`${i}#${s}`,children:[l?.textLink,o("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:o("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});b.displayName="Title";var ot=q(b);export{ot as default};
+"use client";import{jsx as i,jsxs as L}from"react/jsx-runtime";import F,{useEffect as O,useRef as n,useImperativeHandle as _}from"react";import{gsap as f}from"gsap";import{SplitText as v}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as k}from"../../helpers/utils.js";import{Heading as q}from"../../components/index.js";import{withLayout as A}from"../../shared/Styles.js";import"../../hooks/useExposure.js";import{trackUrlRef as G}from"../../shared/trackUrlRef.js";import{useInView as J}from"react-intersection-observer";const y="link",b="title",R=F.forwardRef(({data:E,className:H,as:M="h2"},N)=>{const{title:o,caption:s,theme:p,extensions:l,align:a="left"}=E,d=n(null),e=n(null),t=n(null),r=n(null),{ref:$,inView:g}=J();return _(N,()=>d.current),O(()=>{f.registerPlugin(v,T);function D(){if(!e.current)return;const P=e.current?.clientHeight||80;t.current&&t.current.revert(),r.current&&r.current.kill(),t.current=new v(e.current,{type:"words",wordsClass:"word"});const c=t.current.words;f.set(c,{opacity:0}),r.current=T.create({trigger:e.current,start:"bottom bottom-=4%",end:`bottom+=${P*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:S=>{const z=S.progress,h=c.length||1,I=.5,m=1/h,x=m*(1-I),w=(h-1)*x+m,V=Math.min(1,w>0?z/w:0);c.forEach((U,j)=>{const B=j*x,C=m;let u=(V-B)/C;u=Math.max(0,Math.min(1,u)),f.set(U,{opacity:u})})}})}return g&&D(),()=>{t.current&&t.current.revert(),r.current&&r.current.kill()}},[g]),(o||s)&&L("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:d,children:[i("div",{ref:$,className:k("space-y-4 flex-1",H,{"aiui-dark":p==="dark","text-center":a==="center","text-right":a==="right","text-left":a==="left"}),children:i(q,{ref:e,as:M,size:4,html:s||o})}),l?.textLink&&L("a",{className:k({"aiui-dark":p==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:G(l?.link,`${y}_${b}`),"data-headless-type-name":`${y}#${b}`,"data-headless-title-desc-button":`${o}#${s}`,children:[l?.textLink,i("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:i("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});R.displayName="Title";var ot=A(R);export{ot as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Title/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2' }, ref) => {\n  const { title, caption, theme, extensions } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      if (splitTextInstance.current) {\n        splitTextInstance.current.revert()\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n      }\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        invalidateOnRefresh: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length || 1\n          const overlap = 0.5\n          const interval = 1 / total\n          const step = interval * (1 - overlap)\n          const lastEnd = (total - 1) * step + interval\n          const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n          words.forEach((word: any, i: number) => {\n            const start = i * step\n            const width = interval\n            let opacity = (normalizedProgress - start) / width\n            opacity = Math.max(0, Math.min(1, opacity))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n        <div ref={inViewRef} className={cn('space-y-4 flex-1', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as={as} size={4} html={caption || title} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            {extensions?.textLink}\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n              ></path>\n            </svg>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "as", "ref", "title", "caption", "theme", "extensions", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2' }, ref) => {\n  const { title, caption, theme, extensions, align = 'left' } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      if (splitTextInstance.current) {\n        splitTextInstance.current.revert()\n      }\n      if (scrollTriggerRef.current) {\n        scrollTriggerRef.current.kill()\n      }\n      splitTextInstance.current = new SplitText(titleRef.current, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n      const words = splitTextInstance.current.words\n      gsap.set(words, { opacity: 0 })\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n        scrub: true,\n        invalidateOnRefresh: true,\n        onUpdate: (self: any) => {\n          const progress = self.progress\n          const total = words.length || 1\n          const overlap = 0.5\n          const interval = 1 / total\n          const step = interval * (1 - overlap)\n          const lastEnd = (total - 1) * step + interval\n          const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n          words.forEach((word: any, i: number) => {\n            const start = i * step\n            const width = interval\n            let opacity = (normalizedProgress - start) / width\n            opacity = Math.max(0, Math.min(1, opacity))\n            gsap.set(word, { opacity })\n          })\n        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    (title || caption) && (\n      <div className=\"mb-6 flex items-end justify-between overflow-hidden title-box\" ref={innerRef}>\n        <div\n          ref={inViewRef}\n          className={cn('space-y-4 flex-1', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-right': align === 'right',\n            'text-left': align === 'left',\n          })}\n        >\n          <Heading ref={titleRef} as={as} size={4} html={caption || title} />\n        </div>\n        {extensions?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${title}#${caption}`}\n          >\n            {extensions?.textLink}\n            <svg\n              width=\"24\"\n              height=\"24\"\n              className=\"mb-[3px]\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n            >\n              <path\n                className=\"transition-all duration-[0.4s]\"\n                d=\"M10.5 8L14.5 12L10.5 16\"\n                stroke=\"#777\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n              ></path>\n            </svg>\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "gsap", "SplitText", "ScrollTrigger", "cn", "Heading", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "Title", "data", "className", "as", "ref", "title", "caption", "theme", "extensions", "align", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
 }

package/dist/esm/biz-components/Title/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { Theme } from '../../types/props.js';
+import type { Align, Theme } from '../../types/props.js';
 export interface Feature {
     /**
      * 特性标题
@@ -7,6 +7,7 @@ export interface Feature {
 }
 export interface TitleProps {
     data: {
+        align?: Align;
         /**
          * 主标题
          */

package/dist/esm/stories/imageWithText.stories.js CHANGED Viewed

@@ -3,7 +3,7 @@ import"react";import s from"../biz-components/ImageWithText/index.js";const o={t
 1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E
 2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E
-\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09`}}},tags:["autodocs"]};var c=o;const i={theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},subtitle:"iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.",mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"}},l={args:{data:i},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F"}}}},d={args:{data:{...i,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898"}}}},r={args:{data:{...i,desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F"}}}},f={args:{data:{...i,theme:"dark",desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898"}}}},g={args:{data:{theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898"}}}},h={args:{data:{theme:"light",title:"Simple Title",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Simple Title",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Simple Title Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Simple Title Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E"}}}},b={args:{data:{...i,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0"}}}},_={args:{data:{...i,layout:"top"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A"}}}},y={args:{data:{...i,layout:"bottom"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0"}}}},t={title:"DuoSpiral\u2122 Detangle Brushes",subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",mediaType:"video",image:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobileVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}},u={args:{data:t},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD"}}}},v={args:{data:{...t,layout:"right"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0"}}}},T={args:{data:{...t,layout:"top"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F"}}}},a={title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",alt:"AI.See\u2122 Obstacle Avoidance Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",alt:"AI.See\u2122 Obstacle Avoidance Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",mimeType:"image/png"},items:[{icon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",text:"200+",desc:"Identifies and avoids 200+ objects."}]},S={args:{data:a},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E"}}}},x={args:{data:{...a,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7"}}}},M={args:{data:{...a,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898"}}}},P={args:{data:{title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",mediaType:"video",video:t.video,padVideo:t.video,mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"AI Feature Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"},poster:t.image,padPoster:t.image,mobPoster:t.mobileImage,items:a.items}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E"}}}},e={desc:"Effortless customization at your fingertips.",title:"Smart App Control",datalist:[{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Customizable Cleaning Modes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Customizable Cleaning Modes",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Customizable Cleaning Modes Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Customizable Cleaning Modes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}},{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",alt:"Multi-Floor Mapping",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",mimeType:"image/png"},title:"Multi-Floor Mapping",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",alt:"Multi-Floor Mapping Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",alt:"Multi-Floor Mapping Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",mimeType:"image/png"}}]},R={args:{data:e},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C"}}}},I={args:{data:{...e,datalist:[...e.datalist,{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Smart Scheduling",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Smart Scheduling Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Smart Scheduling Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879"}}}},L={args:{data:{title:"Smart App Control",desc:"Effortless customization at your fingertips.",mediaType:"video",datalist:[{title:"Customizable Cleaning Modes",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Customizable Cleaning Modes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"Customizable Cleaning Modes Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},image:e.datalist[0].image,imgPad:e.datalist[0].imgPad,imageMob:e.datalist[0].imageMob},{title:"Multi-Floor Mapping",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Multi-Floor Mapping Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"Multi-Floor Mapping Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},image:e.datalist[1].image,imgPad:e.datalist[1].imgPad,imageMob:e.datalist[1].imageMob}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E"}}}},k={args:{data:i,className:"custom-image-with-text"},parameters:{docs:{description:{story:`
+\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09`}}},tags:["autodocs"]};var p=o;const i={theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},subtitle:"iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.",mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},items:[{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",alt:"LED",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",mimeType:"image/svg+xml"},text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",alt:"200+",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",mimeType:"image/svg+xml"},text:"200+",desc:"Identifies and avoids 200+ objects."}]},l={args:{data:i},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F"}}}},d={args:{data:{...i,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898"}}}},r={args:{data:{...i,desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F"}}}},f={args:{data:{...i,theme:"dark",desc:"20,000Pa",descIcon:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898"}}}},g={args:{data:{theme:"light",title:"Precise Navigation",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Precise Navigation",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Precise Navigation Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Precise Navigation Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898"}}}},h={args:{data:{theme:"light",title:"Simple Title",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",alt:"Simple Title",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",alt:"Simple Title Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",alt:"Simple Title Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E"}}}},b={args:{data:{...i,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0"}}}},y={args:{data:{...i,layout:"top"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A"}}}},u={args:{data:{...i,layout:"bottom"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0"}}}},t={title:"DuoSpiral\u2122 Detangle Brushes",subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",mediaType:"video",image:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}},_={args:{data:t},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD"}}}},v={args:{data:{...t,layout:"right"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0"}}}},T={args:{data:{...t,layout:"top"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F"}}}},a={title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747",mimeType:"image/png"},padImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",alt:"AI.See\u2122 Obstacle Avoidance Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807",mimeType:"image/png"},mobileImage:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",alt:"AI.See\u2122 Obstacle Avoidance Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780",mimeType:"image/png"},items:[{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",alt:"LED",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015",mimeType:"image/svg+xml"},text:"LED",desc:"Equipped with LEDs for dark environments"},{icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",alt:"200+",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015",mimeType:"image/svg+xml"},text:"200+",desc:"Identifies and avoids 200+ objects."}]},S={args:{data:a},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E"}}}},x={args:{data:{...a,layout:"right"}},parameters:{docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7"}}}},R={args:{data:{...a,theme:"dark"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898"}}}},L={args:{data:{title:"AI.See\u2122 Obstacle Avoidance",subtitle:"Advanced AI and RGB visual recognition.",mediaType:"video",video:t.video,padVideo:t.video,mobVideo:t.mobVideo,items:a.items}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E"}}}},e={desc:"Effortless customization at your fingertips.",title:"Smart App Control",datalist:[{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Customizable Cleaning Modes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Customizable Cleaning Modes",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Customizable Cleaning Modes Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Customizable Cleaning Modes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}},{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",alt:"Multi-Floor Mapping",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",mimeType:"image/png"},title:"Multi-Floor Mapping",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",alt:"Multi-Floor Mapping Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",alt:"Multi-Floor Mapping Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",mimeType:"image/png"}}]},M={args:{data:e},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C"}}}},I={args:{data:{...e,datalist:[...e.datalist,{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Smart Scheduling",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Smart Scheduling Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Smart Scheduling Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879"}}}},P={args:{data:{title:"Smart App Control",desc:"Effortless customization at your fingertips.",mediaType:"video",datalist:[{title:"Customizable Cleaning Modes",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Customizable Cleaning Modes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},image:e.datalist[0].image,imgPad:e.datalist[0].imgPad,imageMob:e.datalist[0].imageMob},{title:"Multi-Floor Mapping",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Multi-Floor Mapping Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},image:e.datalist[1].image,imgPad:e.datalist[1].imgPad,imageMob:e.datalist[1].imageMob}]}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:"TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E"}}}},k={args:{data:i,className:"custom-image-with-text"},parameters:{docs:{description:{story:`
 \u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A
 **\u6839\u5143\u7D20\uFF1A**
@@ -49,5 +49,5 @@ import"react";import s from"../biz-components/ImageWithText/index.js";const o={t
   filter: brightness(1.2);
 }
 \`\`\`
-        `}}}};export{d as DarkTheme,l as Default,y as LayoutBottom,b as LayoutRight,_ as LayoutTop,h as MinimalContent,R as TabMode,I as TabModeThreeItems,L as TabModeWithVideo,k as WithCustomStyles,r as WithDescriptionText,f as WithDescriptionTextDark,S as WithItems,M as WithItemsDark,x as WithItemsImageRight,P as WithItemsVideo,u as WithVideo,v as WithVideoRight,T as WithVideoTop,g as WithoutSubtitle,c as default};
+        `}}}};export{d as DarkTheme,l as Default,u as LayoutBottom,b as LayoutRight,y as LayoutTop,h as MinimalContent,M as TabMode,I as TabModeThreeItems,P as TabModeWithVideo,k as WithCustomStyles,r as WithDescriptionText,f as WithDescriptionTextDark,S as WithItems,R as WithItemsDark,x as WithItemsImageRight,L as WithItemsVideo,_ as WithVideo,v as WithVideoRight,T as WithVideoTop,g as WithoutSubtitle,p as default};
 //# sourceMappingURL=imageWithText.stories.js.map

package/dist/esm/stories/imageWithText.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/imageWithText.stories.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport ImageWithText from '../biz-components/ImageWithText/index.js'\nimport type { ImageWithTextProps } from '../biz-components/ImageWithText/types.js'\n\nconst meta = {\n  title: 'Biz Components/ImageWithText',\n  component: ImageWithText,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component:\n          '\u591A\u529F\u80FD\u56FE\u6587\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u63012\u79CD\u6A21\u5F0F\uFF1A\\n\\n' +\n          '1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E\\n' +\n          '2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E\\n\\n' +\n          '\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ImageWithText>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: ImageWithTextProps['data'] = {\n  theme: 'light',\n  title: 'Precise Navigation',\n  image: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n    alt: 'Precise Navigation',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n    mimeType: 'image/png',\n  },\n  subtitle: 'iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.',\n  mobileImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n    alt: 'Precise Navigation Mobile',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n    mimeType: 'image/png',\n  },\n  padImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n    alt: 'Precise Navigation Pad',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n    mimeType: 'image/png',\n  },\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F',\n      },\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898',\n      },\n    },\n  },\n}\n\nexport const WithDescriptionText: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      desc: '20,000Pa',\n      descIcon:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F',\n      },\n    },\n  },\n}\n\nexport const WithDescriptionTextDark: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n      desc: '20,000Pa',\n      descIcon:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898',\n      },\n    },\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  args: {\n    data: {\n      theme: 'light',\n      title: 'Precise Navigation',\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n        alt: 'Precise Navigation',\n        thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n        mimeType: 'image/png',\n      },\n      padImage: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n        alt: 'Precise Navigation Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n        mimeType: 'image/png',\n      },\n      mobileImage: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n        alt: 'Precise Navigation Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n        mimeType: 'image/png',\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898',\n      },\n    },\n  },\n}\n\nexport const MinimalContent: Story = {\n  args: {\n    data: {\n      theme: 'light',\n      title: 'Simple Title',\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n        alt: 'Simple Title',\n        thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n        mimeType: 'image/png',\n      },\n      padImage: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n        alt: 'Simple Title Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n        mimeType: 'image/png',\n      },\n      mobileImage: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n        alt: 'Simple Title Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n        mimeType: 'image/png',\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E',\n      },\n    },\n  },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u5E03\u5C40\u4F4D\u7F6E\u53D8\u4F53 ====================\n\nexport const LayoutRight: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      layout: 'right',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0',\n      },\n    },\n  },\n}\n\nexport const LayoutTop: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      layout: 'top',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A',\n      },\n    },\n  },\n}\n\nexport const LayoutBottom: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      layout: 'bottom',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0',\n      },\n    },\n  },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301 ====================\n\nconst videoData: ImageWithTextProps['data'] = {\n  title: 'DuoSpiral\u2122 Detangle Brushes',\n  subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n  mediaType: 'video',\n  image: {\n    url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    alt: 'DuoSpiral\u2122 Detangle Brushes',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    mimeType: 'image/png',\n  },\n  video: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    mimeType: 'video/mp4',\n  },\n  mobileImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Mobile',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    mimeType: 'image/png',\n  },\n  mobileVideo: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    mimeType: 'video/mp4',\n  },\n}\n\nexport const WithVideo: Story = {\n  args: {\n    data: videoData,\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD',\n      },\n    },\n  },\n}\n\nexport const WithVideoRight: Story = {\n  args: {\n    data: {\n      ...videoData,\n      layout: 'right',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0',\n      },\n    },\n  },\n}\n\nexport const WithVideoTop: Story = {\n  args: {\n    data: {\n      ...videoData,\n      layout: 'top',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F',\n      },\n    },\n  },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 ====================\n\nconst featureData: ImageWithTextProps['data'] = {\n  title: 'AI.See\u2122 Obstacle Avoidance',\n  subtitle: 'Advanced AI and RGB visual recognition.',\n  image: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n    alt: 'AI.See\u2122 Obstacle Avoidance',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n    mimeType: 'image/png',\n  },\n  padImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n    alt: 'AI.See\u2122 Obstacle Avoidance Pad',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n    mimeType: 'image/png',\n  },\n  mobileImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n    alt: 'AI.See\u2122 Obstacle Avoidance Mobile',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n    mimeType: 'image/png',\n  },\n  items: [\n    {\n      icon: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n      text: 'LED',\n      desc: 'Equipped with LEDs for dark environments',\n    },\n    {\n      icon: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n      text: '200+',\n      desc: 'Identifies and avoids 200+ objects.',\n    },\n  ],\n}\n\nexport const WithItems: Story = {\n  args: {\n    data: featureData,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E',\n      },\n    },\n  },\n}\n\nexport const WithItemsImageRight: Story = {\n  args: {\n    data: {\n      ...featureData,\n      layout: 'right',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7',\n      },\n    },\n  },\n}\n\nexport const WithItemsDark: Story = {\n  args: {\n    data: {\n      ...featureData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898',\n      },\n    },\n  },\n}\n\nexport const WithItemsVideo: Story = {\n  args: {\n    data: {\n      title: 'AI.See\u2122 Obstacle Avoidance',\n      subtitle: 'Advanced AI and RGB visual recognition.',\n      mediaType: 'video',\n      video: videoData.video,\n      padVideo: videoData.video,\n      mobVideo: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n        alt: 'AI Feature Video',\n        thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n        mimeType: 'video/mp4',\n      },\n      poster: videoData.image,\n      padPoster: videoData.image,\n      mobPoster: videoData.mobileImage,\n      items: featureData.items,\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E',\n      },\n    },\n  },\n}\n\n// ==================== TabWithImage \u6A21\u5F0F ====================\n\nconst tabData: ImageWithTextProps['data'] = {\n  desc: 'Effortless customization at your fingertips.',\n  title: 'Smart App Control',\n  datalist: [\n    {\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n        alt: 'Customizable Cleaning Modes',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n        mimeType: 'image/png',\n      },\n      title: 'Customizable Cleaning Modes',\n      imgPad: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n        alt: 'Customizable Cleaning Modes Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n        mimeType: 'image/png',\n      },\n      imageMob: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n        alt: 'Customizable Cleaning Modes Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n        mimeType: 'image/png',\n      },\n    },\n    {\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n        alt: 'Multi-Floor Mapping',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n        mimeType: 'image/png',\n      },\n      title: 'Multi-Floor Mapping',\n      imgPad: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n        alt: 'Multi-Floor Mapping Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n        mimeType: 'image/png',\n      },\n      imageMob: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n        alt: 'Multi-Floor Mapping Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n        mimeType: 'image/png',\n      },\n    },\n  ],\n}\n\nexport const TabMode: Story = {\n  args: {\n    data: tabData,\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: 'TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C',\n      },\n    },\n  },\n}\n\nexport const TabModeThreeItems: Story = {\n  args: {\n    data: {\n      ...tabData,\n      datalist: [\n        ...tabData.datalist!,\n        {\n          image: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n            alt: 'Smart Scheduling',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n            mimeType: 'image/png',\n          },\n          title: 'Smart Scheduling',\n          imgPad: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n            alt: 'Smart Scheduling Pad',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n            mimeType: 'image/png',\n          },\n          imageMob: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n            alt: 'Smart Scheduling Mobile',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n            mimeType: 'image/png',\n          },\n        },\n      ],\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: 'TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879',\n      },\n    },\n  },\n}\n\nexport const TabModeWithVideo: Story = {\n  args: {\n    data: {\n      title: 'Smart App Control',\n      desc: 'Effortless customization at your fingertips.',\n      mediaType: 'video',\n      datalist: [\n        {\n          title: 'Customizable Cleaning Modes',\n          video: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n            alt: 'Customizable Cleaning Modes Video',\n            thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n            mimeType: 'video/mp4',\n          },\n          poster: {\n            url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n            alt: 'Customizable Cleaning Modes Poster',\n            thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n            mimeType: 'image/png',\n          },\n          image: tabData.datalist![0].image,\n          imgPad: tabData.datalist![0].imgPad,\n          imageMob: tabData.datalist![0].imageMob,\n        },\n        {\n          title: 'Multi-Floor Mapping',\n          video: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n            alt: 'Multi-Floor Mapping Video',\n            thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n            mimeType: 'video/mp4',\n          },\n          poster: {\n            url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n            alt: 'Multi-Floor Mapping Poster',\n            thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n            mimeType: 'image/png',\n          },\n          image: tabData.datalist![1].image,\n          imgPad: tabData.datalist![1].imgPad,\n          imageMob: tabData.datalist![1].imageMob,\n        },\n      ],\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: 'TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E',\n      },\n    },\n  },\n}\n\nexport const WithCustomStyles: Story = {\n  args: {\n    data: defaultData,\n    className: 'custom-image-with-text',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.image-with-text\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n- \\`.image-with-text--dark\\` - \u6DF1\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n- \\`.image-with-text--light\\` - \u6D45\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.image-with-text__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.image-with-text__title\\` - \u6807\u9898\n- \\`.image-with-text__subtitle\\` - \u526F\u6807\u9898\n\n**\u63CF\u8FF0\u533A\u57DF\uFF1A**\n- \\`.image-with-text__description\\` - \u63CF\u8FF0\u5BB9\u5668\n- \\`.image-with-text__description-icon\\` - \u63CF\u8FF0\u56FE\u6807\n- \\`.image-with-text__description-text\\` - \u63CF\u8FF0\u6587\u672C\n\n**\u56FE\u7247\u533A\u57DF\uFF1A**\n- \\`.image-with-text__image-wrapper\\` - \u56FE\u7247\u5916\u5C42\u5BB9\u5668\n- \\`.image-with-text__image\\` - \u56FE\u7247\u5143\u7D20\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5E03\u5C40\u95F4\u8DDD */\n.image-with-text {\n  gap: 48px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.image-with-text__title {\n  color: #2563eb;\n  font-weight: 800;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u60AC\u505C\u6548\u679C */\n.image-with-text__image:hover {\n  transform: scale(1.05);\n  transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u56FE\u6807 */\n.image-with-text__description-icon {\n  filter: brightness(1.2);\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n}\n"],
-  "mappings": "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CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,0NACT,CACF,CACF,CACF,EAIMK,EAAsC,CAC1C,KAAM,+CACN,MAAO,oBACP,SAAU,CACR,CACE,MAAO,CACL,IAAK,gIACL,IAAK,8BACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,8BACP,OAAQ,CACN,IAAK,gIACL,IAAK,kCACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,qCACL,aACE,gIACF,SAAU,WACZ,CACF,EACA,CACE,MAAO,CACL,IAAK,kIACL,IAAK,sBACL,aACE,kIACF,SAAU,WACZ,EACA,MAAO,sBACP,OAAQ,CACN,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,kIACL,IAAK,6BACL,aACE,kIACF,SAAU,WACZ,CACF,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,yLACT,CACF,CACF,CACF,EAEaE,EAA2B,CACtC,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,SAAU,CACR,GAAGA,EAAQ,SACX,CACE,MAAO,CACL,IAAK,gIACL,IAAK,mBACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,mBACP,OAAQ,CACN,IAAK,gIACL,IAAK,uBACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,CACF,CACF,CACF,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,kDACT,CACF,CACF,CACF,EAEaG,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAO,oBACP,KAAM,+CACN,UAAW,QACX,SAAU,CACR,CACE,MAAO,8BACP,MAAO,CACL,IAAK,4EACL,IAAK,oCACL,aAAc,8HACd,SAAU,WACZ,EACA,OAAQ,CACN,IAAK,8HACL,IAAK,qCACL,aAAc,8HACd,SAAU,WACZ,EACA,MAAOH,EAAQ,SAAU,CAAC,EAAE,MAC5B,OAAQA,EAAQ,SAAU,CAAC,EAAE,OAC7B,SAAUA,EAAQ,SAAU,CAAC,EAAE,QACjC,EACA,CACE,MAAO,sBACP,MAAO,CACL,IAAK,4EACL,IAAK,4BACL,aAAc,8HACd,SAAU,WACZ,EACA,OAAQ,CACN,IAAK,8HACL,IAAK,6BACL,aAAc,8HACd,SAAU,WACZ,EACA,MAAOA,EAAQ,SAAU,CAAC,EAAE,MAC5B,OAAQA,EAAQ,SAAU,CAAC,EAAE,OAC7B,SAAUA,EAAQ,SAAU,CAAC,EAAE,QACjC,CACF,CACF,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,oPACT,CACF,CACF,CACF,EAEaI,EAA0B,CACrC,KAAM,CACJ,KAAMvB,EACN,UAAW,wBACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA+CT,CACF,CACF,CACF",
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport ImageWithText from '../biz-components/ImageWithText/index.js'\nimport type { ImageWithTextProps } from '../biz-components/ImageWithText/types.js'\n\nconst meta = {\n  title: 'Biz Components/ImageWithText',\n  component: ImageWithText,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component:\n          '\u591A\u529F\u80FD\u56FE\u6587\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u63012\u79CD\u6A21\u5F0F\uFF1A\\n\\n' +\n          '1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E\\n' +\n          '2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E\\n\\n' +\n          '\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ImageWithText>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: ImageWithTextProps['data'] = {\n  theme: 'light',\n  title: 'Precise Navigation',\n  image: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n    alt: 'Precise Navigation',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n    mimeType: 'image/png',\n  },\n  subtitle: 'iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.',\n  mobileImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n    alt: 'Precise Navigation Mobile',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n    mimeType: 'image/png',\n  },\n  padImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n    alt: 'Precise Navigation Pad',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n    mimeType: 'image/png',\n  },\n  items: [\n    {\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n        alt: 'LED',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n        mimeType: 'image/svg+xml',\n      },\n      text: 'LED',\n      desc: 'Equipped with LEDs for dark environments',\n    },\n    {\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n        alt: '200+',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n        mimeType: 'image/svg+xml',\n      },\n      text: '200+',\n      desc: 'Identifies and avoids 200+ objects.',\n    },\n  ],\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F',\n      },\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898',\n      },\n    },\n  },\n}\n\nexport const WithDescriptionText: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      desc: '20,000Pa',\n      descIcon:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F',\n      },\n    },\n  },\n}\n\nexport const WithDescriptionTextDark: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n      desc: '20,000Pa',\n      descIcon:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898',\n      },\n    },\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  args: {\n    data: {\n      theme: 'light',\n      title: 'Precise Navigation',\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n        alt: 'Precise Navigation',\n        thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n        mimeType: 'image/png',\n      },\n      padImage: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n        alt: 'Precise Navigation Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n        mimeType: 'image/png',\n      },\n      mobileImage: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n        alt: 'Precise Navigation Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n        mimeType: 'image/png',\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898',\n      },\n    },\n  },\n}\n\nexport const MinimalContent: Story = {\n  args: {\n    data: {\n      theme: 'light',\n      title: 'Simple Title',\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n        alt: 'Simple Title',\n        thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n        mimeType: 'image/png',\n      },\n      padImage: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n        alt: 'Simple Title Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n        mimeType: 'image/png',\n      },\n      mobileImage: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n        alt: 'Simple Title Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n        mimeType: 'image/png',\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E',\n      },\n    },\n  },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u5E03\u5C40\u4F4D\u7F6E\u53D8\u4F53 ====================\n\nexport const LayoutRight: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      layout: 'right',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0',\n      },\n    },\n  },\n}\n\nexport const LayoutTop: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      layout: 'top',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A',\n      },\n    },\n  },\n}\n\nexport const LayoutBottom: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      layout: 'bottom',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0',\n      },\n    },\n  },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301 ====================\n\nconst videoData: ImageWithTextProps['data'] = {\n  title: 'DuoSpiral\u2122 Detangle Brushes',\n  subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n  mediaType: 'video',\n  image: {\n    url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    alt: 'DuoSpiral\u2122 Detangle Brushes',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    mimeType: 'image/png',\n  },\n  video: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    mimeType: 'video/mp4',\n  },\n  mobileImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Mobile',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    mimeType: 'image/png',\n  },\n  mobVideo: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    mimeType: 'video/mp4',\n  },\n}\n\nexport const WithVideo: Story = {\n  args: {\n    data: videoData,\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD',\n      },\n    },\n  },\n}\n\nexport const WithVideoRight: Story = {\n  args: {\n    data: {\n      ...videoData,\n      layout: 'right',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0',\n      },\n    },\n  },\n}\n\nexport const WithVideoTop: Story = {\n  args: {\n    data: {\n      ...videoData,\n      layout: 'top',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F',\n      },\n    },\n  },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 ====================\n\nconst featureData: ImageWithTextProps['data'] = {\n  title: 'AI.See\u2122 Obstacle Avoidance',\n  subtitle: 'Advanced AI and RGB visual recognition.',\n  image: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n    alt: 'AI.See\u2122 Obstacle Avoidance',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n    mimeType: 'image/png',\n  },\n  padImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n    alt: 'AI.See\u2122 Obstacle Avoidance Pad',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n    mimeType: 'image/png',\n  },\n  mobileImage: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n    alt: 'AI.See\u2122 Obstacle Avoidance Mobile',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n    mimeType: 'image/png',\n  },\n  items: [\n    {\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n        alt: 'LED',\n        thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n        mimeType: 'image/svg+xml',\n      },\n      text: 'LED',\n      desc: 'Equipped with LEDs for dark environments',\n    },\n    {\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n        alt: '200+',\n        thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n        mimeType: 'image/svg+xml',\n      },\n      text: '200+',\n      desc: 'Identifies and avoids 200+ objects.',\n    },\n  ],\n}\n\nexport const WithItems: Story = {\n  args: {\n    data: featureData,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E',\n      },\n    },\n  },\n}\n\nexport const WithItemsImageRight: Story = {\n  args: {\n    data: {\n      ...featureData,\n      layout: 'right',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7',\n      },\n    },\n  },\n}\n\nexport const WithItemsDark: Story = {\n  args: {\n    data: {\n      ...featureData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898',\n      },\n    },\n  },\n}\n\nexport const WithItemsVideo: Story = {\n  args: {\n    data: {\n      title: 'AI.See\u2122 Obstacle Avoidance',\n      subtitle: 'Advanced AI and RGB visual recognition.',\n      mediaType: 'video',\n      video: videoData.video,\n      padVideo: videoData.video,\n      mobVideo: videoData.mobVideo,\n      items: featureData.items,\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E',\n      },\n    },\n  },\n}\n\n// ==================== TabWithImage \u6A21\u5F0F ====================\n\nconst tabData: ImageWithTextProps['data'] = {\n  desc: 'Effortless customization at your fingertips.',\n  title: 'Smart App Control',\n  datalist: [\n    {\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n        alt: 'Customizable Cleaning Modes',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n        mimeType: 'image/png',\n      },\n      title: 'Customizable Cleaning Modes',\n      imgPad: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n        alt: 'Customizable Cleaning Modes Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n        mimeType: 'image/png',\n      },\n      imageMob: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n        alt: 'Customizable Cleaning Modes Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n        mimeType: 'image/png',\n      },\n    },\n    {\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n        alt: 'Multi-Floor Mapping',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n        mimeType: 'image/png',\n      },\n      title: 'Multi-Floor Mapping',\n      imgPad: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n        alt: 'Multi-Floor Mapping Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n        mimeType: 'image/png',\n      },\n      imageMob: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n        alt: 'Multi-Floor Mapping Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n        mimeType: 'image/png',\n      },\n    },\n  ],\n}\n\nexport const TabMode: Story = {\n  args: {\n    data: tabData,\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: 'TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C',\n      },\n    },\n  },\n}\n\nexport const TabModeThreeItems: Story = {\n  args: {\n    data: {\n      ...tabData,\n      datalist: [\n        ...tabData.datalist!,\n        {\n          image: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n            alt: 'Smart Scheduling',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n            mimeType: 'image/png',\n          },\n          title: 'Smart Scheduling',\n          imgPad: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n            alt: 'Smart Scheduling Pad',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n            mimeType: 'image/png',\n          },\n          imageMob: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n            alt: 'Smart Scheduling Mobile',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n            mimeType: 'image/png',\n          },\n        },\n      ],\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: 'TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879',\n      },\n    },\n  },\n}\n\nexport const TabModeWithVideo: Story = {\n  args: {\n    data: {\n      title: 'Smart App Control',\n      desc: 'Effortless customization at your fingertips.',\n      mediaType: 'video',\n      datalist: [\n        {\n          title: 'Customizable Cleaning Modes',\n          video: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n            alt: 'Customizable Cleaning Modes Video',\n            thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n            mimeType: 'video/mp4',\n          },\n          image: tabData.datalist![0].image,\n          imgPad: tabData.datalist![0].imgPad,\n          imageMob: tabData.datalist![0].imageMob,\n        },\n        {\n          title: 'Multi-Floor Mapping',\n          video: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n            alt: 'Multi-Floor Mapping Video',\n            thumbnailURL: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n            mimeType: 'video/mp4',\n          },\n          image: tabData.datalist![1].image,\n          imgPad: tabData.datalist![1].imgPad,\n          imageMob: tabData.datalist![1].imageMob,\n        },\n      ],\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story: 'TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E',\n      },\n    },\n  },\n}\n\nexport const WithCustomStyles: Story = {\n  args: {\n    data: defaultData,\n    className: 'custom-image-with-text',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.image-with-text\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n- \\`.image-with-text--dark\\` - \u6DF1\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n- \\`.image-with-text--light\\` - \u6D45\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.image-with-text__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.image-with-text__title\\` - \u6807\u9898\n- \\`.image-with-text__subtitle\\` - \u526F\u6807\u9898\n\n**\u63CF\u8FF0\u533A\u57DF\uFF1A**\n- \\`.image-with-text__description\\` - \u63CF\u8FF0\u5BB9\u5668\n- \\`.image-with-text__description-icon\\` - \u63CF\u8FF0\u56FE\u6807\n- \\`.image-with-text__description-text\\` - \u63CF\u8FF0\u6587\u672C\n\n**\u56FE\u7247\u533A\u57DF\uFF1A**\n- \\`.image-with-text__image-wrapper\\` - \u56FE\u7247\u5916\u5C42\u5BB9\u5668\n- \\`.image-with-text__image\\` - \u56FE\u7247\u5143\u7D20\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5E03\u5C40\u95F4\u8DDD */\n.image-with-text {\n  gap: 48px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.image-with-text__title {\n  color: #2563eb;\n  font-weight: 800;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u60AC\u505C\u6548\u679C */\n.image-with-text__image:hover {\n  transform: scale(1.05);\n  transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u56FE\u6807 */\n.image-with-text__description-icon {\n  filter: brightness(1.2);\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n}\n"],
+  "mappings": "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J,YAAa,CACX,MAAO,gFACT,CACF,CACF,CACF,EAEaI,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,kCACP,SAAU,0CACV,UAAW,QACX,MAAOR,EAAU,MACjB,SAAUA,EAAU,MACpB,SAAUA,EAAU,SACpB,MAAOI,EAAY,KACrB,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,0NACT,CACF,CACF,CACF,EAIMK,EAAsC,CAC1C,KAAM,+CACN,MAAO,oBACP,SAAU,CACR,CACE,MAAO,CACL,IAAK,gIACL,IAAK,8BACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,8BACP,OAAQ,CACN,IAAK,gIACL,IAAK,kCACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,qCACL,aACE,gIACF,SAAU,WACZ,CACF,EACA,CACE,MAAO,CACL,IAAK,kIACL,IAAK,sBACL,aACE,kIACF,SAAU,WACZ,EACA,MAAO,sBACP,OAAQ,CACN,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,kIACL,IAAK,6BACL,aACE,kIACF,SAAU,WACZ,CACF,CACF,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,yLACT,CACF,CACF,CACF,EAEaE,EAA2B,CACtC,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,SAAU,CACR,GAAGA,EAAQ,SACX,CACE,MAAO,CACL,IAAK,gIACL,IAAK,mBACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,mBACP,OAAQ,CACN,IAAK,gIACL,IAAK,uBACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,CACF,CACF,CACF,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,kDACT,CACF,CACF,CACF,EAEaG,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAO,oBACP,KAAM,+CACN,UAAW,QACX,SAAU,CACR,CACE,MAAO,8BACP,MAAO,CACL,IAAK,4EACL,IAAK,oCACL,aAAc,8HACd,SAAU,WACZ,EACA,MAAOH,EAAQ,SAAU,CAAC,EAAE,MAC5B,OAAQA,EAAQ,SAAU,CAAC,EAAE,OAC7B,SAAUA,EAAQ,SAAU,CAAC,EAAE,QACjC,EACA,CACE,MAAO,sBACP,MAAO,CACL,IAAK,4EACL,IAAK,4BACL,aAAc,8HACd,SAAU,WACZ,EACA,MAAOA,EAAQ,SAAU,CAAC,EAAE,MAC5B,OAAQA,EAAQ,SAAU,CAAC,EAAE,OAC7B,SAAUA,EAAQ,SAAU,CAAC,EAAE,QACjC,CACF,CACF,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,oPACT,CACF,CACF,CACF,EAEaI,EAA0B,CACrC,KAAM,CACJ,KAAMvB,EACN,UAAW,wBACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA+CT,CACF,CACF,CACF",
   "names": ["ImageWithText", "meta", "imageWithText_stories_default", "defaultData", "Default", "DarkTheme", "WithDescriptionText", "WithDescriptionTextDark", "WithoutSubtitle", "MinimalContent", "LayoutRight", "LayoutTop", "LayoutBottom", "videoData", "WithVideo", "WithVideoRight", "WithVideoTop", "featureData", "WithItems", "WithItemsImageRight", "WithItemsDark", "WithItemsVideo", "tabData", "TabMode", "TabModeThreeItems", "TabModeWithVideo", "WithCustomStyles"]
 }

package/dist/esm/types/props.d.ts CHANGED Viewed

@@ -32,7 +32,7 @@ export type Media = {
     baseUrl?: string;
     url: string;
     thumbnailURL: string;
-    mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
+    mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/svg+xml';
     filename?: string;
     width?: number;
     height?: number;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.0.26-alpha.1762500570709",
+  "version": "1.0.26-alpha.1762502118179",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/tailwind.config.js CHANGED Viewed

@@ -188,8 +188,10 @@ module.exports = {
     },
   },
   plugins: [
-    function ({ addUtilities, theme }) {
-      const maskUtilities = {
+    function (options) {
+      var addUtilities = options.addUtilities
+      var theme = options.theme
+      var maskUtilities = {
         '.mask-fade-vertical': {
           '-webkit-mask-image': theme('maskImage.fade-vertical'),
           'mask-image': theme('maskImage.fade-vertical'),