@anker-in/headless-ui 1.1.16-beta.3 → 1.1.17-alpha-1765978730

package/dist/cjs/biz-components/StockShelf/index.js

@@ -0,0 +1,2 @@
+"use strict";"use client";var n=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var l in e)c(t,l,{get:e[l],enumerable:!0})},r=(t,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of m(e))!d.call(t,s)&&s!==l&&c(t,s,{get:()=>e[s],enumerable:!(i=p(e,s))||i.enumerable});return t};var k=(t,e,l)=>(l=t!=null?n(S(t)):{},r(e||!t||!t.__esModule?c(l,"default",{value:t,enumerable:!0}):l,t)),x=t=>r(c({},"__esModule",{value:!0}),t);var b={};h(b,{default:()=>N});module.exports=x(b);var o=require("react/jsx-runtime"),v=k(require("react")),f=require("../../helpers/index.js");const a=v.forwardRef(({className:t,data:e,...l},i)=>(0,o.jsxs)("div",{ref:i,className:(0,f.cn)("w-full",t),...l,children:[e.title&&(0,o.jsx)("h2",{className:"mb-4 text-2xl font-bold",children:e.title}),e.description&&(0,o.jsx)("p",{className:"mb-6 text-gray-600",children:e.description}),(0,o.jsx)("div",{className:"stock-shelf-content",children:(0,o.jsx)("p",{className:"text-gray-500",children:"\u5E93\u5B58\u8D27\u67B6\u4E1A\u52A1\u5185\u5BB9\u533A\u57DF"})})]}));a.displayName="StockShelf";var N=a;
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/StockShelf/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/StockShelf/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\n\n/**\n * StockShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface StockShelfData {\n  /** \u7EC4\u4EF6\u6807\u9898 */\n  title?: string\n  /** \u7EC4\u4EF6\u63CF\u8FF0 */\n  description?: string\n}\n\nexport interface StockShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: StockShelfData\n}\n\n/**\n * StockShelf - \u5E93\u5B58\u8D27\u67B6\n *\n * @description \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6\n */\nconst StockShelf = React.forwardRef<HTMLDivElement, StockShelfProps>(({ className, data, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn('w-full', className)} {...props}>\n      {data.title && <h2 className=\"mb-4 text-2xl font-bold\">{data.title}</h2>}\n      {data.description && <p className=\"mb-6 text-gray-600\">{data.description}</p>}\n\n      {/* \u5E93\u5B58\u8D27\u67B6\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n      <div className=\"stock-shelf-content\">\n        <p className=\"text-gray-500\">\u5E93\u5B58\u8D27\u67B6\u4E1A\u52A1\u5185\u5BB9\u533A\u57DF</p>\n      </div>\n    </div>\n  )\n})\n\nStockShelf.displayName = 'StockShelf'\nexport default StockShelf\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BI,IAAAI,EAAA,6BAzBJC,EAAuB,oBACvBC,EAAmB,kCAsBnB,MAAMC,EAAaF,EAAM,WAA4C,CAAC,CAAE,UAAAG,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,OAEjG,QAAC,OAAI,IAAKA,EAAK,aAAW,MAAG,SAAUH,CAAS,EAAI,GAAGE,EACpD,UAAAD,EAAK,UAAS,OAAC,MAAG,UAAU,0BAA2B,SAAAA,EAAK,MAAM,EAClEA,EAAK,gBAAe,OAAC,KAAE,UAAU,qBAAsB,SAAAA,EAAK,YAAY,KAGzE,OAAC,OAAI,UAAU,sBACb,mBAAC,KAAE,UAAU,gBAAgB,wEAAU,EACzC,GACF,CAEH,EAEDF,EAAW,YAAc,aACzB,IAAOL,EAAQK",
+  "names": ["StockShelf_exports", "__export", "StockShelf_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "StockShelf", "className", "data", "props", "ref"]
+}

package/dist/cjs/biz-components/index.d.ts

@@ -55,6 +55,11 @@ export { default as GiftBox } from './GiftBox/index.js';
 export { default as SelectStore } from './SelectStore/index.js';
 export { default as DownLoad } from './DownLoad/index.js';
 export { default as FootCharger } from './FootCharger/index.js';
+export { default as AnchorNavigation } from './AnchorNavigation/index.js';
+export { default as PromotionalBar } from './PromotionalBar/index.js';
+export { default as EventSchedule } from './EventSchedule/index.js';
+export { default as SecondaryBanner } from './SecondaryBanner/index.js';
+export { default as BuyOneGetOneShelf } from './BuyOneGetOneShelf/index.js';
 export declare const PAYLOAD_COMPONENT_MAP: {
     'ipc-aplusdesc': string;
     'ipc-banner': string;

package/dist/cjs/biz-components/index.js

@@ -1,2 +1,2 @@
-"use strict";var ie=Object.create;var l=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var se=Object.getPrototypeOf,de=Object.prototype.hasOwnProperty;var me=(a,r)=>{for(var t in r)l(a,t,{get:r[t],enumerable:!0})},c=(a,r,t,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of ue(r))!de.call(a,p)&&p!==t&&l(a,p,{get:()=>r[p],enumerable:!(i=ce(r,p))||i.enumerable});return a};var e=(a,r,t)=>(t=a!=null?ie(se(a)):{},c(r||!a||!a.__esModule?l(t,"default",{value:a,enumerable:!0}):t,a)),xe=a=>c(l({},"__esModule",{value:!0}),a);var ne={};me(ne,{AccordionCards:()=>g.default,AiuiProvider:()=>F.default,AplusDesc:()=>te.default,BenefitsTab:()=>$.default,BizProductProvider:()=>_.default,BrandEquity:()=>u.default,Category:()=>y.default,CreativeModule:()=>O.default,DownLoad:()=>le.default,Evaluate:()=>n.default,Faq:()=>C.default,Features:()=>re.default,FootCharger:()=>fe.default,FooterNavigation:()=>T.default,GiftBox:()=>oe.default,Graphic:()=>M.default,GraphicAttractionBlock:()=>k.default,GraphicMore:()=>ae.default,GraphicOverlay:()=>w.default,HeaderNavigation:()=>A.default,HeroBanner:()=>P.default,IPC_SEARCH_PAGE:()=>f.IPC_SEARCH_PAGE,Marquee:()=>b.default,MarqueeImageContent:()=>o.MarqueeImageContent,MarqueeItem:()=>o.MarqueeItem,MarqueeTextContent:()=>o.MarqueeTextContent,MediaPlayerBase:()=>B.default,MediaPlayerMulti:()=>G.default,MediaPlayerSticky:()=>S.default,MemberEquity:()=>s.default,MultiLayoutGraphicBlock:()=>v.default,PAYLOAD_COMPONENT_MAP:()=>he,PaidShipping:()=>ee.default,ProductActions:()=>I.default,ProductBenefitsTabs:()=>z.default,ProductBundle:()=>Q.default,ProductCard:()=>W.default,ProductDetail:()=>X.default,ProductExchangePurchase:()=>J.default,ProductFreeGift:()=>Y.default,ProductGallery:()=>V.default,ProductGridBox:()=>U.default,ProductHighlight:()=>R.default,ProductOptions:()=>K.default,ProductSummary:()=>Z.default,PurchaseBar:()=>j.default,SearchPage:()=>E.default,SearchPageTabType:()=>f.SearchPageTabType,SelectStore:()=>pe.default,ShelfDisplay:()=>h.default,Slogan:()=>d.default,Spacer:()=>x.default,Specs:()=>H.default,TabGroup:()=>N.default,Tabs:()=>L.default,Title:()=>m.default,WhyChoose:()=>q.default,withLayout:()=>D.withLayout});module.exports=xe(ne);var u=e(require("./BrandEquity/index.js")),s=e(require("./MemberEquity/index.js")),d=e(require("./Slogan/index.js")),m=e(require("./Title/index.js")),x=e(require("./Spacer/index.js")),h=e(require("./ShelfDisplay/index.js")),n=e(require("./Evaluate/index.js")),y=e(require("./Category/index.js")),P=e(require("./HeroBanner/index.js")),g=e(require("./AccordionCards/index.js")),M=e(require("./Graphic/index.js")),B=e(require("./MediaPlayerBase/index.js")),S=e(require("./MediaPlayerSticky/index.js")),G=e(require("./MediaPlayerMulti/index.js")),b=e(require("./Marquee/index.js")),q=e(require("./WhyChoose/index.js")),C=e(require("./Faq/index.js")),o=require("./Marquee/index.js"),v=e(require("./MultiLayoutGraphicBlock/index.js")),k=e(require("./GraphicAttractionBlock/index.js")),A=e(require("./HeaderNavigation/index.js")),T=e(require("./FooterNavigation/index.js")),E=e(require("./SearchPage/index.js")),f=require("./SearchPage/types.js"),D=require("../shared/Styles.js"),F=e(require("./AiuiProvider/index.js")),L=e(require("./Tabs/index.js")),O=e(require("./CreativeModule/index.js")),w=e(require("./GraphicOverlay/index.js")),H=e(require("./Specs/index.js")),N=e(require("./TabsGroup/index.js")),_=e(require("./Listing/BizProductProvider.js")),j=e(require("./Listing/components/PurchaseBar/index.js")),I=e(require("./Listing/components/PurchaseBar/ProductActions/index.js")),W=e(require("./Listing/components/ProductCard/index.js")),z=e(require("./Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js")),R=e(require("./Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js")),Y=e(require("./Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js")),J=e(require("./Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js")),K=e(require("./Listing/components/ProductCard/ProductDetail/ProductOptions/index.js")),Q=e(require("./Listing/components/ProductCard/ProductDetail/ProductBundle/index.js")),U=e(require("./Listing/components/ProductCard/ProductGridBox.js")),V=e(require("./Listing/components/ProductCard/ProductGallery/index.js")),X=e(require("./Listing/components/ProductCard/ProductDetail/index.js")),Z=e(require("./Listing/components/ProductCard/ProductSummary/index.js")),$=e(require("./Listing/components/ProductCard/ProductDetail/BenefitsTab.js")),ee=e(require("./Listing/components/PaidShipping/index.js")),ae=e(require("./GraphicMore/index.js")),re=e(require("./Features/index.js")),te=e(require("./AplusDesc/index.js")),oe=e(require("./GiftBox/index.js")),pe=e(require("./SelectStore/index.js")),le=e(require("./DownLoad/index.js")),fe=e(require("./FootCharger/index.js"));const he={"ipc-aplusdesc":"AplusDesc","ipc-banner":"Banner","ipc-brand-equity":"BrandEquity","ipc-category":"Category","ipc-collection-banner":"CollectionBanner","ipc-collection-shelves":"CollectionShelves","ipc-creativemodule":"CreativeModule","ipc-download":"DownLoad","ipc-evaluate":"Evaluate","ipc-faq":"Faq","ipc-features":"Features","ipc-footcharger":"FootCharger","ipc-ga-block":"GraphicAttractionBlock","ipc-giftbox":"GiftBox","ipc-graphic":"Graphic","ipc-graphicmore":"GraphicMore","ipc-graphicoverlay":"GraphicOverlay","ipc-marquee":"Marquee","ipc-mediaplayerbase":"MediaPlayerBase","ipc-mediaplayermulti":"MediaPlayerMulti","ipc-mediaplayersticky":"MediaPlayerSticky","ipc-member-equity":"MemberEquity","ipc-mlg-block":"MultiLayoutGraphicBlock","ipc-search-page-tabs":"SearchPageBlock","ipc-selectstore":"SelectStore","ipc-shelfdisplay":"ShelfDisplay","ipc-slogan":"Slogan","ipc-spacer":"Spacer","ipc-specs":"Specs","ipc-tabs":"Tabs","ipc-text-marquee":"TextMarquee","ipc-title":"Title","ipc-whychoose":"WhyChoose"};
+"use strict";var me=Object.create;var f=Object.defineProperty;var xe=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var he=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var Pe=(a,r)=>{for(var o in r)f(a,o,{get:r[o],enumerable:!0})},c=(a,r,o,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of ne(r))!ye.call(a,p)&&p!==o&&f(a,p,{get:()=>r[p],enumerable:!(i=xe(r,p))||i.enumerable});return a};var e=(a,r,o)=>(o=a!=null?me(he(a)):{},c(r||!a||!a.__esModule?f(o,"default",{value:a,enumerable:!0}):o,a)),ge=a=>c(f({},"__esModule",{value:!0}),a);var Me={};Pe(Me,{AccordionCards:()=>g.default,AiuiProvider:()=>F.default,AnchorNavigation:()=>ie.default,AplusDesc:()=>oe.default,BenefitsTab:()=>$.default,BizProductProvider:()=>_.default,BrandEquity:()=>u.default,BuyOneGetOneShelf:()=>de.default,Category:()=>y.default,CreativeModule:()=>O.default,DownLoad:()=>fe.default,Evaluate:()=>h.default,EventSchedule:()=>ue.default,Faq:()=>v.default,Features:()=>re.default,FootCharger:()=>le.default,FooterNavigation:()=>T.default,GiftBox:()=>te.default,Graphic:()=>B.default,GraphicAttractionBlock:()=>A.default,GraphicMore:()=>ae.default,GraphicOverlay:()=>w.default,HeaderNavigation:()=>k.default,HeroBanner:()=>P.default,IPC_SEARCH_PAGE:()=>l.IPC_SEARCH_PAGE,Marquee:()=>b.default,MarqueeImageContent:()=>t.MarqueeImageContent,MarqueeItem:()=>t.MarqueeItem,MarqueeTextContent:()=>t.MarqueeTextContent,MediaPlayerBase:()=>M.default,MediaPlayerMulti:()=>G.default,MediaPlayerSticky:()=>S.default,MemberEquity:()=>s.default,MultiLayoutGraphicBlock:()=>C.default,PAYLOAD_COMPONENT_MAP:()=>Be,PaidShipping:()=>ee.default,ProductActions:()=>I.default,ProductBenefitsTabs:()=>z.default,ProductBundle:()=>Q.default,ProductCard:()=>W.default,ProductDetail:()=>X.default,ProductExchangePurchase:()=>J.default,ProductFreeGift:()=>Y.default,ProductGallery:()=>V.default,ProductGridBox:()=>U.default,ProductHighlight:()=>R.default,ProductOptions:()=>K.default,ProductSummary:()=>Z.default,PromotionalBar:()=>ce.default,PurchaseBar:()=>j.default,SearchPage:()=>E.default,SearchPageTabType:()=>l.SearchPageTabType,SecondaryBanner:()=>se.default,SelectStore:()=>pe.default,ShelfDisplay:()=>n.default,Slogan:()=>d.default,Spacer:()=>x.default,Specs:()=>N.default,TabGroup:()=>H.default,Tabs:()=>L.default,Title:()=>m.default,WhyChoose:()=>q.default,withLayout:()=>D.withLayout});module.exports=ge(Me);var u=e(require("./BrandEquity/index.js")),s=e(require("./MemberEquity/index.js")),d=e(require("./Slogan/index.js")),m=e(require("./Title/index.js")),x=e(require("./Spacer/index.js")),n=e(require("./ShelfDisplay/index.js")),h=e(require("./Evaluate/index.js")),y=e(require("./Category/index.js")),P=e(require("./HeroBanner/index.js")),g=e(require("./AccordionCards/index.js")),B=e(require("./Graphic/index.js")),M=e(require("./MediaPlayerBase/index.js")),S=e(require("./MediaPlayerSticky/index.js")),G=e(require("./MediaPlayerMulti/index.js")),b=e(require("./Marquee/index.js")),q=e(require("./WhyChoose/index.js")),v=e(require("./Faq/index.js")),t=require("./Marquee/index.js"),C=e(require("./MultiLayoutGraphicBlock/index.js")),A=e(require("./GraphicAttractionBlock/index.js")),k=e(require("./HeaderNavigation/index.js")),T=e(require("./FooterNavigation/index.js")),E=e(require("./SearchPage/index.js")),l=require("./SearchPage/types.js"),D=require("../shared/Styles.js"),F=e(require("./AiuiProvider/index.js")),L=e(require("./Tabs/index.js")),O=e(require("./CreativeModule/index.js")),w=e(require("./GraphicOverlay/index.js")),N=e(require("./Specs/index.js")),H=e(require("./TabsGroup/index.js")),_=e(require("./Listing/BizProductProvider.js")),j=e(require("./Listing/components/PurchaseBar/index.js")),I=e(require("./Listing/components/PurchaseBar/ProductActions/index.js")),W=e(require("./Listing/components/ProductCard/index.js")),z=e(require("./Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js")),R=e(require("./Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js")),Y=e(require("./Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js")),J=e(require("./Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js")),K=e(require("./Listing/components/ProductCard/ProductDetail/ProductOptions/index.js")),Q=e(require("./Listing/components/ProductCard/ProductDetail/ProductBundle/index.js")),U=e(require("./Listing/components/ProductCard/ProductGridBox.js")),V=e(require("./Listing/components/ProductCard/ProductGallery/index.js")),X=e(require("./Listing/components/ProductCard/ProductDetail/index.js")),Z=e(require("./Listing/components/ProductCard/ProductSummary/index.js")),$=e(require("./Listing/components/ProductCard/ProductDetail/BenefitsTab.js")),ee=e(require("./Listing/components/PaidShipping/index.js")),ae=e(require("./GraphicMore/index.js")),re=e(require("./Features/index.js")),oe=e(require("./AplusDesc/index.js")),te=e(require("./GiftBox/index.js")),pe=e(require("./SelectStore/index.js")),fe=e(require("./DownLoad/index.js")),le=e(require("./FootCharger/index.js")),ie=e(require("./AnchorNavigation/index.js")),ce=e(require("./PromotionalBar/index.js")),ue=e(require("./EventSchedule/index.js")),se=e(require("./SecondaryBanner/index.js")),de=e(require("./BuyOneGetOneShelf/index.js"));const Be={"ipc-aplusdesc":"AplusDesc","ipc-banner":"Banner","ipc-brand-equity":"BrandEquity","ipc-category":"Category","ipc-collection-banner":"CollectionBanner","ipc-collection-shelves":"CollectionShelves","ipc-creativemodule":"CreativeModule","ipc-download":"DownLoad","ipc-evaluate":"Evaluate","ipc-faq":"Faq","ipc-features":"Features","ipc-footcharger":"FootCharger","ipc-ga-block":"GraphicAttractionBlock","ipc-giftbox":"GiftBox","ipc-graphic":"Graphic","ipc-graphicmore":"GraphicMore","ipc-graphicoverlay":"GraphicOverlay","ipc-marquee":"Marquee","ipc-mediaplayerbase":"MediaPlayerBase","ipc-mediaplayermulti":"MediaPlayerMulti","ipc-mediaplayersticky":"MediaPlayerSticky","ipc-member-equity":"MemberEquity","ipc-mlg-block":"MultiLayoutGraphicBlock","ipc-search-page-tabs":"SearchPageBlock","ipc-selectstore":"SelectStore","ipc-shelfdisplay":"ShelfDisplay","ipc-slogan":"Slogan","ipc-spacer":"Spacer","ipc-specs":"Specs","ipc-tabs":"Tabs","ipc-text-marquee":"TextMarquee","ipc-title":"Title","ipc-whychoose":"WhyChoose"};
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/biz-components/index.ts"],
-  "sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'\n\nexport { default as BizProductProvider } from './Listing/BizProductProvider.js'\nexport { default as PurchaseBar } from './Listing/components/PurchaseBar/index.js'\nexport { default as ProductActions } from './Listing/components/PurchaseBar/ProductActions/index.js'\nexport { default as ProductCard } from './Listing/components/ProductCard/index.js'\nexport { default as ProductBenefitsTabs } from './Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js'\nexport { default as ProductHighlight } from './Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js'\nexport { default as ProductFreeGift } from './Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js'\nexport { default as ProductExchangePurchase } from './Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js'\nexport { default as ProductOptions } from './Listing/components/ProductCard/ProductDetail/ProductOptions/index.js'\nexport { default as ProductBundle } from './Listing/components/ProductCard/ProductDetail/ProductBundle/index.js'\nexport { default as ProductGridBox } from './Listing/components/ProductCard/ProductGridBox.js'\nexport { default as ProductGallery } from './Listing/components/ProductCard/ProductGallery/index.js'\nexport { default as ProductDetail } from './Listing/components/ProductCard/ProductDetail/index.js'\nexport { default as ProductSummary } from './Listing/components/ProductCard/ProductSummary/index.js'\nexport { default as BenefitsTab } from './Listing/components/ProductCard/ProductDetail/BenefitsTab.js'\nexport { default as PaidShipping } from './Listing/components/PaidShipping/index.js'\n\nexport { default as GraphicMore } from './GraphicMore/index.js'\nexport { default as Features } from './Features/index.js'\nexport { default as AplusDesc } from './AplusDesc/index.js'\nexport { default as GiftBox } from './GiftBox/index.js'\nexport { default as SelectStore } from './SelectStore/index.js'\nexport { default as DownLoad } from './DownLoad/index.js'\nexport { default as FootCharger } from './FootCharger/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n  'ipc-aplusdesc': 'AplusDesc',\n  'ipc-banner': 'Banner',\n  'ipc-brand-equity': 'BrandEquity',\n  'ipc-category': 'Category',\n  'ipc-collection-banner': 'CollectionBanner',\n  'ipc-collection-shelves': 'CollectionShelves',\n  'ipc-creativemodule': 'CreativeModule',\n  'ipc-download': 'DownLoad',\n  'ipc-evaluate': 'Evaluate',\n  'ipc-faq': 'Faq',\n  'ipc-features': 'Features',\n  'ipc-footcharger': 'FootCharger',\n  'ipc-ga-block': 'GraphicAttractionBlock',\n  'ipc-giftbox': 'GiftBox',\n  'ipc-graphic': 'Graphic',\n  'ipc-graphicmore': 'GraphicMore',\n  'ipc-graphicoverlay': 'GraphicOverlay',\n  'ipc-marquee': 'Marquee',\n  'ipc-mediaplayerbase': 'MediaPlayerBase',\n  'ipc-mediaplayermulti': 'MediaPlayerMulti',\n  'ipc-mediaplayersticky': 'MediaPlayerSticky',\n  'ipc-member-equity': 'MemberEquity',\n  'ipc-mlg-block': 'MultiLayoutGraphicBlock',\n  'ipc-search-page-tabs': 'SearchPageBlock',\n  'ipc-selectstore': 'SelectStore',\n  'ipc-shelfdisplay': 'ShelfDisplay',\n  'ipc-slogan': 'Slogan',\n  'ipc-spacer': 'Spacer',\n  'ipc-specs': 'Specs',\n  'ipc-tabs': 'Tabs',\n  'ipc-text-marquee': 'TextMarquee',\n  'ipc-title': 'Title',\n  'ipc-whychoose': 'WhyChoose',\n}\n"],
-  "mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,45BAAAE,GAAA,wtBAAAC,GAAAH,IAAA,IAAAI,EAAuC,qCACvCC,EAAwC,sCACxCC,EAAkC,gCAClCC,EAAiC,+BACjCC,EAAkC,gCAClCC,EAAwC,sCACxCC,EAAoC,kCACpCC,EAAoC,kCACpCC,EAAsC,oCACtCC,EAA0C,wCAC1CC,EAAmC,iCACnCC,EAA2C,yCAC3CC,EAA6C,2CAC7CC,EAA4C,0CAC5CC,EAAmC,iCACnCC,EAAqC,mCACrCC,EAA+B,6BAC/BF,EAAqE,8BACrEG,EAAmD,iDAEnDC,EAAkD,gDAElDC,EAA4C,0CAC5CC,EAA4C,0CAC5CC,EAAsC,oCAEtCC,EAAmD,iCAEnDC,EAA2B,+BAC3BC,EAAwC,sCACxCC,EAAgC,8BAChCC,EAA0C,wCAC1CC,EAA0C,wCAC1CC,EAAiC,+BACjCC,EAAoC,mCAEpCC,EAA8C,8CAC9CC,EAAuC,wDACvCC,EAA0C,uEAC1CC,EAAuC,wDACvCC,EAA+C,0FAC/CC,EAA4C,uFAC5CC,EAA2C,sFAC3CC,EAAmD,8FACnDC,EAA0C,qFAC1CC,EAAyC,oFACzCC,EAA0C,iEAC1CC,EAA0C,uEAC1CC,EAAyC,sEACzCC,EAA0C,uEAC1CC,EAAuC,4EACvCC,GAAwC,yDAExCC,GAAuC,qCACvCC,GAAoC,kCACpCC,GAAqC,mCACrCC,GAAmC,iCACnCC,GAAuC,qCACvCC,GAAoC,kCACpCC,GAAuC,qCAEhC,MAAMtD,GAAwB,CACnC,gBAAiB,YACjB,aAAc,SACd,mBAAoB,cACpB,eAAgB,WAChB,wBAAyB,mBACzB,yBAA0B,oBAC1B,qBAAsB,iBACtB,eAAgB,WAChB,eAAgB,WAChB,UAAW,MACX,eAAgB,WAChB,kBAAmB,cACnB,eAAgB,yBAChB,cAAe,UACf,cAAe,UACf,kBAAmB,cACnB,qBAAsB,iBACtB,cAAe,UACf,sBAAuB,kBACvB,uBAAwB,mBACxB,wBAAyB,oBACzB,oBAAqB,eACrB,gBAAiB,0BACjB,uBAAwB,kBACxB,kBAAmB,cACnB,mBAAoB,eACpB,aAAc,SACd,aAAc,SACd,YAAa,QACb,WAAY,OACZ,mBAAoB,cACpB,YAAa,QACb,gBAAiB,WACnB",
-  "names": ["biz_components_exports", "__export", "PAYLOAD_COMPONENT_MAP", "__toCommonJS", "import_BrandEquity", "import_MemberEquity", "import_Slogan", "import_Title", "import_Spacer", "import_ShelfDisplay", "import_Evaluate", "import_Category", "import_HeroBanner", "import_AccordionCards", "import_Graphic", "import_MediaPlayerBase", "import_MediaPlayerSticky", "import_MediaPlayerMulti", "import_Marquee", "import_WhyChoose", "import_Faq", "import_MultiLayoutGraphicBlock", "import_GraphicAttractionBlock", "import_HeaderNavigation", "import_FooterNavigation", "import_SearchPage", "import_types", "import_Styles", "import_AiuiProvider", "import_Tabs", "import_CreativeModule", "import_GraphicOverlay", "import_Specs", "import_TabsGroup", "import_BizProductProvider", "import_PurchaseBar", "import_ProductActions", "import_ProductCard", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductExchangePurchase", "import_ProductOptions", "import_ProductBundle", "import_ProductGridBox", "import_ProductGallery", "import_ProductDetail", "import_ProductSummary", "import_BenefitsTab", "import_PaidShipping", "import_GraphicMore", "import_Features", "import_AplusDesc", "import_GiftBox", "import_SelectStore", "import_DownLoad", "import_FootCharger"]
+  "sourcesContent": ["export { default as BrandEquity } from './BrandEquity/index.js'\nexport { default as MemberEquity } from './MemberEquity/index.js'\nexport { default as Slogan } from './Slogan/index.js'\nexport { default as Title } from './Title/index.js'\nexport { default as Spacer } from './Spacer/index.js'\nexport { default as ShelfDisplay } from './ShelfDisplay/index.js'\nexport { default as Evaluate } from './Evaluate/index.js'\nexport { default as Category } from './Category/index.js'\nexport { default as HeroBanner } from './HeroBanner/index.js'\nexport { default as AccordionCards } from './AccordionCards/index.js'\nexport { default as Graphic } from './Graphic/index.js'\nexport { default as MediaPlayerBase } from './MediaPlayerBase/index.js'\nexport { default as MediaPlayerSticky } from './MediaPlayerSticky/index.js'\nexport { default as MediaPlayerMulti } from './MediaPlayerMulti/index.js'\nexport { default as Marquee } from './Marquee/index.js'\nexport { default as WhyChoose } from './WhyChoose/index.js'\nexport { default as Faq } from './Faq/index.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee/index.js'\nexport { default as MultiLayoutGraphicBlock } from './MultiLayoutGraphicBlock/index.js'\nexport type { MultiLayoutGraphicBlockProps } from './MultiLayoutGraphicBlock/index.js'\nexport { default as GraphicAttractionBlock } from './GraphicAttractionBlock/index.js'\nexport type { GraphicAttractionBlockProps } from './GraphicAttractionBlock/index.js'\nexport { default as HeaderNavigation } from './HeaderNavigation/index.js'\nexport { default as FooterNavigation } from './FooterNavigation/index.js'\nexport { default as SearchPage } from './SearchPage/index.js'\nexport type { SearchPageProps } from './SearchPage/types.js'\nexport { IPC_SEARCH_PAGE, SearchPageTabType } from './SearchPage/types.js'\n\nexport { withLayout } from '../shared/Styles.js'\nexport { default as AiuiProvider } from './AiuiProvider/index.js'\nexport { default as Tabs } from './Tabs/index.js'\nexport { default as CreativeModule } from './CreativeModule/index.js'\nexport { default as GraphicOverlay } from './GraphicOverlay/index.js'\nexport { default as Specs } from './Specs/index.js'\nexport { default as TabGroup } from './TabsGroup/index.js'\n\nexport { default as BizProductProvider } from './Listing/BizProductProvider.js'\nexport { default as PurchaseBar } from './Listing/components/PurchaseBar/index.js'\nexport { default as ProductActions } from './Listing/components/PurchaseBar/ProductActions/index.js'\nexport { default as ProductCard } from './Listing/components/ProductCard/index.js'\nexport { default as ProductBenefitsTabs } from './Listing/components/ProductCard/ProductDetail/ProductBenefitsTabs/index.js'\nexport { default as ProductHighlight } from './Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js'\nexport { default as ProductFreeGift } from './Listing/components/ProductCard/ProductDetail/ProductFreeGift/index.js'\nexport { default as ProductExchangePurchase } from './Listing/components/ProductCard/ProductDetail/ProductExchangePurchase/index.js'\nexport { default as ProductOptions } from './Listing/components/ProductCard/ProductDetail/ProductOptions/index.js'\nexport { default as ProductBundle } from './Listing/components/ProductCard/ProductDetail/ProductBundle/index.js'\nexport { default as ProductGridBox } from './Listing/components/ProductCard/ProductGridBox.js'\nexport { default as ProductGallery } from './Listing/components/ProductCard/ProductGallery/index.js'\nexport { default as ProductDetail } from './Listing/components/ProductCard/ProductDetail/index.js'\nexport { default as ProductSummary } from './Listing/components/ProductCard/ProductSummary/index.js'\nexport { default as BenefitsTab } from './Listing/components/ProductCard/ProductDetail/BenefitsTab.js'\nexport { default as PaidShipping } from './Listing/components/PaidShipping/index.js'\n\nexport { default as GraphicMore } from './GraphicMore/index.js'\nexport { default as Features } from './Features/index.js'\nexport { default as AplusDesc } from './AplusDesc/index.js'\nexport { default as GiftBox } from './GiftBox/index.js'\nexport { default as SelectStore } from './SelectStore/index.js'\nexport { default as DownLoad } from './DownLoad/index.js'\nexport { default as FootCharger } from './FootCharger/index.js'\nexport { default as AnchorNavigation } from './AnchorNavigation/index.js'\nexport { default as PromotionalBar } from './PromotionalBar/index.js'\nexport { default as EventSchedule } from './EventSchedule/index.js'\nexport { default as SecondaryBanner } from './SecondaryBanner/index.js'\nexport { default as BuyOneGetOneShelf } from './BuyOneGetOneShelf/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n  'ipc-aplusdesc': 'AplusDesc',\n  'ipc-banner': 'Banner',\n  'ipc-brand-equity': 'BrandEquity',\n  'ipc-category': 'Category',\n  'ipc-collection-banner': 'CollectionBanner',\n  'ipc-collection-shelves': 'CollectionShelves',\n  'ipc-creativemodule': 'CreativeModule',\n  'ipc-download': 'DownLoad',\n  'ipc-evaluate': 'Evaluate',\n  'ipc-faq': 'Faq',\n  'ipc-features': 'Features',\n  'ipc-footcharger': 'FootCharger',\n  'ipc-ga-block': 'GraphicAttractionBlock',\n  'ipc-giftbox': 'GiftBox',\n  'ipc-graphic': 'Graphic',\n  'ipc-graphicmore': 'GraphicMore',\n  'ipc-graphicoverlay': 'GraphicOverlay',\n  'ipc-marquee': 'Marquee',\n  'ipc-mediaplayerbase': 'MediaPlayerBase',\n  'ipc-mediaplayermulti': 'MediaPlayerMulti',\n  'ipc-mediaplayersticky': 'MediaPlayerSticky',\n  'ipc-member-equity': 'MemberEquity',\n  'ipc-mlg-block': 'MultiLayoutGraphicBlock',\n  'ipc-search-page-tabs': 'SearchPageBlock',\n  'ipc-selectstore': 'SelectStore',\n  'ipc-shelfdisplay': 'ShelfDisplay',\n  'ipc-slogan': 'Slogan',\n  'ipc-spacer': 'Spacer',\n  'ipc-specs': 'Specs',\n  'ipc-tabs': 'Tabs',\n  'ipc-text-marquee': 'TextMarquee',\n  'ipc-title': 'Title',\n  'ipc-whychoose': 'WhyChoose',\n}\n"],
+  "mappings": "skBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,0/BAAAE,GAAA,qxBAAAC,GAAAH,IAAA,IAAAI,EAAuC,qCACvCC,EAAwC,sCACxCC,EAAkC,gCAClCC,EAAiC,+BACjCC,EAAkC,gCAClCC,EAAwC,sCACxCC,EAAoC,kCACpCC,EAAoC,kCACpCC,EAAsC,oCACtCC,EAA0C,wCAC1CC,EAAmC,iCACnCC,EAA2C,yCAC3CC,EAA6C,2CAC7CC,EAA4C,0CAC5CC,EAAmC,iCACnCC,EAAqC,mCACrCC,EAA+B,6BAC/BF,EAAqE,8BACrEG,EAAmD,iDAEnDC,EAAkD,gDAElDC,EAA4C,0CAC5CC,EAA4C,0CAC5CC,EAAsC,oCAEtCC,EAAmD,iCAEnDC,EAA2B,+BAC3BC,EAAwC,sCACxCC,EAAgC,8BAChCC,EAA0C,wCAC1CC,EAA0C,wCAC1CC,EAAiC,+BACjCC,EAAoC,mCAEpCC,EAA8C,8CAC9CC,EAAuC,wDACvCC,EAA0C,uEAC1CC,EAAuC,wDACvCC,EAA+C,0FAC/CC,EAA4C,uFAC5CC,EAA2C,sFAC3CC,EAAmD,8FACnDC,EAA0C,qFAC1CC,EAAyC,oFACzCC,EAA0C,iEAC1CC,EAA0C,uEAC1CC,EAAyC,sEACzCC,EAA0C,uEAC1CC,EAAuC,4EACvCC,GAAwC,yDAExCC,GAAuC,qCACvCC,GAAoC,kCACpCC,GAAqC,mCACrCC,GAAmC,iCACnCC,GAAuC,qCACvCC,GAAoC,kCACpCC,GAAuC,qCACvCC,GAA4C,0CAC5CC,GAA0C,wCAC1CC,GAAyC,uCACzCC,GAA2C,yCAC3CC,GAA6C,2CAEtC,MAAM3D,GAAwB,CACnC,gBAAiB,YACjB,aAAc,SACd,mBAAoB,cACpB,eAAgB,WAChB,wBAAyB,mBACzB,yBAA0B,oBAC1B,qBAAsB,iBACtB,eAAgB,WAChB,eAAgB,WAChB,UAAW,MACX,eAAgB,WAChB,kBAAmB,cACnB,eAAgB,yBAChB,cAAe,UACf,cAAe,UACf,kBAAmB,cACnB,qBAAsB,iBACtB,cAAe,UACf,sBAAuB,kBACvB,uBAAwB,mBACxB,wBAAyB,oBACzB,oBAAqB,eACrB,gBAAiB,0BACjB,uBAAwB,kBACxB,kBAAmB,cACnB,mBAAoB,eACpB,aAAc,SACd,aAAc,SACd,YAAa,QACb,WAAY,OACZ,mBAAoB,cACpB,YAAa,QACb,gBAAiB,WACnB",
+  "names": ["biz_components_exports", "__export", "PAYLOAD_COMPONENT_MAP", "__toCommonJS", "import_BrandEquity", "import_MemberEquity", "import_Slogan", "import_Title", "import_Spacer", "import_ShelfDisplay", "import_Evaluate", "import_Category", "import_HeroBanner", "import_AccordionCards", "import_Graphic", "import_MediaPlayerBase", "import_MediaPlayerSticky", "import_MediaPlayerMulti", "import_Marquee", "import_WhyChoose", "import_Faq", "import_MultiLayoutGraphicBlock", "import_GraphicAttractionBlock", "import_HeaderNavigation", "import_FooterNavigation", "import_SearchPage", "import_types", "import_Styles", "import_AiuiProvider", "import_Tabs", "import_CreativeModule", "import_GraphicOverlay", "import_Specs", "import_TabsGroup", "import_BizProductProvider", "import_PurchaseBar", "import_ProductActions", "import_ProductCard", "import_ProductBenefitsTabs", "import_ProductHighlight", "import_ProductFreeGift", "import_ProductExchangePurchase", "import_ProductOptions", "import_ProductBundle", "import_ProductGridBox", "import_ProductGallery", "import_ProductDetail", "import_ProductSummary", "import_BenefitsTab", "import_PaidShipping", "import_GraphicMore", "import_Features", "import_AplusDesc", "import_GiftBox", "import_SelectStore", "import_DownLoad", "import_FootCharger", "import_AnchorNavigation", "import_PromotionalBar", "import_EventSchedule", "import_SecondaryBanner", "import_BuyOneGetOneShelf"]
 }

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

@@ -3,7 +3,9 @@ import React from 'react';
 import HeroBanner from '../biz-components/HeroBanner/HeroBanner.js';
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<Omit<import("../biz-components/HeroBanner/types.js").HeroBannerProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<import("../biz-components/HeroBanner/types.js").HeroBannerProps & {
+        classNames?: Partial<Record<import("../biz-components/HeroBanner/HeroBanner.js").HeroBannerSemanticName, string>>;
+    } & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
         className?: string;
         data?: Record<string, any>;
     }, "ref"> & React.RefAttributes<any>>;
@@ -25,4 +27,5 @@ export declare const MultiBanner: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutSecondaryButton: Story;
 export declare const WithVideoModal: Story;
 export declare const WithYoutubeVideo: Story;
+export declare const WithSemanticClassNames: Story;
 export declare const ScrollableBackgroundVideo: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-"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:`
+"use strict";var b=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(a,o)=>{for(var r in o)l(a,r,{get:o[r],enumerable:!0})},p=(a,o,r,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of g(o))!y.call(a,n)&&n!==r&&l(a,n,{get:()=>o[n],enumerable:!(d=u(o,n))||d.enumerable});return a};var x=(a,o,r)=>(r=a!=null?b(h(a)):{},p(o||!a||!a.__esModule?l(r,"default",{value:a,enumerable:!0}):r,a)),f=a=>p(l({},"__esModule",{value:!0}),a);var V={};v(V,{DarkTheme:()=>c,LightTheme:()=>s,MultiBanner:()=>B,ScrollableBackgroundVideo:()=>S,WithSemanticClassNames:()=>L,WithVideoModal:()=>P,WithYoutubeVideo:()=>T,WithoutSecondaryButton:()=>w,default:()=>N});module.exports=f(V);var e=require("react/jsx-runtime"),R=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 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"})]})]})]})})]});
+        `}}},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",A="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",s={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)"}]}}},B=()=>(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(m.default,{data:{...s.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)"}]}}},P={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={args:{data:s.args.data,classNames:{root:"",title:" text-red-500",subtitle:"text-blue-500",buttonGroup:"justify-left mt-[200px]",primaryButton:"shadow-lg",secondaryButton:"custom-secondary-btn",captionGroup:"bg-black/40"}}},S=()=>(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

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

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

@@ -15,3 +15,24 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Round: Story;
 export declare const CustomLayout: () => import("react/jsx-runtime").JSX.Element;
+export declare const Autoplay: {
+    args: {
+        data: {
+            products: {
+                title: string;
+                img: {
+                    url: string;
+                };
+                subTitle: string;
+            }[];
+            shape: string;
+            itemShape: string;
+            theme: string;
+        };
+        autoplay: {
+            enabled: boolean;
+            loop: boolean;
+            interval: number;
+        };
+    };
+};

package/dist/cjs/stories/accordionCards.stories.js

@@ -1,2 +1,2 @@
-"use strict";var l=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(e,o)=>{for(var t in o)r(e,t,{get:o[t],enumerable:!0})},d=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of u(o))!g.call(e,s)&&s!==t&&r(e,s,{get:()=>o[s],enumerable:!(n=f(o,s))||n.enumerable});return e};var y=(e,o,t)=>(t=e!=null?l(m(e)):{},d(o||!e||!e.__esModule?r(t,"default",{value:e,enumerable:!0}):t,e)),b=e=>d(r({},"__esModule",{value:!0}),e);var M={};h(M,{CustomLayout:()=>v,Default:()=>S,Round:()=>A,default:()=>C});module.exports=b(M);var a=require("react/jsx-runtime"),i=y(require("../biz-components/AccordionCards/index.js")),c=require("../components/container.js");const _={title:"Biz-Components/AccordionCards",component:i.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var C=_;const p=[{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."}],S={args:{data:{products:p,primaryButton:"Learn More",theme:"dark",shape:"round",itemShape:"round"}}},A={args:{data:{products:p,shape:"round",itemShape:"round",primaryButton:"Learn More"}}},v=()=>(0,a.jsx)("div",{className:"py-10",children:(0,a.jsx)(c.Container,{children:(0,a.jsx)(i.default,{data:{products:p,shape:"round",itemShape:"round",primaryButton:"Learn More",theme:"dark"}})})});
+"use strict";var c=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var h=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of f(t))!g.call(e,s)&&s!==o&&r(e,s,{get:()=>t[s],enumerable:!(n=u(t,s))||n.enumerable});return e};var y=(e,t,o)=>(o=e!=null?c(m(e)):{},d(t||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),b=e=>d(r({},"__esModule",{value:!0}),e);var M={};h(M,{Autoplay:()=>k,CustomLayout:()=>v,Default:()=>S,Round:()=>A,default:()=>C});module.exports=b(M);var p=require("react/jsx-runtime"),i=y(require("../biz-components/AccordionCards/index.js")),l=require("../components/container.js");const _={title:"Biz-Components/AccordionCards",component:i.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var C=_;const a=[{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."},{title:"Apple Charging Solutions",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768"},subTitle:"Dependable Charging for Your Entire Apple Ecosystem."}],S={args:{data:{products:a,primaryButton:"Learn More",theme:"dark",shape:"round",itemShape:"round"}}},A={args:{data:{products:a,shape:"round",itemShape:"round",primaryButton:"Learn More"}}},v=()=>(0,p.jsx)("div",{className:"py-10",children:(0,p.jsx)(l.Container,{children:(0,p.jsx)(i.default,{data:{products:a,shape:"round",itemShape:"round",primaryButton:"Learn More",theme:"dark"}})})}),k={args:{data:{products:a,shape:"round",itemShape:"round",theme:"dark"},autoplay:{enabled:!0,loop:!0,interval:1500}}};
 //# sourceMappingURL=accordionCards.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/accordionCards.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards/index.js'\nimport { Container } from '../components/container.js'\n\nconst meta = {\n  title: 'Biz-Components/AccordionCards',\n  component: AccordionCards,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n  {\n    title: 'Apple Charging Solutions',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n    },\n    subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n  },\n  {\n    title: 'Apple Charging Solutions',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n    },\n    subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n  },\n  {\n    title: 'Apple Charging Solutions',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n    },\n    subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n  },\n  {\n    title: 'Apple Charging Solutions',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n    },\n    subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      products: mock,\n      primaryButton: 'Learn More',\n      theme: 'dark',\n      shape: 'round',\n      itemShape: 'round',\n    },\n  },\n}\n\nexport const Round: Story = {\n  args: {\n    data: {\n      products: mock,\n      shape: 'round',\n      itemShape: 'round',\n      primaryButton: 'Learn More',\n    },\n  },\n}\n\nexport const CustomLayout = () => {\n  return (\n    <div className=\"py-10\">\n      <Container>\n        <AccordionCards\n          data={{ products: mock, shape: 'round', itemShape: 'round', primaryButton: 'Learn More', theme: 'dark' }}\n        />\n      </Container>\n    </div>\n  )\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,EAAA,YAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA0EQ,IAAAO,EAAA,6BAzERC,EAA2B,wDAC3BC,EAA0B,sCAE1B,MAAMC,EAAO,CACX,MAAO,gCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQK,EAGf,MAAME,EAAO,CACX,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,CACF,EAEaT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,SAAUS,EACV,cAAe,aACf,MAAO,OACP,MAAO,QACP,UAAW,OACb,CACF,CACF,EAEaR,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,SAAUQ,EACV,MAAO,QACP,UAAW,QACX,cAAe,YACjB,CACF,CACF,EAEaV,EAAe,OAExB,OAAC,OAAI,UAAU,QACb,mBAAC,aACC,mBAAC,EAAAS,QAAA,CACC,KAAM,CAAE,SAAUC,EAAM,MAAO,QAAS,UAAW,QAAS,cAAe,aAAc,MAAO,MAAO,EACzG,EACF,EACF",
-  "names": ["accordionCards_stories_exports", "__export", "CustomLayout", "Default", "Round", "accordionCards_stories_default", "__toCommonJS", "import_jsx_runtime", "import_AccordionCards", "import_container", "meta", "AccordionCards", "mock"]
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport AccordionCards from '../biz-components/AccordionCards/index.js'\nimport { Container } from '../components/container.js'\n\nconst meta = {\n  title: 'Biz-Components/AccordionCards',\n  component: AccordionCards,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof AccordionCards>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mock = [\n  {\n    title: 'Apple Charging Solutions',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n    },\n    subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n  },\n  {\n    title: 'Apple Charging Solutions',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n    },\n    subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n  },\n  {\n    title: 'Apple Charging Solutions',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n    },\n    subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n  },\n  {\n    title: 'Apple Charging Solutions',\n    img: {\n      url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Mask_group_3_f2d0041d-7b54-4d6a-a504-1dbe6c2de6ee.png?v=1718245219, https://cdn.shopify.com/s/files/1/0521/9411/5753/files/1_c67da28a-50c5-4821-8712-330259ea6039.png?v=1718245627 768',\n    },\n    subTitle: 'Dependable Charging for Your Entire Apple Ecosystem.',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    data: {\n      products: mock,\n      primaryButton: 'Learn More',\n      theme: 'dark',\n      shape: 'round',\n      itemShape: 'round',\n    },\n  },\n}\n\nexport const Round: Story = {\n  args: {\n    data: {\n      products: mock,\n      shape: 'round',\n      itemShape: 'round',\n      primaryButton: 'Learn More',\n    },\n  },\n}\n\nexport const CustomLayout = () => {\n  return (\n    <div className=\"py-10\">\n      <Container>\n        <AccordionCards\n          data={{ products: mock, shape: 'round', itemShape: 'round', primaryButton: 'Learn More', theme: 'dark' }}\n        />\n      </Container>\n    </div>\n  )\n}\n\nexport const Autoplay = {\n  args: {\n    data: {\n      products: mock,\n      shape: 'round',\n      itemShape: 'round',\n      theme: 'dark',\n    },\n    autoplay: { enabled: true, loop: true, interval: 1500 },\n  },\n}"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,EAAA,iBAAAC,EAAA,YAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GA0EQ,IAAAQ,EAAA,6BAzERC,EAA2B,wDAC3BC,EAA0B,sCAE1B,MAAMC,EAAO,CACX,MAAO,gCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAON,EAAQK,EAGf,MAAME,EAAO,CACX,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,EACA,CACE,MAAO,2BACP,IAAK,CACH,IAAK,+OACP,EACA,SAAU,sDACZ,CACF,EAEaT,EAAiB,CAC5B,KAAM,CACJ,KAAM,CACJ,SAAUS,EACV,cAAe,aACf,MAAO,OACP,MAAO,QACP,UAAW,OACb,CACF,CACF,EAEaR,EAAe,CAC1B,KAAM,CACJ,KAAM,CACJ,SAAUQ,EACV,MAAO,QACP,UAAW,QACX,cAAe,YACjB,CACF,CACF,EAEaV,EAAe,OAExB,OAAC,OAAI,UAAU,QACb,mBAAC,aACC,mBAAC,EAAAS,QAAA,CACC,KAAM,CAAE,SAAUC,EAAM,MAAO,QAAS,UAAW,QAAS,cAAe,aAAc,MAAO,MAAO,EACzG,EACF,EACF,EAISX,EAAW,CACtB,KAAM,CACJ,KAAM,CACJ,SAAUW,EACV,MAAO,QACP,UAAW,QACX,MAAO,MACT,EACA,SAAU,CAAE,QAAS,GAAM,KAAM,GAAM,SAAU,IAAK,CACxD,CACF",
+  "names": ["accordionCards_stories_exports", "__export", "Autoplay", "CustomLayout", "Default", "Round", "accordionCards_stories_default", "__toCommonJS", "import_jsx_runtime", "import_AccordionCards", "import_container", "meta", "AccordionCards", "mock"]
 }

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

@@ -0,0 +1,27 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import { type AnchorNavigationData } from '../biz-components/AnchorNavigation/index.js';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../biz-components/AnchorNavigation/index.js").AnchorNavigationProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        data: {
+            description: string;
+        };
+    };
+    args: {
+        data: AnchorNavigationData;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/cjs/stories/anchorNavigation.stories.js

@@ -0,0 +1,2 @@
+"use strict";var d=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var f=(t,o)=>{for(var a in o)i(t,a,{get:o[a],enumerable:!0})},c=(t,o,a,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of y(o))!l.call(t,e)&&e!==a&&i(t,e,{get:()=>o[e],enumerable:!(r=m(o,e))||r.enumerable});return t};var h=(t,o,a)=>(a=t!=null?d(g(t)):{},c(o||!t||!t.__esModule?i(a,"default",{value:t,enumerable:!0}):a,t)),v=t=>c(i({},"__esModule",{value:!0}),t);var b={};f(b,{Default:()=>S,default:()=>N});module.exports=v(b);var p=require("react/jsx-runtime"),u=require("react"),n=h(require("../biz-components/AnchorNavigation/index.js"));const s={sectionIds:[{id:"section1",label:"Section 1"},{id:"section2",label:"Section 2"},{id:"section3",label:"Section 3"}]},A={title:"Biz Components/AnchorNavigation",component:n.default,parameters:{layout:"centered",docs:{description:{component:"\u951A\u70B9\u5BFC\u822A - \u951A\u70B9\u5BFC\u822A"}}},tags:["autodocs"],argTypes:{data:{description:"\u4E1A\u52A1\u6570\u636E"}},args:{data:s}};var N=A;const S={args:{data:s},render:t=>(0,p.jsx)(n.default,{...t})};
+//# sourceMappingURL=anchorNavigation.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/anchorNavigation.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport React from 'react'\n\nimport AnchorNavigation, { type AnchorNavigationData } from '../biz-components/AnchorNavigation/index.js'\n\n// \u6A21\u62DF\u4E1A\u52A1\u6570\u636E\nconst mockData: AnchorNavigationData = {\n  sectionIds: [\n    {\n      id: 'section1',\n      label: 'Section 1',\n    },\n    {\n      id: 'section2',\n      label: 'Section 2',\n    },\n    {\n      id: 'section3',\n      label: 'Section 3',\n    },\n  ],\n} satisfies AnchorNavigationData\n\nconst meta = {\n  title: 'Biz Components/AnchorNavigation',\n  component: AnchorNavigation,\n  parameters: {\n    layout: 'centered',\n    docs: {\n      description: {\n        component: '\u951A\u70B9\u5BFC\u822A - \u951A\u70B9\u5BFC\u822A',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    data: {\n      description: '\u4E1A\u52A1\u6570\u636E',\n    },\n  },\n  args: {\n    data: mockData,\n  },\n} satisfies Meta<typeof AnchorNavigation>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    data: mockData,\n  },\n  render: (args: { data: AnchorNavigationData }) => <AnchorNavigation {...args} />,\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAqDoD,IAAAK,EAAA,6BAnDpDC,EAAkB,iBAElBC,EAA4D,0DAG5D,MAAMC,EAAiC,CACrC,WAAY,CACV,CACE,GAAI,WACJ,MAAO,WACT,EACA,CACE,GAAI,WACJ,MAAO,WACT,EACA,CACE,GAAI,WACJ,MAAO,WACT,CACF,CACF,EAEMC,EAAO,CACX,MAAO,kCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UAAW,qDACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,YAAa,0BACf,CACF,EACA,KAAM,CACJ,KAAMF,CACR,CACF,EAEA,IAAOL,EAAQM,EAGR,MAAMP,EAAiB,CAC5B,KAAM,CACJ,KAAMM,CACR,EACA,OAASG,MAAyC,OAAC,EAAAD,QAAA,CAAkB,GAAGC,EAAM,CAChF",
+  "names": ["anchorNavigation_stories_exports", "__export", "Default", "anchorNavigation_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_AnchorNavigation", "mockData", "meta", "AnchorNavigation", "args"]
+}

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

@@ -0,0 +1,56 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../biz-components/BuyOneGetOneShelf/index.js").BuyOneGetOneShelfProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        data: {
+            control: "object";
+            description: string;
+        };
+        onProductClick: {
+            action: string;
+            description: string;
+        };
+        onProductImageClick: {
+            action: string;
+            description: string;
+        };
+        onLearnMore: {
+            action: string;
+            description: string;
+        };
+        onShopNow: {
+            action: string;
+            description: string;
+        };
+        onGiftClick: {
+            action: string;
+            description: string;
+        };
+        onGiftSelectionChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleLayout: Story;
+export declare const DoubleLayout: Story;
+export declare const NoHeader: Story;
+export declare const MinimalProduct: Story;
+export declare const WithCustomActions: Story;
+export declare const SingleGiftSelection: Story;
+export declare const MultipleGiftSelection: Story;
+export declare const ComposableDesign: Story;

package/dist/cjs/stories/buyOneGetOneShelf.stories.js

@@ -0,0 +1,2 @@
+"use strict";var l=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(e,o)=>{for(var t in o)a(e,t,{get:o[t],enumerable:!0})},n=(e,o,t,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of d(o))!f.call(e,r)&&r!==t&&a(e,r,{get:()=>o[r],enumerable:!(c=p(o,r))||c.enumerable});return e};var u=(e,o,t)=>(t=e!=null?l(m(e)):{},n(o||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),h=e=>n(a({},"__esModule",{value:!0}),e);var L={};g(L,{ComposableDesign:()=>O,Default:()=>w,DoubleLayout:()=>P,MinimalProduct:()=>k,MultipleGiftSelection:()=>N,NoHeader:()=>x,SingleGiftSelection:()=>M,SingleLayout:()=>C,WithCustomActions:()=>G,default:()=>b});module.exports=h(L);var B=require("react"),s=u(require("../biz-components/BuyOneGetOneShelf/index.js"));const i={title:"\u4E70\u8D60\u6D3B\u52A8\u4E13\u533A",description:"\u7CBE\u9009\u4F18\u8D28\u4EA7\u54C1\uFF0C\u4E70\u4E3B\u5546\u54C1\u5373\u53EF\u83B7\u5F97\u8D85\u503C\u8D60\u54C1",layout:"single",products:[{image:"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=964&h=560&q=80",tags:[{text:"20% OFF",type:"discount",variant:"filled"},{text:"New",type:"new",variant:"outlined"}],name:"eufyCam 3 Security Camera System",description:"4K Ultra HD wireless security camera with advanced AI detection",freeGiftLabel:"\u514D\u8D39\u8D60\u54C1",freeGifts:[{id:"gift-1",image:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"eufyCam Solar Panel Charger",currentPrice:"Free",originalPrice:"$199.00",isNew:!0,selected:!0},{id:"gift-2",image:"https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"eufy HomeBase 3 Hub",currentPrice:"Free",originalPrice:"$149.00",isNew:!0,selected:!1}],giftSelectionMode:"multiple",currentPrice:"$1,999.00",originalPrice:"$2,999.00",learnMoreText:"Learn More",shopNowText:"Shop Now"}]},y={...i,layout:"double",products:[{...i.products[0],image:"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=482&h=560&q=80"},{image:"https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=482&h=560&q=80",tags:[{text:"30% OFF",type:"discount",variant:"filled"}],name:"Anker PowerCore Portable Charger",description:"High-capacity portable charger with fast charging technology",freeGiftLabel:"\u514D\u8D39\u8D60\u54C1",freeGifts:[{id:"gift-3",image:"https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"USB-C Cable Premium",currentPrice:"Free",originalPrice:"$29.00",isNew:!1,selected:!0}],giftSelectionMode:"single",currentPrice:"$79.99",originalPrice:"$119.99",learnMoreText:"Learn More",shopNowText:"Shop Now"}]},S={title:"Biz Components/BuyOneGetOneShelf",component:s.default,parameters:{layout:"fullscreen",docs:{description:{component:"\u4E70\u8D60\u8D27\u67B6 - \u5C55\u793A\u4E70\u4E00\u8D60\u4E00\u6D3B\u52A8\u7684\u4EA7\u54C1\u7EC4\u4EF6\uFF0C\u652F\u6301\u5355\u5217\u548C\u53CC\u5217\u5E03\u5C40\uFF0C\u5305\u542B\u4EA7\u54C1\u4FE1\u606F\u3001\u6807\u7B7E\u3001\u8D60\u54C1\u5217\u8868\u548C\u8D2D\u4E70\u6309\u94AE"}}},tags:["autodocs"],argTypes:{data:{control:"object",description:"\u4E70\u8D60\u8D27\u67B6\u6570\u636E\u914D\u7F6E"},onProductClick:{action:"product-clicked",description:"\u4EA7\u54C1\u5361\u7247\u70B9\u51FB\u4E8B\u4EF6"},onProductImageClick:{action:"product-image-clicked",description:"\u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u4E8B\u4EF6"},onLearnMore:{action:"learn-more-clicked",description:"Learn More\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6"},onShopNow:{action:"shop-now-clicked",description:"Shop Now\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6"},onGiftClick:{action:"gift-clicked",description:"\u8D60\u54C1\u70B9\u51FB\u4E8B\u4EF6"},onGiftSelectionChange:{action:"gift-selection-changed",description:"\u8D60\u54C1\u9009\u62E9\u53D8\u5316\u4E8B\u4EF6"}}};var b=S;const w={args:{data:i,onProductClick:e=>console.log("Product clicked:",e.name),onProductImageClick:e=>console.log("Product image clicked:",e.name),onLearnMore:e=>console.log("Learn More clicked:",e.name),onShopNow:e=>console.log("Shop Now clicked:",e.name),onGiftClick:(e,o)=>console.log("Gift clicked:",e.name,"for product:",o.name),onGiftSelectionChange:(e,o)=>console.log("Gift selection changed:",e.length,"gifts selected for",o.name)}},C={args:{data:i},parameters:{docs:{description:{story:"\u5355\u5217\u5E03\u5C40\uFF1A\u4E00\u6392\u663E\u793A\u4E00\u4E2A\u4EA7\u54C1\uFF0C\u9002\u5408\u91CD\u70B9\u63A8\u8350\u5355\u4E2A\u4EA7\u54C1\u7684\u573A\u666F\u3002"}}}},P={args:{data:y},parameters:{docs:{description:{story:"\u53CC\u5217\u5E03\u5C40\uFF1A\u4E00\u6392\u663E\u793A\u4E24\u4E2A\u4EA7\u54C1\uFF0C\u9002\u5408\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u7684\u5BF9\u6BD4\u573A\u666F\u3002"}}}},x={args:{data:{layout:"single",products:[i.products[0]]}},parameters:{docs:{description:{story:"\u65E0\u6807\u9898\u63CF\u8FF0\u7248\u672C\uFF1A\u53EA\u663E\u793A\u4EA7\u54C1\u5361\u7247\uFF0C\u9002\u5408\u5D4C\u5165\u5230\u5176\u4ED6\u9875\u9762\u4E2D\u7684\u573A\u666F\u3002"}}}},k={args:{data:{layout:"single",products:[{image:"https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&auto=format&fit=crop&w=964&h=560&q=80",tags:[{text:"Limited",type:"new",variant:"filled"}],name:"Smart Home Device Collection",description:"Complete smart home automation solution",currentPrice:"$599.00",originalPrice:"$799.00"}]}},parameters:{docs:{description:{story:"\u6700\u5C0F\u5316\u4EA7\u54C1\uFF1A\u65E0\u8D60\u54C1\u5217\u8868\uFF0C\u53EA\u663E\u793A\u57FA\u672C\u4EA7\u54C1\u4FE1\u606F\u548C\u4EF7\u683C\u3002"}}}},G={args:{data:{...i,products:[{...i.products[0],learnMoreText:"\u4E86\u89E3\u8BE6\u60C5",shopNowText:"\u7ACB\u5373\u8D2D\u4E70"}]},onLearnMore:e=>alert(`\u8DF3\u8F6C\u5230\u4EA7\u54C1\u8BE6\u60C5\u9875\u9762: ${e.name}`),onShopNow:e=>alert(`\u6DFB\u52A0\u5230\u8D2D\u7269\u8F66: ${e.name}`),onGiftClick:(e,o)=>alert(`\u9009\u62E9\u8D60\u54C1: ${e.name}`)},parameters:{docs:{description:{story:"\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u6848\u548C\u70B9\u51FB\u4E8B\u4EF6\uFF1A\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u5B57\u548C\u5904\u7406\u51FD\u6570\u3002"}}}},M={args:{data:{...i,products:[{...i.products[0],giftSelectionMode:"single",freeGifts:[{id:"gift-a",image:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"eufyCam Solar Panel Charger",currentPrice:"Free",originalPrice:"$199.00",isNew:!0,selected:!1},{id:"gift-b",image:"https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"eufy HomeBase 3 Hub",currentPrice:"Free",originalPrice:"$149.00",isNew:!0,selected:!0},{id:"gift-c",image:"https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&auto=format&fit=crop&w=56&h=56&q=80",name:"USB-C Cable Premium",currentPrice:"Free",originalPrice:"$29.00",isNew:!1,selected:!1}]}]},onGiftClick:(e,o)=>console.log("Single gift selection:",e.name),onGiftSelectionChange:(e,o)=>console.log("Single selection changed:",e)},parameters:{docs:{description:{story:"\u5355\u9009\u6A21\u5F0F\uFF1A\u7528\u6237\u53EA\u80FD\u9009\u62E9\u4E00\u4E2A\u8D60\u54C1\uFF0C\u4F7F\u7528Radio\u6309\u94AE\u3002"}}}},N={args:{data:{...i,products:[{...i.products[0],giftSelectionMode:"multiple"}]},onGiftClick:(e,o)=>console.log("Multiple gift selection:",e.name,"for",o.name),onGiftSelectionChange:(e,o)=>console.log("Multiple selection changed:",e.map(t=>t.name),"for",o.name)},parameters:{docs:{description:{story:"\u591A\u9009\u6A21\u5F0F\uFF1A\u7528\u6237\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u8D60\u54C1\uFF0C\u4F7F\u7528Checkbox\u3002"}}}},O={args:{data:i,onProductClick:e=>{console.log("\u{1F3AF} Product card clicked:",e.name)},onProductImageClick:e=>{console.log("\u{1F5BC}\uFE0F Product image clicked - opening gallery for:",e.name)},onLearnMore:e=>{console.log("\u{1F4DA} Learn More - navigating to product details:",e.name)},onShopNow:e=>{console.log("\u{1F6D2} Shop Now - adding to cart:",e.name)},onGiftClick:(e,o)=>{console.log("\u{1F381} Gift clicked:",e.name,"for product:",o.name)},onGiftSelectionChange:(e,o)=>{console.log("\u2705 Gift selection changed for",o.name+":",e.map(t=>t.name).join(", "))}},parameters:{docs:{description:{story:"\u7EC4\u5408\u5F0F\u8BBE\u8BA1\u793A\u4F8B\uFF1A\u6240\u6709\u4E8B\u4EF6\u90FD\u901A\u8FC7 props \u900F\u4F20\uFF0C\u5916\u90E8\u53EF\u4EE5\u5B8C\u5168\u63A7\u5236\u4EA4\u4E92\u903B\u8F91\u3002\u6253\u5F00\u6D4F\u89C8\u5668\u63A7\u5236\u53F0\u67E5\u770B\u4E8B\u4EF6\u65E5\u5FD7\u3002"}}}};
+//# sourceMappingURL=buyOneGetOneShelf.stories.js.map