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

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

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 (97) hide show

package/dist/cjs/biz-components/FeatureCards/FeatureCards.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var C=Object.create;var x=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var $=(p,a)=>{for(var s in a)x(p,s,{get:a[s],enumerable:!0})},k=(p,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of T(a))!H.call(p,o)&&o!==s&&x(p,o,{get:()=>a[o],enumerable:!(i=F(a,o))||i.enumerable});return p};var R=(p,a,s)=>(s=p!=null?C(z(p)):{},k(a||!p||!p.__esModule?x(s,"default",{value:p,enumerable:!0}):s,p)),S=p=>k(x({},"__esModule",{value:!0}),p);var D={};$(D,{default:()=>j});module.exports=S(D);var e=require("react/jsx-runtime"),r=R(require("react")),l=require("../../components/index.js"),d=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),y=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),n=require("swiper/react");const m="image",u="feature_cards",g=r.default.forwardRef(({data:p,className:a},s)=>{const{title:i,subtitle:o,items:f=[]}=p,c=(0,r.useRef)(null);(0,y.useExposure)(c,{componentType:m,componentName:u,componentTitle:i,componentDescription:o}),(0,r.useImperativeHandle)(s,()=>c.current);const b=t=>{const h=(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Picture,{source:t.imageUrl,alt:t.title,className:"absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),(0,e.jsxs)("div",{className:"z-10",children:[(0,e.jsx)(l.Heading,{size:3,as:"h2",className:"laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:t.title}),(0,e.jsx)(l.Text,{size:4,as:"p",className:"mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:t.subtitle})]})]}),v=(0,d.cn)("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]",{"aiui-dark":t.theme==="dark","aiui-light":t.theme==="light"});return t.link?(0,e.jsx)("a",{href:(0,w.trackUrlRef)(t.link,`${m}_${u}`),className:v,"data-headless-type-name":`${m}#${u}`,"data-headless-title-desc-button":`${i}#${t.title}#${t.subtitle}`,children:h}):(0,e.jsx)("div",{className:v,children:h})};return(0,e.jsxs)("section",{ref:c,"data-ui-component-id":"FeatureCards",className:(0,d.cn)("flex w-full flex-col justify-center",a),children:[(0,e.jsx)(l.Heading,{size:4,as:"h1",className:"text-left laptop:text-center",children:i}),o&&(0,e.jsx)(l.Text,{size:2,as:"p",className:"mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:o}),(0,e.jsx)("div",{className:"mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:f.map(t=>(0,e.jsx)(r.default.Fragment,{children:b(t)},t.title))}),(0,e.jsx)("div",{className:"mt-[24px] w-full laptop:hidden",children:(0,e.jsx)(n.Swiper,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"relative w-full !overflow-visible",children:f.map(t=>(0,e.jsx)(n.SwiperSlide,{className:"relative !h-[360px] !w-[296px]",children:(0,e.jsxs)("div",{className:(0,d.cn)("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]",{"aiui-dark":t.theme==="dark","aiui-light":t.theme==="light"}),children:[(0,e.jsx)(l.Picture,{source:t.imageUrl,alt:t.title,className:"absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),(0,e.jsxs)("div",{className:"z-10",children:[(0,e.jsx)(l.Heading,{size:3,as:"h2",children:t.title}),(0,e.jsx)(l.Text,{size:4,as:"p",className:"mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:t.subtitle})]})]},t.title)},t.title))})})]})});g.displayName="FeatureCards";var j=(0,N.withLayout)(g);
+"use strict";"use client";var C=Object.create;var x=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var $=(p,a)=>{for(var s in a)x(p,s,{get:a[s],enumerable:!0})},v=(p,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of T(a))!H.call(p,o)&&o!==s&&x(p,o,{get:()=>a[o],enumerable:!(i=F(a,o))||i.enumerable});return p};var R=(p,a,s)=>(s=p!=null?C(z(p)):{},v(a||!p||!p.__esModule?x(s,"default",{value:p,enumerable:!0}):s,p)),S=p=>v(x({},"__esModule",{value:!0}),p);var D={};$(D,{default:()=>j});module.exports=S(D);var t=require("react/jsx-runtime"),r=R(require("react")),l=require("../../components/index.js"),d=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),y=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),n=require("swiper/react");const m="image",u="feature_cards",k=r.default.forwardRef(({data:p,className:a},s)=>{const{title:i,subtitle:o,items:f=[]}=p,c=(0,r.useRef)(null);(0,y.useExposure)(c,{componentType:m,componentName:u,componentTitle:i,componentDescription:o}),(0,r.useImperativeHandle)(s,()=>c.current);const b=e=>{const h=(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.Picture,{source:e.image.url,alt:e.image.alt||e.title,className:"absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),(0,t.jsxs)("div",{className:"z-10",children:[(0,t.jsx)(l.Heading,{size:3,as:"h2",className:"laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:e.title}),(0,t.jsx)(l.Text,{size:4,as:"p",className:"mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:e.subtitle})]})]}),g=(0,d.cn)("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]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"});return e.link?(0,t.jsx)("a",{href:(0,w.trackUrlRef)(e.link,`${m}_${u}`),className:g,"data-headless-type-name":`${m}#${u}`,"data-headless-title-desc-button":`${i}#${e.title}#${e.subtitle}`,children:h}):(0,t.jsx)("div",{className:g,children:h})};return(0,t.jsxs)("section",{ref:c,"data-ui-component-id":"FeatureCards",className:(0,d.cn)("flex w-full flex-col justify-center",a),children:[(0,t.jsx)(l.Heading,{size:4,as:"h1",className:"text-left laptop:text-center",children:i}),o&&(0,t.jsx)(l.Text,{size:2,as:"p",className:"mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:o}),(0,t.jsx)("div",{className:"mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:f.map(e=>(0,t.jsx)(r.default.Fragment,{children:b(e)},e.title))}),(0,t.jsx)("div",{className:"mt-[24px] w-full laptop:hidden",children:(0,t.jsx)(n.Swiper,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"relative w-full !overflow-visible",children:f.map(e=>(0,t.jsx)(n.SwiperSlide,{className:"relative !h-[360px] !w-[296px]",children:(0,t.jsxs)("div",{className:(0,d.cn)("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]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"}),children:[(0,t.jsx)(l.Picture,{source:e.image.url,alt:e.image.alt||e.title,className:"absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),(0,t.jsxs)("div",{className:"z-10",children:[(0,t.jsx)(l.Heading,{size:3,as:"h2",children:e.title}),(0,t.jsx)(l.Text,{size:4,as:"p",className:"mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:e.subtitle})]})]},e.title)},e.title))})})]})});k.displayName="FeatureCards";var j=(0,N.withLayout)(k);
 //# sourceMappingURL=FeatureCards.js.map

package/dist/cjs/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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BM,IAAAI,EAAA,6BA5BNC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAE5BL,EAAoC,wBAEpC,MAAMM,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,CAAE,EAAIL,EAElCM,KAAS,UAAuB,IAAI,KAE1C,eAAYA,EAAQ,CAClB,cAAAV,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMI,EAAO,OAAyB,EAE/D,MAAMC,EAAcC,GAA0B,CAC5C,MAAMC,KACJ,oBACE,oBAAC,WACC,OAAQD,EAAK,SACb,IAAKA,EAAK,MACV,UAAU,2BACV,aAAa,uBACf,KACA,QAAC,OAAI,UAAU,OACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,gEACjC,SAAAA,EAAK,MACR,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,oFAET,SAAAA,EAAK,SACR,GACF,GACF,EAGIE,KAAc,MAClB,0TACA,CACE,YAAaF,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,OAAIA,EAAK,QAEL,OAAC,KACC,QAAM,eAAYA,EAAK,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAChE,UAAWa,EACX,0BAAyB,GAAGd,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGM,CAAK,IAAIK,EAAK,KAAK,IAAIA,EAAK,QAAQ,GAEvE,SAAAC,EACH,KAIG,OAAC,OAAI,UAAWC,EAAc,SAAAD,EAAY,CACnD,EAEA,SACE,QAAC,WACC,IAAKH,EACL,uBAAqB,eACrB,aAAW,MAAG,sCAAuCL,CAAS,EAG9D,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,+BACjC,SAAAE,EACH,EACCC,MACC,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,+FAET,SAAAA,EACH,KAIF,OAAC,OAAI,UAAU,yGACZ,SAAAC,EAAM,IAAIG,MACT,OAAC,EAAAT,QAAM,SAAN,CAAiC,SAAAQ,EAAWC,CAAI,GAA5BA,EAAK,KAAyB,CACpD,EACH,KAGA,OAAC,OAAI,UAAU,iCACb,mBAAC,UAAO,aAAc,GAAI,cAAc,OAAO,WAAU,GAAC,UAAU,oCACjE,SAAAH,EAAM,IAAIG,MACT,OAAC,eAA6B,UAAU,iCACtC,oBAAC,OAEC,aAAW,MACT,iOACA,CACE,YAAaA,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,oBAAC,WACC,OAAQA,EAAK,SACb,IAAKA,EAAK,MACV,UAAU,2BACV,aAAa,uBACf,KACA,QAAC,OAAI,UAAU,OACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAClB,SAAAA,EAAK,MACR,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,qGAET,SAAAA,EAAK,SACR,GACF,IA1BKA,EAAK,KA2BZ,GA7BgBA,EAAK,KA8BvB,CACD,EACH,EACF,GACF,CAEJ,CAAC,EAEDV,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
+  "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BM,IAAAI,EAAA,6BA5BNC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAE5BL,EAAoC,wBAEpC,MAAMM,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,CAAE,EAAIL,EAElCM,KAAS,UAAuB,IAAI,KAE1C,eAAYA,EAAQ,CAClB,cAAAV,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMI,EAAO,OAAyB,EAE/D,MAAMC,EAAcC,GAA0B,CAC5C,MAAMC,KACJ,oBACE,oBAAC,WACC,OAAQD,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,KAAOA,EAAK,MAC5B,UAAU,2BACV,aAAa,uBACf,KACA,QAAC,OAAI,UAAU,OACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,gEACjC,SAAAA,EAAK,MACR,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,oFAET,SAAAA,EAAK,SACR,GACF,GACF,EAGIE,KAAc,MAClB,0TACA,CACE,YAAaF,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,OAAIA,EAAK,QAEL,OAAC,KACC,QAAM,eAAYA,EAAK,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAChE,UAAWa,EACX,0BAAyB,GAAGd,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGM,CAAK,IAAIK,EAAK,KAAK,IAAIA,EAAK,QAAQ,GAEvE,SAAAC,EACH,KAIG,OAAC,OAAI,UAAWC,EAAc,SAAAD,EAAY,CACnD,EAEA,SACE,QAAC,WACC,IAAKH,EACL,uBAAqB,eACrB,aAAW,MAAG,sCAAuCL,CAAS,EAG9D,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,+BACjC,SAAAE,EACH,EACCC,MACC,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,+FAET,SAAAA,EACH,KAIF,OAAC,OAAI,UAAU,yGACZ,SAAAC,EAAM,IAAIG,MACT,OAAC,EAAAT,QAAM,SAAN,CAAiC,SAAAQ,EAAWC,CAAI,GAA5BA,EAAK,KAAyB,CACpD,EACH,KAGA,OAAC,OAAI,UAAU,iCACb,mBAAC,UAAO,aAAc,GAAI,cAAc,OAAO,WAAU,GAAC,UAAU,oCACjE,SAAAH,EAAM,IAAIG,MACT,OAAC,eAA6B,UAAU,iCACtC,oBAAC,OAEC,aAAW,MACT,iOACA,CACE,YAAaA,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,oBAAC,WACC,OAAQA,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,KAAOA,EAAK,MAC5B,UAAU,2BACV,aAAa,uBACf,KACA,QAAC,OAAI,UAAU,OACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAClB,SAAAA,EAAK,MACR,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,UAAU,qGAET,SAAAA,EAAK,SACR,GACF,IA1BKA,EAAK,KA2BZ,GA7BgBA,EAAK,KA8BvB,CACD,EACH,EACF,GACF,CAEJ,CAAC,EAEDV,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
   "names": ["FeatureCards_exports", "__export", "FeatureCards_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "FeatureCards", "React", "data", "className", "ref", "title", "subtitle", "items", "boxRef", "renderCard", "item", "cardContent", "cardClasses"]
 }

package/dist/cjs/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/cjs/biz-components/FeatureCards/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var p=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of n(t))!g.call(e,r)&&r!==a&&s(e,r,{get:()=>t[r],enumerable:!(i=m(t,r))||i.enumerable});return e};var l=e=>p(s({},"__esModule",{value:!0}),e);var o={};module.exports=l(o);
+"use strict";var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(t,e,a,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of n(e))!p.call(t,r)&&r!==a&&s(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var d=t=>g(s({},"__esModule",{value:!0}),t);var l={};module.exports=d(l);
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/FeatureCards/types.ts"],
-  "sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface FeatureCardItem {\n  /** \u5361\u7247\u6807\u9898 */\n  title: string\n  /** \u5361\u7247\u526F\u6807\u9898/\u63CF\u8FF0 */\n  subtitle: string\n  /** \u80CC\u666F\u56FE\u7247 URL */\n  imageUrl: string\n  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n  /** \u94FE\u63A5\u5730\u5740 */\n  link?: string\n}\n\nexport interface FeatureCardsProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n    subtitle?: string\n    /** \u5361\u7247\u5217\u8868 */\n    items: FeatureCardItem[]\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface FeatureCardItem {\n  /** \u5361\u7247\u6807\u9898 */\n  title: string\n  /** \u5361\u7247\u526F\u6807\u9898/\u63CF\u8FF0 */\n  subtitle: string\n  /** \u80CC\u666F\u56FE\u7247 URL */\n  image: Media\n  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n  /** \u94FE\u63A5\u5730\u5740 */\n  link?: string\n}\n\nexport interface FeatureCardsProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n    subtitle?: string\n    /** \u5361\u7247\u5217\u8868 */\n    items: FeatureCardItem[]\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var v=Object.create;var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,p)=>{for(var s in p)m(t,s,{get:p[s],enumerable:!0})},r=(t,p,s,d)=>{if(p&&typeof p=="object"||typeof p=="function")for(let l of N(p))!g.call(t,l)&&l!==s&&m(t,l,{get:()=>p[l],enumerable:!(d=w(p,l))||d.enumerable});return t};var b=(t,p,s)=>(s=t!=null?v(k(t)):{},r(p||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),F=t=>r(m({},"__esModule",{value:!0}),t);var M={};y(M,{default:()=>H});module.exports=F(M);var e=require("react/jsx-runtime"),x=b(require("react")),a=require("../../components/index.js"),u=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),h=require("../../hooks/useExposure.js");const S="image",T="feature_showcase",n=x.default.forwardRef(({data:t,className:p},s)=>{const{datalist:d=[],datalists:l=[]}=t||{},i=(0,x.useRef)(null);return(0,h.useExposure)(i,{componentType:S,componentName:T,componentTitle:"Feature Showcase"}),(0,x.useImperativeHandle)(s,()=>i.current),(0,e.jsxs)("section",{ref:i,"data-ui-component-id":"FeatureShowcase",className:(0,u.cn)("flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col",p),children:[(0,e.jsx)("div",{className:"flex gap-[16px]",children:d?.map((o,c)=>(0,e.jsx)("div",{children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)(a.Picture,{source:`${o.imageMob}`,className:"w-[296px] rounded-[12px] laptop:hidden"}),(0,e.jsx)(a.Picture,{source:`${o.image} 1024`,className:"l:hidden"}),(0,e.jsxs)("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:[(0,e.jsx)(a.Heading,{as:"h2",size:3,html:o?.title,className:"mt-[16px] md:text-[20px]"}),(0,e.jsx)(a.Text,{as:"p",html:o.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]"})]})]})},c))}),(0,e.jsx)("div",{className:"flex gap-[16px]",children:l?.map((o,c)=>(0,e.jsx)("div",{children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)(a.Picture,{source:`${o.imageMob}`,className:"w-[296px] rounded-[12px] laptop:hidden"}),(0,e.jsx)(a.Picture,{source:`${o.image} 1024`,className:"l:hidden"}),(0,e.jsxs)("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:[(0,e.jsx)(a.Heading,{as:"h2",size:3,html:o?.title,className:"mt-[16px] md:text-[20px]"}),(0,e.jsx)(a.Text,{as:"p",html:o.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]"})]})]})},c))})]})});n.displayName="FeatureShowcase";var H=(0,f.withLayout)(n);
+"use strict";"use client";var v=Object.create;var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var y=(t,p)=>{for(var s in p)m(t,s,{get:p[s],enumerable:!0})},c=(t,p,s,d)=>{if(p&&typeof p=="object"||typeof p=="function")for(let l of N(p))!g.call(t,l)&&l!==s&&m(t,l,{get:()=>p[l],enumerable:!(d=w(p,l))||d.enumerable});return t};var b=(t,p,s)=>(s=t!=null?v(k(t)):{},c(p||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t)),F=t=>c(m({},"__esModule",{value:!0}),t);var M={};y(M,{default:()=>H});module.exports=F(M);var e=require("react/jsx-runtime"),x=b(require("react")),a=require("../../components/index.js"),u=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),h=require("../../hooks/useExposure.js");const S="image",T="feature_showcase",n=x.default.forwardRef(({data:t,className:p},s)=>{const{datalist:d=[],datalists:l=[]}=t||{},i=(0,x.useRef)(null);return(0,h.useExposure)(i,{componentType:S,componentName:T,componentTitle:"Feature Showcase"}),(0,x.useImperativeHandle)(s,()=>i.current),(0,e.jsxs)("section",{ref:i,"data-ui-component-id":"FeatureShowcase",className:(0,u.cn)("flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col",p),children:[(0,e.jsx)("div",{className:"flex gap-[16px]",children:d?.map((o,r)=>(0,e.jsx)("div",{children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)(a.Picture,{source:`${o.imageMob.url}`,className:"w-[296px] rounded-[12px] laptop:hidden"}),(0,e.jsx)(a.Picture,{source:`${o.image.url} 1024`,className:"l:hidden"}),(0,e.jsxs)("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:[(0,e.jsx)(a.Heading,{as:"h2",size:3,html:o?.title,className:"mt-[16px] md:text-[20px]"}),(0,e.jsx)(a.Text,{as:"p",html:o.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]"})]})]})},r))}),(0,e.jsx)("div",{className:"flex gap-[16px]",children:l?.map((o,r)=>(0,e.jsx)("div",{children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)(a.Picture,{source:`${o.imageMob.url}`,className:"w-[296px] rounded-[12px] laptop:hidden"}),(0,e.jsx)(a.Picture,{source:`${o.image.url} 1024`,className:"l:hidden"}),(0,e.jsxs)("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:[(0,e.jsx)(a.Heading,{as:"h2",size:3,html:o?.title,className:"mt-[16px] md:text-[20px]"}),(0,e.jsx)(a.Text,{as:"p",html:o.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]"})]})]})},r))})]})});n.displayName="FeatureShowcase";var H=(0,f.withLayout)(n);
 //# sourceMappingURL=FeatureShowcase.js.map

package/dist/cjs/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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCgB,IAAAI,EAAA,6BArChBC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkB,EAAAC,QAAM,WAC5B,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC5B,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAT,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,KAED,uBAAoBK,EAAK,IAAMG,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,kBACrB,aAAW,MACT,oGACAJ,CACF,EAEA,oBAAC,OAAI,UAAU,kBACZ,SAAAE,GAAU,IAAI,CAACG,EAA2BC,OACzC,OAAC,OACC,oBAAC,OAAI,UAAU,WACb,oBAAC,WACC,OAAQ,GAAGD,EAAK,QAAQ,GACxB,UAAU,yCACZ,KACA,OAAC,WAAQ,OAAQ,GAAGA,EAAK,KAAK,QAAS,UAAU,WAAW,KAC5D,QAAC,OAAI,UAAU,2KACb,oBAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMA,GAAM,MACZ,UAAU,2BACZ,KAEA,OAAC,QACC,GAAI,IACJ,KAAMA,EAAK,KACX,KAAM,EACN,UAAU,4IACZ,GACF,GACF,GAtBQC,CAuBV,CACD,EACH,KACA,OAAC,OAAI,UAAU,kBACZ,SAAAH,GAAW,IAAI,CAACE,EAA2BC,OAC1C,OAAC,OACC,oBAAC,OAAI,UAAU,WACb,oBAAC,WACC,OAAQ,GAAGD,EAAK,QAAQ,GACxB,UAAU,yCACZ,KACA,OAAC,WAAQ,OAAQ,GAAGA,EAAK,KAAK,QAAS,UAAU,WAAW,KAC5D,QAAC,OAAI,UAAU,2KACb,oBAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMA,GAAM,MACZ,UAAU,2BACZ,KAEA,OAAC,QACC,GAAI,IACJ,KAAMA,EAAK,KACX,KAAM,EACN,UAAU,4IACZ,GACF,GACF,GAtBQC,CAuBV,CACD,EACH,GACF,CAEJ,CACF,EAEAT,EAAgB,YAAc,kBAE9B,IAAOV,KAAQ,cAAWU,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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCc,IAAAI,EAAA,6BApCdC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkB,EAAAC,QAAM,WAAiD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC3G,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAT,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,KAED,uBAAoBK,EAAK,IAAMG,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,kBACrB,aAAW,MACT,oGACAJ,CACF,EAEA,oBAAC,OAAI,UAAU,kBACZ,SAAAE,GAAU,IAAI,CAACG,EAA2BC,OACzC,OAAC,OACC,oBAAC,OAAI,UAAU,WACb,oBAAC,WAAQ,OAAQ,GAAGD,EAAK,SAAS,GAAG,GAAI,UAAU,yCAAyC,KAC5F,OAAC,WAAQ,OAAQ,GAAGA,EAAK,MAAM,GAAG,QAAS,UAAU,WAAW,KAChE,QAAC,OAAI,UAAU,2KACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAMA,GAAM,MAAO,UAAU,2BAA2B,KAEpF,OAAC,QACC,GAAI,IACJ,KAAMA,EAAK,KACX,KAAM,EACN,UAAU,4IACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,KACA,OAAC,OAAI,UAAU,kBACZ,SAAAH,GAAW,IAAI,CAACE,EAA2BC,OAC1C,OAAC,OACC,oBAAC,OAAI,UAAU,WACb,oBAAC,WAAQ,OAAQ,GAAGD,EAAK,SAAS,GAAG,GAAI,UAAU,yCAAyC,KAC5F,OAAC,WAAQ,OAAQ,GAAGA,EAAK,MAAM,GAAG,QAAS,UAAU,WAAW,KAChE,QAAC,OAAI,UAAU,2KACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAMA,GAAM,MAAO,UAAU,2BAA2B,KAEpF,OAAC,QACC,GAAI,IACJ,KAAMA,EAAK,KACX,KAAM,EACN,UAAU,4IACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,GACF,CAEJ,CAAC,EAEDT,EAAgB,YAAc,kBAE9B,IAAOV,KAAQ,cAAWU,CAAe",
   "names": ["FeatureShowcase_exports", "__export", "FeatureShowcase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "FeatureShowcase", "React", "data", "className", "ref", "datalist", "datalists", "boxRef", "item", "index"]
 }

package/dist/cjs/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/cjs/biz-components/FeatureShowcase/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var n=(t,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of o(e))!g.call(t,a)&&a!==i&&r(t,a,{get:()=>e[a],enumerable:!(s=c(e,a))||s.enumerable});return t};var m=t=>n(r({},"__esModule",{value:!0}),t);var d={};module.exports=m(d);
+"use strict";var r=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(t,e,i,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of c(e))!m.call(t,a)&&a!==i&&r(t,a,{get:()=>e[a],enumerable:!(s=o(e,a))||s.enumerable});return t};var d=t=>p(r({},"__esModule",{value:!0}),t);var g={};module.exports=d(g);
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/FeatureShowcase/types.ts"],
-  "sourcesContent": ["export interface FeatureShowcaseItem {\n  /** \u6807\u9898 */\n  title: string\n  /** \u63CF\u8FF0\u6587\u672C */\n  desc: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image: string\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  imageMob: string\n}\n\nexport interface FeatureShowcaseProps {\n  data: {\n    /** \u7B2C\u4E00\u7EC4\u6570\u636E\u5217\u8868 */\n    datalist: FeatureShowcaseItem[]\n    /** \u7B2C\u4E8C\u7EC4\u6570\u636E\u5217\u8868 */\n    datalists: FeatureShowcaseItem[]\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media } from '../../types/props'\n\nexport interface FeatureShowcaseItem {\n  /** \u6807\u9898 */\n  title: string\n  /** \u63CF\u8FF0\u6587\u672C */\n  desc: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  imageMob: Media\n}\n\nexport interface FeatureShowcaseProps {\n  data: {\n    /** \u7B2C\u4E00\u7EC4\u6570\u636E\u5217\u8868 */\n    datalist: FeatureShowcaseItem[]\n    /** \u7B2C\u4E8C\u7EC4\u6570\u636E\u5217\u8868 */\n    datalists: FeatureShowcaseItem[]\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var H=Object.create;var i=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var L=(t,e)=>{for(var p in e)i(t,p,{get:e[p],enumerable:!0})},y=(t,e,p,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of z(e))!E.call(t,l)&&l!==p&&i(t,l,{get:()=>e[l],enumerable:!(s=j(e,l))||s.enumerable});return t};var P=(t,e,p)=>(p=t!=null?H(D(t)):{},y(e||!t||!t.__esModule?i(p,"default",{value:t,enumerable:!0}):p,t)),R=t=>y(i({},"__esModule",{value:!0}),t);var A={};L(A,{default:()=>_});module.exports=R(A);var a=require("react/jsx-runtime"),x=P(require("react")),o=require("../../components/index.js"),n=require("../../helpers/utils.js"),k=require("../../shared/Styles.js"),N=require("../../hooks/useExposure.js");const M="image",$="image_text_feature",I=x.default.forwardRef(({data:t,className:e},p)=>{const{title:s,subtitle:l,imageUrl:c,mobImageUrl:g,padImageUrl:u,items:T=[],imagePosition:m="left",theme:v="light"}=t,d=(0,x.useRef)(null);(0,N.useExposure)(d,{componentType:M,componentName:$,componentTitle:s,componentDescription:l}),(0,x.useImperativeHandle)(p,()=>d.current);const f=r=>typeof r=="string"?r:r?.url||"",b=f(c),h=u?f(u):b,w=g?f(g):h,F=typeof c=="object"&&c?.alt||s;return(0,a.jsxs)("section",{ref:d,"data-ui-component-id":"ImageTextFeature",className:(0,n.cn)(v==="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]",e),children:[(0,a.jsx)(o.Picture,{source:`${b}, ${h} 1024, ${w} 768`,alt:F,className:(0,n.cn)("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%]":m==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":m==="right"})}),(0,a.jsxs)("div",{className:(0,n.cn)("flex w-full flex-col items-start justify-center laptop:w-fit",{"order-1 laptop:order-2":m==="left","order-1":m==="right"}),children:[(0,a.jsx)(o.Heading,{size:4,html:s,as:"h3",className:"w-full text-left"}),l&&(0,a.jsx)(o.Text,{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]"}),(0,a.jsx)("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:T.map((r,U)=>(0,a.jsxs)("div",{className:"mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[(0,a.jsxs)("div",{className:"flex flex-row items-center gap-[8px]",children:[(0,a.jsx)("img",{src:r.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]"}),(0,a.jsx)(o.Heading,{size:5,as:"h6",className:"bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:r.text})]}),(0,a.jsx)(o.Text,{size:4,as:"p",html:r.desc,className:"-mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},U))})]})]})});I.displayName="ImageTextFeature";var _=(0,k.withLayout)(I);
+"use strict";"use client";var v=Object.create;var i=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var j=(t,e)=>{for(var p in e)i(t,p,{get:e[p],enumerable:!0})},f=(t,e,p,x)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of w(e))!H.call(t,l)&&l!==p&&i(t,l,{get:()=>e[l],enumerable:!(x=y(e,l))||x.enumerable});return t};var z=(t,e,p)=>(p=t!=null?v(F(t)):{},f(e||!t||!t.__esModule?i(p,"default",{value:t,enumerable:!0}):p,t)),D=t=>f(i({},"__esModule",{value:!0}),t);var R={};j(R,{default:()=>P});module.exports=D(R);var a=require("react/jsx-runtime"),s=z(require("react")),o=require("../../components/index.js"),n=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),b=require("../../hooks/useExposure.js");const E="image",L="image_text_feature",u=s.default.forwardRef(({data:t,className:e},p)=>{const{title:x,subtitle:l,pcImage:m,mobileImage:h,padImage:k,items:I=[],imagePosition:r="left",theme:N="light"}=t,c=(0,s.useRef)(null);return(0,b.useExposure)(c,{componentType:E,componentName:L,componentTitle:x,componentDescription:l}),(0,s.useImperativeHandle)(p,()=>c.current),(0,a.jsxs)("section",{ref:c,"data-ui-component-id":"ImageTextFeature",className:(0,n.cn)(N==="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]",e),children:[(0,a.jsx)(o.Picture,{source:`${m.url}, ${k?.url||m.url} 1024, ${h.url||m.url} 768`,alt:m.alt,className:(0,n.cn)("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%]":r==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":r==="right"})}),(0,a.jsxs)("div",{className:(0,n.cn)("flex w-full flex-col items-start justify-center laptop:w-fit",{"order-1 laptop:order-2":r==="left","order-1":r==="right"}),children:[(0,a.jsx)(o.Heading,{size:4,html:x,as:"h3",className:"w-full text-left"}),l&&(0,a.jsx)(o.Text,{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]"}),(0,a.jsx)("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((d,T)=>(0,a.jsxs)("div",{className:"mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[(0,a.jsxs)("div",{className:"flex flex-row items-center gap-[8px]",children:[(0,a.jsx)("img",{src:d.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]"}),(0,a.jsx)(o.Heading,{size:5,as:"h6",className:"bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:d.text})]}),(0,a.jsx)(o.Text,{size:4,as:"p",html:d.desc,className:"-mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},T))})]})]})});u.displayName="ImageTextFeature";var P=(0,g.withLayout)(u);
 //# sourceMappingURL=ImageTextFeature.js.map

package/dist/cjs/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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyDM,IAAAI,EAAA,6BAxDNC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmB,EAAAC,QAAM,WAAkD,CAAC,CAAE,KAAAC,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,KAAS,UAAuB,IAAI,KAE1C,eAAYA,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,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,SACE,QAAC,WACC,IAAKQ,EACL,uBAAqB,mBACrB,aAAW,MACTD,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,oBAAC,WACC,OAAQ,GAAGa,CAAU,KAAKC,CAAM,UAAUC,CAAM,OAChD,IAAKC,EACL,aAAW,MACT,+FACA,CACE,gEAAiER,IAAkB,OACnF,iDAAkDA,IAAkB,OACtE,CACF,EACF,KAGA,QAAC,OACC,aAAW,MAAG,+DAAgE,CAC5E,yBAA0BA,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,oBAAC,WAAQ,KAAM,EAAG,KAAMN,EAAO,GAAG,KAAK,UAAU,mBAAmB,EAGnEC,MACC,OAAC,QACC,KAAM,EACN,KAAMA,EACN,GAAG,IACH,UAAU,+GACZ,KAIF,OAAC,OAAI,UAAU,mKACZ,SAAAI,EAAM,IAAI,CAACU,EAA4BC,OACtC,QAAC,OAAgB,UAAU,+CACzB,qBAAC,OAAI,UAAU,uCACb,oBAAC,OACC,IAAKD,EAAK,KACV,IAAI,OACJ,UAAU,8JACZ,KACA,OAAC,WACC,KAAM,EACN,GAAG,KACH,UAAU,6EAET,SAAAA,EAAK,KACR,GACF,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,KAAMA,EAAK,KACX,UAAU,yGACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDrB,EAAiB,YAAc,mBAE/B,IAAOV,KAAQ,cAAWU,CAAgB",
-  "names": ["ImageTextFeature_exports", "__export", "ImageTextFeature_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ImageTextFeature", "React", "data", "className", "ref", "title", "subtitle", "imageUrl", "mobImageUrl", "padImageUrl", "items", "imagePosition", "theme", "boxRef", "getImageUrl", "img", "pcImageUrl", "padUrl", "mobUrl", "imageAlt", "item", "index"]
+  "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoCM,IAAAI,EAAA,6BAnCNC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmB,EAAAC,QAAM,WAAkD,CAAC,CAAE,KAAAC,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,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMS,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,mBACrB,aAAW,MACTD,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,oBAAC,WACC,OAAQ,GAAGI,EAAQ,GAAG,KAAKE,GAAU,KAAOF,EAAQ,GAAG,UAAUC,EAAY,KAAOD,EAAQ,GAAG,OAC/F,IAAKA,EAAQ,IACb,aAAW,MAAG,+FAAgG,CAC5G,gEAAiEI,IAAkB,OACnF,iDAAkDA,IAAkB,OACtE,CAAC,EACH,KAGA,QAAC,OACC,aAAW,MAAG,+DAAgE,CAC5E,yBAA0BA,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,oBAAC,WAAQ,KAAM,EAAG,KAAMN,EAAO,GAAG,KAAK,UAAU,mBAAmB,EAGnEC,MACC,OAAC,QACC,KAAM,EACN,KAAMA,EACN,GAAG,IACH,UAAU,+GACZ,KAIF,OAAC,OAAI,UAAU,mKACZ,SAAAI,EAAM,IAAI,CAACI,EAA4BC,OACtC,QAAC,OAAgB,UAAU,+CACzB,qBAAC,OAAI,UAAU,uCACb,oBAAC,OACC,IAAKD,EAAK,KACV,IAAI,OACJ,UAAU,8JACZ,KACA,OAAC,WACC,KAAM,EACN,GAAG,KACH,UAAU,6EAET,SAAAA,EAAK,KACR,GACF,KACA,OAAC,QACC,KAAM,EACN,GAAG,IACH,KAAMA,EAAK,KACX,UAAU,yGACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDf,EAAiB,YAAc,mBAE/B,IAAOV,KAAQ,cAAWU,CAAgB",
+  "names": ["ImageTextFeature_exports", "__export", "ImageTextFeature_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ImageTextFeature", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "padImage", "items", "imagePosition", "theme", "boxRef", "item", "index"]
 }

package/dist/cjs/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/cjs/biz-components/ImageTextFeature/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var I=(t,e,m,g)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!n.call(t,r)&&r!==m&&i(t,r,{get:()=>e[r],enumerable:!(g=s(e,r))||g.enumerable});return t};var o=t=>I(i({},"__esModule",{value:!0}),t);var p={};module.exports=o(p);
+"use strict";var r=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var o=(t,e,m,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of g(e))!n.call(t,i)&&i!==m&&r(t,i,{get:()=>e[i],enumerable:!(a=s(e,i))||a.enumerable});return t};var p=t=>o(r({},"__esModule",{value:!0}),t);var I={};module.exports=p(I);
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageTextFeature/types.ts"],
-  "sourcesContent": ["import type { Img, Theme } from '../../types/props.js'\n\nexport interface ImageTextFeatureItem {\n  /** \u529F\u80FD\u56FE\u6807 */\n  icon: string\n  /** \u529F\u80FD\u6807\u9898 */\n  text: string\n  /** \u529F\u80FD\u63CF\u8FF0 */\n  desc: string\n}\n\nexport interface ImageTextFeatureProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** PC\u7AEF\u56FE\u7247 */\n    imageUrl: string | Img\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n    mobImageUrl?: string | Img\n    /** \u5E73\u677F\u7AEF\u56FE\u7247 */\n    padImageUrl?: string | Img\n    /** \u529F\u80FD\u9879\u5217\u8868 */\n    items: ImageTextFeatureItem[]\n    /** \u56FE\u7247\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left */\n    imagePosition?: 'left' | 'right'\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n    theme?: Theme\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageTextFeatureItem {\n  /** \u529F\u80FD\u56FE\u6807 */\n  icon: string\n  /** \u529F\u80FD\u6807\u9898 */\n  text: string\n  /** \u529F\u80FD\u63CF\u8FF0 */\n  desc: string\n}\n\nexport interface ImageTextFeatureProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** PC\u7AEF\u56FE\u7247 */\n    pcImage: Media\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n    mobileImage: Media\n    /** \u5E73\u677F\u7AEF\u56FE\u7247 */\n    padImage?: Media\n    /** \u529F\u80FD\u9879\u5217\u8868 */\n    items: ImageTextFeatureItem[]\n    /** \u56FE\u7247\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4 left */\n    imagePosition?: 'left' | 'right'\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n    theme?: Theme\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

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

package/dist/cjs/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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgDQ,IAAAI,EAAA,6BA/CRC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,kBAEhBC,EAAgB,EAAAC,QAAM,WAA+C,CAAC,CAAE,KAAAC,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,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMS,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,gBACrB,aAAW,MACT,mFACA,CACE,aAAcD,IAAU,OACxB,iBAAkBA,IAAU,OAC9B,EACAT,CACF,EAEA,qBAAC,OAAI,UAAU,+BACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,EACxCC,MACC,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,yHACZ,KAEF,QAAC,OAAI,UAAU,0BACZ,UAAAE,MACC,OAAC,OACC,IAAKA,EACL,IAAI,OACJ,UAAU,sDACZ,EAEDD,MACC,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMA,EACN,UAAU,4GACZ,GAEJ,GACF,KACA,OAAC,OAAI,UAAU,GACb,mBAAC,WACC,OAAQ,GAAGE,CAAQ,IAAIC,CAAW,UAAUC,CAAW,OACvD,UAAU,uCACZ,EACF,GACF,CAEJ,CAAC,EAEDX,EAAc,YAAc,gBAE5B,IAAOV,KAAQ,cAAWU,CAAa",
-  "names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "imageUrl", "padImageUrl", "mobImageUrl", "theme", "boxRef"]
+  "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuCQ,IAAAI,EAAA,6BAtCRC,EAAmD,oBACnDC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,kBAEhBC,EAAgB,EAAAC,QAAM,WAA+C,CAAC,CAAE,KAAAC,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,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMS,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,gBACrB,aAAW,MACT,mFACA,CACE,aAAcD,IAAU,OACxB,iBAAkBA,IAAU,OAC9B,EACAT,CACF,EAEA,qBAAC,OAAI,UAAU,+BACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,EACxCC,MACC,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,yHACZ,KAEF,QAAC,OAAI,UAAU,0BACZ,UAAAE,MACC,OAAC,OAAI,IAAKA,EAAU,IAAI,OAAO,UAAU,sDAAsD,EAEhGD,MACC,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMA,EACN,UAAU,4GACZ,GAEJ,GACF,KACA,OAAC,OAAI,UAAU,GACb,mBAAC,WACC,OAAQ,GAAGE,EAAM,GAAG,IAAIC,GAAU,KAAOD,EAAM,GAAG,UAAUE,GAAa,KAAOF,EAAM,GAAG,OACzF,UAAU,uCACZ,EACF,GACF,CAEJ,CAAC,EAEDT,EAAc,YAAc,gBAE5B,IAAOV,KAAQ,cAAWU,CAAa",
+  "names": ["ImageWithText_exports", "__export", "ImageWithText_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ImageWithText", "React", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "boxRef"]
 }

package/dist/cjs/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/cjs/biz-components/ImageWithText/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var p=(t,e,g,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!n.call(t,r)&&r!==g&&i(t,r,{get:()=>e[r],enumerable:!(s=m(e,r))||s.enumerable});return t};var o=t=>p(i({},"__esModule",{value:!0}),t);var l={};module.exports=o(l);
+"use strict";var s=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(t,e,m,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of g(e))!d.call(t,i)&&i!==m&&s(t,i,{get:()=>e[i],enumerable:!(a=r(e,i))||a.enumerable});return t};var n=t=>p(s({},"__esModule",{value:!0}),t);var o={};module.exports=n(o);
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/types.ts"],
-  "sourcesContent": ["import type { Theme } from '../../types/props.js'\n\nexport interface ImageWithTextProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n    subtitle?: string\n    /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF09 */\n    desc?: string\n    /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807 */\n    descIcon?: string\n    /** PC\u7AEF\u56FE\u7247 URL */\n    imageUrl: string\n    /** \u5E73\u677F\u7AEF\u56FE\u7247 URL */\n    padImageUrl?: string\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n    mobImageUrl?: string\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n    theme?: Theme\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media, Theme } from '../../types/props.js'\n\nexport interface ImageWithTextProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898/\u63CF\u8FF0 */\n    subtitle?: string\n    /** \u63CF\u8FF0\u6587\u672C\uFF08\u901A\u5E38\u662F\u5927\u53F7\u9AD8\u4EAE\u6587\u672C\uFF09 */\n    desc?: string\n    /** \u63CF\u8FF0\u6587\u672C\u56FE\u6807 */\n    descIcon?: string\n    /** PC\u7AEF\u56FE\u7247 URL */\n    image: Media\n    /** \u5E73\u677F\u7AEF\u56FE\u7247 URL */\n    padImage?: Media\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n    mobileImage?: Media\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 dark */\n    theme?: Theme\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var P=Object.create;var i=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var s in e)i(t,s,{get:e[s],enumerable:!0})},c=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of N(e))!k.call(t,p)&&p!==s&&i(t,p,{get:()=>e[p],enumerable:!(r=v(e,p))||r.enumerable});return t};var T=(t,e,s)=>(s=t!=null?P(g(t)):{},c(e||!t||!t.__esModule?i(s,"default",{value:t,enumerable:!0}):s,t)),y=t=>c(i({},"__esModule",{value:!0}),t);var R={};w(R,{default:()=>E});module.exports=y(R);var o=require("react/jsx-runtime"),l=T(require("react")),a=require("../../components/index.js"),d=require("../../helpers/utils.js"),u=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const L="image",D="product_hero",n=l.default.forwardRef(({data:t,className:e},s)=>{const{title:r,subtitle:p,ctaText:x,poster:b,mobPoster:h,ctaLink:H}=t,m=(0,l.useRef)(null);return(0,f.useExposure)(m,{componentType:L,componentName:D,componentTitle:r,componentDescription:p}),(0,l.useImperativeHandle)(s,()=>m.current),(0,o.jsxs)("section",{ref:m,"data-ui-component-id":"ProductHero",className:(0,d.cn)("flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",e),children:[(0,o.jsxs)("div",{className:"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[(0,o.jsxs)("div",{children:[(0,o.jsx)(a.Heading,{as:"h3",size:4,html:r}),(0,o.jsx)(a.Heading,{as:"h4",size:2,html:p,className:"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),(0,o.jsx)(a.Text,{as:"p",size:2,html:p,className:"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),(0,o.jsx)("a",{href:H,children:(0,o.jsx)(a.Button,{className:"w-fit",children:x})})]}),(0,o.jsx)(a.Picture,{className:"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${b}, ${h} 768`})]})});n.displayName="ProductHero";var E=(0,u.withLayout)(n);
+"use strict";"use client";var P=Object.create;var i=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var s in e)i(t,s,{get:e[s],enumerable:!0})},c=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of N(e))!k.call(t,p)&&p!==s&&i(t,p,{get:()=>e[p],enumerable:!(r=v(e,p))||r.enumerable});return t};var T=(t,e,s)=>(s=t!=null?P(g(t)):{},c(e||!t||!t.__esModule?i(s,"default",{value:t,enumerable:!0}):s,t)),y=t=>c(i({},"__esModule",{value:!0}),t);var R={};w(R,{default:()=>E});module.exports=y(R);var o=require("react/jsx-runtime"),l=T(require("react")),a=require("../../components/index.js"),u=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const L="image",D="product_hero",n=l.default.forwardRef(({data:t,className:e},s)=>{const{title:r,subtitle:p,ctaText:x,poster:b,mobPoster:h,ctaLink:H}=t,m=(0,l.useRef)(null);return(0,f.useExposure)(m,{componentType:L,componentName:D,componentTitle:r,componentDescription:p}),(0,l.useImperativeHandle)(s,()=>m.current),(0,o.jsxs)("section",{ref:m,"data-ui-component-id":"ProductHero",className:(0,u.cn)("flex w-full flex-col items-center justify-between gap-[32px] tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px]",e),children:[(0,o.jsxs)("div",{className:"flex w-full flex-col items-start gap-[24px] tablet:basis-[42%] laptop:basis-[36%]",children:[(0,o.jsxs)("div",{children:[(0,o.jsx)(a.Heading,{as:"h3",size:4,html:r}),(0,o.jsx)(a.Heading,{as:"h4",size:2,html:p,className:"mt-[4px] hidden laptop:mt-[12px] laptop:block desktop:mt-[16px]"}),(0,o.jsx)(a.Text,{as:"p",size:2,html:p,className:"mt-[4px] block laptop:mt-[12px] laptop:hidden desktop:mt-[16px]"})]}),(0,o.jsx)("a",{href:H,children:(0,o.jsx)(a.Button,{className:"w-fit",children:x})})]}),(0,o.jsx)(a.Picture,{className:"aspect-[358/360] flex-shrink tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%]",source:`${b.url}, ${h.url} 768`})]})});n.displayName="ProductHero";var E=(0,d.withLayout)(n);
 //# sourceMappingURL=ProductHero.js.map

package/dist/cjs/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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCQ,IAAAI,EAAA,6BAlCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,uHACAR,CACF,EAEA,qBAAC,OAAI,UAAU,oFACb,qBAAC,OACC,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,KACzC,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,kEACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,kEACZ,GACF,KACA,OAAC,KAAE,KAAMI,EACP,mBAAC,UAAO,UAAU,QAAS,SAAAH,EAAQ,EACrC,GACF,KACA,OAAC,WACC,UAAU,6FACV,OAAQ,GAAGC,CAAM,KAAKC,CAAS,OACjC,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmCQ,IAAAI,EAAA,6BAlCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAQ,EAAIR,EAE3DS,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMO,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,uHACAR,CACF,EAEA,qBAAC,OAAI,UAAU,oFACb,qBAAC,OACC,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,KACzC,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,kEACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,kEACZ,GACF,KACA,OAAC,KAAE,KAAMI,EACP,mBAAC,UAAO,UAAU,QAAS,SAAAH,EAAQ,EACrC,GACF,KACA,OAAC,WACC,UAAU,6FACV,OAAQ,GAAGC,EAAO,GAAG,KAAKC,EAAU,GAAG,OACzC,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,CAAW",
   "names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "boxRef"]
 }

package/dist/cjs/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/cjs/biz-components/ProductHero/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(r,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of o(t))!a.call(r,s)&&s!==n&&e(r,s,{get:()=>t[s],enumerable:!(i=g(t,s))||i.enumerable});return r};var l=r=>c(e({},"__esModule",{value:!0}),r);var d={};module.exports=l(d);
+"use strict";var s=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var c=(r,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of n(t))!p.call(r,e)&&e!==o&&s(r,e,{get:()=>t[e],enumerable:!(i=a(t,e))||i.enumerable});return r};var d=r=>c(s({},"__esModule",{value:!0}),r);var g={};module.exports=d(g);
 //# sourceMappingURL=types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductHero/types.ts"],
-  "sourcesContent": ["export interface ProductHeroProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898 */\n    subtitle: string\n    /** CTA \u6309\u94AE\u6587\u672C */\n    ctaText: string\n    /** CTA \u6309\u94AE\u94FE\u63A5 */\n    ctaLink: string\n    /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n    poster: string\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n    mobPoster: string\n    /** 3D \u6A21\u578B\u6E90\uFF08\u53EF\u9009\uFF0C\u6682\u672A\u4F7F\u7528\uFF09 */\n    modelSrc?: string\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media } from '../../types/props'\n\nexport interface ProductHeroProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u526F\u6807\u9898 */\n    subtitle: string\n    /** CTA \u6309\u94AE\u6587\u672C */\n    ctaText: string\n    /** CTA \u6309\u94AE\u94FE\u63A5 */\n    ctaLink: string\n    /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n    poster: Media\n    /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n    mobPoster: Media\n    /** 3D \u6A21\u578B\u6E90\uFF08\u53EF\u9009\uFF0C\u6682\u672A\u4F7F\u7528\uFF09 */\n    modelSrc?: string\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var E=Object.create;var d=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var P=(e,a)=>{for(var o in a)d(e,o,{get:a[o],enumerable:!0})},w=(e,a,o,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of L(a))!W.call(e,n)&&n!==o&&d(e,n,{get:()=>a[n],enumerable:!(c=H(a,n))||c.enumerable});return e};var R=(e,a,o)=>(o=e!=null?E(M(e)):{},w(a||!e||!e.__esModule?d(o,"default",{value:e,enumerable:!0}):o,e)),z=e=>w(d({},"__esModule",{value:!0}),e);var j={};P(j,{default:()=>$});module.exports=z(j);var t=require("react/jsx-runtime"),i=R(require("react")),m=require("../../components/index.js"),b=require("../../helpers/utils.js"),T=require("../../shared/Styles.js"),I=require("../../hooks/useExposure.js"),f=require("framer-motion");const A="image",S="tab_with_image",y=i.default.forwardRef(({data:e,className:a},o)=>{const{title:c,subtitle:n,desc:v,imageUrl:C,mobImageUrl:U,datalist:p=[]}=e,u=(0,i.useRef)(null);(0,I.useExposure)(u,{componentType:A,componentName:S,componentTitle:c,componentDescription:v}),(0,i.useImperativeHandle)(o,()=>u.current);const N=(r,l)=>{k(r),l.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[s,k]=(0,i.useState)(0),h=(0,i.useRef)([]),[g,D]=(0,i.useState)({left:0,width:0});return(0,i.useEffect)(()=>{const r=h.current[s];if(r){const{offsetLeft:l,offsetWidth:x}=r;D({left:l,width:x})}},[s,p.length]),(0,t.jsxs)("section",{ref:u,"data-ui-component-id":"TabWithImage",className:(0,b.cn)("flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",a),children:[(0,t.jsxs)("div",{className:"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(m.Heading,{as:"h3",size:4,html:c}),(0,t.jsx)(m.Text,{as:"p",size:1,html:v,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,t.jsx)("div",{className:"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,t.jsxs)("div",{className:"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,t.jsx)("div",{className:"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:g.left,width:g.width}}),p.map((r,l)=>(0,t.jsx)("div",{ref:x=>{h.current[l]=x},onClick:x=>N(l,x),className:(0,b.cn)("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]",s===l?"text-black":"text-white"),children:(0,t.jsx)(m.Heading,{as:"h1",size:1,html:r?.title,className:"text-balance-normal !whitespace-nowrap md:text-[14px]"})},l))]})})]}),(0,t.jsx)("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:(0,t.jsx)(f.AnimatePresence,{mode:"wait",children:(0,t.jsx)(f.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"absolute left-0 top-0 w-full",children:(0,t.jsx)(m.Picture,{source:`${p[s].image} ,${p[s].imgPad} 1440, ${p[s].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] "})},p[s].image)})})]})});y.displayName="TabWithImage";var $=(0,T.withLayout)(y);
+"use strict";"use client";var E=Object.create;var d=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var P=(e,a)=>{for(var l in a)d(e,l,{get:a[l],enumerable:!0})},w=(e,a,l,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of L(a))!W.call(e,p)&&p!==l&&d(e,p,{get:()=>a[p],enumerable:!(c=H(a,p))||c.enumerable});return e};var R=(e,a,l)=>(l=e!=null?E(M(e)):{},w(a||!e||!e.__esModule?d(l,"default",{value:e,enumerable:!0}):l,e)),z=e=>w(d({},"__esModule",{value:!0}),e);var j={};P(j,{default:()=>$});module.exports=z(j);var t=require("react/jsx-runtime"),i=R(require("react")),n=require("../../components/index.js"),b=require("../../helpers/utils.js"),T=require("../../shared/Styles.js"),I=require("../../hooks/useExposure.js"),f=require("framer-motion");const A="image",S="tab_with_image",y=i.default.forwardRef(({data:e,className:a},l)=>{const{title:c,subtitle:p,desc:v,image:C,mobileImage:_,datalist:s=[]}=e,u=(0,i.useRef)(null);(0,I.useExposure)(u,{componentType:A,componentName:S,componentTitle:c,componentDescription:v}),(0,i.useImperativeHandle)(l,()=>u.current);const N=(r,m)=>{k(r),m.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[o,k]=(0,i.useState)(0),h=(0,i.useRef)([]),[g,D]=(0,i.useState)({left:0,width:0});return(0,i.useEffect)(()=>{const r=h.current[o];if(r){const{offsetLeft:m,offsetWidth:x}=r;D({left:m,width:x})}},[o,s.length]),(0,t.jsxs)("section",{ref:u,"data-ui-component-id":"TabWithImage",className:(0,b.cn)("flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",a),children:[(0,t.jsxs)("div",{className:"inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(n.Heading,{as:"h3",size:4,html:c}),(0,t.jsx)(n.Text,{as:"p",size:1,html:v,className:"mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,t.jsx)("div",{className:"relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,t.jsxs)("div",{className:"relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,t.jsx)("div",{className:"absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:g.left,width:g.width}}),s.map((r,m)=>(0,t.jsx)("div",{ref:x=>{h.current[m]=x},onClick:x=>N(m,x),className:(0,b.cn)("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]",o===m?"text-black":"text-white"),children:(0,t.jsx)(n.Heading,{as:"h1",size:1,html:r?.title,className:"text-balance-normal !whitespace-nowrap md:text-[14px]"})},m))]})})]}),(0,t.jsx)("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:(0,t.jsx)(f.AnimatePresence,{mode:"wait",children:(0,t.jsx)(f.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"absolute left-0 top-0 w-full",children:(0,t.jsx)(n.Picture,{source:`${s[o].image.url} ,${s[o].imgPad?.url||s[o].image.url} 1440, ${s[o].imageMob?.url||s[o].image.url} 767`,alt:s[o].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] "})},s[o].image.url)})})]})});y.displayName="TabWithImage";var $=(0,T.withLayout)(y);
 //# sourceMappingURL=TabWithImage.js.map

package/dist/cjs/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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyDQ,IAAAI,EAAA,6BAxDRC,EAAwE,oBACxEC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAE5BC,EAAwC,yBAExC,MAAMC,EAAgB,QAChBC,EAAgB,iBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,EAAW,CAAC,CAAE,EAAIR,EAElES,KAAS,UAAuB,IAAI,KAE1C,eAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBE,CACxB,CAAC,KAED,uBAAoBH,EAAK,IAAMO,EAAO,OAAyB,EAE/D,MAAMC,EAAc,CAACC,EAAeC,IAAwC,CAC1EC,EAAeF,CAAK,EAClBC,EAAE,OAAuB,eAAe,CACxC,SAAU,SACV,OAAQ,SACR,MAAO,SACT,CAAC,CACH,EAEM,CAACE,EAAaD,CAAc,KAAI,YAAS,CAAC,EAC1CE,KAAU,UAAqC,CAAC,CAAC,EACjD,CAACC,EAAaC,CAAc,KAAI,YAAS,CAAE,KAAM,EAAG,MAAO,CAAE,CAAC,EAEpE,sBAAU,IAAM,CACd,MAAMC,EAAUH,EAAQ,QAAQD,CAAW,EAC3C,GAAII,EAAS,CACX,KAAM,CAAE,WAAAC,EAAY,YAAAC,CAAY,EAAIF,EACpCD,EAAe,CAAE,KAAME,EAAY,MAAOC,CAAY,CAAC,CACzD,CACF,EAAG,CAACN,EAAaN,EAAS,MAAM,CAAC,KAG/B,QAAC,WACC,IAAKC,EACL,uBAAqB,eACrB,aAAW,MACT,oFACAR,CACF,EAEA,qBAAC,OAAI,UAAU,2EACb,qBAAC,OACC,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,KACzC,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAME,EACN,UAAU,wGACZ,GACF,KAEA,OAAC,OAAI,UAAU,uEACb,oBAAC,OAAI,UAAU,yEAEb,oBAAC,OACC,UAAU,0FACV,MAAO,CACL,KAAMW,EAAY,KAClB,MAAOA,EAAY,KACrB,EACF,EAGCR,EAAS,IAAI,CAACa,EAA4BV,OACzC,OAAC,OAEC,IAAMW,GAAO,CACXP,EAAQ,QAAQJ,CAAK,EAAIW,CAC3B,EACA,QAAUV,GAAMF,EAAYC,EAAOC,CAAC,EACpC,aAAW,MACT,mMACAE,IAAgBH,EAAQ,aAAe,YACzC,EAEA,mBAAC,WACC,GAAG,KACH,KAAM,EACN,KAAMU,GAAM,MACZ,UAAU,wDACZ,GAfKV,CAgBP,CACD,GACH,EACF,GACF,KACA,OAAC,OAAI,UAAU,8LACb,mBAAC,mBAAgB,KAAK,OACpB,mBAAC,SAAO,IAAP,CAEC,QAAS,CAAE,QAAS,CAAE,EACtB,QAAS,CAAE,QAAS,CAAE,EACtB,KAAM,CAAE,QAAS,CAAE,EACnB,WAAY,CAAE,SAAU,EAAI,EAC5B,UAAU,+BAEV,mBAAC,WACC,OAAQ,GAAGH,EAASM,CAAW,EAAE,KAAK,KAAKN,EAASM,CAAW,EAAE,MAAM,UAAUN,EAASM,CAAW,EAAE,QAAQ,OAC/G,UAAU,8JACZ,GAVKN,EAASM,CAAW,EAAE,KAW7B,EACF,EACF,GACF,CAEJ,CAAC,EAEDhB,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
-  "names": ["TabWithImage_exports", "__export", "TabWithImage_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_framer_motion", "componentType", "componentName", "TabWithImage", "React", "data", "className", "ref", "title", "subtitle", "desc", "imageUrl", "mobImageUrl", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el"]
+  "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": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsDQ,IAAAI,EAAA,6BArDRC,EAAwE,oBACxEC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAE5BC,EAAwC,yBAExC,MAAMC,EAAgB,QAChBC,EAAgB,iBAEhBC,EAAe,EAAAC,QAAM,WAA8C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAW,CAAC,CAAE,EAAIR,EAE/DS,KAAS,UAAuB,IAAI,KAE1C,eAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBE,CACxB,CAAC,KAED,uBAAoBH,EAAK,IAAMO,EAAO,OAAyB,EAE/D,MAAMC,EAAc,CAACC,EAAeC,IAAwC,CAC1EC,EAAeF,CAAK,EAClBC,EAAE,OAAuB,eAAe,CACxC,SAAU,SACV,OAAQ,SACR,MAAO,SACT,CAAC,CACH,EAEM,CAACE,EAAaD,CAAc,KAAI,YAAS,CAAC,EAC1CE,KAAU,UAAqC,CAAC,CAAC,EACjD,CAACC,EAAaC,CAAc,KAAI,YAAS,CAAE,KAAM,EAAG,MAAO,CAAE,CAAC,EAEpE,sBAAU,IAAM,CACd,MAAMC,EAAUH,EAAQ,QAAQD,CAAW,EAC3C,GAAII,EAAS,CACX,KAAM,CAAE,WAAAC,EAAY,YAAAC,CAAY,EAAIF,EACpCD,EAAe,CAAE,KAAME,EAAY,MAAOC,CAAY,CAAC,CACzD,CACF,EAAG,CAACN,EAAaN,EAAS,MAAM,CAAC,KAG/B,QAAC,WACC,IAAKC,EACL,uBAAqB,eACrB,aAAW,MAAG,oFAAqFR,CAAS,EAE5G,qBAAC,OAAI,UAAU,2EACb,qBAAC,OACC,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,KACzC,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAME,EACN,UAAU,wGACZ,GACF,KAEA,OAAC,OAAI,UAAU,uEACb,oBAAC,OAAI,UAAU,yEAEb,oBAAC,OACC,UAAU,0FACV,MAAO,CACL,KAAMW,EAAY,KAClB,MAAOA,EAAY,KACrB,EACF,EAGCR,EAAS,IAAI,CAACa,EAA4BV,OACzC,OAAC,OAEC,IAAKW,GAAM,CACTP,EAAQ,QAAQJ,CAAK,EAAIW,CAC3B,EACA,QAASV,GAAKF,EAAYC,EAAOC,CAAC,EAClC,aAAW,MACT,mMACAE,IAAgBH,EAAQ,aAAe,YACzC,EAEA,mBAAC,WACC,GAAG,KACH,KAAM,EACN,KAAMU,GAAM,MACZ,UAAU,wDACZ,GAfKV,CAgBP,CACD,GACH,EACF,GACF,KACA,OAAC,OAAI,UAAU,8LACb,mBAAC,mBAAgB,KAAK,OACpB,mBAAC,SAAO,IAAP,CAEC,QAAS,CAAE,QAAS,CAAE,EACtB,QAAS,CAAE,QAAS,CAAE,EACtB,KAAM,CAAE,QAAS,CAAE,EACnB,WAAY,CAAE,SAAU,EAAI,EAC5B,UAAU,+BAEV,mBAAC,WACC,OAAQ,GAAGH,EAASM,CAAW,EAAE,MAAM,GAAG,KAAKN,EAASM,CAAW,EAAE,QAAQ,KAAON,EAASM,CAAW,EAAE,MAAM,GAAG,UAAUN,EAASM,CAAW,EAAE,UAAU,KAAON,EAASM,CAAW,EAAE,MAAM,GAAG,OACnM,IAAKN,EAASM,CAAW,EAAE,MAAM,IACjC,UAAU,8JACZ,GAXKN,EAASM,CAAW,EAAE,MAAM,GAYnC,EACF,EACF,GACF,CAEJ,CAAC,EAEDhB,EAAa,YAAc,eAE3B,IAAOX,KAAQ,cAAWW,CAAY",
+  "names": ["TabWithImage_exports", "__export", "TabWithImage_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_framer_motion", "componentType", "componentName", "TabWithImage", "React", "data", "className", "ref", "title", "subtitle", "desc", "image", "mobileImage", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el"]
 }