@anker-in/headless-ui 1.0.26-alpha.1762330464162 → 1.0.26-alpha.1762331489014

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/TabsWithMedia/TabsWithMedia.tsx"],
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { TabsWithMediaProps, TabItem, TimeIndex } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, EffectFade } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { useMediaQuery } from 'react-responsive'\n\nconst componentType = 'video'\nconst componentName = 'tabs_with_media'\n\n// \u9ED8\u8BA4\u65F6\u95F4\u70B9\u914D\u7F6E\nconst defaultTimeIdx: TimeIndex[] = [\n  { time: 2.4, point: 2.4, highlightIdx: 0 },\n  { time: 2.5, point: 4.9, highlightIdx: 1 },\n  { time: 2.5, point: 7.4, highlightIdx: 2 },\n  { time: 2.8, point: 10.2, highlightIdx: 3 },\n  { time: 2.6, point: 12.8, highlightIdx: 4 },\n  { time: 3.2, point: 16, highlightIdx: 5 },\n]\n\nconst TabsWithMedia = React.forwardRef<HTMLDivElement, TabsWithMediaProps>(({ data, className }, ref) => {\n  const { title, poster, video, mobvideo, items = [], timeIdx = defaultTimeIdx } = data\n\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const tabRefs = useRef<(HTMLDivElement | null)[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const scrollToTabCenter = (index: number) => {\n    const container = scrollContainerRef.current\n    const tab = tabRefs.current[index]\n\n    if (container && tab) {\n      const containerRect = container.getBoundingClientRect()\n      const tabRect = tab.getBoundingClientRect()\n      const offset = tabRect.left - containerRect.left\n      const scroll = offset - container.clientWidth / 2 + tab.clientWidth / 2\n\n      container.scrollTo({\n        left: container.scrollLeft + scroll,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const isMob = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [list, listDouble, row, center, listLength] = useMemo(() => {\n    const row = 5\n    const center = 2\n    const listLength = items.length\n\n    const list =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index,\n          index: index,\n        }\n      }) || []\n\n    // \u4E3A\u7B2C\u4E8C\u4E2A\u5217\u8868\u7684\u5143\u7D20\u521B\u5EFA\u552F\u4E00\u7684 key,\u907F\u514D\u91CD\u590D\n    const listSecond = items?.map((item: TabItem, index: number) => {\n      return {\n        ...item,\n        key: index + listLength,\n        index: index,\n      }\n    }) || []\n\n    return [list, list.concat(listSecond), row, center, listLength]\n  }, [items, isMob])\n\n  const [idx, setIdx] = useState(center)\n\n  const [cureentList, setCureentList] = useState(listDouble.slice(0, row))\n\n  // \u70B9\u51FB tab \u8DF3\u8F6C\u5BF9\u5E94\u89C6\u9891\u4F4D\u7F6E\n  const handleNavClick = (key: number, index: number, isAuto?: boolean) => {\n    if (key === idx) return\n    if (index === center) return\n    if (index > center) {\n      const gap = index - center\n      const copy = [...cureentList]\n      copy.splice(0, gap)\n      const lastkey = (cureentList[cureentList.length - 1] as any)?.key + 1\n      const add = [...listDouble].splice(lastkey, gap)\n      copy.push(...add)\n      setCureentList([...copy])\n    }\n    if (index < center) {\n      const gap = center - index\n      const copy = [...cureentList]\n      copy.splice(-gap)\n      const firstkey = (cureentList[0] as any)?.key\n      const add = [...listDouble].splice(listLength + firstkey - gap, gap)\n      copy.unshift(...add)\n      setCureentList([...copy])\n    }\n\n    setIdx(key)\n    swiper?.slideTo(key)\n\n    if (!isAuto) {\n      let time = 0\n      timeIdx.forEach(item => {\n        if (item.highlightIdx < key) {\n          time += item.time\n        }\n      })\n      if (videoRef.current) {\n        videoRef.current.currentTime = time\n      }\n    }\n  }\n\n  // \u64AD\u653E\u65F6\u6839\u636E\u65F6\u95F4\u5207\u6362 Swiper + tab\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n\n    const handleTimeUpdate = () => {\n      const currentTime = video.currentTime\n\n      // \u81EA\u52A8\u5207\u6362\u5185\u5BB9\n      for (let i = 0; i < timeIdx.length; i++) {\n        const prev = i === 0 ? 0 : timeIdx[i - 1].point\n        if (currentTime >= prev && currentTime < timeIdx[i].point) {\n          handleNavClick(timeIdx[i].highlightIdx, timeIdx[i].highlightIdx, true)\n          break\n        }\n      }\n\n      // \u4FEE\u590D\uFF1A\u64AD\u653E\u5230\u6700\u540E\u540E\u81EA\u52A8\u5F52\u96F6\u5E76\u91CD\u65B0\u64AD\u653E\n      if (currentTime >= timeIdx[timeIdx.length - 1].point) {\n        video.currentTime = 0\n        video.play()\n      }\n    }\n\n    video.addEventListener('timeupdate', handleTimeUpdate)\n    return () => {\n      video.removeEventListener('timeupdate', handleTimeUpdate)\n    }\n  }, [swiper, timeIdx])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabsWithMedia\"\n      className={cn('tabs-with-media flex flex-col overflow-hidden text-[#fff] sm:overflow-visible', className)}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"tabs-with-media__title text-center\" />\n      <div className=\"tabs-with-media__tabs-wrapper relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible\">\n        <div className={cn('tabs-with-media__tabs-inner mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit')}>\n          <div\n            className={cn('tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]')}\n            ref={scrollContainerRef}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {cureentList?.map((item: any, index: number) => (\n                <motion.div\n                  layout\n                  key={item?.key}\n                  ref={el => {\n                    tabRefs.current[item?.index] = el\n                  }}\n                  onClick={() => {\n                    handleNavClick(item?.key, index)\n                  }}\n                  className=\"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible\"\n                  initial={{ opacity: 1 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  transition={{\n                    duration: 0.3,\n                    ease: 'easeOut',\n                  }}\n                >\n                  <div className=\"tabs-with-media__tab-inner flex items-center justify-between\">\n                    <div\n                      className={cn('tabs-with-media__tab-content flex', {\n                        'flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1':\n                          idx === item?.key,\n                      })}\n                    >\n                      <div\n                        className={cn(\n                          'tabs-with-media__tab-icon flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]',\n                          {\n                            'h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]':\n                              idx !== item?.index,\n                          }\n                        )}\n                        style={\n                          idx === item?.key\n                            ? {\n                                background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                              }\n                            : undefined\n                        }\n                      >\n                        <Picture\n                          source={item?.icon?.url}\n                          alt={item?.icon?.alt}\n                          className=\"tabs-with-media__tab-icon-image h-[22px] w-[22px] md:h-[14px] md:w-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"tabs-with-media__tab-text-wrapper\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            'tabs-with-media__tab-text dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]',\n                            {\n                              'h-auto w-[calc-size(auto,size)] px-[6px] opacity-100': idx === item?.key,\n                            }\n                          )}\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n      <div className=\"tabs-with-media__description-container mt-[16px] lg-desktop:mt-[24px]\">\n        <Swiper\n          slidesPerView={1}\n          effect=\"fade\"\n          fadeEffect={{ crossFade: true }}\n          modules={[Pagination, EffectFade]}\n          onSlideChange={swiper => {\n            const newIndex = swiper.realIndex\n            setIdx(newIndex)\n          }}\n          onSwiper={swiper => setSwiper(swiper)}\n          className=\"tabs-with-media__description-swiper\"\n        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide key={ind} style={{ transition: 'opacity 1s ease-in-out' }} className=\"tabs-with-media__description-slide rounded-[26px]\">\n              <div className=\"tabs-with-media__description-content\">\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"tabs-with-media__description-text text-center desktop:text-[20px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"tabs-with-media__video-wrapper mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]\">\n        <video\n          className=\"tabs-with-media__video mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]\"\n          src={isMob ? mobvideo?.url : video?.url}\n          poster={poster?.url}\n          playsInline\n          autoPlay\n          muted\n          loop\n          ref={videoRef}\n        />\n      </div>\n    </section>\n  )\n})\n\nTabsWithMedia.displayName = 'TabsWithMedia'\n\nexport default withLayout(TabsWithMedia)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useImperativeHandle", "useMemo", "useRef", "useState", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "Swiper", "SwiperSlide", "Pagination", "EffectFade", "motion", "AnimatePresence", "useMediaQuery", "componentType", "componentName", "defaultTimeIdx", "TabsWithMedia", "data", "className", "ref", "title", "poster", "video", "mobvideo", "items", "timeIdx", "swiper", "setSwiper", "tabRefs", "scrollContainerRef", "videoRef", "boxRef", "scrollToTabCenter", "index", "container", "tab", "containerRect", "scroll", "isMob", "list", "listDouble", "row", "center", "listLength", "item", "listSecond", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind", "TabsWithMedia_default"]
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{jsx as t,jsxs as l}from"react/jsx-runtime";import"react";import{Heading as O,Picture as D}from"../../components/index.js";import{useRef as x,useState as u,useEffect as E,useCallback as i}from"react";import{cn as C}from"../../helpers/index.js";const F=()=>l("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]",children:[t("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),K=()=>l("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]",children:[t("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]});function Z({data:I,className:S}){const R=x(null),T=x(null),z=x(null),{title:b,items:s=[]}=I,[p,d]=u(1),[a,k]=u(!1),[y,U]=u(0),[N,X]=u(0),r=s.length>0?[s[s.length-1],...s,s[0]]:[],v=i(()=>{d(e=>{const o=e-1;return o<0?r.length-2:o})},[r.length]),h=i(()=>{d(e=>{const o=e+1;return o>=r.length-1?1:o})},[r.length]),A=e=>{k(!0),U(e.pageX),X(p)},m=i(e=>{if(!a)return;e.preventDefault();const o=e.pageX,n=(y-o)/100,c=Math.round(N+n);c>=0&&c<r.length&&d(c)},[a,y,N,r.length]),w=i(()=>{k(!1)},[]),H=i(e=>{},[]),g=i(e=>{e.key==="ArrowLeft"?v():e.key==="ArrowRight"&&h()},[v,h]);E(()=>{if(a)return document.addEventListener("mousemove",m),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",w)}},[a,m,w]),E(()=>(window.addEventListener("keydown",g),()=>{window.removeEventListener("keydown",g)}),[g]);const P=e=>{const o=e-p,n=Math.abs(o),c=typeof window<"u"&&window.innerWidth>=1921,L=typeof window<"u"&&window.innerWidth>=1441,M=typeof window<"u"&&window.innerWidth>=1025;let f=427;!c&&L?f=334:!L&&M?f=230:M||(f=286);const W=o*f,j=n===0?0:-300*n,B=n===0?1:.85-n*.1,_=n===0?1:.6,$=n===0?100:50;return{transform:`translateX(${W}px) translateZ(${j}px) scale(${Math.max(B,.5)})`,opacity:Math.max(_,.3),filter:`brightness(${$}%) contrast(120%)`,transition:a?"none":"all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",zIndex:100-n}};return!s||s.length===0?null:l("section",{className:C("laptop:overflow-hidden w-full overflow-visible text-white",S),ref:R,children:[b&&t(O,{as:"h1",size:4,html:b,className:"laptop:text-center text-left"}),t("div",{className:"laptop:block relative mx-auto mt-[24px] hidden w-full",children:l("div",{className:"relative mx-auto h-[480px] w-full overflow-visible",style:{perspective:"1200px"},children:[t("div",{ref:T,className:C("absolute left-1/2 top-1/2 h-full w-[824px] -translate-x-1/2 -translate-y-1/2",a?"cursor-grabbing":"cursor-grab"),style:{transformStyle:"preserve-3d"},onMouseDown:A,children:r.map((e,o)=>t("div",{className:"absolute left-1/2 top-0 h-full w-[824px] -translate-x-1/2 overflow-hidden rounded-[16px]",style:P(o),onClick:()=>o!==p&&d(o),children:l("div",{className:"relative size-full",children:[t(D,{source:e.imageUrl,alt:e.title||"",className:"size-full object-cover"}),t("div",{className:"absolute inset-0 bg-black/60"}),e.title&&l("div",{className:"absolute inset-x-0 bottom-0 p-8",children:[t("h3",{className:"font-['Mont_For_Anker:SemiBold'] text-[32px] leading-[1.2] tracking-[-1.28px] text-white",children:e.title}),e.description&&t("p",{className:"mt-1 font-['Mont_For_Anker:SemiBold'] text-[18px] leading-[1.4] tracking-[-0.36px] text-white",children:e.description})]})]})},o))}),l("div",{className:"laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] pointer-events-none absolute left-1/2 top-1/2 z-[200] flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[t("button",{onClick:v,className:"pointer-events-auto transition-transform hover:scale-110 active:scale-95","aria-label":"Previous slide",children:t(F,{})}),t("button",{onClick:h,className:"pointer-events-auto transition-transform hover:scale-110 active:scale-95","aria-label":"Next slide",children:t(K,{})})]})]})}),t("div",{className:"laptop:hidden mt-[24px] block w-full",children:t("div",{ref:z,className:"flex gap-3 overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",onScroll:H,children:s.map((e,o)=>l("div",{className:"relative h-[360px] w-[296px] flex-shrink-0 overflow-hidden rounded-xl shadow-lg",children:[t(D,{source:e.mobImageUrl||e.imageUrl,alt:e.title||"",className:"size-full object-cover"}),e.title&&t("div",{className:"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-6",children:t("p",{className:"text-[24px] leading-[1.2] tracking-[-0.96px] text-white",children:e.title})})]},o))})})]})}export{Z as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/ThreeDCarousel/index.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport { Heading, Picture } from '../../components/index.js'\nimport { useRef, useState, useEffect, useCallback } from 'react'\nimport { cn } from '../../helpers/index.js'\n\nconst ChevronLeft = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst ChevronRight = () => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"lg-desktop:scale-100 scale-[70%] text-white transition-colors hover:text-[#1f1f1f]\"\n  >\n    <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n    <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\ninterface CarouselItem {\n  imageUrl: string\n  mobImageUrl?: string\n  title?: string\n  description?: string\n}\n\ninterface ThreeDCarouselProps {\n  data: {\n    title?: string\n    items: CarouselItem[]\n  }\n  className?: string\n}\n\nexport default function ThreeDCarousel({ data, className }: ThreeDCarouselProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const trackRef = useRef<HTMLDivElement>(null)\n  const mobileTrackRef = useRef<HTMLDivElement>(null)\n  const { title, items = [] } = data\n\n  const [activeIndex, setActiveIndex] = useState(1)\n  const [isDragging, setIsDragging] = useState(false)\n  const [startX, setStartX] = useState(0)\n  const [scrollLeft, setScrollLeft] = useState(0)\n\n  // \u521B\u5EFA\u5FAA\u73AF\u6570\u7EC4\uFF08\u5728\u5F00\u5934\u548C\u7ED3\u5C3E\u6DFB\u52A0\u514B\u9686\uFF09\n  const extendedItems = items.length > 0 ? [items[items.length - 1], ...items, items[0]] : []\n\n  // \u5904\u7406\u684C\u9762\u7AEF\u5207\u6362\n  const handlePrev = useCallback(() => {\n    setActiveIndex(prev => {\n      const newIndex = prev - 1\n      if (newIndex < 0) {\n        return extendedItems.length - 2\n      }\n      return newIndex\n    })\n  }, [extendedItems.length])\n\n  const handleNext = useCallback(() => {\n    setActiveIndex(prev => {\n      const newIndex = prev + 1\n      if (newIndex >= extendedItems.length - 1) {\n        return 1\n      }\n      return newIndex\n    })\n  }, [extendedItems.length])\n\n  // \u5904\u7406\u684C\u9762\u7AEF\u62D6\u62FD\n  const handleMouseDown = (e: React.MouseEvent) => {\n    setIsDragging(true)\n    setStartX(e.pageX)\n    setScrollLeft(activeIndex)\n  }\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!isDragging) return\n      e.preventDefault()\n      const x = e.pageX\n      const walk = (startX - x) / 100 // \u8C03\u6574\u7075\u654F\u5EA6\n      const newIndex = Math.round(scrollLeft + walk)\n\n      if (newIndex >= 0 && newIndex < extendedItems.length) {\n        setActiveIndex(newIndex)\n      }\n    },\n    [isDragging, startX, scrollLeft, extendedItems.length]\n  )\n\n  const handleMouseUp = useCallback(() => {\n    setIsDragging(false)\n  }, [])\n\n  // \u5904\u7406\u79FB\u52A8\u7AEF\u6EDA\u52A8\uFF08\u7528\u4E8E\u672A\u6765\u53EF\u80FD\u7684\u6EDA\u52A8\u6307\u793A\u5668\uFF09\n  const handleMobileScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {\n    // \u53EF\u4EE5\u5728\u8FD9\u91CC\u6DFB\u52A0\u6EDA\u52A8\u4F4D\u7F6E\u8FFD\u8E2A\u903B\u8F91\n  }, [])\n\n  // \u952E\u76D8\u4E8B\u4EF6\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'ArrowLeft') {\n        handlePrev()\n      } else if (e.key === 'ArrowRight') {\n        handleNext()\n      }\n    },\n    [handlePrev, handleNext]\n  )\n\n  useEffect(() => {\n    if (isDragging) {\n      document.addEventListener('mousemove', handleMouseMove)\n      document.addEventListener('mouseup', handleMouseUp)\n      return () => {\n        document.removeEventListener('mousemove', handleMouseMove)\n        document.removeEventListener('mouseup', handleMouseUp)\n      }\n    }\n  }, [isDragging, handleMouseMove, handleMouseUp])\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleKeyDown)\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [handleKeyDown])\n\n  // \u8BA1\u7B97\u6BCF\u4E2A\u5361\u7247\u7684\u53D8\u6362\n  const getCardStyle = (index: number) => {\n    const offset = index - activeIndex\n    const absOffset = Math.abs(offset)\n\n    // \u6839\u636E\u5C4F\u5E55\u5C3A\u5BF8\u8C03\u6574\u53C2\u6570\n    const isLargeDesktop = typeof window !== 'undefined' && window.innerWidth >= 1921\n    const isDesktop = typeof window !== 'undefined' && window.innerWidth >= 1441\n    const isSmallDesktop = typeof window !== 'undefined' && window.innerWidth >= 1025\n\n    let stretch = 427\n    if (!isLargeDesktop && isDesktop) stretch = 334\n    else if (!isDesktop && isSmallDesktop) stretch = 230\n    else if (!isSmallDesktop) stretch = 286\n\n    // \u8BA1\u7B97\u4F4D\u7F6E\n    const translateX = offset * stretch\n    const translateZ = absOffset === 0 ? 0 : -300 * absOffset\n    const scale = absOffset === 0 ? 1 : 0.85 - absOffset * 0.1\n    const opacity = absOffset === 0 ? 1 : 0.6\n    const brightness = absOffset === 0 ? 100 : 50\n\n    return {\n      transform: `translateX(${translateX}px) translateZ(${translateZ}px) scale(${Math.max(scale, 0.5)})`,\n      opacity: Math.max(opacity, 0.3),\n      filter: `brightness(${brightness}%) contrast(120%)`,\n      transition: isDragging ? 'none' : 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',\n      zIndex: 100 - absOffset,\n    }\n  }\n\n  if (!items || items.length === 0) {\n    return null\n  }\n\n  return (\n    <section className={cn('laptop:overflow-hidden w-full overflow-visible text-white', className)} ref={containerRef}>\n      {title && <Heading as=\"h1\" size={4} html={title} className=\"laptop:text-center text-left\" />}\n\n      {/* \u684C\u9762\u7AEF 3D \u8F6E\u64AD */}\n      <div className=\"laptop:block relative mx-auto mt-[24px] hidden w-full\">\n        <div className=\"relative mx-auto h-[480px] w-full overflow-visible\" style={{ perspective: '1200px' }}>\n          <div\n            ref={trackRef}\n            className={cn(\n              'absolute left-1/2 top-1/2 h-full w-[824px] -translate-x-1/2 -translate-y-1/2',\n              isDragging ? 'cursor-grabbing' : 'cursor-grab'\n            )}\n            style={{ transformStyle: 'preserve-3d' }}\n            onMouseDown={handleMouseDown}\n          >\n            {extendedItems.map((item, index) => (\n              <div\n                key={index}\n                className=\"absolute left-1/2 top-0 h-full w-[824px] -translate-x-1/2 overflow-hidden rounded-[16px]\"\n                style={getCardStyle(index)}\n                onClick={() => index !== activeIndex && setActiveIndex(index)}\n              >\n                <div className=\"relative size-full\">\n                  <Picture source={item.imageUrl} alt={item.title || ''} className=\"size-full object-cover\" />\n                  <div className=\"absolute inset-0 bg-black/60\" />\n                  {item.title && (\n                    <div className=\"absolute inset-x-0 bottom-0 p-8\">\n                      <h3 className=\"font-['Mont_For_Anker:SemiBold'] text-[32px] leading-[1.2] tracking-[-1.28px] text-white\">\n                        {item.title}\n                      </h3>\n                      {item.description && (\n                        <p className=\"mt-1 font-['Mont_For_Anker:SemiBold'] text-[18px] leading-[1.4] tracking-[-0.36px] text-white\">\n                          {item.description}\n                        </p>\n                      )}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* \u5BFC\u822A\u6309\u94AE */}\n          <div className=\"laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] pointer-events-none absolute left-1/2 top-1/2 z-[200] flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n            <button\n              onClick={handlePrev}\n              className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n              aria-label=\"Previous slide\"\n            >\n              <ChevronLeft />\n            </button>\n            <button\n              onClick={handleNext}\n              className=\"pointer-events-auto transition-transform hover:scale-110 active:scale-95\"\n              aria-label=\"Next slide\"\n            >\n              <ChevronRight />\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* \u79FB\u52A8\u7AEF\u6A2A\u5411\u6EDA\u52A8 */}\n      <div className=\"laptop:hidden mt-[24px] block w-full\">\n        <div\n          ref={mobileTrackRef}\n          className=\"flex gap-3 overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\"\n          onScroll={handleMobileScroll}\n        >\n          {items.map((item, index) => (\n            <div\n              key={index}\n              className=\"relative h-[360px] w-[296px] flex-shrink-0 overflow-hidden rounded-xl shadow-lg\"\n            >\n              <Picture\n                source={item.mobImageUrl || item.imageUrl}\n                alt={item.title || ''}\n                className=\"size-full object-cover\"\n              />\n              {item.title && (\n                <div className=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent p-6\">\n                  <p className=\"text-[24px] leading-[1.2] tracking-[-0.96px] text-white\">{item.title}</p>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n"],
+  "mappings": "AAME,OAQE,OAAAA,EARF,QAAAC,MAAA,oBANF,MAAkB,QAClB,OAAS,WAAAC,EAAS,WAAAC,MAAe,4BACjC,OAAS,UAAAC,EAAQ,YAAAC,EAAU,aAAAC,EAAW,eAAAC,MAAmB,QACzD,OAAS,MAAAC,MAAU,yBAEnB,MAAMC,EAAc,IAClBR,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,qFAEV,UAAAD,EAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAK,eAAe,YAAY,MAAM,EACrEA,EAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,UAAU,cAAc,QAAQ,eAAe,QAAQ,GACjH,EAGIU,EAAe,IACnBT,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,qFAEV,UAAAD,EAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAK,eAAe,YAAY,MAAM,EACrEA,EAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,UAAU,cAAc,QAAQ,eAAe,QAAQ,GACjH,EAkBa,SAARW,EAAgC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAwB,CAC/E,MAAMC,EAAeV,EAAuB,IAAI,EAC1CW,EAAWX,EAAuB,IAAI,EACtCY,EAAiBZ,EAAuB,IAAI,EAC5C,CAAE,MAAAa,EAAO,MAAAC,EAAQ,CAAC,CAAE,EAAIN,EAExB,CAACO,EAAaC,CAAc,EAAIf,EAAS,CAAC,EAC1C,CAACgB,EAAYC,CAAa,EAAIjB,EAAS,EAAK,EAC5C,CAACkB,EAAQC,CAAS,EAAInB,EAAS,CAAC,EAChC,CAACoB,EAAYC,CAAa,EAAIrB,EAAS,CAAC,EAGxCsB,EAAgBT,EAAM,OAAS,EAAI,CAACA,EAAMA,EAAM,OAAS,CAAC,EAAG,GAAGA,EAAOA,EAAM,CAAC,CAAC,EAAI,CAAC,EAGpFU,EAAarB,EAAY,IAAM,CACnCa,EAAeS,GAAQ,CACrB,MAAMC,EAAWD,EAAO,EACxB,OAAIC,EAAW,EACNH,EAAc,OAAS,EAEzBG,CACT,CAAC,CACH,EAAG,CAACH,EAAc,MAAM,CAAC,EAEnBI,EAAaxB,EAAY,IAAM,CACnCa,EAAeS,GAAQ,CACrB,MAAMC,EAAWD,EAAO,EACxB,OAAIC,GAAYH,EAAc,OAAS,EAC9B,EAEFG,CACT,CAAC,CACH,EAAG,CAACH,EAAc,MAAM,CAAC,EAGnBK,EAAmB,GAAwB,CAC/CV,EAAc,EAAI,EAClBE,EAAU,EAAE,KAAK,EACjBE,EAAcP,CAAW,CAC3B,EAEMc,EAAkB1B,EACrB,GAAkB,CACjB,GAAI,CAACc,EAAY,OACjB,EAAE,eAAe,EACjB,MAAMa,EAAI,EAAE,MACNC,GAAQZ,EAASW,GAAK,IACtBJ,EAAW,KAAK,MAAML,EAAaU,CAAI,EAEzCL,GAAY,GAAKA,EAAWH,EAAc,QAC5CP,EAAeU,CAAQ,CAE3B,EACA,CAACT,EAAYE,EAAQE,EAAYE,EAAc,MAAM,CACvD,EAEMS,EAAgB7B,EAAY,IAAM,CACtCe,EAAc,EAAK,CACrB,EAAG,CAAC,CAAC,EAGCe,EAAqB9B,EAAa,GAAqC,CAE7E,EAAG,CAAC,CAAC,EAGC+B,EAAgB/B,EACnB,GAAqB,CAChB,EAAE,MAAQ,YACZqB,EAAW,EACF,EAAE,MAAQ,cACnBG,EAAW,CAEf,EACA,CAACH,EAAYG,CAAU,CACzB,EAEAzB,EAAU,IAAM,CACd,GAAIe,EACF,gBAAS,iBAAiB,YAAaY,CAAe,EACtD,SAAS,iBAAiB,UAAWG,CAAa,EAC3C,IAAM,CACX,SAAS,oBAAoB,YAAaH,CAAe,EACzD,SAAS,oBAAoB,UAAWG,CAAa,CACvD,CAEJ,EAAG,CAACf,EAAYY,EAAiBG,CAAa,CAAC,EAE/C9B,EAAU,KACR,OAAO,iBAAiB,UAAWgC,CAAa,EACzC,IAAM,CACX,OAAO,oBAAoB,UAAWA,CAAa,CACrD,GACC,CAACA,CAAa,CAAC,EAGlB,MAAMC,EAAgBC,GAAkB,CACtC,MAAMC,EAASD,EAAQrB,EACjBuB,EAAY,KAAK,IAAID,CAAM,EAG3BE,EAAiB,OAAO,OAAW,KAAe,OAAO,YAAc,KACvEC,EAAY,OAAO,OAAW,KAAe,OAAO,YAAc,KAClEC,EAAiB,OAAO,OAAW,KAAe,OAAO,YAAc,KAE7E,IAAIC,EAAU,IACV,CAACH,GAAkBC,EAAWE,EAAU,IACnC,CAACF,GAAaC,EAAgBC,EAAU,IACvCD,IAAgBC,EAAU,KAGpC,MAAMC,EAAaN,EAASK,EACtBE,EAAaN,IAAc,EAAI,EAAI,KAAOA,EAC1CO,EAAQP,IAAc,EAAI,EAAI,IAAOA,EAAY,GACjDQ,EAAUR,IAAc,EAAI,EAAI,GAChCS,EAAaT,IAAc,EAAI,IAAM,GAE3C,MAAO,CACL,UAAW,cAAcK,CAAU,kBAAkBC,CAAU,aAAa,KAAK,IAAIC,EAAO,EAAG,CAAC,IAChG,QAAS,KAAK,IAAIC,EAAS,EAAG,EAC9B,OAAQ,cAAcC,CAAU,oBAChC,WAAY9B,EAAa,OAAS,wCAClC,OAAQ,IAAMqB,CAChB,CACF,EAEA,MAAI,CAACxB,GAASA,EAAM,SAAW,EACtB,KAIPjB,EAAC,WAAQ,UAAWO,EAAG,4DAA6DK,CAAS,EAAG,IAAKC,EAClG,UAAAG,GAASjB,EAACE,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMe,EAAO,UAAU,+BAA+B,EAG1FjB,EAAC,OAAI,UAAU,wDACb,SAAAC,EAAC,OAAI,UAAU,qDAAqD,MAAO,CAAE,YAAa,QAAS,EACjG,UAAAD,EAAC,OACC,IAAKe,EACL,UAAWP,EACT,+EACAa,EAAa,kBAAoB,aACnC,EACA,MAAO,CAAE,eAAgB,aAAc,EACvC,YAAaW,EAEZ,SAAAL,EAAc,IAAI,CAACyB,EAAMZ,IACxBxC,EAAC,OAEC,UAAU,2FACV,MAAOuC,EAAaC,CAAK,EACzB,QAAS,IAAMA,IAAUrB,GAAeC,EAAeoB,CAAK,EAE5D,SAAAvC,EAAC,OAAI,UAAU,qBACb,UAAAD,EAACG,EAAA,CAAQ,OAAQiD,EAAK,SAAU,IAAKA,EAAK,OAAS,GAAI,UAAU,yBAAyB,EAC1FpD,EAAC,OAAI,UAAU,+BAA+B,EAC7CoD,EAAK,OACJnD,EAAC,OAAI,UAAU,kCACb,UAAAD,EAAC,MAAG,UAAU,2FACX,SAAAoD,EAAK,MACR,EACCA,EAAK,aACJpD,EAAC,KAAE,UAAU,gGACV,SAAAoD,EAAK,YACR,GAEJ,GAEJ,GApBKZ,CAqBP,CACD,EACH,EAGAvC,EAAC,OAAI,UAAU,gLACb,UAAAD,EAAC,UACC,QAAS4B,EACT,UAAU,2EACV,aAAW,iBAEX,SAAA5B,EAACS,EAAA,EAAY,EACf,EACAT,EAAC,UACC,QAAS+B,EACT,UAAU,2EACV,aAAW,aAEX,SAAA/B,EAACU,EAAA,EAAa,EAChB,GACF,GACF,EACF,EAGAV,EAAC,OAAI,UAAU,uCACb,SAAAA,EAAC,OACC,IAAKgB,EACL,UAAU,+KACV,SAAUqB,EAET,SAAAnB,EAAM,IAAI,CAACkC,EAAMZ,IAChBvC,EAAC,OAEC,UAAU,kFAEV,UAAAD,EAACG,EAAA,CACC,OAAQiD,EAAK,aAAeA,EAAK,SACjC,IAAKA,EAAK,OAAS,GACnB,UAAU,yBACZ,EACCA,EAAK,OACJpD,EAAC,OAAI,UAAU,gFACb,SAAAA,EAAC,KAAE,UAAU,0DAA2D,SAAAoD,EAAK,MAAM,EACrF,IAXGZ,CAaP,CACD,EACH,EACF,GACF,CAEJ",
+  "names": ["jsx", "jsxs", "Heading", "Picture", "useRef", "useState", "useEffect", "useCallback", "cn", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "data", "className", "containerRef", "trackRef", "mobileTrackRef", "title", "items", "activeIndex", "setActiveIndex", "isDragging", "setIsDragging", "startX", "setStartX", "scrollLeft", "setScrollLeft", "extendedItems", "handlePrev", "prev", "newIndex", "handleNext", "handleMouseDown", "handleMouseMove", "x", "walk", "handleMouseUp", "handleMobileScroll", "handleKeyDown", "getCardStyle", "index", "offset", "absOffset", "isLargeDesktop", "isDesktop", "isSmallDesktop", "stretch", "translateX", "translateZ", "scale", "opacity", "brightness", "item"]
+}

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as c}from"react/jsx-runtime";import y,{useImperativeHandle as N,useRef as o,useState as s}from"react";import{Heading as D,Text as w}from"../../components/index.js";import{cn as L}from"../../helpers/utils.js";import{withLayout as T}from"../../shared/Styles.js";import{useExposure as H}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as p}from"../../hooks/useIntersectionObserver.js";const M="video",E="video_feature",n=y.forwardRef(({data:u,className:m},v)=>{const{title:i,subtitle:l,poster:f,video:x,mobPoster:b,mobvideo:d}=u,t=o(null),r=o(null),a=o(null),[_,h]=s(""),[k,V]=s("");return H(t,{componentType:M,componentName:E,componentTitle:i,componentDescription:l}),N(v,()=>t.current),p(r,{once:!0,threshold:.1,callback:()=>{h(x.url)}}),p(a,{once:!0,threshold:.1,callback:()=>{d?.url&&V(d.url)}}),c("section",{ref:t,"data-ui-component-id":"VideoFeature",className:L("video-feature flex flex-col items-center rounded-[16px] text-white",m),children:[e(D,{as:"h2",size:4,html:i,className:"video-feature__title w-full text-left laptop:text-center"}),e(w,{as:"p",size:4,html:l,className:"video-feature__subtitle mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),c("div",{className:"video-feature__video-wrapper mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]",children:[e("div",{ref:r,className:"video-feature__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:f?.url,src:_,loop:!0,className:"video-feature__video video-feature__video--desktop hidden h-full w-full object-cover xl:h-[360px] tablet:block"})}),e("div",{ref:a,className:"video-feature__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:b?.url||"",src:k,loop:!0,className:"video-feature__video video-feature__video--mobile block tablet:hidden"})})]})]})});n.displayName="VideoFeature";var z=T(n);export{z as default};
+//# sourceMappingURL=VideoFeature.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/VideoFeature/VideoFeature.tsx"],
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport type { VideoFeatureProps } from './types.js'\n\nconst componentType = 'video'\nconst componentName = 'video_feature'\n\nconst VideoFeature = React.forwardRef<HTMLDivElement, VideoFeatureProps>(({ data, className }, ref) => {\n  const { title, subtitle, poster, video, mobPoster, mobvideo } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n  // \u63A7\u5236\u89C6\u9891\u662F\u5426\u52A0\u8F7D\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\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  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      setLoadedDesktopVideoSrc(video.url)\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobvideo?.url) {\n        setLoadedMobileVideoSrc(mobvideo.url)\n      }\n    },\n  })\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"VideoFeature\"\n      className={cn('video-feature flex flex-col items-center rounded-[16px] text-white', className)}\n    >\n      <Heading as={'h2'} size={4} html={title} className=\"video-feature__title w-full text-left laptop:text-center\" />\n      <Text\n        as={'p'}\n        size={4}\n        html={subtitle}\n        className=\"video-feature__subtitle mt-[4px] w-full text-left text-[14px] tablet:text-[14px] laptop:mt-[8px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div className=\"video-feature__video-wrapper mt-[24px] overflow-hidden rounded-[16px] xl:h-[360px]\">\n        <div ref={desktopVideoRef} className=\"video-feature__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={poster?.url}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"video-feature__video video-feature__video--desktop hidden h-full w-full object-cover xl:h-[360px] tablet:block\"\n          ></video>\n        </div>\n        <div ref={mobileVideoRef} className=\"video-feature__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobPoster?.url || ''}\n            src={loadedMobileVideoSrc}\n            loop\n            className=\"video-feature__video video-feature__video--mobile block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    </section>\n  )\n})\n\nVideoFeature.displayName = 'VideoFeature'\n\nexport default withLayout(VideoFeature)\n"],
+  "mappings": "aA0DM,cAAAA,EAOA,QAAAC,MAPA,oBAzDN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QAC7D,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,gCAAAC,MAAoC,yCAG7C,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAeZ,EAAM,WAA8C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAO,UAAAC,EAAW,SAAAC,CAAS,EAAIR,EAE1DS,EAASpB,EAAuB,IAAI,EACpCqB,EAAkBrB,EAAuB,IAAI,EAC7CsB,EAAiBtB,EAAuB,IAAI,EAG5C,CAACuB,EAAuBC,CAAwB,EAAIvB,EAAS,EAAE,EAC/D,CAACwB,EAAsBC,CAAuB,EAAIzB,EAAS,EAAE,EAEnE,OAAAK,EAAYc,EAAQ,CAClB,cAAAZ,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDhB,EAAoBc,EAAK,IAAMO,EAAO,OAAyB,EAG/Db,EAA6Bc,EAAiB,CAC5C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACdG,EAAyBP,EAAM,GAAG,CACpC,CACF,CAAC,EAGDV,EAA6Be,EAAgB,CAC3C,KAAM,GACN,UAAW,GACX,SAAU,IAAM,CACVH,GAAU,KACZO,EAAwBP,EAAS,GAAG,CAExC,CACF,CAAC,EAGCtB,EAAC,WACC,IAAKuB,EACL,uBAAqB,eACrB,UAAWhB,EAAG,qEAAsEQ,CAAS,EAE7F,UAAAhB,EAACM,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMY,EAAO,UAAU,2DAA2D,EAC9GlB,EAACO,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMY,EACN,UAAU,oLACZ,EACAlB,EAAC,OAAI,UAAU,qFACb,UAAAD,EAAC,OAAI,IAAKyB,EAAiB,UAAU,yCACnC,SAAAzB,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQoB,GAAQ,IAChB,IAAKO,EACL,KAAI,GACJ,UAAU,iHACX,EACH,EACA3B,EAAC,OAAI,IAAK0B,EAAgB,UAAU,wCAClC,SAAA1B,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQsB,GAAW,KAAO,GAC1B,IAAKO,EACL,KAAI,GACJ,UAAU,wEACX,EACH,GACF,GACF,CAEJ,CAAC,EAEDf,EAAa,YAAc,eAE3B,IAAOiB,EAAQtB,EAAWK,CAAY",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "Heading", "Text", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "componentType", "componentName", "VideoFeature", "data", "className", "ref", "title", "subtitle", "poster", "video", "mobPoster", "mobvideo", "boxRef", "desktopVideoRef", "mobileVideoRef", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "VideoFeature_default"]
+}

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{default as r}from"./BrandEquity/index.js";import{default as t}from"./MemberEquity/index.js";import{default as p}from"./Slogan/index.js";import{default as u}from"./Title/index.js";import{default as d}from"./Spacer/index.js";import{default as x}from"./ShelfDisplay/index.js";import{default as c}from"./Evaluate/index.js";import{default as h}from"./Category/index.js";import{default as M}from"./HeroBanner/index.js";import{default as G}from"./AccordionCards/index.js";import{default as g}from"./Graphic/index.js";import{default as C}from"./MediaPlayerBase/index.js";import{default as q}from"./MediaPlayerSticky/index.js";import{default as v}from"./MediaPlayerMulti/index.js";import{default as E}from"./Marquee/index.js";import{default as L}from"./WhyChoose/index.js";import{default as H}from"./Faq/index.js";import{MarqueeItem as F,MarqueeImageContent as N,MarqueeTextContent as _}from"./Marquee/index.js";import{default as D}from"./MultiLayoutGraphicBlock/index.js";import{default as R}from"./GraphicAttractionBlock/index.js";import{default as z}from"./HeaderNavigation/index.js";import{default as K}from"./FooterNavigation/index.js";import{default as U}from"./SearchPage/index.js";import{IPC_SEARCH_PAGE as X,SearchPageTabType as Y}from"./SearchPage/types.js";import{withLayout as $}from"../shared/Styles.js";import{default as ae}from"./AiuiProvider/index.js";import{default as oe}from"./Tabs/index.js";import{default as fe}from"./CreativeModule/index.js";import{default as le}from"./GraphicOverlay/index.js";import{default as se}from"./Specs/index.js";import{default as me}from"./TabsGroup/index.js";export{G as AccordionCards,ae as AiuiProvider,r as BrandEquity,h as Category,fe as CreativeModule,c as Evaluate,H as Faq,K as FooterNavigation,g as Graphic,R as GraphicAttractionBlock,le as GraphicOverlay,z as HeaderNavigation,M as HeroBanner,X as IPC_SEARCH_PAGE,E as Marquee,N as MarqueeImageContent,F as MarqueeItem,_ as MarqueeTextContent,C as MediaPlayerBase,v as MediaPlayerMulti,q as MediaPlayerSticky,t as MemberEquity,D as MultiLayoutGraphicBlock,U as SearchPage,Y as SearchPageTabType,x as ShelfDisplay,p as Slogan,d as Spacer,se as Specs,me as TabGroup,oe as Tabs,u as Title,L as WhyChoose,$ as withLayout};
+import{default as t}from"./BrandEquity/index.js";import{default as p}from"./MemberEquity/index.js";import{default as s}from"./Slogan/index.js";import{default as f}from"./Title/index.js";import{default as l}from"./Spacer/index.js";import{default as d}from"./ShelfDisplay/index.js";import{default as n}from"./Evaluate/index.js";import{default as h}from"./Category/index.js";import{default as g}from"./HeroBanner/index.js";import{default as C}from"./AccordionCards/index.js";import{default as T}from"./Graphic/index.js";import{default as b}from"./MediaPlayerBase/index.js";import{default as F}from"./MediaPlayerSticky/index.js";import{default as B}from"./MediaPlayerMulti/index.js";import{default as j}from"./Marquee/index.js";import{default as w}from"./MarqueeReview/index.js";import{default as W}from"./WhyChoose/index.js";import{default as E}from"./Faq/index.js";import{MarqueeItem as H,MarqueeImageContent as R,MarqueeTextContent as K}from"./Marquee/index.js";import{default as N}from"./MultiLayoutGraphicBlock/index.js";import{default as V}from"./GraphicAttractionBlock/index.js";import{default as z}from"./HeaderNavigation/index.js";import{default as Q}from"./FooterNavigation/index.js";import{default as X}from"./SearchPage/index.js";import{IPC_SEARCH_PAGE as $,SearchPageTabType as ee}from"./SearchPage/types.js";import{withLayout as re}from"../shared/Styles.js";import{default as oe}from"./AiuiProvider/index.js";import{default as ie}from"./Tabs/index.js";import{default as ce}from"./CreativeModule/index.js";import{default as ue}from"./GraphicOverlay/index.js";import{default as me}from"./Specs/index.js";import{default as xe}from"./TabsGroup/index.js";import{default as ye}from"./ProductCompare/index.js";import{default as Pe}from"./Ksp/index.js";import{default as Me}from"./ImageTextFeature/index.js";import{default as Se}from"./FeatureCards/index.js";import{default as Ie}from"./ImageWithText/index.js";import{default as qe}from"./VideoFeature/index.js";import{default as ve}from"./TabsWithMedia/index.js";import{default as Ge}from"./TabWithImage/index.js";import{default as ke}from"./FeatureShowcase/index.js";import{default as Ae}from"./ProductHero/index.js";import{default as De}from"./SpecsComparison/index.js";const e={"ipc-accordioncards":"AccordionCards","ipc-aplusdesc":"AplusDesc","ipc-banner":"HeroBanner","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"};export{C as AccordionCards,oe as AiuiProvider,t as BrandEquity,h as Category,ce as CreativeModule,n as Evaluate,E as Faq,Se as FeatureCards,ke as FeatureShowcase,Q as FooterNavigation,T as Graphic,V as GraphicAttractionBlock,ue as GraphicOverlay,z as HeaderNavigation,g as HeroBanner,$ as IPC_SEARCH_PAGE,Me as ImageTextFeature,Ie as ImageWithText,Pe as Ksp,j as Marquee,R as MarqueeImageContent,H as MarqueeItem,w as MarqueeReview,K as MarqueeTextContent,b as MediaPlayerBase,B as MediaPlayerMulti,F as MediaPlayerSticky,p as MemberEquity,N as MultiLayoutGraphicBlock,e as PAYLOAD_COMPONENT_MAP,ye as ProductCompare,Ae as ProductHero,X as SearchPage,ee as SearchPageTabType,d as ShelfDisplay,s as Slogan,l as Spacer,me as Specs,De as SpecsComparison,xe as TabGroup,Ge as TabWithImage,ie as Tabs,ve as TabsWithMedia,f as Title,qe as VideoFeature,W as WhyChoose,re as withLayout};
 //# sourceMappingURL=index.js.map

package/dist/esm/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'"],
-  "mappings": "AAAA,OAAoB,WAAXA,MAA8B,yBACvC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAAwB,mBACjC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA6B,wBACtC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAkC,6BAC3C,OAAoB,WAAXA,MAAoC,+BAC7C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAA4B,uBACrC,OAAoB,WAAXA,MAAsB,iBAC/B,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B,qBACrE,OAAoB,WAAXH,MAA0C,qCAEnD,OAAoB,WAAXA,MAAyC,oCAElD,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA6B,wBAEtC,OAAS,mBAAAI,EAAiB,qBAAAC,MAAyB,wBAEnD,OAAS,cAAAC,MAAkB,sBAC3B,OAAoB,WAAXN,OAA+B,0BACxC,OAAoB,WAAXA,OAAuB,kBAChC,OAAoB,WAAXA,OAAiC,4BAC1C,OAAoB,WAAXA,OAAiC,4BAC1C,OAAoB,WAAXA,OAAwB,mBACjC,OAAoB,WAAXA,OAA2B",
-  "names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent", "IPC_SEARCH_PAGE", "SearchPageTabType", "withLayout"]
+  "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 MarqueeReview } from './MarqueeReview/index.js'\nexport type { MarqueeReviewProps, MarqueeReviewData, ReviewItem } from './MarqueeReview/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'\nexport { default as ProductCompare } from './ProductCompare/index.js'\nexport type { ProductCompareProps, ProductItemData } from './ProductCompare/index.js'\nexport { default as Ksp } from './Ksp/index.js'\nexport type { KspProps, KspData, KspCardItem } from './Ksp/index.js'\nexport { default as ImageTextFeature } from './ImageTextFeature/index.js'\nexport type { ImageTextFeatureProps, ImageTextFeatureItem } from './ImageTextFeature/index.js'\nexport { default as FeatureCards } from './FeatureCards/index.js'\nexport type { FeatureCardsProps, FeatureCardItem } from './FeatureCards/index.js'\nexport { default as ImageWithText } from './ImageWithText/index.js'\nexport type { ImageWithTextProps } from './ImageWithText/index.js'\nexport { default as VideoFeature } from './VideoFeature/index.js'\nexport type { VideoFeatureProps } from './VideoFeature/index.js'\nexport { default as TabsWithMedia } from './TabsWithMedia/index.js'\nexport type { TabsWithMediaProps, TabItem, TimeIndex } from './TabsWithMedia/index.js'\nexport { default as TabWithImage } from './TabWithImage/index.js'\nexport type { TabWithImageProps, TabWithImageDataItem } from './TabWithImage/index.js'\nexport { default as FeatureShowcase } from './FeatureShowcase/index.js'\nexport type { FeatureShowcaseProps, FeatureShowcaseItem } from './FeatureShowcase/index.js'\nexport { default as ProductHero } from './ProductHero/index.js'\nexport type { ProductHeroProps } from './ProductHero/index.js'\nexport { default as SpecsComparison } from './SpecsComparison/index.js'\nexport type {\n  SpecsComparisonProps,\n  SpecsComparisonMenuItem,\n  SpecsComparisonLeftMenuItem,\n} from './SpecsComparison/index.js'\n\nexport const PAYLOAD_COMPONENT_MAP = {\n  'ipc-accordioncards': 'AccordionCards',\n  'ipc-aplusdesc': 'AplusDesc',\n  'ipc-banner': 'HeroBanner',\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}\n"],
+  "mappings": "AAAA,OAAoB,WAAXA,MAA8B,yBACvC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAAwB,mBACjC,OAAoB,WAAXA,MAAyB,oBAClC,OAAoB,WAAXA,MAA+B,0BACxC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA2B,sBACpC,OAAoB,WAAXA,MAA6B,wBACtC,OAAoB,WAAXA,MAAiC,4BAC1C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAkC,6BAC3C,OAAoB,WAAXA,MAAoC,+BAC7C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA0B,qBACnC,OAAoB,WAAXA,MAAgC,2BAEzC,OAAoB,WAAXA,MAA4B,uBACrC,OAAoB,WAAXA,MAAsB,iBAC/B,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B,qBACrE,OAAoB,WAAXH,MAA0C,qCAEnD,OAAoB,WAAXA,MAAyC,oCAElD,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAAmC,8BAC5C,OAAoB,WAAXA,MAA6B,wBAEtC,OAAS,mBAAAI,EAAiB,qBAAAC,OAAyB,wBAEnD,OAAS,cAAAC,OAAkB,sBAC3B,OAAoB,WAAXN,OAA+B,0BACxC,OAAoB,WAAXA,OAAuB,kBAChC,OAAoB,WAAXA,OAAiC,4BAC1C,OAAoB,WAAXA,OAAiC,4BAC1C,OAAoB,WAAXA,OAAwB,mBACjC,OAAoB,WAAXA,OAA2B,uBACpC,OAAoB,WAAXA,OAAiC,4BAE1C,OAAoB,WAAXA,OAAsB,iBAE/B,OAAoB,WAAXA,OAAmC,8BAE5C,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAgC,2BAEzC,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAgC,2BAEzC,OAAoB,WAAXA,OAA+B,0BAExC,OAAoB,WAAXA,OAAkC,6BAE3C,OAAoB,WAAXA,OAA8B,yBAEvC,OAAoB,WAAXA,OAAkC,6BAOpC,MAAMO,EAAwB,CACnC,qBAAsB,iBACtB,gBAAiB,YACjB,aAAc,aACd,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,WAEnB",
+  "names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent", "IPC_SEARCH_PAGE", "SearchPageTabType", "withLayout", "PAYLOAD_COMPONENT_MAP"]
 }

package/dist/esm/components/dialog.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as o,jsxs as r}from"react/jsx-runtime";import*as l from"react";import*as e from"@radix-ui/react-dialog";import{Cross2Icon as v}from"@radix-ui/react-icons";import{cn as s}from"../helpers/index.js";const d=e.Root;d.displayName="Dialog";const R=e.Trigger,m=e.Portal,N=e.Close,n=l.forwardRef(({className:t,...a},i)=>o(e.Overlay,{ref:i,className:s("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-[1000] bg-black/80",t),...a}));n.displayName=e.Overlay.displayName;const c=l.forwardRef(({className:t,children:a,overlayClassName:i,...D},u)=>r(m,{children:[o(n,{className:i}),r(e.Content,{ref:u,className:s("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] tablet:rounded-lg fixed left-1/2 top-1/2 z-[1001] grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200",t),...D,children:[a,r(e.Close,{className:"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",children:[o(v,{className:"size-4"}),o("span",{className:"sr-only",children:"Close"})]})]})]}));c.displayName=e.Content.displayName;const f=({className:t,...a})=>o("div",{className:s("tablet:text-left flex flex-col space-y-1.5 text-center",t),...a});f.displayName="DialogHeader";const p=({className:t,...a})=>o("div",{className:s("tablet:flex-row tablet:justify-end tablet:space-x-2 flex flex-col-reverse",t),...a});p.displayName="DialogFooter";const g=l.forwardRef(({className:t,...a},i)=>o(e.Title,{ref:i,className:s("text-lg font-semibold leading-none tracking-tight",t),...a}));g.displayName=e.Title.displayName;const y=l.forwardRef(({className:t,...a},i)=>o(e.Description,{ref:i,className:s("text-muted-foreground text-sm",t),...a}));y.displayName=e.Description.displayName;export{d as Dialog,N as DialogClose,c as DialogContent,y as DialogDescription,p as DialogFooter,f as DialogHeader,n as DialogOverlay,m as DialogPortal,g as DialogTitle,R as DialogTrigger};
+"use client";import{jsx as o,jsxs as r}from"react/jsx-runtime";import*as l from"react";import*as e from"@radix-ui/react-dialog";import{Cross2Icon as v}from"@radix-ui/react-icons";import{cn as s}from"../helpers/index.js";const d=e.Root;d.displayName="Dialog";const N=e.Trigger,m=e.Portal,R=e.Close,n=l.forwardRef(({className:t,...a},i)=>o(e.Overlay,{ref:i,className:s("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-[1000] bg-black/80",t),...a}));n.displayName=e.Overlay.displayName;const c=l.forwardRef(({className:t,children:a,overlayClassName:i,...y},u)=>r(m,{children:[o(n,{className:i}),r(e.Content,{ref:u,className:s("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] tablet:rounded-lg fixed left-1/2 top-1/2 z-[1001] grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200",t),...y,children:[a,r(e.Close,{className:"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none",children:[o(v,{className:"size-4"}),o("span",{className:"sr-only",children:"Close"})]})]})]}));c.displayName=e.Content.displayName;const p=({className:t,...a})=>o("div",{className:s("tablet:text-left flex flex-col space-y-1.5 text-center",t),...a});p.displayName="DialogHeader";const f=({className:t,...a})=>o("div",{className:s("tablet:flex-row tablet:justify-end tablet:space-x-2 flex flex-col-reverse",t),...a});f.displayName="DialogFooter";const g=l.forwardRef(({className:t,...a},i)=>o(e.Title,{ref:i,className:s("text-lg font-semibold leading-none tracking-tight",t),...a}));g.displayName=e.Title.displayName;const D=l.forwardRef(({className:t,...a},i)=>o(e.Description,{ref:i,className:s("text-muted-foreground text-sm",t),...a}));D.displayName=e.Description.displayName;export{d as Dialog,R as DialogClose,c as DialogContent,D as DialogDescription,f as DialogFooter,p as DialogHeader,n as DialogOverlay,m as DialogPortal,g as DialogTitle,N as DialogTrigger};
 //# sourceMappingURL=dialog.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dialog.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Cross2Icon } from '@radix-ui/react-icons'\n\nimport { cn } from '../helpers/index.js'\n\nconst Dialog = DialogPrimitive.Root\nDialog.displayName = 'Dialog'\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-[1000] bg-black/80',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    overlayClassName?: string\n  }\n>(({ className, children, overlayClassName, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay className={overlayClassName} />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] tablet:rounded-lg fixed left-1/2 top-1/2 z-[1001] grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n        <Cross2Icon className=\"size-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('tablet:text-left flex flex-col space-y-1.5 text-center', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('tablet:flex-row tablet:justify-end tablet:space-x-2 flex flex-col-reverse', className)}\n    {...props}\n  />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],
-  "mappings": "aAqBE,cAAAA,EA4BI,QAAAC,MA5BJ,oBAnBF,UAAYC,MAAW,QACvB,UAAYC,MAAqB,yBACjC,OAAS,cAAAC,MAAkB,wBAE3B,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAASH,EAAgB,KAC/BG,EAAO,YAAc,SAErB,MAAMC,EAAgBJ,EAAgB,QAEhCK,EAAeL,EAAgB,OAE/BM,EAAcN,EAAgB,MAE9BO,EAAgBR,EAAM,WAG1B,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAC1Bb,EAACG,EAAgB,QAAhB,CACC,IAAKU,EACL,UAAWR,EACT,8JACAM,CACF,EACC,GAAGC,EACN,CACD,EACDF,EAAc,YAAcP,EAAgB,QAAQ,YAEpD,MAAMW,EAAgBZ,EAAM,WAK1B,CAAC,CAAE,UAAAS,EAAW,SAAAI,EAAU,iBAAAC,EAAkB,GAAGJ,CAAM,EAAGC,IACtDZ,EAACO,EAAA,CACC,UAAAR,EAACU,EAAA,CAAc,UAAWM,EAAkB,EAC5Cf,EAACE,EAAgB,QAAhB,CACC,IAAKU,EACL,UAAWR,EACT,8fACAM,CACF,EACC,GAAGC,EAEH,UAAAG,EACDd,EAACE,EAAgB,MAAhB,CAAsB,UAAU,gRAC/B,UAAAH,EAACI,EAAA,CAAW,UAAU,SAAS,EAC/BJ,EAAC,QAAK,UAAU,UAAU,iBAAK,GACjC,GACF,GACF,CACD,EACDc,EAAc,YAAcX,EAAgB,QAAQ,YAEpD,MAAMc,EAAe,CAAC,CAAE,UAAAN,EAAW,GAAGC,CAAM,IAC1CZ,EAAC,OAAI,UAAWK,EAAG,yDAA0DM,CAAS,EAAI,GAAGC,EAAO,EAEtGK,EAAa,YAAc,eAE3B,MAAMC,EAAe,CAAC,CAAE,UAAAP,EAAW,GAAGC,CAAM,IAC1CZ,EAAC,OACC,UAAWK,EAAG,4EAA6EM,CAAS,EACnG,GAAGC,EACN,EAEFM,EAAa,YAAc,eAE3B,MAAMC,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAC1Bb,EAACG,EAAgB,MAAhB,CACC,IAAKU,EACL,UAAWR,EAAG,oDAAqDM,CAAS,EAC3E,GAAGC,EACN,CACD,EACDO,EAAY,YAAchB,EAAgB,MAAM,YAEhD,MAAMiB,EAAoBlB,EAAM,WAG9B,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAC1Bb,EAACG,EAAgB,YAAhB,CAA4B,IAAKU,EAAK,UAAWR,EAAG,gCAAiCM,CAAS,EAAI,GAAGC,EAAO,CAC9G,EACDQ,EAAkB,YAAcjB,EAAgB,YAAY",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { Cross2Icon } from '@radix-ui/react-icons'\n\nimport { cn } from '../helpers/index.js'\n\nconst Dialog = DialogPrimitive.Root\nDialog.displayName = 'Dialog'\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\ntype OverlayProps = DialogPrimitive.DialogOverlayProps & React.HTMLAttributes<HTMLDivElement>\n\n\nconst DialogOverlay = React.forwardRef<HTMLDivElement, OverlayProps>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-[1000] bg-black/80',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    overlayClassName?: string\n  }\n>(({ className, children, overlayClassName, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay className={overlayClassName} />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] tablet:rounded-lg fixed left-1/2 top-1/2 z-[1001] grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none\">\n        <Cross2Icon className=\"size-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('tablet:text-left flex flex-col space-y-1.5 text-center', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn('tablet:flex-row tablet:justify-end tablet:space-x-2 flex flex-col-reverse', className)}\n    {...props}\n  />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogClose,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],
+  "mappings": "aAqBE,cAAAA,EA4BI,QAAAC,MA5BJ,oBAnBF,UAAYC,MAAW,QACvB,UAAYC,MAAqB,yBACjC,OAAS,cAAAC,MAAkB,wBAE3B,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAASH,EAAgB,KAC/BG,EAAO,YAAc,SAErB,MAAMC,EAAgBJ,EAAgB,QAEhCK,EAAeL,EAAgB,OAE/BM,EAAcN,EAAgB,MAK9BO,EAAgBR,EAAM,WAAyC,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAC7Fb,EAACG,EAAgB,QAAhB,CACC,IAAKU,EACL,UAAWR,EACT,8JACAM,CACF,EACC,GAAGC,EACN,CACD,EACDF,EAAc,YAAcP,EAAgB,QAAQ,YAEpD,MAAMW,EAAgBZ,EAAM,WAK1B,CAAC,CAAE,UAAAS,EAAW,SAAAI,EAAU,iBAAAC,EAAkB,GAAGJ,CAAM,EAAGC,IACtDZ,EAACO,EAAA,CACC,UAAAR,EAACU,EAAA,CAAc,UAAWM,EAAkB,EAC5Cf,EAACE,EAAgB,QAAhB,CACC,IAAKU,EACL,UAAWR,EACT,8fACAM,CACF,EACC,GAAGC,EAEH,UAAAG,EACDd,EAACE,EAAgB,MAAhB,CAAsB,UAAU,gRAC/B,UAAAH,EAACI,EAAA,CAAW,UAAU,SAAS,EAC/BJ,EAAC,QAAK,UAAU,UAAU,iBAAK,GACjC,GACF,GACF,CACD,EACDc,EAAc,YAAcX,EAAgB,QAAQ,YAEpD,MAAMc,EAAe,CAAC,CAAE,UAAAN,EAAW,GAAGC,CAAM,IAC1CZ,EAAC,OAAI,UAAWK,EAAG,yDAA0DM,CAAS,EAAI,GAAGC,EAAO,EAEtGK,EAAa,YAAc,eAE3B,MAAMC,EAAe,CAAC,CAAE,UAAAP,EAAW,GAAGC,CAAM,IAC1CZ,EAAC,OACC,UAAWK,EAAG,4EAA6EM,CAAS,EACnG,GAAGC,EACN,EAEFM,EAAa,YAAc,eAE3B,MAAMC,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAC1Bb,EAACG,EAAgB,MAAhB,CACC,IAAKU,EACL,UAAWR,EAAG,oDAAqDM,CAAS,EAC3E,GAAGC,EACN,CACD,EACDO,EAAY,YAAchB,EAAgB,MAAM,YAEhD,MAAMiB,EAAoBlB,EAAM,WAG9B,CAAC,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,IAC1Bb,EAACG,EAAgB,YAAhB,CAA4B,IAAKU,EAAK,UAAWR,EAAG,gCAAiCM,CAAS,EAAI,GAAGC,EAAO,CAC9G,EACDQ,EAAkB,YAAcjB,EAAgB,YAAY",
   "names": ["jsx", "jsxs", "React", "DialogPrimitive", "Cross2Icon", "cn", "Dialog", "DialogTrigger", "DialogPortal", "DialogClose", "DialogOverlay", "className", "props", "ref", "DialogContent", "children", "overlayClassName", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription"]
 }

package/dist/esm/components/tabs.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as n}from"react/jsx-runtime";import*as o from"react";import{cn as d}from"../helpers/index.js";import*as s from"@radix-ui/react-tabs";import{cva as c}from"class-variance-authority";const m=o.createContext({align:"left",shape:"square"}),b=o.forwardRef(({children:t,align:e="left",shape:a="square",...i},r)=>n(s.Root,{ref:r,...i,children:n(m.Provider,{value:{align:e,shape:a},children:t})}));b.displayName="Tabs";const P=c("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),C=c("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),g=o.forwardRef(({className:t,...e},a)=>{const{align:i,shape:r}=o.useContext(m);return n(s.List,{ref:a,className:d("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",P({align:i,shape:r}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});g.displayName=s.List.displayName;const u=o.forwardRef(({className:t,onClick:e,...a},i)=>{const{shape:r}=o.useContext(m),T=p=>{e?.(p);const l=p?.currentTarget,f=p?.currentTarget?.parentElement;if(l&&f){const R=l.offsetLeft,y=l.offsetWidth,v=f.offsetWidth,x=R-v/2+y/2;f.scrollTo({left:x,behavior:"smooth"})}};return n(s.Trigger,{ref:i,className:d("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",t,C({shape:r})),onClick:T,...a})});u.displayName=s.Trigger.displayName;const h=o.forwardRef(({className:t,...e},a)=>n(s.Content,{ref:a,className:d(t),...e}));h.displayName=s.Content.displayName;export{b as Tabs,h as TabsContent,g as TabsList,u as TabsTrigger};
+"use client";import{jsx as r}from"react/jsx-runtime";import*as s from"react";import{cn as d}from"../helpers/index.js";import*as o from"@radix-ui/react-tabs";import{cva as c}from"class-variance-authority";const m=s.createContext({align:"left",shape:"square"}),b=s.forwardRef(({children:t,align:e="left",shape:a="square",...n},i)=>r(o.Root,{ref:i,...n,children:r(m.Provider,{value:{align:e,shape:a},children:t})}));b.displayName="Tabs";const P=c("",{variants:{align:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{align:"left",shape:"square"}}),C=c("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),g=s.forwardRef(({className:t,...e},a)=>{const{align:n,shape:i}=s.useContext(m);return r(o.List,{ref:a,className:d("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",P({align:n,shape:i}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e})});g.displayName=o.List.displayName;const u=s.forwardRef(({className:t,onClick:e,...a},n)=>{const{shape:i}=s.useContext(m),T=p=>{e?.(p);const l=p?.currentTarget,f=p?.currentTarget?.parentElement;if(l&&f){const y=l.offsetLeft,R=l.offsetWidth,v=f.offsetWidth,x=y-v/2+R/2;f.scrollTo({left:x,behavior:"smooth"})}};return r(o.Trigger,{ref:n,className:d("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]",t,C({shape:i})),onClick:T,...a})});u.displayName=o.Trigger.displayName;const h=s.forwardRef(({className:t,...e},a)=>r(o.Content,{ref:a,className:d(t),...e}));h.displayName=o.Content.displayName;export{b as Tabs,h as TabsContent,g as TabsList,u as TabsTrigger};
 //# sourceMappingURL=tabs.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tabs.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    const tabElement = e?.currentTarget\n    const container = e?.currentTarget?.parentElement\n    if (tabElement && container) {\n      const tabLeft = tabElement.offsetLeft\n      const tabWidth = tabElement.offsetWidth\n      const containerWidth = container.offsetWidth\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n    // e.currentTarget.scrollIntoView({\n    //   behavior: 'smooth',\n    //   inline: 'center',\n    //   block: 'nearest',\n    // })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
-  "mappings": "aAyBI,cAAAA,MAAA,oBAvBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,IAC3DX,EAACG,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,SAAAV,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBR,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKU,EAAWb,EAAM,WAGrB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKQ,EACL,UAAWT,EACT,4DACAU,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcX,EAAc,KAAK,YAE1C,MAAMe,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,QAAAI,EAAS,GAAGT,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOM,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC5De,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAYF,GAAG,eAAe,cACpC,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAUF,EAAW,WACrBG,EAAWH,EAAW,YACtBI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CAMF,EACA,OACE3B,EAACG,EAAc,QAAd,CACC,IAAKQ,EACL,UAAWT,EACT,8PACAa,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASG,EACR,GAAGV,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAcf,EAAc,QAAQ,YAEhD,MAAMyB,EAAc3B,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQX,EAACG,EAAc,QAAd,CAAsB,IAAKQ,EAAK,UAAWT,EAAGa,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GkB,EAAY,YAAczB,EAAc,QAAQ",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\nconst TabListContext = React.createContext<{\n  align?: Align\n  shape: Shape\n}>({\n  align: 'left',\n  shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n    align?: Align\n    shape?: Shape\n  }\n>(({ children, align = 'left', shape = 'square', ...props }, ref) => (\n  <TabsPrimitive.Root ref={ref} {...props}>\n    <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n  </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n  variants: {\n    align: {\n      left: 'justify-left',\n      center: 'justify-center',\n      right: 'justify-end',\n    },\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    align: 'left',\n    shape: 'square',\n  },\n})\n\nconst tabsTriggerVariants = cva('', {\n  variants: {\n    shape: {\n      rounded: 'rounded-[28px]',\n      square: 'rounded-none',\n    },\n  },\n  defaultVariants: {\n    shape: 'square',\n  },\n})\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n  const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(\n        'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n        tabsListVariants({\n          align: alignFromParent,\n          shape: shapeFromParent,\n        }),\n        className\n      )}\n      style={{\n        scrollbarWidth: 'none',\n        msOverflowStyle: 'none',\n      }}\n      {...props}\n    />\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, ...props }, ref) => {\n  const { shape: shapeFromParent } = React.useContext(TabListContext)\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e)\n    const tabElement = e?.currentTarget\n    const container = (e?.currentTarget as any)?.parentElement\n    if (tabElement && container) {\n      const tabLeft = (tabElement as any).offsetLeft\n      const tabWidth = (tabElement as any).offsetWidth\n      const containerWidth = container.offsetWidth\n      const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n      container.scrollTo({\n        left: scrollTo,\n        behavior: 'smooth',\n      })\n    }\n    // e.currentTarget.scrollIntoView({\n    //   behavior: 'smooth',\n    //   inline: 'center',\n    //   block: 'nearest',\n    // })\n  }\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#1d1d1d]',\n        className,\n        tabsTriggerVariants({\n          shape: shapeFromParent,\n        })\n      )}\n      onClick={handleClick}\n      {...props}\n    />\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
+  "mappings": "aAyBI,cAAAA,MAAA,oBAvBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAGpB,MAAMC,EAAiBJ,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAMjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,GAAGC,CAAM,EAAGC,IAC3DX,EAACG,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,SAAAV,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBR,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,QACT,CACF,CAAC,EAEKS,EAAsBT,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKU,EAAWb,EAAM,WAGrB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKQ,EACL,UAAWT,EACT,4DACAU,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcX,EAAc,KAAK,YAE1C,MAAMe,EAAcjB,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,QAAAI,EAAS,GAAGT,CAAM,EAAGC,IAAQ,CAC3C,KAAM,CAAE,MAAOM,CAAgB,EAAIhB,EAAM,WAAWI,CAAc,EAC5De,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAaF,GAAG,eAAuB,cAC7C,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAWF,EAAmB,WAC9BG,EAAYH,EAAmB,YAC/BI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CAMF,EACA,OACE3B,EAACG,EAAc,QAAd,CACC,IAAKQ,EACL,UAAWT,EACT,8PACAa,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASG,EACR,GAAGV,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAcf,EAAc,QAAQ,YAEhD,MAAMyB,EAAc3B,EAAM,WAGxB,CAAC,CAAE,UAAAc,EAAW,GAAGL,CAAM,EAAGC,IAAQX,EAACG,EAAc,QAAd,CAAsB,IAAKQ,EAAK,UAAWT,EAAGa,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GkB,EAAY,YAAczB,EAAc,QAAQ",
   "names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "TabListContext", "Tabs", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alignFromParent", "shapeFromParent", "TabsTrigger", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo", "TabsContent"]
 }

package/dist/esm/cpn-components/CpnNavigation/index.js

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

package/dist/esm/cpn-components/CpnNavigation/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/cpn-components/CpnNavigation/index.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n  const { lists, styles, cns, offset = 0, clickHandler } = props\n  const [activeIndex, setActiveIndex] = useState(0)\n  const navBox = useRef<HTMLDivElement>(null)\n\n  const scrollIntoView = (ele: HTMLElement) => {\n    ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n\n  const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n    setActiveIndex(index)\n    const ele = e.target as HTMLAnchorElement\n    scrollIntoView(ele)\n    if (nav.anchor) {\n      document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n    }\n    e.preventDefault()\n    clickHandler && clickHandler(nav, index, e as React.MouseEvent<HTMLAnchorElement>)\n  }\n\n  useEffect(() => {\n    const scrollHandler = debounce(() => {\n      const sectionTops: number[] = []\n      lists?.forEach(nav => {\n        const section = document.querySelector(`#${nav.anchor}`)\n        if (section) {\n          sectionTops.push(section.getBoundingClientRect().top)\n        }\n      })\n      const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n      setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n    }, 100)\n    const navHeight = navBox.current?.getBoundingClientRect().height || 0\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [lists, offset])\n\n  return (\n    <div\n      id=\"nav\"\n      className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n      style={\n        {\n          '--bgColor': styles?.bgColor || '#C6F1FF',\n          '--color': styles?.color || '#333',\n          '--activeColor': styles?.activeColor || '#000',\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n          'tablet:gap-[80px] tablet:justify-center',\n          cns?.box\n        )}\n        ref={navBox}\n      >\n        {lists?.map((nav, index) => {\n          return (\n            <a\n              key={nav.label}\n              href={`#${nav.anchor}`}\n              className={cn(\n                'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n                cns?.item,\n                {\n                  [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n                    activeIndex === index,\n                }\n              )}\n              onClick={e => handleNavItemClick(nav, index, e)}\n            >\n              {nav.label}\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default CpnNavigation\n"],
-  "mappings": "AAkEY,cAAAA,MAAA,oBAlEZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAc,kBAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,EAAG,aAAAC,CAAa,EAAIL,EACnD,CAACM,EAAaC,CAAc,EAAIX,EAAS,CAAC,EAC1CY,EAASb,EAAuB,IAAI,EAEpCc,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,EACjBT,GAAgBA,EAAaO,EAAKC,EAAOC,CAAwC,CACnF,EAEA,OAAApB,EAAU,IAAM,CACd,MAAMqB,EAAgBjB,EAAS,IAAM,CACnC,MAAMkB,EAAwB,CAAC,EAC/Bf,GAAO,QAAQW,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EACjFG,EAAeM,IAAU,GAAKG,EAAY,OAAS,EAAIH,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAM,EAAYX,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACd,EAAOG,CAAM,CAAC,EAGhBX,EAAC,OACC,GAAG,MACH,UAAWI,EAAG,iEAAkEM,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,SAAAT,EAAC,OACC,UAAWI,EACT,iIACA,0CACAM,GAAK,GACP,EACA,IAAKK,EAEJ,SAAAP,GAAO,IAAI,CAACW,EAAKC,IAEdpB,EAAC,KAEC,KAAM,IAAImB,EAAI,MAAM,GACpB,UAAWf,EACT,yJACAM,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOG,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOQ,EAAQrB",
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst CpnNavigation = (props: NavigationProps) => {\n  const { lists, styles, cns, offset = 0, clickHandler } = props\n  const [activeIndex, setActiveIndex] = useState(0)\n  const navBox = useRef<HTMLDivElement>(null)\n\n  const scrollIntoView = (ele: HTMLElement) => {\n    ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n  }\n\n  const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n    setActiveIndex(index)\n    const ele = e.target as HTMLAnchorElement\n    scrollIntoView(ele)\n    if (nav.anchor) {\n      document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n    }\n    e.preventDefault()\n    clickHandler && clickHandler(nav, index, e as React.MouseEvent<HTMLAnchorElement>)\n  }\n\n  useEffect(() => {\n    const scrollHandler = debounce(() => {\n      const sectionTops: number[] = []\n      lists?.forEach(nav => {\n        const section = document.querySelector(`#${nav.anchor}`)\n        if (section) {\n          sectionTops.push(section.getBoundingClientRect().top)\n        }\n      })\n      const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n      setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n    }, 100)\n    const navHeight = navBox.current?.getBoundingClientRect().height || 0\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [lists, offset])\n\n  return (\n    <div\n      id=\"nav\"\n      className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n      style={\n        {\n          '--bgColor': styles?.bgColor || '#C6F1FF',\n          '--color': styles?.color || '#333',\n          '--activeColor': styles?.activeColor || '#000',\n        } as React.CSSProperties\n      }\n    >\n      <div\n        className={cn(\n          'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n          'tablet:gap-[80px] tablet:justify-center',\n          cns?.box\n        )}\n        ref={navBox}\n      >\n        {lists?.map((nav, index) => {\n          return (\n            <a\n              key={nav.label}\n              href={`#${nav.anchor}`}\n              className={cn(\n                'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n                cns?.item,\n                {\n                  [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n                    activeIndex === index,\n                }\n              )}\n              onClick={e => handleNavItemClick(nav, index, e)}\n            >\n              {nav.label}\n            </a>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport default CpnNavigation\n"],
+  "mappings": "AAkEY,cAAAA,MAAA,oBAlEZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,yBAEnB,OAAS,YAAAC,MAAgB,aAEzB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,EAAG,aAAAC,CAAa,EAAIL,EACnD,CAACM,EAAaC,CAAc,EAAIX,EAAS,CAAC,EAC1CY,EAASb,EAAuB,IAAI,EAEpCc,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,EACjBT,GAAgBA,EAAaO,EAAKC,EAAOC,CAAwC,CACnF,EAEA,OAAApB,EAAU,IAAM,CACd,MAAMqB,EAAgBjB,EAAS,IAAM,CACnC,MAAMkB,EAAwB,CAAC,EAC/Bf,GAAO,QAAQW,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EACjFG,EAAeM,IAAU,GAAKG,EAAY,OAAS,EAAIH,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAM,EAAYX,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACd,EAAOG,CAAM,CAAC,EAGhBX,EAAC,OACC,GAAG,MACH,UAAWI,EAAG,iEAAkEM,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,SAAAT,EAAC,OACC,UAAWI,EACT,iIACA,0CACAM,GAAK,GACP,EACA,IAAKK,EAEJ,SAAAP,GAAO,IAAI,CAACW,EAAKC,IAEdpB,EAAC,KAEC,KAAM,IAAImB,EAAI,MAAM,GACpB,UAAWf,EACT,yJACAM,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOG,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOQ,EAAQrB",
   "names": ["jsx", "useEffect", "useRef", "useState", "cn", "debounce", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "clickHandler", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "sectionTops", "section", "sectionTop", "navHeight", "CpnNavigation_default"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/ScrollLoadVideo.tsx"],
-  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'lodash'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useEffect, useState, useRef, useCallback } from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { debounce } from 'lodash'\n\n// \u521B\u5EFA\u4E00\u4E2A\u5168\u5C40\u7F13\u5B58\u6765\u5B58\u50A8\u5DF2\u52A0\u8F7D\u7684\u89C6\u9891URL\nconst globalLoadedVideoUrls = new Set<string>()\n\nconst ScrollLoadVideo = ({\n  src,\n  poster,\n  alt = 'Scroll Loaded Video',\n  className = '',\n  videoWrapperClassName = '',\n  videoClassName = '',\n  autoplay = false,\n  muted = true,\n  loop = true,\n  controls = false,\n  playsInline = true,\n  videoRef = null,\n  ...attr\n}: {\n  src: string\n  poster?: string\n  alt?: string\n  className?: string\n  videoWrapperClassName?: string\n  videoClassName?: string\n  autoplay?: boolean\n  muted?: boolean\n  loop?: boolean\n  controls?: boolean\n  playsInline?: boolean\n  [key: string]: any\n}) => {\n  const [isVideoStartLoad, setIsVideoStartLoad] = useState(false)\n  const [isVideoLoaded, setIsVideoLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n  // \u4FDD\u5B58\u5F53\u524D\u52A0\u8F7D\u7684\u89C6\u9891URL\n  const currentVideoUrl = useRef<string>('')\n\n  // \u5728\u7EC4\u4EF6\u6302\u8F7D\u65F6\u68C0\u67E5\u89C6\u9891\u662F\u5426\u5DF2\u7ECF\u88AB\u52A0\u8F7D\u8FC7\n  useEffect(() => {\n    // \u5982\u679C\u89C6\u9891\u5DF2\u7ECF\u88AB\u5168\u5C40\u7F13\u5B58\u8FC7\uFF0C\u76F4\u63A5\u8BBE\u7F6E\u4E3A\u5DF2\u52A0\u8F7D\u72B6\u6001\n    if (globalLoadedVideoUrls.has(src)) {\n      setIsVideoStartLoad(true)\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = src\n    }\n  }, [src])\n\n  // \u9884\u52A0\u8F7D\u89C6\u9891\n  const preloadVideo = useCallback(() => {\n    const videoUrl = src\n\n    if (!videoUrl) return\n\n    // \u5982\u679C\u5F53\u524DURL\u5DF2\u7ECF\u662F\u89C6\u9891\u7248\u672C\uFF0C\u65E0\u9700\u91CD\u590D\u52A0\u8F7D\n    if (currentVideoUrl.current === videoUrl && isVideoLoaded) {\n      return\n    }\n\n    // \u68C0\u67E5\u662F\u5426\u5DF2\u7ECF\u52A0\u8F7D\u8FC7\u8FD9\u4E2AURL\u7684\u89C6\u9891\u7248\u672C\n    if (globalLoadedVideoUrls.has(videoUrl)) {\n      setIsVideoLoaded(true)\n      currentVideoUrl.current = videoUrl\n      return\n    }\n\n    // \u66F4\u65B0\u5F53\u524D\u89C6\u9891URL\n    currentVideoUrl.current = videoUrl\n\n    // \u9884\u52A0\u8F7D\u89C6\u9891\n    const videoElement = document.createElement('video')\n    videoElement.preload = 'metadata'\n    videoElement.onloadedmetadata = () => {\n      setIsVideoLoaded(true)\n      globalLoadedVideoUrls.add(videoUrl)\n    }\n    videoElement.src = videoUrl\n  }, [isVideoLoaded, src])\n\n  useEffect(() => {\n    if (!ref.current || isVideoLoaded) return\n    // @ts-ignore\n    const scrollHandler = debounce(() => {\n      if (window.scrollY > 10) {\n        setIsVideoStartLoad(true)\n        preloadVideo()\n        return window.removeEventListener('scroll', scrollHandler)\n      }\n    }, 100)\n    window.addEventListener('scroll', scrollHandler)\n    return () => {\n      window.removeEventListener('scroll', scrollHandler)\n    }\n  }, [preloadVideo, isVideoLoaded])\n\n  const handleVideoLoad = useCallback(() => {\n    setIsVideoLoaded(true)\n    // \u8BB0\u5F55\u5F53\u524DURL\u5DF2\u52A0\u8F7D\u89C6\u9891\u7248\u672C\n    if (currentVideoUrl.current) {\n      globalLoadedVideoUrls.add(currentVideoUrl.current)\n    }\n  }, [])\n\n  return (\n    <div ref={ref} className={cn('relative size-full', className)}>\n      {poster && (\n        <div\n          className={cn(\n            'absolute inset-0 size-full overflow-hidden transition-opacity duration-500 ease-in-out',\n            videoWrapperClassName,\n            {\n              'opacity-100': !isVideoLoaded,\n              'overflow-visible opacity-0': isVideoLoaded,\n            }\n          )}\n        >\n          <img\n            src={poster}\n            alt={alt}\n            style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n            className={cn(videoClassName)}\n          />\n        </div>\n      )}\n      <div\n        className={cn('size-full transition-opacity duration-500 ease-in-out', {\n          'opacity-100': isVideoLoaded,\n          'opacity-0': !isVideoLoaded,\n        })}\n        style={{ visibility: isVideoStartLoad ? 'visible' : 'hidden' }}\n      >\n        {isVideoStartLoad && (\n          <div className={cn('relative size-full', videoWrapperClassName)}>\n            <video\n              ref={videoRef}\n              key={currentVideoUrl.current} // \u6DFB\u52A0key\u786E\u4FDDURL\u53D8\u5316\u65F6\u91CD\u65B0\u6E32\u67D3\n              src={currentVideoUrl.current || src}\n              poster={poster}\n              className={cn('size-full object-cover', videoClassName)}\n              onLoadedMetadata={handleVideoLoad}\n              autoPlay={autoplay}\n              muted={muted}\n              loop={loop}\n              controls={controls}\n              playsInline={playsInline}\n              {...attr}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollLoadVideo\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useEffect", "useState", "useRef", "useCallback", "cn", "debounce", "globalLoadedVideoUrls", "ScrollLoadVideo", "src", "poster", "alt", "className", "videoWrapperClassName", "videoClassName", "autoplay", "muted", "loop", "controls", "playsInline", "videoRef", "attr", "isVideoStartLoad", "setIsVideoStartLoad", "isVideoLoaded", "setIsVideoLoaded", "ref", "currentVideoUrl", "preloadVideo", "videoUrl", "videoElement", "scrollHandler", "handleVideoLoad", "ScrollLoadVideo_default"]
 }

package/dist/esm/shared/Styles.js

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

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

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

package/dist/esm/{biz-components → src/biz-components}/AccordionCards/index.d.ts

@@ -32,7 +32,7 @@ export type AccordionCardsType = {
     };
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<AccordionCardsType & 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/esm/{biz-components → src/biz-components}/BrandEquity/BrandEquity.d.ts

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

package/dist/{cjs → esm/src}/biz-components/Category/index.d.ts

@@ -29,7 +29,7 @@ export interface CategoryProps {
     key?: string;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<CategoryProps & 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>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;