@anker-in/headless-ui 0.0.27 → 0.0.28-alpha.1

package/dist/cjs/types/libs.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=libs.d.js.map

package/dist/cjs/types/libs.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/biz-components/HeroBanner/HeroBanner.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:z},P)=>{const{title:m,subtitle:u,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:g=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:u}),$(P,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:a=>{const p=a.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:a=>{const p=a.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:a=>{const p=a.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(a=>a.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:r(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",z),children:[e("div",{ref:o,className:r("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:r("hero-banner-title"),html:m}),u&&e(H,{as:"p",size:3,className:r("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),n("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:N(i.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&e("a",{href:N(l.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),g.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:g.map((x,d)=>n(v.Fragment,{children:[e(H,{size:3,className:r("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:x.title}),d<g.length-1&&e("div",{className:r("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var K=M(w);export{K as default};
+"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:P},z)=>{const{title:m,subtitle:g,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:u=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:g}),$(z,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:r=>{const p=r.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(r=>r.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:a(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",P),children:[e("div",{ref:o,className:a("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:a("hero-banner-title"),html:m}),g&&e(H,{as:"p",size:3,className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:g})]}),n("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:N(i.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&e("a",{href:N(l.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),u.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:u.map((x,d)=>n(v.Fragment,{children:[e(H,{size:3,className:a("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:x.title}),d<u.length-1&&e("div",{className:a("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var K=M(w);export{K as default};
 //# sourceMappingURL=HeroBanner.js.map

package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 40\n          const value = self.progress * base - base / 2\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    } else {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom bottom',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base - base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top top',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    }\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={3}\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "aAyFQ,cAAAA,EASA,QAAAC,MATA,oBAxFR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,MAAe,cACxB,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,0BAE9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAAahB,EAAM,WAA4C,CAAC,CAAE,KAAAiB,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,EAAQ1B,EAAyB,IAAI,EACrC2B,EAAS3B,EAAuB,IAAI,EAG1C,OAAAU,EAAYiB,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDpB,EAAoBkB,EAAK,IAAMU,EAAO,OAAyB,EAE/D1B,EAAQ,IAAM,CAEZ,GADAC,EAAK,eAAeC,CAAa,EAC7B,CAACuB,EAAM,QAAS,OACpB,MAAME,EAAeD,EAAO,SAAS,cAAgB,IAGrD,OAFqB,OAAO,aAERC,EAClBzB,EAAc,OAAO,CACnB,QAASwB,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC3B,EAAK,IAAIwB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,GAED3B,EAAc,OAAO,CACnB,QAASwB,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC3B,EAAK,IAAIwB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,EACD3B,EAAc,OAAO,CACnB,QAASwB,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B3B,EAAK,IAAIwB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,GAEI,IAAM,CACX3B,EAAc,OAAO,EAAE,QAAS4B,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,EAGHlC,EAAC,OACC,IAAK8B,EACL,uBAAqB,aACrB,UAAWnB,EACTgB,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAApB,EAAC,OAAI,IAAK8B,EAAO,UAAWlB,EAAG,iCAAiC,EAC9D,SAAAZ,EAACU,EAAA,CACC,UAAU,uBACV,aAAa,sBACb,OAAQ,GAAGc,GAAS,KAAO,EAAE,MAAMC,GAAa,KAAO,EAAE,OAC3D,EACF,EAGAxB,EAAC,OAAI,UAAU,yLACb,UAAAA,EAAC,OAAI,UAAU,iCACZ,UAAAqB,GAAStB,EAACS,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMU,EAAO,EACpFC,GACCvB,EAACW,EAAA,CACC,GAAG,IACH,KAAM,EACN,UAAWC,EACT,oHACF,EACA,KAAMW,EACR,GAEJ,EAEAtB,EAAC,OAAI,UAAU,4DACZ,UAAA0B,GAAmBA,EAAgB,MAClC3B,EAAC,KAAE,KAAMe,EAAYY,EAAgB,KAAM,GAAGX,CAAa,IAAIC,CAAa,EAAE,EAC5E,SAAAjB,EAACQ,EAAA,CAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAmB,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,MAC9B1B,EAAC,KAAE,KAAMe,EAAYW,EAAc,KAAM,GAAGV,CAAa,IAAIC,CAAa,EAAE,EAC1E,SAAAjB,EAACQ,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAkB,EAAc,KACjB,EACF,GAEJ,GACF,EAGCG,EAAQ,OAAS,GAChB7B,EAAC,OAAI,UAAU,uKACZ,SAAA6B,EAAQ,IAAI,CAACO,EAAGC,IACfpC,EAACC,EAAM,SAAN,CACC,UAAAF,EAACW,EAAA,CACC,KAAM,EACN,UAAWC,EACT,8KACF,EACA,KAAMwB,EAAE,MACV,EACCC,EAAQR,EAAQ,OAAS,GAAK7B,EAAC,OAAI,UAAWY,EAAG,sBAAsB,EAAG,IARxDyB,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDnB,EAAW,YAAc,aAEzB,IAAOoB,EAAQzB,EAAWK,CAAU",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 40\n          const value = self.progress * base - base / 2\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    } else {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom bottom',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base - base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top top',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    }\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          loading=\"eager\"\n          fetchPriority=\"high\"\n          source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={3}\n                className={cn(\n                  'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
 }

package/dist/esm/biz-components/SectionHeading/SectionHeading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SectionHeadingProps } from './types.js';
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default SectionHeading;

package/dist/esm/biz-components/SectionHeading/SectionHeading.js

@@ -0,0 +1,2 @@
+import{jsx as c}from"react/jsx-runtime";import n from"react";import{cn as a}from"../../helpers/utils.js";import{Heading as m}from"../../components/index.js";const s=n.forwardRef((e,t)=>{const{title:o,className:r,...i}=e;return c(m,{ref:t,className:a("section-heading",r),html:o,...i})});var l=s;export{l as default};
+//# sourceMappingURL=SectionHeading.js.map

package/dist/esm/biz-components/SectionHeading/SectionHeading.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SectionHeading/SectionHeading.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { SectionHeadingProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\n\nconst SectionHeading = React.forwardRef<HTMLDivElement, SectionHeadingProps>((props, ref) => {\n  const { title, className, ...rest } = props\n\n  return <Heading ref={ref} className={cn('section-heading', className)} html={title} {...rest} />\n})\n\nexport default SectionHeading\n"],
+  "mappings": "AAQS,cAAAA,MAAA,oBART,OAAOC,MAAW,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,4BAExB,MAAMC,EAAiBH,EAAM,WAAgD,CAACI,EAAOC,IAAQ,CAC3F,KAAM,CAAE,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAK,EAAIJ,EAEtC,OAAOL,EAACG,EAAA,CAAQ,IAAKG,EAAK,UAAWJ,EAAG,kBAAmBM,CAAS,EAAG,KAAMD,EAAQ,GAAGE,EAAM,CAChG,CAAC,EAED,IAAOC,EAAQN",
+  "names": ["jsx", "React", "cn", "Heading", "SectionHeading", "props", "ref", "title", "className", "rest", "SectionHeading_default"]
+}

package/dist/esm/biz-components/SectionHeading/index.js

@@ -0,0 +1,2 @@
+var c=(b,a)=>()=>(a||b((a={exports:{}}).exports,a),a.exports);var d=c(()=>{});export default d();
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/SectionHeading/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SectionHeading/index.tsx"],
+  "sourcesContent": [""],
+  "mappings": "8DAAA,IAAAA,EAAAC,EAAA",
+  "names": ["require_SectionHeading", "__commonJSMin"]
+}

package/dist/esm/biz-components/SectionHeading/types.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SectionHeadingProps {
+    title: string;
+    className?: string;
+    children: React.ReactNode;
+}

package/dist/esm/biz-components/SectionHeading/types.js

@@ -0,0 +1,2 @@
+import"react";
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/SectionHeading/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SectionHeading/types.ts"],
+  "sourcesContent": ["import React from 'react'\nexport interface SectionHeadingProps {\n  title: string\n  className?: string\n  children: React.ReactNode\n}\n"],
+  "mappings": "AAAA,MAAkB",
+  "names": []
+}

package/dist/esm/biz-components/Shelf/Shelf.d.ts

@@ -0,0 +1,6 @@
+import type { ShelfProps } from './types.js';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

package/dist/esm/biz-components/Shelf/Shelf.js

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as h}from"react/jsx-runtime";import{withStyles as o}from"../../shared/Styles.js";const i=e=>(console.log("~ Shelf props",e),h("div",{children:[t("h1",{className:"text-2xl font-bold",children:e.title}),t("h2",{children:e.subtitle}),t("div",{children:e.products.map(l=>t("div",{children:l.name},l.sku))})]}));var d=o(i);export{d as default};
+//# sourceMappingURL=Shelf.js.map

package/dist/esm/biz-components/Shelf/Shelf.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Shelf/Shelf.tsx"],
+  "sourcesContent": ["/**\n * \u8FD9\u662F\u4E00\u4E2Ademo \u6A21\u7248\n */\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ShelfProps } from './types.js'\n\nconst Shelf = (props: ShelfProps) => {\n  console.log('~ Shelf props', props)\n  return (\n    <div>\n      <h1 className=\"text-2xl font-bold\">{props.title}</h1>\n      <h2>{props.subtitle}</h2>\n      <div>\n        {props.products.map(product => (\n          <div key={product.sku}>{product.name}</div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(Shelf)\n"],
+  "mappings": "AASI,OACE,OAAAA,EADF,QAAAC,MAAA,oBANJ,OAAS,cAAAC,MAAkB,yBAG3B,MAAMC,EAASC,IACb,QAAQ,IAAI,gBAAiBA,CAAK,EAEhCH,EAAC,OACC,UAAAD,EAAC,MAAG,UAAU,qBAAsB,SAAAI,EAAM,MAAM,EAChDJ,EAAC,MAAI,SAAAI,EAAM,SAAS,EACpBJ,EAAC,OACE,SAAAI,EAAM,SAAS,IAAIC,GAClBL,EAAC,OAAuB,SAAAK,EAAQ,MAAtBA,EAAQ,GAAmB,CACtC,EACH,GACF,GAIJ,IAAOC,EAAQJ,EAAWC,CAAK",
+  "names": ["jsx", "jsxs", "withStyles", "Shelf", "props", "product", "Shelf_default"]
+}

package/dist/esm/biz-components/Shelf/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Shelf.js';

package/dist/esm/biz-components/Shelf/index.js

@@ -0,0 +1,2 @@
+import{default as o}from"./Shelf.js";export{o as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Shelf/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Shelf/index.ts"],
+  "sourcesContent": ["export { default } from './Shelf.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe",
+  "names": ["default"]
+}

package/dist/esm/biz-components/Shelf/types.d.ts

@@ -0,0 +1,6 @@
+export type ShelfProps = {
+    id: string;
+    title: string;
+    subtitle: string;
+    products: any[];
+};

package/dist/esm/biz-components/Shelf/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/Shelf/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/esm/components/picture.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as d,jsxs as L}from"react/jsx-runtime";import b,{useCallback as f,useMemo as E}from"react";const I=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],_=3960,x=3980,S=n=>I.some(c=>n==c),$=(n="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(n),A=b.forwardRef(({imgClassName:n="",source:c="",quality:p=2,deviceSizes:u=[375,767,1023,1279,1439,1539,1919],className:h,...m},w)=>{const i=f(({src:t,width:r})=>{const s=r;try{const e=new URL(t);if(!S(e.hostname))return t;const o=e.pathname.split("/").pop()||"";if($(o)&&!/_[0-9]{2,4}x/.test(t)){const[g,a]=o.split(".");return`${e.origin}${e.pathname.replace(o,`${g}_${s<_?s:x}x.${a}`)}`}}catch{return t}},[]),l=f(({srcArr:t,width:r})=>{const s=r*p,e=i({src:t[0][0],width:s});let o;return t.forEach(a=>{var P=a[0];a.length>1&&parseInt(a[1],10)>=r&&(o=i({src:P,width:s}))}),d("source",{srcSet:o||e,media:`(max-width: ${r}px)`},r)},[i,p]),M=E(()=>{if(typeof c!="string"||!c)return[];let t;try{t=c.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(e=>e.split(" ").filter(Boolean))}catch(e){return console.log(e),[]}const r=u.map(e=>l({srcArr:t,width:e})),s=i({src:t[0][0],width:1920*p});return r.push(d("img",{src:s,className:`w-full ${n}`,...m},"default")),r},[u,n,i,p,m,c,l]);return L("picture",{ref:w,className:`block overflow-hidden ${h}`,children:[M,m.children]})});var y=A;export{y as default};
+"use client";import{jsx as d,jsxs as y}from"react/jsx-runtime";import E,{useCallback as f,useMemo as I}from"react";const _=["cdn.shopify.com","cdn.shopifycdn.net","www.facebook.com"],x=3960,S=3980,$=n=>_.some(c=>n==c),A=(n="")=>/\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(n),L=E.forwardRef(({imgClassName:n="",source:c="",quality:p=2,deviceSizes:l=[375,767,1023,1279,1439,1539,1919],className:h,loading:w="lazy",...m},M)=>{const i=f(({src:t,width:r})=>{const s=r;try{const e=new URL(t);if(!$(e.hostname))return t;const o=e.pathname.split("/").pop()||"";if(A(o)&&!/_[0-9]{2,4}x/.test(t)){const[g,a]=o.split(".");return`${e.origin}${e.pathname.replace(o,`${g}_${s<x?s:S}x.${a}`)}`}}catch{return t}},[]),u=f(({srcArr:t,width:r})=>{const s=r*p,e=i({src:t[0][0],width:s});let o;return t.forEach(a=>{var b=a[0];a.length>1&&parseInt(a[1],10)>=r&&(o=i({src:b,width:s}))}),d("source",{srcSet:o||e,media:`(max-width: ${r}px)`},r)},[i,p]),P=I(()=>{if(typeof c!="string"||!c)return[];let t;try{t=c.replace(/[\r\n]/g,"").replace(/\s\s+/g," ").split(",").map(e=>e.split(" ").filter(Boolean))}catch(e){return console.log(e),[]}const r=l.map(e=>u({srcArr:t,width:e})),s=i({src:t[0][0],width:1920*p});return r.push(d("img",{src:s,className:`w-full ${n}`,loading:w,...m},"default")),r},[l,n,i,p,c,u]);return y("picture",{ref:M,className:`block overflow-hidden ${h}`,children:[P,m.children]})});var F=L;export{F as default};
 //# sourceMappingURL=picture.js.map

package/dist/esm/components/picture.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/picture.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n      className,\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      try {\n        const parsedUrl = new URL(src)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return src\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n          const [name, extension] = fileName.split('.')\n          return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n            fileName,\n            `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n          )}`\n        }\n      } catch (error) {\n        return src\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n        let result\n        srcArr.forEach(ele => {\n          var img = ele[0]\n          if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n            result = imgSrcSetsize({ src: img, width: computedWidth })\n          }\n        })\n        const srcset = result || def\n        return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n      let srcArr\n      try {\n        srcArr = source\n          .replace(/[\\r\\n]/g, '')\n          .replace(/\\s\\s+/g, ' ')\n          .split(',')\n          .map(item => item.split(' ').filter(Boolean))\n      } catch (error) {\n        console.log(error)\n        return []\n      }\n      const sourceList = deviceSizes.map(width => {\n        return sourceSrcSet({ srcArr, width })\n      })\n\n      const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} {...rest} />)\n      return sourceList\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, rest, source, sourceSrcSet])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "rest", "ref", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error", "picture_default"]
+  "sourcesContent": ["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nconst APPEND_FILE_SUFFIX_MATCH_DOMAIN = ['cdn.shopify.com', 'cdn.shopifycdn.net', 'www.facebook.com']\n\nconst MAX_SIZE = 3960\nconst FIXED_MAX_SIZE = 3980\n\nexport interface PictureProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** picture \u5185\u90E8img \u6807\u7B7E\u7684\u7C7B\u540D */\n  imgClassName?: string\n  /** \u56FE\u7247url , \u652F\u6301\u4F20\u5165\u4E0D\u540C\u5206\u8FA8\u7387\u4E0B\u7684\u56FE\u7247\uFF0C\u6BD4\u5982\uFF0C\u683C\u5F0F \"url1 1920\uFF0C url2 1080, url3 767\" */\n  source?: string\n  /** \u56FE\u7247\u8D28\u91CF */\n  quality?: number\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\uFF0C\u5BF9\u5E94picture \u4E0Bsource \u7684max-width */\n  deviceSizes?: number[]\n}\n\nconst isMatchDomain = (srcDomain: string) => {\n  return APPEND_FILE_SUFFIX_MATCH_DOMAIN.some(domain => srcDomain == domain)\n}\nconst idMatchFileExtensions = (fileName: string = '') => /\\.(png|apng|jpg|jpeg|gif|svg|webp|tif)/.test(fileName)\n\nconst Picture = React.forwardRef<HTMLPictureElement, PictureProps>(\n  (\n    {\n      imgClassName = '',\n      source = '',\n      quality = 2,\n      deviceSizes = [375, 767, 1023, 1279, 1439, 1539, 1919],\n      className,\n      loading = 'lazy',\n      ...rest\n    }: PictureProps,\n    ref\n  ) => {\n    const imgSrcSetsize = useCallback(({ src, width }: { src: string; width: number }) => {\n      const size = width\n      try {\n        const parsedUrl = new URL(src)\n        if (!isMatchDomain(parsedUrl.hostname)) {\n          return src\n        }\n        const fileName = parsedUrl.pathname.split('/').pop() || ''\n        if (idMatchFileExtensions(fileName) && !/_[0-9]{2,4}x/.test(src)) {\n          const [name, extension] = fileName.split('.')\n          return `${parsedUrl.origin}${parsedUrl.pathname.replace(\n            fileName,\n            `${name}_${size < MAX_SIZE ? size : FIXED_MAX_SIZE}x.${extension}`\n          )}`\n        }\n      } catch (error) {\n        return src\n      }\n    }, [])\n\n    const sourceSrcSet = useCallback(\n      ({ srcArr, width }: { srcArr: string[][]; width: number }) => {\n        const computedWidth = width * quality\n        const def = imgSrcSetsize({ src: srcArr[0][0], width: computedWidth })\n        let result\n        srcArr.forEach(ele => {\n          var img = ele[0]\n          if (ele.length > 1 && parseInt(ele[1], 10) >= width) {\n            result = imgSrcSetsize({ src: img, width: computedWidth })\n          }\n        })\n        const srcset = result || def\n        return <source key={width} srcSet={srcset} media={`(max-width: ${width}px)`} />\n      },\n      [imgSrcSetsize, quality]\n    )\n\n    const sourceList = useMemo(() => {\n      if (typeof source !== 'string' || !source) return []\n      let srcArr\n      try {\n        srcArr = source\n          .replace(/[\\r\\n]/g, '')\n          .replace(/\\s\\s+/g, ' ')\n          .split(',')\n          .map(item => item.split(' ').filter(Boolean))\n      } catch (error) {\n        console.log(error)\n        return []\n      }\n      const sourceList = deviceSizes.map(width => {\n        return sourceSrcSet({ srcArr, width })\n      })\n\n      const img = imgSrcSetsize({ src: srcArr[0][0], width: 1920 * quality })\n\n      sourceList.push(<img key=\"default\" src={img} className={`w-full ${imgClassName}`} loading={loading} {...rest} />)\n      return sourceList\n    }, [deviceSizes, imgClassName, imgSrcSetsize, quality, source, sourceSrcSet])\n\n    return (\n      <picture ref={ref} className={`block overflow-hidden ${className}`}>\n        {sourceList}\n        {rest.children}\n      </picture>\n    )\n  }\n)\nexport default Picture\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useCallback", "useMemo", "APPEND_FILE_SUFFIX_MATCH_DOMAIN", "MAX_SIZE", "FIXED_MAX_SIZE", "isMatchDomain", "srcDomain", "domain", "idMatchFileExtensions", "fileName", "Picture", "imgClassName", "source", "quality", "deviceSizes", "className", "loading", "rest", "ref", "imgSrcSetsize", "src", "width", "size", "parsedUrl", "name", "extension", "sourceSrcSet", "srcArr", "computedWidth", "def", "result", "ele", "img", "sourceList", "item", "error", "picture_default"]
 }

package/dist/esm/helpers/GloablContext.d.ts

@@ -0,0 +1,10 @@
+export declare const GlobalContext: import("react").Context<{
+    gsap: null;
+    ScrollTrigger: null;
+    SplitText: null;
+}>;
+export declare const useGlobalContext: () => {
+    gsap: null;
+    ScrollTrigger: null;
+    SplitText: null;
+};

package/dist/esm/helpers/GloablContext.js

@@ -0,0 +1,2 @@
+import{createContext as t,useContext as e}from"react";const l=t({gsap:null,ScrollTrigger:null,SplitText:null}),n=()=>e(l);export{l as GlobalContext,n as useGlobalContext};
+//# sourceMappingURL=GloablContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/GloablContext.ts"],
+  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nexport const GlobalContext = createContext({\n  gsap: null,\n  ScrollTrigger: null,\n  SplitText: null,\n})\n\nexport const useGlobalContext = () => {\n  return useContext(GlobalContext)\n}\n"],
+  "mappings": "AAAA,OAAS,iBAAAA,EAAe,cAAAC,MAAkB,QAEnC,MAAMC,EAAgBF,EAAc,CACzC,KAAM,KACN,cAAe,KACf,UAAW,IACb,CAAC,EAEYG,EAAmB,IACvBF,EAAWC,CAAa",
+  "names": ["createContext", "useContext", "GlobalContext", "useGlobalContext"]
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
+export declare function assignRef<T = any>(ref: ReactRef<T> | null | undefined, value: T): void;
+export declare function useMergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]): (node: T | null) => void;

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

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

package/dist/esm/stories/shelf.stories.js

@@ -0,0 +1,2 @@
+import{Shelf as t}from"../biz-components/index.js";import"react";const e={title:"Biz-Components/Shelf",component:t,parameters:{layout:"centered"},tags:["autodocs"]};var a=e;const i={args:{id:"shelf",title:"this is title",subtitle:"this is subtitle",products:[{sku:"sku1",name:"product 1"},{sku:"sku2",name:"product 2"}]}};export{i as Default,a as default};
+//# sourceMappingURL=shelf.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/shelf.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Shelf } from '../biz-components/index.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Biz-Components/Shelf',\n  component: Shelf,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Shelf>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    id: 'shelf',\n    title: 'this is title',\n    subtitle: 'this is subtitle',\n    products: [\n      {\n        sku: 'sku1',\n        name: 'product 1',\n      },\n      {\n        sku: 'sku2',\n        name: 'product 2',\n      },\n    ],\n  },\n}\n"],
+  "mappings": "AAEA,OAAS,SAAAA,MAAa,6BACtB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,uBACP,UAAWD,EACX,WAAY,CACV,OAAQ,UACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,GAAI,QACJ,MAAO,gBACP,SAAU,mBACV,SAAU,CACR,CACE,IAAK,OACL,KAAM,WACR,EACA,CACE,IAAK,OACL,KAAM,WACR,CACF,CACF,CACF",
+  "names": ["Shelf", "meta", "shelf_stories_default", "Default"]
+}