npm - @anker-in/headless-ui - Versions diffs - 1.0.26-alpha.1762509077023 → 1.0.26-alpha.1762756639604 - Mend

@anker-in/headless-ui 1.0.26-alpha.1762509077023 → 1.0.26-alpha.1762756639604

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/FeatureCards/FeatureCards.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n  const { title, subtitle, items = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const renderCard = (item: FeatureCardItem) => {\n    const cardContent = (\n      <>\n        <Picture\n          source={item.image.url}\n          alt={item.image.alt || item.title}\n          className=\"feature-cards__card-image absolute inset-0 !h-full\"\n          imgClassName=\"!h-full object-cover\"\n        />\n        <div className=\"feature-cards__card-content z-10\">\n          <Heading size={3} as=\"h2\" className=\"feature-cards__card-title 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=\"feature-cards__card-subtitle 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      'feature-cards__card 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('feature-cards flex w-full flex-col justify-center', className)}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      <div className=\"feature-cards__header\">\n        <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n          {title}\n        </Heading>\n        {subtitle && (\n          <Text\n            size={2}\n            as=\"p\"\n            className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n          >\n            {subtitle}\n          </Text>\n        )}\n      </div>\n\n      {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n      <div className=\"feature-cards__grid 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=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n        <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n          {items.map(item => (\n            <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n              <div\n                key={item.title}\n                className={cn(\n                  'feature-cards__card feature-cards__card--mobile 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=\"feature-cards__card-image absolute inset-0 !h-full\"\n                  imgClassName=\"!h-full object-cover\"\n                />\n                <div className=\"feature-cards__card-content z-10\">\n                  <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n                    {item.title}\n                  </Heading>\n                  <Text\n                    size={4}\n                    as=\"p\"\n                    className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n                  >\n                    {item.subtitle}\n                  </Text>\n                </div>\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n  const { title, subtitle, items = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const renderCard = (item: FeatureCardItem) => {\n    const cardContent = (\n      <>\n        <Picture\n          source={item.image?.url}\n          alt={item.image?.alt || item.title}\n          className=\"feature-cards__card-image absolute inset-0 !h-full\"\n          imgClassName=\"!h-full object-cover\"\n        />\n        <div className=\"feature-cards__card-content z-10\">\n          <Heading size={3} as=\"h2\" className=\"feature-cards__card-title 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=\"feature-cards__card-subtitle 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      'feature-cards__card 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('feature-cards flex w-full flex-col justify-center', className)}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      <div className=\"feature-cards__header\">\n        <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n          {title}\n        </Heading>\n        {subtitle && (\n          <Text\n            size={2}\n            as=\"p\"\n            className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n          >\n            {subtitle}\n          </Text>\n        )}\n      </div>\n\n      {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n      <div className=\"feature-cards__grid 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=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n        <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n          {items.map(item => (\n            <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n              <div\n                key={item.title}\n                className={cn(\n                  'feature-cards__card feature-cards__card--mobile 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=\"feature-cards__card-image absolute inset-0 !h-full\"\n                  imgClassName=\"!h-full object-cover\"\n                />\n                <div className=\"feature-cards__card-content z-10\">\n                  <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n                    {item.title}\n                  </Heading>\n                  <Text\n                    size={4}\n                    as=\"p\"\n                    className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n                  >\n                    {item.subtitle}\n                  </Text>\n                </div>\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "Swiper", "SwiperSlide", "componentType", "componentName", "FeatureCards", "data", "className", "ref", "title", "subtitle", "items", "boxRef", "renderCard", "item", "cardContent", "cardClasses", "FeatureCards_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/FeatureShowcase/FeatureShowcase.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Picture, Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { FeatureShowcaseProps, FeatureShowcaseItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'feature_showcase'\n\nconst FeatureShowcase = React.forwardRef<HTMLDivElement, FeatureShowcaseProps>(({ 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        'feature-showcase 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=\"feature-showcase__list flex gap-[16px]\">\n        {datalist?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index} className=\"feature-showcase__item\">\n            <div className=\"feature-showcase__card relative\">\n              <Picture source={`${item.imageMob.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n              <div className=\"feature-showcase__content 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=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"feature-showcase__description 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=\"feature-showcase__list flex gap-[16px]\">\n        {datalists?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index} className=\"feature-showcase__item\">\n            <div className=\"feature-showcase__card relative\">\n              <Picture source={`${item.imageMob.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n              <div className=\"feature-showcase__content 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=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\n\nFeatureShowcase.displayName = 'FeatureShowcase'\n\nexport default withLayout(FeatureShowcase)\n"],
-  "mappings": "aAqCc,cAAAA,EAEA,QAAAC,MAFA,oBApCd,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkBX,EAAM,WAAiD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC3G,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,EAAShB,EAAuB,IAAI,EAE1C,OAAAO,EAAYS,EAAQ,CAClB,cAAAR,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,EAEDR,EAAoBY,EAAK,IAAMG,EAAO,OAAyB,EAG7DlB,EAAC,WACC,IAAKkB,EACL,uBAAqB,kBACrB,UAAWX,EACT,qHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,yCACZ,SAAAiB,GAAU,IAAI,CAACG,EAA2BC,IACzCrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,SAAS,GAAG,GAAI,UAAU,iGAAiG,EACpJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,MAAM,GAAG,QAAS,UAAU,oEAAoE,EACzHnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,EACArB,EAAC,OAAI,UAAU,yCACZ,SAAAkB,GAAW,IAAI,CAACE,EAA2BC,IAC1CrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,SAAS,GAAG,GAAI,UAAU,iGAAiG,EACpJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,MAAM,GAAG,QAAS,UAAU,oEAAoE,EACzHnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,GACF,CAEJ,CAAC,EAEDR,EAAgB,YAAc,kBAE9B,IAAOS,EAAQb,EAAWI,CAAe",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Picture, Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { FeatureShowcaseProps, FeatureShowcaseItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'feature_showcase'\n\nconst FeatureShowcase = React.forwardRef<HTMLDivElement, FeatureShowcaseProps>(({ data, className }, ref) => {\n  const { datalist = [], datalists = [] } = data || {}\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: 'Feature Showcase',\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"FeatureShowcase\"\n      className={cn(\n        'feature-showcase 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=\"feature-showcase__list flex gap-[16px]\">\n        {datalist?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index} className=\"feature-showcase__item\">\n            <div className=\"feature-showcase__card relative\">\n              <Picture source={`${item.imageMob?.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image?.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n              <div className=\"feature-showcase__content 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=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"feature-showcase__description 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=\"feature-showcase__list flex gap-[16px]\">\n        {datalists?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index} className=\"feature-showcase__item\">\n            <div className=\"feature-showcase__card relative\">\n              <Picture source={`${item.imageMob?.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image?.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n              <div className=\"feature-showcase__content 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=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\n\nFeatureShowcase.displayName = 'FeatureShowcase'\n\nexport default withLayout(FeatureShowcase)\n"],
+  "mappings": "aAqCc,cAAAA,EAEA,QAAAC,MAFA,oBApCd,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkBX,EAAM,WAAiD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC3G,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,EAAShB,EAAuB,IAAI,EAE1C,OAAAO,EAAYS,EAAQ,CAClB,cAAAR,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,EAEDR,EAAoBY,EAAK,IAAMG,EAAO,OAAyB,EAG7DlB,EAAC,WACC,IAAKkB,EACL,uBAAqB,kBACrB,UAAWX,EACT,qHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,yCACZ,SAAAiB,GAAU,IAAI,CAACG,EAA2BC,IACzCrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,UAAU,GAAG,GAAI,UAAU,iGAAiG,EACrJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,OAAO,GAAG,QAAS,UAAU,oEAAoE,EAC1HnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,EACArB,EAAC,OAAI,UAAU,yCACZ,SAAAkB,GAAW,IAAI,CAACE,EAA2BC,IAC1CrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,UAAU,GAAG,GAAI,UAAU,iGAAiG,EACrJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,OAAO,GAAG,QAAS,UAAU,oEAAoE,EAC1HnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,GACF,CAEJ,CAAC,EAEDR,EAAgB,YAAc,kBAE9B,IAAOS,EAAQb,EAAWI,CAAe",
   "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Picture", "Text", "Heading", "cn", "withLayout", "useExposure", "componentType", "componentName", "FeatureShowcase", "data", "className", "ref", "datalist", "datalists", "boxRef", "item", "index", "FeatureShowcase_default"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageTextFeature/ImageTextFeature.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ImageTextFeatureProps, ImageTextFeatureItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_text_feature'\n\nconst ImageTextFeature = React.forwardRef<HTMLDivElement, ImageTextFeatureProps>(({ data, className }, ref) => {\n  const { 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        'image-text-feature',\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('image-text-feature__image aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0', {\n          'image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'left',\n          'image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'right',\n        })}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div\n        className={cn('image-text-feature__content 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=\"image-text-feature__title w-full text-left\" />\n\n        {/* \u526F\u6807\u9898 */}\n        {subtitle && (\n          <Text\n            size={4}\n            html={subtitle}\n            as=\"p\"\n            className=\"image-text-feature__subtitle mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n\n        {/* \u529F\u80FD\u5217\u8868 */}\n        <div className=\"image-text-feature__items 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=\"image-text-feature__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n              <div className=\"image-text-feature__item-header flex flex-row items-center gap-[8px]\">\n                <img\n                  src={item.icon}\n                  alt=\"icon\"\n                  className=\"image-text-feature__item-icon 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=\"image-text-feature__item-text 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=\"image-text-feature__item-desc -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": "aAqCM,cAAAA,EAiCQ,QAAAC,MAjCR,oBApCN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmBX,EAAM,WAAkD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,cAAAC,EAAgB,OAAQ,MAAAC,EAAQ,OAAQ,EAAIV,EAE3GW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,mBACrB,UAAWjB,EACT,qBACAgB,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,UAAAf,EAACM,EAAA,CACC,OAAQ,GAAGa,EAAQ,GAAG,KAAKE,GAAU,KAAOF,EAAQ,GAAG,UAAUC,EAAY,KAAOD,EAAQ,GAAG,OAC/F,IAAKA,EAAQ,IACb,UAAWX,EAAG,kIAAmI,CAC/I,gGAAiGe,IAAkB,OACnH,kFAAmFA,IAAkB,OACvG,CAAC,EACH,EAGAtB,EAAC,OACC,UAAWO,EAAG,2FAA4F,CACxG,yBAA0Be,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,UAAAvB,EAACK,EAAA,CAAQ,KAAM,EAAG,KAAMY,EAAO,GAAG,KAAK,UAAU,6CAA6C,EAG7FC,GACClB,EAACO,EAAA,CACC,KAAM,EACN,KAAMW,EACN,GAAG,IACH,UAAU,yHACZ,EAIFlB,EAAC,OAAI,UAAU,6LACZ,SAAAsB,EAAM,IAAI,CAACI,EAA4BC,IACtC1B,EAAC,OAAgB,UAAU,wEACzB,UAAAA,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,OACC,IAAK0B,EAAK,KACV,IAAI,OACJ,UAAU,4LACZ,EACA1B,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAU,2GAET,SAAAqB,EAAK,KACR,GACF,EACA1B,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,KAAMmB,EAAK,KACX,UAAU,uIACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDd,EAAiB,YAAc,mBAE/B,IAAOe,EAAQnB,EAAWI,CAAgB",
+  "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        'image-text-feature',\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('image-text-feature__image aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0', {\n          'image-text-feature__image--left order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'left',\n          'image-text-feature__image--right order-2 laptop:basis-[63%] desktop:basis-[57%]': imagePosition === 'right',\n        })}\n      />\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div\n        className={cn('image-text-feature__content 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=\"image-text-feature__title w-full text-left\" />\n\n        {/* \u526F\u6807\u9898 */}\n        {subtitle && (\n          <Text\n            size={4}\n            html={subtitle}\n            as=\"p\"\n            className=\"image-text-feature__subtitle mt-[4px] text-left text-[14px] min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        )}\n\n        {/* \u529F\u80FD\u5217\u8868 */}\n        <div className=\"image-text-feature__items 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=\"image-text-feature__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n              <div className=\"image-text-feature__item-header flex flex-row items-center gap-[8px]\">\n                <img\n                  src={item.icon}\n                  alt=\"icon\"\n                  className=\"image-text-feature__item-icon 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=\"image-text-feature__item-text 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=\"image-text-feature__item-desc -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": "aAqCM,cAAAA,EAiCQ,QAAAC,MAjCR,oBApCN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAmBX,EAAM,WAAkD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,cAAAC,EAAgB,OAAQ,MAAAC,EAAQ,OAAQ,EAAIV,EAE3GW,EAASrB,EAAuB,IAAI,EAE1C,OAAAM,EAAYe,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDf,EAAoBa,EAAK,IAAMS,EAAO,OAAyB,EAG7DxB,EAAC,WACC,IAAKwB,EACL,uBAAqB,mBACrB,UAAWjB,EACT,qBACAgB,IAAU,OAAS,YAAc,GACjC,qIACAT,CACF,EAGA,UAAAf,EAACM,EAAA,CACC,OAAQ,GAAGa,GAAS,GAAG,KAAKE,GAAU,KAAOF,GAAS,GAAG,UAAUC,GAAa,KAAOD,GAAS,GAAG,OACnG,IAAKA,GAAS,IACd,UAAWX,EAAG,kIAAmI,CAC/I,gGAAiGe,IAAkB,OACnH,kFAAmFA,IAAkB,OACvG,CAAC,EACH,EAGAtB,EAAC,OACC,UAAWO,EAAG,2FAA4F,CACxG,yBAA0Be,IAAkB,OAC5C,UAAWA,IAAkB,OAC/B,CAAC,EAGD,UAAAvB,EAACK,EAAA,CAAQ,KAAM,EAAG,KAAMY,EAAO,GAAG,KAAK,UAAU,6CAA6C,EAG7FC,GACClB,EAACO,EAAA,CACC,KAAM,EACN,KAAMW,EACN,GAAG,IACH,UAAU,yHACZ,EAIFlB,EAAC,OAAI,UAAU,6LACZ,SAAAsB,EAAM,IAAI,CAACI,EAA4BC,IACtC1B,EAAC,OAAgB,UAAU,wEACzB,UAAAA,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,OACC,IAAK0B,EAAK,KACV,IAAI,OACJ,UAAU,4LACZ,EACA1B,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAU,2GAET,SAAAqB,EAAK,KACR,GACF,EACA1B,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,KAAMmB,EAAK,KACX,UAAU,uIACZ,IApBQC,CAqBV,CACD,EACH,GACF,GACF,CAEJ,CAAC,EAEDd,EAAiB,YAAc,mBAE/B,IAAOe,EAAQnB,EAAWI,CAAgB",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "ImageTextFeature", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "padImage", "items", "imagePosition", "theme", "boxRef", "item", "index", "ImageTextFeature_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import re,{useImperativeHandle as xe,useRef as h,useState as g,useEffect as ne}from"react";import{Heading as u,Picture as D,Text as L}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as ce}from"../../shared/Styles.js";import{useExposure as he}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as M}from"../../hooks/useIntersectionObserver.js";import{motion as q,AnimatePresence as B}from"framer-motion";const ge="image",ue="image_with_text",G=re.forwardRef(({data:J,className:K},Q)=>{const{title:_,subtitle:w,desc:v,descIcon:b,image:c,padImage:V,mobileImage:E,theme:k="dark",items:H=[],imagePosition:U,layout:X,mediaType:Y="image",datalist:m=[],video:S,padVideo:W,mobVideo:z,poster:Z,padPoster:ee,mobPoster:te,cols:f=1}=J,i=X||U||"left",y=h(null),N=h(null),T=h(null),I=h(null),[d,ie]=g(0),R=h([]),[A,ae]=g({left:0,width:0}),[n,oe]=g(""),[$,le]=g(""),[j,se]=g("");he(y,{componentType:ge,componentName:ue,componentTitle:_,componentDescription:w}),xe(Q,()=>y.current),ne(()=>{if(m.length>0){const t=R.current[d];if(t){const{offsetLeft:l,offsetWidth:x}=t;ae({left:l,width:x})}}},[d,m.length]),M(N,{once:!0,threshold:.1,callback:()=>{S?.url&&oe(S.url)}}),M(T,{once:!0,threshold:.1,callback:()=>{W?.url&&le(W.url)}}),M(I,{once:!0,threshold:.1,callback:()=>{z?.url&&se(z.url)}});const me=(t,l)=>{ie(t),l.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},o=m.length>0,F=Y==="video",a=H.length>0,C=()=>{if(o&&m[d]){const t=m[d];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return c?`${c.url},${V?.url||c.url} 1024, ${E?.url||c.url} 768`:""},O=()=>{if(o){const p=m[d],P=p.poster?.url||p.image?.url,de=p.padPoster?.url||p.imgPad?.url||P,pe=p.mobPoster?.url||p.imageMob?.url||P;return e(B,{mode:"wait",children:e(q.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:P,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:de,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},p.video?.url||p.image.url)})}const t=Z?.url||c?.url,l=ee?.url||V?.url||t,x=te?.url||E?.url||t;return s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:l,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return s("section",{ref:y,"data-ui-component-id":"ImageWithText",className:r("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!o,"flex-col":!o&&(i==="top"||i==="bottom"),"flex-col laptop:flex-row":!o&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":o,"image-with-text--dark text-white":k==="dark","image-with-text--light text-[#1f1f1f]":k==="light","aiui-dark":a&&k==="dark"},K),children:[o&&s("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{className:"image-with-text__header",children:[e(u,{as:"h3",size:4,html:_,className:"image-with-text__title"}),e(L,{as:"p",size:1,html:v,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:A.left,width:A.width}}),m.map((t,l)=>e("div",{ref:x=>{R.current[l]=x},onClick:x=>me(l,x),className:r("image-with-text__tab 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]",d===l?"image-with-text__tab--active text-black":"text-white"),children:e(u,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},l))]})})]}),!o&&s("div",{className:r("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":a,"order-1 laptop:order-2":a&&i==="left","order-1":a&&i==="right"||!a&&(i==="top"||i==="left"),"order-2":!a&&(i==="bottom"||i==="right")}),children:[e(u,{as:"h2",size:4,html:_,className:r("image-with-text__title",{"w-full text-left":a})}),w&&e(L,{as:"p",size:a?4:3,html:w,className:r("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!a,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":a})}),!a&&(v||b)&&s("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[b&&e("img",{src:b,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),v&&e(u,{as:"h4",size:5,html:v,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),a&&e("div",{className:r("image-with-text__items w-full grid gap-6",{"grid-cols-1":f===1,"grid-cols-2":f===2,"grid-cols-3":f===3,"grid-cols-4":f===4}),children:H.map((t,l)=>s("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[s("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[e(D,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),e(u,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(L,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},l))})]}),e("div",{className:r("image-with-text__media-wrapper",{"order-1":!o&&(i==="top"||i==="left"),"order-2":!o&&(i==="bottom"||i==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":a,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="right","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]":o}),children:o?F?O():e(B,{mode:"wait",children:e(q.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(D,{source:C(),alt:m[d].image.alt,className:"image-with-text__image 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]"})},m[d].image.url)}):F?O():e(D,{source:C(),className:r("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!a})})})]})});G.displayName="ImageWithText";var Ne=ce(G);export{Ne as default};
+"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import re,{useImperativeHandle as xe,useRef as h,useState as g,useEffect as ne}from"react";import{Heading as u,Picture as D,Text as L}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as ce}from"../../shared/Styles.js";import{useExposure as he}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as M}from"../../hooks/useIntersectionObserver.js";import{motion as q,AnimatePresence as B}from"framer-motion";const ge="image",ue="image_with_text",G=re.forwardRef(({data:J,className:K},Q)=>{const{title:_,subtitle:w,desc:v,descIcon:b,image:c,padImage:V,mobileImage:E,theme:k="dark",items:H=[],imagePosition:U,layout:X,mediaType:Y="image",datalist:m=[],video:S,padVideo:W,mobVideo:z,poster:Z,padPoster:ee,mobPoster:te,cols:f=1}=J,i=X||U||"left",y=h(null),N=h(null),T=h(null),I=h(null),[d,ie]=g(0),R=h([]),[A,ae]=g({left:0,width:0}),[n,oe]=g(""),[$,le]=g(""),[j,se]=g("");he(y,{componentType:ge,componentName:ue,componentTitle:_,componentDescription:w}),xe(Q,()=>y.current),ne(()=>{if(m.length>0){const t=R.current[d];if(t){const{offsetLeft:l,offsetWidth:x}=t;ae({left:l,width:x})}}},[d,m.length]),M(N,{once:!0,threshold:.1,callback:()=>{S?.url&&oe(S.url)}}),M(T,{once:!0,threshold:.1,callback:()=>{W?.url&&le(W.url)}}),M(I,{once:!0,threshold:.1,callback:()=>{z?.url&&se(z.url)}});const me=(t,l)=>{ie(t),l.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},o=m.length>0,F=Y==="video",a=H.length>0,C=()=>{if(o&&m[d]){const t=m[d];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return c?`${c?.url},${V?.url||c?.url} 1024, ${E?.url||c?.url} 768`:""},O=()=>{if(o){const p=m[d],P=p.poster?.url||p.image?.url,de=p.padPoster?.url||p.imgPad?.url||P,pe=p.mobPoster?.url||p.imageMob?.url||P;return e(B,{mode:"wait",children:e(q.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:P,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:de,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},p.video?.url||p.image?.url)})}const t=Z?.url||c?.url,l=ee?.url||V?.url||t,x=te?.url||E?.url||t;return s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:l,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return s("section",{ref:y,"data-ui-component-id":"ImageWithText",className:r("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!o,"flex-col":!o&&(i==="top"||i==="bottom"),"flex-col laptop:flex-row":!o&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":o,"image-with-text--dark text-white":k==="dark","image-with-text--light text-[#1f1f1f]":k==="light","aiui-dark":a&&k==="dark"},K),children:[o&&s("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{className:"image-with-text__header",children:[e(u,{as:"h3",size:4,html:_,className:"image-with-text__title"}),e(L,{as:"p",size:1,html:v,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:A.left,width:A.width}}),m.map((t,l)=>e("div",{ref:x=>{R.current[l]=x},onClick:x=>me(l,x),className:r("image-with-text__tab 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]",d===l?"image-with-text__tab--active text-black":"text-white"),children:e(u,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},l))]})})]}),!o&&s("div",{className:r("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":a,"order-1 laptop:order-2":a&&i==="left","order-1":a&&i==="right"||!a&&(i==="top"||i==="left"),"order-2":!a&&(i==="bottom"||i==="right")}),children:[e(u,{as:"h2",size:4,html:_,className:r("image-with-text__title",{"w-full text-left":a})}),w&&e(L,{as:"p",size:a?4:3,html:w,className:r("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!a,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":a})}),!a&&(v||b)&&s("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[b&&e("img",{src:b,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),v&&e(u,{as:"h4",size:5,html:v,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),a&&e("div",{className:r("image-with-text__items w-full grid gap-6",{"grid-cols-1":f===1,"grid-cols-2":f===2,"grid-cols-3":f===3,"grid-cols-4":f===4}),children:H.map((t,l)=>s("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[s("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[e(D,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),e(u,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(L,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},l))})]}),e("div",{className:r("image-with-text__media-wrapper",{"order-1":!o&&(i==="top"||i==="left"),"order-2":!o&&(i==="bottom"||i==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":a,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="right","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]":o}),children:o?F?O():e(B,{mode:"wait",children:e(q.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(D,{source:C(),alt:m[d].image?.alt,className:"image-with-text__image 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]"})},m[d].image?.url)}):F?O():e(D,{source:C(),className:r("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!a})})})]})});G.displayName="ImageWithText";var Ne=ce(G);export{Ne as default};
 //# sourceMappingURL=ImageWithText.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } 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 { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } 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    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    imagePosition,\n    layout,\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    poster,\n    padPoster,\n    mobPoster,\n    cols = 1,\n  } = data\n\n  // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n  const effectiveLayout = layout || imagePosition || 'left'\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (video?.url) {\n        setLoadedDesktopVideoSrc(video.url)\n      }\n    },\n  })\n\n  // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(tabletVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (padVideo?.url) {\n        setLoadedTabletVideoSrc(padVideo.url)\n      }\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobVideo?.url) {\n        setLoadedMobileVideoSrc(mobVideo.url)\n      }\n    },\n  })\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n  }\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image.url} ,${activeTab.imgPad?.url || activeTab.image.url} 1440, ${activeTab.imageMob?.url || activeTab.image.url} 767`\n    }\n    if (image) {\n      return `${image.url},${padImage?.url || image.url} 1024, ${mobileImage?.url || image.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n      const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n      const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.mobPoster?.url || activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[16px]\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n    const desktopPoster = poster?.url || image?.url\n    const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n    const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'image-with-text--dark text-white': theme === 'dark',\n          'image-with-text--light text-[#1f1f1f]': theme === 'light',\n          'aiui-dark': hasItems && theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (\n        <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n            />\n          </div>\n\n          <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n            <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider 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: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab 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 ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (\n        <div\n          className={cn('image-with-text__content flex flex-col justify-center', {\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full items-start laptop:w-fit': hasItems,\n            // order\u63A7\u5236\n            'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n            'order-1':\n              (hasItems && effectiveLayout === 'right') ||\n              (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n            'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n          })}\n        >\n          <Heading\n            as={'h2'}\n            size={4}\n            html={title}\n            className={cn('image-with-text__title', {\n              'w-full text-left': hasItems,\n            })}\n          />\n          {subtitle && (\n            <Text\n              as={'p'}\n              size={hasItems ? 4 : 3}\n              html={subtitle}\n              className={cn(\n                'image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n                {\n                  'laptop:mt-[16px]': !hasItems,\n                  'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                }\n              )}\n            />\n          )}\n\n          {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n          {!hasItems && (desc || descIcon) && (\n            <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n              {descIcon && (\n                <img\n                  src={descIcon}\n                  alt=\"icon\"\n                  className=\"image-with-text__description-icon 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=\"image-with-text__description-text 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          )}\n\n          {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n          {hasItems && (\n            <div\n              className={cn('image-with-text__items w-full grid gap-6', {\n                'grid-cols-1': cols === 1,\n                'grid-cols-2': cols === 2,\n                'grid-cols-3': cols === 3,\n                'grid-cols-4': cols === 4,\n              })}\n            >\n              {items.map((item: ImageWithTextItem, index: number) => (\n                <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n                  <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n                    <Picture\n                      source={item.icon?.url}\n                      alt={item.icon?.alt}\n                      className=\"image-with-text__item-icon 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=\"image-with-text__item-text 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=\"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        className={cn('image-with-text__media-wrapper', {\n          // \u57FA\u7840\u6A21\u5F0F\n          'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n          'order-2': !isTabMode && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n          // TabWithImage\u6A21\u5F0F\n          '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            isTabMode,\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\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=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image.alt}\n                  className=\"image-with-text__image 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          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture\n            source={getImageSource()}\n            className={cn('image-with-text__image', {\n              'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n            })}\n          />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } 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 { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } 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    image,\n    padImage,\n    mobileImage,\n    theme = 'dark',\n    items = [],\n    imagePosition,\n    layout,\n    mediaType = 'image',\n    datalist = [],\n    video,\n    padVideo,\n    mobVideo,\n    poster,\n    padPoster,\n    mobPoster,\n    cols = 1,\n  } = data\n\n  // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n  const effectiveLayout = layout || imagePosition || 'left'\n\n  const boxRef = useRef<HTMLDivElement>(null)\n  const desktopVideoRef = useRef<HTMLDivElement>(null)\n  const tabletVideoRef = useRef<HTMLDivElement>(null)\n  const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n  // Tab\u72B6\u6001\u7BA1\u7406\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n  const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n  const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n  const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n  useEffect(() => {\n    if (datalist.length > 0) {\n      const current = tabRefs.current[activeIndex]\n      if (current) {\n        const { offsetLeft, offsetWidth } = current\n        setSliderStyle({ left: offsetLeft, width: offsetWidth })\n      }\n    }\n  }, [activeIndex, datalist.length])\n\n  // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(desktopVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (video?.url) {\n        setLoadedDesktopVideoSrc(video.url)\n      }\n    },\n  })\n\n  // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(tabletVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (padVideo?.url) {\n        setLoadedTabletVideoSrc(padVideo.url)\n      }\n    },\n  })\n\n  // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n  useIntersectionObserverDelay(mobileVideoRef, {\n    once: true,\n    threshold: 0.1,\n    callback: () => {\n      if (mobVideo?.url) {\n        setLoadedMobileVideoSrc(mobVideo.url)\n      }\n    },\n  })\n\n  const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth',\n      inline: 'center',\n      block: 'nearest',\n    })\n  }\n\n  // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n  const isTabMode = datalist.length > 0\n\n  // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n  const isVideo = mediaType === 'video'\n\n  // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n  const hasItems = items.length > 0\n\n  // \u83B7\u53D6\u56FE\u7247\u6E90\n  const getImageSource = () => {\n    if (isTabMode && datalist[activeIndex]) {\n      const activeTab = datalist[activeIndex]\n      return `${activeTab.image?.url} ,${activeTab.imgPad?.url || activeTab.image?.url} 1440, ${activeTab.imageMob?.url || activeTab.image?.url} 767`\n    }\n    if (image) {\n      return `${image?.url},${padImage?.url || image?.url} 1024, ${mobileImage?.url || image?.url} 768`\n    }\n    return ''\n  }\n\n  // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n  const renderVideo = () => {\n    if (isTabMode) {\n      const activeTab = datalist[activeIndex]\n      // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n      const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n      const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n      const mobilePoster = activeTab.mobPoster?.url || activeTab.imageMob?.url || desktopPoster\n\n      return (\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={activeTab.video?.url || activeTab.image?.url}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n            className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n          >\n            <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[16px]\">\n              {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n              <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={desktopPoster}\n                  src={loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n                ></video>\n              </div>\n              {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n              <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={tabletPoster}\n                  src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n                ></video>\n              </div>\n              {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n              <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n                <video\n                  playsInline\n                  autoPlay\n                  muted\n                  poster={mobilePoster}\n                  src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n                  loop\n                  className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n                ></video>\n              </div>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      )\n    }\n\n    // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n    const desktopPoster = poster?.url || image?.url\n    const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n    const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n    return (\n      <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={desktopPoster}\n            src={loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n          ></video>\n        </div>\n        {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n        <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={tabletPoster}\n            src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n          ></video>\n        </div>\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n          <video\n            playsInline\n            autoPlay\n            muted\n            poster={mobilePoster}\n            src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n            loop\n            className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n          ></video>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ImageWithText\"\n      className={cn(\n        'image-with-text',\n        {\n          // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n          'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n          'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n          'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n          // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n          'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n          // \u4E3B\u9898\u6837\u5F0F\n          'image-with-text--dark text-white': theme === 'dark',\n          'image-with-text--light text-[#1f1f1f]': theme === 'light',\n          'aiui-dark': hasItems && theme === 'dark',\n        },\n        className\n      )}\n    >\n      {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n      {isTabMode && (\n        <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n          <div className=\"image-with-text__header\">\n            <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n            <Text\n              as={'p'}\n              size={1}\n              html={desc}\n              className=\"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n            />\n          </div>\n\n          <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n            <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n              {/* \u6ED1\u52A8\u80CC\u666F */}\n              <div\n                className=\"image-with-text__slider 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: ImageWithTextTabItem, index: number) => (\n                <div\n                  key={index}\n                  ref={el => {\n                    tabRefs.current[index] = el\n                  }}\n                  onClick={e => handleTabClick(index, e)}\n                  className={cn(\n                    'image-with-text__tab 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 ? 'image-with-text__tab--active text-black' : 'text-white'\n                  )}\n                >\n                  <Heading\n                    as=\"h1\"\n                    size={1}\n                    html={item?.title}\n                    className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n      {!isTabMode && (\n        <div\n          className={cn('image-with-text__content flex flex-col justify-center', {\n            // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n            'w-full items-start laptop:w-fit': hasItems,\n            // order\u63A7\u5236\n            'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n            'order-1':\n              (hasItems && effectiveLayout === 'right') ||\n              (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n            'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n          })}\n        >\n          <Heading\n            as={'h2'}\n            size={4}\n            html={title}\n            className={cn('image-with-text__title', {\n              'w-full text-left': hasItems,\n            })}\n          />\n          {subtitle && (\n            <Text\n              as={'p'}\n              size={hasItems ? 4 : 3}\n              html={subtitle}\n              className={cn(\n                'image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n                {\n                  'laptop:mt-[16px]': !hasItems,\n                  'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n                }\n              )}\n            />\n          )}\n\n          {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n          {!hasItems && (desc || descIcon) && (\n            <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n              {descIcon && (\n                <img\n                  src={descIcon}\n                  alt=\"icon\"\n                  className=\"image-with-text__description-icon 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=\"image-with-text__description-text 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          )}\n\n          {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n          {hasItems && (\n            <div\n              className={cn('image-with-text__items w-full grid gap-6', {\n                'grid-cols-1': cols === 1,\n                'grid-cols-2': cols === 2,\n                'grid-cols-3': cols === 3,\n                'grid-cols-4': cols === 4,\n              })}\n            >\n              {items.map((item: ImageWithTextItem, index: number) => (\n                <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n                  <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n                    <Picture\n                      source={item.icon?.url}\n                      alt={item.icon?.alt}\n                      className=\"image-with-text__item-icon 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=\"image-with-text__item-text 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=\"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n      <div\n        className={cn('image-with-text__media-wrapper', {\n          // \u57FA\u7840\u6A21\u5F0F\n          'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n          'order-2': !isTabMode && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n          // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n          'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n            hasItems,\n          'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n          'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n          // TabWithImage\u6A21\u5F0F\n          '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            isTabMode,\n        })}\n      >\n        {isTabMode ? (\n          // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n          isVideo ? (\n            renderVideo()\n          ) : (\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=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n              >\n                <Picture\n                  source={getImageSource()}\n                  alt={datalist[activeIndex].image?.alt}\n                  className=\"image-with-text__image 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          )\n        ) : isVideo ? (\n          // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n          renderVideo()\n        ) : (\n          // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n          <Picture\n            source={getImageSource()}\n            className={cn('image-with-text__image', {\n              'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n            })}\n          />\n        )}\n      </div>\n    </section>\n  )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "motion", "AnimatePresence", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "imagePosition", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "poster", "padPoster", "mobPoster", "cols", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "current", "offsetLeft", "offsetWidth", "handleTabClick", "index", "e", "isTabMode", "isVideo", "hasItems", "getImageSource", "activeTab", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el", "ImageWithText_default"]
 }

package/dist/esm/biz-components/Ksp/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as w,jsx as e,jsxs as p}from"react/jsx-runtime";import{Heading as i,Picture as c,Text as n}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as k}from"../../shared/Styles.js";const s=({title:l,desc:o,image:a,mobImage:t,video:d,mobVideo:m,className:x})=>p("div",{className:r("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]",x),children:[d&&m?p(w,{children:[e("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:d?.url,poster:a?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),e("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:m?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(a||t)&&e(c,{source:a?.url||t?.url,alt:a?.alt||t?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),p("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[e(i,{size:3,html:l,className:"ksp-card-title hidden w-full tablet:block"}),e(i,{size:2,html:l,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),e(n,{size:2,html:o,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]});function h({data:l,className:o}){const{title:a,items:t}=l;return p("section",{"data-ui-component-id":"ksp",className:r("ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]",o),children:[e(i,{as:"h1",size:4,html:a,className:"ksp-title text-left text-white laptop:text-center"}),p("div",{className:"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex",children:[p("div",{className:"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[0]}),e(s,{className:"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[1]})]}),p("div",{className:"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[4]}),e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[3]}),e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[2]})]}),p("div",{className:"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]",...t[5]}),e(s,{className:"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]",...t[6]})]})]}),p("div",{className:"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden",children:[e(s,{className:"h-[240px] w-[100%]",...t[0]}),p("div",{className:"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[e(s,{className:"w-[50%]",...t[1]}),e(s,{className:"w-[50%]",...t[2]})]}),e(s,{className:"max-h-[240px] w-[100%]",...t[6]}),p("div",{className:"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[e(s,{className:"w-[50%]",...t[3]}),e(s,{className:"w-[50%]",...t[4]})]}),e(s,{className:"max-h-[280px] w-[100%]",...t[5]})]})]})}var u=k(h);export{u as default};
+import{Fragment as g,jsx as p,jsxs as e}from"react/jsx-runtime";import{Heading as n,Picture as d,Text as m}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as u}from"../../shared/Styles.js";const b=({title:l,desc:t,image:o,mobImage:a,video:c,mobVideo:s,className:i})=>e("div",{className:r("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f] text-white",i),children:[c&&s?e(g,{children:[p("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:o?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),p("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:s?.url,poster:a?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(o||a)&&p(d,{source:o?.url||a?.url,alt:o?.alt||a?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),e("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[p(n,{size:3,html:l,className:"ksp-card-title hidden w-full tablet:block"}),p(n,{size:2,html:l,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),p(m,{size:2,html:t,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]}),x={4:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-2 laptop:col-span-6"},5:{0:"col-span-2 laptop:col-span-6",1:"col-span-2 tablet:col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-1 laptop:col-span-4",4:"col-span-2 tablet:col-span-1 laptop:col-span-3"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4"},7:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4",6:"col-span-2 laptop:col-span-6"},8:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-4"},9:{0:"col-span-2 laptop:col-span-3",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-4",3:"col-span-1 tablet:col-span-2 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-3",8:"col-span-2 laptop:col-span-4"}},f=(l,t)=>x[t]?.[l]||"";function k({data:l,className:t}){const{title:o,items:a}=l;return e("section",{"data-ui-component-id":"ksp",className:r("ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]",t),children:[p(n,{as:"h1",size:4,html:o,className:"ksp-title text-left text-white laptop:text-center"}),p("div",{className:"ksp-layout grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-10 gap-3 laptop:gap-4",children:a.map((c,s)=>p(b,{...c,className:f(s,a.length)},s))})]})}var y=u(k);export{y as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Ksp/index.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image?: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  video?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst ImageCard = ({\n  title,\n  desc,\n  image,\n  mobImage,\n  video,\n  mobVideo,\n  className,\n}: ImageCardProps) => {\n  return (\n    <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n      {video && mobVideo ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={video?.url}\n            poster={image?.url}\n            className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={image?.url || mobImage?.url}\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image h-full w-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n        <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n        />\n      </div>\n\n    </div>\n  )\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n * \n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u9700\u8981 7 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n * \n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         image: '/desktop.jpg',\n *         mobImage: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 7 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n  const { title, items } = data\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n      {/* ipad, pc\u7AEF */}\n      <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n        <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[0]}\n          />\n          <ImageCard\n            className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[1]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[4]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[3]}\n          />\n          <ImageCard\n            className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n            {...items[2]}\n          />\n        </div>\n\n        <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n          <ImageCard\n            className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n            {...items[5]}\n          />\n          <ImageCard\n            className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n            {...items[6]}\n          />\n        </div>\n      </div>\n\n      {/* \u624B\u673A\u7AEF */}\n      <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n        <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n        <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[1]} />\n          <ImageCard className=\"w-[50%]\" {...items[2]} />\n        </div>\n        <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n        <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n          <ImageCard className=\"w-[50%]\" {...items[3]} />\n          <ImageCard className=\"w-[50%]\" {...items[4]} />\n        </div>\n        <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n      </div>\n    </section>\n  )\n}\n\n\nexport default withLayout(Ksp)"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "Ksp", "data", "items", "Ksp_default"]
+  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image?: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  video?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className }: ImageCardProps) => {\n  return (\n    <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f] text-white', className)}>\n      {video && mobVideo ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={video?.url}\n            poster={image?.url}\n            className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={image?.url || mobImage?.url}\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image h-full w-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n        <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n  4: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-2 laptop:col-span-6',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-1 laptop:col-span-4',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    1: 'col-span-1 laptop:col-span-3',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-1 laptop:col-span-4',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-1 laptop:col-span-4',\n    6: 'col-span-2 laptop:col-span-6',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-1 laptop:col-span-3',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    6: 'col-span-1 laptop:col-span-3',\n    7: 'col-span-1 laptop:col-span-4',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-3',\n    1: 'col-span-1 laptop:col-span-3',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-4',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    6: 'col-span-1 laptop:col-span-3',\n    7: 'col-span-1 laptop:col-span-3',\n    8: 'col-span-2 laptop:col-span-4',\n  },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n  return LAYOUT_CONFIG[totalCount]?.[index] || ''\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n *\n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u652F\u6301 4-9 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n *\n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         image: '/desktop.jpg',\n *         mobImage: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 4-9 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n  const { title, items } = data\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n      <div className=\"ksp-layout grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-10 gap-3 laptop:gap-4\">\n        {items.map((item, index) => (\n          <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(Ksp)\n"],
+  "mappings": "AAoDQ,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBApDR,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBA8C3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,CAAU,IAE1Eb,EAAC,OAAI,UAAWI,EAAG,2EAA4ES,CAAS,EACrG,UAAAF,GAASC,EACRZ,EAAAF,EAAA,CACE,UAAAC,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKY,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,EACAV,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKa,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,IACRX,EAACG,EAAA,CACC,OAAQO,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,+BACV,aAAa,2CACf,EAGJV,EAAC,OAAI,UAAU,uIACb,UAAAD,EAACE,EAAA,CAAQ,KAAM,EAAG,KAAMM,EAAO,UAAU,4CAA4C,EACrFR,EAACE,EAAA,CAAQ,KAAM,EAAG,KAAMM,EAAO,UAAU,6DAA6D,EACtGR,EAACI,EAAA,CACC,KAAM,EACN,KAAMK,EACN,UAAU,mIACZ,GACF,GACF,EAQEM,EAAwD,CAC5D,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,gDACL,EACA,EAAG,CACD,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAN,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAa,CAAM,EAAID,EACzB,OACEnB,EAAC,WACC,uBAAqB,MACrB,UAAWI,EAAG,uFAAwFS,CAAS,EAE/G,UAAAd,EAACE,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMM,EAAO,UAAU,oDAAoD,EACrGR,EAAC,OAAI,UAAU,wFACZ,SAAAqB,EAAM,IAAI,CAACC,EAAML,IAChBjB,EAACO,EAAA,CAAuB,GAAGe,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOM,EAAQjB,EAAWa,CAAG",
+  "names": ["Fragment", "jsx", "jsxs", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "items", "item", "Ksp_default"]
 }

package/dist/esm/biz-components/Listing/BizProductProvider.d.ts CHANGED Viewed

@@ -111,9 +111,7 @@ export interface ProductContextType {
     openSignInPopup?: () => void;
     openAuthCodePopup?: () => void;
     openSignUpPopup?: () => void;
-    renderAffirm?: React.ReactNode;
-    renderKlarna?: React.ReactNode;
-    renderPaypal?: React.ReactNode;
+    renderInstallments?: React.ReactNode;
     onUseCouponChange?: (couponSaving: number) => void;
     onUseMemberDiscountChange?: (memberSaving: number) => void;
     discount?: DiscountData;
@@ -122,5 +120,5 @@ export interface ProductContextType {
 }
 export declare const BizProductContext: React.Context<ProductContextType>;
 export declare const useBizProductContext: () => ProductContextType;
-declare const ProductProvider: ({ product, isLogin, profile, isMobile, isDesktop, children, renderRating, freeGift, exchangePurchase, bundle, checkedBundle, checkedGift, setCheckedBundle, setCheckedGift, checkedExchangePurchase, setCheckedExchangePurchase, variant, selectedOptions, setSelectedOptions, compareData, coupon, finalPrice, comparePrice, totalSavings, savingDetail, setSavingDetail, selectedVariants, onAddToCart, onBuyNow, creditsRedemptionAmount, memberFunctionResult, openModal, openSignInPopup, openAuthCodePopup, openSignUpPopup, renderAffirm, renderKlarna, renderPaypal, onUseCouponChange, onUseMemberDiscountChange, discount, buyNowLoading, addToCartLoading, }: PropsWithChildren<Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts'>>) => import("react/jsx-runtime").JSX.Element;
+declare const ProductProvider: ({ product, isLogin, profile, isMobile, isDesktop, children, renderRating, freeGift, exchangePurchase, bundle, checkedBundle, checkedGift, setCheckedBundle, setCheckedGift, checkedExchangePurchase, setCheckedExchangePurchase, variant, selectedOptions, setSelectedOptions, compareData, coupon, finalPrice, comparePrice, totalSavings, savingDetail, setSavingDetail, selectedVariants, onAddToCart, onBuyNow, creditsRedemptionAmount, memberFunctionResult, openModal, openSignInPopup, openAuthCodePopup, openSignUpPopup, renderInstallments, onUseCouponChange, onUseMemberDiscountChange, discount, buyNowLoading, addToCartLoading, }: PropsWithChildren<Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts'>>) => import("react/jsx-runtime").JSX.Element;
 export default ProductProvider;

package/dist/esm/biz-components/Listing/BizProductProvider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as X}from"react/jsx-runtime";import{createContext as q,useContext as n,useState as H}from"react";const e=q({}),ee=()=>{if(!n(e))throw new Error("useProductContext must be used in <ProductProvider>");return n(e)},Q=({product:t,isLogin:o,profile:r,isMobile:a,isDesktop:i,children:c,renderRating:d,freeGift:u,exchangePurchase:s,bundle:p,checkedBundle:m,checkedGift:l,setCheckedBundle:P,setCheckedGift:b,checkedExchangePurchase:g,setCheckedExchangePurchase:h,variant:v,selectedOptions:y,setSelectedOptions:C,compareData:f,coupon:S,finalPrice:x,comparePrice:R,totalSavings:B,savingDetail:D,setSavingDetail:_,selectedVariants:k,onAddToCart:A,onBuyNow:V,creditsRedemptionAmount:O,memberFunctionResult:M,openModal:w,openSignInPopup:F,openAuthCodePopup:N,openSignUpPopup:T,renderAffirm:G,renderKlarna:J,renderPaypal:L,onUseCouponChange:I,onUseMemberDiscountChange:U,discount:W,buyNowLoading:j,addToCartLoading:z})=>{const[E,K]=H({bundle:{value:void 0,canOperate:!0},gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0}});return X(e.Provider,{value:{product:t,variant:v,isMobile:a,isDesktop:i,isLogin:o,profile:r,coupon:S,renderRating:d,finalPrice:x,comparePrice:R,savingDetail:D,setSavingDetail:_,totalSavings:B,selectedOptions:y,setSelectedOptions:C,freeGift:u,exchangePurchase:s,checkedGift:l,setCheckedGift:b,checkedBundle:m,setCheckedBundle:P,bundle:p,compareData:f,selectedVariants:k,onAddToCart:A,onBuyNow:V,joinedRecommendBuyProducts:E,setJoinedRecommendBuyProducts:K,checkedExchangePurchase:g,setCheckedExchangePurchase:h,creditsRedemptionAmount:O,memberFunctionResult:M,openModal:w,openSignInPopup:F,openAuthCodePopup:N,openSignUpPopup:T,renderAffirm:G,renderKlarna:J,renderPaypal:L,onUseCouponChange:I,onUseMemberDiscountChange:U,discount:W,buyNowLoading:j,addToCartLoading:z},children:c})};var te=Q;export{e as BizProductContext,te as default,ee as useBizProductContext};
+import{jsx as K}from"react/jsx-runtime";import{createContext as E,useContext as n,useState as q}from"react";const e=E({}),Z=()=>{if(!n(e))throw new Error("useProductContext must be used in <ProductProvider>");return n(e)},H=({product:t,isLogin:o,profile:r,isMobile:a,isDesktop:i,children:c,renderRating:d,freeGift:u,exchangePurchase:s,bundle:p,checkedBundle:m,checkedGift:l,setCheckedBundle:P,setCheckedGift:b,checkedExchangePurchase:g,setCheckedExchangePurchase:h,variant:v,selectedOptions:y,setSelectedOptions:C,compareData:f,coupon:S,finalPrice:x,comparePrice:B,totalSavings:D,savingDetail:R,setSavingDetail:_,selectedVariants:k,onAddToCart:V,onBuyNow:A,creditsRedemptionAmount:O,memberFunctionResult:M,openModal:w,openSignInPopup:F,openAuthCodePopup:T,openSignUpPopup:G,renderInstallments:J,onUseCouponChange:L,onUseMemberDiscountChange:I,discount:N,buyNowLoading:U,addToCartLoading:W})=>{const[j,z]=q({bundle:{value:void 0,canOperate:!0},gift:{value:void 0,canOperate:!0},exchange:{value:void 0,canOperate:!0}});return K(e.Provider,{value:{product:t,variant:v,isMobile:a,isDesktop:i,isLogin:o,profile:r,coupon:S,renderRating:d,finalPrice:x,comparePrice:B,savingDetail:R,setSavingDetail:_,totalSavings:D,selectedOptions:y,setSelectedOptions:C,freeGift:u,exchangePurchase:s,checkedGift:l,setCheckedGift:b,checkedBundle:m,setCheckedBundle:P,bundle:p,compareData:f,selectedVariants:k,onAddToCart:V,onBuyNow:A,joinedRecommendBuyProducts:j,setJoinedRecommendBuyProducts:z,checkedExchangePurchase:g,setCheckedExchangePurchase:h,creditsRedemptionAmount:O,memberFunctionResult:M,openModal:w,openSignInPopup:F,openAuthCodePopup:T,openSignUpPopup:G,renderInstallments:J,onUseCouponChange:L,onUseMemberDiscountChange:I,discount:N,buyNowLoading:U,addToCartLoading:W},children:c})};var $=H;export{e as BizProductContext,$ as default,Z as useBizProductContext};
 //# sourceMappingURL=BizProductProvider.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Listing/BizProductProvider.tsx"],
-  "sourcesContent": ["import React, {\n  createContext,\n  useCallback,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type PropsWithChildren,\n  useState,\n} from 'react'\nimport type {\n  Product,\n  ProductPrice,\n  ProductVariant,\n  VariantCoupon,\n  Options,\n  FreeGift,\n  BundleListItem,\n  Bundle,\n} from './types/product'\nimport type { CompareData, DiscountData } from './types.js'\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n\nexport type SavingDetail = {\n  coupon: number\n  bundle: number\n  member: number\n  freeGift: number\n  compare: number\n  exchangePurchase: number\n}\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\n\nexport type FunctionMemberPriceResult = {\n  hasMemberPrice: boolean\n  originalPrice: number\n  withCouponMemberTotalSave: number\n  withoutCouponMaxMemberTotalSave?: number\n  labels: {\n    key: string\n    value: string\n    desc: string\n  }[]\n}\n\nexport type ModalData = {\n  needClickAway?: boolean\n  className?: string\n  title?: string\n  content?: string\n  domContent?: React.ReactNode\n}\n\nexport type JoinedRecommendBuyProducts = {\n  bundle?: {\n    value?: BundleListItem\n    canOperate?: boolean\n  }\n  gift?: {\n    value?: ProductVariant\n    canOperate?: boolean\n  }\n  exchange?: {\n    value?: ProductVariant\n    canOperate?: boolean\n  }\n}\nexport interface ProductContextType {\n  isLogin?: boolean\n  isMobile?: boolean\n  isDesktop?: boolean\n  product: Product\n  profile?: UserProfile\n  variant: ProductVariant\n  selectedVariants: Array<variantWithFinalPrice>\n  renderRating?: React.ReactNode\n  coupon?: VariantCoupon\n  savingDetail: SavingDetail\n  setSavingDetail: Dispatch<SetStateAction<SavingDetail>>\n  finalPrice: number\n  comparePrice: number\n  totalSavings: number\n  selectedOptions: Options\n  setSelectedOptions: Dispatch<SetStateAction<Options>>\n  freeGift?: FreeGift\n  checkedGift?: ProductVariant\n  setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  exchangePurchase?: FreeGift\n  checkedExchangePurchase?: ProductVariant\n  setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  checkedBundle?: BundleListItem\n  setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n  joinedRecommendBuyProducts: JoinedRecommendBuyProducts\n  setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<JoinedRecommendBuyProducts>>\n  checkedCareBundle?: ProductVariant\n  setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  bundle?: Bundle\n  compareData?: CompareData['data']\n  onAddToCart?: () => void\n  onBuyNow?: () => void\n  creditsRedemptionAmount?: number\n  memberFunctionResult?: FunctionMemberPriceResult\n  openModal: ({ title, content, domContent }: ModalData) => void\n  openSignInPopup?: () => void\n  openAuthCodePopup?: () => void\n  openSignUpPopup?: () => void\n  renderAffirm?: React.ReactNode\n  renderKlarna?: React.ReactNode\n  renderPaypal?: React.ReactNode\n  onUseCouponChange?: (couponSaving: number) => void\n  onUseMemberDiscountChange?: (memberSaving: number) => void\n  discount?: DiscountData\n  buyNowLoading?: boolean\n  addToCartLoading?: boolean\n}\n\n// const initialState: ProductContextType = {\n//   isLogin: false,\n//   isMobile: false,\n//   product: {} as Product,\n//   variant: {} as ProductVariant,\n//   savingDetail: { coupon: 0, bundle: 0, member: 0, freeGift: 0, compare: 0 },\n//   finalPrice: 0,\n//   comparePrice: 0,\n//   totalSavings: 0,\n//   renderRating: null,\n//   selectedOptions: {} as Options,\n//   setSelectedOptions: () => {},\n//   checkedBundle: undefined,\n//   checkedGift: undefined,\n//   setCheckedBundle: () => {},\n//   setCheckedGift: () => {},\n//   checkedCareBundle: undefined,\n//   setCheckedCareBundle: () => {},\n// }\n\nexport const BizProductContext = createContext<ProductContextType>({} as ProductContextType)\n\nexport const useBizProductContext = () => {\n  const context = useContext(BizProductContext)\n  if (!context) {\n    throw new Error('useProductContext must be used in <ProductProvider>')\n  }\n  return useContext(BizProductContext)\n}\n\nconst ProductProvider = ({\n  product,\n  isLogin,\n  profile,\n  isMobile,\n  isDesktop,\n  children,\n  renderRating,\n  freeGift,\n  exchangePurchase,\n  bundle,\n  checkedBundle,\n  checkedGift,\n  setCheckedBundle,\n  setCheckedGift,\n  checkedExchangePurchase,\n  setCheckedExchangePurchase,\n  variant,\n  selectedOptions,\n  setSelectedOptions,\n  compareData,\n  coupon,\n  finalPrice,\n  comparePrice,\n  totalSavings,\n  savingDetail,\n  setSavingDetail,\n  selectedVariants,\n  onAddToCart,\n  onBuyNow,\n  creditsRedemptionAmount,\n  memberFunctionResult,\n  openModal,\n  openSignInPopup,\n  openAuthCodePopup,\n  openSignUpPopup,\n  renderAffirm,\n  renderKlarna,\n  renderPaypal,\n  onUseCouponChange,\n  onUseMemberDiscountChange,\n  discount,\n  buyNowLoading,\n  addToCartLoading,\n}: PropsWithChildren<Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts'>>) => {\n  const [joinedRecommendBuyProducts, setJoinedRecommendBuyProducts] = useState<JoinedRecommendBuyProducts>({\n    bundle: {\n      value: undefined,\n      canOperate: true,\n    },\n    gift: {\n      value: undefined,\n      canOperate: true,\n    },\n    exchange: {\n      value: undefined,\n      canOperate: true,\n    },\n  })\n\n  return (\n    <BizProductContext.Provider\n      value={{\n        product,\n        variant,\n        isMobile,\n        isDesktop,\n        isLogin,\n        profile,\n        coupon,\n        renderRating,\n        finalPrice,\n        comparePrice,\n        savingDetail,\n        setSavingDetail,\n        totalSavings,\n        selectedOptions,\n        setSelectedOptions,\n        freeGift,\n        exchangePurchase,\n        checkedGift,\n        setCheckedGift,\n        checkedBundle,\n        setCheckedBundle,\n        bundle,\n        compareData,\n        selectedVariants,\n        onAddToCart,\n        onBuyNow,\n        joinedRecommendBuyProducts,\n        setJoinedRecommendBuyProducts,\n        checkedExchangePurchase,\n        setCheckedExchangePurchase,\n        creditsRedemptionAmount,\n        memberFunctionResult,\n        openModal,\n        openSignInPopup,\n        openAuthCodePopup,\n        openSignUpPopup,\n        renderAffirm,\n        renderKlarna,\n        renderPaypal,\n        onUseCouponChange,\n        onUseMemberDiscountChange,\n        discount,\n        buyNowLoading,\n        addToCartLoading,\n      }}\n    >\n      {children}\n    </BizProductContext.Provider>\n  )\n}\n\nexport default ProductProvider\n"],
-  "mappings": "AA4OI,cAAAA,MAAA,oBA5OJ,OACE,iBAAAC,EAEA,cAAAC,EAIA,YAAAC,MACK,QA6JA,MAAMC,EAAoBH,EAAkC,CAAC,CAAuB,EAE9EI,GAAuB,IAAM,CAExC,GAAI,CADYH,EAAWE,CAAiB,EAE1C,MAAM,IAAI,MAAM,qDAAqD,EAEvE,OAAOF,EAAWE,CAAiB,CACrC,EAEME,EAAkB,CAAC,CACvB,QAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,wBAAAC,EACA,2BAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,wBAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,IAAmH,CACjH,KAAM,CAACC,EAA4BC,CAA6B,EAAIhD,EAAqC,CACvG,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,KAAM,CACJ,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAED,OACEH,EAACI,EAAkB,SAAlB,CACC,MAAO,CACL,QAAAG,EACA,QAAAgB,EACA,SAAAb,EACA,UAAAC,EACA,QAAAH,EACA,QAAAC,EACA,OAAAkB,EACA,aAAAd,EACA,WAAAe,EACA,aAAAC,EACA,aAAAE,EACA,gBAAAC,EACA,aAAAF,EACA,gBAAAN,EACA,mBAAAC,EACA,SAAAX,EACA,iBAAAC,EACA,YAAAG,EACA,eAAAE,EACA,cAAAH,EACA,iBAAAE,EACA,OAAAH,EACA,YAAAU,EACA,iBAAAO,EACA,YAAAC,EACA,SAAAC,EACA,2BAAAe,EACA,8BAAAC,EACA,wBAAA9B,EACA,2BAAAC,EACA,wBAAAc,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAEC,SAAArC,EACH,CAEJ,EAEA,IAAOwC,GAAQ9C",
-  "names": ["jsx", "createContext", "useContext", "useState", "BizProductContext", "useBizProductContext", "ProductProvider", "product", "isLogin", "profile", "isMobile", "isDesktop", "children", "renderRating", "freeGift", "exchangePurchase", "bundle", "checkedBundle", "checkedGift", "setCheckedBundle", "setCheckedGift", "checkedExchangePurchase", "setCheckedExchangePurchase", "variant", "selectedOptions", "setSelectedOptions", "compareData", "coupon", "finalPrice", "comparePrice", "totalSavings", "savingDetail", "setSavingDetail", "selectedVariants", "onAddToCart", "onBuyNow", "creditsRedemptionAmount", "memberFunctionResult", "openModal", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "renderAffirm", "renderKlarna", "renderPaypal", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "buyNowLoading", "addToCartLoading", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "BizProductProvider_default"]
+  "sourcesContent": ["import React, {\n  createContext,\n  useCallback,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type PropsWithChildren,\n  useState,\n} from 'react'\nimport type {\n  Product,\n  ProductPrice,\n  ProductVariant,\n  VariantCoupon,\n  Options,\n  FreeGift,\n  BundleListItem,\n  Bundle,\n} from './types/product'\nimport type { CompareData, DiscountData } from './types.js'\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n\nexport type SavingDetail = {\n  coupon: number\n  bundle: number\n  member: number\n  freeGift: number\n  compare: number\n  exchangePurchase: number\n}\n\ntype variantWithFinalPrice = ProductVariant & { finalPrice?: ProductPrice }\n\nexport type FunctionMemberPriceResult = {\n  hasMemberPrice: boolean\n  originalPrice: number\n  withCouponMemberTotalSave: number\n  withoutCouponMaxMemberTotalSave?: number\n  labels: {\n    key: string\n    value: string\n    desc: string\n  }[]\n}\n\nexport type ModalData = {\n  needClickAway?: boolean\n  className?: string\n  title?: string\n  content?: string\n  domContent?: React.ReactNode\n}\n\nexport type JoinedRecommendBuyProducts = {\n  bundle?: {\n    value?: BundleListItem\n    canOperate?: boolean\n  }\n  gift?: {\n    value?: ProductVariant\n    canOperate?: boolean\n  }\n  exchange?: {\n    value?: ProductVariant\n    canOperate?: boolean\n  }\n}\nexport interface ProductContextType {\n  isLogin?: boolean\n  isMobile?: boolean\n  isDesktop?: boolean\n  product: Product\n  profile?: UserProfile\n  variant: ProductVariant\n  selectedVariants: Array<variantWithFinalPrice>\n  renderRating?: React.ReactNode\n  coupon?: VariantCoupon\n  savingDetail: SavingDetail\n  setSavingDetail: Dispatch<SetStateAction<SavingDetail>>\n  finalPrice: number\n  comparePrice: number\n  totalSavings: number\n  selectedOptions: Options\n  setSelectedOptions: Dispatch<SetStateAction<Options>>\n  freeGift?: FreeGift\n  checkedGift?: ProductVariant\n  setCheckedGift?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  exchangePurchase?: FreeGift\n  checkedExchangePurchase?: ProductVariant\n  setCheckedExchangePurchase?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  checkedBundle?: BundleListItem\n  setCheckedBundle: Dispatch<SetStateAction<BundleListItem | undefined>>\n  joinedRecommendBuyProducts: JoinedRecommendBuyProducts\n  setJoinedRecommendBuyProducts?: Dispatch<SetStateAction<JoinedRecommendBuyProducts>>\n  checkedCareBundle?: ProductVariant\n  setCheckedCareBundle?: Dispatch<SetStateAction<ProductVariant | undefined>>\n  bundle?: Bundle\n  compareData?: CompareData['data']\n  onAddToCart?: () => void\n  onBuyNow?: () => void\n  creditsRedemptionAmount?: number\n  memberFunctionResult?: FunctionMemberPriceResult\n  openModal: ({ title, content, domContent }: ModalData) => void\n  openSignInPopup?: () => void\n  openAuthCodePopup?: () => void\n  openSignUpPopup?: () => void\n  renderInstallments?: React.ReactNode\n  onUseCouponChange?: (couponSaving: number) => void\n  onUseMemberDiscountChange?: (memberSaving: number) => void\n  discount?: DiscountData\n  buyNowLoading?: boolean\n  addToCartLoading?: boolean\n}\n\n// const initialState: ProductContextType = {\n//   isLogin: false,\n//   isMobile: false,\n//   product: {} as Product,\n//   variant: {} as ProductVariant,\n//   savingDetail: { coupon: 0, bundle: 0, member: 0, freeGift: 0, compare: 0 },\n//   finalPrice: 0,\n//   comparePrice: 0,\n//   totalSavings: 0,\n//   renderRating: null,\n//   selectedOptions: {} as Options,\n//   setSelectedOptions: () => {},\n//   checkedBundle: undefined,\n//   checkedGift: undefined,\n//   setCheckedBundle: () => {},\n//   setCheckedGift: () => {},\n//   checkedCareBundle: undefined,\n//   setCheckedCareBundle: () => {},\n// }\n\nexport const BizProductContext = createContext<ProductContextType>({} as ProductContextType)\n\nexport const useBizProductContext = () => {\n  const context = useContext(BizProductContext)\n  if (!context) {\n    throw new Error('useProductContext must be used in <ProductProvider>')\n  }\n  return useContext(BizProductContext)\n}\n\nconst ProductProvider = ({\n  product,\n  isLogin,\n  profile,\n  isMobile,\n  isDesktop,\n  children,\n  renderRating,\n  freeGift,\n  exchangePurchase,\n  bundle,\n  checkedBundle,\n  checkedGift,\n  setCheckedBundle,\n  setCheckedGift,\n  checkedExchangePurchase,\n  setCheckedExchangePurchase,\n  variant,\n  selectedOptions,\n  setSelectedOptions,\n  compareData,\n  coupon,\n  finalPrice,\n  comparePrice,\n  totalSavings,\n  savingDetail,\n  setSavingDetail,\n  selectedVariants,\n  onAddToCart,\n  onBuyNow,\n  creditsRedemptionAmount,\n  memberFunctionResult,\n  openModal,\n  openSignInPopup,\n  openAuthCodePopup,\n  openSignUpPopup,\n  renderInstallments,\n  onUseCouponChange,\n  onUseMemberDiscountChange,\n  discount,\n  buyNowLoading,\n  addToCartLoading,\n}: PropsWithChildren<Omit<ProductContextType, 'joinedRecommendBuyProducts' | 'setJoinedRecommendBuyProducts'>>) => {\n  const [joinedRecommendBuyProducts, setJoinedRecommendBuyProducts] = useState<JoinedRecommendBuyProducts>({\n    bundle: {\n      value: undefined,\n      canOperate: true,\n    },\n    gift: {\n      value: undefined,\n      canOperate: true,\n    },\n    exchange: {\n      value: undefined,\n      canOperate: true,\n    },\n  })\n\n  return (\n    <BizProductContext.Provider\n      value={{\n        product,\n        variant,\n        isMobile,\n        isDesktop,\n        isLogin,\n        profile,\n        coupon,\n        renderRating,\n        finalPrice,\n        comparePrice,\n        savingDetail,\n        setSavingDetail,\n        totalSavings,\n        selectedOptions,\n        setSelectedOptions,\n        freeGift,\n        exchangePurchase,\n        checkedGift,\n        setCheckedGift,\n        checkedBundle,\n        setCheckedBundle,\n        bundle,\n        compareData,\n        selectedVariants,\n        onAddToCart,\n        onBuyNow,\n        joinedRecommendBuyProducts,\n        setJoinedRecommendBuyProducts,\n        checkedExchangePurchase,\n        setCheckedExchangePurchase,\n        creditsRedemptionAmount,\n        memberFunctionResult,\n        openModal,\n        openSignInPopup,\n        openAuthCodePopup,\n        openSignUpPopup,\n        renderInstallments,\n        onUseCouponChange,\n        onUseMemberDiscountChange,\n        discount,\n        buyNowLoading,\n        addToCartLoading,\n      }}\n    >\n      {children}\n    </BizProductContext.Provider>\n  )\n}\n\nexport default ProductProvider\n"],
+  "mappings": "AAwOI,cAAAA,MAAA,oBAxOJ,OACE,iBAAAC,EAEA,cAAAC,EAIA,YAAAC,MACK,QA2JA,MAAMC,EAAoBH,EAAkC,CAAC,CAAuB,EAE9EI,EAAuB,IAAM,CAExC,GAAI,CADYH,EAAWE,CAAiB,EAE1C,MAAM,IAAI,MAAM,qDAAqD,EAEvE,OAAOF,EAAWE,CAAiB,CACrC,EAEME,EAAkB,CAAC,CACvB,QAAAC,EACA,QAAAC,EACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,wBAAAC,EACA,2BAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,OAAAC,EACA,WAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,wBAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,IAAmH,CACjH,KAAM,CAACC,EAA4BC,CAA6B,EAAI9C,EAAqC,CACvG,OAAQ,CACN,MAAO,OACP,WAAY,EACd,EACA,KAAM,CACJ,MAAO,OACP,WAAY,EACd,EACA,SAAU,CACR,MAAO,OACP,WAAY,EACd,CACF,CAAC,EAED,OACEH,EAACI,EAAkB,SAAlB,CACC,MAAO,CACL,QAAAG,EACA,QAAAgB,EACA,SAAAb,EACA,UAAAC,EACA,QAAAH,EACA,QAAAC,EACA,OAAAkB,EACA,aAAAd,EACA,WAAAe,EACA,aAAAC,EACA,aAAAE,EACA,gBAAAC,EACA,aAAAF,EACA,gBAAAN,EACA,mBAAAC,EACA,SAAAX,EACA,iBAAAC,EACA,YAAAG,EACA,eAAAE,EACA,cAAAH,EACA,iBAAAE,EACA,OAAAH,EACA,YAAAU,EACA,iBAAAO,EACA,YAAAC,EACA,SAAAC,EACA,2BAAAa,EACA,8BAAAC,EACA,wBAAA5B,EACA,2BAAAC,EACA,wBAAAc,EACA,qBAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,kBAAAC,EACA,0BAAAC,EACA,SAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAEC,SAAAnC,EACH,CAEJ,EAEA,IAAOsC,EAAQ5C",
+  "names": ["jsx", "createContext", "useContext", "useState", "BizProductContext", "useBizProductContext", "ProductProvider", "product", "isLogin", "profile", "isMobile", "isDesktop", "children", "renderRating", "freeGift", "exchangePurchase", "bundle", "checkedBundle", "checkedGift", "setCheckedBundle", "setCheckedGift", "checkedExchangePurchase", "setCheckedExchangePurchase", "variant", "selectedOptions", "setSelectedOptions", "compareData", "coupon", "finalPrice", "comparePrice", "totalSavings", "savingDetail", "setSavingDetail", "selectedVariants", "onAddToCart", "onBuyNow", "creditsRedemptionAmount", "memberFunctionResult", "openModal", "openSignInPopup", "openAuthCodePopup", "openSignUpPopup", "renderInstallments", "onUseCouponChange", "onUseMemberDiscountChange", "discount", "buyNowLoading", "addToCartLoading", "joinedRecommendBuyProducts", "setJoinedRecommendBuyProducts", "BizProductProvider_default"]
 }