npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1761893017767 → 1.0.26-alpha.1762157400150 - Mend

@anker-in/headless-ui 1.0.26-alpha.1761893017767 → 1.0.26-alpha.1762157400150

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

Files changed (101) hide show

package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/FeatureCards/FeatureCards.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n  const { title, subtitle, items = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  const renderCard = (item: FeatureCardItem) => {\n    const cardContent = (\n      <>\n        <Picture\n          source={item.imageUrl}\n          alt={item.title}\n          className=\"absolute inset-0 !h-full\"\n          imgClassName=\"!h-full object-cover\"\n        />\n        <div className=\"z-10\">\n          <Heading size={3} as=\"h2\" className=\"laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n            {item.title}\n          </Heading>\n          <Text\n            size={4}\n            as=\"p\"\n            className=\"mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n          >\n            {item.subtitle}\n          </Text>\n        </div>\n      </>\n    )\n\n    const cardClasses = cn(\n      'relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]',\n      {\n        'aiui-dark': item.theme === 'dark',\n        'aiui-light': item.theme === 'light',\n      }\n    )\n\n    if (item.link) {\n      return (\n        <a\n          href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n          className={cardClasses}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n        >\n          {cardContent}\n        </a>\n      )\n    }\n\n    return <div className={cardClasses}>{cardContent}</div>\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"FeatureCards\"\n      className={cn('flex w-full flex-col justify-center', className)}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      <Heading size={4} as=\"h1\" className=\"text-left laptop:text-center\">\n        {title}\n      </Heading>\n      {subtitle && (\n        <Text\n          size={2}\n          as=\"p\"\n          className=\"mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n        >\n          {subtitle}\n        </Text>\n      )}\n\n      {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n      <div className=\"mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n        {items.map(item => (\n          <React.Fragment key={item.title}>{renderCard(item)}</React.Fragment>\n        ))}\n      </div>\n\n      {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n      <div className=\"mt-[24px] w-full laptop:hidden\">\n        <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"relative w-full !overflow-visible\">\n          {items.map(item => (\n            <SwiperSlide key={item.title} className=\"relative !h-[360px] !w-[296px]\">\n              <div\n                key={item.title}\n                className={cn(\n                  'absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                    'aiui-light': item.theme === 'light',\n                  }\n                )}\n              >\n                <Picture\n                  source={item.imageUrl}\n                  alt={item.title}\n                  className=\"absolute inset-0 !h-full\"\n                  imgClassName=\"!h-full object-cover\"\n                />\n                <div className=\"z-10\">\n                  <Heading size={3} as=\"h2\">\n                    {item.title}\n                  </Heading>\n                  <Text\n                    size={4}\n                    as=\"p\"\n                    className=\"mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n                  >\n                    {item.subtitle}\n                  </Text>\n                </div>\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n  const { title, subtitle, items = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  const renderCard = (item: FeatureCardItem) => {\n    const cardContent = (\n      <>\n        <Picture\n          source={item.image.url}\n          alt={item.image.alt || item.title}\n          className=\"absolute inset-0 !h-full\"\n          imgClassName=\"!h-full object-cover\"\n        />\n        <div className=\"z-10\">\n          <Heading size={3} as=\"h2\" className=\"laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n            {item.title}\n          </Heading>\n          <Text\n            size={4}\n            as=\"p\"\n            className=\"mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n          >\n            {item.subtitle}\n          </Text>\n        </div>\n      </>\n    )\n\n    const cardClasses = cn(\n      'relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]',\n      {\n        'aiui-dark': item.theme === 'dark',\n        'aiui-light': item.theme === 'light',\n      }\n    )\n\n    if (item.link) {\n      return (\n        <a\n          href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n          className={cardClasses}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n        >\n          {cardContent}\n        </a>\n      )\n    }\n\n    return <div className={cardClasses}>{cardContent}</div>\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"FeatureCards\"\n      className={cn('flex w-full flex-col justify-center', className)}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      <Heading size={4} as=\"h1\" className=\"text-left laptop:text-center\">\n        {title}\n      </Heading>\n      {subtitle && (\n        <Text\n          size={2}\n          as=\"p\"\n          className=\"mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n        >\n          {subtitle}\n        </Text>\n      )}\n\n      {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n      <div className=\"mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n        {items.map(item => (\n          <React.Fragment key={item.title}>{renderCard(item)}</React.Fragment>\n        ))}\n      </div>\n\n      {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n      <div className=\"mt-[24px] w-full laptop:hidden\">\n        <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"relative w-full !overflow-visible\">\n          {items.map(item => (\n            <SwiperSlide key={item.title} className=\"relative !h-[360px] !w-[296px]\">\n              <div\n                key={item.title}\n                className={cn(\n                  'absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                    'aiui-light': item.theme === 'light',\n                  }\n                )}\n              >\n                <Picture\n                  source={item.image.url}\n                  alt={item.image.alt || item.title}\n                  className=\"absolute inset-0 !h-full\"\n                  imgClassName=\"!h-full object-cover\"\n                />\n                <div className=\"z-10\">\n                  <Heading size={3} as=\"h2\">\n                    {item.title}\n                  </Heading>\n                  <Text\n                    size={4}\n                    as=\"p\"\n                    className=\"mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n                  >\n                    {item.subtitle}\n                  </Text>\n                </div>\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "Swiper", "SwiperSlide", "componentType", "componentName", "FeatureCards", "data", "className", "ref", "title", "subtitle", "items", "boxRef", "renderCard", "item", "cardContent", "cardClasses", "FeatureCards_default"]
 }

package/dist/esm/biz-components/FeatureCards/types.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
-import type { Theme } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 export interface FeatureCardItem {
     /** 卡片标题 */
     title: string;
     /** 卡片副标题/描述 */
     subtitle: string;
     /** 背景图片 URL */
-    imageUrl: string;
+    image: Media;
     /** 主题，默认 light */
     theme?: Theme;
     /** 链接地址 */

package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import u,{useRef as f,useImperativeHandle as h}from"react";import{Picture as a,Text as l,Heading as x}from"../../components/index.js";import{cn as v}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as N}from"../../hooks/useExposure.js";const k="image",g="feature_showcase",d=u.forwardRef(({data:m,className:i},c)=>{const{datalist:r=[],datalists:n=[]}=m||{},s=f(null);return N(s,{componentType:k,componentName:g,componentTitle:"Feature Showcase"}),h(c,()=>s.current),p("section",{ref:s,"data-ui-component-id":"FeatureShowcase",className:v("flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col",i),children:[e("div",{className:"flex gap-[16px]",children:r?.map((t,o)=>e("div",{children:p("div",{className:"relative",children:[e(a,{source:`${t.imageMob}`,className:"w-[296px] rounded-[12px] laptop:hidden"}),e(a,{source:`${t.image} 1024`,className:"l:hidden"}),p("div",{className:"absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(x,{as:"h2",size:3,html:t?.title,className:"mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))}),e("div",{className:"flex gap-[16px]",children:n?.map((t,o)=>e("div",{children:p("div",{className:"relative",children:[e(a,{source:`${t.imageMob}`,className:"w-[296px] rounded-[12px] laptop:hidden"}),e(a,{source:`${t.image} 1024`,className:"l:hidden"}),p("div",{className:"absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(x,{as:"h2",size:3,html:t?.title,className:"mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))})]})});d.displayName="FeatureShowcase";var H=w(d);export{H as default};
+"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import u,{useRef as f,useImperativeHandle as h}from"react";import{Picture as a,Text as l,Heading as x}from"../../components/index.js";import{cn as v}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as N}from"../../hooks/useExposure.js";const k="image",g="feature_showcase",d=u.forwardRef(({data:m,className:i},r)=>{const{datalist:c=[],datalists:n=[]}=m||{},s=f(null);return N(s,{componentType:k,componentName:g,componentTitle:"Feature Showcase"}),h(r,()=>s.current),p("section",{ref:s,"data-ui-component-id":"FeatureShowcase",className:v("flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col",i),children:[e("div",{className:"flex gap-[16px]",children:c?.map((t,o)=>e("div",{children:p("div",{className:"relative",children:[e(a,{source:`${t.imageMob.url}`,className:"w-[296px] rounded-[12px] laptop:hidden"}),e(a,{source:`${t.image.url} 1024`,className:"l:hidden"}),p("div",{className:"absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(x,{as:"h2",size:3,html:t?.title,className:"mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))}),e("div",{className:"flex gap-[16px]",children:n?.map((t,o)=>e("div",{children:p("div",{className:"relative",children:[e(a,{source:`${t.imageMob.url}`,className:"w-[296px] rounded-[12px] laptop:hidden"}),e(a,{source:`${t.image.url} 1024`,className:"l:hidden"}),p("div",{className:"absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(x,{as:"h2",size:3,html:t?.title,className:"mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))})]})});d.displayName="FeatureShowcase";var H=w(d);export{H as default};
 //# sourceMappingURL=FeatureShowcase.js.map

package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/FeatureShowcase/FeatureShowcase.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Picture, Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { FeatureShowcaseProps, FeatureShowcaseItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'feature_showcase'\n\nconst FeatureShowcase = React.forwardRef<HTMLDivElement, FeatureShowcaseProps>(\n  ({ data, className }, ref) => {\n    const { datalist = [], datalists = [] } = data || {}\n\n    const boxRef = useRef<HTMLDivElement>(null)\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: 'Feature Showcase',\n    })\n\n    useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    return (\n      <section\n        ref={boxRef}\n        data-ui-component-id=\"FeatureShowcase\"\n        className={cn(\n          'flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col',\n          className\n        )}\n      >\n        <div className=\"flex gap-[16px]\">\n          {datalist?.map((item: FeatureShowcaseItem, index: number) => (\n            <div key={index}>\n              <div className=\"relative\">\n                <Picture\n                  source={`${item.imageMob}`}\n                  className=\"w-[296px] rounded-[12px] laptop:hidden\"\n                />\n                <Picture source={`${item.image} 1024`} className=\"l:hidden\" />\n                <div className=\"absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n                  <Heading\n                    as={'h2'}\n                    size={3}\n                    html={item?.title}\n                    className=\"mt-[16px] md:text-[20px]\"\n                  />\n\n                  <Text\n                    as={'p'}\n                    html={item.desc}\n                    size={4}\n                    className=\"mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                  />\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n        <div className=\"flex gap-[16px]\">\n          {datalists?.map((item: FeatureShowcaseItem, index: number) => (\n            <div key={index}>\n              <div className=\"relative\">\n                <Picture\n                  source={`${item.imageMob}`}\n                  className=\"w-[296px] rounded-[12px] laptop:hidden\"\n                />\n                <Picture source={`${item.image} 1024`} className=\"l:hidden\" />\n                <div className=\"absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n                  <Heading\n                    as={'h2'}\n                    size={3}\n                    html={item?.title}\n                    className=\"mt-[16px] md:text-[20px]\"\n                  />\n\n                  <Text\n                    as={'p'}\n                    html={item.desc}\n                    size={4}\n                    className=\"mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                  />\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </section>\n    )\n  }\n)\n\nFeatureShowcase.displayName = 'FeatureShowcase'\n\nexport default withLayout(FeatureShowcase)\n"],
-  "mappings": "aAsCgB,cAAAA,EAKA,QAAAC,MALA,oBArChB,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkBX,EAAM,WAC5B,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC5B,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,EAAShB,EAAuB,IAAI,EAE1C,OAAAO,EAAYS,EAAQ,CAClB,cAAAR,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,EAEDR,EAAoBY,EAAK,IAAMG,EAAO,OAAyB,EAG7DlB,EAAC,WACC,IAAKkB,EACL,uBAAqB,kBACrB,UAAWX,EACT,oGACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,kBACZ,SAAAiB,GAAU,IAAI,CAACG,EAA2BC,IACzCrB,EAAC,OACC,SAAAC,EAAC,OAAI,UAAU,WACb,UAAAD,EAACK,EAAA,CACC,OAAQ,GAAGe,EAAK,QAAQ,GACxB,UAAU,yCACZ,EACApB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,KAAK,QAAS,UAAU,WAAW,EAC5DnB,EAAC,OAAI,UAAU,2KACb,UAAAD,EAACO,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMa,GAAM,MACZ,UAAU,2BACZ,EAEApB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,4IACZ,GACF,GACF,GAtBQC,CAuBV,CACD,EACH,EACArB,EAAC,OAAI,UAAU,kBACZ,SAAAkB,GAAW,IAAI,CAACE,EAA2BC,IAC1CrB,EAAC,OACC,SAAAC,EAAC,OAAI,UAAU,WACb,UAAAD,EAACK,EAAA,CACC,OAAQ,GAAGe,EAAK,QAAQ,GACxB,UAAU,yCACZ,EACApB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,KAAK,QAAS,UAAU,WAAW,EAC5DnB,EAAC,OAAI,UAAU,2KACb,UAAAD,EAACO,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMa,GAAM,MACZ,UAAU,2BACZ,EAEApB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,4IACZ,GACF,GACF,GAtBQC,CAuBV,CACD,EACH,GACF,CAEJ,CACF,EAEAR,EAAgB,YAAc,kBAE9B,IAAOS,EAAQb,EAAWI,CAAe",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Picture, Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { FeatureShowcaseProps, FeatureShowcaseItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'feature_showcase'\n\nconst FeatureShowcase = React.forwardRef<HTMLDivElement, FeatureShowcaseProps>(({ data, className }, ref) => {\n  const { datalist = [], datalists = [] } = data || {}\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: 'Feature Showcase',\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"FeatureShowcase\"\n      className={cn(\n        'flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col',\n        className\n      )}\n    >\n      <div className=\"flex gap-[16px]\">\n        {datalist?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index}>\n            <div className=\"relative\">\n              <Picture source={`${item.imageMob.url}`} className=\"w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image.url} 1024`} className=\"l:hidden\" />\n              <div className=\"absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n                <Heading as={'h2'} size={3} html={item?.title} className=\"mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div className=\"flex gap-[16px]\">\n        {datalists?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index}>\n            <div className=\"relative\">\n              <Picture source={`${item.imageMob.url}`} className=\"w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image.url} 1024`} className=\"l:hidden\" />\n              <div className=\"absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n                <Heading as={'h2'} size={3} html={item?.title} className=\"mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\n\nFeatureShowcase.displayName = 'FeatureShowcase'\n\nexport default withLayout(FeatureShowcase)\n"],
+  "mappings": "aAqCc,cAAAA,EAEA,QAAAC,MAFA,oBApCd,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkBX,EAAM,WAAiD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC3G,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,EAAShB,EAAuB,IAAI,EAE1C,OAAAO,EAAYS,EAAQ,CAClB,cAAAR,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,EAEDR,EAAoBY,EAAK,IAAMG,EAAO,OAAyB,EAG7DlB,EAAC,WACC,IAAKkB,EACL,uBAAqB,kBACrB,UAAWX,EACT,oGACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,kBACZ,SAAAiB,GAAU,IAAI,CAACG,EAA2BC,IACzCrB,EAAC,OACC,SAAAC,EAAC,OAAI,UAAU,WACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,SAAS,GAAG,GAAI,UAAU,yCAAyC,EAC5FpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,MAAM,GAAG,QAAS,UAAU,WAAW,EAChEnB,EAAC,OAAI,UAAU,2KACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,2BAA2B,EAEpFpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,4IACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,EACArB,EAAC,OAAI,UAAU,kBACZ,SAAAkB,GAAW,IAAI,CAACE,EAA2BC,IAC1CrB,EAAC,OACC,SAAAC,EAAC,OAAI,UAAU,WACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,SAAS,GAAG,GAAI,UAAU,yCAAyC,EAC5FpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,MAAM,GAAG,QAAS,UAAU,WAAW,EAChEnB,EAAC,OAAI,UAAU,2KACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,2BAA2B,EAEpFpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,4IACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,GACF,CAEJ,CAAC,EAEDR,EAAgB,YAAc,kBAE9B,IAAOS,EAAQb,EAAWI,CAAe",
   "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Picture", "Text", "Heading", "cn", "withLayout", "useExposure", "componentType", "componentName", "FeatureShowcase", "data", "className", "ref", "datalist", "datalists", "boxRef", "item", "index", "FeatureShowcase_default"]
 }

package/dist/esm/biz-components/FeatureShowcase/types.d.ts CHANGED Viewed

@@ -1,12 +1,13 @@
+import type { Media } from '../../types/props';
 export interface FeatureShowcaseItem {
     /** 标题 */
     title: string;
     /** 描述文本 */
     desc: string;
     /** 桌面端图片 URL */
-    image: string;
+    image: Media;
     /** 移动端图片 URL */
-    imageMob: string;
+    imageMob: Media;
 }
 export interface FeatureShowcaseProps {
     data: {

package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import w,{useImperativeHandle as F,useRef as U}from"react";import{Heading as f,Picture as H,Text as g}from"../../components/index.js";import{cn as m}from"../../helpers/utils.js";import{withLayout as j}from"../../shared/Styles.js";import{useExposure as z}from"../../hooks/useExposure.js";const D="image",E="image_text_feature",u=w.forwardRef(({data:b,className:h},y)=>{const{title:a,subtitle:o,imageUrl:s,mobImageUrl:i,padImageUrl:n,items:I=[],imagePosition:p="left",theme:k="light"}=b,r=U(null);z(r,{componentType:D,componentName:E,componentTitle:a,componentDescription:o}),F(y,()=>r.current);const x=t=>typeof t=="string"?t:t?.url||"",c=x(s),d=n?x(n):c,N=i?x(i):d,T=typeof s=="object"&&s?.alt||a;return l("section",{ref:r,"data-ui-component-id":"ImageTextFeature",className:m(k==="dark"?"aiui-dark":"","flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]",h),children:[e(H,{source:`${c}, ${d} 1024, ${N} 768`,alt:T,className:m("aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560]",{"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":p==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":p==="right"})}),l("div",{className:m("flex w-full flex-col items-start justify-center laptop:w-fit",{"order-1 laptop:order-2":p==="left","order-1":p==="right"}),children:[e(f,{size:4,html:a,as:"h3",className:"w-full text-left"}),o&&e(g,{size:4,html:o,as:"p",className:"mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-center laptop:text-[16px] lg-desktop:text-[18px]"}),e("div",{className:"flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0",children:I.map((t,v)=>l("div",{className:"mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[l("div",{className:"flex flex-row items-center gap-[8px]",children:[e("img",{src:t.icon,alt:"icon",className:"h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),e(f,{size:5,as:"h6",className:"bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(g,{size:4,as:"p",html:t.desc,className:"-mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},v))})]})]})});u.displayName="ImageTextFeature";var _=j(u);export{_ as default};
+"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import I,{useImperativeHandle as N,useRef as T}from"react";import{Heading as r,Picture as v,Text as i}from"../../components/index.js";import{cn as x}from"../../helpers/utils.js";import{withLayout as y}from"../../shared/Styles.js";import{useExposure as w}from"../../hooks/useExposure.js";const F="image",H="image_text_feature",n=I.forwardRef(({data:c,className:d},f)=>{const{title:m,subtitle:l,pcImage:e,mobileImage:u,padImage:g,items:b=[],imagePosition:a="left",theme:h="light"}=c,o=T(null);return w(o,{componentType:F,componentName:H,componentTitle:m,componentDescription:l}),N(f,()=>o.current),p("section",{ref:o,"data-ui-component-id":"ImageTextFeature",className:x(h==="dark"?"aiui-dark":"","flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]",d),children:[t(v,{source:`${e.url}, ${g?.url||e.url} 1024, ${u.url||e.url} 768`,alt:e.alt,className:x("aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560]",{"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":a==="right"})}),p("div",{className:x("flex w-full flex-col items-start justify-center laptop:w-fit",{"order-1 laptop:order-2":a==="left","order-1":a==="right"}),children:[t(r,{size:4,html:m,as:"h3",className:"w-full text-left"}),l&&t(i,{size:4,html:l,as:"p",className:"mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-center laptop:text-[16px] lg-desktop:text-[18px]"}),t("div",{className:"flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0",children:b.map((s,k)=>p("div",{className:"mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[p("div",{className:"flex flex-row items-center gap-[8px]",children:[t("img",{src:s.icon,alt:"icon",className:"h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),t(r,{size:5,as:"h6",className:"bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:s.text})]}),t(i,{size:4,as:"p",html:s.desc,className:"-mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},k))})]})]})});n.displayName="ImageTextFeature";var P=y(n);export{P as default};
 //# sourceMappingURL=ImageTextFeature.js.map

package/dist/esm/biz-components/ImageTextFeature/ImageTextFeature.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageTextFeature/ImageTextFeature.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_text_feature'\n\nconst ImageTextFeature = React.forwardRef<HTMLDivElement, ImageTextFeatureProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    imageUrl,\n    mobImageUrl,\n    padImageUrl,\n    items = [],\n    imagePosition = 'left',\n    theme = 'light',\n  } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  // \u5904\u7406\u56FE\u7247 URL\n  const getImageUrl = (img: string | { url?: string; alt?: string }): string => {\n    return typeof img === 'string' ? img : img?.url || ''\n  }\n\n  const pcImageUrl = getImageUrl(imageUrl)\n  const padUrl = padImageUrl ? getImageUrl(padImageUrl) : pcImageUrl\n  const mobUrl = mobImageUrl ? getImageUrl(mobImageUrl) : padUrl\n\n  // \u83B7\u53D6\u56FE\u7247 alt \u6587\u672C\n  const imageAlt = typeof imageUrl === 'object' ? imageUrl?.alt || title : title\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageTextFeature\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]',\n        className\n      )}\n    >\n      {/* \u56FE\u7247\u533A\u57DF */}\n      <Picture\n        source={`${pcImageUrl}, ${padUrl} 1024, ${mobUrl} 768`}\n        alt={imageAlt}\n        className={cn(\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560]',\n          {\n            'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'left',\n            'order-2 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'right',\n          }\n        )}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div\n        className={cn('flex w-full flex-col items-start justify-center laptop:w-fit', {\n          'order-1 laptop:order-2': imagePosition === 'left',\n          'order-1': imagePosition === 'right',\n        })}\n      >\n        {/* \u6807\u9898 */}\n        <Heading size={4} html={title} as=\"h3\" className=\"w-full text-left\" />\n\n        {/* \u526F\u6807\u9898 */}\n        {subtitle && (\n          <Text\n            size={4}\n            html={subtitle}\n            as=\"p\"\n            className=\"mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-center laptop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n\n        {/* \u529F\u80FD\u5217\u8868 */}\n        <div className=\"flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0\">\n          {items.map((item: ImageTextFeatureItem, index: number) => (\n            <div key={index} className=\"mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n              <div className=\"flex flex-row items-center gap-[8px]\">\n                <img\n                  src={item.icon}\n                  alt=\"icon\"\n                  className=\"h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n                />\n                <Heading\n                  size={5}\n                  as=\"h6\"\n                  className=\"bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                >\n                  {item.text}\n                </Heading>\n              </div>\n              <Text\n                size={4}\n                as=\"p\"\n                html={item.desc}\n                className=\"-mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n})\n\nImageTextFeature.displayName = 'ImageTextFeature'\n\nexport default withLayout(ImageTextFeature)\n"],
-  "mappings": "aAyDM,cAAAA,EAoCQ,QAAAC,MApCR,oBAxDN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmBX,EAAM,WAAkD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC7G,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,cAAAC,EAAgB,OAChB,MAAAC,EAAQ,OACV,EAAIV,EAEEW,EAASrB,EAAuB,IAAI,EAE1CM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG/D,MAAMC,EAAeC,GACZ,OAAOA,GAAQ,SAAWA,EAAMA,GAAK,KAAO,GAG/CC,EAAaF,EAAYP,CAAQ,EACjCU,EAASR,EAAcK,EAAYL,CAAW,EAAIO,EAClDE,EAASV,EAAcM,EAAYN,CAAW,EAAIS,EAGlDE,EAAW,OAAOZ,GAAa,UAAWA,GAAU,KAAOF,EAEjE,OACEhB,EAAC,WACC,IAAKwB,EACL,uBAAqB,mBACrB,UAAWjB,EACTgB,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,UAAAf,EAACM,EAAA,CACC,OAAQ,GAAGsB,CAAU,KAAKC,CAAM,UAAUC,CAAM,OAChD,IAAKC,EACL,UAAWvB,EACT,+FACA,CACE,gEAAiEe,IAAkB,OACnF,iDAAkDA,IAAkB,OACtE,CACF,EACF,EAGAtB,EAAC,OACC,UAAWO,EAAG,+DAAgE,CAC5E,yBAA0Be,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,UAAAvB,EAACK,EAAA,CAAQ,KAAM,EAAG,KAAMY,EAAO,GAAG,KAAK,UAAU,mBAAmB,EAGnEC,GACClB,EAACO,EAAA,CACC,KAAM,EACN,KAAMW,EACN,GAAG,IACH,UAAU,+GACZ,EAIFlB,EAAC,OAAI,UAAU,mKACZ,SAAAsB,EAAM,IAAI,CAACU,EAA4BC,IACtChC,EAAC,OAAgB,UAAU,+CACzB,UAAAA,EAAC,OAAI,UAAU,uCACb,UAAAD,EAAC,OACC,IAAKgC,EAAK,KACV,IAAI,OACJ,UAAU,8JACZ,EACAhC,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAU,6EAET,SAAA2B,EAAK,KACR,GACF,EACAhC,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,KAAMyB,EAAK,KACX,UAAU,yGACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDpB,EAAiB,YAAc,mBAE/B,IAAOqB,EAAQzB,EAAWI,CAAgB",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageTextFeature", "data", "className", "ref", "title", "subtitle", "imageUrl", "mobImageUrl", "padImageUrl", "items", "imagePosition", "theme", "boxRef", "getImageUrl", "img", "pcImageUrl", "padUrl", "mobUrl", "imageAlt", "item", "index", "ImageTextFeature_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_text_feature'\n\nconst ImageTextFeature = React.forwardRef<HTMLDivElement, ImageTextFeatureProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, padImage, items = [], imagePosition = 'left', theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageTextFeature\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'flex flex-col items-center gap-[24px] text-info-primary laptop:flex-row laptop:gap-[32px] desktop:gap-[48px] lg-desktop:gap-[64px]',\n        className\n      )}\n    >\n      {/* \u56FE\u7247\u533A\u57DF */}\n      <Picture\n        source={`${pcImage.url}, ${padImage?.url || pcImage.url} 1024, ${mobileImage.url || pcImage.url} 768`}\n        alt={pcImage.alt}\n        className={cn('aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560]', {\n          'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'left',\n          'order-2 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'right',\n        })}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div\n        className={cn('flex w-full flex-col items-start justify-center laptop:w-fit', {\n          'order-1 laptop:order-2': imagePosition === 'left',\n          'order-1': imagePosition === 'right',\n        })}\n      >\n        {/* \u6807\u9898 */}\n        <Heading size={4} html={title} as=\"h3\" className=\"w-full text-left\" />\n\n        {/* \u526F\u6807\u9898 */}\n        {subtitle && (\n          <Text\n            size={4}\n            html={subtitle}\n            as=\"p\"\n            className=\"mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-center laptop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n\n        {/* \u529F\u80FD\u5217\u8868 */}\n        <div className=\"flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0\">\n          {items.map((item: ImageTextFeatureItem, index: number) => (\n            <div key={index} className=\"mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n              <div className=\"flex flex-row items-center gap-[8px]\">\n                <img\n                  src={item.icon}\n                  alt=\"icon\"\n                  className=\"h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n                />\n                <Heading\n                  size={5}\n                  as=\"h6\"\n                  className=\"bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n                >\n                  {item.text}\n                </Heading>\n              </div>\n              <Text\n                size={4}\n                as=\"p\"\n                html={item.desc}\n                className=\"-mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n})\n\nImageTextFeature.displayName = 'ImageTextFeature'\n\nexport default withLayout(ImageTextFeature)\n"],
+  "mappings": "aAoCM,cAAAA,EAiCQ,QAAAC,MAjCR,oBAnCN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmBX,EAAM,WAAkD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,cAAAC,EAAgB,OAAQ,MAAAC,EAAQ,OAAQ,EAAIV,EAE3GW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,mBACrB,UAAWjB,EACTgB,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,UAAAf,EAACM,EAAA,CACC,OAAQ,GAAGa,EAAQ,GAAG,KAAKE,GAAU,KAAOF,EAAQ,GAAG,UAAUC,EAAY,KAAOD,EAAQ,GAAG,OAC/F,IAAKA,EAAQ,IACb,UAAWX,EAAG,+FAAgG,CAC5G,gEAAiEe,IAAkB,OACnF,iDAAkDA,IAAkB,OACtE,CAAC,EACH,EAGAtB,EAAC,OACC,UAAWO,EAAG,+DAAgE,CAC5E,yBAA0Be,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,UAAAvB,EAACK,EAAA,CAAQ,KAAM,EAAG,KAAMY,EAAO,GAAG,KAAK,UAAU,mBAAmB,EAGnEC,GACClB,EAACO,EAAA,CACC,KAAM,EACN,KAAMW,EACN,GAAG,IACH,UAAU,+GACZ,EAIFlB,EAAC,OAAI,UAAU,mKACZ,SAAAsB,EAAM,IAAI,CAACI,EAA4BC,IACtC1B,EAAC,OAAgB,UAAU,+CACzB,UAAAA,EAAC,OAAI,UAAU,uCACb,UAAAD,EAAC,OACC,IAAK0B,EAAK,KACV,IAAI,OACJ,UAAU,8JACZ,EACA1B,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAU,6EAET,SAAAqB,EAAK,KACR,GACF,EACA1B,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,KAAMmB,EAAK,KACX,UAAU,yGACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDd,EAAiB,YAAc,mBAE/B,IAAOe,EAAQnB,EAAWI,CAAgB",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageTextFeature", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "padImage", "items", "imagePosition", "theme", "boxRef", "item", "index", "ImageTextFeature_default"]
 }

package/dist/esm/biz-components/ImageTextFeature/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { Img, Theme } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 export interface ImageTextFeatureItem {
     /** 功能图标 */
     icon: string;
@@ -14,11 +14,11 @@ export interface ImageTextFeatureProps {
         /** 副标题 */
         subtitle?: string;
         /** PC端图片 */
-        imageUrl: string | Img;
+        pcImage: Media;
         /** 移动端图片 */
-        mobImageUrl?: string | Img;
+        mobileImage: Media;
         /** 平板端图片 */
-        padImageUrl?: string | Img;
+        padImage?: Media;
         /** 功能项列表 */
         items: ImageTextFeatureItem[];
         /** 图片位置，默认 left */

package/dist/esm/biz-components/ImageWithText/ImageWithText.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import h,{useImperativeHandle as u,useRef as T}from"react";import{Heading as i,Picture as v,Text as N}from"../../components/index.js";import{cn as I}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as k}from"../../hooks/useExposure.js";const y="image",D="image_with_text",l=h.forwardRef(({data:n,className:r},c)=>{const{title:a,subtitle:t,desc:m,descIcon:x,imageUrl:d,padImageUrl:f,mobImageUrl:g,theme:s="dark"}=n,p=T(null);return k(p,{componentType:y,componentName:D,componentTitle:a,componentDescription:t}),u(c,()=>p.current),o("section",{ref:p,"data-ui-component-id":"ImageWithText",className:I("flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]",{"text-white":s==="dark","text-[#1f1f1f]":s==="light"},r),children:[o("div",{className:"flex flex-col justify-center",children:[e(i,{as:"h2",size:4,html:a}),t&&e(N,{as:"p",size:3,html:t,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),o("div",{className:"flex flex-row gap-[8px]",children:[x&&e("img",{src:x,alt:"icon",className:"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),m&&e(i,{as:"h4",size:5,html:m,className:"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]})]}),e("div",{className:"",children:e(v,{source:`${d},${f} 1024, ${g} 768`,className:"rounded-[10px] laptop:rounded-[16px]"})})]})});l.displayName="ImageWithText";var R=w(l);export{R as default};
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import g,{useImperativeHandle as h,useRef as T}from"react";import{Heading as s,Picture as v,Text as N}from"../../components/index.js";import{cn as I}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as k}from"../../hooks/useExposure.js";const y="image",D="image_with_text",r=g.forwardRef(({data:n,className:c},d)=>{const{title:m,subtitle:t,desc:x,descIcon:i,image:p,padImage:f,mobileImage:u,theme:l="dark"}=n,o=T(null);return k(o,{componentType:y,componentName:D,componentTitle:m,componentDescription:t}),h(d,()=>o.current),a("section",{ref:o,"data-ui-component-id":"ImageWithText",className:I("flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]",{"text-white":l==="dark","text-[#1f1f1f]":l==="light"},c),children:[a("div",{className:"flex flex-col justify-center",children:[e(s,{as:"h2",size:4,html:m}),t&&e(N,{as:"p",size:3,html:t,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"}),a("div",{className:"flex flex-row gap-[8px]",children:[i&&e("img",{src:i,alt:"icon",className:"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),x&&e(s,{as:"h4",size:5,html:x,className:"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]})]}),e("div",{className:"",children:e(v,{source:`${p.url},${f?.url||p.url} 1024, ${u?.url||p.url} 768`,className:"rounded-[10px] laptop:rounded-[16px]"})})]})});r.displayName="ImageWithText";var R=w(r);export{R as default};
 //# sourceMappingURL=ImageWithText.js.map

package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 { ImageWithTextProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    desc,\n    descIcon,\n    imageUrl,\n    padImageUrl,\n    mobImageUrl,\n    theme = 'dark',\n  } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]',\n        {\n          'text-white': theme === 'dark',\n          'text-[#1f1f1f]': theme === 'light',\n        },\n        className\n      )}\n    >\n      <div className=\"flex flex-col justify-center\">\n        <Heading as={'h2'} size={4} html={title} />\n        {subtitle && (\n          <Text\n            as={'p'}\n            size={3}\n            html={subtitle}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n        <div className=\"flex flex-row gap-[8px]\">\n          {descIcon && (\n            <img\n              src={descIcon}\n              alt=\"icon\"\n              className=\"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n            />\n          )}\n          {desc && (\n            <Heading\n              as={'h4'}\n              size={5}\n              html={desc}\n              className=\"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"\">\n        <Picture\n          source={`${imageUrl},${padImageUrl} 1024, ${mobImageUrl} 768`}\n          className=\"rounded-[10px] laptop:rounded-[16px]\"\n        />\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "aAgDQ,cAAAA,EASA,QAAAC,MATA,oBA/CR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,kBAEhBC,EAAgBX,EAAM,WAA+C,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvG,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,MAAAC,EAAQ,MACV,EAAIV,EAEEW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,gBACrB,UAAWjB,EACT,mFACA,CACE,aAAcgB,IAAU,OACxB,iBAAkBA,IAAU,OAC9B,EACAT,CACF,EAEA,UAAAd,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMY,EAAO,EACxCC,GACClB,EAACO,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,yHACZ,EAEFjB,EAAC,OAAI,UAAU,0BACZ,UAAAmB,GACCpB,EAAC,OACC,IAAKoB,EACL,IAAI,OACJ,UAAU,sDACZ,EAEDD,GACCnB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,4GACZ,GAEJ,GACF,EACAnB,EAAC,OAAI,UAAU,GACb,SAAAA,EAACM,EAAA,CACC,OAAQ,GAAGe,CAAQ,IAAIC,CAAW,UAAUC,CAAW,OACvD,UAAU,uCACZ,EACF,GACF,CAEJ,CAAC,EAEDV,EAAc,YAAc,gBAE5B,IAAOa,EAAQjB,EAAWI,CAAa",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "imageUrl", "padImageUrl", "mobImageUrl", "theme", "boxRef", "ImageWithText_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } 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 { ImageWithTextProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, descIcon, image, padImage, mobileImage, theme = 'dark' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'flex flex-col gap-[24px] laptop:flex-row laptop:gap-[48px] lg-desktop:gap-[64px]',\n        {\n          'text-white': theme === 'dark',\n          'text-[#1f1f1f]': theme === 'light',\n        },\n        className\n      )}\n    >\n      <div className=\"flex flex-col justify-center\">\n        <Heading as={'h2'} size={4} html={title} />\n        {subtitle && (\n          <Text\n            as={'p'}\n            size={3}\n            html={subtitle}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:mt-[16px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n        <div className=\"flex flex-row gap-[8px]\">\n          {descIcon && (\n            <img src={descIcon} alt=\"icon\" className=\"h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\" />\n          )}\n          {desc && (\n            <Heading\n              as={'h4'}\n              size={5}\n              html={desc}\n              className=\"text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"\">\n        <Picture\n          source={`${image.url},${padImage?.url || image.url} 1024, ${mobileImage?.url || image.url} 768`}\n          className=\"rounded-[10px] laptop:rounded-[16px]\"\n        />\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "aAuCQ,cAAAA,EASA,QAAAC,MATA,oBAtCR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,kBAEhBC,EAAgBX,EAAM,WAA+C,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACvG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,YAAAC,EAAa,MAAAC,EAAQ,MAAO,EAAIV,EAEpFW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,gBACrB,UAAWjB,EACT,mFACA,CACE,aAAcgB,IAAU,OACxB,iBAAkBA,IAAU,OAC9B,EACAT,CACF,EAEA,UAAAd,EAAC,OAAI,UAAU,+BACb,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMY,EAAO,EACxCC,GACClB,EAACO,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,yHACZ,EAEFjB,EAAC,OAAI,UAAU,0BACZ,UAAAmB,GACCpB,EAAC,OAAI,IAAKoB,EAAU,IAAI,OAAO,UAAU,sDAAsD,EAEhGD,GACCnB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,4GACZ,GAEJ,GACF,EACAnB,EAAC,OAAI,UAAU,GACb,SAAAA,EAACM,EAAA,CACC,OAAQ,GAAGe,EAAM,GAAG,IAAIC,GAAU,KAAOD,EAAM,GAAG,UAAUE,GAAa,KAAOF,EAAM,GAAG,OACzF,UAAU,uCACZ,EACF,GACF,CAEJ,CAAC,EAEDR,EAAc,YAAc,gBAE5B,IAAOa,EAAQjB,EAAWI,CAAa",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "boxRef", "ImageWithText_default"]
 }

package/dist/esm/biz-components/ImageWithText/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { Theme } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 export interface ImageWithTextProps {
     data: {
         /** 主标题 */
@@ -10,11 +10,11 @@ export interface ImageWithTextProps {
         /** 描述文本图标 */
         descIcon?: string;
         /** PC端图片 URL */
-        imageUrl: string;
+        image: Media;
         /** 平板端图片 URL */
-        padImageUrl?: string;
+        padImage?: Media;
         /** 移动端图片 URL */
-        mobImageUrl?: string;
+        mobileImage?: Media;
         /** 主题，默认 dark */
         theme?: Theme;
     };

package/dist/esm/biz-components/ProductHero/ProductHero.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import f,{useRef as x,useImperativeHandle as b}from"react";import{Heading as a,Button as h,Picture as H,Text as P}from"../../components/index.js";import{cn as v}from"../../helpers/utils.js";import{withLayout as N}from"../../shared/Styles.js";import{useExposure as g}from"../../hooks/useExposure.js";const k="image",w="product_hero",l=f.forwardRef(({data:r,className:i},m)=>{const{title:p,subtitle:e,ctaText:c,poster:n,mobPoster:d,ctaLink:u}=r,o=x(null);return g(o,{componentType:k,componentName:w,componentTitle:p,componentDescription:e}),b(m,()=>o.current),s("section",{ref:o,"data-ui-component-id":"ProductHero",className:v("flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",i),children:[s("div",{className:"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[s("div",{children:[t(a,{as:"h3",size:4,html:p}),t(a,{as:"h4",size:2,html:e,className:"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),t(P,{as:"p",size:2,html:e,className:"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),t("a",{href:u,children:t(h,{className:"w-fit",children:c})})]}),t(H,{className:"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${n}, ${d} 768`})]})});l.displayName="ProductHero";var R=N(l);export{R as default};
+"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import f,{useRef as x,useImperativeHandle as b}from"react";import{Heading as a,Button as h,Picture as H,Text as P}from"../../components/index.js";import{cn as v}from"../../helpers/utils.js";import{withLayout as N}from"../../shared/Styles.js";import{useExposure as g}from"../../hooks/useExposure.js";const k="image",w="product_hero",l=f.forwardRef(({data:r,className:i},m)=>{const{title:p,subtitle:e,ctaText:c,poster:n,mobPoster:u,ctaLink:d}=r,o=x(null);return g(o,{componentType:k,componentName:w,componentTitle:p,componentDescription:e}),b(m,()=>o.current),s("section",{ref:o,"data-ui-component-id":"ProductHero",className:v("flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",i),children:[s("div",{className:"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[s("div",{children:[t(a,{as:"h3",size:4,html:p}),t(a,{as:"h4",size:2,html:e,className:"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),t(P,{as:"p",size:2,html:e,className:"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),t("a",{href:d,children:t(h,{className:"w-fit",children:c})})]}),t(H,{className:"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${n.url}, ${u.url} 768`})]})});l.displayName="ProductHero";var R=N(l);export{R as default};
 //# sourceMappingURL=ProductHero.js.map

package/dist/esm/biz-components/ProductHero/ProductHero.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, 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 { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n        className\n      )}\n    >\n      <div className=\"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n          />\n        </div>\n        <a href={ctaLink}>\n          <Button className=\"w-fit\">{ctaText}</Button>\n        </a>\n      </div>\n      <Picture\n        className=\"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n        source={`${poster}, ${mobPoster} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
-  "mappings": "aAmCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcZ,EAAM,WAA6C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,EAASrB,EAAuB,IAAI,EAE1C,OAAAQ,EAAYa,EAAQ,CAClB,cAAAZ,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMO,EAAO,OAAyB,EAG7DvB,EAAC,WACC,IAAKuB,EACL,uBAAqB,cACrB,UAAWf,EACT,uHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,oFACb,UAAAA,EAAC,OACC,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,EAAO,EACzClB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,kEACZ,EACAnB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,kEACZ,GACF,EACAnB,EAAC,KAAE,KAAMuB,EACP,SAAAvB,EAACM,EAAA,CAAO,UAAU,QAAS,SAAAc,EAAQ,EACrC,GACF,EACApB,EAACO,EAAA,CACC,UAAU,6FACV,OAAQ,GAAGc,CAAM,KAAKC,CAAS,OACjC,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOW,EAAQf,EAAWI,CAAW",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, 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 { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\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  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]',\n        className\n      )}\n    >\n      <div className=\"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]\"\n          />\n        </div>\n        <a href={ctaLink}>\n          <Button className=\"w-fit\">{ctaText}</Button>\n        </a>\n      </div>\n      <Picture\n        className=\"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]\"\n        source={`${poster.url}, ${mobPoster.url} 768`}\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
+  "mappings": "aAmCQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlCR,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAcZ,EAAM,WAA6C,CAAC,CAAE,KAAAa,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,EAASrB,EAAuB,IAAI,EAE1C,OAAAQ,EAAYa,EAAQ,CAClB,cAAAZ,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMO,EAAO,OAAyB,EAG7DvB,EAAC,WACC,IAAKuB,EACL,uBAAqB,cACrB,UAAWf,EACT,uHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,oFACb,UAAAA,EAAC,OACC,UAAAD,EAACK,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,EAAO,EACzClB,EAACK,EAAA,CACC,GAAI,KACJ,KAAM,EACN,KAAMc,EACN,UAAU,kEACZ,EACAnB,EAACQ,EAAA,CACC,GAAI,IACJ,KAAM,EACN,KAAMW,EACN,UAAU,kEACZ,GACF,EACAnB,EAAC,KAAE,KAAMuB,EACP,SAAAvB,EAACM,EAAA,CAAO,UAAU,QAAS,SAAAc,EAAQ,EACrC,GACF,EACApB,EAACO,EAAA,CACC,UAAU,6FACV,OAAQ,GAAGc,EAAO,GAAG,KAAKC,EAAU,GAAG,OACzC,GACF,CAEJ,CAAC,EAEDR,EAAY,YAAc,cAE1B,IAAOW,EAAQf,EAAWI,CAAW",
   "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Heading", "Button", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ProductHero", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "boxRef", "ProductHero_default"]
 }

package/dist/esm/biz-components/ProductHero/types.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { Media } from '../../types/props';
 export interface ProductHeroProps {
     data: {
         /** 主标题 */
@@ -9,9 +10,9 @@ export interface ProductHeroProps {
         /** CTA 按钮链接 */
         ctaLink: string;
         /** 桌面端图片 URL */
-        poster: string;
+        poster: Media;
         /** 移动端图片 URL */
-        mobPoster: string;
+        mobPoster: Media;
         /** 3D 模型源（可选，暂未使用） */
         modelSrc?: string;
     };

package/dist/esm/biz-components/TabWithImage/TabWithImage.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import I,{useState as x,useEffect as N,useRef as d,useImperativeHandle as k}from"react";import{Heading as f,Picture as D,Text as E}from"../../components/index.js";import{cn as u}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as L}from"../../hooks/useExposure.js";import{motion as M,AnimatePresence as W}from"framer-motion";const P="image",R="tab_with_image",b=I.forwardRef(({data:v,className:h},g)=>{const{title:n,subtitle:z,desc:p,imageUrl:A,mobImageUrl:S,datalist:i=[]}=v,m=d(null);L(m,{componentType:P,componentName:R,componentTitle:n,componentDescription:p}),k(g,()=>m.current);const w=(o,t)=>{y(o),t.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[a,y]=x(0),r=d([]),[c,T]=x({left:0,width:0});return N(()=>{const o=r.current[a];if(o){const{offsetLeft:t,offsetWidth:l}=o;T({left:t,width:l})}},[a,i.length]),s("section",{ref:m,"data-ui-component-id":"TabWithImage",className:u("flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",h),children:[s("div",{className:"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{children:[e(f,{as:"h3",size:4,html:n}),e(E,{as:"p",size:1,html:p,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:c.left,width:c.width}}),i.map((o,t)=>e("div",{ref:l=>{r.current[t]=l},onClick:l=>w(t,l),className:u("relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",a===t?"text-black":"text-white"),children:e(f,{as:"h1",size:1,html:o?.title,className:"text-balance-normal !whitespace-nowrap md:text-[14px]"})},t))]})})]}),e("div",{className:" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]",children:e(W,{mode:"wait",children:e(M.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"absolute left-0 top-0 w-full",children:e(D,{source:`${i[a].image} ,${i[a].imgPad} 1440, ${i[a].imageMob} 767`,className:"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},i[a].image)})})]})});b.displayName="TabWithImage";var V=H(b);export{V as default};
+"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import I,{useState as x,useEffect as N,useRef as d,useImperativeHandle as k}from"react";import{Heading as f,Picture as D,Text as E}from"../../components/index.js";import{cn as u}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import{useExposure as L}from"../../hooks/useExposure.js";import{motion as M,AnimatePresence as W}from"framer-motion";const P="image",R="tab_with_image",b=I.forwardRef(({data:v,className:h},g)=>{const{title:n,subtitle:z,desc:p,image:A,mobileImage:S,datalist:a=[]}=v,m=d(null);L(m,{componentType:P,componentName:R,componentTitle:n,componentDescription:p}),k(g,()=>m.current);const w=(l,i)=>{y(l),i.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[e,y]=x(0),r=d([]),[c,T]=x({left:0,width:0});return N(()=>{const l=r.current[e];if(l){const{offsetLeft:i,offsetWidth:o}=l;T({left:i,width:o})}},[e,a.length]),s("section",{ref:m,"data-ui-component-id":"TabWithImage",className:u("flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",h),children:[s("div",{className:"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{children:[t(f,{as:"h3",size:4,html:n}),t(E,{as:"p",size:1,html:p,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),t("div",{className:"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[t("div",{className:"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:c.left,width:c.width}}),a.map((l,i)=>t("div",{ref:o=>{r.current[i]=o},onClick:o=>w(i,o),className:u("relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",e===i?"text-black":"text-white"),children:t(f,{as:"h1",size:1,html:l?.title,className:"text-balance-normal !whitespace-nowrap md:text-[14px]"})},i))]})})]}),t("div",{className:" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]",children:t(W,{mode:"wait",children:t(M.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"absolute left-0 top-0 w-full",children:t(D,{source:`${a[e].image.url} ,${a[e].imgPad?.url||a[e].image.url} 1440, ${a[e].imageMob?.url||a[e].image.url} 767`,alt:a[e].image.alt,className:"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},a[e].image.url)})})]})});b.displayName="TabWithImage";var q=H(b);export{q as default};
 //# sourceMappingURL=TabWithImage.js.map

package/dist/esm/biz-components/TabWithImage/TabWithImage.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabWithImage/TabWithImage.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } 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 { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, imageUrl, mobImageUrl, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn(\n        'flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]',\n        className\n      )}\n    >\n      <div className=\"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={(el) => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={(e) => handleClick(index, e)}\n                className={cn(\n                  'relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={datalist[activeIndex].image}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"absolute left-0 top-0 w-full\"\n          >\n            <Picture\n              source={`${datalist[activeIndex].image} ,${datalist[activeIndex].imgPad} 1440, ${datalist[activeIndex].imageMob} 767`}\n              className=\"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "motion", "AnimatePresence", "componentType", "componentName", "TabWithImage", "data", "className", "ref", "title", "subtitle", "desc", "imageUrl", "mobImageUrl", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el", "TabWithImage_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } 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 { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn('flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]', className)}\n    >\n      <div className=\"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div>\n          <Heading as={'h3'} size={4} html={title} />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={el => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={e => handleClick(index, e)}\n                className={cn(\n                  'relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\" relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={datalist[activeIndex].image.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"absolute left-0 top-0 w-full\"\n          >\n            <Picture\n              source={`${datalist[activeIndex].image.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image.url} 767`}\n              alt={datalist[activeIndex].image.alt}\n              className=\"rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "motion", "AnimatePresence", "componentType", "componentName", "TabWithImage", "data", "className", "ref", "title", "subtitle", "desc", "image", "mobileImage", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el", "TabWithImage_default"]
 }

package/dist/esm/biz-components/TabWithImage/types.d.ts CHANGED Viewed

@@ -1,10 +1,11 @@
+import type { Media } from '../../types/props';
 export interface TabWithImageDataItem {
     /** 桌面端图片 URL */
-    image: string;
+    image: Media;
     /** 平板端图片 URL */
-    imgPad?: string;
+    imgPad?: Media;
     /** 移动端图片 URL */
-    imageMob?: string;
+    imageMob?: Media;
     /** Tab 标题 */
     title: string;
 }
@@ -17,9 +18,9 @@ export interface TabWithImageProps {
         /** 描述文本 */
         desc: string;
         /** 默认图片 URL（可选） */
-        imageUrl?: string;
+        image?: Media;
         /** 默认移动端图片 URL（可选） */
-        mobImageUrl?: string;
+        mobileImage?: Media;
         /** 数据列表 */
         datalist: TabWithImageDataItem[];
     };

package/dist/esm/biz-components/TabsWithMedia/TabsWithMedia.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as o,jsxs as S}from"react/jsx-runtime";import A,{useEffect as U,useImperativeHandle as B,useMemo as V,useRef as x,useState as g}from"react";import{Heading as M,Picture as _,Text as q}from"../../components/index.js";import{cn as p}from"../../helpers/utils.js";import{withLayout as O}from"../../shared/Styles.js";import{useExposure as Q}from"../../hooks/useExposure.js";import{Swiper as G,SwiperSlide as J}from"swiper/react";import{Pagination as K,EffectFade as X}from"swiper/modules";import{motion as Y,AnimatePresence as Z}from"framer-motion";import{useMediaQuery as $}from"react-responsive";const ee="video",te="tabs_with_media",ie=[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3},{time:2.6,point:12.8,highlightIdx:4},{time:3.2,point:16,highlightIdx:5}],E=A.forwardRef(({data:R,className:C},D)=>{const{title:w,poster:H,videoUrl:P,mobvideoUrl:W,items:f=[],timeIdx:a=ie}=R,[y,z]=g(null),b=x([]),T=x(null),u=x(null),h=x(null);Q(h,{componentType:ee,componentName:te,componentTitle:w}),B(D,()=>h.current);const oe=e=>{const i=T.current,s=b.current[e];if(i&&s){const t=i.getBoundingClientRect(),m=s.getBoundingClientRect().left-t.left-i.clientWidth/2+s.clientWidth/2;i.scrollTo({left:i.scrollLeft+m,behavior:"smooth"})}},k=$({query:"(max-width: 768px)"}),[ne,v,j,l,F]=V(()=>{const s=f.length,t=f?.map((n,r)=>({...n,key:r,index:r}))||[];return[t,t.concat(t),5,2,s]},[f,k]),[d,I]=g(l),[c,N]=g(v.slice(0,j)),L=(e,i,s)=>{if(e!==d&&i!==l){if(i>l){const t=i-l,n=[...c];n.splice(0,t);const r=c[c.length-1]?.key+1,m=[...v].splice(r,t);n.push(...m),N([...n])}if(i<l){const t=l-i,n=[...c];n.splice(-t);const r=c[0]?.key,m=[...v].splice(F+r-t,t);n.unshift(...m),N([...n])}if(I(e),y?.slideTo(e),!s){let t=0;a.forEach(n=>{n.highlightIdx<e&&(t+=n.time)}),u.current&&(u.current.currentTime=t)}}};return U(()=>{const e=u.current;if(!e)return;const i=()=>{const s=e.currentTime;for(let t=0;t<a.length;t++){const n=t===0?0:a[t-1].point;if(s>=n&&s<a[t].point){L(a[t].highlightIdx,a[t].highlightIdx,!0);break}}s>=a[a.length-1].point&&(e.currentTime=0,e.play())};return e.addEventListener("timeupdate",i),()=>{e.removeEventListener("timeupdate",i)}},[y,a]),S("section",{ref:h,"data-ui-component-id":"TabsWithMedia",className:p("flex flex-col overflow-hidden text-[#fff] sm:overflow-visible",C),children:[o(M,{as:"h3",size:4,html:w,className:"text-center"}),o("div",{className:" relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible",children:o("div",{className:p("mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit"),children:o("div",{className:p("flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]"),ref:T,children:o(Z,{mode:"popLayout",children:c?.map((e,i)=>o(Y.div,{layout:!0,ref:s=>{b.current[e?.index]=s},onClick:()=>{L(e?.key,i)},className:"min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible",initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeOut"},children:o("div",{className:"flex items-center justify-between",children:S("div",{className:p("flex",{"flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1":d===e?.key}),children:[o("div",{className:p("flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]",{"h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]":d!==e?.index}),style:d===e?.key?{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))"}:void 0,children:o(_,{source:e?.icon,className:"h-[22px] w-[22px] md:h-[14px] md:w-[14px]"})}),o("div",{className:"",children:o(M,{as:"h4",size:2,html:e?.tab,className:p("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]",{"h-auto w-[calc-size(auto,size)] px-[6px] opacity-100":d===e?.key})})})]})})},e?.key))})})})}),o("div",{className:"mt-[16px] lg-desktop:mt-[24px]",children:o(G,{slidesPerView:1,effect:"fade",fadeEffect:{crossFade:!0},modules:[K,X],onSlideChange:e=>{const i=e.realIndex;I(i)},onSwiper:e=>z(e),children:f.map((e,i)=>o(J,{style:{transition:"opacity 1s ease-in-out"},className:"rounded-[26px]",children:o("div",{children:o(q,{as:"p",size:2,html:e.desc,className:"text-center desktop:text-[20px] lg-desktop:text-[18px]"})})},i))})}),o("div",{className:"mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]",children:o("video",{className:"mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]",src:k?W:P,poster:H,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,ref:u})})]})});E.displayName="TabsWithMedia";var ue=O(E);export{ue as default};
+"use client";import{jsx as o,jsxs as S}from"react/jsx-runtime";import A,{useEffect as B,useImperativeHandle as V,useMemo as _,useRef as x,useState as g}from"react";import{Heading as M,Picture as q,Text as O}from"../../components/index.js";import{cn as p}from"../../helpers/utils.js";import{withLayout as Q}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{Swiper as G,SwiperSlide as J}from"swiper/react";import{Pagination as K,EffectFade as X}from"swiper/modules";import{motion as Y,AnimatePresence as Z}from"framer-motion";import{useMediaQuery as $}from"react-responsive";const ee="video",te="tabs_with_media",ie=[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3},{time:2.6,point:12.8,highlightIdx:4},{time:3.2,point:16,highlightIdx:5}],E=A.forwardRef(({data:R,className:C},D)=>{const{title:w,poster:H,video:P,mobvideo:W,items:f=[],timeIdx:a=ie}=R,[y,z]=g(null),b=x([]),T=x(null),u=x(null),h=x(null);U(h,{componentType:ee,componentName:te,componentTitle:w}),V(D,()=>h.current);const oe=e=>{const i=T.current,s=b.current[e];if(i&&s){const t=i.getBoundingClientRect(),m=s.getBoundingClientRect().left-t.left-i.clientWidth/2+s.clientWidth/2;i.scrollTo({left:i.scrollLeft+m,behavior:"smooth"})}},k=$({query:"(max-width: 768px)"}),[ne,v,j,l,F]=_(()=>{const s=f.length,t=f?.map((n,r)=>({...n,key:r,index:r}))||[];return[t,t.concat(t),5,2,s]},[f,k]),[d,I]=g(l),[c,N]=g(v.slice(0,j)),L=(e,i,s)=>{if(e!==d&&i!==l){if(i>l){const t=i-l,n=[...c];n.splice(0,t);const r=c[c.length-1]?.key+1,m=[...v].splice(r,t);n.push(...m),N([...n])}if(i<l){const t=l-i,n=[...c];n.splice(-t);const r=c[0]?.key,m=[...v].splice(F+r-t,t);n.unshift(...m),N([...n])}if(I(e),y?.slideTo(e),!s){let t=0;a.forEach(n=>{n.highlightIdx<e&&(t+=n.time)}),u.current&&(u.current.currentTime=t)}}};return B(()=>{const e=u.current;if(!e)return;const i=()=>{const s=e.currentTime;for(let t=0;t<a.length;t++){const n=t===0?0:a[t-1].point;if(s>=n&&s<a[t].point){L(a[t].highlightIdx,a[t].highlightIdx,!0);break}}s>=a[a.length-1].point&&(e.currentTime=0,e.play())};return e.addEventListener("timeupdate",i),()=>{e.removeEventListener("timeupdate",i)}},[y,a]),S("section",{ref:h,"data-ui-component-id":"TabsWithMedia",className:p("flex flex-col overflow-hidden text-[#fff] sm:overflow-visible",C),children:[o(M,{as:"h3",size:4,html:w,className:"text-center"}),o("div",{className:" relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible",children:o("div",{className:p("mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit"),children:o("div",{className:p("flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]"),ref:T,children:o(Z,{mode:"popLayout",children:c?.map((e,i)=>o(Y.div,{layout:!0,ref:s=>{b.current[e?.index]=s},onClick:()=>{L(e?.key,i)},className:"min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible",initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeOut"},children:o("div",{className:"flex items-center justify-between",children:S("div",{className:p("flex",{"flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1":d===e?.key}),children:[o("div",{className:p("flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]",{"h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]":d!==e?.index}),style:d===e?.key?{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))"}:void 0,children:o(q,{source:e?.icon?.url,alt:e?.icon?.alt,className:"h-[22px] w-[22px] md:h-[14px] md:w-[14px]"})}),o("div",{className:"",children:o(M,{as:"h4",size:2,html:e?.tab,className:p("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]",{"h-auto w-[calc-size(auto,size)] px-[6px] opacity-100":d===e?.key})})})]})})},e?.key))})})})}),o("div",{className:"mt-[16px] lg-desktop:mt-[24px]",children:o(G,{slidesPerView:1,effect:"fade",fadeEffect:{crossFade:!0},modules:[K,X],onSlideChange:e=>{const i=e.realIndex;I(i)},onSwiper:e=>z(e),children:f.map((e,i)=>o(J,{style:{transition:"opacity 1s ease-in-out"},className:"rounded-[26px]",children:o("div",{children:o(O,{as:"p",size:2,html:e.desc,className:"text-center desktop:text-[20px] lg-desktop:text-[18px]"})})},i))})}),o("div",{className:"mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]",children:o("video",{className:"mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]",src:k?W?.url:P?.url,poster:H?.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,ref:u})})]})});E.displayName="TabsWithMedia";var ue=Q(E);export{ue as default};
 //# sourceMappingURL=TabsWithMedia.js.map

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

@@ -1,7 +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, videoUrl, mobvideoUrl, 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    return [list, list.concat(list), 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('flex flex-col overflow-hidden text-[#fff] sm:overflow-visible', className)}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"text-center\" />\n      <div className=\" relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible\">\n        <div className={cn('mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit')}>\n          <div\n            className={cn(\n              'flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]'\n            )}\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=\"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=\"flex items-center justify-between\">\n                    <div\n                      className={cn('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                          '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:\n                                  'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                              }\n                            : undefined\n                        }\n                      >\n                        <Picture\n                          source={item?.icon}\n                          className=\"h-[22px] w-[22px] md:h-[14px] md:w-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            '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':\n                                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=\"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        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide\n              key={ind}\n              style={{ transition: 'opacity 1s ease-in-out' }}\n              className=\"rounded-[26px]\"\n            >\n              <div>\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"text-center desktop:text-[20px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]\">\n        <video\n          className=\"mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]\"\n          src={isMob ? mobvideoUrl : videoUrl}\n          poster={poster}\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", "videoUrl", "mobvideoUrl", "items", "timeIdx", "swiper", "setSwiper", "tabRefs", "scrollContainerRef", "videoRef", "boxRef", "scrollToTabCenter", "index", "container", "tab", "containerRect", "scroll", "isMob", "list", "listDouble", "row", "center", "listLength", "item", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "video", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind", "TabsWithMedia_default"]
+  "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    return [list, list.concat(list), 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('flex flex-col overflow-hidden text-[#fff] sm:overflow-visible', className)}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"text-center\" />\n      <div className=\" relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible\">\n        <div className={cn('mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit')}>\n          <div\n            className={cn('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=\"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=\"flex items-center justify-between\">\n                    <div\n                      className={cn('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                          '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=\"h-[22px] w-[22px] md:h-[14px] md:w-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            '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=\"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        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide key={ind} style={{ transition: 'opacity 1s ease-in-out' }} className=\"rounded-[26px]\">\n              <div>\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"text-center desktop:text-[20px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]\">\n        <video\n          className=\"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", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind", "TabsWithMedia_default"]
 }