@anker-in/headless-ui 1.1.28-alpha.1768202456200 → 1.1.29

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

@@ -29,12 +29,11 @@ export declare const useStyles: (styleProps: Partial<StylesProps>, data?: Record
     readonly uid: string;
 };
 /**
- * 高阶组件通过 withLayout 包装组件，自动应用样式和容器布局
- *
+ * 高阶组件， 用于给组件用style 标签的形式追加样式
  * @param WrappedComponent - 需要包装的组件
  * @param defaultLayoutProps - 默认样式属性
  */
-export declare function withLayout<P>(WrappedComponent: React.ComponentType<P>, defaultLayoutProps?: Partial<StylesProps & ContainerProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & {
-    style?: string | React.CSSProperties;
-    container?: ContainerProps["container"];
+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;
+    data?: Record<string, any>;
 }> & React.RefAttributes<any>>;

package/dist/cjs/shared/Styles.js

@@ -1,2 +1,2 @@
-"use strict";var K=Object.create;var c=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},S=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of B(e))!L.call(t,a)&&a!==n&&c(t,a,{get:()=>e[a],enumerable:!(o=W(e,a))||o.enumerable});return t};var y=(t,e,n)=>(n=t!=null?K(I(t)):{},S(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t)),j=t=>S(c({},"__esModule",{value:!0}),t);var F={};_(F,{getStylesProps:()=>$,useStyles:()=>R,withLayout:()=>D});module.exports=j(F);var s=require("react/jsx-runtime"),l=y(require("react")),g=require("./simpleHash.js"),C=y(require("./getKeyPropsString.js")),i=require("../components/grid.js"),P=require("../components/container.js"),f=y(require("./ErrorBoundary.js"));const E={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"},H={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"},b=t=>{const e=(0,C.default)(t);return`style_${(0,g.simpleHash)(e)}`},$=t=>{const{style:e,uid:n,disabled:o}=t;return{style:e,uid:n,disabled:o}},O=({style:t,uid:e=b({}),disabled:n=!1})=>!t||n?null:(0,s.jsx)("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),R=(t,e)=>{const n=(0,l.useMemo)(()=>t?.uid||b({...t,data:e}),[e,t]),o=(0,l.useMemo)(()=>(0,s.jsx)(O,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:o,uid:n}},A=t=>{const{desktopSpan:e,mobileSpan:n}=t?.container||{},o=n?E[n]:"",a=e?H[e]:"";return`${o} ${a}`.trim()};function D(t,e){const n=l.default.forwardRef((o,a)=>{const d=$(o),N=r=>r?typeof r=="string"?r:Object.entries(r).map(([T,G])=>`${T.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${G}`).join("; ")+";":"",p=[e?.style,d?.style].map(N).filter(r=>!!r).map(r=>r.trim().endsWith(";")?r:`${r};`).join(" "),h={...e,...d,...p&&{style:p}},{className:u,StyleComponent:k}=R(h,o?.data),w=r=>(0,s.jsx)(P.Container,{className:`${u} ${r?.className||""}`,children:(0,s.jsx)(i.Grid,{className:"container_grid",children:(0,s.jsx)(i.GridItem,{className:A(r),children:(0,s.jsx)(t,{...r,ref:a})})})}),x=r=>(0,s.jsx)(t,{...r,className:`${u} ${r?.className||""}`,ref:a}),{style:M,...m}=o;return(0,s.jsx)(s.Fragment,{children:(0,s.jsxs)(f.default,{children:[k,Reflect.ownKeys(m?.container||{})?.length>0?w(m):x(m)]})})});return n.displayName=`WithLayout${t.displayName||t.name||"Component"}`,n}
+"use strict";var G=Object.create;var c=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},p=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of j(e))!I.call(t,a)&&a!==n&&c(t,a,{get:()=>e[a],enumerable:!(r=K(e,a))||r.enumerable});return t};var d=(t,e,n)=>(n=t!=null?G(B(t)):{},p(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t)),E=t=>p(c({},"__esModule",{value:!0}),t);var D={};W(D,{getStylesProps:()=>C,useStyles:()=>$,withLayout:()=>A});module.exports=E(D);var o=require("react/jsx-runtime"),l=d(require("react")),b=require("./simpleHash.js"),g=d(require("./getKeyPropsString.js")),i=require("../components/grid.js"),P=require("../components/container.js"),f=d(require("./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"},L={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"},S=t=>{const e=(0,g.default)(t);return`style_${(0,b.simpleHash)(e)}`},C=t=>{const{style:e,uid:n,disabled:r}=t;return{style:e,uid:n,disabled:r}},O=({style:t,uid:e=S({}),disabled:n=!1})=>!t||n?null:(0,o.jsx)("style",{suppressHydrationWarning:!0,"data-style-id":e,children:`.block-${e} { ${t} }`}),$=(t,e)=>{const n=(0,l.useMemo)(()=>t?.uid||S({...t,data:e}),[e,t]),r=(0,l.useMemo)(()=>(0,o.jsx)(O,{...t,uid:n}),[t,n]);return{className:`block-${n} `,StyleComponent:r,uid:n}},_=t=>{const{desktopSpan:e,mobileSpan:n}=t?.container||{},r=n?H[n]:"",a=e?L[e]:"";return`${r} ${a}`.trim()};function A(t,e){const n=l.default.forwardRef((r,a)=>{const m=C(r),R=s=>s?typeof s=="string"?s:Object.entries(s).map(([x,T])=>`${x.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${T}`).join("; ")+";":"",y=[e?.style,m?.style].map(R).filter(s=>!!s).map(s=>s.trim().endsWith(";")?s:`${s};`).join(" "),N={...e,...m,...y&&{style:y}},{className:u,StyleComponent:k}=$(N,r?.data),w=s=>(0,o.jsx)(P.Container,{className:`${u} ${s?.className}`,children:(0,o.jsx)(i.Grid,{className:"container_grid",children:(0,o.jsx)(i.GridItem,{className:_(s),children:(0,o.jsx)(t,{...s,ref:a})})})}),h=s=>(0,o.jsx)(t,{...s,className:`${u} ${s?.className}`,ref:a});return(0,o.jsx)(o.Fragment,{children:(0,o.jsxs)(f.default,{children:[k,Reflect.ownKeys(r?.container||{})?.length>0?w(r):h(r)]})})});return n.displayName=t.displayName||t.name||"Component",n}
 //# sourceMappingURL=Styles.js.map

package/dist/cjs/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\u901A\u8FC7 withLayout \u5305\u88C5\u7EC4\u4EF6\uFF0C\u81EA\u52A8\u5E94\u7528\u6837\u5F0F\u548C\u5BB9\u5668\u5E03\u5C40\n *\n * @param WrappedComponent - \u9700\u8981\u5305\u88C5\u7684\u7EC4\u4EF6\n * @param defaultLayoutProps - \u9ED8\u8BA4\u6837\u5F0F\u5C5E\u6027\n */\nexport function withLayout<P>(\n  WrappedComponent: React.ComponentType<P>,\n  defaultLayoutProps?: Partial<StylesProps & ContainerProps>\n) {\n  // \u4F7F\u7528\u60A8\u7684\u7B80\u6D01\u65B9\u6CD5\uFF1A\u76F4\u63A5\u7528\u6CDB\u578B\u4FDD\u7559\u7C7B\u578B\n  const withLayout = React.forwardRef<\n    any,\n    P & { style?: string | React.CSSProperties; container?: ContainerProps['container'] }\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): 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?.className || ''}`}>\n          <Grid className=\"container_grid\">\n            <GridItem className={getContainerClassName(props)}>\n              <WrappedComponent {...props} ref={ref} />\n            </GridItem>\n          </Grid>\n        </Container>\n      )\n    }\n\n    const WithoutContainerWrapper = (props: any) => {\n      return <WrappedComponent {...props} className={`${className} ${props?.className || ''}`} ref={ref} />\n    }\n\n    // @ts-ignore\n    // eslint-disable-next-line no-unused-vars\n    const { style: _style, ...withOutStyleProps } = props\n\n    return (\n      <>\n        <ErrorBoundary>\n          {StyleComponent}\n          {Reflect.ownKeys((withOutStyleProps as any)?.container || {})?.length > 0\n            ? WithContainerWrapper(withOutStyleProps)\n            : WithoutContainerWrapper(withOutStyleProps)}\n        </ErrorBoundary>\n      </>\n    )\n  })\n\n  withLayout.displayName = `WithLayout${WrappedComponent.displayName || WrappedComponent.name || 'Component'}`\n  return withLayout\n}\n"],
-  "mappings": "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",
-  "names": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withLayout", "__toCommonJS", "import_jsx_runtime", "import_react", "import_simpleHash", "import_getKeyPropsString", "import_grid", "import_container", "import_ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getKeyPropsString", "style", "uid", "disabled", "Styles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "WrappedComponent", "defaultLayoutProps", "React", "ref", "propsStyleProps", "styleToString", "key", "value", "mergedStyle", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper", "_style", "withOutStyleProps", "ErrorBoundary"]
+  "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": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withLayout", "__toCommonJS", "import_jsx_runtime", "import_react", "import_simpleHash", "import_getKeyPropsString", "import_grid", "import_container", "import_ErrorBoundary", "colContentClasses", "colContentClassesTablet", "generateUID", "props", "keyString", "getKeyPropsString", "style", "uid", "disabled", "Styles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "mobileClasses", "desktopClasses", "WrappedComponent", "defaultLayoutProps", "React", "ref", "propsStyleProps", "styleToString", "key", "value", "mergedStyle", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper", "ErrorBoundary"]
 }

package/dist/cjs/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/cjs/stories/HeroBanner.stories.js

@@ -0,0 +1,11 @@
+"use strict";var b=Object.create;var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,o)=>{for(var r in o)n(a,r,{get:o[r],enumerable:!0})},s=(a,o,r,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of h(o))!y.call(a,l)&&l!==r&&n(a,l,{get:()=>o[l],enumerable:!(d=u(o,l))||d.enumerable});return a};var x=(a,o,r)=>(r=a!=null?b(g(a)):{},s(o||!a||!a.__esModule?n(r,"default",{value:a,enumerable:!0}):r,a)),f=a=>s(n({},"__esModule",{value:!0}),a);var S={};v(S,{DarkTheme:()=>c,LightTheme:()=>p,MultiBanner:()=>P,ScrollableBackgroundVideo:()=>L,WithVideoModal:()=>B,WithYoutubeVideo:()=>T,WithoutSecondaryButton:()=>w,default:()=>N});module.exports=f(S);var e=require("react/jsx-runtime"),I=require("react"),m=x(require("../biz-components/HeroBanner/HeroBanner.js"));const k={title:"Biz-Components/HeroBanner",component:m.default,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
+- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898
+- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898
+- \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 N=k;const t="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",U="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",i="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",p={args:{data:{title:"Anker Laptop Power",subtitle:"Anker Prime 240W GaN Desktop Charger (4 Ports)",pcImage:{url:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,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"}'}}},c={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:i,alt:"dark background",thumbnailURL:i,mimeType:"image/jpeg"},mobileImage:{url:i,alt:"dark background",thumbnailURL:i,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)"}]}}},P=()=>(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(m.default,{data:{...p.args.data,size:"sm"}}),(0,e.jsx)(m.default,{data:{...c.args.data,size:"sm"},className:"mt-[8px]"})]}),w={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:t,alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"default background",thumbnailURL:t,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)"}]}}},B={args:{data:{title:"Experience Anker Innovation",subtitle:"Watch our latest product demo and discover the future of charging technology",pcImage:{url:t,alt:"tech background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"tech background mobile",thumbnailURL:t,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:t,mimeType:"video/mp4"}},caption:[{title:"Anker Prime 240W GaN Desktop Charger"},{title:"Anker PowerCore 27,650mAh Power Bank"},{title:"Anker Wireless Charging Station"}]}}},T={args:{data:{title:"Anker Prime Series",subtitle:"See our Prime series in action. Experience the power that drives innovation.",pcImage:{url:t,alt:"anker products",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:t,alt:"anker products pad",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"anker products mobile",thumbnailURL:t,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"}]}}},L=()=>(0,e.jsxs)("div",{className:"min-h-[500vh]",children:[(0,e.jsx)(m.default,{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:t,alt:"fallback background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"fallback background mobile",thumbnailURL:t,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video desktop",thumbnailURL:t,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"background video tablet",thumbnailURL:t,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"background video mobile",thumbnailURL:t,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"}]}}),(0,e.jsx)("div",{className:"bg-gradient-to-b from-gray-900 to-black py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto max-w-4xl px-4",children:[(0,e.jsx)("h2",{className:"mb-8 text-center text-4xl font-bold",children:"IntersectionObserver \u89C6\u9891\u63A7\u5236"}),(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u667A\u80FD\u89C6\u9891\u64AD\u653E"}),(0,e.jsx)("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"})]}),(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),(0,e.jsx)("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"})]})]})]})}),(0,e.jsx)(m.default,{data:{title:"Second Video Banner",subtitle:"This is the second video to test multiple banners with IntersectionObserver.",pcImage:{url:i,alt:"second banner background",thumbnailURL:i,mimeType:"image/jpeg"},mobileImage:{url:i,alt:"second banner mobile",thumbnailURL:i,mimeType:"image/jpeg"},pcVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4",alt:"second video desktop",thumbnailURL:i,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4",alt:"second video tablet",thumbnailURL:i,mimeType:"video/mp4"},mobileVideo:{url:"https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4",alt:"second video mobile",thumbnailURL:i,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"}]}}),(0,e.jsx)("div",{className:"bg-gradient-to-b from-black to-gray-900 py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto max-w-4xl px-4",children:[(0,e.jsx)("h2",{className:"mb-8 text-center text-4xl font-bold",children:"\u591A\u89C6\u9891\u7BA1\u7406"}),(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u72EC\u7ACB\u63A7\u5236"}),(0,e.jsx)("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"})]}),(0,e.jsxs)("div",{className:"rounded-lg bg-gray-800 p-8",children:[(0,e.jsx)("h3",{className:"mb-4 text-2xl font-semibold",children:"\u7528\u6237\u4F53\u9A8C"}),(0,e.jsx)("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"})]})]})]})}),(0,e.jsx)(m.default,{data:{title:"Third Video Experience",subtitle:"Final banner to demonstrate seamless video management across multiple sections.",pcImage:{url:t,alt:"third banner background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:t,alt:"third banner mobile",thumbnailURL:t,mimeType:"image/jpeg"},pcVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video desktop",thumbnailURL:t,mimeType:"video/mp4"},padVideo:{url:"https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4",alt:"third video tablet",thumbnailURL:t,mimeType:"video/mp4"},mobileVideo:{url:"https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4",alt:"third video mobile",thumbnailURL:t,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"}]}}),(0,e.jsx)("div",{className:"bg-black py-20 text-white",children:(0,e.jsxs)("div",{className:"container mx-auto px-4 text-center",children:[(0,e.jsx)("h2",{className:"mb-4 text-3xl font-bold",children:"IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210"}),(0,e.jsx)("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"}),(0,e.jsxs)("div",{className:"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3",children:[(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u667A\u80FD\u64AD\u653E"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C"})]}),(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u4ECE\u5934\u64AD\u653E"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB"})]}),(0,e.jsxs)("div",{className:"rounded border border-gray-700 p-6",children:[(0,e.jsx)("h4",{className:"mb-2 text-lg font-semibold",children:"\u6027\u80FD\u4F18\u5316"}),(0,e.jsx)("p",{className:"text-sm text-gray-400",children:"\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528"})]})]})]})})]});
+//# sourceMappingURL=HeroBanner.stories.js.map

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

@@ -0,0 +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\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": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "ScrollableBackgroundVideo", "WithVideoModal", "WithYoutubeVideo", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "padBackground", "darkBackground"]
+}

package/dist/cjs/stories/InlineVideo.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from '@storybook/react';
+import InlineVideo from '../biz-components/InlineVideo/index.js';
+declare const meta: {
+    title: string;
+    component: typeof InlineVideo;
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        data: {
+            description: string;
+            control: "object";
+        };
+        className: {
+            description: string;
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutSubtitle: Story;
+export declare const WithoutPosters: Story;
+export declare const LongDescription: Story;
+export declare const DarkTheme: Story;
+export declare const LightTheme: Story;
+export declare const CustomStyled: Story;

package/dist/cjs/stories/InlineVideo.stories.js

@@ -0,0 +1,164 @@
+"use strict";var p=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(e,i)=>{for(var o in i)a(e,o,{get:i[o],enumerable:!0})},r=(e,i,o,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of m(i))!b.call(e,t)&&t!==o&&a(e,t,{get:()=>i[t],enumerable:!(n=l(i,t))||n.enumerable});return e};var h=(e,i,o)=>(o=e!=null?p(f(e)):{},r(i||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),g=e=>r(a({},"__esModule",{value:!0}),e);var w={};v(w,{CustomStyled:()=>N,DarkTheme:()=>U,Default:()=>x,LightTheme:()=>V,LongDescription:()=>_,WithoutPosters:()=>k,WithoutSubtitle:()=>S,default:()=>u});module.exports=g(w);var s=require("react/jsx-runtime"),I=require("react"),c=h(require("../biz-components/InlineVideo/index.js"));const y={title:"Biz Components/InlineVideo",component:c.default,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:`
+## InlineVideo - \u5185\u8054\u89C6\u9891\u7EC4\u4EF6
+
+\u7528\u4E8E\u4EA7\u54C1\u529F\u80FD\u5C55\u793A\u7684\u54CD\u5E94\u5F0F\u89C6\u9891\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u64AD\u653E\u548C\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002
+
+### \u6838\u5FC3\u529F\u80FD
+
+- **\u54CD\u5E94\u5F0F\u89C6\u9891\u6E90**: \u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u89C6\u9891\u6E90\u548C\u6D77\u62A5\u56FE
+- **\u81EA\u52A8\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5E76\u5FAA\u73AF\uFF0C\u63D0\u4F9B\u6D41\u7545\u7684\u89C2\u770B\u4F53\u9A8C
+- **\u4E30\u5BCC\u7684\u5185\u5BB9\u5C55\u793A**: \u652F\u6301\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u8BE6\u7EC6\u63CF\u8FF0
+- **\u54CD\u5E94\u5F0F\u5E03\u5C40**: \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u89C6\u9891\u6BD4\u4F8B\u548C\u6587\u672C\u5E03\u5C40
+
+### \u4F7F\u7528\u573A\u666F
+
+- \u4EA7\u54C1\u7279\u6027\u4ECB\u7ECD
+- \u529F\u80FD\u6F14\u793A\u89C6\u9891
+- \u6280\u672F\u4EAE\u70B9\u5C55\u793A
+- \u4F7F\u7528\u6559\u7A0B\u8BF4\u660E
+
+### \u54CD\u5E94\u5F0F\u65AD\u70B9
+
+- **\u79FB\u52A8\u7AEF** (< 768px): 398:400 \u6BD4\u4F8B\uFF0C\u5782\u76F4\u5E03\u5C40
+- **\u5E73\u677F\u7AEF** (\u2265 768px): 3060:1180 \u6BD4\u4F8B\uFF0C\u5C45\u4E2D\u5E03\u5C40
+- **\u684C\u9762\u7AEF** (\u2265 1024px): \u56FA\u5B9A\u9AD8\u5EA6 360px\uFF0C\u5C45\u4E2D\u5BF9\u9F50
+
+### \u6570\u636E\u7ED3\u6784
+
+\`\`\`typescript
+{
+  title: string        // \u4E3B\u6807\u9898\uFF08\u5FC5\u586B\uFF09
+  subtitle?: string    // \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09
+  desc: string         // \u63CF\u8FF0\u6587\u672C\uFF08\u5FC5\u586B\uFF09
+  poster?: string      // \u684C\u9762\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09
+  videoUrl: string     // \u684C\u9762\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09
+  mobPoster?: string   // \u79FB\u52A8\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09
+  mobVideoUrl: string  // \u79FB\u52A8\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09
+  theme?: 'light' | 'dark'  // \u4E3B\u9898\u6A21\u5F0F\uFF08\u53EF\u9009\uFF0C\u9ED8\u8BA4 'light'\uFF09
+}
+\`\`\`
+
+### \u89C6\u9891\u7279\u6027
+
+- **\u9759\u97F3\u64AD\u653E**: \u9ED8\u8BA4\u9759\u97F3\uFF0C\u7B26\u5408\u7528\u6237\u4F53\u9A8C\u6700\u4F73\u5B9E\u8DF5
+- **\u5FAA\u73AF\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u5FAA\u73AF\uFF0C\u6301\u7EED\u5C55\u793A\u4EA7\u54C1\u7279\u6027
+- **\u5185\u8054\u64AD\u653E**: \u4F7F\u7528 \`playsInline\` \u5C5E\u6027\uFF0C\u907F\u514D\u5168\u5C4F\u64AD\u653E
+- **\u5706\u89D2\u8BBE\u8BA1**: 16px \u5706\u89D2\uFF0C\u4E0E\u73B0\u4EE3\u8BBE\u8BA1\u98CE\u683C\u4E00\u81F4
+
+### \u4E3B\u9898\u6A21\u5F0F
+
+\u7EC4\u4EF6\u652F\u6301\u6D45\u8272\u548C\u6DF1\u8272\u4E24\u79CD\u4E3B\u9898\u6A21\u5F0F\uFF1A
+
+- **\u6D45\u8272\u6A21\u5F0F** (\`theme: 'light'\`): \u9ED8\u8BA4\u6A21\u5F0F\uFF0C\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F
+- **\u6DF1\u8272\u6A21\u5F0F** (\`theme: 'dark'\`): \u6DF1\u8272\u6A21\u5F0F\uFF0C\u4F7F\u7528 \`aiui-dark\` \u7C7B\uFF0C\u6587\u672C\u989C\u8272\u81EA\u52A8\u9002\u914D
+
+\u6587\u672C\u989C\u8272\u4F7F\u7528 Tailwind CSS \u7684\u4E3B\u9898\u53D8\u91CF \`text-info-primary\`\uFF0C\u4F1A\u6839\u636E \`.aiui-dark\` \u7C7B\u81EA\u52A8\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\u7684\u989C\u8272\u3002
+
+### \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D
+
+\u7EC4\u4EF6\u5185\u90E8\u5173\u952E\u8282\u70B9\u90FD\u6709\u8BED\u4E49\u5316\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A
+
+| \u7C7B\u540D | \u8BF4\u660E | \u7528\u9014 |
+|------|------|------|
+| \`.inline-video-section\` | \u6839\u5BB9\u5668 | \u6574\u4F53\u5E03\u5C40\u3001\u80CC\u666F\u3001\u95F4\u8DDD |
+| \`.inline-video-content\` | \u5185\u5BB9\u533A\u57DF | \u6587\u672C\u5185\u5BB9\u7684\u5E03\u5C40\u5BB9\u5668 |
+| \`.inline-video-title\` | \u4E3B\u6807\u9898 | \u6807\u9898\u6837\u5F0F\u3001\u5B57\u4F53\u3001\u989C\u8272 |
+| \`.inline-video-subtitle\` | \u526F\u6807\u9898 | \u526F\u6807\u9898\u6837\u5F0F\u3001\u95F4\u8DDD |
+| \`.inline-video-text-wrapper\` | \u6587\u672C\u5305\u88C5\u5668 | \u526F\u6807\u9898\u548C\u63CF\u8FF0\u7684\u5BB9\u5668 |
+| \`.inline-video-description\` | \u63CF\u8FF0\u6587\u672C | \u63CF\u8FF0\u6837\u5F0F\u3001\u884C\u9AD8\u3001\u5BBD\u5EA6 |
+| \`.inline-video-container\` | \u89C6\u9891\u5BB9\u5668 | \u89C6\u9891\u5BBD\u9AD8\u6BD4\u3001\u5706\u89D2 |
+| \`.inline-video-desktop\` | \u684C\u9762\u7AEF\u89C6\u9891 | \u684C\u9762\u7AEF\u89C6\u9891\u6837\u5F0F |
+| \`.inline-video-mobile\` | \u79FB\u52A8\u7AEF\u89C6\u9891 | \u79FB\u52A8\u7AEF\u89C6\u9891\u6837\u5F0F |
+
+### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B
+
+\`\`\`css
+/* \u4FEE\u6539\u6807\u9898\u989C\u8272 */
+.inline-video-title {
+  color: #00d4ff;
+}
+
+/* \u4FEE\u6539\u89C6\u9891\u5BB9\u5668\u5706\u89D2 */
+.inline-video-container {
+}
+
+/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u672C\u6837\u5F0F */
+.inline-video-description {
+  line-height: 1.8;
+  opacity: 0.9;
+}
+
+/* \u6DFB\u52A0\u5BB9\u5668\u80CC\u666F */
+.inline-video-section {
+  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
+  padding: 32px;
+}
+\`\`\`
+        `}}},tags:["autodocs"],argTypes:{data:{description:"\u89C6\u9891\u7EC4\u4EF6\u7684\u6570\u636E\u914D\u7F6E\u5BF9\u8C61",control:"object"},className:{description:"\u81EA\u5B9A\u4E49 CSS \u7C7B\u540D",control:"text"}}};var u=y;const d={title:"DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934",subtitle:"\u521B\u65B0\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1",desc:"DuoSpiral\u2122 \u5237\u5934\u91C7\u7528\u72EC\u7279\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1\uFF0C\u6709\u6548\u9632\u6B62\u6BDB\u53D1\u7F20\u7ED5\uFF0C\u4E3A\u60A8\u63D0\u4F9B\u65E0\u5FE7\u7684\u6E05\u6D01\u4F53\u9A8C\u3002\u5148\u8FDB\u7684\u5DE5\u7A0B\u8BBE\u8BA1\u786E\u4FDD\u6BCF\u6B21\u4F7F\u7528\u90FD\u80FD\u83B7\u5F97\u6700\u4F73\u7684\u6E05\u6D01\u6548\u679C\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"},x={name:"\u9ED8\u8BA4\u793A\u4F8B",args:{data:d},parameters:{docs:{description:{story:"\u5B8C\u6574\u914D\u7F6E\u7684\u89C6\u9891\u7EC4\u4EF6\u793A\u4F8B\uFF0C\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u3001\u63CF\u8FF0\u6587\u672C\u3001\u6D77\u62A5\u56FE\u548C\u89C6\u9891\u6E90\u3002\u5C55\u793A\u4E86\u7EC4\u4EF6\u7684\u6240\u6709\u53EF\u7528\u529F\u80FD\u3002"}}}},S={name:"\u65E0\u526F\u6807\u9898",args:{data:{title:"\u9AD8\u6548\u6E05\u6D01\u6280\u672F",desc:"\u4F53\u9A8C\u6211\u4EEC\u6700\u65B0\u7684\u6E05\u6D01\u521B\u65B0\u6280\u672F\uFF0C\u4E3A\u60A8\u7684\u5BB6\u5C45\u6E05\u6D01\u5E26\u6765\u9769\u547D\u6027\u7684\u6539\u53D8\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u7701\u7565\u526F\u6807\u9898\u7684\u7B80\u5316\u7248\u672C\u3002\u9002\u7528\u4E8E\u5185\u5BB9\u8F83\u5C11\u6216\u5F3A\u8C03\u4E3B\u6807\u9898\u7684\u573A\u666F\uFF0C\u4FDD\u6301\u9875\u9762\u7B80\u6D01\u6E05\u6670\u3002"}}}},k={name:"\u65E0\u6D77\u62A5\u56FE",args:{data:{title:"\u65E0\u6D77\u62A5\u56FE\u7247",subtitle:"\u7EAF\u89C6\u9891\u5C55\u793A",desc:"\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7247\u7684\u89C6\u9891\u5C55\u793A\uFF0C\u76F4\u63A5\u64AD\u653E\u89C6\u9891\u5185\u5BB9\u3002",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7684\u793A\u4F8B\u3002\u89C6\u9891\u4F1A\u76F4\u63A5\u663E\u793A\u7B2C\u4E00\u5E27\u5185\u5BB9\uFF0C\u9002\u7528\u4E8E\u4E0D\u9700\u8981\u81EA\u5B9A\u4E49\u6D77\u62A5\u56FE\u6216\u5E0C\u671B\u5FEB\u901F\u52A0\u8F7D\u7684\u573A\u666F\u3002"}}}},_={name:"\u957F\u63CF\u8FF0\u6587\u672C",args:{data:{title:"\u4EA7\u54C1\u529F\u80FD\u8BE6\u7EC6\u4ECB\u7ECD",subtitle:"\u5168\u9762\u4E86\u89E3\u4EA7\u54C1\u7279\u6027",desc:"\u6211\u4EEC\u7684\u4EA7\u54C1\u91C7\u7528\u6700\u5148\u8FDB\u7684\u6280\u672F\u548C\u6750\u6599\uFF0C\u7ECF\u8FC7\u4E25\u683C\u7684\u8D28\u91CF\u63A7\u5236\u548C\u6D4B\u8BD5\u3002\u6BCF\u4E2A\u7EC6\u8282\u90FD\u7ECF\u8FC7\u7CBE\u5FC3\u8BBE\u8BA1\uFF0C\u786E\u4FDD\u4E3A\u7528\u6237\u63D0\u4F9B\u6700\u4F73\u7684\u4F7F\u7528\u4F53\u9A8C\u3002\u4ECE\u5916\u89C2\u8BBE\u8BA1\u5230\u5185\u90E8\u7ED3\u6784\uFF0C\u4ECE\u529F\u80FD\u5B9E\u73B0\u5230\u7528\u6237\u754C\u9762\uFF0C\u6BCF\u4E00\u4E2A\u73AF\u8282\u90FD\u4F53\u73B0\u4E86\u6211\u4EEC\u5BF9\u54C1\u8D28\u7684\u8FFD\u6C42\u3002\u65E0\u8BBA\u60A8\u662F\u4E13\u4E1A\u7528\u6237\u8FD8\u662F\u666E\u901A\u6D88\u8D39\u8005\uFF0C\u90FD\u80FD\u5728\u6211\u4EEC\u7684\u4EA7\u54C1\u4E2D\u627E\u5230\u6EE1\u8DB3\u60A8\u9700\u6C42\u7684\u529F\u80FD\u548C\u7279\u6027\u3002",poster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",videoUrl:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",mobPoster:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4"}},parameters:{docs:{description:{story:"\u5C55\u793A\u8F83\u957F\u63CF\u8FF0\u6587\u672C\u7684\u6392\u7248\u6548\u679C\u3002\u7EC4\u4EF6\u4F1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u6587\u672C\u5BBD\u5EA6\u548C\u884C\u9AD8\uFF0C\u786E\u4FDD\u957F\u6587\u672C\u7684\u53EF\u8BFB\u6027\u3002\u9002\u7528\u4E8E\u9700\u8981\u8BE6\u7EC6\u8BF4\u660E\u4EA7\u54C1\u529F\u80FD\u6216\u6280\u672F\u7EC6\u8282\u7684\u573A\u666F\u3002"}}}},U={name:"\u6DF1\u8272\u4E3B\u9898",args:{data:{...d,theme:"dark"}},parameters:{backgrounds:{default:"light"},docs:{description:{story:'\u6DF1\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: "dark"` \u542F\u7528\u6DF1\u8272\u6A21\u5F0F\uFF0C\u6587\u672C\u989C\u8272\u4F1A\u81EA\u52A8\u4F7F\u7528\u6DF1\u8272\u4E3B\u9898\u7684\u914D\u8272\u65B9\u6848\u3002\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6DF1\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002'}}}},V={name:"\u6D45\u8272\u4E3B\u9898",args:{data:{...d,theme:"light"}},parameters:{backgrounds:{default:"dark"},docs:{description:{story:'\u6D45\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\uFF08\u9ED8\u8BA4\uFF09\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: "light"` \u6216\u4E0D\u8BBE\u7F6E\u4E3B\u9898\uFF08\u9ED8\u8BA4\u4E3A\u6D45\u8272\uFF09\uFF0C\u6587\u672C\u989C\u8272\u4F7F\u7528\u6D45\u8272\u4E3B\u9898\u914D\u8272\u3002\u9002\u7528\u4E8E\u6DF1\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6D45\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002'}}}},N={name:"\u81EA\u5B9A\u4E49\u6837\u5F0F",args:{data:d,className:"custom-inline-video"},parameters:{docs:{description:{story:`
+\u901A\u8FC7 className \u5C5E\u6027\u548C\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\uFF0C\u53EF\u4EE5\u8F7B\u677E\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002
+
+### \u4F7F\u7528\u65B9\u5F0F
+
+1. **\u901A\u8FC7 className prop**: \u4F20\u5165\u81EA\u5B9A\u4E49\u7C7B\u540D
+2. **\u4F7F\u7528\u5185\u7F6E\u7C7B\u540D**: \u76F4\u63A5\u8986\u76D6\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D
+
+### \u793A\u4F8B\u4EE3\u7801
+
+\`\`\`tsx
+<InlineVideo
+  data={data}
+  className="custom-inline-video"
+/>
+\`\`\`
+
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u6837\u5F0F */
+.custom-inline-video {
+  background: rgba(0, 0, 0, 0.5);
+  padding: 40px;
+  backdrop-filter: blur(10px);
+}
+
+.custom-inline-video .inline-video-title {
+  color: #00d4ff;
+  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+}
+
+.custom-inline-video .inline-video-subtitle {
+  color: #ffd700;
+}
+
+.custom-inline-video .inline-video-container {
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+\`\`\`
+
+\u6B64\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u7EC4\u5408 className prop \u548C\u5185\u7F6E\u7C7B\u540D\u6765\u5B9E\u73B0\u5B8C\u5168\u81EA\u5B9A\u4E49\u7684\u89C6\u89C9\u6548\u679C\u3002
+        `}}},decorators:[e=>(0,s.jsxs)("div",{children:[(0,s.jsx)("style",{children:`
+          .custom-inline-video {
+            background: rgba(0, 0, 0, 0.3);
+            padding: 40px;
+            backdrop-filter: blur(10px);
+          }
+
+          .custom-inline-video .inline-video-title {
+            color: #00d4ff !important;
+            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
+          }
+
+          .custom-inline-video .inline-video-subtitle {
+            color: #ffd700 !important;
+          }
+
+          .custom-inline-video .inline-video-description {
+            opacity: 0.9;
+            line-height: 1.8;
+          }
+
+          .custom-inline-video .inline-video-container {
+            border: 2px solid rgba(255, 255, 255, 0.1);
+                      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+          }
+        `}),(0,s.jsx)(e,{})]})]};
+//# sourceMappingURL=InlineVideo.stories.js.map

package/dist/cjs/stories/InlineVideo.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/InlineVideo.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport InlineVideo from '../biz-components/InlineVideo/index.js'\n\nconst meta = {\n  title: 'Biz Components/InlineVideo',\n  component: InlineVideo,\n  parameters: {\n    layout: 'padded',\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        component: `\n## InlineVideo - \u5185\u8054\u89C6\u9891\u7EC4\u4EF6\n\n\u7528\u4E8E\u4EA7\u54C1\u529F\u80FD\u5C55\u793A\u7684\u54CD\u5E94\u5F0F\u89C6\u9891\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u64AD\u653E\u548C\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n\n### \u6838\u5FC3\u529F\u80FD\n\n- **\u54CD\u5E94\u5F0F\u89C6\u9891\u6E90**: \u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u89C6\u9891\u6E90\u548C\u6D77\u62A5\u56FE\n- **\u81EA\u52A8\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5E76\u5FAA\u73AF\uFF0C\u63D0\u4F9B\u6D41\u7545\u7684\u89C2\u770B\u4F53\u9A8C\n- **\u4E30\u5BCC\u7684\u5185\u5BB9\u5C55\u793A**: \u652F\u6301\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u8BE6\u7EC6\u63CF\u8FF0\n- **\u54CD\u5E94\u5F0F\u5E03\u5C40**: \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u89C6\u9891\u6BD4\u4F8B\u548C\u6587\u672C\u5E03\u5C40\n\n### \u4F7F\u7528\u573A\u666F\n\n- \u4EA7\u54C1\u7279\u6027\u4ECB\u7ECD\n- \u529F\u80FD\u6F14\u793A\u89C6\u9891\n- \u6280\u672F\u4EAE\u70B9\u5C55\u793A\n- \u4F7F\u7528\u6559\u7A0B\u8BF4\u660E\n\n### \u54CD\u5E94\u5F0F\u65AD\u70B9\n\n- **\u79FB\u52A8\u7AEF** (< 768px): 398:400 \u6BD4\u4F8B\uFF0C\u5782\u76F4\u5E03\u5C40\n- **\u5E73\u677F\u7AEF** (\u2265 768px): 3060:1180 \u6BD4\u4F8B\uFF0C\u5C45\u4E2D\u5E03\u5C40\n- **\u684C\u9762\u7AEF** (\u2265 1024px): \u56FA\u5B9A\u9AD8\u5EA6 360px\uFF0C\u5C45\u4E2D\u5BF9\u9F50\n\n### \u6570\u636E\u7ED3\u6784\n\n\\`\\`\\`typescript\n{\n  title: string        // \u4E3B\u6807\u9898\uFF08\u5FC5\u586B\uFF09\n  subtitle?: string    // \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09\n  desc: string         // \u63CF\u8FF0\u6587\u672C\uFF08\u5FC5\u586B\uFF09\n  poster?: string      // \u684C\u9762\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09\n  videoUrl: string     // \u684C\u9762\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09\n  mobPoster?: string   // \u79FB\u52A8\u7AEF\u6D77\u62A5\u56FE\uFF08\u53EF\u9009\uFF09\n  mobVideoUrl: string  // \u79FB\u52A8\u7AEF\u89C6\u9891\u5730\u5740\uFF08\u5FC5\u586B\uFF09\n  theme?: 'light' | 'dark'  // \u4E3B\u9898\u6A21\u5F0F\uFF08\u53EF\u9009\uFF0C\u9ED8\u8BA4 'light'\uFF09\n}\n\\`\\`\\`\n\n### \u89C6\u9891\u7279\u6027\n\n- **\u9759\u97F3\u64AD\u653E**: \u9ED8\u8BA4\u9759\u97F3\uFF0C\u7B26\u5408\u7528\u6237\u4F53\u9A8C\u6700\u4F73\u5B9E\u8DF5\n- **\u5FAA\u73AF\u64AD\u653E**: \u89C6\u9891\u81EA\u52A8\u5FAA\u73AF\uFF0C\u6301\u7EED\u5C55\u793A\u4EA7\u54C1\u7279\u6027\n- **\u5185\u8054\u64AD\u653E**: \u4F7F\u7528 \\`playsInline\\` \u5C5E\u6027\uFF0C\u907F\u514D\u5168\u5C4F\u64AD\u653E\n- **\u5706\u89D2\u8BBE\u8BA1**: 16px \u5706\u89D2\uFF0C\u4E0E\u73B0\u4EE3\u8BBE\u8BA1\u98CE\u683C\u4E00\u81F4\n\n### \u4E3B\u9898\u6A21\u5F0F\n\n\u7EC4\u4EF6\u652F\u6301\u6D45\u8272\u548C\u6DF1\u8272\u4E24\u79CD\u4E3B\u9898\u6A21\u5F0F\uFF1A\n\n- **\u6D45\u8272\u6A21\u5F0F** (\\`theme: 'light'\\`): \u9ED8\u8BA4\u6A21\u5F0F\uFF0C\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\n- **\u6DF1\u8272\u6A21\u5F0F** (\\`theme: 'dark'\\`): \u6DF1\u8272\u6A21\u5F0F\uFF0C\u4F7F\u7528 \\`aiui-dark\\` \u7C7B\uFF0C\u6587\u672C\u989C\u8272\u81EA\u52A8\u9002\u914D\n\n\u6587\u672C\u989C\u8272\u4F7F\u7528 Tailwind CSS \u7684\u4E3B\u9898\u53D8\u91CF \\`text-info-primary\\`\uFF0C\u4F1A\u6839\u636E \\`.aiui-dark\\` \u7C7B\u81EA\u52A8\u5207\u6362\u4E3A\u6DF1\u8272\u6A21\u5F0F\u7684\u989C\u8272\u3002\n\n### \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n\n\u7EC4\u4EF6\u5185\u90E8\u5173\u952E\u8282\u70B9\u90FD\u6709\u8BED\u4E49\u5316\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n\n| \u7C7B\u540D | \u8BF4\u660E | \u7528\u9014 |\n|------|------|------|\n| \\`.inline-video-section\\` | \u6839\u5BB9\u5668 | \u6574\u4F53\u5E03\u5C40\u3001\u80CC\u666F\u3001\u95F4\u8DDD |\n| \\`.inline-video-content\\` | \u5185\u5BB9\u533A\u57DF | \u6587\u672C\u5185\u5BB9\u7684\u5E03\u5C40\u5BB9\u5668 |\n| \\`.inline-video-title\\` | \u4E3B\u6807\u9898 | \u6807\u9898\u6837\u5F0F\u3001\u5B57\u4F53\u3001\u989C\u8272 |\n| \\`.inline-video-subtitle\\` | \u526F\u6807\u9898 | \u526F\u6807\u9898\u6837\u5F0F\u3001\u95F4\u8DDD |\n| \\`.inline-video-text-wrapper\\` | \u6587\u672C\u5305\u88C5\u5668 | \u526F\u6807\u9898\u548C\u63CF\u8FF0\u7684\u5BB9\u5668 |\n| \\`.inline-video-description\\` | \u63CF\u8FF0\u6587\u672C | \u63CF\u8FF0\u6837\u5F0F\u3001\u884C\u9AD8\u3001\u5BBD\u5EA6 |\n| \\`.inline-video-container\\` | \u89C6\u9891\u5BB9\u5668 | \u89C6\u9891\u5BBD\u9AD8\u6BD4\u3001\u5706\u89D2 |\n| \\`.inline-video-desktop\\` | \u684C\u9762\u7AEF\u89C6\u9891 | \u684C\u9762\u7AEF\u89C6\u9891\u6837\u5F0F |\n| \\`.inline-video-mobile\\` | \u79FB\u52A8\u7AEF\u89C6\u9891 | \u79FB\u52A8\u7AEF\u89C6\u9891\u6837\u5F0F |\n\n### \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B\n\n\\`\\`\\`css\n/* \u4FEE\u6539\u6807\u9898\u989C\u8272 */\n.inline-video-title {\n  color: #00d4ff;\n}\n\n/* \u4FEE\u6539\u89C6\u9891\u5BB9\u5668\u5706\u89D2 */\n.inline-video-container {\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u672C\u6837\u5F0F */\n.inline-video-description {\n  line-height: 1.8;\n  opacity: 0.9;\n}\n\n/* \u6DFB\u52A0\u5BB9\u5668\u80CC\u666F */\n.inline-video-section {\n  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);\n  padding: 32px;\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    data: {\n      description: '\u89C6\u9891\u7EC4\u4EF6\u7684\u6570\u636E\u914D\u7F6E\u5BF9\u8C61',\n      control: 'object',\n    },\n    className: {\n      description: '\u81EA\u5B9A\u4E49 CSS \u7C7B\u540D',\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof InlineVideo>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData = {\n  title: 'DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934',\n  subtitle: '\u521B\u65B0\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1',\n  desc: 'DuoSpiral\u2122 \u5237\u5934\u91C7\u7528\u72EC\u7279\u7684\u53CC\u87BA\u65CB\u8BBE\u8BA1\uFF0C\u6709\u6548\u9632\u6B62\u6BDB\u53D1\u7F20\u7ED5\uFF0C\u4E3A\u60A8\u63D0\u4F9B\u65E0\u5FE7\u7684\u6E05\u6D01\u4F53\u9A8C\u3002\u5148\u8FDB\u7684\u5DE5\u7A0B\u8BBE\u8BA1\u786E\u4FDD\u6BCF\u6B21\u4F7F\u7528\u90FD\u80FD\u83B7\u5F97\u6700\u4F73\u7684\u6E05\u6D01\u6548\u679C\u3002',\n  poster:\n    'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n  videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n  mobPoster:\n    'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n  mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n}\n\nexport const Default: Story = {\n  name: '\u9ED8\u8BA4\u793A\u4F8B',\n  args: {\n    data: defaultData,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u5B8C\u6574\u914D\u7F6E\u7684\u89C6\u9891\u7EC4\u4EF6\u793A\u4F8B\uFF0C\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u3001\u63CF\u8FF0\u6587\u672C\u3001\u6D77\u62A5\u56FE\u548C\u89C6\u9891\u6E90\u3002\u5C55\u793A\u4E86\u7EC4\u4EF6\u7684\u6240\u6709\u53EF\u7528\u529F\u80FD\u3002',\n      },\n    },\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  name: '\u65E0\u526F\u6807\u9898',\n  args: {\n    data: {\n      title: '\u9AD8\u6548\u6E05\u6D01\u6280\u672F',\n      desc: '\u4F53\u9A8C\u6211\u4EEC\u6700\u65B0\u7684\u6E05\u6D01\u521B\u65B0\u6280\u672F\uFF0C\u4E3A\u60A8\u7684\u5BB6\u5C45\u6E05\u6D01\u5E26\u6765\u9769\u547D\u6027\u7684\u6539\u53D8\u3002',\n      poster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobPoster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u7701\u7565\u526F\u6807\u9898\u7684\u7B80\u5316\u7248\u672C\u3002\u9002\u7528\u4E8E\u5185\u5BB9\u8F83\u5C11\u6216\u5F3A\u8C03\u4E3B\u6807\u9898\u7684\u573A\u666F\uFF0C\u4FDD\u6301\u9875\u9762\u7B80\u6D01\u6E05\u6670\u3002',\n      },\n    },\n  },\n}\n\nexport const WithoutPosters: Story = {\n  name: '\u65E0\u6D77\u62A5\u56FE',\n  args: {\n    data: {\n      title: '\u65E0\u6D77\u62A5\u56FE\u7247',\n      subtitle: '\u7EAF\u89C6\u9891\u5C55\u793A',\n      desc: '\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7247\u7684\u89C6\u9891\u5C55\u793A\uFF0C\u76F4\u63A5\u64AD\u653E\u89C6\u9891\u5185\u5BB9\u3002',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u4E0D\u4F7F\u7528\u6D77\u62A5\u56FE\u7684\u793A\u4F8B\u3002\u89C6\u9891\u4F1A\u76F4\u63A5\u663E\u793A\u7B2C\u4E00\u5E27\u5185\u5BB9\uFF0C\u9002\u7528\u4E8E\u4E0D\u9700\u8981\u81EA\u5B9A\u4E49\u6D77\u62A5\u56FE\u6216\u5E0C\u671B\u5FEB\u901F\u52A0\u8F7D\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const LongDescription: Story = {\n  name: '\u957F\u63CF\u8FF0\u6587\u672C',\n  args: {\n    data: {\n      title: '\u4EA7\u54C1\u529F\u80FD\u8BE6\u7EC6\u4ECB\u7ECD',\n      subtitle: '\u5168\u9762\u4E86\u89E3\u4EA7\u54C1\u7279\u6027',\n      desc: '\u6211\u4EEC\u7684\u4EA7\u54C1\u91C7\u7528\u6700\u5148\u8FDB\u7684\u6280\u672F\u548C\u6750\u6599\uFF0C\u7ECF\u8FC7\u4E25\u683C\u7684\u8D28\u91CF\u63A7\u5236\u548C\u6D4B\u8BD5\u3002\u6BCF\u4E2A\u7EC6\u8282\u90FD\u7ECF\u8FC7\u7CBE\u5FC3\u8BBE\u8BA1\uFF0C\u786E\u4FDD\u4E3A\u7528\u6237\u63D0\u4F9B\u6700\u4F73\u7684\u4F7F\u7528\u4F53\u9A8C\u3002\u4ECE\u5916\u89C2\u8BBE\u8BA1\u5230\u5185\u90E8\u7ED3\u6784\uFF0C\u4ECE\u529F\u80FD\u5B9E\u73B0\u5230\u7528\u6237\u754C\u9762\uFF0C\u6BCF\u4E00\u4E2A\u73AF\u8282\u90FD\u4F53\u73B0\u4E86\u6211\u4EEC\u5BF9\u54C1\u8D28\u7684\u8FFD\u6C42\u3002\u65E0\u8BBA\u60A8\u662F\u4E13\u4E1A\u7528\u6237\u8FD8\u662F\u666E\u901A\u6D88\u8D39\u8005\uFF0C\u90FD\u80FD\u5728\u6211\u4EEC\u7684\u4EA7\u54C1\u4E2D\u627E\u5230\u6EE1\u8DB3\u60A8\u9700\u6C42\u7684\u529F\u80FD\u548C\u7279\u6027\u3002',\n      poster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n      videoUrl: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n      mobPoster:\n        'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n      mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story:\n          '\u5C55\u793A\u8F83\u957F\u63CF\u8FF0\u6587\u672C\u7684\u6392\u7248\u6548\u679C\u3002\u7EC4\u4EF6\u4F1A\u6839\u636E\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u81EA\u52A8\u8C03\u6574\u6587\u672C\u5BBD\u5EA6\u548C\u884C\u9AD8\uFF0C\u786E\u4FDD\u957F\u6587\u672C\u7684\u53EF\u8BFB\u6027\u3002\u9002\u7528\u4E8E\u9700\u8981\u8BE6\u7EC6\u8BF4\u660E\u4EA7\u54C1\u529F\u80FD\u6216\u6280\u672F\u7EC6\u8282\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  name: '\u6DF1\u8272\u4E3B\u9898',\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'light',\n    },\n    docs: {\n      description: {\n        story:\n          '\u6DF1\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: \"dark\"` \u542F\u7528\u6DF1\u8272\u6A21\u5F0F\uFF0C\u6587\u672C\u989C\u8272\u4F1A\u81EA\u52A8\u4F7F\u7528\u6DF1\u8272\u4E3B\u9898\u7684\u914D\u8272\u65B9\u6848\u3002\u9002\u7528\u4E8E\u6D45\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6DF1\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const LightTheme: Story = {\n  name: '\u6D45\u8272\u4E3B\u9898',\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'light',\n    },\n  },\n  parameters: {\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        story:\n          '\u6D45\u8272\u4E3B\u9898\u6A21\u5F0F\u793A\u4F8B\uFF08\u9ED8\u8BA4\uFF09\u3002\u901A\u8FC7\u8BBE\u7F6E `theme: \"light\"` \u6216\u4E0D\u8BBE\u7F6E\u4E3B\u9898\uFF08\u9ED8\u8BA4\u4E3A\u6D45\u8272\uFF09\uFF0C\u6587\u672C\u989C\u8272\u4F7F\u7528\u6D45\u8272\u4E3B\u9898\u914D\u8272\u3002\u9002\u7528\u4E8E\u6DF1\u8272\u80CC\u666F\u4E0A\u5C55\u793A\u6D45\u8272\u5185\u5BB9\u7684\u573A\u666F\u3002',\n      },\n    },\n  },\n}\n\nexport const CustomStyled: Story = {\n  name: '\u81EA\u5B9A\u4E49\u6837\u5F0F',\n  args: {\n    data: defaultData,\n    className: 'custom-inline-video',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\n\u901A\u8FC7 className \u5C5E\u6027\u548C\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\uFF0C\u53EF\u4EE5\u8F7B\u677E\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\n\n### \u4F7F\u7528\u65B9\u5F0F\n\n1. **\u901A\u8FC7 className prop**: \u4F20\u5165\u81EA\u5B9A\u4E49\u7C7B\u540D\n2. **\u4F7F\u7528\u5185\u7F6E\u7C7B\u540D**: \u76F4\u63A5\u8986\u76D6\u5185\u7F6E\u7684\u8BED\u4E49\u5316\u7C7B\u540D\n\n### \u793A\u4F8B\u4EE3\u7801\n\n\\`\\`\\`tsx\n<InlineVideo\n  data={data}\n  className=\"custom-inline-video\"\n/>\n\\`\\`\\`\n\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u6837\u5F0F */\n.custom-inline-video {\n  background: rgba(0, 0, 0, 0.5);\n  padding: 40px;\n  backdrop-filter: blur(10px);\n}\n\n.custom-inline-video .inline-video-title {\n  color: #00d4ff;\n  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);\n}\n\n.custom-inline-video .inline-video-subtitle {\n  color: #ffd700;\n}\n\n.custom-inline-video .inline-video-container {\n  border: 2px solid rgba(255, 255, 255, 0.1);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n}\n\\`\\`\\`\n\n\u6B64\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u7EC4\u5408 className prop \u548C\u5185\u7F6E\u7C7B\u540D\u6765\u5B9E\u73B0\u5B8C\u5168\u81EA\u5B9A\u4E49\u7684\u89C6\u89C9\u6548\u679C\u3002\n        `,\n      },\n    },\n  },\n  decorators: [\n    Story => (\n      <div>\n        <style>{`\n          .custom-inline-video {\n            background: rgba(0, 0, 0, 0.3);\n            padding: 40px;\n            backdrop-filter: blur(10px);\n          }\n\n          .custom-inline-video .inline-video-title {\n            color: #00d4ff !important;\n            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);\n          }\n\n          .custom-inline-video .inline-video-subtitle {\n            color: #ffd700 !important;\n          }\n\n          .custom-inline-video .inline-video-description {\n            opacity: 0.9;\n            line-height: 1.8;\n          }\n\n          .custom-inline-video .inline-video-container {\n            border: 2px solid rgba(255, 255, 255, 0.1);\n                      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n          }\n        `}</style>\n        <Story />\n      </div>\n    ),\n  ],\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,cAAAC,EAAA,YAAAC,EAAA,eAAAC,EAAA,oBAAAC,EAAA,mBAAAC,EAAA,oBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAV,GAmUM,IAAAW,EAAA,6BAnUNC,EAAkB,iBAElBC,EAAwB,qDAExB,MAAMC,EAAO,CACX,MAAO,6BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,SACR,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAiGb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,YAAa,qEACb,QAAS,QACX,EACA,UAAW,CACT,YAAa,sCACb,QAAS,MACX,CACF,CACF,EAEA,IAAON,EAAQK,EAIf,MAAME,EAAc,CAClB,MAAO,iDACP,SAAU,mDACV,KAAM,qXACN,OACE,8HACF,SAAU,4EACV,UACE,8HACF,YAAa,2EACf,EAEaZ,EAAiB,CAC5B,KAAM,2BACN,KAAM,CACJ,KAAMY,CACR,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,4RACT,CACF,CACF,CACF,EAEaR,EAAyB,CACpC,KAAM,2BACN,KAAM,CACJ,KAAM,CACJ,MAAO,uCACP,KAAM,uLACN,OACE,8HACF,SAAU,4EACV,UACE,8HACF,YAAa,2EACf,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,gOACT,CACF,CACF,CACF,EAEaD,EAAwB,CACnC,KAAM,2BACN,KAAM,CACJ,KAAM,CACJ,MAAO,iCACP,SAAU,iCACV,KAAM,uIACN,SAAU,4EACV,YAAa,2EACf,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,sRACT,CACF,CACF,CACF,EAEaD,EAAyB,CACpC,KAAM,iCACN,KAAM,CACJ,KAAM,CACJ,MAAO,mDACP,SAAU,mDACV,KAAM,mzBACN,OACE,8HACF,SAAU,4EACV,UACE,8HACF,YAAa,2EACf,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MACE,gaACJ,CACF,CACF,CACF,EAEaH,EAAmB,CAC9B,KAAM,2BACN,KAAM,CACJ,KAAM,CACJ,GAAGa,EACH,MAAO,MACT,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,OACX,EACA,KAAM,CACJ,YAAa,CACX,MACE,yWACJ,CACF,CACF,CACF,EAEaX,EAAoB,CAC/B,KAAM,2BACN,KAAM,CACJ,KAAM,CACJ,GAAGW,EACH,MAAO,OACT,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MACE,wYACJ,CACF,CACF,CACF,EAEad,EAAsB,CACjC,KAAM,iCACN,KAAM,CACJ,KAAMc,EACN,UAAW,qBACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SA0CT,CACF,CACF,EACA,WAAY,CACVC,MACE,QAAC,OACC,oBAAC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAyBN,KACF,OAACA,EAAA,EAAM,GACT,CAEJ,CACF",
+  "names": ["InlineVideo_stories_exports", "__export", "CustomStyled", "DarkTheme", "Default", "LightTheme", "LongDescription", "WithoutPosters", "WithoutSubtitle", "InlineVideo_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_InlineVideo", "meta", "InlineVideo", "defaultData", "Story"]
+}

package/dist/cjs/stories/MarqueeReview.stories.d.ts

@@ -0,0 +1,72 @@
+import type { StoryObj } from '@storybook/react';
+/**
+ * MarqueeReview 组件用于展示垂直滚动的用户评论轮播。
+ *
+ * ## 功能特性
+ * - 垂直无限滚动动画
+ * - 支持多列布局(响应式)
+ * - 星级评分显示
+ * - 用户头像展示
+ * - 渐变边缘遮罩效果
+ *
+ * ## 使用场景
+ * - 产品评价展示
+ * - 用户证言
+ * - 客户反馈墙
+ */
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("../biz-components/index.js").MarqueeReviewProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    } & import("react").RefAttributes<any>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        data: {
+            description: string;
+            control: {
+                type: "object";
+            };
+        };
+        className: {
+            description: string;
+            control: {
+                type: "text";
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * 默认状态 - 展示完整的评论轮播效果
+ */
+export declare const Default: Story;
+/**
+ * 中文内容 - 展示中文评论
+ */
+export declare const Chinese: Story;
+/**
+ * 少量评论 - 当评论数量不足时,组件会自动复制填充
+ */
+export declare const FewReviews: Story;
+/**
+ * 不同评分 - 展示不同星级评分
+ */
+export declare const MixedRatings: Story;
+/**
+ * 自定义样式 - 使用自定义 className
+ */
+export declare const CustomStyle: Story;
+/**
+ * 长评论内容 - 测试长文本的显示效果
+ */
+export declare const LongComments: Story;