npm - @anker-in/headless-ui - Versions diffs - 1.1.13 → 1.1.14 - Mend

@anker-in/headless-ui 1.1.13 → 1.1.14

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

Files changed (347) hide show

package/dist/cjs/components/text.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/text.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('text-pretty tracking-[-0.02em]', {\n  variants: {\n    size: {\n      none: 'tracking',\n      1: 'text-[12px] leading-[140%]',\n      2: 'text-[14px] leading-[140%]',\n      3: 'text-[16px] leading-[140%]',\n      4: 'text-[18px] leading-[140%]',\n    },\n    weight: {\n      medium: 'font-medium',\n      semibold: 'font-semibold',\n      bold: 'font-bold',\n      extraBold: 'font-extrabold',\n      black: 'font-black',\n    },\n    align: {\n      left: 'text-left',\n      center: 'text-center',\n      right: 'text-right',\n    },\n  },\n  defaultVariants: {\n    size: 'none',\n    weight: 'bold',\n  },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n  as?: 'div' | 'label' | 'p' | 'span'\n  asChild?: boolean\n  color?: string\n  /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n  html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n  const {\n    children,\n    size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n    weight,\n    align,\n    className,\n    asChild,\n    as: Tag = 'span',\n    color,\n    html,\n    ...textProps\n  } = props\n\n  const htmlContentProps = html\n    ? {\n        dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n      }\n    : null\n\n  const styleProps = color\n    ? {\n        style: {\n          color,\n        },\n      }\n    : null\n\n  return (\n    <Slot\n      {...textProps}\n      ref={forwardedRef}\n      className={cn(\n        textVariants({\n          size,\n          weight: size === 'none' ? (weight ?? 'medium') : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n          align,\n        }),\n        className\n      )}\n      {...htmlContentProps}\n      {...styleProps}\n    >\n      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n    </Slot>\n  )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GA+F4B,IAAAI,EAAA,6BA/F5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,iCAAkC,CACzD,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAkBKR,EAAOG,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTF,EAAa,CACX,KAAAI,EACA,OAAQA,IAAS,OAAUC,GAAU,SAAYA,EACjD,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDX,EAAK,YAAc",
+  "sourcesContent": ["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\nimport { cn } from '../helpers/index.js'\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js'\n\nconst textVariants = cva('text-pretty tracking-[-0.02em]', {\n  variants: {\n    size: {\n      none: 'tracking',\n      1: 'text-[12px] leading-[140%]',\n      2: 'text-[14px] leading-[140%]',\n      3: 'text-[16px] leading-[140%]',\n      4: 'text-[18px] leading-[140%]',\n    },\n    weight: {\n      medium: 'font-medium',\n      semibold: 'font-semibold',\n      bold: 'font-bold',\n      extraBold: 'font-extrabold',\n      black: 'font-black',\n    },\n    align: {\n      left: 'text-left',\n      center: 'text-center',\n      right: 'text-right',\n    },\n  },\n  defaultVariants: {\n    size: 'none',\n    weight: 'bold',\n  },\n})\n\ntype TextElement = React.ElementRef<'span'>\ntype TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>\ntype TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>\ntype TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>\ntype TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>\n\ninterface CommonTextProps extends VariantProps<typeof textVariants> {\n  as?: 'div' | 'label' | 'p' | 'span'\n  asChild?: boolean\n  color?: string\n  /** \u76F8\u5F53\u4E8E dangerouslySetInnerHTML */\n  html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\ntype TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps)\n\n/**\n * Text - \u6587\u672C\n *\n * @description \u7528\u4E8E\u663E\u793A\u6587\u672C\u5185\u5BB9\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u591A\u79CD\u5C3A\u5BF8\u3001\u5B57\u91CD\u3001\u5BF9\u9F50\u65B9\u5F0F\u548CHTML\u5185\u5BB9\n */\nconst Text = React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {\n  const {\n    children,\n    size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n    weight,\n    align,\n    className,\n    asChild,\n    as: Tag = 'span',\n    color,\n    html,\n    ...textProps\n  } = props\n\n  const htmlContentProps = html\n    ? {\n        dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n      }\n    : null\n\n  const styleProps = color\n    ? {\n        style: {\n          color,\n        },\n      }\n    : null\n\n  return (\n    <Slot\n      {...textProps}\n      ref={forwardedRef}\n      className={cn(\n        textVariants({\n          size,\n          weight: size === 'none' ? (weight ?? 'medium') : weight, // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A medium\n          align,\n        }),\n        className\n      )}\n      {...htmlContentProps}\n      {...styleProps}\n    >\n      {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n    </Slot>\n  )\n})\nText.displayName = 'Text'\n\nexport { Text }\nexport type { TextProps }\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GAoG4B,IAAAI,EAAA,6BApG5BC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAqC,6CAErCC,EAAmB,+BAGnB,MAAMC,KAAe,OAAI,iCAAkC,CACzD,SAAU,CACR,KAAM,CACJ,KAAM,WACN,EAAG,6BACH,EAAG,6BACH,EAAG,6BACH,EAAG,4BACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAuBKR,EAAOG,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CACJ,SAAAC,EACA,KAAAC,EAAO,OACP,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,OACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KAEJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTF,EAAa,CACX,KAAAI,EACA,OAAQA,IAAS,OAAUC,GAAU,SAAYA,EACjD,MAAAC,CACF,CAAC,EACDC,CACF,EACC,GAAGM,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EACDX,EAAK,YAAc",
   "names": ["text_exports", "__export", "Text", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_class_variance_authority", "import_html", "import_helpers", "textVariants", "props", "forwardedRef", "children", "size", "weight", "align", "className", "asChild", "Tag", "color", "html", "textProps", "htmlContentProps", "styleProps"]
 }

package/dist/cjs/components/theme.d.ts CHANGED Viewed

@@ -4,9 +4,10 @@ interface ThemeProps {
     children: React.ReactNode;
 }
 /**
- * @deprecated
- * @param param
- * @returns
+ * Theme - 主题配置
+ *
+ * @description 全局主题配置组件，用于设置品牌主题样式
+ * @deprecated 已作废，不推荐使用，直接导入 design token 或者 覆盖css 变量 进行主题定制
  */
 declare const Theme: ({ brand, children }: ThemeProps) => import("react/jsx-runtime").JSX.Element;
 export default Theme;

package/dist/cjs/components/theme.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/theme.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\n\ninterface ThemeProps {\n  brand: string\n  children: React.ReactNode\n}\n/**\n * @deprecated\n * @param param\n * @returns\n */\nconst Theme = ({ brand, children }: ThemeProps) => {\n  React.useLayoutEffect(() => {\n    document.querySelector('html')?.setAttribute('data-brand-theme', brand)\n  }, [])\n  return <>{children}</>\n}\n\nexport default Theme\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgBS,IAAAI,EAAA,6BAfTC,EAAuB,oBAWvB,MAAMC,EAAQ,CAAC,CAAE,MAAAC,EAAO,SAAAC,CAAS,KAC/BH,EAAM,gBAAgB,IAAM,CAC1B,SAAS,cAAc,MAAM,GAAG,aAAa,mBAAoBE,CAAK,CACxE,EAAG,CAAC,CAAC,KACE,mBAAG,SAAAC,EAAS,GAGrB,IAAON,EAAQI",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\n\ninterface ThemeProps {\n  brand: string\n  children: React.ReactNode\n}\n/**\n * Theme - \u4E3B\u9898\u914D\u7F6E\n *\n * @description \u5168\u5C40\u4E3B\u9898\u914D\u7F6E\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u8BBE\u7F6E\u54C1\u724C\u4E3B\u9898\u6837\u5F0F\n * @deprecated \u5DF2\u4F5C\u5E9F\uFF0C\u4E0D\u63A8\u8350\u4F7F\u7528\uFF0C\u76F4\u63A5\u5BFC\u5165 design token \u6216\u8005 \u8986\u76D6css \u53D8\u91CF \u8FDB\u884C\u4E3B\u9898\u5B9A\u5236\n */\nconst Theme = ({ brand, children }: ThemeProps) => {\n  React.useLayoutEffect(() => {\n    document.querySelector('html')?.setAttribute('data-brand-theme', brand)\n  }, [])\n  return <>{children}</>\n}\n\nexport default Theme\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiBS,IAAAI,EAAA,6BAhBTC,EAAuB,oBAYvB,MAAMC,EAAQ,CAAC,CAAE,MAAAC,EAAO,SAAAC,CAAS,KAC/BH,EAAM,gBAAgB,IAAM,CAC1B,SAAS,cAAc,MAAM,GAAG,aAAa,mBAAoBE,CAAK,CACxE,EAAG,CAAC,CAAC,KACE,mBAAG,SAAAC,EAAS,GAGrB,IAAON,EAAQI",
   "names": ["theme_exports", "__export", "theme_default", "__toCommonJS", "import_jsx_runtime", "React", "Theme", "brand", "children"]
 }

package/dist/cjs/cpn-components/CpnNavigation/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var I=(o,e)=>{for(var n in e)m(o,n,{get:e[n],enumerable:!0})},H=(o,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of E(e))!N.call(o,a)&&a!==n&&m(o,a,{get:()=>e[a],enumerable:!(c=y(e,a))||c.enumerable});return o};var R=o=>H(m({},"__esModule",{value:!0}),o);var S={};I(S,{default:()=>L});module.exports=R(S);var f=require("react/jsx-runtime"),i=require("react"),v=require("../../helpers/utils.js"),g=require("lodash");const k=o=>{const{lists:e,styles:n,cns:c,offset:a=0,clickHandler:u}=o,[x,d]=(0,i.useState)(0),h=(0,i.useRef)(null),C=t=>{t.scrollIntoView({behavior:"smooth",inline:"center"})},w=(t,l,r)=>{d(l);const s=r.target;C(s),t.anchor&&document.querySelector(`#${t.anchor}`)?.scrollIntoView({behavior:"smooth"}),r.preventDefault(),u&&u(t,l,r)};return(0,i.useEffect)(()=>{const t=(0,g.debounce)(()=>{const r=[];e?.forEach(p=>{const b=document.querySelector(`#${p.anchor}`);b&&r.push(b.getBoundingClientRect().top)});const s=r.findIndex(p=>p>l+a);d(s===-1?r.length-1:s===0?0:s-1)},100),l=h.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",t),()=>{window.removeEventListener("scroll",t)}},[e,a]),(0,f.jsx)("div",{id:"nav",className:(0,v.cn)("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",c?.container),style:{"--bgColor":n?.bgColor||"#C6F1FF","--color":n?.color||"#333","--activeColor":n?.activeColor||"#000"},children:(0,f.jsx)("div",{className:(0,v.cn)("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",c?.box),ref:h,children:e?.map((t,l)=>(0,f.jsx)("a",{href:`#${t.anchor}`,className:(0,v.cn)("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",c?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${c?.activeItem}`]:x===l}),onClick:r=>w(t,l,r),children:t.label},t.label))})})};var L=k;
+"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var I=(o,e)=>{for(var n in e)m(o,n,{get:e[n],enumerable:!0})},H=(o,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of E(e))!N.call(o,a)&&a!==n&&m(o,a,{get:()=>e[a],enumerable:!(c=y(e,a))||c.enumerable});return o};var R=o=>H(m({},"__esModule",{value:!0}),o);var S={};I(S,{default:()=>L});module.exports=R(S);var f=require("react/jsx-runtime"),i=require("react"),v=require("../../helpers/utils.js"),g=require("es-toolkit");const k=o=>{const{lists:e,styles:n,cns:c,offset:a=0,clickHandler:u}=o,[x,d]=(0,i.useState)(0),h=(0,i.useRef)(null),C=t=>{t.scrollIntoView({behavior:"smooth",inline:"center"})},w=(t,l,r)=>{d(l);const s=r.target;C(s),t.anchor&&document.querySelector(`#${t.anchor}`)?.scrollIntoView({behavior:"smooth"}),r.preventDefault(),u&&u(t,l,r)};return(0,i.useEffect)(()=>{const t=(0,g.debounce)(()=>{const r=[];e?.forEach(p=>{const b=document.querySelector(`#${p.anchor}`);b&&r.push(b.getBoundingClientRect().top)});const s=r.findIndex(p=>p>l+a);d(s===-1?r.length-1:s===0?0:s-1)},100),l=h.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",t),()=>{window.removeEventListener("scroll",t)}},[e,a]),(0,f.jsx)("div",{id:"nav",className:(0,v.cn)("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",c?.container),style:{"--bgColor":n?.bgColor||"#C6F1FF","--color":n?.color||"#333","--activeColor":n?.activeColor||"#000"},children:(0,f.jsx)("div",{className:(0,v.cn)("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",c?.box),ref:h,children:e?.map((t,l)=>(0,f.jsx)("a",{href:`#${t.anchor}`,className:(0,v.cn)("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",c?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${c?.activeItem}`]:x===l}),onClick:r=>w(t,l,r),children:t.label},t.label))})})};var L=k;
 //# sourceMappingURL=index.js.map

package/dist/cjs/cpn-components/CpnNavigation/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/cpn-components/CpnNavigation/index.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport { debounce } from 'lodash'\n\nconst CpnNavigation = (props: NavigationProps) => {\n  const { lists, styles, cns, offset = 0, clickHandler } = props\n  const [activeIndex, setActiveIndex] = useState(0)\n  const navBox = useRef<HTMLDivElement>(null)\n\n  const scrollIntoView = (ele: HTMLElement) => {\n    ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n\n  const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n    setActiveIndex(index)\n    const ele = e.target as HTMLAnchorElement\n    scrollIntoView(ele)\n    if (nav.anchor) {\n      document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n    }\n    e.preventDefault()\n    clickHandler && clickHandler(nav, index, e as React.MouseEvent<HTMLAnchorElement>)\n  }\n\n  useEffect(() => {\n    const scrollHandler = debounce(() => {\n      const sectionTops: number[] = []\n      lists?.forEach(nav => {\n        const section = document.querySelector(`#${nav.anchor}`)\n        if (section) {\n          sectionTops.push(section.getBoundingClientRect().top)\n        }\n      })\n      const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n      setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n    }, 100)\n    const navHeight = navBox.current?.getBoundingClientRect().height || 0\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [lists, offset])\n\n  return (\n    <div\n      id=\"nav\"\n      className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n      style={\n        {\n          '--bgColor': styles?.bgColor || '#C6F1FF',\n          '--color': styles?.color || '#333',\n          '--activeColor': styles?.activeColor || '#000',\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n          'tablet:gap-[80px] tablet:justify-center',\n          cns?.box\n        )}\n        ref={navBox}\n      >\n        {lists?.map((nav, index) => {\n          return (\n            <a\n              key={nav.label}\n              href={`#${nav.anchor}`}\n              className={cn(\n                'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n                cns?.item,\n                {\n                  [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n                    activeIndex === index,\n                }\n              )}\n              onClick={e => handleNavItemClick(nav, index, e)}\n            >\n              {nav.label}\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default CpnNavigation\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkEY,IAAAI,EAAA,6BAlEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAyB,kBAEzB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,EAAG,aAAAC,CAAa,EAAIL,EACnD,CAACM,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,EACjBT,GAAgBA,EAAaO,EAAKC,EAAOC,CAAwC,CACnF,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,YAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/Bf,GAAO,QAAQW,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EACjFG,EAAeM,IAAU,GAAKG,EAAY,OAAS,EAAIH,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAM,EAAYX,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACd,EAAOG,CAAM,CAAC,KAGhB,OAAC,OACC,GAAG,MACH,aAAW,MAAG,iEAAkED,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,mBAAC,OACC,aAAW,MACT,iIACA,0CACAC,GAAK,GACP,EACA,IAAKK,EAEJ,SAAAP,GAAO,IAAI,CAACW,EAAKC,OAEd,OAAC,KAEC,KAAM,IAAID,EAAI,MAAM,GACpB,aAAW,MACT,yJACAT,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOG,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOnB,EAAQM",
-  "names": ["CpnNavigation_exports", "__export", "CpnNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_lodash", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "clickHandler", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "sectionTops", "section", "sectionTop", "navHeight"]
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst CpnNavigation = (props: NavigationProps) => {\n  const { lists, styles, cns, offset = 0, clickHandler } = props\n  const [activeIndex, setActiveIndex] = useState(0)\n  const navBox = useRef<HTMLDivElement>(null)\n\n  const scrollIntoView = (ele: HTMLElement) => {\n    ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n\n  const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n    setActiveIndex(index)\n    const ele = e.target as HTMLAnchorElement\n    scrollIntoView(ele)\n    if (nav.anchor) {\n      document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n    }\n    e.preventDefault()\n    clickHandler && clickHandler(nav, index, e as React.MouseEvent<HTMLAnchorElement>)\n  }\n\n  useEffect(() => {\n    const scrollHandler = debounce(() => {\n      const sectionTops: number[] = []\n      lists?.forEach(nav => {\n        const section = document.querySelector(`#${nav.anchor}`)\n        if (section) {\n          sectionTops.push(section.getBoundingClientRect().top)\n        }\n      })\n      const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n      setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n    }, 100)\n    const navHeight = navBox.current?.getBoundingClientRect().height || 0\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [lists, offset])\n\n  return (\n    <div\n      id=\"nav\"\n      className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n      style={\n        {\n          '--bgColor': styles?.bgColor || '#C6F1FF',\n          '--color': styles?.color || '#333',\n          '--activeColor': styles?.activeColor || '#000',\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n          'tablet:gap-[80px] tablet:justify-center',\n          cns?.box\n        )}\n        ref={navBox}\n      >\n        {lists?.map((nav, index) => {\n          return (\n            <a\n              key={nav.label}\n              href={`#${nav.anchor}`}\n              className={cn(\n                'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n                cns?.item,\n                {\n                  [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n                    activeIndex === index,\n                }\n              )}\n              onClick={e => handleNavItemClick(nav, index, e)}\n            >\n              {nav.label}\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default CpnNavigation\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkEY,IAAAI,EAAA,6BAlEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAyB,sBAEzB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,EAAG,aAAAC,CAAa,EAAIL,EACnD,CAACM,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,EACjBT,GAAgBA,EAAaO,EAAKC,EAAOC,CAAwC,CACnF,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,YAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/Bf,GAAO,QAAQW,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EACjFG,EAAeM,IAAU,GAAKG,EAAY,OAAS,EAAIH,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAM,EAAYX,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACd,EAAOG,CAAM,CAAC,KAGhB,OAAC,OACC,GAAG,MACH,aAAW,MAAG,iEAAkED,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,mBAAC,OACC,aAAW,MACT,iIACA,0CACAC,GAAK,GACP,EACA,IAAKK,EAEJ,SAAAP,GAAO,IAAI,CAACW,EAAKC,OAEd,OAAC,KAEC,KAAM,IAAID,EAAI,MAAM,GACpB,aAAW,MACT,yJACAT,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOG,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOnB,EAAQM",
+  "names": ["CpnNavigation_exports", "__export", "CpnNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_es_toolkit", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "clickHandler", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "sectionTops", "section", "sectionTop", "navHeight"]
 }

package/dist/cjs/helpers/ScrollLoadVideo.d.ts CHANGED Viewed

@@ -1,15 +1,16 @@
-declare const ScrollLoadVideo: ({ src, poster, alt, className, videoWrapperClassName, videoClassName, autoplay, muted, loop, controls, playsInline, videoRef, ...attr }: {
+import React from 'react';
+interface ScrollLoadVideoProps {
     src: string;
     poster?: string;
-    alt?: string;
     className?: string;
-    videoWrapperClassName?: string;
     videoClassName?: string;
     autoplay?: boolean;
     muted?: boolean;
     loop?: boolean;
     controls?: boolean;
     playsInline?: boolean;
+    videoRef?: React.RefObject<HTMLVideoElement>;
     [key: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}
+declare const ScrollLoadVideo: ({ src, poster, className, videoClassName, autoplay, muted, loop, controls, playsInline, videoRef, ...attr }: ScrollLoadVideoProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollLoadVideo;

package/dist/cjs/helpers/ScrollLoadVideo.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var L=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var j=(t,r)=>{for(var d in r)L(t,d,{get:r[d],enumerable:!0})},C=(t,r,d,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of M(r))!T.call(t,i)&&i!==d&&L(t,i,{get:()=>r[i],enumerable:!(u=H(r,i))||u.enumerable});return t};var D=t=>C(L({},"__esModule",{value:!0}),t);var R={};j(R,{default:()=>P});module.exports=D(R);var a=require("react/jsx-runtime"),o=require("react"),s=require("../helpers/utils.js"),E=require("lodash");const y=new Set,F=({src:t,poster:r,alt:d="Scroll Loaded Video",className:u="",videoWrapperClassName:i="",videoClassName:b="",autoplay:h=!1,muted:N=!0,loop:z=!0,controls:S=!1,playsInline:k=!0,videoRef:f=null,...I})=>{const[m,w]=(0,o.useState)(!1),[n,v]=(0,o.useState)(!1),g=(0,o.useRef)(null),p=(0,o.useRef)(null),l=(0,o.useRef)("");(0,o.useEffect)(()=>{y.has(t)&&(w(!0),v(!0),l.current=t)},[t]),(0,o.useEffect)(()=>{if(n&&m){const e=f?.current||p.current;e&&(e.muted=!0,e.play().catch(c=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",c)}))}},[n,m,f]);const V=(0,o.useCallback)(()=>{const e=t;if(!e||l.current===e&&n)return;if(y.has(e)){v(!0),l.current=e;return}l.current=e;const c=document.createElement("video");c.preload="metadata",c.onloadedmetadata=()=>{v(!0),y.add(e)},c.src=e},[n,t]);(0,o.useEffect)(()=>{if(!g.current||n)return;const e=(0,E.debounce)(()=>{if(window.scrollY>10)return w(!0),V(),window.removeEventListener("scroll",e)},100);return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[V,n]);const U=(0,o.useCallback)(()=>{v(!0),l.current&&y.add(l.current);const e=f?.current||p.current;e&&(e.muted=!0,e.play())},[]);return(0,a.jsxs)("div",{ref:g,className:(0,s.cn)("relative size-full",u),children:[r&&(0,a.jsx)("div",{className:(0,s.cn)("absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out",i,{"opacity-100":!n,"overflow-visible opacity-0":n}),children:(0,a.jsx)("img",{src:r,alt:d,style:{width:"100%",height:"100%",objectFit:"cover"},className:(0,s.cn)(b),loading:"lazy"})}),(0,a.jsx)("div",{className:(0,s.cn)("size-full transition-opacity duration-500 ease-in-out",{"opacity-100":n,"opacity-0":!n}),style:{visibility:m?"visible":"hidden"},children:m&&(0,a.jsx)("div",{className:(0,s.cn)("relative size-full",i),children:(0,a.jsx)("video",{ref:f||p,src:l.current||t,poster:r,className:(0,s.cn)("size-full object-cover",b),onLoadedMetadata:U,autoPlay:h,muted:N,loop:z,controls:S,playsInline:k,...I},l.current)})})]})};var P=F;
+"use strict";var u=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var N=(o,e)=>{for(var n in e)u(o,n,{get:e[n],enumerable:!0})},T=(o,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of w(e))!M.call(o,r)&&r!==n&&u(o,r,{get:()=>e[r],enumerable:!(l=S(e,r))||l.enumerable});return o};var k=o=>T(u({},"__esModule",{value:!0}),o);var O={};N(O,{default:()=>z});module.exports=k(O);var f=require("react/jsx-runtime"),t=require("react"),d=require("../helpers/utils.js");const H=({src:o,poster:e,className:n="",videoClassName:l="",autoplay:r=!0,muted:b=!0,loop:v=!0,controls:y=!1,playsInline:L=!0,videoRef:R,...g})=>{const[i,V]=(0,t.useState)(!1),h=(0,t.useRef)(null),p=(0,t.useRef)(null),s=R||h;return(0,t.useEffect)(()=>{const m=new IntersectionObserver(E=>{E.forEach(I=>{if(I.isIntersecting){if(i||V(!0),s.current){const c=s.current;c.muted=!0,c.currentTime=0,c.play().catch(P=>{console.warn("\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:",P)})}}else s.current&&s.current.pause()})},{threshold:.1,rootMargin:"50px"}),a=p.current;return a&&m.observe(a),()=>{a&&m.unobserve(a)}},[s,i]),(0,f.jsx)("div",{ref:p,className:(0,d.cn)("relative size-full",n),children:(0,f.jsx)("video",{ref:s,src:i?o:void 0,poster:e,className:(0,d.cn)("size-full object-cover",l),loop:v,muted:b,controls:y,playsInline:L,preload:"metadata",disablePictureInPicture:!0,"webkit-playsinline":!0,autoPlay:r,...g})})};var z=H;
 //# sourceMappingURL=ScrollLoadVideo.js.map

package/dist/cjs/helpers/ScrollLoadVideo.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/ScrollLoadVideo.tsx"],
-  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'lodash'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u5185\u90E8\u89C6\u9891\u5F15\u7528\uFF0C\u5982\u679C\u5916\u90E8\u6CA1\u6709\u4F20\u5165 videoRef\n  const internalVideoRef = useRef<HTMLVideoElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u5F53\u89C6\u9891\u5DF2\u52A0\u8F7D\u4E14\u5DF2\u5F00\u59CB\u52A0\u8F7D\u65F6\uFF0C\u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n  useEffect(() => {\n    if (isVideoLoaded && isVideoStartLoad) {\n      const videoElement = videoRef?.current || internalVideoRef.current\n      if (videoElement) {\n        // \u786E\u4FDD\u9759\u97F3\u4EE5\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\n        videoElement.muted = true\n        // \u5C1D\u8BD5\u64AD\u653E\u89C6\u9891\n        videoElement.play().catch((error: unknown) => {\n          console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n        })\n      }\n    }\n  }, [isVideoLoaded, isVideoStartLoad, videoRef])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n    const videoElement = videoRef?.current || internalVideoRef.current\n    if (videoElement) {\n      videoElement.muted = true\n      videoElement.play()\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n            loading=\"lazy\"\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef || internalVideoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
-  "mappings": "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",
-  "names": ["ScrollLoadVideo_exports", "__export", "ScrollLoadVideo_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_lodash", "globalLoadedVideoUrls", "ScrollLoadVideo", "src", "poster", "alt", "className", "videoWrapperClassName", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "isVideoStartLoad", "setIsVideoStartLoad", "isVideoLoaded", "setIsVideoLoaded", "ref", "internalVideoRef", "currentVideoUrl", "videoElement", "error", "preloadVideo", "videoUrl", "scrollHandler", "handleVideoLoad"]
+  "sourcesContent": ["import React, { useRef, useEffect, useState } from 'react'\nimport { cn } from '../helpers/utils.js'\n\ninterface ScrollLoadVideoProps {\n  src: string\n  poster?: string\n  className?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  videoRef?: React.RefObject<HTMLVideoElement>\n  [key: string]: any\n}\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  className = '',\n  videoClassName = '',\n  autoplay = true,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef,\n  ...attr\n}: ScrollLoadVideoProps) => {\n  const [shouldLoad, setShouldLoad] = useState(false)\n  const internalVideoRef = useRef<HTMLVideoElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n\n  const currentVideoRef = videoRef || internalVideoRef\n\n  // IntersectionObserver \u771F\u6B63\u7684\u61D2\u52A0\u8F7D + \u89C6\u7A97\u64AD\u653E\u63A7\u5236\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            // \u7B2C\u4E00\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u89C6\u9891\n            if (!shouldLoad) {\n              setShouldLoad(true)\n            }\n\n            // \u5982\u679C\u5141\u8BB8\u81EA\u52A8\u64AD\u653E\u4E14\u89C6\u9891\u5DF2\u52A0\u8F7D\n            if (currentVideoRef.current) {\n              const video = currentVideoRef.current\n              video.muted = true\n              video.currentTime = 0 // \u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u65F6\u4ECE\u5934\u64AD\u653E\n              video.play().catch((error: unknown) => {\n                console.warn('\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u5931\u8D25:', error)\n              })\n            }\n          } else if (currentVideoRef.current) {\n            // \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u89C6\u9891\n            currentVideoRef.current.pause()\n          }\n        })\n      },\n      {\n        threshold: 0.1, // \u5F53 10% \u7684\u5143\u7D20\u8FDB\u5165\u89C6\u7A97\u65F6\u89E6\u53D1\n        rootMargin: '50px', // \u63D0\u524D 50px \u89E6\u53D1\n      }\n    )\n\n    const currentElement = containerRef.current\n    if (currentElement) {\n      observer.observe(currentElement)\n    }\n\n    return () => {\n      if (currentElement) {\n        observer.unobserve(currentElement)\n      }\n    }\n  }, [currentVideoRef, shouldLoad])\n\n  return (\n    <div ref={containerRef} className={cn('relative size-full', className)}>\n      {/* \u89C6\u9891 */}\n      <video\n        ref={currentVideoRef}\n        src={shouldLoad ? src : undefined} // \u53EA\u6709\u5728\u9700\u8981\u65F6\u624D\u8BBE\u7F6E src\n        poster={poster}\n        className={cn('size-full object-cover', videoClassName)}\n        loop={loop}\n        muted={muted}\n        controls={controls}\n        playsInline={playsInline}\n        preload=\"metadata\" // \u5B8C\u5168\u4E0D\u9884\u52A0\u8F7D\n        disablePictureInPicture\n        webkit-playsinline\n        autoPlay={autoplay}\n        {...attr}\n      />\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmFM,IAAAI,EAAA,6BAnFNC,EAAmD,iBACnDC,EAAmB,+BAgBnB,MAAMC,EAAkB,CAAC,CACvB,IAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,eAAAC,EAAiB,GACjB,SAAAC,EAAW,GACX,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,SAAAC,EAAW,GACX,YAAAC,EAAc,GACd,SAAAC,EACA,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAS,EAAK,EAC5CC,KAAmB,UAAyB,IAAI,EAChDC,KAAe,UAAuB,IAAI,EAE1CC,EAAkBN,GAAYI,EAGpC,sBAAU,IAAM,CACd,MAAMG,EAAW,IAAI,qBACnBC,GAAW,CACTA,EAAQ,QAAQC,GAAS,CACvB,GAAIA,EAAM,gBAOR,GALKP,GACHC,EAAc,EAAI,EAIhBG,EAAgB,QAAS,CAC3B,MAAMI,EAAQJ,EAAgB,QAC9BI,EAAM,MAAQ,GACdA,EAAM,YAAc,EACpBA,EAAM,KAAK,EAAE,MAAOC,GAAmB,CACrC,QAAQ,KAAK,oDAAaA,CAAK,CACjC,CAAC,CACH,OACSL,EAAgB,SAEzBA,EAAgB,QAAQ,MAAM,CAElC,CAAC,CACH,EACA,CACE,UAAW,GACX,WAAY,MACd,CACF,EAEMM,EAAiBP,EAAa,QACpC,OAAIO,GACFL,EAAS,QAAQK,CAAc,EAG1B,IAAM,CACPA,GACFL,EAAS,UAAUK,CAAc,CAErC,CACF,EAAG,CAACN,EAAiBJ,CAAU,CAAC,KAG9B,OAAC,OAAI,IAAKG,EAAc,aAAW,MAAG,qBAAsBZ,CAAS,EAEnE,mBAAC,SACC,IAAKa,EACL,IAAKJ,EAAaX,EAAM,OACxB,OAAQC,EACR,aAAW,MAAG,yBAA0BE,CAAc,EACtD,KAAMG,EACN,MAAOD,EACP,SAAUE,EACV,YAAaC,EACb,QAAQ,WACR,wBAAuB,GACvB,qBAAkB,GAClB,SAAUJ,EACT,GAAGM,EACN,EACF,CAEJ,EAEA,IAAOhB,EAAQK",
+  "names": ["ScrollLoadVideo_exports", "__export", "ScrollLoadVideo_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "ScrollLoadVideo", "src", "poster", "className", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "shouldLoad", "setShouldLoad", "internalVideoRef", "containerRef", "currentVideoRef", "observer", "entries", "entry", "video", "error", "currentElement"]
 }

package/dist/cjs/shared/Styles.js CHANGED Viewed

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

package/dist/cjs/shared/Styles.js.map CHANGED Viewed

@@ -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/gird.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"],
+  "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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,cAAAC,EAAA,eAAAC,IAAA,eAAAC,EAAAL,GAwDS,IAAAM,EAAA,6BAxDTC,EAA+B,oBAC/BC,EAA2B,2BAC3BC,EAA8B,qCAC9BC,EAA+B,iCAC/BC,EAA0B,sCAE1B,MAAMC,EAA4C,CAChD,GAAI,yBACJ,GAAI,yBACJ,EAAG,yBACH,EAAG,yBACH,EAAG,uBACL,EAuBMC,EAAeC,GAA+B,CAClD,MAAMC,KAAY,EAAAC,SAAkBF,CAAK,EACzC,MAAO,YAAS,cAAWC,CAAS,CAAC,EACvC,EAKab,EAAqDY,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,QAGF,OAAC,SAAM,yBAAwB,GAAC,gBAAeD,EAAM,mBAAUA,CAAG,MAAMD,CAAK,KAAK,EAO9Ed,EAAY,CAACkB,EAAkCC,IAA+B,CACzF,MAAMJ,KAAM,WAAQ,IAAMG,GAAY,KAAOR,EAAY,CAAE,GAAGQ,EAAY,KAAAC,CAAK,CAAC,EAAG,CAACA,EAAMD,CAAU,CAAC,EAE/FE,KAAiB,WAAQ,OAAM,OAACH,EAAA,CAAQ,GAAGC,EAAY,IAAKH,EAAK,EAAI,CAACG,EAAYH,CAAG,CAAC,EAE5F,MAAO,CACL,UAAW,SAASA,CAAG,IACvB,eAAAK,EACA,IAAAL,CACF,CACF,EAEMM,EAAyBV,GAAkD,CAC/E,KAAM,CAAE,YAAAW,EAAa,WAAAC,CAAW,EAAIZ,GAAO,WAAa,CAAC,EACzD,MAAO,GAAGY,EAAa,GAAGd,EAAkBc,CAAU,CAAC,GAAK,EAAE,IAC5DD,EACI,GAAGb,EAAkBa,CAAW,EAC7B,MAAM,GAAG,EACT,IAAIE,GAAQ,UAAUA,CAAI,EAAE,EAC5B,KAAK,GAAG,CAAC,GACZ,EACN,EACF,EAOO,SAASvB,EACdwB,EACAC,EACA,CACA,MAAMzB,EAAa,EAAA0B,QAAM,WAIvB,CAAChB,EAAOiB,IAAQ,CAChB,MAAMC,EAAkB,CACtB,GAAGH,EACH,GAAG3B,EAAeY,CAAK,CACzB,EAEM,CAAE,UAAAmB,EAAW,eAAAV,CAAe,EAAIpB,EAAU6B,EAAkBlB,GAAe,IAAI,EAE/EoB,EAAwBpB,MAE1B,OAAC,aAAU,UAAW,GAAGmB,CAAS,IAAKnB,GAAe,SAAS,GAC7D,mBAAC,QAAK,UAAU,iBACd,mBAAC,YAAS,UAAWU,EAAsBV,CAAK,EAC9C,mBAACc,EAAA,CAAkB,GAAId,EAAwB,IAAKiB,EAAK,EAC3D,EACF,EACF,EAIEI,EAA2BrB,MAE7B,OAACc,EAAA,CACE,GAAId,EACL,UAAW,GAAGmB,CAAS,IAAKnB,GAAe,SAAS,GACpD,IAAKiB,EACP,EAIJ,SACE,oBACG,UAAAR,EACA,QAAQ,QAAST,GAAe,WAAa,CAAC,CAAC,GAAG,OAAS,EACxDoB,EAAqBpB,CAAK,EAC1BqB,EAAwBrB,CAAK,GACnC,CAEJ,CAAC,EAGD,OAAAV,EAAW,YAAcwB,EAAiB,aAAeA,EAAiB,MAAQ,YAC3ExB,CACT",
-  "names": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withLayout", "__toCommonJS", "import_jsx_runtime", "import_react", "import_simpleHash", "import_getKeyPropsString", "import_gird", "import_container", "colContentClasses", "generateUID", "props", "keyString", "getKeyPropsString", "style", "uid", "disabled", "Styles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "item", "WrappedComponent", "defaultLayoutProps", "React", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
+  "names": ["Styles_exports", "__export", "getStylesProps", "useStyles", "withLayout", "__toCommonJS", "import_jsx_runtime", "import_react", "import_simpleHash", "import_getKeyPropsString", "import_grid", "import_container", "colContentClasses", "generateUID", "props", "keyString", "getKeyPropsString", "style", "uid", "disabled", "Styles", "styleProps", "data", "StyleComponent", "getContainerClassName", "desktopSpan", "mobileSpan", "item", "WrappedComponent", "defaultLayoutProps", "React", "ref", "finalStyleProps", "className", "WithContainerWrapper", "WithoutContainerWrapper"]
 }

package/dist/cjs/stories/HeroBanner.stories.d.ts CHANGED Viewed

@@ -23,5 +23,6 @@ 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 WithPadImage: Story;
-export declare const WithPlayButton: 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 CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var c=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var b=(e,a)=>{for(var o in a)n(e,o,{get:a[o],enumerable:!0})},p=(e,a,o,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of d(a))!f.call(e,r)&&r!==o&&n(e,r,{get:()=>a[r],enumerable:!(s=h(a,r))||s.enumerable});return e};var y=(e,a,o)=>(o=e!=null?c(k(e)):{},p(a||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),P=e=>p(n({},"__esModule",{value:!0}),e);var L={};b(L,{DarkTheme:()=>g,LightTheme:()=>u,MultiBanner:()=>B,WithPadImage:()=>S,WithPlayButton:()=>W,WithoutSecondaryButton:()=>w,default:()=>A});module.exports=P(L);var i=require("react/jsx-runtime"),N=require("react"),m=y(require("../biz-components/HeroBanner/HeroBanner.js"));const x={title:"Biz-Components/HeroBanner",component:m.default,parameters:{layout:"fullscreen",docs:{description:{component:`
+"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
@@ -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 A=x;const t="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",D="https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206",l="https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899",u={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"}'}}},g={args:{data:{title:"Power Your Life",subtitle:"Experience the next generation of charging technology with our innovative solutions designed for modern life.",pcImage:{url:l,alt:"dark background",thumbnailURL:l,mimeType:"image/jpeg"},mobileImage:{url:l,alt:"dark background",thumbnailURL:l,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=()=>(0,i.jsxs)("div",{className:"flex flex-col",children:[(0,i.jsx)(m.default,{data:{...u.args.data,size:"sm"}}),(0,i.jsx)(m.default,{data:{...g.args.data,size:"sm"}})]}),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)"}]}}},S={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:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",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)"}]}}},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:"https://placehold.co/1920x930?text=1920x930",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},padImage:{url:"https://placehold.co/768x660?text=768x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},mobileImage:{url:"https://placehold.co/390x660?text=390x660",alt:"default background",thumbnailURL:t,mimeType:"image/jpeg"},theme:"light",playVideoButton:{text:"Shop Now"},videoConfig:{videoUrl:"https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4",setVideoUrl:e=>{console.log("setVideoUrl",e)}},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)"}]}}};
+        `}}},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 CHANGED Viewed

@@ -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' }} />\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 WithPadImage: 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: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\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 WithPlayButton: 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: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      playVideoButton: {\n        text: 'Shop Now',\n      },\n      videoConfig: {\n        videoUrl: 'https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4',\n        setVideoUrl: (v: string) => {\n          console.log('setVideoUrl', v)\n        },\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"],
-  "mappings": "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",
-  "names": ["HeroBanner_stories_exports", "__export", "DarkTheme", "LightTheme", "MultiBanner", "WithPadImage", "WithPlayButton", "WithoutSecondaryButton", "HeroBanner_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_HeroBanner", "meta", "HeroBanner", "defaultBackground", "padBackground", "darkBackground", "v"]
+  "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/container.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var n=(t,a)=>{for(var r in a)p(t,r,{get:a[r],enumerable:!0})},c=(t,a,r,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of i(a))!m.call(t,s)&&s!==r&&p(t,s,{get:()=>a[s],enumerable:!(d=l(a,s))||d.enumerable});return t};var g=t=>c(p({},"__esModule",{value:!0}),t);var v={};n(v,{Basic:()=>N,NestedContent:()=>h,ResponsivePadding:()=>y,WithPaddingAndBackground:()=>u,default:()=>b});module.exports=g(v);var e=require("react/jsx-runtime"),C=require("react"),o=require("../components/index.js"),S=require("../helpers/utils.js");const x={title:"Layout/Container",component:o.Container,parameters:{layout:"fullscreen",docs:{description:{component:`
+"use strict";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var n=(t,a)=>{for(var r in a)p(t,r,{get:a[r],enumerable:!0})},c=(t,a,r,d)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of i(a))!m.call(t,s)&&s!==r&&p(t,s,{get:()=>a[s],enumerable:!(d=l(a,s))||d.enumerable});return t};var g=t=>c(p({},"__esModule",{value:!0}),t);var v={};n(v,{Basic:()=>N,NestedContent:()=>h,ResponsivePadding:()=>y,WithPaddingAndBackground:()=>u,default:()=>b});module.exports=g(v);var e=require("react/jsx-runtime"),C=require("react"),o=require("../components/index.js");const x={title:"Layout/Container",component:o.Container,parameters:{layout:"fullscreen",docs:{description:{component:`
 Container \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002
 ### \u5B9E\u73B0\u7EC6\u8282

package/dist/cjs/stories/container.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/container.stories.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Container } from '../components/index.js'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { cn } from '../helpers/utils.js'\n\nconst meta = {\n  title: 'Layout/Container',\n  component: Container,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nContainer \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- \u57FA\u4E8E Tailwind CSS \u5B9E\u73B0\n- \u9ED8\u8BA4\u6700\u5927\u5BBD\u5EA6\u4E3A 1664px\n- \u54CD\u5E94\u5F0F\u8FB9\u8DDD\u8BBE\u8BA1\uFF1A\n  - \u9ED8\u8BA4: \u5DE6\u53F3\u8FB9\u8DDD 16px (mx-4)\n  - tablet: \u5DE6\u53F3\u8FB9\u8DDD 32px (mx-8)\n  - laptop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - desktop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - lg-desktop: \u5DE6\u53F3\u8FB9\u8DDD 128px (mx-32)\n\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Container>\n\nexport default meta\n\ntype Story = StoryObj<typeof Container>\n\n// \u57FA\u7840\u793A\u4F8B\nexport const Basic = () => (\n  <Container className=\"p-4\">\n    <div className=\"rounded-lg bg-blue-100 p-4 text-center\">\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6</div>\n  </Container>\n)\n\n// \u5E26\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\nexport const WithPaddingAndBackground = () => (\n  <Container className=\"bg-gray-50 p-4\">\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 1</h3>\n        <p className=\"text-gray-600\">\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B</p>\n      </div>\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 2</h3>\n        <p className=\"text-gray-600\">\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F</p>\n      </div>\n    </div>\n  </Container>\n)\n\n// \u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD\nexport const ResponsivePadding = () => (\n  <Container className=\"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4\">\n    <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n      <h3 className=\"text-lg font-medium\">\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD</h3>\n      <p className=\"text-gray-600\">\n        \u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A\n        <br />\n        \u9ED8\u8BA4: px-4 (16px)\n        <br />\n        tablet: px-6 (24px)\n        <br />\n        laptop: px-8 (32px)\n      </p>\n    </div>\n  </Container>\n)\n\n// \u5D4C\u5957\u5185\u5BB9\u793A\u4F8B\nexport const NestedContent = () => (\n  <Container className=\"p-4\">\n    <header className=\"rounded-t-lg bg-gray-800 p-4 text-white\">\n      <h2 className=\"text-xl\">\u9875\u9762\u6807\u9898</h2>\n    </header>\n    <main className=\"border-x border-gray-200 bg-white p-4\">\n      <p className=\"mb-4 text-gray-600\">\u4E3B\u8981\u5185\u5BB9\u533A\u57DF</p>\n      <div className=\"laptop:grid-cols-2 grid grid-cols-1 gap-4\">\n        <div className=\"rounded bg-blue-50 p-4\">\u5185\u5BB9\u5757 1</div>\n        <div className=\"rounded bg-purple-50 p-4\">\u5185\u5BB9\u5757 2</div>\n      </div>\n    </main>\n    <footer className=\"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4\">\n      <p className=\"text-sm text-gray-500\">\u9875\u811A\u5185\u5BB9</p>\n    </footer>\n  </Container>\n)\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,6BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAuCI,IAAAQ,EAAA,6BAvCJC,EAAkB,iBAClBC,EAA0B,kCAE1BC,EAAmB,+BAEnB,MAAMC,EAAO,CACX,MAAO,mBACP,UAAW,YACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAcb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQM,EAKR,MAAMV,EAAQ,OACnB,OAAC,aAAU,UAAU,MACnB,mBAAC,OAAI,UAAU,yCAAyC,mGAAiB,EAC3E,EAIWG,EAA2B,OACtC,OAAC,aAAU,UAAU,iBACnB,oBAAC,OAAI,UAAU,YACb,qBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,gGAAc,GAC7C,KACA,QAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,kEAAS,GACxC,GACF,EACF,EAIWD,EAAoB,OAC/B,OAAC,aAAU,UAAU,yEACnB,oBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,gDAAM,KAC1C,QAAC,KAAE,UAAU,gBAAgB,4HAE3B,OAAC,OAAG,EAAE,+BAEN,OAAC,OAAG,EAAE,yBAEN,OAAC,OAAG,EAAE,uBAER,GACF,EACF,EAIWD,EAAgB,OAC3B,QAAC,aAAU,UAAU,MACnB,oBAAC,UAAO,UAAU,0CAChB,mBAAC,MAAG,UAAU,UAAU,oCAAI,EAC9B,KACA,QAAC,QAAK,UAAU,wCACd,oBAAC,KAAE,UAAU,qBAAqB,gDAAM,KACxC,QAAC,OAAI,UAAU,4CACb,oBAAC,OAAI,UAAU,yBAAyB,gCAAK,KAC7C,OAAC,OAAI,UAAU,2BAA2B,gCAAK,GACjD,GACF,KACA,OAAC,UAAO,UAAU,iEAChB,mBAAC,KAAE,UAAU,wBAAwB,oCAAI,EAC3C,GACF",
-  "names": ["container_stories_exports", "__export", "Basic", "NestedContent", "ResponsivePadding", "WithPaddingAndBackground", "container_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "meta"]
+  "sourcesContent": ["import React from 'react'\nimport { Container } from '../components/index.js'\nimport type { Meta, StoryObj } from '@storybook/react'\n\nconst meta = {\n  title: 'Layout/Container',\n  component: Container,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nContainer \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- \u57FA\u4E8E Tailwind CSS \u5B9E\u73B0\n- \u9ED8\u8BA4\u6700\u5927\u5BBD\u5EA6\u4E3A 1664px\n- \u54CD\u5E94\u5F0F\u8FB9\u8DDD\u8BBE\u8BA1\uFF1A\n  - \u9ED8\u8BA4: \u5DE6\u53F3\u8FB9\u8DDD 16px (mx-4)\n  - tablet: \u5DE6\u53F3\u8FB9\u8DDD 32px (mx-8)\n  - laptop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - desktop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - lg-desktop: \u5DE6\u53F3\u8FB9\u8DDD 128px (mx-32)\n\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Container>\n\nexport default meta\n\ntype Story = StoryObj<typeof Container>\n\n// \u57FA\u7840\u793A\u4F8B\nexport const Basic = () => (\n  <Container className=\"p-4\">\n    <div className=\"rounded-lg bg-blue-100 p-4 text-center\">\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6</div>\n  </Container>\n)\n\n// \u5E26\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\nexport const WithPaddingAndBackground = () => (\n  <Container className=\"bg-gray-50 p-4\">\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 1</h3>\n        <p className=\"text-gray-600\">\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B</p>\n      </div>\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 2</h3>\n        <p className=\"text-gray-600\">\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F</p>\n      </div>\n    </div>\n  </Container>\n)\n\n// \u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD\nexport const ResponsivePadding = () => (\n  <Container className=\"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4\">\n    <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n      <h3 className=\"text-lg font-medium\">\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD</h3>\n      <p className=\"text-gray-600\">\n        \u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A\n        <br />\n        \u9ED8\u8BA4: px-4 (16px)\n        <br />\n        tablet: px-6 (24px)\n        <br />\n        laptop: px-8 (32px)\n      </p>\n    </div>\n  </Container>\n)\n\n// \u5D4C\u5957\u5185\u5BB9\u793A\u4F8B\nexport const NestedContent = () => (\n  <Container className=\"p-4\">\n    <header className=\"rounded-t-lg bg-gray-800 p-4 text-white\">\n      <h2 className=\"text-xl\">\u9875\u9762\u6807\u9898</h2>\n    </header>\n    <main className=\"border-x border-gray-200 bg-white p-4\">\n      <p className=\"mb-4 text-gray-600\">\u4E3B\u8981\u5185\u5BB9\u533A\u57DF</p>\n      <div className=\"laptop:grid-cols-2 grid grid-cols-1 gap-4\">\n        <div className=\"rounded bg-blue-50 p-4\">\u5185\u5BB9\u5757 1</div>\n        <div className=\"rounded bg-purple-50 p-4\">\u5185\u5BB9\u5757 2</div>\n      </div>\n    </main>\n    <footer className=\"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4\">\n      <p className=\"text-sm text-gray-500\">\u9875\u811A\u5185\u5BB9</p>\n    </footer>\n  </Container>\n)\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,WAAAE,EAAA,kBAAAC,EAAA,sBAAAC,EAAA,6BAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAsCI,IAAAQ,EAAA,6BAtCJC,EAAkB,iBAClBC,EAA0B,kCAG1B,MAAMC,EAAO,CACX,MAAO,mBACP,UAAW,YACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAcb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAKR,MAAMT,EAAQ,OACnB,OAAC,aAAU,UAAU,MACnB,mBAAC,OAAI,UAAU,yCAAyC,mGAAiB,EAC3E,EAIWG,EAA2B,OACtC,OAAC,aAAU,UAAU,iBACnB,oBAAC,OAAI,UAAU,YACb,qBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,gGAAc,GAC7C,KACA,QAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,sCAAM,KAC1C,OAAC,KAAE,UAAU,gBAAgB,kEAAS,GACxC,GACF,EACF,EAIWD,EAAoB,OAC/B,OAAC,aAAU,UAAU,yEACnB,oBAAC,OAAI,UAAU,oCACb,oBAAC,MAAG,UAAU,sBAAsB,gDAAM,KAC1C,QAAC,KAAE,UAAU,gBAAgB,4HAE3B,OAAC,OAAG,EAAE,+BAEN,OAAC,OAAG,EAAE,yBAEN,OAAC,OAAG,EAAE,uBAER,GACF,EACF,EAIWD,EAAgB,OAC3B,QAAC,aAAU,UAAU,MACnB,oBAAC,UAAO,UAAU,0CAChB,mBAAC,MAAG,UAAU,UAAU,oCAAI,EAC9B,KACA,QAAC,QAAK,UAAU,wCACd,oBAAC,KAAE,UAAU,qBAAqB,gDAAM,KACxC,QAAC,OAAI,UAAU,4CACb,oBAAC,OAAI,UAAU,yBAAyB,gCAAK,KAC7C,OAAC,OAAI,UAAU,2BAA2B,gCAAK,GACjD,GACF,KACA,OAAC,UAAO,UAAU,iEAChB,mBAAC,KAAE,UAAU,wBAAwB,oCAAI,EAC3C,GACF",
+  "names": ["container_stories_exports", "__export", "Basic", "NestedContent", "ResponsivePadding", "WithPaddingAndBackground", "container_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "meta"]
 }

package/dist/cjs/stories/faq.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/faq.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport type { ComponentType } from 'react'\nimport Faq from '../biz-components/Faq/Faq.js'\nimport type { FaqProps } from '../biz-components/Faq/types.js'\n\nconst meta = {\n  title: 'Biz Components/Faq',\n  component: Faq,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: 'Faq \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u5E38\u89C1\u95EE\u9898',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Faq>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst listData: FaqProps['data']['productData'] = [\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image1',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title:\n      'F1: Was muss ich tun, wenn ich ein Solarladeger\u00E4t zum Aufladen der tragbaren Anker 767 Powerstation verwende?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image2',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F2: Wie sollte ich die Powerstation lagern und warten?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image3',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F3: Was muss ich bei der Nutzung der Anker App beachten?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image4',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F4: Kann die Powerstation mein Elektroauto aufladen?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image5',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title:\n      'F5: Kann ich die tragbare Anker 767 Powerstation gleichzeitig mit Wechselstrom und Gleichstrom aufgeladen werden?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      productData: listData,\n    },\n  },\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAEA,IAAAK,EAAgB,2CAGhB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,kEACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIf,MAAME,EAA4C,CAChD,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,mHACF,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,yDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,2DACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,uDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,oHACF,KAAM,2PACR,CACF,EAEaN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,YAAaM,CACf,CACF,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Faq from '../biz-components/Faq/Faq.js'\nimport type { FaqProps } from '../biz-components/Faq/types.js'\n\nconst meta = {\n  title: 'Biz Components/Faq',\n  component: Faq,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: 'Faq \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u5E38\u89C1\u95EE\u9898',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Faq>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst listData: FaqProps['data']['productData'] = [\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image1',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title:\n      'F1: Was muss ich tun, wenn ich ein Solarladeger\u00E4t zum Aufladen der tragbaren Anker 767 Powerstation verwende?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image2',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F2: Wie sollte ich die Powerstation lagern und warten?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image3',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F3: Was muss ich bei der Nutzung der Anker App beachten?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image4',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title: 'F4: Kann die Powerstation mein Elektroauto aufladen?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n  {\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      alt: 'Image5',\n      thumbnailURL:\n        'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/92a36c4d-f432-4e1b-b22f-01229d03a2b2_ae_e__c_a.png?v=1753410632',\n      mimeType: 'image/png',\n    },\n    title:\n      'F5: Kann ich die tragbare Anker 767 Powerstation gleichzeitig mit Wechselstrom und Gleichstrom aufgeladen werden?',\n    desc: 'The soundcoreCredits Rewards program allows customers to earn soundcoreCredits on soundcore.com (excluding third-party retailers like Amazon, eBay, Walmart, etc.) that can be redeemed for rewards and member benefits as a thank-you for their loyalty.',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      productData: listData,\n    },\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GACA,IAAAK,EAAgB,2CAGhB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,kEACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAIf,MAAME,EAA4C,CAChD,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,mHACF,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,yDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,2DACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MAAO,uDACP,KAAM,2PACR,EACA,CACE,IAAK,CACH,IAAK,yHACL,IAAK,SACL,aACE,yHACF,SAAU,WACZ,EACA,MACE,oHACF,KAAM,2PACR,CACF,EAEaN,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,YAAaM,CACf,CACF,CACF",
   "names": ["faq_stories_exports", "__export", "Default", "faq_stories_default", "__toCommonJS", "import_Faq", "meta", "Faq", "listData"]
 }

package/dist/cjs/stories/graphic.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var p=Object.create;var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},n=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of d(e))!h.call(t,s)&&s!==o&&r(t,s,{get:()=>e[s],enumerable:!(a=m(e,s))||a.enumerable});return t};var y=(t,e,o)=>(o=t!=null?p(f(t)):{},n(e||!t||!t.__esModule?r(o,"default",{value:t,enumerable:!0}):o,t)),u=t=>n(r({},"__esModule",{value:!0}),t);var F={};g(F,{Default:()=>b,Round:()=>w,default:()=>v});module.exports=u(F);var i=require("react/jsx-runtime"),l=y(require("../biz-components/Graphic/index.js")),I=require("gsap"),S=require("@gsap/react"),B=require("gsap/dist/ScrollTrigger"),T=require("gsap/dist/SplitText");const x={title:"Biz-Components/Graphic",component:l.default,parameters:{layout:"fullscreen",docs:{description:{component:"\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/"}}},decorators:[t=>(0,i.jsx)("div",{style:{paddingTop:"2em"},children:(0,i.jsx)(t,{})})],tags:["autodocs"]};var v=x;const c=[{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",buttonText:"learn More",theme:"light",extension:{text:"Al Detection 1",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 2",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",theme:"light",buttonText:"learn More",extension:{text:"Al Detection 3",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 4",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}}],b={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c}}},w={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c,itemShape:"round"}}};
+"use strict";var p=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var s in e)r(t,s,{get:e[s],enumerable:!0})},a=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!h.call(t,o)&&o!==s&&r(t,o,{get:()=>e[o],enumerable:!(n=d(e,o))||n.enumerable});return t};var g=(t,e,s)=>(s=t!=null?p(f(t)):{},a(e||!t||!t.__esModule?r(s,"default",{value:t,enumerable:!0}):s,t)),u=t=>a(r({},"__esModule",{value:!0}),t);var F={};y(F,{Default:()=>b,Round:()=>w,default:()=>v});module.exports=u(F);var i=require("react/jsx-runtime"),l=g(require("../biz-components/Graphic/index.js"));const x={title:"Biz-Components/Graphic",component:l.default,parameters:{layout:"fullscreen",docs:{description:{component:"\u56FE\u6587\u5C55\u793A\u6A21\u5757\uFF0C\u57FA\u4E8Eembla-carousel-react\uFF0Chttps://www.embla-carousel.com/get-started/react/"}}},decorators:[t=>(0,i.jsx)("div",{style:{paddingTop:"2em"},children:(0,i.jsx)(t,{})})],tags:["autodocs"]};var v=x;const c=[{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",buttonText:"learn More",theme:"light",extension:{text:"Al Detection 1",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 2",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772030.png?v=1745724316",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Sign Up for Special Offers Up to 20% Off",theme:"light",buttonText:"learn More",extension:{text:"Al Detection 3",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}},{imgUrl:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_1973772047.png?v=1745724318",alt:"imgUrlPc"},title:"<span>Welcome Offer</span><br>Same Great Quality at Even Better Prices",textColor:"#FFF",theme:"dark",buttonText:"learn More",extension:{text:"Al Detection 4",textDesc:"BionicMind detects, recognizes, determines, acts,and learns. It knows who's at the door, knows if they canbe trusted, and acts accordingly, all with virtually no errors at up to 99.9% accuracy.",textTitle:"Advanced BionicMind AI ",textPcImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"},textMobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121236640.png?v=1754016442"}}}],b={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c}}},w={args:{data:{title:"Explore Anker\u2019s Top Products By<br>Category",items:c,itemShape:"round"}}};
 //# sourceMappingURL=graphic.stories.js.map