@anker-in/headless-ui 1.1.17-alpha.1766054863247 → 1.1.18

package/dist/esm/helpers/utils.js

@@ -1,2 +1,2 @@
-import{clsx as r}from"clsx";import{extendTailwindMerge as s}from"tailwind-merge";const i=s({extend:{theme:{borderRadius:["btn"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function c(...t){return i(r(t))}function p(){}function g(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const x=t=>t?.replace(/\s+/g,"-"),d=(t,n)=>{try{const e=t?.search(new RegExp(n,"i"));if(n&&e!==-1){const o=t.slice(e,e+n.length);return t.replace(o,`<span class='text-brand-0 font-bold'>${o}</span>`)}else return t}catch(e){return console.log("e",e),t}},u=(t="us")=>({us:"1126311",uk:"638361",ca:"638351"})[t]||"";export{g as atobID,c as cn,d as highlightSearchWord,p as noop,x as spaceToHyphen,u as yotpoInstanceId};
+import{clsx as o}from"clsx";import{extendTailwindMerge as i}from"tailwind-merge";const s=i({extend:{theme:{borderRadius:["btn"]},classGroups:{"font-size":["text-heading-1","text-heading-2","text-heading-3","text-heading-4","text-heading-5","text-text-3","text-text-2","text-text-1"],"text-color":["text-info-primary","text-info-secondary","text-info-tertiary","text-info-quaternary","text-info-white"],leading:["leading-tight","leading-normal","leading-loose"]}}});function g(...t){return s(o(t))}function p(){}function c(t){return t&&typeof t=="string"&&t.includes("/")?t.split("/").pop()?.split("?")?.shift():t}const x=t=>t?.replace(/\s+/g,"-"),d=(t,n)=>{try{const e=t?.search(new RegExp(n,"i"));if(n&&e!==-1){const r=t.slice(e,e+n.length);return t.replace(r,`<span class='text-brand-0 font-bold'>${r}</span>`)}else return t}catch(e){return console.log("e",e),t}};export{c as atobID,g as cn,d as highlightSearchWord,p as noop,x as spaceToHyphen};
 //# sourceMappingURL=utils.js.map

package/dist/esm/helpers/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/utils.ts"],
-  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      borderRadius: ['btn'],\n    },\n    classGroups: {\n      'font-size': [\n        'text-heading-1',\n        'text-heading-2',\n        'text-heading-3',\n        'text-heading-4',\n        'text-heading-5',\n        'text-text-3',\n        'text-text-2',\n        'text-text-1',\n      ],\n      'text-color': [\n        'text-info-primary',\n        'text-info-secondary',\n        'text-info-tertiary',\n        'text-info-quaternary',\n        'text-info-white',\n      ],\n      leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\n\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\nexport const highlightSearchWord = (text: string, searchText: string) => {\n  try {\n    const wordIndex = text?.search(new RegExp(searchText, 'i'))\n    if (searchText && wordIndex !== -1) {\n      const word = text.slice(wordIndex, wordIndex + searchText.length)\n      return text.replace(word, `<span class='text-brand-0 font-bold'>${word}</span>`)\n    } else {\n      return text\n    }\n  } catch (e) {\n    console.log('e', e)\n    return text\n  }\n}\n\nexport const yotpoInstanceId = (locale = 'us') =>\n  ({\n    us: '1126311',\n    uk: '638361',\n    ca: '638351',\n  })[locale] || ''\n"],
-  "mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,uBAAAC,MAA2B,iBAEpC,MAAMC,EAAUD,EAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASE,KAAMC,EAAsB,CAC1C,OAAOF,EAAQF,EAAKI,CAAM,CAAC,CAC7B,CAEO,SAASC,GAAY,CAAC,CAEtB,SAASC,EAAOC,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CAEO,MAAMC,EAAiBC,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAEzDC,EAAsB,CAACC,EAAcC,IAAuB,CACvE,GAAI,CACF,MAAMC,EAAYF,GAAM,OAAO,IAAI,OAAOC,EAAY,GAAG,CAAC,EAC1D,GAAIA,GAAcC,IAAc,GAAI,CAClC,MAAMC,EAAOH,EAAK,MAAME,EAAWA,EAAYD,EAAW,MAAM,EAChE,OAAOD,EAAK,QAAQG,EAAM,wCAAwCA,CAAI,SAAS,CACjF,KACE,QAAOH,CAEX,OAAS,EAAG,CACV,eAAQ,IAAI,IAAK,CAAC,EACXA,CACT,CACF,EAEaI,EAAkB,CAACC,EAAS,QACtC,CACC,GAAI,UACJ,GAAI,SACJ,GAAI,QACN,GAAGA,CAAM,GAAK",
-  "names": ["clsx", "extendTailwindMerge", "twMerge", "cn", "inputs", "noop", "atobID", "id", "spaceToHyphen", "str", "highlightSearchWord", "text", "searchText", "wordIndex", "word", "yotpoInstanceId", "locale"]
+  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    theme: {\n      borderRadius: ['btn'],\n    },\n    classGroups: {\n      'font-size': [\n        'text-heading-1',\n        'text-heading-2',\n        'text-heading-3',\n        'text-heading-4',\n        'text-heading-5',\n        'text-text-3',\n        'text-text-2',\n        'text-text-1',\n      ],\n      'text-color': [\n        'text-info-primary',\n        'text-info-secondary',\n        'text-info-tertiary',\n        'text-info-quaternary',\n        'text-info-white',\n      ],\n      leading: ['leading-tight', 'leading-normal', 'leading-loose'],\n    },\n  },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n\nexport function atobID(id: string) {\n  if (id && typeof id === 'string' && id.includes('/')) {\n    return id.split('/').pop()?.split('?')?.shift()\n  } else {\n    return id\n  }\n}\nexport const spaceToHyphen = (str: string) => str?.replace(/\\s+/g, '-')\n\nexport const highlightSearchWord = (text: string, searchText: string) => {\n  try {\n    const wordIndex = text?.search(new RegExp(searchText, 'i'))\n    if (searchText && wordIndex !== -1) {\n      const word = text.slice(wordIndex, wordIndex + searchText.length)\n      return text.replace(word, `<span class='text-brand-0 font-bold'>${word}</span>`)\n    } else {\n      return text\n    }\n  } catch (e) {\n    console.log('e', e)\n    return text\n  }\n}\n"],
+  "mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,uBAAAC,MAA2B,iBAEpC,MAAMC,EAAUD,EAAoB,CAClC,OAAQ,CACN,MAAO,CACL,aAAc,CAAC,KAAK,CACtB,EACA,YAAa,CACX,YAAa,CACX,iBACA,iBACA,iBACA,iBACA,iBACA,cACA,cACA,aACF,EACA,aAAc,CACZ,oBACA,sBACA,qBACA,uBACA,iBACF,EACA,QAAS,CAAC,gBAAiB,iBAAkB,eAAe,CAC9D,CACF,CACF,CAAC,EAEM,SAASE,KAAMC,EAAsB,CAC1C,OAAOF,EAAQF,EAAKI,CAAM,CAAC,CAC7B,CAEO,SAASC,GAAY,CAAC,CAEtB,SAASC,EAAOC,EAAY,CACjC,OAAIA,GAAM,OAAOA,GAAO,UAAYA,EAAG,SAAS,GAAG,EAC1CA,EAAG,MAAM,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,MAAM,EAEvCA,CAEX,CACO,MAAMC,EAAiBC,GAAgBA,GAAK,QAAQ,OAAQ,GAAG,EAEzDC,EAAsB,CAACC,EAAcC,IAAuB,CACvE,GAAI,CACF,MAAMC,EAAYF,GAAM,OAAO,IAAI,OAAOC,EAAY,GAAG,CAAC,EAC1D,GAAIA,GAAcC,IAAc,GAAI,CAClC,MAAMC,EAAOH,EAAK,MAAME,EAAWA,EAAYD,EAAW,MAAM,EAChE,OAAOD,EAAK,QAAQG,EAAM,wCAAwCA,CAAI,SAAS,CACjF,KACE,QAAOH,CAEX,OAAS,EAAG,CACV,eAAQ,IAAI,IAAK,CAAC,EACXA,CACT,CACF",
+  "names": ["clsx", "extendTailwindMerge", "twMerge", "cn", "inputs", "noop", "atobID", "id", "spaceToHyphen", "str", "highlightSearchWord", "text", "searchText", "wordIndex", "word"]
 }

package/dist/esm/hooks/useRollout.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function useRollout<T extends Element>(options: any): (boolean | import("react").RefObject<T>)[];
+import { type MutableRefObject } from 'react';
+export declare function useRollout<T extends HTMLElement = HTMLElement>(options: any): [MutableRefObject<T | null>, boolean];

package/dist/esm/hooks/useRollout.js

@@ -1,2 +1,2 @@
-import{useState as i,useEffect as u,useRef as f}from"react";function d(t){const r=f(null),[e,o]=i(!1);return u(()=>{if(e)return;const s=r.current;if(!s||typeof IntersectionObserver>"u")return;const n=new IntersectionObserver(([c])=>{c.isIntersecting&&(o(!0),n.disconnect())},t);return n.observe(s),()=>n.disconnect()},[e,t]),[r,e]}export{d as useRollout};
+import{useEffect as c,useRef as f,useState as i}from"react";function b(n){const r=f(null),[e,o]=i(!1);return c(()=>{if(e)return;const s=r.current;if(!s||typeof IntersectionObserver>"u")return;const t=new IntersectionObserver(([u])=>{u.isIntersecting&&(o(!0),t.disconnect())},n);return t.observe(s),()=>t.disconnect()},[e,n]),[r,e]}export{b as useRollout};
 //# sourceMappingURL=useRollout.js.map

package/dist/esm/hooks/useRollout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useRollout.ts"],
-  "sourcesContent": ["import { useState, useEffect, useRef } from 'react'\n\nexport function useRollout<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n"],
-  "mappings": "AAAA,OAAS,YAAAA,EAAU,aAAAC,EAAW,UAAAC,MAAc,QAErC,SAASC,EAA8BC,EAAc,CAC1D,MAAMC,EAAMH,EAAU,IAAI,EACpB,CAACI,EAAQC,CAAS,EAAIP,EAAS,EAAK,EAC1C,OAAAC,EAAU,IAAM,CACd,GAAIK,EAAQ,OACZ,MAAME,EAAKH,EAAI,QACf,GAAI,CAACG,GAAM,OAAO,qBAAyB,IAAa,OACxD,MAAMC,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACjDA,EAAM,iBACRH,EAAU,EAAI,EACdE,EAAS,WAAW,EAExB,EAAGL,CAAO,EAEV,OAAAK,EAAS,QAAQD,CAAE,EACZ,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACH,EAAQF,CAAO,CAAC,EAEb,CAACC,EAAKC,CAAM,CACrB",
-  "names": ["useState", "useEffect", "useRef", "useRollout", "options", "ref", "inView", "setInView", "el", "observer", "entry"]
+  "sourcesContent": ["import { useEffect, useRef, useState, type MutableRefObject } from 'react'\n\nexport function useRollout<T extends HTMLElement = HTMLElement>(options: any): [MutableRefObject<T | null>, boolean] {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n  return [ref, inView]\n}\n"],
+  "mappings": "AAAA,OAAS,aAAAA,EAAW,UAAAC,EAAQ,YAAAC,MAAuC,QAE5D,SAASC,EAAgDC,EAAqD,CACnH,MAAMC,EAAMJ,EAAU,IAAI,EACpB,CAACK,EAAQC,CAAS,EAAIL,EAAS,EAAK,EAC1C,OAAAF,EAAU,IAAM,CACd,GAAIM,EAAQ,OACZ,MAAME,EAAKH,EAAI,QACf,GAAI,CAACG,GAAM,OAAO,qBAAyB,IAAa,OACxD,MAAMC,EAAW,IAAI,qBAAqB,CAAC,CAACC,CAAK,IAAM,CACjDA,EAAM,iBACRH,EAAU,EAAI,EACdE,EAAS,WAAW,EAExB,EAAGL,CAAO,EACV,OAAAK,EAAS,QAAQD,CAAE,EACZ,IAAMC,EAAS,WAAW,CACnC,EAAG,CAACH,EAAQF,CAAO,CAAC,EACb,CAACC,EAAKC,CAAM,CACrB",
+  "names": ["useEffect", "useRef", "useState", "useRollout", "options", "ref", "inView", "setInView", "el", "observer", "entry"]
 }

package/dist/esm/shared/Styles.d.ts

@@ -8,8 +8,8 @@ export interface ContainerProps {
     };
 }
 export interface StylesProps {
-    /** 自定义样式字符串或对象 */
-    style?: string | React.CSSProperties;
+    /** 自定义样式字符串 */
+    style?: string;
     /** 唯一标识符 */
     uid?: string;
     /** 是否禁用 */
@@ -34,6 +34,6 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
  * @param defaultLayoutProps - 默认样式属性
  */
 export declare function withLayout<P extends object>(WrappedComponent: React.ComponentType<P>, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<P, keyof StylesProps> & Partial<StylesProps & ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 }> & React.RefAttributes<any>>;

package/dist/esm/shared/Styles.js

@@ -1,2 +1,2 @@
-import{Fragment as I,jsx as o,jsxs as B}from"react/jsx-runtime";import f,{useMemo as d}from"react";import{simpleHash as C}from"./simpleHash.js";import $ from"./getKeyPropsString.js";import{Grid as R,GridItem as N}from"../components/grid.js";import{Container as k}from"../components/container.js";import w from"./ErrorBoundary.js";const h={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},x={12:"tablet:col-start-1 tablet:col-end-13",10:"tablet:col-start-2 tablet:col-end-12",8:"tablet:col-start-3 tablet:col-end-11",6:"tablet:col-start-4 tablet:col-end-10",4:"tablet:col-start-5 tablet:col-end-9"},m=t=>{const n=$(t);return`style_${C(n)}`},T=t=>{const{style:n,uid:s,disabled:r}=t;return{style:n,uid:s,disabled:r}},G=({style:t,uid:n=m({}),disabled:s=!1})=>!t||s?null:o("style",{suppressHydrationWarning:!0,"data-style-id":n,children:`.block-${n} { ${t} }`}),K=(t,n)=>{const s=d(()=>t?.uid||m({...t,data:n}),[n,t]),r=d(()=>o(G,{...t,uid:s}),[t,s]);return{className:`block-${s} `,StyleComponent:r,uid:s}},j=t=>{const{desktopSpan:n,mobileSpan:s}=t?.container||{},r=s?h[s]:"",a=n?x[n]:"";return`${r} ${a}`.trim()};function D(t,n){const s=f.forwardRef((r,a)=>{const l=T(r),y=e=>e?typeof e=="string"?e:Object.entries(e).map(([g,P])=>`${g.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${P}`).join("; ")+";":"",c=[n?.style,l?.style].map(y).filter(e=>!!e).map(e=>e.trim().endsWith(";")?e:`${e};`).join(" "),u={...n,...l,...c&&{style:c}},{className:i,StyleComponent:p}=K(u,r?.data),S=e=>o(k,{className:`${i} ${e?.className}`,children:o(R,{className:"container_grid",children:o(N,{className:j(e),children:o(t,{...e,ref:a})})})}),b=e=>o(t,{...e,className:`${i} ${e?.className}`,ref:a});return o(I,{children:B(w,{children:[p,Reflect.ownKeys(r?.container||{})?.length>0?S(r):b(r)]})})});return s.displayName=t.displayName||t.name||"Component",s}export{T as getStylesProps,K as useStyles,D as withLayout};
+import{Fragment as w,jsx as a,jsxs as h}from"react/jsx-runtime";import P,{useMemo as l}from"react";import{simpleHash as S}from"./simpleHash.js";import g from"./getKeyPropsString.js";import{Grid as f,GridItem as C}from"../components/grid.js";import{Container as $}from"../components/container.js";const c={12:"col-start-1 col-end-13",10:"col-start-2 col-end-12",8:"col-start-3 col-end-11",6:"col-start-4 col-end-10",4:"col-start-5 col-end-9"},y=t=>{const n=g(t);return`style_${S(n)}`},b=t=>{const{style:n,uid:e,disabled:s}=t;return{style:n,uid:e,disabled:s}},N=({style:t,uid:n=y({}),disabled:e=!1})=>!t||e?null:a("style",{suppressHydrationWarning:!0,"data-style-id":n,children:`.block-${n} { ${t} }`}),R=(t,n)=>{const e=l(()=>t?.uid||y({...t,data:n}),[n,t]),s=l(()=>a(N,{...t,uid:e}),[t,e]);return{className:`block-${e} `,StyleComponent:s,uid:e}},k=t=>{const{desktopSpan:n,mobileSpan:e}=t?.container||{};return`${e?`${c[e]}`:""} ${n?`${c[n].split(" ").map(s=>`tablet:${s}`).join(" ")}`:""}`};function K(t,n){const e=P.forwardRef((s,o)=>{const m={...n,...b(s)},{className:i,StyleComponent:d}=R(m,s?.data),u=r=>a($,{className:`${i} ${r?.className}`,children:a(f,{className:"container_grid",children:a(C,{className:k(r),children:a(t,{...r,ref:o})})})}),p=r=>a(t,{...r,className:`${i} ${r?.className}`,ref:o});return h(w,{children:[d,Reflect.ownKeys(s?.container||{})?.length>0?u(s):p(s)]})});return e.displayName=t.displayName||t.name||"Component",e}export{b as getStylesProps,R as useStyles,K as withLayout};
 //# sourceMappingURL=Styles.js.map

package/dist/esm/shared/Styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/shared/Styles.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\nimport ErrorBoundary from './ErrorBoundary.js'\n\nconst colContentClasses: Record<number, string> = {\n  12: 'col-start-1 col-end-13',\n  10: 'col-start-2 col-end-12',\n  8: 'col-start-3 col-end-11',\n  6: 'col-start-4 col-end-10',\n  4: 'col-start-5 col-end-9',\n} as const\n\n// \u9884\u5B9A\u4E49\u5E26 tablet \u524D\u7F00\u7684\u7C7B\u540D\uFF0C\u786E\u4FDD Tailwind \u53EF\u4EE5\u8BC6\u522B\nconst colContentClassesTablet: Record<number, string> = {\n  12: 'tablet:col-start-1 tablet:col-end-13',\n  10: 'tablet:col-start-2 tablet:col-end-12',\n  8: 'tablet:col-start-3 tablet:col-end-11',\n  6: 'tablet:col-start-4 tablet:col-end-10',\n  4: 'tablet:col-start-5 tablet:col-end-9',\n} as const\n\nexport interface ContainerProps {\n  container?: {\n    /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    desktopSpan: number\n    /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    mobileSpan: number\n  }\n}\n\nexport interface StylesProps {\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32\u6216\u5BF9\u8C61 */\n  style?: string | React.CSSProperties\n  /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n  uid?: string\n  /** \u662F\u5426\u7981\u7528 */\n  disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n  const keyString = getKeyPropsString(props)\n  return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n  const { style, uid, disabled } = props\n  return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n  if (!style || disabled) {\n    return null\n  }\n\n  return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n  const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n  const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n  return {\n    className: `block-${uid} `,\n    StyleComponent,\n    uid,\n  } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n  const { desktopSpan, mobileSpan } = props?.container || {}\n  const mobileClasses = mobileSpan ? colContentClasses[mobileSpan] : ''\n  const desktopClasses = desktopSpan ? colContentClassesTablet[desktopSpan] : ''\n  return `${mobileClasses} ${desktopClasses}`.trim()\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n  const withLayout = React.forwardRef<\n    any,\n    Omit<P, keyof StylesProps> &\n      Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n  >((props, ref) => {\n    const propsStyleProps = getStylesProps(props)\n\n    // \u5C06 style \u5BF9\u8C61\u8F6C\u6362\u4E3A\u5B57\u7B26\u4E32\n    const styleToString = (style: string | React.CSSProperties | undefined): string => {\n      if (!style) return ''\n      if (typeof style === 'string') return style\n      return (\n        Object.entries(style)\n          .map(([key, value]) => {\n            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()\n            return `${cssKey}: ${value}`\n          })\n          .join('; ') + ';'\n      )\n    }\n\n    // \u5408\u5E76 style \u5B57\u6BB5\uFF0C\u907F\u514D\u8986\u76D6\uFF0C\u786E\u4FDD\u6BCF\u4E2A\u6837\u5F0F\u90FD\u4EE5\u5206\u53F7\u7ED3\u5C3E\n    const mergedStyle = [defaultLayoutProps?.style, propsStyleProps?.style]\n      .map(styleToString)\n      .filter((style): style is string => Boolean(style))\n      .map(style => (style.trim().endsWith(';') ? style : `${style};`))\n      .join(' ')\n\n    const finalStyleProps = {\n      ...defaultLayoutProps,\n      ...propsStyleProps,\n      ...(mergedStyle && { style: mergedStyle }),\n    }\n\n    const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n    const WithContainerWrapper = (props: any) => {\n      return (\n        <Container className={`${className} ${(props as any)?.className}`}>\n          <Grid className=\"container_grid\">\n            <GridItem className={getContainerClassName(props)}>\n              <WrappedComponent {...(props as unknown as P)} ref={ref} />\n            </GridItem>\n          </Grid>\n        </Container>\n      )\n    }\n\n    const WithoutContainerWrapper = (props: any) => {\n      return (\n        <WrappedComponent\n          {...(props as unknown as P)}\n          className={`${className} ${(props as any)?.className}`}\n          ref={ref}\n        />\n      )\n    }\n\n    return (\n      <>\n        <ErrorBoundary>\n          {StyleComponent}\n          {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n            ? WithContainerWrapper(props)\n            : WithoutContainerWrapper(props)}\n        </ErrorBoundary>\n      </>\n    )\n  })\n\n  // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n  withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n  return withLayout\n}\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "propsStyleProps", "styleToString", "key", "value", "mergedStyle", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
+  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { simpleHash } from './simpleHash.js'\nimport getKeyPropsString from './getKeyPropsString.js'\nimport { Grid, GridItem } from '../components/grid.js'\nimport { Container } from '../components/container.js'\n\nconst colContentClasses: Record<number, string> = {\n  12: 'col-start-1 col-end-13',\n  10: 'col-start-2 col-end-12',\n  8: 'col-start-3 col-end-11',\n  6: 'col-start-4 col-end-10',\n  4: 'col-start-5 col-end-9',\n} as const\n\nexport interface ContainerProps {\n  container?: {\n    /** \u684C\u9762\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    desktopSpan: number\n    /** \u79FB\u52A8\u7AEF\u5217\u5185\u5BB9\u5BBD\u5EA6 */\n    mobileSpan: number\n  }\n}\n\nexport interface StylesProps {\n  /** \u81EA\u5B9A\u4E49\u6837\u5F0F\u5B57\u7B26\u4E32 */\n  style?: string\n  /** \u552F\u4E00\u6807\u8BC6\u7B26 */\n  uid?: string\n  /** \u662F\u5426\u7981\u7528 */\n  disabled?: boolean\n}\n\n/**\n * \u6839\u636E props \u751F\u6210\u786E\u5B9A\u6027 uid\n */\nconst generateUID = (props: Record<string, any>) => {\n  const keyString = getKeyPropsString(props)\n  return `style_${simpleHash(keyString)}`\n}\n\n/**\n * \u4ECE\u7EC4\u4EF6 props \u4E2D\u63D0\u53D6\u6837\u5F0F\u76F8\u5173\u5C5E\u6027\n */\nexport const getStylesProps = <T extends Record<string, unknown>>(props: T & StylesProps): StylesProps => {\n  const { style, uid, disabled } = props\n  return { style, uid, disabled }\n}\n\n/**\n * \u6837\u5F0F\u6CE8\u5165\u7EC4\u4EF6\n */\nconst Styles: React.FC<StylesProps> = ({ style, uid = generateUID({}), disabled = false }) => {\n  if (!style || disabled) {\n    return null\n  }\n\n  return <style suppressHydrationWarning data-style-id={uid}>{`.block-${uid} { ${style} }`}</style>\n}\n\n/**\n * \u6837\u5F0F Hook\uFF0C\u8FD4\u56DE\u6837\u5F0F\u7C7B\u540D\u548C\u6837\u5F0F\u7EC4\u4EF6\n * @param styleProps - \u6837\u5F0F\u5C5E\u6027\n */\nexport const useStyles = (styleProps: Partial<StylesProps>, data?: Record<string, any>) => {\n  const uid = useMemo(() => styleProps?.uid || generateUID({ ...styleProps, data }), [data, styleProps])\n\n  const StyleComponent = useMemo(() => <Styles {...styleProps} uid={uid} />, [styleProps, uid])\n\n  return {\n    className: `block-${uid} `,\n    StyleComponent,\n    uid,\n  } as const\n}\n\nconst getContainerClassName = (props?: Partial<StylesProps & ContainerProps>) => {\n  const { desktopSpan, mobileSpan } = props?.container || {}\n  return `${mobileSpan ? `${colContentClasses[mobileSpan]}` : ''} ${\n    desktopSpan\n      ? `${colContentClasses[desktopSpan]\n          .split(' ')\n          .map(item => `tablet:${item}`)\n          .join(' ')}`\n      : ''\n  }`\n}\n\n/**\n * \u9AD8\u9636\u7EC4\u4EF6\uFF0C \u7528\u4E8E\u7ED9\u7EC4\u4EF6\u7528style \u6807\u7B7E\u7684\u5F62\u5F0F\u8FFD\u52A0\u6837\u5F0F\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n  const withLayout = React.forwardRef<\n    any,\n    Omit<P, keyof StylesProps> &\n      Partial<StylesProps & ContainerProps> & { className?: string; data?: Record<string, any> }\n  >((props, ref) => {\n    const finalStyleProps = {\n      ...defaultLayoutProps,\n      ...getStylesProps(props),\n    }\n\n    const { className, StyleComponent } = useStyles(finalStyleProps, (props as any)?.data)\n\n    const WithContainerWrapper = (props: any) => {\n      return (\n        <Container className={`${className} ${(props as any)?.className}`}>\n          <Grid className=\"container_grid\">\n            <GridItem className={getContainerClassName(props)}>\n              <WrappedComponent {...(props as unknown as P)} ref={ref} />\n            </GridItem>\n          </Grid>\n        </Container>\n      )\n    }\n\n    const WithoutContainerWrapper = (props: any) => {\n      return (\n        <WrappedComponent\n          {...(props as unknown as P)}\n          className={`${className} ${(props as any)?.className}`}\n          ref={ref}\n        />\n      )\n    }\n\n    return (\n      <>\n        {StyleComponent}\n        {Reflect.ownKeys((props as any)?.container || {})?.length > 0\n          ? WithContainerWrapper(props)\n          : WithoutContainerWrapper(props)}\n      </>\n    )\n  })\n\n  // \u76F4\u63A5\u4F7F\u7528\u539F\u59CB\u7EC4\u4EF6\u7684\u540D\u79F0\n  withLayout.displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'\n  return withLayout\n}\n"],
+  "mappings": "AAwDS,OA2EH,YAAAA,EA3EG,OAAAC,EA2EH,QAAAC,MA3EG,oBAxDT,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,kBAC3B,OAAOC,MAAuB,yBAC9B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,wBAC/B,OAAS,aAAAC,MAAiB,6BAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,EAAYP,EAAkBM,CAAK,EACzC,MAAO,SAASP,EAAWQ,CAAS,CAAC,EACvC,EAKaC,EAAqDF,GAAwC,CACxG,KAAM,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,EAAIL,EACjC,MAAO,CAAE,MAAAG,EAAO,IAAAC,EAAK,SAAAC,CAAS,CAChC,EAKMC,EAAgC,CAAC,CAAE,MAAAH,EAAO,IAAAC,EAAML,EAAY,CAAC,CAAC,EAAG,SAAAM,EAAW,EAAM,IAClF,CAACF,GAASE,EACL,KAGFhB,EAAC,SAAM,yBAAwB,GAAC,gBAAee,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9EI,EAAY,CAACC,EAAkCC,IAA+B,CACzF,MAAML,EAAMZ,EAAQ,IAAMgB,GAAY,KAAOT,EAAY,CAAE,GAAGS,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,EAAiBlB,EAAQ,IAAMH,EAACiB,EAAA,CAAQ,GAAGE,EAAY,IAAKJ,EAAK,EAAI,CAACI,EAAYJ,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAM,EACA,IAAAN,CACF,CACF,EAEMO,EAAyBX,GAAkD,CAC/E,KAAM,CAAE,YAAAY,EAAa,WAAAC,CAAW,EAAIb,GAAO,WAAa,CAAC,EACzD,MAAO,GAAGa,EAAa,GAAGf,EAAkBe,CAAU,CAAC,GAAK,EAAE,IAC5DD,EACI,GAAGd,EAAkBc,CAAW,EAC7B,MAAM,GAAG,EACT,IAAIE,GAAQ,UAAUA,CAAI,EAAE,EAC5B,KAAK,GAAG,CAAC,GACZ,EACN,EACF,EAOO,SAASC,EACdC,EACAC,EACA,CACA,MAAMF,EAAaxB,EAAM,WAIvB,CAACS,EAAOkB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGF,EACH,GAAGf,EAAeF,CAAK,CACzB,EAEM,CAAE,UAAAoB,EAAW,eAAAV,CAAe,EAAIH,EAAUY,EAAkBnB,GAAe,IAAI,EAE/EqB,EAAwBrB,GAE1BX,EAACQ,EAAA,CAAU,UAAW,GAAGuB,CAAS,IAAKpB,GAAe,SAAS,GAC7D,SAAAX,EAACM,EAAA,CAAK,UAAU,iBACd,SAAAN,EAACO,EAAA,CAAS,UAAWe,EAAsBX,CAAK,EAC9C,SAAAX,EAAC2B,EAAA,CAAkB,GAAIhB,EAAwB,IAAKkB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BtB,GAE7BX,EAAC2B,EAAA,CACE,GAAIhB,EACL,UAAW,GAAGoB,CAAS,IAAKpB,GAAe,SAAS,GACpD,IAAKkB,EACP,EAIJ,OACE5B,EAAAF,EAAA,CACG,UAAAsB,EACA,QAAQ,QAASV,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDqB,EAAqBrB,CAAK,EAC1BsB,EAAwBtB,CAAK,GACnC,CAEJ,CAAC,EAGD,OAAAe,EAAW,YAAcC,EAAiB,aAAeA,EAAiB,MAAQ,YAC3ED,CACT",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useMemo", "simpleHash", "getKeyPropsString", "Grid", "GridItem", "Container", "colContentClasses", "generateUID", "props", "keyString", "getStylesProps", "style", "uid", "disabled", "Styles", "useStyles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "item", "withLayout", "WrappedComponent", "defaultLayoutProps", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
 }

package/dist/esm/stories/HeroBanner.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import HeroBanner from '../biz-components/HeroBanner/HeroBanner.js';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<Omit<import("../biz-components/HeroBanner/types.js").HeroBannerProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }, "ref"> & React.RefAttributes<any>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof HeroBanner>;
+export declare const LightTheme: Story;
+export declare const DarkTheme: Story;
+export declare const MultiBanner: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutSecondaryButton: Story;
+export declare const WithVideoModal: Story;
+export declare const WithYoutubeVideo: Story;
+export declare const ScrollableBackgroundVideo: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/stories/HeroBanner.stories.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import"react";import i from"../biz-components/HeroBanner/HeroBanner.js";const m={title:"Biz-Components/HeroBanner",component:i,parameters:{layout:"fullscreen",docs:{description:{component:`
+import{jsx as t,jsxs as a}from"react/jsx-runtime";import"react";import i from"../biz-components/HeroBanner/HeroBanner.js";const r={title:"Biz-Components/HeroBanner",component:i,parameters:{layout:"fullscreen",docs:{description:{component:`
 HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002
 
 ### \u7279\u70B9
@@ -7,5 +7,5 @@ HeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5
 - \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE
 - \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5
 - \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868
-        `}}},tags:["autodocs"]};var p=m;const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",c="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",o="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",r={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}],endDate:"2025-11-15T03:32:00.000Z",endDate_tz:"America/Sao_Paulo",dateFormat:'{"day":"Day","hour":"Hours","minute":"Mins","second":"Secs"}'}}},n={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:o,alt:"dark background",thumbnailURL:o,mimeType:"image/jpeg"},mobileImage:{url:o,alt:"dark background",thumbnailURL:o,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},b=()=>a("div",{className:"flex flex-col",children:[t(i,{data:{...r.args.data,size:"sm"}}),t(i,{data:{...n.args.data,size:"sm"},className:"mt-[8px]"})]}),u={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},g={args:{data:{title:"Experience Anker Innovation",subtitle:"Watch our latest product demo and discover the future of charging technology",pcImage:{url:e,alt:"tech background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"tech background mobile",thumbnailURL:e,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now",link:"/shop"},secondaryButton:{text:"Learn More",link:"/learn-more",isShowPlayVideoButton:!0,playVideoButtonText:"Watch Demo",playIcon:!0,videoUrl:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"product demo video",thumbnailURL:e,mimeType:"video/mp4"}},caption:[{title:"Anker Prime 240W GaN Desktop Charger"},{title:"Anker PowerCore 27,650mAh Power Bank"},{title:"Anker Wireless Charging Station"}]}}},h={args:{data:{title:"Anker Prime Series",subtitle:"See our Prime series in action. Experience the power that drives innovation.",pcImage:{url:e,alt:"anker products",thumbnailURL:e,mimeType:"image/jpeg"},padImage:{url:e,alt:"anker products pad",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"anker products mobile",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Buy Now",link:"/buy"},secondaryButton:{text:"Explore",link:"/explore",isShowPlayVideoButton:!0,playVideoButtonText:"Watch on YouTube",youtubeId:"dQw4w9WgXcQ"},caption:[{title:"Prime 240W Desktop Charger"},{title:"Prime 27,650mAh Power Bank"},{title:"Prime 100W Wireless Charger"}]}}},y={args:{data:r.args.data,classNames:{root:"",title:" text-red-500",subtitle:"text-blue-500",buttonGroup:"justify-left mt-[200px]",primaryButton:"shadow-lg",secondaryButton:"custom-secondary-btn",captionGroup:"bg-black/40"}}},v=()=>a("div",{className:"min-h-[500vh]",children:[t(i,{data:{theme:"dark",title:"Powered by Innovation",subtitle:"Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.",pcImage:{url:e,alt:"fallback background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"fallback background mobile",thumbnailURL:e,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video desktop",thumbnailURL:e,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video tablet",thumbnailURL:e,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"background video mobile",thumbnailURL:e,mimeType:"video/mp4"},isShowVideo:!0,primaryButton:{text:"First Video",link:"/first"},secondaryButton:{text:"Learn More",link:"/learn"},caption:[{title:"IntersectionObserver Controlled"},{title:"Auto Play on Viewport Entry"},{title:"Restart from Beginning"}]}}),t("div",{className:"bg-gradient-to-b from-gray-900 to-black py-20 text-white",children:a("div",{className:"container mx-auto max-w-4xl px-4",children:[t("h2",{className:"mb-8 text-center text-4xl font-bold",children:"IntersectionObserver \u89C6\u9891\u63A7\u5236"}),a("div",{className:"space-y-8",children:[a("div",{className:"rounded-lg bg-gray-800 p-8",children:[t("h3",{className:"mb-4 text-2xl font-semibold",children:"\u667A\u80FD\u89C6\u9891\u64AD\u653E"}),t("p",{className:"leading-relaxed text-gray-300",children:"\u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528 IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002"})]}),a("div",{className:"rounded-lg bg-gray-800 p-8",children:[t("h3",{className:"mb-4 text-2xl font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),t("p",{className:"leading-relaxed text-gray-300",children:"\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002"})]})]})]})}),t(i,{data:{title:"Second Video Banner",subtitle:"This is the second video to test multiple banners with IntersectionObserver.",pcImage:{url:o,alt:"second banner background",thumbnailURL:o,mimeType:"image/jpeg"},mobileImage:{url:o,alt:"second banner mobile",thumbnailURL:o,mimeType:"image/jpeg"},pcVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4",alt:"second video desktop",thumbnailURL:o,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"second video tablet",thumbnailURL:o,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"second video mobile",thumbnailURL:o,mimeType:"video/mp4"},isShowVideo:!0,primaryButton:{text:"Second Video",link:"/second"},secondaryButton:{text:"Explore More",link:"/explore"},caption:[{title:"Independent Video Control"},{title:"Pause When Out of View"},{title:"Resource Efficient"}]}}),t("div",{className:"bg-gradient-to-b from-black to-gray-900 py-20 text-white",children:a("div",{className:"container mx-auto max-w-4xl px-4",children:[t("h2",{className:"mb-8 text-center text-4xl font-bold",children:"\u591A\u89C6\u9891\u7BA1\u7406"}),a("div",{className:"space-y-8",children:[a("div",{className:"rounded-lg bg-gray-800 p-8",children:[t("h3",{className:"mb-4 text-2xl font-semibold",children:"\u72EC\u7ACB\u63A7\u5236"}),t("p",{className:"leading-relaxed text-gray-300",children:"\u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002 \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002"})]}),a("div",{className:"rounded-lg bg-gray-800 p-8",children:[t("h3",{className:"mb-4 text-2xl font-semibold",children:"\u7528\u6237\u4F53\u9A8C"}),t("p",{className:"leading-relaxed text-gray-300",children:"\u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002 \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002"})]})]})]})}),t(i,{data:{title:"Third Video Experience",subtitle:"Final banner to demonstrate seamless video management across multiple sections.",pcImage:{url:e,alt:"third banner background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"third banner mobile",thumbnailURL:e,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video desktop",thumbnailURL:e,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video tablet",thumbnailURL:e,mimeType:"video/mp4"},mobileVideo:{url:"https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4",alt:"third video mobile",thumbnailURL:e,mimeType:"video/mp4"},theme:"dark",isShowVideo:!0,primaryButton:{text:"Third Video",link:"/third"},secondaryButton:{text:"Complete Test",link:"/complete"},caption:[{title:"Seamless Performance"},{title:"Multiple Video Management"},{title:"Optimized for All Devices"}]}}),t("div",{className:"bg-black py-20 text-white",children:a("div",{className:"container mx-auto px-4 text-center",children:[t("h2",{className:"mb-4 text-3xl font-bold",children:"IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210"}),t("p",{className:"mb-8 text-gray-400",children:"\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C"}),a("div",{className:"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3",children:[a("div",{className:"rounded border border-gray-700 p-6",children:[t("h4",{className:"mb-2 text-lg font-semibold",children:"\u667A\u80FD\u64AD\u653E"}),t("p",{className:"text-sm text-gray-400",children:"\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C"})]}),a("div",{className:"rounded border border-gray-700 p-6",children:[t("h4",{className:"mb-2 text-lg font-semibold",children:"\u4ECE\u5934\u64AD\u653E"}),t("p",{className:"text-sm text-gray-400",children:"\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB"})]}),a("div",{className:"rounded border border-gray-700 p-6",children:[t("h4",{className:"mb-2 text-lg font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),t("p",{className:"text-sm text-gray-400",children:"\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528"})]})]})]})})]});export{n as DarkTheme,r as LightTheme,b as MultiBanner,v as ScrollableBackgroundVideo,y as WithSemanticClassNames,g as WithVideoModal,h as WithYoutubeVideo,u as WithoutSecondaryButton,p as default};
+        `}}},tags:["autodocs"]};var p=r;const e="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",c="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",o="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",m={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",blockLink:"/this-is-block-link",primaryButton:{text:"Shop Now",link:"/this-is-shop-now-link"},secondaryButton:{text:"Learn More",link:"/this-is-learn-more-link"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}],endDate:"2025-11-15T03:32:00.000Z",endDate_tz:"America/Sao_Paulo",dateFormat:'{"day":"Day","hour":"Hours","minute":"Mins","second":"Secs"}'}}},l={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:o,alt:"dark background",thumbnailURL:o,mimeType:"image/jpeg"},mobileImage:{url:o,alt:"dark background",thumbnailURL:o,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now"},secondaryButton:{text:"Learn More"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},b=()=>a("div",{className:"flex flex-col",children:[t(i,{data:{...m.args.data,size:"sm"}}),t(i,{data:{...l.args.data,size:"sm"},className:"mt-[8px]"})]}),u={args:{data:{title:"Future of Charging",subtitle:"Step into the future with our revolutionary charging solutions that redefine the way you power your devices.",pcImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"default background",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Shop Now"},caption:[{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"},{title:"Anker Prime 27,650mAh Power Bank (250W)"},{title:"Anker Prime 240W GaN Desktop Charger (4 Ports)"}]}}},h={args:{data:{title:"Experience Anker Innovation",subtitle:"Watch our latest product demo and discover the future of charging technology",pcImage:{url:e,alt:"tech background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"tech background mobile",thumbnailURL:e,mimeType:"image/jpeg"},theme:"dark",primaryButton:{text:"Shop Now",link:"/shop"},secondaryButton:{text:"Learn More",link:"/learn-more",isShowPlayVideoButton:!0,playVideoButtonText:"Watch Demo",playIcon:!0,videoUrl:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"product demo video",thumbnailURL:e,mimeType:"video/mp4"}},caption:[{title:"Anker Prime 240W GaN Desktop Charger"},{title:"Anker PowerCore 27,650mAh Power Bank"},{title:"Anker Wireless Charging Station"}]}}},g={args:{data:{title:"Anker Prime Series",subtitle:"See our Prime series in action. Experience the power that drives innovation.",pcImage:{url:e,alt:"anker products",thumbnailURL:e,mimeType:"image/jpeg"},padImage:{url:e,alt:"anker products pad",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"anker products mobile",thumbnailURL:e,mimeType:"image/jpeg"},theme:"light",primaryButton:{text:"Buy Now",link:"/buy"},secondaryButton:{text:"Explore",link:"/explore",isShowPlayVideoButton:!0,playVideoButtonText:"Watch on YouTube",youtubeId:"dQw4w9WgXcQ"},caption:[{title:"Prime 240W Desktop Charger"},{title:"Prime 27,650mAh Power Bank"},{title:"Prime 100W Wireless Charger"}]}}},y=()=>a("div",{className:"min-h-[500vh]",children:[t(i,{data:{theme:"dark",title:"Powered by Innovation",subtitle:"Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.",pcImage:{url:e,alt:"fallback background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"fallback background mobile",thumbnailURL:e,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video desktop",thumbnailURL:e,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video tablet",thumbnailURL:e,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"background video mobile",thumbnailURL:e,mimeType:"video/mp4"},isShowVideo:!0,primaryButton:{text:"First Video",link:"/first"},secondaryButton:{text:"Learn More",link:"/learn"},caption:[{title:"IntersectionObserver Controlled"},{title:"Auto Play on Viewport Entry"},{title:"Restart from Beginning"}]}}),t("div",{className:"bg-gradient-to-b from-gray-900 to-black py-20 text-white",children:a("div",{className:"container mx-auto max-w-4xl px-4",children:[t("h2",{className:"mb-8 text-center text-4xl font-bold",children:"IntersectionObserver \u89C6\u9891\u63A7\u5236"}),a("div",{className:"space-y-8",children:[a("div",{className:"rounded-lg bg-gray-800 p-8",children:[t("h3",{className:"mb-4 text-2xl font-semibold",children:"\u667A\u80FD\u89C6\u9891\u64AD\u653E"}),t("p",{className:"leading-relaxed text-gray-300",children:"\u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528 IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002"})]}),a("div",{className:"rounded-lg bg-gray-800 p-8",children:[t("h3",{className:"mb-4 text-2xl font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),t("p",{className:"leading-relaxed text-gray-300",children:"\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002"})]})]})]})}),t(i,{data:{title:"Second Video Banner",subtitle:"This is the second video to test multiple banners with IntersectionObserver.",pcImage:{url:o,alt:"second banner background",thumbnailURL:o,mimeType:"image/jpeg"},mobileImage:{url:o,alt:"second banner mobile",thumbnailURL:o,mimeType:"image/jpeg"},pcVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4",alt:"second video desktop",thumbnailURL:o,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"second video tablet",thumbnailURL:o,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"second video mobile",thumbnailURL:o,mimeType:"video/mp4"},isShowVideo:!0,primaryButton:{text:"Second Video",link:"/second"},secondaryButton:{text:"Explore More",link:"/explore"},caption:[{title:"Independent Video Control"},{title:"Pause When Out of View"},{title:"Resource Efficient"}]}}),t("div",{className:"bg-gradient-to-b from-black to-gray-900 py-20 text-white",children:a("div",{className:"container mx-auto max-w-4xl px-4",children:[t("h2",{className:"mb-8 text-center text-4xl font-bold",children:"\u591A\u89C6\u9891\u7BA1\u7406"}),a("div",{className:"space-y-8",children:[a("div",{className:"rounded-lg bg-gray-800 p-8",children:[t("h3",{className:"mb-4 text-2xl font-semibold",children:"\u72EC\u7ACB\u63A7\u5236"}),t("p",{className:"leading-relaxed text-gray-300",children:"\u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002 \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002"})]}),a("div",{className:"rounded-lg bg-gray-800 p-8",children:[t("h3",{className:"mb-4 text-2xl font-semibold",children:"\u7528\u6237\u4F53\u9A8C"}),t("p",{className:"leading-relaxed text-gray-300",children:"\u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002 \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002"})]})]})]})}),t(i,{data:{title:"Third Video Experience",subtitle:"Final banner to demonstrate seamless video management across multiple sections.",pcImage:{url:e,alt:"third banner background",thumbnailURL:e,mimeType:"image/jpeg"},mobileImage:{url:e,alt:"third banner mobile",thumbnailURL:e,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video desktop",thumbnailURL:e,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video tablet",thumbnailURL:e,mimeType:"video/mp4"},mobileVideo:{url:"https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4",alt:"third video mobile",thumbnailURL:e,mimeType:"video/mp4"},theme:"dark",isShowVideo:!0,primaryButton:{text:"Third Video",link:"/third"},secondaryButton:{text:"Complete Test",link:"/complete"},caption:[{title:"Seamless Performance"},{title:"Multiple Video Management"},{title:"Optimized for All Devices"}]}}),t("div",{className:"bg-black py-20 text-white",children:a("div",{className:"container mx-auto px-4 text-center",children:[t("h2",{className:"mb-4 text-3xl font-bold",children:"IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210"}),t("p",{className:"mb-8 text-gray-400",children:"\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C"}),a("div",{className:"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3",children:[a("div",{className:"rounded border border-gray-700 p-6",children:[t("h4",{className:"mb-2 text-lg font-semibold",children:"\u667A\u80FD\u64AD\u653E"}),t("p",{className:"text-sm text-gray-400",children:"\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C"})]}),a("div",{className:"rounded border border-gray-700 p-6",children:[t("h4",{className:"mb-2 text-lg font-semibold",children:"\u4ECE\u5934\u64AD\u653E"}),t("p",{className:"text-sm text-gray-400",children:"\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB"})]}),a("div",{className:"rounded border border-gray-700 p-6",children:[t("h4",{className:"mb-2 text-lg font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),t("p",{className:"text-sm text-gray-400",children:"\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528"})]})]})]})})]});export{l as DarkTheme,m as LightTheme,b as MultiBanner,y as ScrollableBackgroundVideo,h as WithVideoModal,g as WithYoutubeVideo,u as WithoutSecondaryButton,p as default};
 //# sourceMappingURL=HeroBanner.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/HeroBanner.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n  title: 'Biz-Components/HeroBanner',\n  component: HeroBanner,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n  'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      title: 'Anker Laptop Power',\n      subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      blockLink: '/this-is-block-link',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/this-is-shop-now-link',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/this-is-learn-more-link',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n      endDate: '2025-11-15T03:32:00.000Z',\n      endDate_tz: 'America/Sao_Paulo',\n      dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      title: 'Power Your Life',\n      subtitle:\n        'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n      pcImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const MultiBanner = () => {\n  return (\n    <div className=\"flex flex-col\">\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} className=\"mt-[8px]\" />\n    </div>\n  )\n}\n\nexport const WithoutSecondaryButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithVideoModal: Story = {\n  args: {\n    data: {\n      title: 'Experience Anker Innovation',\n      subtitle: 'Watch our latest product demo and discover the future of charging technology',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'tech background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'tech background mobile',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/shop',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/learn-more',\n        isShowPlayVideoButton: true,\n        playVideoButtonText: 'Watch Demo',\n        playIcon: true,\n        videoUrl: {\n          url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n          alt: 'product demo video',\n          thumbnailURL: defaultBackground,\n          mimeType: 'video/mp4',\n        },\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger' },\n        { title: 'Anker PowerCore 27,650mAh Power Bank' },\n        { title: 'Anker Wireless Charging Station' },\n      ],\n    },\n  },\n}\n\nexport const WithYoutubeVideo: Story = {\n  args: {\n    data: {\n      title: 'Anker Prime Series',\n      subtitle: 'See our Prime series in action. Experience the power that drives innovation.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'anker products',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: defaultBackground,\n        alt: 'anker products pad',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'anker products mobile',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Buy Now',\n        link: '/buy',\n      },\n      secondaryButton: {\n        text: 'Explore',\n        link: '/explore',\n        isShowPlayVideoButton: true,\n        playVideoButtonText: 'Watch on YouTube',\n        youtubeId: 'dQw4w9WgXcQ', // Example YouTube ID\n      },\n      caption: [\n        { title: 'Prime 240W Desktop Charger' },\n        { title: 'Prime 27,650mAh Power Bank' },\n        { title: 'Prime 100W Wireless Charger' },\n      ],\n    },\n  },\n}\n\n// \u8BED\u4E49\u5316 ClassNames \u793A\u4F8B\nexport const WithSemanticClassNames: Story = {\n  args: {\n    data: LightTheme.args!.data,\n    classNames: {\n      root: '',\n      title: ' text-red-500',\n      subtitle: 'text-blue-500',\n      buttonGroup: 'justify-left mt-[200px]',\n      primaryButton: 'shadow-lg',\n      secondaryButton: 'custom-secondary-btn',\n      captionGroup: 'bg-black/40',\n    },\n  },\n}\n\nexport const ScrollableBackgroundVideo = () => {\n  return (\n    <div className=\"min-h-[500vh]\">\n      {/* \u7B2C\u4E00\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          theme: 'dark',\n          title: 'Powered by Innovation',\n          subtitle:\n            'Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.',\n          pcImage: {\n            url: defaultBackground,\n            alt: 'fallback background',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: defaultBackground,\n            alt: 'fallback background mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'background video desktop',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'background video tablet',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n            alt: 'background video mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          isShowVideo: true,\n          primaryButton: {\n            text: 'First Video',\n            link: '/first',\n          },\n          secondaryButton: {\n            text: 'Learn More',\n            link: '/learn',\n          },\n          caption: [\n            { title: 'IntersectionObserver Controlled' },\n            { title: 'Auto Play on Viewport Entry' },\n            { title: 'Restart from Beginning' },\n          ],\n        }}\n      />\n\n      {/* \u4E2D\u95F4\u95F4\u9694\u5185\u5BB9 */}\n      <div className=\"bg-gradient-to-b from-gray-900 to-black py-20 text-white\">\n        <div className=\"container mx-auto max-w-4xl px-4\">\n          <h2 className=\"mb-8 text-center text-4xl font-bold\">IntersectionObserver \u89C6\u9891\u63A7\u5236</h2>\n          <div className=\"space-y-8\">\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u667A\u80FD\u89C6\u9891\u64AD\u653E</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528\n                IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002\n              </p>\n            </div>\n\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u6027\u80FD\u4F18\u5316</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C\n                \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* \u7B2C\u4E8C\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          title: 'Second Video Banner',\n          subtitle: 'This is the second video to test multiple banners with IntersectionObserver.',\n          pcImage: {\n            url: darkBackground,\n            alt: 'second banner background',\n            thumbnailURL: darkBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: darkBackground,\n            alt: 'second banner mobile',\n            thumbnailURL: darkBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',\n            alt: 'second video desktop',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'second video tablet',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n            alt: 'second video mobile',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          isShowVideo: true,\n          primaryButton: {\n            text: 'Second Video',\n            link: '/second',\n          },\n          secondaryButton: {\n            text: 'Explore More',\n            link: '/explore',\n          },\n          caption: [\n            { title: 'Independent Video Control' },\n            { title: 'Pause When Out of View' },\n            { title: 'Resource Efficient' },\n          ],\n        }}\n      />\n\n      {/* \u66F4\u591A\u95F4\u9694\u5185\u5BB9 */}\n      <div className=\"bg-gradient-to-b from-black to-gray-900 py-20 text-white\">\n        <div className=\"container mx-auto max-w-4xl px-4\">\n          <h2 className=\"mb-8 text-center text-4xl font-bold\">\u591A\u89C6\u9891\u7BA1\u7406</h2>\n          <div className=\"space-y-8\">\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u72EC\u7ACB\u63A7\u5236</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002\n                \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002\n              </p>\n            </div>\n\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u7528\u6237\u4F53\u9A8C</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002\n                \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* \u7B2C\u4E09\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          title: 'Third Video Experience',\n          subtitle: 'Final banner to demonstrate seamless video management across multiple sections.',\n          pcImage: {\n            url: defaultBackground,\n            alt: 'third banner background',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: defaultBackground,\n            alt: 'third banner mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n            alt: 'third video desktop',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n            alt: 'third video tablet',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4',\n            alt: 'third video mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          theme: 'dark',\n          isShowVideo: true,\n          primaryButton: {\n            text: 'Third Video',\n            link: '/third',\n          },\n          secondaryButton: {\n            text: 'Complete Test',\n            link: '/complete',\n          },\n          caption: [\n            { title: 'Seamless Performance' },\n            { title: 'Multiple Video Management' },\n            { title: 'Optimized for All Devices' },\n          ],\n        }}\n      />\n\n      {/* \u5E95\u90E8\u603B\u7ED3\u5185\u5BB9 */}\n      <div className=\"bg-black py-20 text-white\">\n        <div className=\"container mx-auto px-4 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold\">IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210</h2>\n          <p className=\"mb-8 text-gray-400\">\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C</p>\n          <div className=\"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3\">\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u667A\u80FD\u64AD\u653E</h4>\n              <p className=\"text-sm text-gray-400\">\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C</p>\n            </div>\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u4ECE\u5934\u64AD\u653E</h4>\n              <p className=\"text-sm text-gray-400\">\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB</p>\n            </div>\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u6027\u80FD\u4F18\u5316</h4>\n              <p className=\"text-sm text-gray-400\">\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "padBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton", "WithVideoModal", "WithYoutubeVideo", "WithSemanticClassNames", "ScrollableBackgroundVideo"]
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n  title: 'Biz-Components/HeroBanner',\n  component: HeroBanner,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n  'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      title: 'Anker Laptop Power',\n      subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      blockLink: '/this-is-block-link',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/this-is-shop-now-link',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/this-is-learn-more-link',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n      endDate: '2025-11-15T03:32:00.000Z',\n      endDate_tz: 'America/Sao_Paulo',\n      dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      title: 'Power Your Life',\n      subtitle:\n        'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n      pcImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const MultiBanner = () => {\n  return (\n    <div className=\"flex flex-col\">\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} className=\"mt-[8px]\" />\n    </div>\n  )\n}\n\nexport const WithoutSecondaryButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithVideoModal: Story = {\n  args: {\n    data: {\n      title: 'Experience Anker Innovation',\n      subtitle: 'Watch our latest product demo and discover the future of charging technology',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'tech background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'tech background mobile',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/shop',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/learn-more',\n        isShowPlayVideoButton: true,\n        playVideoButtonText: 'Watch Demo',\n        playIcon: true,\n        videoUrl: {\n          url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n          alt: 'product demo video',\n          thumbnailURL: defaultBackground,\n          mimeType: 'video/mp4',\n        },\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger' },\n        { title: 'Anker PowerCore 27,650mAh Power Bank' },\n        { title: 'Anker Wireless Charging Station' },\n      ],\n    },\n  },\n}\n\nexport const WithYoutubeVideo: Story = {\n  args: {\n    data: {\n      title: 'Anker Prime Series',\n      subtitle: 'See our Prime series in action. Experience the power that drives innovation.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'anker products',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: defaultBackground,\n        alt: 'anker products pad',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'anker products mobile',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Buy Now',\n        link: '/buy',\n      },\n      secondaryButton: {\n        text: 'Explore',\n        link: '/explore',\n        isShowPlayVideoButton: true,\n        playVideoButtonText: 'Watch on YouTube',\n        youtubeId: 'dQw4w9WgXcQ', // Example YouTube ID\n      },\n      caption: [\n        { title: 'Prime 240W Desktop Charger' },\n        { title: 'Prime 27,650mAh Power Bank' },\n        { title: 'Prime 100W Wireless Charger' },\n      ],\n    },\n  },\n}\n\nexport const ScrollableBackgroundVideo = () => {\n  return (\n    <div className=\"min-h-[500vh]\">\n      {/* \u7B2C\u4E00\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          theme: 'dark',\n          title: 'Powered by Innovation',\n          subtitle:\n            'Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.',\n          pcImage: {\n            url: defaultBackground,\n            alt: 'fallback background',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: defaultBackground,\n            alt: 'fallback background mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'background video desktop',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'background video tablet',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n            alt: 'background video mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          isShowVideo: true,\n          primaryButton: {\n            text: 'First Video',\n            link: '/first',\n          },\n          secondaryButton: {\n            text: 'Learn More',\n            link: '/learn',\n          },\n          caption: [\n            { title: 'IntersectionObserver Controlled' },\n            { title: 'Auto Play on Viewport Entry' },\n            { title: 'Restart from Beginning' },\n          ],\n        }}\n      />\n\n      {/* \u4E2D\u95F4\u95F4\u9694\u5185\u5BB9 */}\n      <div className=\"bg-gradient-to-b from-gray-900 to-black py-20 text-white\">\n        <div className=\"container mx-auto max-w-4xl px-4\">\n          <h2 className=\"mb-8 text-center text-4xl font-bold\">IntersectionObserver \u89C6\u9891\u63A7\u5236</h2>\n          <div className=\"space-y-8\">\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u667A\u80FD\u89C6\u9891\u64AD\u653E</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528\n                IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002\n              </p>\n            </div>\n\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u6027\u80FD\u4F18\u5316</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C\n                \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* \u7B2C\u4E8C\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          title: 'Second Video Banner',\n          subtitle: 'This is the second video to test multiple banners with IntersectionObserver.',\n          pcImage: {\n            url: darkBackground,\n            alt: 'second banner background',\n            thumbnailURL: darkBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: darkBackground,\n            alt: 'second banner mobile',\n            thumbnailURL: darkBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',\n            alt: 'second video desktop',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'second video tablet',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n            alt: 'second video mobile',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          isShowVideo: true,\n          primaryButton: {\n            text: 'Second Video',\n            link: '/second',\n          },\n          secondaryButton: {\n            text: 'Explore More',\n            link: '/explore',\n          },\n          caption: [\n            { title: 'Independent Video Control' },\n            { title: 'Pause When Out of View' },\n            { title: 'Resource Efficient' },\n          ],\n        }}\n      />\n\n      {/* \u66F4\u591A\u95F4\u9694\u5185\u5BB9 */}\n      <div className=\"bg-gradient-to-b from-black to-gray-900 py-20 text-white\">\n        <div className=\"container mx-auto max-w-4xl px-4\">\n          <h2 className=\"mb-8 text-center text-4xl font-bold\">\u591A\u89C6\u9891\u7BA1\u7406</h2>\n          <div className=\"space-y-8\">\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u72EC\u7ACB\u63A7\u5236</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002\n                \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002\n              </p>\n            </div>\n\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u7528\u6237\u4F53\u9A8C</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002\n                \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* \u7B2C\u4E09\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          title: 'Third Video Experience',\n          subtitle: 'Final banner to demonstrate seamless video management across multiple sections.',\n          pcImage: {\n            url: defaultBackground,\n            alt: 'third banner background',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: defaultBackground,\n            alt: 'third banner mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n            alt: 'third video desktop',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n            alt: 'third video tablet',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4',\n            alt: 'third video mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          theme: 'dark',\n          isShowVideo: true,\n          primaryButton: {\n            text: 'Third Video',\n            link: '/third',\n          },\n          secondaryButton: {\n            text: 'Complete Test',\n            link: '/complete',\n          },\n          caption: [\n            { title: 'Seamless Performance' },\n            { title: 'Multiple Video Management' },\n            { title: 'Optimized for All Devices' },\n          ],\n        }}\n      />\n\n      {/* \u5E95\u90E8\u603B\u7ED3\u5185\u5BB9 */}\n      <div className=\"bg-black py-20 text-white\">\n        <div className=\"container mx-auto px-4 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold\">IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210</h2>\n          <p className=\"mb-8 text-gray-400\">\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C</p>\n          <div className=\"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3\">\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u667A\u80FD\u64AD\u653E</h4>\n              <p className=\"text-sm text-gray-400\">\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C</p>\n            </div>\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u4ECE\u5934\u64AD\u653E</h4>\n              <p className=\"text-sm text-gray-400\">\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB</p>\n            </div>\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u6027\u80FD\u4F18\u5316</h4>\n              <p className=\"text-sm text-gray-400\">\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AAkHI,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBAjHJ,MAAkB,QAClB,OAAOC,MAAgB,6CAEvB,MAAMC,EAAO,CACX,MAAO,4BACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EACJ,gJAEIC,EACJ,gJAEIC,EACJ,2GAEWC,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,iDACV,QAAS,CACP,IAAKH,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,UAAW,sBACX,cAAe,CACb,KAAM,WACN,KAAM,wBACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,0BACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,EACA,QAAS,2BACT,WAAY,oBACZ,WAAY,8DACd,CACF,CACF,EAEaI,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,MAAO,kBACP,SACE,gHACF,QAAS,CACP,IAAKF,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,UACR,EACA,gBAAiB,CACf,KAAM,YACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaG,EAAc,IAEvBT,EAAC,OAAI,UAAU,gBAEb,UAAAD,EAACE,EAAA,CAAW,KAAM,CAAE,GAAGM,EAAY,KAAM,KAAM,KAAM,IAAK,EAAG,EAE7DR,EAACE,EAAA,CAAW,KAAM,CAAE,GAAGO,EAAW,KAAM,KAAM,KAAM,IAAK,EAAG,UAAU,WAAW,GACnF,EAISE,EAAgC,CAC3C,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SACE,+GACF,QAAS,CACP,IAAKN,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,gDAAiD,EAC1D,CAAE,MAAO,yCAA0C,EACnD,CAAE,MAAO,gDAAiD,CAC5D,CACF,CACF,CACF,EAEaO,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,8BACP,SAAU,+EACV,QAAS,CACP,IAAKP,EACL,IAAK,kBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,yBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,OACP,cAAe,CACb,KAAM,WACN,KAAM,OACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,cACN,sBAAuB,GACvB,oBAAqB,aACrB,SAAU,GACV,SAAU,CACR,IAAK,4EACL,IAAK,qBACL,aAAcA,EACd,SAAU,WACZ,CACF,EACA,QAAS,CACP,CAAE,MAAO,sCAAuC,EAChD,CAAE,MAAO,sCAAuC,EAChD,CAAE,MAAO,iCAAkC,CAC7C,CACF,CACF,CACF,EAEaQ,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAO,qBACP,SAAU,+EACV,QAAS,CACP,IAAKR,EACL,IAAK,iBACL,aAAcA,EACd,SAAU,YACZ,EACA,SAAU,CACR,IAAKA,EACL,IAAK,qBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,wBACL,aAAcA,EACd,SAAU,YACZ,EACA,MAAO,QACP,cAAe,CACb,KAAM,UACN,KAAM,MACR,EACA,gBAAiB,CACf,KAAM,UACN,KAAM,WACN,sBAAuB,GACvB,oBAAqB,mBACrB,UAAW,aACb,EACA,QAAS,CACP,CAAE,MAAO,4BAA6B,EACtC,CAAE,MAAO,4BAA6B,EACtC,CAAE,MAAO,6BAA8B,CACzC,CACF,CACF,CACF,EAEaS,EAA4B,IAErCb,EAAC,OAAI,UAAU,gBAEb,UAAAD,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,OACP,MAAO,wBACP,SACE,qHACF,QAAS,CACP,IAAKG,EACL,IAAK,sBACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,6BACL,aAAcA,EACd,SAAU,YACZ,EACA,QAAS,CACP,IAAK,4EACL,IAAK,2BACL,aAAcA,EACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,0BACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,CACX,IAAK,mEACL,IAAK,0BACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,GACb,cAAe,CACb,KAAM,cACN,KAAM,QACR,EACA,gBAAiB,CACf,KAAM,aACN,KAAM,QACR,EACA,QAAS,CACP,CAAE,MAAO,iCAAkC,EAC3C,CAAE,MAAO,6BAA8B,EACvC,CAAE,MAAO,wBAAyB,CACpC,CACF,EACF,EAGAL,EAAC,OAAI,UAAU,2DACb,SAAAC,EAAC,OAAI,UAAU,mCACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,yDAAyB,EAC7EC,EAAC,OAAI,UAAU,YACb,UAAAA,EAAC,OAAI,UAAU,6BACb,UAAAD,EAAC,MAAG,UAAU,8BAA8B,gDAAM,EAClDA,EAAC,KAAE,UAAU,gCAAgC,oZAG7C,GACF,EAEAC,EAAC,OAAI,UAAU,6BACb,UAAAD,EAAC,MAAG,UAAU,8BAA8B,oCAAI,EAChDA,EAAC,KAAE,UAAU,gCAAgC,qYAG7C,GACF,GACF,GACF,EACF,EAGAA,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,sBACP,SAAU,+EACV,QAAS,CACP,IAAKK,EACL,IAAK,2BACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,uBACL,aAAcA,EACd,SAAU,YACZ,EACA,QAAS,CACP,IAAK,oEACL,IAAK,uBACL,aAAcA,EACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,sBACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,CACX,IAAK,mEACL,IAAK,sBACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,GACb,cAAe,CACb,KAAM,eACN,KAAM,SACR,EACA,gBAAiB,CACf,KAAM,eACN,KAAM,UACR,EACA,QAAS,CACP,CAAE,MAAO,2BAA4B,EACrC,CAAE,MAAO,wBAAyB,EAClC,CAAE,MAAO,oBAAqB,CAChC,CACF,EACF,EAGAP,EAAC,OAAI,UAAU,2DACb,SAAAC,EAAC,OAAI,UAAU,mCACb,UAAAD,EAAC,MAAG,UAAU,sCAAsC,0CAAK,EACzDC,EAAC,OAAI,UAAU,YACb,UAAAA,EAAC,OAAI,UAAU,6BACb,UAAAD,EAAC,MAAG,UAAU,8BAA8B,oCAAI,EAChDA,EAAC,KAAE,UAAU,gCAAgC,mSAG7C,GACF,EAEAC,EAAC,OAAI,UAAU,6BACb,UAAAD,EAAC,MAAG,UAAU,8BAA8B,oCAAI,EAChDA,EAAC,KAAE,UAAU,gCAAgC,qUAG7C,GACF,GACF,GACF,EACF,EAGAA,EAACE,EAAA,CACC,KAAM,CACJ,MAAO,yBACP,SAAU,kFACV,QAAS,CACP,IAAKG,EACL,IAAK,0BACL,aAAcA,EACd,SAAU,YACZ,EACA,YAAa,CACX,IAAKA,EACL,IAAK,sBACL,aAAcA,EACd,SAAU,YACZ,EACA,QAAS,CACP,IAAK,4EACL,IAAK,sBACL,aAAcA,EACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,qBACL,aAAcA,EACd,SAAU,WACZ,EACA,YAAa,CACX,IAAK,4EACL,IAAK,qBACL,aAAcA,EACd,SAAU,WACZ,EACA,MAAO,OACP,YAAa,GACb,cAAe,CACb,KAAM,cACN,KAAM,QACR,EACA,gBAAiB,CACf,KAAM,gBACN,KAAM,WACR,EACA,QAAS,CACP,CAAE,MAAO,sBAAuB,EAChC,CAAE,MAAO,2BAA4B,EACrC,CAAE,MAAO,2BAA4B,CACvC,CACF,EACF,EAGAL,EAAC,OAAI,UAAU,4BACb,SAAAC,EAAC,OAAI,UAAU,qCACb,UAAAD,EAAC,MAAG,UAAU,0BAA0B,yDAAyB,EACjEA,EAAC,KAAE,UAAU,qBAAqB,0IAAqB,EACvDC,EAAC,OAAI,UAAU,0DACb,UAAAA,EAAC,OAAI,UAAU,qCACb,UAAAD,EAAC,MAAG,UAAU,6BAA6B,oCAAI,EAC/CA,EAAC,KAAE,UAAU,wBAAwB,sGAAe,GACtD,EACAC,EAAC,OAAI,UAAU,qCACb,UAAAD,EAAC,MAAG,UAAU,6BAA6B,oCAAI,EAC/CA,EAAC,KAAE,UAAU,wBAAwB,gGAAc,GACrD,EACAC,EAAC,OAAI,UAAU,qCACb,UAAAD,EAAC,MAAG,UAAU,6BAA6B,oCAAI,EAC/CA,EAAC,KAAE,UAAU,wBAAwB,gGAAc,GACrD,GACF,GACF,EACF,GACF",
+  "names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "padBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton", "WithVideoModal", "WithYoutubeVideo", "ScrollableBackgroundVideo"]
 }

package/dist/esm/stories/MemberEquity.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MemberEquity from '../biz-components/MemberEquity/index.js';
+declare const meta: Meta<typeof MemberEquity>;
+export default meta;
+type Story = StoryObj<typeof MemberEquity>;
+export declare const Default: Story;
+export declare const Round: Story;
+export declare const CustomButtons: Story;
+export declare const CustomStyles: Story;

package/dist/esm/stories/MultiLayoutGraphicBlock.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiLayoutGraphicBlock from '../biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js';
+declare const meta: Meta<typeof MultiLayoutGraphicBlock>;
+export default meta;
+type Story = StoryObj<typeof MultiLayoutGraphicBlock>;
+export declare const Default: Story;
+export declare const ThirdWidth: Story;
+export declare const WithCarousel: Story;
+export declare const WithTabs: Story;

package/dist/esm/stories/accordionCards.stories.d.ts

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/AccordionCards/index.js").AccordionCardsType & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }, "ref"> & import("react").RefAttributes<any>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Round: Story;
+export declare const CustomLayout: () => import("react/jsx-runtime").JSX.Element;
+export declare const Autoplay: {
+    args: {
+        data: {
+            products: {
+                title: string;
+                img: {
+                    url: string;
+                };
+                subTitle: string;
+            }[];
+            shape: string;
+            itemShape: string;
+            theme: string;
+        };
+        autoplay: {
+            enabled: boolean;
+            loop: boolean;
+            interval: number;
+        };
+    };
+};

package/dist/esm/stories/alert.stories.d.ts

@@ -0,0 +1,27 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
+        variant?: "default" | "destructive" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+        status?: "success" | "error" | "warning" | "info";
+        closable?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
+    subcomponents: {
+        AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+        AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/esm/stories/avatar.stories.d.ts

@@ -0,0 +1,39 @@
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+        className?: string;
+        style?: React.CSSProperties;
+        onClick?: Function;
+        isAdaptation?: boolean;
+        minSize?: number;
+        maxSize?: number;
+        textClassName?: string;
+    } & import("class-variance-authority").VariantProps<(props?: ({
+        size?: "small" | "medium" | "large" | null | undefined;
+    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & Omit<import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    tags: string[];
+    subcomponents: any;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        size: {
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarType: () => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarSize: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/stories/badge.stories.d.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react';
+import { Badge } from '../components/index.js';
+declare const meta: {
+    title: string;
+    component: typeof Badge;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        size: "lg";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Examples: Story;

package/dist/esm/stories/bizTabs.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Tabs from '../biz-components/Tabs/index.js';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+export declare const Dark: Story;

package/dist/esm/stories/board.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Board from '../components/board.js';
+declare const meta: Meta<typeof Board>;
+export default meta;
+type Story = StoryObj<typeof Board>;
+export declare const Default: Story;

package/dist/esm/stories/brandEquity.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/BrandEquity/types.js").BrandEquityProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }, "ref"> & import("react").RefAttributes<any>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomBackground: Story;