@anker-in/headless-ui 1.3.37 → 1.3.39

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 (20) hide show
  1. package/dist/cjs/biz-components/FeaturedBlogPosts/index.js +1 -1
  2. package/dist/cjs/biz-components/FeaturedBlogPosts/index.js.map +2 -2
  3. package/dist/cjs/biz-components/Ksp/index.d.ts +2 -0
  4. package/dist/cjs/biz-components/Ksp/index.js +1 -1
  5. package/dist/cjs/biz-components/Ksp/index.js.map +3 -3
  6. package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
  7. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  8. package/dist/cjs/components/tabs.js +1 -1
  9. package/dist/cjs/components/tabs.js.map +2 -2
  10. package/dist/esm/biz-components/FeaturedBlogPosts/index.js +1 -1
  11. package/dist/esm/biz-components/FeaturedBlogPosts/index.js.map +2 -2
  12. package/dist/esm/biz-components/Ksp/index.d.ts +2 -0
  13. package/dist/esm/biz-components/Ksp/index.js +1 -1
  14. package/dist/esm/biz-components/Ksp/index.js.map +3 -3
  15. package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
  16. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  17. package/dist/esm/components/tabs.js +1 -1
  18. package/dist/esm/components/tabs.js.map +2 -2
  19. package/package.json +1 -1
  20. package/style.css +63 -0
package/dist/cjs/biz-components/FeaturedBlogPosts/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var B=Object.create;var n=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},h=(e,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of w(t))!C.call(e,p)&&p!==r&&n(e,p,{get:()=>t[p],enumerable:!(l=I(t,p))||l.enumerable});return e};var k=(e,t,r)=>(r=e!=null?B(R(e)):{},h(t||!e||!e.__esModule?n(r,"default",{value:e,enumerable:!0}):r,e)),M=e=>h(n({},"__esModule",{value:!0}),e);var j={};S(j,{default:()=>H});module.exports=M(j);var a=require("react/jsx-runtime"),m=k(require("react")),s=require("../../helpers/index.js"),b=k(require("../../components/picture.js")),i=require("../../index.js"),v=require("../../shared/Styles.js");const D=e=>{const t=[{key:"lgDesktop",width:1920},{key:"desktop",width:1440},{key:"laptop",width:1024},{key:"pad",width:768},{key:"mobile",width:390}],r=t.filter(({key:l})=>e[l]?.url).map(({key:l,width:p})=>`${e[l].url} ${p}`);if(r.length>0)return r.join(", ");for(const{key:l}of t)if(e[l]?.url)return e[l].url;return""},N=(e,t)=>{const r=["desktop","laptop","pad","mobile","lgDesktop"];for(const l of r)if(e[l]?.alt)return e[l].alt;return t},z=(e="full")=>({full:"laptop:col-span-3","2/3":"laptop:col-span-2","1/3":"laptop:col-span-1"})[e],T=(e="full")=>e==="1/3"?"":"laptop:flex-row",L=(e="full")=>({full:"laptop:h-full laptop:w-2/3","2/3":"laptop:h-full laptop:w-1/2","1/3":"laptop:flex-1 h-[200px] lg-desktop:h-[240px]"})[e],x=m.forwardRef(({className:e,classNames:t={},data:r,onItemClick:l,...p},y)=>{const{title:g,subtitle:c,items:f}=r,P=m.useCallback((o,d)=>u=>{l?.(o,d,u)},[l]);return(0,a.jsxs)("div",{ref:y,className:(0,s.cn)("blog-posts-root","text-info-primary w-full",e,t.root),...p,children:[(g||c)&&(0,a.jsxs)("div",{className:(0,s.cn)("blog-posts-header mb-6",t.header),children:[g&&(0,a.jsx)(i.Heading,{as:"h2",size:4,html:g,className:(0,s.cn)("blog-posts-title",t.title)}),c&&(0,a.jsx)(i.Text,{as:"p",size:3,className:(0,s.cn)("",t?.subtitle),html:c})]}),(0,a.jsx)("div",{className:(0,s.cn)("blog-posts-grid","laptop:grid-cols-3 grid grid-cols-1 gap-4",t.grid),children:f.map((o,d)=>{const u=o.link?"a":"div",F=o.link?{href:o.link}:{};return(0,a.jsxs)(m.Fragment,{children:[(0,a.jsxs)(u,{...F,className:(0,s.cn)("blog-posts-card rounded-box","flex cursor-pointer flex-col gap-4","laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]","laptop:bg-container-secondary-0 laptop:p-4 desktop:p-6 lg-desktop:p-8","laptop:overflow-hidden laptop:transition-opacity ","bg-container-secondary-1",z(o.width||"full"),T(o.width||"full"),t.card),onClick:P(o,d),children:[(0,a.jsx)("div",{className:(0,s.cn)("blog-posts-card-image","relative w-full overflow-hidden","h-[200px] shrink-0",L(o.width||"full"),t.cardImage),children:(0,a.jsx)(b.default,{source:D(o.image),alt:N(o.image,o.title),className:"rounded-box h-full object-cover",imgClassName:"h-full"})}),(0,a.jsxs)("div",{className:(0,s.cn)("blog-posts-card-content","desktop:gap-6 flex flex-col justify-center gap-4",t.cardContent),children:[(0,a.jsxs)("div",{className:"desktop:gap-2 flex flex-col gap-1",children:[(0,a.jsx)(i.Heading,{size:2,as:"h6",className:(0,s.cn)("blog-posts-card-title line-clamp-3",t.cardTitle),html:o.title}),o.description&&(0,a.jsx)(i.Text,{className:(0,s.cn)("blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]",t.cardDescription),html:o.description})]}),o.date&&(0,a.jsx)(i.Text,{className:(0,s.cn)("blog-posts-card-meta","text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",t.cardMeta),html:o.date})]})]}),d<f.length-1&&(0,a.jsx)("div",{className:(0,s.cn)("blog-posts-separator","bg-lines-primary laptop:hidden h-px w-full",t.separator)})]},d)})})]})});x.displayName="FeaturedBlogPosts";const E=(0,v.withLayout)(x);var H=E;
1
+ "use strict";"use client";var F=Object.create;var n=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var s in t)n(e,s,{get:t[s],enumerable:!0})},k=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of I(t))!C.call(e,r)&&r!==s&&n(e,r,{get:()=>t[r],enumerable:!(p=B(t,r))||p.enumerable});return e};var b=(e,t,s)=>(s=e!=null?F(R(e)):{},k(t||!e||!e.__esModule?n(s,"default",{value:e,enumerable:!0}):s,e)),M=e=>k(n({},"__esModule",{value:!0}),e);var H={};S(H,{default:()=>E});module.exports=M(H);var a=require("react/jsx-runtime"),m=b(require("react")),l=require("../../helpers/index.js"),x=b(require("../../components/picture.js")),i=require("../../index.js"),v=require("../../shared/Styles.js");const D=e=>{const t=[{key:"lgDesktop",width:1920},{key:"desktop",width:1440},{key:"laptop",width:1024},{key:"pad",width:768},{key:"mobile",width:390}],s=t.filter(({key:p})=>e[p]?.url).map(({key:p,width:r})=>`${e[p].url} ${r}`);if(s.length>0)return s.join(", ");for(const{key:p}of t)if(e[p]?.url)return e[p].url;return""},N=(e,t)=>{const s=["desktop","laptop","pad","mobile","lgDesktop"];for(const p of s)if(e[p]?.alt)return e[p].alt;return t},z=(e="full")=>({full:"laptop:col-span-3","2/3":"laptop:col-span-2","1/3":"laptop:col-span-1"})[e],T=(e="full")=>e==="1/3"?"":"laptop:flex-row",j=(e="full")=>({full:"laptop:w-2/3 aspect-[356/200] tablet:aspect-[704/200] laptop:aspect-[2/1] desktop:aspect-[19/9] lg-desktop:aspect-[7/3]","2/3":"laptop:w-1/2 aspect-[356/200] tablet:aspect-[704/200] laptop:aspect-[1/1] desktop:aspect-[16/15] lg-desktop:aspect-[8/7]","1/3":"laptop:flex-1 aspect-[356/200] tablet:aspect-[704/200] laptop:aspect-[256/153] desktop:aspect-[379/192] lg-desktop:aspect-[480/248]"})[e],h=m.forwardRef(({className:e,classNames:t={},data:s,onItemClick:p,...r},y)=>{const{title:c,subtitle:g,items:f}=s,P=m.useCallback((o,d)=>u=>{p?.(o,d,u)},[p]);return(0,a.jsxs)("div",{ref:y,className:(0,l.cn)("blog-posts-root","text-info-primary w-full",e,t.root),...r,children:[(c||g)&&(0,a.jsxs)("div",{className:(0,l.cn)("blog-posts-header mb-6",t.header),children:[c&&(0,a.jsx)(i.Heading,{as:"h2",size:4,html:c,className:(0,l.cn)("blog-posts-title",t.title)}),g&&(0,a.jsx)(i.Text,{as:"p",size:3,className:(0,l.cn)("",t?.subtitle),html:g})]}),(0,a.jsx)("div",{className:(0,l.cn)("blog-posts-grid","laptop:grid-cols-3 grid grid-cols-1 gap-4",t.grid),children:f.map((o,d)=>{const u=o.link?"a":"div",w=o.link?{href:o.link}:{};return(0,a.jsxs)(m.Fragment,{children:[(0,a.jsxs)(u,{...w,className:(0,l.cn)("blog-posts-card rounded-box","flex cursor-pointer flex-col gap-4","laptop:bg-container-secondary-0 laptop:p-4 desktop:p-6 lg-desktop:p-8","laptop:overflow-hidden laptop:transition-opacity ","bg-container-secondary-1",z(o.width||"full"),T(o.width||"full"),t.card),onClick:P(o,d),children:[(0,a.jsx)("div",{className:(0,l.cn)("blog-posts-card-image","relative w-full overflow-hidden","laptop:min-h-0 min-h-[200px] shrink-0",j(o.width||"full"),t.cardImage),children:(0,a.jsx)(x.default,{source:D(o.image),alt:N(o.image,o.title),className:"rounded-t-box h-full object-cover",imgClassName:o.width==="1/3"?"h-auto object-cover":"w-full laptop:h-full laptop:w-[unset] object-cover"})}),(0,a.jsxs)("div",{className:(0,l.cn)("blog-posts-card-content","desktop:gap-6 flex flex-col justify-center gap-4",t.cardContent),children:[(0,a.jsxs)("div",{className:"desktop:gap-2 flex flex-col gap-1",children:[(0,a.jsx)(i.Heading,{size:2,as:"h6",className:(0,l.cn)("blog-posts-card-title line-clamp-3",t.cardTitle),html:o.title}),o.description&&(0,a.jsx)(i.Text,{className:(0,l.cn)("blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]",t.cardDescription),html:o.description})]}),o.date&&(0,a.jsx)(i.Text,{className:(0,l.cn)("blog-posts-card-meta","text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",t.cardMeta),html:o.date})]})]}),d<f.length-1&&(0,a.jsx)("div",{className:(0,l.cn)("blog-posts-separator","bg-lines-primary laptop:hidden h-px w-full",t.separator)})]},d)})})]})});h.displayName="FeaturedBlogPosts";const L=(0,v.withLayout)(h);var E=L;
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/FeaturedBlogPosts/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/FeaturedBlogPosts/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading, Text } from '../../index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport type FeaturedBlogPostsSemanticName =\n | 'root'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'grid'\n | 'card'\n | 'cardImage'\n | 'cardContent'\n | 'cardTitle'\n | 'cardDescription'\n | 'cardMeta'\n | 'separator'\n\n/**\n * \u5361\u7247\u5BBD\u5EA6\u6BD4\u4F8B\n */\nexport type FeaturedBlogPostSpan = 'full' | '2/3' | '1/3'\n\n/**\n * \u535A\u6587\u5361\u7247\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface FeaturedBlogPostItem {\n /** \u5C01\u9762\u56FE\u7247 */\n image: {\n mobile?: Img\n pad?: Img\n laptop?: Img\n desktop?: Img\n lgDesktop?: Img\n }\n /** \u6587\u7AE0\u6807\u9898 */\n title: string\n /** \u6587\u7AE0\u63CF\u8FF0 */\n description?: string\n /** \u65E5\u671F\u4FE1\u606F\uFF08\u5206\u7C7B\u00B7\u65E5\u671F\u00B7\u4F5C\u8005\uFF09 */\n date?: string\n /** \u6587\u7AE0\u94FE\u63A5 */\n link?: string\n /** \u5361\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF0C\u9ED8\u8BA4 full */\n width?: FeaturedBlogPostSpan\n}\n\n/**\n * FeaturedBlogPosts \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface FeaturedBlogPostsData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u535A\u6587\u5217\u8868 */\n items: FeaturedBlogPostItem[]\n}\n\nexport interface FeaturedBlogPostsProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: FeaturedBlogPostsData\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<Record<FeaturedBlogPostsSemanticName, string>>\n /** \u5361\u7247\u70B9\u51FB\u56DE\u8C03 */\n onItemClick?: (item: FeaturedBlogPostItem, index: number, event: React.MouseEvent) => void\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u7C7B\u578B\n */\ntype ResponsiveImage = FeaturedBlogPostItem['image']\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61\u8F6C\u4E3A Picture source \u683C\u5F0F\u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 1920, url2 1440, url3 1024, url4 768, url5 390\"\n */\nconst getImageSource = (image: ResponsiveImage): string => {\n const breakpoints: { key: keyof ResponsiveImage; width: number }[] = [\n { key: 'lgDesktop', width: 1920 },\n { key: 'desktop', width: 1440 },\n { key: 'laptop', width: 1024 },\n { key: 'pad', width: 768 },\n { key: 'mobile', width: 390 },\n ]\n\n const sources = breakpoints\n .filter(({ key }) => image[key]?.url)\n .map(({ key, width }) => `${image[key]!.url} ${width}`)\n\n // \u5982\u679C\u6709 sources\uFF0C\u8FD4\u56DE\u62FC\u63A5\u7ED3\u679C\uFF1B\u5426\u5219\u8FD4\u56DE\u7B2C\u4E00\u4E2A\u6709\u6548\u7684 url\n if (sources.length > 0) {\n return sources.join(', ')\n }\n\n // fallback: \u8FD4\u56DE\u4EFB\u610F\u4E00\u4E2A\u6709\u6548\u7684 url\n for (const { key } of breakpoints) {\n if (image[key]?.url) return image[key]!.url\n }\n\n return ''\n}\n\n/**\n * \u4ECE\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61\u83B7\u53D6 alt \u6587\u672C\n */\nconst getImageAlt = (image: ResponsiveImage, fallback: string): string => {\n const keys: (keyof ResponsiveImage)[] = ['desktop', 'laptop', 'pad', 'mobile', 'lgDesktop']\n for (const key of keys) {\n if (image[key]?.alt) return image[key]!.alt!\n }\n return fallback\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u5361\u7247 grid \u5217\u6570 (laptop+)\n */\nconst getSpanClass = (span: FeaturedBlogPostSpan = 'full') => {\n const spanMap: Record<FeaturedBlogPostSpan, string> = {\n full: 'laptop:col-span-3',\n '2/3': 'laptop:col-span-2',\n '1/3': 'laptop:col-span-1',\n }\n return spanMap[span]\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u5361\u7247\u5E03\u5C40\u65B9\u5411 (laptop+)\n * 1/3: \u4E0A\u4E0B\u5E03\u5C40\uFF0C\u5176\u4ED6: \u5DE6\u53F3\u5E03\u5C40\n */\nconst getLayoutClass = (span: FeaturedBlogPostSpan = 'full') => {\n return span === '1/3' ? '' : 'laptop:flex-row'\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u56FE\u7247\u5C3A\u5BF8\u6837\u5F0F (laptop+)\n * full: \u5DE6\u53F3\u5E03\u5C40\uFF0C\u56FE\u7247\u5BBD\u5EA6\u5360 2/3\n * 2/3: \u5DE6\u53F3\u5E03\u5C40\uFF0C\u56FE\u7247\u5BBD\u5EA6\u5360 1/2\n * 1/3: \u4E0A\u4E0B\u5E03\u5C40\uFF0C\u56FE\u7247\u9AD8\u5EA6\u586B\u6EE1\u5269\u4F59\u7A7A\u95F4\n */\nconst getImageSizeClass = (span: FeaturedBlogPostSpan = 'full') => {\n const sizeMap: Record<FeaturedBlogPostSpan, string> = {\n full: 'laptop:h-full laptop:w-2/3',\n '2/3': 'laptop:h-full laptop:w-1/2',\n '1/3': 'laptop:flex-1 h-[200px] lg-desktop:h-[240px]',\n }\n return sizeMap[span]\n}\n\n/**\n * FeaturedBlogPosts - \u7CBE\u9009\u535A\u6587\n *\n * @description \u5C55\u793A\u7ECF\u8FC7\u7B5B\u9009\u7684\u4F18\u8D28\u6587\u7AE0\uFF0C\u652F\u6301\u4E0D\u540C\u5BBD\u5EA6\u548C\u5E03\u5C40\u7684\u5361\u7247\u7EC4\u5408\n */\nconst FeaturedBlogPostsBase = React.forwardRef<HTMLDivElement, FeaturedBlogPostsProps>(\n ({ className, classNames = {}, data, onItemClick, ...props }, ref) => {\n const { title, subtitle, items } = data\n\n const handleCardClick = React.useCallback(\n (item: FeaturedBlogPostItem, index: number) => (event: React.MouseEvent) => {\n onItemClick?.(item, index, event)\n },\n [onItemClick]\n )\n\n return (\n <div\n ref={ref}\n className={cn('blog-posts-root', 'text-info-primary w-full', className, classNames.root)}\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {(title || subtitle) && (\n <div className={cn('blog-posts-header mb-6', classNames.header)}>\n {title && <Heading as=\"h2\" size={4} html={title} className={cn('blog-posts-title', classNames.title)} />}\n {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n </div>\n )}\n <div className={cn('blog-posts-grid', 'laptop:grid-cols-3 grid grid-cols-1 gap-4', classNames.grid)}>\n {items.map((item, index) => {\n const CardWrapper = item.link ? 'a' : 'div'\n const cardProps = item.link ? { href: item.link } : {}\n\n return (\n <React.Fragment key={index}>\n <CardWrapper\n {...cardProps}\n className={cn(\n 'blog-posts-card rounded-box',\n 'flex cursor-pointer flex-col gap-4',\n 'laptop:h-[336px] desktop:h-[448px] lg-desktop:h-[560px]',\n 'laptop:bg-container-secondary-0 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'laptop:overflow-hidden laptop:transition-opacity ',\n 'bg-container-secondary-1',\n getSpanClass(item.width || 'full'),\n getLayoutClass(item.width || 'full'),\n classNames.card\n )}\n onClick={handleCardClick(item, index)}\n >\n {/* \u56FE\u7247 */}\n <div\n className={cn(\n 'blog-posts-card-image',\n 'relative w-full overflow-hidden',\n 'h-[200px] shrink-0',\n getImageSizeClass(item.width || 'full'),\n classNames.cardImage\n )}\n >\n <Picture\n source={getImageSource(item.image)}\n alt={getImageAlt(item.image, item.title)}\n className=\"rounded-box h-full object-cover\"\n imgClassName=\"h-full\"\n />\n </div>\n\n {/* \u5185\u5BB9 */}\n <div\n className={cn(\n 'blog-posts-card-content',\n 'desktop:gap-6 flex flex-col justify-center gap-4',\n classNames.cardContent\n )}\n >\n <div className=\"desktop:gap-2 flex flex-col gap-1\">\n <Heading\n size={2}\n as=\"h6\"\n className={cn('blog-posts-card-title line-clamp-3', classNames.cardTitle)}\n html={item.title}\n />\n\n {item.description && (\n <Text\n className={cn(\n 'blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]',\n classNames.cardDescription\n )}\n html={item.description}\n />\n )}\n </div>\n {item.date && (\n <Text\n className={cn(\n 'blog-posts-card-meta',\n 'text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n classNames.cardMeta\n )}\n html={item.date}\n />\n )}\n </div>\n </CardWrapper>\n\n {/* \u5206\u5272\u7EBF - \u4EC5 mobile/tablet \u663E\u793A */}\n {index < items.length - 1 && (\n <div\n className={cn(\n 'blog-posts-separator',\n 'bg-lines-primary laptop:hidden h-px w-full',\n classNames.separator\n )}\n />\n )}\n </React.Fragment>\n )\n })}\n </div>\n </div>\n )\n }\n)\n\nFeaturedBlogPostsBase.displayName = 'FeaturedBlogPosts'\n\nconst FeaturedBlogPosts = withLayout(FeaturedBlogPostsBase)\n\nexport default FeaturedBlogPosts\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport type { Img } from '../../types/props.js'\nimport { Heading, Text } from '../../index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nexport type FeaturedBlogPostsSemanticName =\n | 'root'\n | 'header'\n | 'title'\n | 'subtitle'\n | 'grid'\n | 'card'\n | 'cardImage'\n | 'cardContent'\n | 'cardTitle'\n | 'cardDescription'\n | 'cardMeta'\n | 'separator'\n\n/**\n * \u5361\u7247\u5BBD\u5EA6\u6BD4\u4F8B\n */\nexport type FeaturedBlogPostSpan = 'full' | '2/3' | '1/3'\n\n/**\n * \u535A\u6587\u5361\u7247\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface FeaturedBlogPostItem {\n /** \u5C01\u9762\u56FE\u7247 */\n image: {\n mobile?: Img\n pad?: Img\n laptop?: Img\n desktop?: Img\n lgDesktop?: Img\n }\n /** \u6587\u7AE0\u6807\u9898 */\n title: string\n /** \u6587\u7AE0\u63CF\u8FF0 */\n description?: string\n /** \u65E5\u671F\u4FE1\u606F\uFF08\u5206\u7C7B\u00B7\u65E5\u671F\u00B7\u4F5C\u8005\uFF09 */\n date?: string\n /** \u6587\u7AE0\u94FE\u63A5 */\n link?: string\n /** \u5361\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF0C\u9ED8\u8BA4 full */\n width?: FeaturedBlogPostSpan\n}\n\n/**\n * FeaturedBlogPosts \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface FeaturedBlogPostsData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** \u526F\u6807\u9898 */\n subtitle?: string\n /** \u535A\u6587\u5217\u8868 */\n items: FeaturedBlogPostItem[]\n}\n\nexport interface FeaturedBlogPostsProps extends React.HTMLAttributes<HTMLDivElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: FeaturedBlogPostsData\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6 */\n classNames?: Partial<Record<FeaturedBlogPostsSemanticName, string>>\n /** \u5361\u7247\u70B9\u51FB\u56DE\u8C03 */\n onItemClick?: (item: FeaturedBlogPostItem, index: number, event: React.MouseEvent) => void\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u7C7B\u578B\n */\ntype ResponsiveImage = FeaturedBlogPostItem['image']\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61\u8F6C\u4E3A Picture source \u683C\u5F0F\u5B57\u7B26\u4E32\n * \u683C\u5F0F: \"url1 1920, url2 1440, url3 1024, url4 768, url5 390\"\n */\nconst getImageSource = (image: ResponsiveImage): string => {\n const breakpoints: { key: keyof ResponsiveImage; width: number }[] = [\n { key: 'lgDesktop', width: 1920 },\n { key: 'desktop', width: 1440 },\n { key: 'laptop', width: 1024 },\n { key: 'pad', width: 768 },\n { key: 'mobile', width: 390 },\n ]\n\n const sources = breakpoints\n .filter(({ key }) => image[key]?.url)\n .map(({ key, width }) => `${image[key]!.url} ${width}`)\n\n // \u5982\u679C\u6709 sources\uFF0C\u8FD4\u56DE\u62FC\u63A5\u7ED3\u679C\uFF1B\u5426\u5219\u8FD4\u56DE\u7B2C\u4E00\u4E2A\u6709\u6548\u7684 url\n if (sources.length > 0) {\n return sources.join(', ')\n }\n\n // fallback: \u8FD4\u56DE\u4EFB\u610F\u4E00\u4E2A\u6709\u6548\u7684 url\n for (const { key } of breakpoints) {\n if (image[key]?.url) return image[key]!.url\n }\n\n return ''\n}\n\n/**\n * \u4ECE\u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61\u83B7\u53D6 alt \u6587\u672C\n */\nconst getImageAlt = (image: ResponsiveImage, fallback: string): string => {\n const keys: (keyof ResponsiveImage)[] = ['desktop', 'laptop', 'pad', 'mobile', 'lgDesktop']\n for (const key of keys) {\n if (image[key]?.alt) return image[key]!.alt!\n }\n return fallback\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u5361\u7247 grid \u5217\u6570 (laptop+)\n */\nconst getSpanClass = (span: FeaturedBlogPostSpan = 'full') => {\n const spanMap: Record<FeaturedBlogPostSpan, string> = {\n full: 'laptop:col-span-3',\n '2/3': 'laptop:col-span-2',\n '1/3': 'laptop:col-span-1',\n }\n return spanMap[span]\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u5361\u7247\u5E03\u5C40\u65B9\u5411 (laptop+)\n * 1/3: \u4E0A\u4E0B\u5E03\u5C40\uFF0C\u5176\u4ED6: \u5DE6\u53F3\u5E03\u5C40\n */\nconst getLayoutClass = (span: FeaturedBlogPostSpan = 'full') => {\n return span === '1/3' ? '' : 'laptop:flex-row'\n}\n\n/**\n * \u6839\u636E span \u83B7\u53D6\u56FE\u7247\u5C3A\u5BF8\u6837\u5F0F (laptop+)\n * full: \u5DE6\u53F3\u5E03\u5C40\uFF0C\u56FE\u7247\u5BBD\u5EA6\u5360 2/3\n * 2/3: \u5DE6\u53F3\u5E03\u5C40\uFF0C\u56FE\u7247\u5BBD\u5EA6\u5360 1/2\n * 1/3: \u4E0A\u4E0B\u5E03\u5C40\uFF0C\u56FE\u7247\u9AD8\u5EA6\u586B\u6EE1\u5269\u4F59\u7A7A\u95F4\n */\nconst getImageSizeClass = (span: FeaturedBlogPostSpan = 'full') => {\n const sizeMap: Record<FeaturedBlogPostSpan, string> = {\n full: 'laptop:w-2/3 aspect-[356/200] tablet:aspect-[704/200] laptop:aspect-[2/1] desktop:aspect-[19/9] lg-desktop:aspect-[7/3]',\n '2/3':\n 'laptop:w-1/2 aspect-[356/200] tablet:aspect-[704/200] laptop:aspect-[1/1] desktop:aspect-[16/15] lg-desktop:aspect-[8/7]',\n '1/3':\n 'laptop:flex-1 aspect-[356/200] tablet:aspect-[704/200] laptop:aspect-[256/153] desktop:aspect-[379/192] lg-desktop:aspect-[480/248]',\n }\n return sizeMap[span]\n}\n\n/**\n * FeaturedBlogPosts - \u7CBE\u9009\u535A\u6587\n *\n * @description \u5C55\u793A\u7ECF\u8FC7\u7B5B\u9009\u7684\u4F18\u8D28\u6587\u7AE0\uFF0C\u652F\u6301\u4E0D\u540C\u5BBD\u5EA6\u548C\u5E03\u5C40\u7684\u5361\u7247\u7EC4\u5408\n */\nconst FeaturedBlogPostsBase = React.forwardRef<HTMLDivElement, FeaturedBlogPostsProps>(\n ({ className, classNames = {}, data, onItemClick, ...props }, ref) => {\n const { title, subtitle, items } = data\n\n const handleCardClick = React.useCallback(\n (item: FeaturedBlogPostItem, index: number) => (event: React.MouseEvent) => {\n onItemClick?.(item, index, event)\n },\n [onItemClick]\n )\n\n return (\n <div\n ref={ref}\n className={cn('blog-posts-root', 'text-info-primary w-full', className, classNames.root)}\n {...props}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n {(title || subtitle) && (\n <div className={cn('blog-posts-header mb-6', classNames.header)}>\n {title && <Heading as=\"h2\" size={4} html={title} className={cn('blog-posts-title', classNames.title)} />}\n {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n </div>\n )}\n <div className={cn('blog-posts-grid', 'laptop:grid-cols-3 grid grid-cols-1 gap-4', classNames.grid)}>\n {items.map((item, index) => {\n const CardWrapper = item.link ? 'a' : 'div'\n const cardProps = item.link ? { href: item.link } : {}\n\n return (\n <React.Fragment key={index}>\n <CardWrapper\n {...cardProps}\n className={cn(\n 'blog-posts-card rounded-box',\n 'flex cursor-pointer flex-col gap-4',\n 'laptop:bg-container-secondary-0 laptop:p-4 desktop:p-6 lg-desktop:p-8',\n 'laptop:overflow-hidden laptop:transition-opacity ',\n 'bg-container-secondary-1',\n getSpanClass(item.width || 'full'),\n getLayoutClass(item.width || 'full'),\n classNames.card\n )}\n onClick={handleCardClick(item, index)}\n >\n {/* \u56FE\u7247 */}\n <div\n className={cn(\n 'blog-posts-card-image',\n 'relative w-full overflow-hidden',\n 'laptop:min-h-0 min-h-[200px] shrink-0',\n getImageSizeClass(item.width || 'full'),\n classNames.cardImage\n )}\n >\n <Picture\n source={getImageSource(item.image)}\n alt={getImageAlt(item.image, item.title)}\n className=\"rounded-t-box h-full object-cover\"\n imgClassName={\n item.width === '1/3'\n ? 'h-auto object-cover'\n : 'w-full laptop:h-full laptop:w-[unset] object-cover'\n }\n />\n </div>\n\n {/* \u5185\u5BB9 */}\n <div\n className={cn(\n 'blog-posts-card-content',\n 'desktop:gap-6 flex flex-col justify-center gap-4',\n classNames.cardContent\n )}\n >\n <div className=\"desktop:gap-2 flex flex-col gap-1\">\n <Heading\n size={2}\n as=\"h6\"\n className={cn('blog-posts-card-title line-clamp-3', classNames.cardTitle)}\n html={item.title}\n />\n\n {item.description && (\n <Text\n className={cn(\n 'blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]',\n classNames.cardDescription\n )}\n html={item.description}\n />\n )}\n </div>\n {item.date && (\n <Text\n className={cn(\n 'blog-posts-card-meta',\n 'text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n classNames.cardMeta\n )}\n html={item.date}\n />\n )}\n </div>\n </CardWrapper>\n\n {/* \u5206\u5272\u7EBF - \u4EC5 mobile/tablet \u663E\u793A */}\n {index < items.length - 1 && (\n <div\n className={cn(\n 'blog-posts-separator',\n 'bg-lines-primary laptop:hidden h-px w-full',\n classNames.separator\n )}\n />\n )}\n </React.Fragment>\n )\n })}\n </div>\n </div>\n )\n }\n)\n\nFeaturedBlogPostsBase.displayName = 'FeaturedBlogPosts'\n\nconst FeaturedBlogPosts = withLayout(FeaturedBlogPostsBase)\n\nexport default FeaturedBlogPosts\n"],
5
+ "mappings": "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",
6
6
  "names": ["FeaturedBlogPosts_exports", "__export", "FeaturedBlogPosts_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_picture", "import__", "import_Styles", "getImageSource", "image", "breakpoints", "sources", "key", "width", "getImageAlt", "fallback", "keys", "getSpanClass", "span", "getLayoutClass", "getImageSizeClass", "FeaturedBlogPostsBase", "className", "classNames", "data", "onItemClick", "props", "ref", "title", "subtitle", "items", "handleCardClick", "item", "index", "event", "CardWrapper", "cardProps", "Picture", "FeaturedBlogPosts"]
7
7
  }
package/dist/cjs/biz-components/Ksp/index.d.ts CHANGED
@@ -38,6 +38,8 @@ export interface KspData {
38
38
  items: KspCardItem[];
39
39
  /** 主题，默认 light */
40
40
  theme?: Theme;
41
+ /** 栅格列数，默认 "10" */
42
+ gridColumns?: string;
41
43
  }
42
44
  /**
43
45
  * Ksp 组件语义化类名配置
package/dist/cjs/biz-components/Ksp/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var M=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var V=(p,t)=>{for(var e in t)M(p,e,{get:t[e],enumerable:!0})},E=(p,t,e,k)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of O(t))!R.call(p,s)&&s!==e&&M(p,s,{get:()=>t[s],enumerable:!(k=H(t,s))||k.enumerable});return p};var F=p=>E(M({},"__esModule",{value:!0}),p);var _={};V(_,{default:()=>Y});module.exports=F(_);var a=require("react/jsx-runtime"),x=require("react-responsive"),d=require("../../components/index.js"),c=require("../../helpers/utils.js"),z=require("../../shared/Styles.js");const G=({title:p,desc:t,mobImage:e,mobVideo:k,tabletImage:s,tabletVideo:r,laptopImage:h,laptopVideo:i,desktopImage:l,desktopVideo:m,image:w,video:f,className:L,theme:j,classNames:o})=>{const N=(0,x.useMediaQuery)({query:"(max-width: 767px)"}),K=(0,x.useMediaQuery)({query:"(min-width: 768px) and (max-width: 1024px)"}),T=(0,x.useMediaQuery)({query:"(min-width: 1025px) and (max-width: 1439px)"}),D=()=>N?k||r||i||m||f:K?r||i||m||f:T?i||m||f:m||f,I=()=>N?e||s||h||l||w:K?s||h||l||w:T?h||l||w:l||w,v=D(),P=I(),$=()=>{const n=[],y=w?.url||l?.url,b=l?.url||w?.url,g=h?.url||b,u=s?.url||g,C=e?.url||u;return y&&n.push(y),b&&b!==y&&n.push(`${b} 1920`),g&&g!==b&&n.push(`${g} 1440`),u&&u!==g&&n.push(`${u} 1025`),C&&C!==u&&n.push(`${C} 768`),n.length>0?n.join(", "):void 0},q=!!v?.url,A=!!(e?.url||s?.url||h?.url||l?.url||w?.url);return(0,a.jsxs)("div",{className:(0,c.cn)("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":j==="dark"},L,o?.card),children:[q?(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:v?.url,poster:P?.url,className:(0,c.cn)("ksp-card-video absolute bottom-0 w-full object-cover",o?.cardVideo)}):A&&(0,a.jsx)(d.Picture,{source:$(),alt:P?.alt||"",className:(0,c.cn)("ksp-card-image size-full",o?.cardImage),imgClassName:(0,c.cn)("size-full object-cover object-bottom",o?.cardImageImg)}),(0,a.jsxs)("div",{className:(0,c.cn)("ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",o?.cardContent),children:[(0,a.jsx)(d.Heading,{size:3,html:p,className:(0,c.cn)("ksp-card-title tablet:block hidden w-full",o?.cardTitle)}),(0,a.jsx)(d.Heading,{size:2,html:p,className:(0,c.cn)("ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full",o?.cardTitle)}),(0,a.jsx)(d.Text,{size:2,html:t,className:(0,c.cn)("ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",o?.cardDesc)})]})]})},Q={4:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},5:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},7:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",6:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},8:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},9:{0:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",8:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"}},S=(p,t)=>Q[t]?.[p]||"";function U({data:p,className:t,classNames:e,...k}){const{title:s,items:r,theme:h="light"}=p;return(0,a.jsxs)("section",{...k,"data-ui-component-id":"ksp",className:(0,c.cn)("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":h==="dark"},t,e?.root),children:[(0,a.jsx)(d.Heading,{as:"h1",size:4,html:s,className:(0,c.cn)("ksp-title laptop:text-center text-left",e?.title)}),(0,a.jsx)("div",{className:(0,c.cn)("ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3",e?.layout),children:r.map((i,l)=>(0,a.jsx)(G,{...i,className:S(l,r.length),classNames:e},l))})]})}var Y=(0,z.withLayout)(U);
1
+ "use strict";"use client";var M=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.prototype.hasOwnProperty;var H=(a,t)=>{for(var p in t)M(a,p,{get:t[p],enumerable:!0})},V=(a,t,p,k)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of $(t))!q.call(a,e)&&e!==p&&M(a,e,{get:()=>t[e],enumerable:!(k=_(t,e))||k.enumerable});return a};var F=a=>V(M({},"__esModule",{value:!0}),a);var B={};H(B,{default:()=>S});module.exports=F(B);var s=require("react/jsx-runtime"),x=require("react-responsive"),h=require("../../components/index.js"),c=require("../../helpers/utils.js"),L=require("../../shared/Styles.js");const G=({title:a,desc:t,mobImage:p,mobVideo:k,tabletImage:e,tabletVideo:i,laptopImage:n,laptopVideo:b,desktopImage:o,desktopVideo:r,image:l,video:w,className:z,theme:I,classNames:d})=>{const N=(0,x.useMediaQuery)({query:"(max-width: 767px)"}),T=(0,x.useMediaQuery)({query:"(min-width: 768px) and (max-width: 1024px)"}),K=(0,x.useMediaQuery)({query:"(min-width: 1025px) and (max-width: 1439px)"}),j=()=>N?k||i||b||r||w:T?i||b||r||w:K?b||r||w:r||w,D=()=>N?p||e||n||o||l:T?e||n||o||l:K?n||o||l:o||l,v=j(),P=D(),O=()=>{const g=[],C=l?.url||o?.url,u=o?.url||l?.url,m=n?.url||u,f=e?.url||m,y=p?.url||f;return C&&g.push(C),u&&u!==C&&g.push(`${u} 1920`),m&&m!==u&&g.push(`${m} 1440`),f&&f!==m&&g.push(`${f} 1025`),y&&y!==f&&g.push(`${y} 768`),g.length>0?g.join(", "):void 0},R=!!v?.url,A=!!(p?.url||e?.url||n?.url||o?.url||l?.url);return(0,s.jsxs)("div",{className:(0,c.cn)("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":I==="dark"},z,d?.card),children:[R?(0,s.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:v?.url,poster:P?.url,className:(0,c.cn)("ksp-card-video absolute bottom-0 w-full object-cover",d?.cardVideo)}):A&&(0,s.jsx)(h.Picture,{source:O(),alt:P?.alt||"",className:(0,c.cn)("ksp-card-image size-full",d?.cardImage),imgClassName:(0,c.cn)("size-full object-cover object-bottom",d?.cardImageImg)}),(0,s.jsxs)("div",{className:(0,c.cn)("ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",d?.cardContent),children:[(0,s.jsx)(h.Heading,{size:3,html:a,className:(0,c.cn)("ksp-card-title tablet:block hidden w-full",d?.cardTitle)}),(0,s.jsx)(h.Heading,{size:2,html:a,className:(0,c.cn)("ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full",d?.cardTitle)}),(0,s.jsx)(h.Text,{size:2,html:t,className:(0,c.cn)("ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",d?.cardDesc)})]})]})},U={4:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},5:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},7:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",6:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]"},8:{0:"col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},9:{0:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",1:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",2:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",3:"col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",4:"col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",5:"col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",6:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",7:"col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]",8:"col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"}},Y={4:{0:"col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",1:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",2:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]"},5:{0:"col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",1:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",2:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",1:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",2:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",4:"col-span-1 tablet:col-span-1 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",5:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]"},7:{0:"col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",1:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",2:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",4:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",5:"col-span-1 tablet:col-span-1 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",6:"col-span-2 tablet:col-span-2 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},8:{0:"col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",1:"col-span-2 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",2:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",3:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",4:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",5:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",6:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",7:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]"},9:{0:"col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",1:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",2:"col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]",3:"col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",4:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",5:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",6:"col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]",7:"col-span-1 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]",8:"col-span-2 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]"}},E=(a,t,p)=>(p===12?Y:U)[t]?.[a]||"";function Q({data:a,className:t,classNames:p,...k}){const{title:e,items:i,theme:n="light",gridColumns:b}=a,o=b?Number(b):10,r=o===12;return(0,s.jsxs)("section",{...k,"data-ui-component-id":"ksp",className:(0,c.cn)("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":n==="dark"},t,p?.root),children:[(0,s.jsx)(h.Heading,{as:"h1",size:4,html:e,className:(0,c.cn)("ksp-title laptop:text-center text-left",p?.title)}),(0,s.jsx)("div",{className:(0,c.cn)("ksp-layout tablet:grid-cols-3 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3",r?"laptop:grid-cols-12":"laptop:grid-cols-10",p?.layout),children:i.map((l,w)=>(0,s.jsx)(G,{...l,className:E(w,i.length,o),classNames:p},w))})]})}var S=(0,L.withLayout)(Q);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Ksp/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Ksp/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport { useMediaQuery } from 'react-responsive'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } 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 /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n mobImage?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 */\n mobVideo?: Media\n\n /** \u5E73\u677F\u7AEF\u56FE\u7247 (\u2265768px) */\n tabletImage?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 (\u2265768px) */\n tabletVideo?: Media\n\n /** \u5C0F\u684C\u9762\u7AEF\u56FE\u7247 (\u22651025px) */\n laptopImage?: Media\n /** \u5C0F\u684C\u9762\u7AEF\u89C6\u9891 (\u22651025px) */\n laptopVideo?: Media\n\n /** \u684C\u9762\u7AEF\u56FE\u7247 (\u22651440px) */\n desktopImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 (\u22651440px) */\n desktopVideo?: Media\n /** \u5927\u684C\u9762\u7AEF\u56FE\u7247 */\n image?: Media\n /** \u5927\u684C\u9762\u7AEF\u89C6\u9891 */\n video?: 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 /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6\u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E\n */\nexport interface KspClassNames {\n /** \u6574\u4F53\u5BB9\u5668\u7C7B\u540D */\n root?: string\n /** \u4E3B\u6807\u9898\u7C7B\u540D */\n title?: string\n /** \u5361\u7247\u5E03\u5C40\u5BB9\u5668\u7C7B\u540D */\n layout?: string\n /** \u5355\u4E2A\u5361\u7247\u7C7B\u540D */\n card?: string\n /** \u5361\u7247\u89C6\u9891\u7C7B\u540D */\n cardVideo?: string\n /** \u5361\u7247\u56FE\u7247\u7C7B\u540D */\n cardImage?: string\n /** \u5361\u7247\u56FE\u7247 img \u5143\u7D20\u7C7B\u540D */\n cardImageImg?: string\n /** \u5361\u7247\u5185\u5BB9\u533A\u7C7B\u540D */\n cardContent?: string\n /** \u5361\u7247\u6807\u9898\u7C7B\u540D */\n cardTitle?: string\n /** \u5361\u7247\u63CF\u8FF0\u7C7B\u540D */\n cardDesc?: string\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E */\n classNames?: KspClassNames\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E */\n classNames?: KspClassNames\n}\n\nconst ImageCard = ({\n title,\n desc,\n // \u65B0\u7684\u65AD\u70B9\u5A92\u4F53\u5C5E\u6027\n mobImage,\n mobVideo,\n tabletImage,\n tabletVideo,\n laptopImage,\n laptopVideo,\n desktopImage,\n desktopVideo,\n // \u4FDD\u7559\u65E7\u5C5E\u6027\u4F5C\u4E3A\u5927\u5C4F\u9ED8\u8BA4\u503C\n image,\n video,\n className,\n theme,\n classNames,\n}: ImageCardProps) => {\n // \u54CD\u5E94\u5F0F\u65AD\u70B9\u68C0\u6D4B\n const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n const isTablet = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n // desktop \u53CA\u4EE5\u4E0A\u4F7F\u7528\u9ED8\u8BA4\n\n // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9\u7684\u89C6\u9891\u6E90\uFF08\u5E26 fallback\uFF09\n const getCurrentVideo = (): Media | undefined => {\n if (isMobile) return mobVideo || tabletVideo || laptopVideo || desktopVideo || video\n if (isTablet) return tabletVideo || laptopVideo || desktopVideo || video\n if (isLaptop) return laptopVideo || desktopVideo || video\n return desktopVideo || video\n }\n\n // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9\u7684\u5C01\u9762\u56FE\n const getCurrentPoster = (): Media | undefined => {\n if (isMobile) return mobImage || tabletImage || laptopImage || desktopImage || image\n if (isTablet) return tabletImage || laptopImage || desktopImage || image\n if (isLaptop) return laptopImage || desktopImage || image\n return desktopImage || image\n }\n\n const currentVideo = getCurrentVideo()\n const currentPoster = getCurrentPoster()\n\n // \u6784\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6E90\n const buildImageSource = (): string | undefined => {\n const sources: string[] = []\n const lgDesktop = image?.url || desktopImage?.url\n const desktop = desktopImage?.url || image?.url\n const laptop = laptopImage?.url || desktop\n const tablet = tabletImage?.url || laptop\n const mobile = mobImage?.url || tablet\n\n if (lgDesktop) sources.push(lgDesktop)\n if (desktop && desktop !== lgDesktop) sources.push(`${desktop} 1920`)\n if (laptop && laptop !== desktop) sources.push(`${laptop} 1440`)\n if (tablet && tablet !== laptop) sources.push(`${tablet} 1025`)\n if (mobile && mobile !== tablet) sources.push(`${mobile} 768`)\n\n return sources.length > 0 ? sources.join(', ') : undefined\n }\n\n // \u5224\u65AD\u662F\u5426\u6709\u89C6\u9891\n const hasVideo = !!currentVideo?.url\n\n // \u5224\u65AD\u662F\u5426\u6709\u4EFB\u4F55\u56FE\u7247\n const hasAnyImage = !!(mobImage?.url || tabletImage?.url || laptopImage?.url || desktopImage?.url || image?.url)\n\n return (\n <div\n className={cn(\n 'ksp-card rounded-box text-info-primary relative overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.card\n )}\n >\n {hasVideo ? (\n <video\n playsInline\n autoPlay\n muted\n loop\n src={currentVideo?.url}\n poster={currentPoster?.url}\n className={cn('ksp-card-video absolute bottom-0 w-full object-cover', classNames?.cardVideo)}\n />\n ) : (\n hasAnyImage && (\n <Picture\n source={buildImageSource()}\n alt={currentPoster?.alt || ''}\n className={cn('ksp-card-image size-full', classNames?.cardImage)}\n imgClassName={cn('size-full object-cover object-bottom', classNames?.cardImageImg)}\n />\n )\n )}\n <div className={cn('ksp-card-content desktop:p-6 lg-desktop:p-8 p-4', classNames?.cardContent)}>\n <Heading\n size={3}\n html={title}\n className={cn('ksp-card-title tablet:block hidden w-full', classNames?.cardTitle)}\n />\n <Heading\n size={2}\n html={title}\n className={cn(\n 'ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full',\n classNames?.cardTitle\n )}\n />\n <Text\n size={2}\n html={desc}\n className={cn(\n 'ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n classNames?.cardDesc\n )}\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 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n },\n 5: {\n 0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n 1: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 3: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 4: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n },\n 6: {\n 0: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n },\n 7: {\n 0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 6: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n },\n 8: {\n 0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 3: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 7: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n },\n 9: {\n 0: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 3: 'col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 7: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 8: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\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, classNames, ...rest }: KspProps) {\n const { title, items, theme = 'light' } = data\n return (\n <section\n {...rest}\n data-ui-component-id=\"ksp\"\n className={cn(\n 'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.root\n )}\n >\n <Heading\n as=\"h1\"\n size={4}\n html={title}\n className={cn('ksp-title laptop:text-center text-left', classNames?.title)}\n />\n <div\n className={cn(\n 'ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3',\n classNames?.layout\n )}\n >\n {items.map((item, index) => (\n <ImageCard\n key={index}\n {...item}\n className={getCardLayoutClass(index, items.length)}\n classNames={classNames}\n />\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(Ksp)\n"],
5
- "mappings": "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",
6
- "names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "mobImage", "mobVideo", "tabletImage", "tabletVideo", "laptopImage", "laptopVideo", "desktopImage", "desktopVideo", "image", "video", "className", "theme", "classNames", "isMobile", "isTablet", "isLaptop", "getCurrentVideo", "getCurrentPoster", "currentVideo", "currentPoster", "buildImageSource", "sources", "lgDesktop", "desktop", "laptop", "tablet", "mobile", "hasVideo", "hasAnyImage", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "rest", "items", "item"]
4
+ "sourcesContent": ["'use client'\n\nimport { useMediaQuery } from 'react-responsive'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } 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 /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n mobImage?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 */\n mobVideo?: Media\n\n /** \u5E73\u677F\u7AEF\u56FE\u7247 (\u2265768px) */\n tabletImage?: Media\n /** \u5E73\u677F\u7AEF\u89C6\u9891 (\u2265768px) */\n tabletVideo?: Media\n\n /** \u5C0F\u684C\u9762\u7AEF\u56FE\u7247 (\u22651025px) */\n laptopImage?: Media\n /** \u5C0F\u684C\u9762\u7AEF\u89C6\u9891 (\u22651025px) */\n laptopVideo?: Media\n\n /** \u684C\u9762\u7AEF\u56FE\u7247 (\u22651440px) */\n desktopImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 (\u22651440px) */\n desktopVideo?: Media\n /** \u5927\u684C\u9762\u7AEF\u56FE\u7247 */\n image?: Media\n /** \u5927\u684C\u9762\u7AEF\u89C6\u9891 */\n video?: 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 /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n /** \u6805\u683C\u5217\u6570\uFF0C\u9ED8\u8BA4 \"10\" */\n gridColumns?: string\n}\n\n/**\n * Ksp \u7EC4\u4EF6\u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E\n */\nexport interface KspClassNames {\n /** \u6574\u4F53\u5BB9\u5668\u7C7B\u540D */\n root?: string\n /** \u4E3B\u6807\u9898\u7C7B\u540D */\n title?: string\n /** \u5361\u7247\u5E03\u5C40\u5BB9\u5668\u7C7B\u540D */\n layout?: string\n /** \u5355\u4E2A\u5361\u7247\u7C7B\u540D */\n card?: string\n /** \u5361\u7247\u89C6\u9891\u7C7B\u540D */\n cardVideo?: string\n /** \u5361\u7247\u56FE\u7247\u7C7B\u540D */\n cardImage?: string\n /** \u5361\u7247\u56FE\u7247 img \u5143\u7D20\u7C7B\u540D */\n cardImageImg?: string\n /** \u5361\u7247\u5185\u5BB9\u533A\u7C7B\u540D */\n cardContent?: string\n /** \u5361\u7247\u6807\u9898\u7C7B\u540D */\n cardTitle?: string\n /** \u5361\u7247\u63CF\u8FF0\u7C7B\u540D */\n cardDesc?: string\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E */\n classNames?: KspClassNames\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: Theme\n /** \u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E */\n classNames?: KspClassNames\n}\n\nconst ImageCard = ({\n title,\n desc,\n // \u65B0\u7684\u65AD\u70B9\u5A92\u4F53\u5C5E\u6027\n mobImage,\n mobVideo,\n tabletImage,\n tabletVideo,\n laptopImage,\n laptopVideo,\n desktopImage,\n desktopVideo,\n // \u4FDD\u7559\u65E7\u5C5E\u6027\u4F5C\u4E3A\u5927\u5C4F\u9ED8\u8BA4\u503C\n image,\n video,\n className,\n theme,\n classNames,\n}: ImageCardProps) => {\n // \u54CD\u5E94\u5F0F\u65AD\u70B9\u68C0\u6D4B\n const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n const isTablet = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n // desktop \u53CA\u4EE5\u4E0A\u4F7F\u7528\u9ED8\u8BA4\n\n // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9\u7684\u89C6\u9891\u6E90\uFF08\u5E26 fallback\uFF09\n const getCurrentVideo = (): Media | undefined => {\n if (isMobile) return mobVideo || tabletVideo || laptopVideo || desktopVideo || video\n if (isTablet) return tabletVideo || laptopVideo || desktopVideo || video\n if (isLaptop) return laptopVideo || desktopVideo || video\n return desktopVideo || video\n }\n\n // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9\u7684\u5C01\u9762\u56FE\n const getCurrentPoster = (): Media | undefined => {\n if (isMobile) return mobImage || tabletImage || laptopImage || desktopImage || image\n if (isTablet) return tabletImage || laptopImage || desktopImage || image\n if (isLaptop) return laptopImage || desktopImage || image\n return desktopImage || image\n }\n\n const currentVideo = getCurrentVideo()\n const currentPoster = getCurrentPoster()\n\n // \u6784\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6E90\n const buildImageSource = (): string | undefined => {\n const sources: string[] = []\n const lgDesktop = image?.url || desktopImage?.url\n const desktop = desktopImage?.url || image?.url\n const laptop = laptopImage?.url || desktop\n const tablet = tabletImage?.url || laptop\n const mobile = mobImage?.url || tablet\n\n if (lgDesktop) sources.push(lgDesktop)\n if (desktop && desktop !== lgDesktop) sources.push(`${desktop} 1920`)\n if (laptop && laptop !== desktop) sources.push(`${laptop} 1440`)\n if (tablet && tablet !== laptop) sources.push(`${tablet} 1025`)\n if (mobile && mobile !== tablet) sources.push(`${mobile} 768`)\n\n return sources.length > 0 ? sources.join(', ') : undefined\n }\n\n // \u5224\u65AD\u662F\u5426\u6709\u89C6\u9891\n const hasVideo = !!currentVideo?.url\n\n // \u5224\u65AD\u662F\u5426\u6709\u4EFB\u4F55\u56FE\u7247\n const hasAnyImage = !!(mobImage?.url || tabletImage?.url || laptopImage?.url || desktopImage?.url || image?.url)\n\n return (\n <div\n className={cn(\n 'ksp-card rounded-box text-info-primary relative overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.card\n )}\n >\n {hasVideo ? (\n <video\n playsInline\n autoPlay\n muted\n loop\n src={currentVideo?.url}\n poster={currentPoster?.url}\n className={cn('ksp-card-video absolute bottom-0 w-full object-cover', classNames?.cardVideo)}\n />\n ) : (\n hasAnyImage && (\n <Picture\n source={buildImageSource()}\n alt={currentPoster?.alt || ''}\n className={cn('ksp-card-image size-full', classNames?.cardImage)}\n imgClassName={cn('size-full object-cover object-bottom', classNames?.cardImageImg)}\n />\n )\n )}\n <div className={cn('ksp-card-content desktop:p-6 lg-desktop:p-8 p-4', classNames?.cardContent)}>\n <Heading\n size={3}\n html={title}\n className={cn('ksp-card-title tablet:block hidden w-full', classNames?.cardTitle)}\n />\n <Heading\n size={2}\n html={title}\n className={cn(\n 'ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full',\n classNames?.cardTitle\n )}\n />\n <Text\n size={2}\n html={desc}\n className={cn(\n 'ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n classNames?.cardDesc\n )}\n />\n </div>\n </div>\n )\n}\n\n/**\n * 10 \u5217\u6805\u683C\u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\uFF08\u73B0\u6709\uFF0C\u9ED8\u8BA4\uFF09\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_10: Record<number, Record<number, string>> = {\n 4: {\n 0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n },\n 5: {\n 0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n 1: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 3: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 4: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n },\n 6: {\n 0: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n },\n 7: {\n 0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 6: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n },\n 8: {\n 0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 3: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 7: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n },\n 9: {\n 0: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 3: 'col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 7: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n 8: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n },\n}\n\n/**\n * 12 \u5217\u6805\u683C\u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\uFF08\u65B0\u589E\uFF09\n * \u5BB9\u5668\u4F7F\u7528 grid-cols-12\uFF0C\u9002\u914D\u66F4\u5927\u7684\u5185\u5BB9\u5BBD\u5EA6\n */\nconst LAYOUT_CONFIG_12: Record<number, Record<number, string>> = {\n 4: {\n 0: 'col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n },\n 5: {\n 0: 'col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 3: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n },\n 6: {\n 0: 'col-span-2 tablet:col-span-1 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 tablet:col-span-1 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 tablet:col-span-1 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 5: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n },\n 7: {\n 0: 'col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 5: 'col-span-1 tablet:col-span-1 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 6: 'col-span-2 tablet:col-span-2 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n },\n 8: {\n 0: 'col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 1: 'col-span-2 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 3: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 5: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 6: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 7: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n },\n 9: {\n 0: 'col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 1: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 2: 'col-span-1 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\n 3: 'col-span-2 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 4: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 5: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[226] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 6: 'col-span-1 tablet:col-span-1 laptop:col-span-4 desktop:col-span-4 lg-desktop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n 7: 'col-span-1 tablet:col-span-2 laptop:col-span-7 desktop:col-span-7 lg-desktop:col-span-7 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[516] laptop:aspect-h-[240] desktop:aspect-w-[758] desktop:aspect-h-[256] lg-desktop:aspect-w-[964] lg-desktop:aspect-h-[320]',\n 8: 'col-span-2 tablet:col-span-1 laptop:col-span-5 desktop:col-span-5 lg-desktop:col-span-5 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[364] laptop:aspect-h-[240] desktop:aspect-w-[538] desktop:aspect-h-[256] lg-desktop:aspect-w-[684] lg-desktop:aspect-h-[320]',\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 * @param gridColumns - \u6805\u683C\u5217\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number, gridColumns: number): string => {\n const config = gridColumns === 12 ? LAYOUT_CONFIG_12 : LAYOUT_CONFIG_10\n return 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, classNames, ...rest }: KspProps) {\n const { title, items, theme = 'light', gridColumns } = data\n const columns = gridColumns ? Number(gridColumns) : 10\n const is12Col = columns === 12\n return (\n <section\n {...rest}\n data-ui-component-id=\"ksp\"\n className={cn(\n 'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n {\n 'aiui-dark': theme === 'dark',\n },\n className,\n classNames?.root\n )}\n >\n <Heading\n as=\"h1\"\n size={4}\n html={title}\n className={cn('ksp-title laptop:text-center text-left', classNames?.title)}\n />\n <div\n className={cn(\n 'ksp-layout tablet:grid-cols-3 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3',\n is12Col ? 'laptop:grid-cols-12' : 'laptop:grid-cols-10',\n classNames?.layout\n )}\n >\n {items.map((item, index) => (\n <ImageCard\n key={index}\n {...item}\n className={getCardLayoutClass(index, items.length, columns)}\n classNames={classNames}\n />\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(Ksp)\n"],
5
+ "mappings": "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",
6
+ "names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "mobImage", "mobVideo", "tabletImage", "tabletVideo", "laptopImage", "laptopVideo", "desktopImage", "desktopVideo", "image", "video", "className", "theme", "classNames", "isMobile", "isTablet", "isLaptop", "getCurrentVideo", "getCurrentPoster", "currentVideo", "currentPoster", "buildImageSource", "sources", "lgDesktop", "desktop", "laptop", "tablet", "mobile", "hasVideo", "hasAnyImage", "LAYOUT_CONFIG_10", "LAYOUT_CONFIG_12", "getCardLayoutClass", "index", "totalCount", "gridColumns", "Ksp", "data", "rest", "items", "columns", "is12Col", "item"]
7
7
  }
package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var he=Object.create;var T=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var _e=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var ye=(t,n)=>{for(var i in n)T(t,i,{get:n[i],enumerable:!0})},A=(t,n,i,h)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of _e(n))!be.call(t,c)&&c!==i&&T(t,c,{get:()=>n[c],enumerable:!(h=ge(n,c))||h.enumerable});return t};var R=(t,n,i)=>(i=t!=null?he(we(t)):{},A(n||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),Te=t=>A(T({},"__esModule",{value:!0}),t);var Re={};ye(Re,{default:()=>Ie});module.exports=Te(Re);var o=require("react/jsx-runtime"),s=R(require("react")),$=require("../../helpers/utils.js"),d=require("../../components/tabs.js"),O=R(require("../Title/index.js")),K=R(require("../SwiperBox/index.js")),Q=require("../../shared/Styles.js"),D=require("../../shared/track.js"),W=require("react-responsive"),Z=require("../../hooks/useRollout.js"),v=require("./shelfDisplayItem.js");const ve="image",Se="product_shelf",ke=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default",q=s.default.forwardRef(({key:t,data:n,event:i,buildData:h,breakpoints:c,className:j="",recommendedData:p,target:F="_self",metafields:G,isDisplayGudgments:x=!1,isDisplayBackImage:J=!1,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne,...ae},re)=>{const{productsTab:m=[],productsCard:M=[],title:P,isShowTab:w=!0,tabShape:ie="square",isShowTag:oe=!1,isShowOriginalPrice:le=!0,isShowRecommendedCard:C=!1,...ce}=n,[b,H]=(0,s.useState)(""),[f,S]=(0,s.useState)([]),L=(0,s.useRef)(!1),k=(0,s.useRef)(!1),V=(0,s.useRef)(null),me=(0,s.useId)(),fe=(0,W.useMediaQuery)({query:"(max-width: 768px)"}),[pe,B]=(0,Z.useRollout)({threshold:0}),y=f?.length<=1&&x,g=!fe&&f?.length<=2&&x,I=e=>{switch(e){case 1440:return g?f?.length:4;case 1024:return g?f?.length:3;default:return g?f?.length:2.3}},E=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:p?.map((e,r)=>{const l=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:r+1}})}})},_=(e,r)=>{if(r){const u=p?.map?.(l=>({...l,isShowRecommended:!0}));S(u?.length?u||[]:[])}else if(Array.isArray(e)){const l=e?.map?.(a=>{const z=h?.products?.find(de=>de?.handle===a?.handle);if(z)return{sku:a.sku,isShowRecommended:!1,custom_name:a.custom_name,custom_description:a.custom_description,custom_image:a.custom_image,custom_theme:a.custom_theme,custom_primary_link:a?.custom_primary_link||"",custom_secondary_link:a?.custom_secondary_link||"",custom_bg_image:a?.custom_bg_image||"",...z}})?.filter(a=>a);S(l?.length?l||[]:[])}else S([])};(0,s.useImperativeHandle)(re,()=>V.current),(0,s.useEffect)(()=>{B&&p?.length&&!L.current&&(L.current=!0,E())},[B,p]),(0,s.useEffect)(()=>{if(!k.current){if(!k.current&&p?.length&&(k.current=!0),w){const e=m?.find(r=>r?.tab===b)||m?.[0];H(e?.tab||""),_(e?.data||[],e?.isShowRecommendedTab);return}_(M,C)}},[p]),(0,s.useEffect)(()=>{if(w){const e=m?.find(r=>r?.tab===b)||m?.[0];_(e?.data||[],e?.isShowRecommendedTab);return}_(M,C)},[h]);const ue=ke(b),N=`${me}-${ue}`;return(0,o.jsxs)("div",{ref:V,...ae,className:(0,$.cn)("shelf-display-wrap text-info-primary w-full",j,{"aiui-dark":n?.theme==="dark"}),children:[P&&(0,o.jsx)(O.default,{data:{title:P}}),w&&m?.length>0&&(0,o.jsx)(d.Tabs,{value:b,onValueChange:e=>{const r=m?.find(u=>u?.tab===e);if(r){if(H(e),_(r.data||[],r.isShowRecommendedTab),!r.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ve,component_name:Se,component_title:n?.title,component_position:1,navigation:e}});return}E()}},shape:ie==="rounded"?"rounded":"square",children:(0,o.jsx)(d.TabsList,{children:m.map(e=>(0,o.jsx)(d.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),(0,o.jsx)("div",{ref:pe,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(K.default,{data:{list:f,configuration:{...ce,event:i,isShowTag:oe,isShowOriginalPrice:le,target:F,metafields:G,itemLength:f?.length,isDisplayBackImage:J,renderOriginalPrice:U,renderPriceLabel:X,renderPrice:Y,onAddCart:ee,onBuyNow:te,onLearnMore:se,formatPrice:ne}},id:N,className:`${w?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:g?"flex-1":"",Slide:g?v.ShelfDisplayHorizontalItem:v.ShelfDisplayWrapItem,breakpoints:c||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:y?1:1.2},768:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1440)}}},N)})]})});q.displayName="ShelfDisplay";var Ie=(0,Q.withLayout)(q);
1
+ "use strict";"use client";var ge=Object.create;var T=Object.defineProperty;var _e=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var Te=(t,n)=>{for(var i in n)T(t,i,{get:n[i],enumerable:!0})},A=(t,n,i,h)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of be(n))!ye.call(t,c)&&c!==i&&T(t,c,{get:()=>n[c],enumerable:!(h=_e(n,c))||h.enumerable});return t};var R=(t,n,i)=>(i=t!=null?ge(we(t)):{},A(n||!t||!t.__esModule?T(i,"default",{value:t,enumerable:!0}):i,t)),ve=t=>A(T({},"__esModule",{value:!0}),t);var De={};Te(De,{default:()=>Re});module.exports=ve(De);var o=require("react/jsx-runtime"),s=R(require("react")),O=require("../../helpers/utils.js"),d=require("../../components/tabs.js"),K=R(require("../Title/index.js")),Q=R(require("../SwiperBox/index.js")),W=require("../../shared/Styles.js"),D=require("../../shared/track.js"),Z=require("react-responsive"),j=require("../../hooks/useRollout.js"),v=require("./shelfDisplayItem.js");const Se="image",ke="product_shelf",q=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default";function Ie(t){return t.trim().replace(/\s+/g,"-")}const $=s.default.forwardRef(({key:t,data:n,event:i,buildData:h,breakpoints:c,className:F="",recommendedData:u,target:G="_self",metafields:J,isDisplayGudgments:x=!1,isDisplayBackImage:U=!1,renderOriginalPrice:X,renderPriceLabel:Y,renderPrice:ee,onAddCart:te,onBuyNow:se,onLearnMore:ne,formatPrice:ae,...re},ie)=>{const{productsTab:m=[],productsCard:M=[],title:P,isShowTab:b=!0,tabShape:oe="square",isShowTag:le=!1,isShowOriginalPrice:ce=!0,isShowRecommendedCard:V=!1,...me}=n,[w,C]=(0,s.useState)(""),[f,S]=(0,s.useState)([]),H=(0,s.useRef)(!1),k=(0,s.useRef)(!1),L=(0,s.useRef)(null),fe=(0,s.useId)(),ue=(0,Z.useMediaQuery)({query:"(max-width: 768px)"}),[pe,B]=(0,j.useRollout)({threshold:0}),y=f?.length<=1&&x,g=!ue&&f?.length<=2&&x,I=e=>{switch(e){case 1440:return g?f?.length:4;case 1024:return g?f?.length:3;default:return g?f?.length:2.3}},E=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:u?.map((e,r)=>{const l=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:r+1}})}})},_=(e,r)=>{if(r){const p=u?.map?.(l=>({...l,isShowRecommended:!0}));S(p?.length?p||[]:[])}else if(Array.isArray(e)){const l=e?.map?.(a=>{const N=h?.products?.find(he=>he?.handle===a?.handle);if(N)return{sku:a.sku,isShowRecommended:!1,custom_name:a.custom_name,custom_description:a.custom_description,custom_image:a.custom_image,custom_theme:a.custom_theme,custom_primary_link:a?.custom_primary_link||"",custom_secondary_link:a?.custom_secondary_link||"",custom_bg_image:a?.custom_bg_image||"",...N}})?.filter(a=>a);S(l?.length?l||[]:[])}else S([])};(0,s.useImperativeHandle)(ie,()=>L.current),(0,s.useEffect)(()=>{B&&u?.length&&!H.current&&(H.current=!0,E())},[B,u]),(0,s.useEffect)(()=>{if(!k.current){if(!k.current&&u?.length&&(k.current=!0),b){const e=m?.find(r=>r?.tab===w)||m?.[0];C(e?.tab||""),_(e?.data||[],e?.isShowRecommendedTab);return}_(M,V)}},[u]),(0,s.useEffect)(()=>{if(b){const e=m?.find(r=>r?.tab===w)||m?.[0];_(e?.data||[],e?.isShowRecommendedTab);return}_(M,V)},[h]);const de=q(w),z=`${q(fe)}-${de}`;return(0,o.jsxs)("div",{ref:L,...re,className:(0,O.cn)("shelf-display-wrap text-info-primary w-full",F,{"aiui-dark":n?.theme==="dark"}),children:[P&&(0,o.jsx)(K.default,{data:{title:P}}),b&&m?.length>0&&(0,o.jsx)(d.Tabs,{value:w,onValueChange:e=>{const r=m?.find(p=>Ie(p?.tab)===e);if(r){if(C(e),_(r.data||[],r.isShowRecommendedTab),!r.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:Se,component_name:ke,component_title:n?.title,component_position:1,navigation:e}});return}E()}},shape:oe==="rounded"?"rounded":"square",children:(0,o.jsx)(d.TabsList,{children:m.map(e=>(0,o.jsx)(d.TabsTrigger,{value:e?.tab,children:e?.tab||""},e?.id||e?.tab))})}),(0,o.jsx)("div",{ref:pe,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(Q.default,{data:{list:f,configuration:{...me,event:i,isShowTag:le,isShowOriginalPrice:ce,target:G,metafields:J,itemLength:f?.length,isDisplayBackImage:U,renderOriginalPrice:X,renderPriceLabel:Y,renderPrice:ee,onAddCart:te,onBuyNow:se,onLearnMore:ne,formatPrice:ae}},id:z,className:`${b?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:g?"flex-1":"",Slide:g?v.ShelfDisplayHorizontalItem:v.ShelfDisplayWrapItem,breakpoints:c||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:y?1:1.2},768:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:y?0:16,freeMode:!1,slidesPerView:I(1440)}}},z)})]})});$.displayName="ShelfDisplay";var Re=(0,W.withLayout)($);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceId}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && productsTab?.length > 0 && (\n <Tabs\n value={tabId}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => item?.tab === value)\n if (currentTab) {\n setTabId(value)\n handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
5
- "mappings": "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",
6
- "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "SwiperBox"]
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle, useId } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger } from '../../components/tabs.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n ...rest\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceId = useId()\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n custom_primary_link: item?.custom_primary_link || '',\n custom_secondary_link: item?.custom_secondary_link || '',\n custom_bg_image: item?.custom_bg_image || '',\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const safeInstanceId = sanitizeCssSelector(instanceId)\n const swiperInstanceId = `${safeInstanceId}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n {...rest}\n className={cn('shelf-display-wrap text-info-primary w-full', className, {\n 'aiui-dark': data?.theme === 'dark',\n })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && productsTab?.length > 0 && (\n <Tabs\n value={tabId}\n onValueChange={value => {\n const currentTab = productsTab?.find(item => sanitizeTabValue(item?.tab) === value)\n if (currentTab) {\n setTabId(value)\n handleCurrentTab(currentTab.data || [], currentTab.isShowRecommendedTab)\n if (!currentTab.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: value,\n },\n })\n return\n }\n gackViewEvent()\n }\n }}\n shape={tabShape === 'rounded' ? 'rounded' : 'square'}\n >\n <TabsList>\n {productsTab.map(item => (\n <TabsTrigger key={item?.id || item?.tab} value={item?.tab}>\n {item?.tab || ''}\n </TabsTrigger>\n ))}\n </TabsList>\n </Tabs>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n renderOriginalPrice,\n renderPriceLabel,\n renderPrice,\n onAddCart,\n onBuyNow,\n onLearnMore,\n formatPrice,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nShelfDisplay.displayName = 'ShelfDisplay'\nexport default withLayout(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
+ "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabs", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "sanitizeTabValue", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "renderOriginalPrice", "renderPriceLabel", "renderPrice", "onAddCart", "onBuyNow", "onLearnMore", "formatPrice", "rest", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceId", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/components/tabs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var W=Object.create;var f=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var A=(t,e)=>{for(var a in e)f(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of k(e))!V.call(t,o)&&o!==a&&f(t,o,{get:()=>e[o],enumerable:!(s=E(e,o))||s.enumerable});return t};var x=(t,e,a)=>(a=t!=null?W(S(t)):{},y(e||!t||!t.__esModule?f(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>y(f({},"__esModule",{value:!0}),t);var M={};A(M,{Tabs:()=>h,TabsContent:()=>R,TabsList:()=>T,TabsTrigger:()=>v});module.exports=F(M);var i=require("react/jsx-runtime"),r=x(require("react")),d=require("../helpers/index.js"),n=x(require("@radix-ui/react-tabs")),g=require("class-variance-authority");function P(t){return t.trim().replace(/\s+/g,"-")}const b=r.createContext({align:"left",shape:"square"}),h=r.forwardRef(({children:t,align:e="left",shape:a="default",...s},o)=>(0,i.jsx)(n.Root,{ref:o,...s,children:(0,i.jsx)(b.Provider,{value:{align:e,shape:a},children:t})}));h.displayName="Tabs";const q=(0,g.cva)("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),j=(0,g.cva)("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),T=r.forwardRef(({className:t,...e},a)=>{const{align:s,shape:o}=r.useContext(b),l=s==="center"?"flex w-full justify-center":s==="right"?"flex w-full justify-end":null,p=(0,i.jsx)(n.List,{ref:a,className:(0,d.cn)("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",q({shape:o}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e});return l?(0,i.jsx)("div",{className:l,children:p}):p});T.displayName=n.List.displayName;const v=r.forwardRef(({className:t,onClick:e,value:a,...s},o)=>{const{shape:l}=r.useContext(b),p=c=>{e?.(c);const m=c?.currentTarget,u=c?.currentTarget?.parentElement;if(m&&u){const C=m.offsetLeft,w=m.offsetWidth,L=u.offsetWidth,N=C-L/2+w/2;u.scrollTo({left:N,behavior:"smooth"})}};return(0,i.jsx)(n.Trigger,{ref:o,className:(0,d.cn)("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,j({shape:l})),onClick:p,value:P(a),...s})});v.displayName=n.Trigger.displayName;const R=r.forwardRef(({className:t,value:e,...a},s)=>(0,i.jsx)(n.Content,{ref:s,className:(0,d.cn)(t),value:P(e),...a}));R.displayName=n.Content.displayName;
1
+ "use strict";"use client";var W=Object.create;var f=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var A=(t,e)=>{for(var a in e)f(t,a,{get:e[a],enumerable:!0})},y=(t,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of k(e))!V.call(t,o)&&o!==a&&f(t,o,{get:()=>e[o],enumerable:!(s=E(e,o))||s.enumerable});return t};var P=(t,e,a)=>(a=t!=null?W(S(t)):{},y(e||!t||!t.__esModule?f(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>y(f({},"__esModule",{value:!0}),t);var M={};A(M,{Tabs:()=>T,TabsContent:()=>x,TabsList:()=>R,TabsTrigger:()=>v});module.exports=F(M);var r=require("react/jsx-runtime"),n=P(require("react")),c=require("../helpers/index.js"),i=P(require("@radix-ui/react-tabs")),h=require("class-variance-authority");function d(t){return t.trim().replace(/\s+/g,"-")}const g=n.createContext({align:"left",shape:"square"}),T=n.forwardRef(({children:t,align:e="left",shape:a="default",value:s,...o},l)=>(0,r.jsx)(i.Root,{ref:l,value:s!=null?d(String(s)):void 0,...o,children:(0,r.jsx)(g.Provider,{value:{align:e,shape:a},children:t})}));T.displayName="Tabs";const q=(0,h.cva)("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),j=(0,h.cva)("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),R=n.forwardRef(({className:t,...e},a)=>{const{align:s,shape:o}=n.useContext(g),l=s==="center"?"flex w-full justify-center":s==="right"?"flex w-full justify-end":null,p=(0,r.jsx)(i.List,{ref:a,className:(0,c.cn)("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",q({shape:o}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...e});return l?(0,r.jsx)("div",{className:l,children:p}):p});R.displayName=i.List.displayName;const v=n.forwardRef(({className:t,onClick:e,value:a,...s},o)=>{const{shape:l}=n.useContext(g),p=m=>{e?.(m);const u=m?.currentTarget,b=m?.currentTarget?.parentElement;if(u&&b){const C=u.offsetLeft,w=u.offsetWidth,L=b.offsetWidth,N=C-L/2+w/2;b.scrollTo({left:N,behavior:"smooth"})}};return(0,r.jsx)(i.Trigger,{ref:o,className:(0,c.cn)("text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]",t,j({shape:l})),onClick:p,value:d(a),"data-radix-collection-item":d(a),...s})});v.displayName=i.Trigger.displayName;const x=n.forwardRef(({className:t,value:e,...a},s)=>(0,r.jsx)(i.Content,{ref:s,className:(0,c.cn)(t),value:d(e),...a}));x.displayName=i.Content.displayName;
2
2
  //# sourceMappingURL=tabs.js.map
package/dist/cjs/components/tabs.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/tabs.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\ntype tabShape = Shape | 'default'\n\n/**\n * Sanitize a tab value so it is safe to use as part of an HTML id attribute.\n *\n * HTML ids must not contain whitespace characters. Radix UI uses the value\n * directly in generated ids (e.g. `radix-:r0:-trigger-{value}`), so an\n * unsanitized value like \"best seller\" would produce an invalid id.\n *\n * This function replaces any sequence of whitespace with a single hyphen and\n * trims leading/trailing whitespace, leaving all other characters intact.\n */\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: tabShape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: tabShape\n }\n>(({ children, align = 'left', shape = 'default', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n\n const wrapperClass =\n alignFromParent === 'center'\n ? 'flex w-full justify-center'\n : alignFromParent === 'right'\n ? 'flex w-full justify-end'\n : null\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({ shape: shapeFromParent }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n\n return wrapperClass ? <div className={wrapperClass}>{list}</div> : list\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, value, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = e?.currentTarget?.parentElement\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n value={sanitizeTabValue(value)}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, value, ...props }, ref) => (\n <TabsPrimitive.Content ref={ref} className={cn(className)} value={sanitizeTabValue(value)} {...props} />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\nimport type { Align, Shape } from '../types/props.js'\n\ntype tabShape = Shape | 'default'\n\n/**\n * Sanitize a tab value so it is safe to use as part of an HTML id attribute.\n *\n * HTML ids must not contain whitespace characters. Radix UI uses the value\n * directly in generated ids (e.g. `radix-:r0:-trigger-{value}`), so an\n * unsanitized value like \"best seller\" would produce an invalid id.\n *\n * This function replaces any sequence of whitespace with a single hyphen and\n * trims leading/trailing whitespace, leaving all other characters intact.\n */\nfunction sanitizeTabValue(value: string): string {\n return value.trim().replace(/\\s+/g, '-')\n}\n\nconst TabListContext = React.createContext<{\n align?: Align\n shape: tabShape\n}>({\n align: 'left',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n align?: Align\n shape?: tabShape\n }\n>(({ children, align = 'left', shape = 'default', value, ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} value={value != null ? sanitizeTabValue(String(value)) : undefined} {...props}>\n <TabListContext.Provider value={{ align, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\n\nconst tabsTriggerVariants = cva('rounded-tabs', {\n variants: {\n shape: {\n default: '',\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'default',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { align: alignFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n\n const wrapperClass =\n alignFromParent === 'center'\n ? 'flex w-full justify-center'\n : alignFromParent === 'right'\n ? 'flex w-full justify-end'\n : null\n\n const list = (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1',\n tabsListVariants({ shape: shapeFromParent }),\n className\n )}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n {...props}\n />\n )\n\n return wrapperClass ? <div className={wrapperClass}>{list}</div> : list\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, onClick, value, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e)\n const tabElement = e?.currentTarget\n const container = e?.currentTarget?.parentElement\n if (tabElement && container) {\n const tabLeft = tabElement.offsetLeft\n const tabWidth = tabElement.offsetWidth\n const containerWidth = container.offsetWidth\n const scrollTo = tabLeft - containerWidth / 2 + tabWidth / 2\n container.scrollTo({\n left: scrollTo,\n behavior: 'smooth',\n })\n }\n }\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-base disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-5 pb-2.5 pt-[11px] text-sm font-bold data-[state=active]:bg-white data-[state=active]:text-[#080A0F]',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n onClick={handleClick}\n value={sanitizeTabValue(value)}\n data-radix-collection-item={sanitizeTabValue(value)}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, value, ...props }, ref) => (\n <TabsPrimitive.Content ref={ref} className={cn(className)} value={sanitizeTabValue(value)} {...props} />\n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
5
+ "mappings": "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",
6
6
  "names": ["tabs_exports", "__export", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "TabsPrimitive", "import_class_variance_authority", "sanitizeTabValue", "value", "TabListContext", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "className", "alignFromParent", "shapeFromParent", "wrapperClass", "list", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo"]
7
7
  }