@anker-in/headless-ui 1.3.37 → 1.3.38

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 (16) 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/components/tabs.js +1 -1
  7. package/dist/cjs/components/tabs.js.map +2 -2
  8. package/dist/esm/biz-components/FeaturedBlogPosts/index.js +1 -1
  9. package/dist/esm/biz-components/FeaturedBlogPosts/index.js.map +2 -2
  10. package/dist/esm/biz-components/Ksp/index.d.ts +2 -0
  11. package/dist/esm/biz-components/Ksp/index.js +1 -1
  12. package/dist/esm/biz-components/Ksp/index.js.map +3 -3
  13. package/dist/esm/components/tabs.js +1 -1
  14. package/dist/esm/components/tabs.js.map +2 -2
  15. package/package.json +1 -1
  16. 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/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 n=require("react/jsx-runtime"),i=P(require("react")),d=require("../helpers/index.js"),r=P(require("@radix-ui/react-tabs")),h=require("class-variance-authority");function b(t){return t.trim().replace(/\s+/g,"-")}const g=i.createContext({align:"left",shape:"square"}),T=i.forwardRef(({children:t,align:e="left",shape:a="default",...s},o)=>(0,n.jsx)(r.Root,{ref:o,...s,children:(0,n.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=i.forwardRef(({className:t,...e},a)=>{const{align:s,shape:o}=i.useContext(g),l=s==="center"?"flex w-full justify-center":s==="right"?"flex w-full justify-end":null,p=(0,n.jsx)(r.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,n.jsx)("div",{className:l,children:p}):p});R.displayName=r.List.displayName;const v=i.forwardRef(({className:t,onClick:e,value:a,...s},o)=>{const{shape:l}=i.useContext(g),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,n.jsx)(r.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:b(a),"data-radix-collection-item":b(a),...s})});v.displayName=r.Trigger.displayName;const x=i.forwardRef(({className:t,value:e,...a},s)=>(0,n.jsx)(r.Content,{ref:s,className:(0,d.cn)(t),value:b(e),...a}));x.displayName=r.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', ...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\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
  }
package/dist/esm/biz-components/FeaturedBlogPosts/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as l,jsxs as p}from"react/jsx-runtime";import*as u from"react";import{cn as r}from"../../helpers/index.js";import y from"../../components/picture.js";import{Heading as h,Text as m}from"../../index.js";import{withLayout as P}from"../../shared/Styles.js";const F=o=>{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:a})=>o[a]?.url).map(({key:a,width:d})=>`${o[a].url} ${d}`);if(s.length>0)return s.join(", ");for(const{key:a}of t)if(o[a]?.url)return o[a].url;return""},B=(o,t)=>{const s=["desktop","laptop","pad","mobile","lgDesktop"];for(const a of s)if(o[a]?.alt)return o[a].alt;return t},I=(o="full")=>({full:"laptop:col-span-3","2/3":"laptop:col-span-2","1/3":"laptop:col-span-1"})[o],w=(o="full")=>o==="1/3"?"":"laptop:flex-row",R=(o="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]"})[o],k=u.forwardRef(({className:o,classNames:t={},data:s,onItemClick:a,...d},x)=>{const{title:n,subtitle:g,items:f}=s,b=u.useCallback((e,i)=>c=>{a?.(e,i,c)},[a]);return p("div",{ref:x,className:r("blog-posts-root","text-info-primary w-full",o,t.root),...d,children:[(n||g)&&p("div",{className:r("blog-posts-header mb-6",t.header),children:[n&&l(h,{as:"h2",size:4,html:n,className:r("blog-posts-title",t.title)}),g&&l(m,{as:"p",size:3,className:r("",t?.subtitle),html:g})]}),l("div",{className:r("blog-posts-grid","laptop:grid-cols-3 grid grid-cols-1 gap-4",t.grid),children:f.map((e,i)=>{const c=e.link?"a":"div",v=e.link?{href:e.link}:{};return p(u.Fragment,{children:[p(c,{...v,className:r("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",I(e.width||"full"),w(e.width||"full"),t.card),onClick:b(e,i),children:[l("div",{className:r("blog-posts-card-image","relative w-full overflow-hidden","h-[200px] shrink-0",R(e.width||"full"),t.cardImage),children:l(y,{source:F(e.image),alt:B(e.image,e.title),className:"rounded-box h-full object-cover",imgClassName:"h-full"})}),p("div",{className:r("blog-posts-card-content","desktop:gap-6 flex flex-col justify-center gap-4",t.cardContent),children:[p("div",{className:"desktop:gap-2 flex flex-col gap-1",children:[l(h,{size:2,as:"h6",className:r("blog-posts-card-title line-clamp-3",t.cardTitle),html:e.title}),e.description&&l(m,{className:r("blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]",t.cardDescription),html:e.description})]}),e.date&&l(m,{className:r("blog-posts-card-meta","text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",t.cardMeta),html:e.date})]})]}),i<f.length-1&&l("div",{className:r("blog-posts-separator","bg-lines-primary laptop:hidden h-px w-full",t.separator)})]},i)})})]})});k.displayName="FeaturedBlogPosts";const C=P(k);var z=C;export{z as default};
1
+ "use client";import{jsx as p,jsxs as r}from"react/jsx-runtime";import*as u from"react";import{cn as s}from"../../helpers/index.js";import y from"../../components/picture.js";import{Heading as k,Text as m}from"../../index.js";import{withLayout as P}from"../../shared/Styles.js";const w=o=>{const t=[{key:"lgDesktop",width:1920},{key:"desktop",width:1440},{key:"laptop",width:1024},{key:"pad",width:768},{key:"mobile",width:390}],l=t.filter(({key:a})=>o[a]?.url).map(({key:a,width:d})=>`${o[a].url} ${d}`);if(l.length>0)return l.join(", ");for(const{key:a}of t)if(o[a]?.url)return o[a].url;return""},F=(o,t)=>{const l=["desktop","laptop","pad","mobile","lgDesktop"];for(const a of l)if(o[a]?.alt)return o[a].alt;return t},B=(o="full")=>({full:"laptop:col-span-3","2/3":"laptop:col-span-2","1/3":"laptop:col-span-1"})[o],I=(o="full")=>o==="1/3"?"":"laptop:flex-row",R=(o="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]"})[o],b=u.forwardRef(({className:o,classNames:t={},data:l,onItemClick:a,...d},h)=>{const{title:n,subtitle:c,items:f}=l,x=u.useCallback((e,i)=>g=>{a?.(e,i,g)},[a]);return r("div",{ref:h,className:s("blog-posts-root","text-info-primary w-full",o,t.root),...d,children:[(n||c)&&r("div",{className:s("blog-posts-header mb-6",t.header),children:[n&&p(k,{as:"h2",size:4,html:n,className:s("blog-posts-title",t.title)}),c&&p(m,{as:"p",size:3,className:s("",t?.subtitle),html:c})]}),p("div",{className:s("blog-posts-grid","laptop:grid-cols-3 grid grid-cols-1 gap-4",t.grid),children:f.map((e,i)=>{const g=e.link?"a":"div",v=e.link?{href:e.link}:{};return r(u.Fragment,{children:[r(g,{...v,className:s("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",B(e.width||"full"),I(e.width||"full"),t.card),onClick:x(e,i),children:[p("div",{className:s("blog-posts-card-image","relative w-full overflow-hidden","laptop:min-h-0 min-h-[200px] shrink-0",R(e.width||"full"),t.cardImage),children:p(y,{source:w(e.image),alt:F(e.image,e.title),className:"rounded-t-box h-full object-cover",imgClassName:e.width==="1/3"?"h-auto object-cover":"w-full laptop:h-full laptop:w-[unset] object-cover"})}),r("div",{className:s("blog-posts-card-content","desktop:gap-6 flex flex-col justify-center gap-4",t.cardContent),children:[r("div",{className:"desktop:gap-2 flex flex-col gap-1",children:[p(k,{size:2,as:"h6",className:s("blog-posts-card-title line-clamp-3",t.cardTitle),html:e.title}),e.description&&p(m,{className:s("blog-posts-card-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]",t.cardDescription),html:e.description})]}),e.date&&p(m,{className:s("blog-posts-card-meta","text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",t.cardMeta),html:e.date})]})]}),i<f.length-1&&p("div",{className:s("blog-posts-separator","bg-lines-primary laptop:hidden h-px w-full",t.separator)})]},i)})})]})});b.displayName="FeaturedBlogPosts";const C=P(b);var z=C;export{z as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/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": "aAoLU,OACY,OAAAA,EADZ,QAAAC,MAAA,oBAlLV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BAEpB,OAAS,WAAAC,EAAS,QAAAC,MAAY,iBAC9B,OAAS,cAAAC,MAAkB,yBA2E3B,MAAMC,EAAkBC,GAAmC,CACzD,MAAMC,EAA+D,CACnE,CAAE,IAAK,YAAa,MAAO,IAAK,EAChC,CAAE,IAAK,UAAW,MAAO,IAAK,EAC9B,CAAE,IAAK,SAAU,MAAO,IAAK,EAC7B,CAAE,IAAK,MAAO,MAAO,GAAI,EACzB,CAAE,IAAK,SAAU,MAAO,GAAI,CAC9B,EAEMC,EAAUD,EACb,OAAO,CAAC,CAAE,IAAAE,CAAI,IAAMH,EAAMG,CAAG,GAAG,GAAG,EACnC,IAAI,CAAC,CAAE,IAAAA,EAAK,MAAAC,CAAM,IAAM,GAAGJ,EAAMG,CAAG,EAAG,GAAG,IAAIC,CAAK,EAAE,EAGxD,GAAIF,EAAQ,OAAS,EACnB,OAAOA,EAAQ,KAAK,IAAI,EAI1B,SAAW,CAAE,IAAAC,CAAI,IAAKF,EACpB,GAAID,EAAMG,CAAG,GAAG,IAAK,OAAOH,EAAMG,CAAG,EAAG,IAG1C,MAAO,EACT,EAKME,EAAc,CAACL,EAAwBM,IAA6B,CACxE,MAAMC,EAAkC,CAAC,UAAW,SAAU,MAAO,SAAU,WAAW,EAC1F,UAAWJ,KAAOI,EAChB,GAAIP,EAAMG,CAAG,GAAG,IAAK,OAAOH,EAAMG,CAAG,EAAG,IAE1C,OAAOG,CACT,EAKME,EAAe,CAACC,EAA6B,UACK,CACpD,KAAM,oBACN,MAAO,oBACP,MAAO,mBACT,GACeA,CAAI,EAOfC,EAAiB,CAACD,EAA6B,SAC5CA,IAAS,MAAQ,GAAK,kBASzBE,EAAoB,CAACF,EAA6B,UACA,CACpD,KAAM,0HACN,MACE,2HACF,MACE,qIACJ,GACeA,CAAI,EAQfG,EAAwBnB,EAAM,WAClC,CAAC,CAAE,UAAAoB,EAAW,WAAAC,EAAa,CAAC,EAAG,KAAAC,EAAM,YAAAC,EAAa,GAAGC,CAAM,EAAGC,IAAQ,CACpE,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,CAAM,EAAIN,EAE7BO,EAAkB7B,EAAM,YAC5B,CAAC8B,EAA4BC,IAAmBC,GAA4B,CAC1ET,IAAcO,EAAMC,EAAOC,CAAK,CAClC,EACA,CAACT,CAAW,CACd,EAEA,OACExB,EAAC,OACC,IAAK0B,EACL,UAAWxB,EAAG,kBAAmB,2BAA4BmB,EAAWC,EAAW,IAAI,EACtF,GAAGG,EAGF,WAAAE,GAASC,IACT5B,EAAC,OAAI,UAAWE,EAAG,yBAA0BoB,EAAW,MAAM,EAC3D,UAAAK,GAAS5B,EAACK,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMuB,EAAO,UAAWzB,EAAG,mBAAoBoB,EAAW,KAAK,EAAG,EACrGM,GAAY7B,EAACM,EAAA,CAAK,GAAG,IAAI,KAAM,EAAG,UAAWH,EAAG,GAAIoB,GAAY,QAAQ,EAAG,KAAMM,EAAU,GAC9F,EAEF7B,EAAC,OAAI,UAAWG,EAAG,kBAAmB,4CAA6CoB,EAAW,IAAI,EAC/F,SAAAO,EAAM,IAAI,CAACE,EAAMC,IAAU,CAC1B,MAAME,EAAcH,EAAK,KAAO,IAAM,MAChCI,EAAYJ,EAAK,KAAO,CAAE,KAAMA,EAAK,IAAK,EAAI,CAAC,EAErD,OACE/B,EAACC,EAAM,SAAN,CACC,UAAAD,EAACkC,EAAA,CACE,GAAGC,EACJ,UAAWjC,EACT,8BACA,qCACA,wEACA,oDACA,2BACAc,EAAae,EAAK,OAAS,MAAM,EACjCb,EAAea,EAAK,OAAS,MAAM,EACnCT,EAAW,IACb,EACA,QAASQ,EAAgBC,EAAMC,CAAK,EAGpC,UAAAjC,EAAC,OACC,UAAWG,EACT,wBACA,kCACA,wCACAiB,EAAkBY,EAAK,OAAS,MAAM,EACtCT,EAAW,SACb,EAEA,SAAAvB,EAACI,EAAA,CACC,OAAQI,EAAewB,EAAK,KAAK,EACjC,IAAKlB,EAAYkB,EAAK,MAAOA,EAAK,KAAK,EACvC,UAAU,oCACV,aACEA,EAAK,QAAU,MACX,sBACA,qDAER,EACF,EAGA/B,EAAC,OACC,UAAWE,EACT,0BACA,mDACAoB,EAAW,WACb,EAEA,UAAAtB,EAAC,OAAI,UAAU,oCACb,UAAAD,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAWF,EAAG,qCAAsCoB,EAAW,SAAS,EACxE,KAAMS,EAAK,MACb,EAECA,EAAK,aACJhC,EAACM,EAAA,CACC,UAAWH,EACT,kGACAoB,EAAW,eACb,EACA,KAAMS,EAAK,YACb,GAEJ,EACCA,EAAK,MACJhC,EAACM,EAAA,CACC,UAAWH,EACT,uBACA,4EACAoB,EAAW,QACb,EACA,KAAMS,EAAK,KACb,GAEJ,GACF,EAGCC,EAAQH,EAAM,OAAS,GACtB9B,EAAC,OACC,UAAWG,EACT,uBACA,6CACAoB,EAAW,SACb,EACF,IApFiBU,CAsFrB,CAEJ,CAAC,EACH,GACF,CAEJ,CACF,EAEAZ,EAAsB,YAAc,oBAEpC,MAAMgB,EAAoB9B,EAAWc,CAAqB,EAE1D,IAAOiB,EAAQD",
6
6
  "names": ["jsx", "jsxs", "React", "cn", "Picture", "Heading", "Text", "withLayout", "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", "FeaturedBlogPosts", "FeaturedBlogPosts_default"]
7
7
  }
package/dist/esm/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/esm/biz-components/Ksp/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as s,jsxs as M}from"react/jsx-runtime";import{useMediaQuery as y}from"react-responsive";import{Heading as C,Picture as A,Text as H}from"../../components/index.js";import{cn as t}from"../../helpers/utils.js";import{withLayout as O}from"../../shared/Styles.js";const R=({title:d,desc:w,mobImage:e,mobVideo:m,tabletImage:h,tabletVideo:n,laptopImage:c,laptopVideo:k,desktopImage:p,desktopVideo:g,image:l,video:u,className:z,theme:L,classNames:a})=>{const N=y({query:"(max-width: 767px)"}),K=y({query:"(min-width: 768px) and (max-width: 1024px)"}),T=y({query:"(min-width: 1025px) and (max-width: 1439px)"}),j=()=>N?m||n||k||g||u:K?n||k||g||u:T?k||g||u:g||u,D=()=>N?e||h||c||p||l:K?h||c||p||l:T?c||p||l:p||l,v=j(),P=D(),I=()=>{const o=[],f=l?.url||p?.url,r=p?.url||l?.url,i=c?.url||r,b=h?.url||i,x=e?.url||b;return f&&o.push(f),r&&r!==f&&o.push(`${r} 1920`),i&&i!==r&&o.push(`${i} 1440`),b&&b!==i&&o.push(`${b} 1025`),x&&x!==b&&o.push(`${x} 768`),o.length>0?o.join(", "):void 0},$=!!v?.url,q=!!(e?.url||h?.url||c?.url||p?.url||l?.url);return M("div",{className:t("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":L==="dark"},z,a?.card),children:[$?s("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:v?.url,poster:P?.url,className:t("ksp-card-video absolute bottom-0 w-full object-cover",a?.cardVideo)}):q&&s(A,{source:I(),alt:P?.alt||"",className:t("ksp-card-image size-full",a?.cardImage),imgClassName:t("size-full object-cover object-bottom",a?.cardImageImg)}),M("div",{className:t("ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",a?.cardContent),children:[s(C,{size:3,html:d,className:t("ksp-card-title tablet:block hidden w-full",a?.cardTitle)}),s(C,{size:2,html:d,className:t("ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full",a?.cardTitle)}),s(H,{size:2,html:w,className:t("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]",a?.cardDesc)})]})]})},V={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]"}},E=(d,w)=>V[w]?.[d]||"";function F({data:d,className:w,classNames:e,...m}){const{title:h,items:n,theme:c="light"}=d;return M("section",{...m,"data-ui-component-id":"ksp",className:t("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":c==="dark"},w,e?.root),children:[s(C,{as:"h1",size:4,html:h,className:t("ksp-title laptop:text-center text-left",e?.title)}),s("div",{className:t("ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3",e?.layout),children:n.map((k,p)=>s(R,{...k,className:E(p,n.length),classNames:e},p))})]})}var Y=O(F);export{Y as default};
1
+ "use client";import{jsx as c,jsxs as M}from"react/jsx-runtime";import{useMediaQuery as C}from"react-responsive";import{Heading as y,Picture as A,Text as _}from"../../components/index.js";import{cn as t}from"../../helpers/utils.js";import{withLayout as $}from"../../shared/Styles.js";const q=({title:h,desc:g,mobImage:p,mobVideo:m,tabletImage:k,tabletVideo:b,laptopImage:o,laptopVideo:n,desktopImage:a,desktopVideo:w,image:s,video:l,className:L,theme:z,classNames:e})=>{const N=C({query:"(max-width: 767px)"}),T=C({query:"(min-width: 768px) and (max-width: 1024px)"}),K=C({query:"(min-width: 1025px) and (max-width: 1439px)"}),I=()=>N?m||b||n||w||l:T?b||n||w||l:K?n||w||l:w||l,j=()=>N?p||k||o||a||s:T?k||o||a||s:K?o||a||s:a||s,v=I(),P=j(),D=()=>{const d=[],f=s?.url||a?.url,r=a?.url||s?.url,i=o?.url||r,u=k?.url||i,x=p?.url||u;return f&&d.push(f),r&&r!==f&&d.push(`${r} 1920`),i&&i!==r&&d.push(`${i} 1440`),u&&u!==i&&d.push(`${u} 1025`),x&&x!==u&&d.push(`${x} 768`),d.length>0?d.join(", "):void 0},O=!!v?.url,R=!!(p?.url||k?.url||o?.url||a?.url||s?.url);return M("div",{className:t("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":z==="dark"},L,e?.card),children:[O?c("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:v?.url,poster:P?.url,className:t("ksp-card-video absolute bottom-0 w-full object-cover",e?.cardVideo)}):R&&c(A,{source:D(),alt:P?.alt||"",className:t("ksp-card-image size-full",e?.cardImage),imgClassName:t("size-full object-cover object-bottom",e?.cardImageImg)}),M("div",{className:t("ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",e?.cardContent),children:[c(y,{size:3,html:h,className:t("ksp-card-title tablet:block hidden w-full",e?.cardTitle)}),c(y,{size:2,html:h,className:t("ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full",e?.cardTitle)}),c(_,{size:2,html:g,className:t("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]",e?.cardDesc)})]})]})},H={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]"}},V={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]"}},F=(h,g,p)=>(p===12?V:H)[g]?.[h]||"";function G({data:h,className:g,classNames:p,...m}){const{title:k,items:b,theme:o="light",gridColumns:n}=h,a=n?Number(n):10,w=a===12;return M("section",{...m,"data-ui-component-id":"ksp",className:t("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":o==="dark"},g,p?.root),children:[c(y,{as:"h1",size:4,html:k,className:t("ksp-title laptop:text-center text-left",p?.title)}),c("div",{className:t("ksp-layout tablet:grid-cols-3 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3",w?"laptop:grid-cols-12":"laptop:grid-cols-10",p?.layout),children:b.map((s,l)=>c(q,{...s,className:F(l,b.length,a),classNames:p},l))})]})}var S=$(G);export{S as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/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": ["jsx", "jsxs", "useMediaQuery", "Heading", "Picture", "Text", "cn", "withLayout", "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", "Ksp_default"]
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": ["jsx", "jsxs", "useMediaQuery", "Heading", "Picture", "Text", "cn", "withLayout", "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", "Ksp_default"]
7
7
  }
package/dist/esm/components/tabs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as n}from"react/jsx-runtime";import*as o from"react";import{cn as m}from"../helpers/index.js";import*as r from"@radix-ui/react-tabs";import{cva as b}from"class-variance-authority";function g(t){return t.trim().replace(/\s+/g,"-")}const u=o.createContext({align:"left",shape:"square"}),h=o.forwardRef(({children:t,align:a="left",shape:s="default",...e},i)=>n(r.Root,{ref:i,...e,children:n(u.Provider,{value:{align:a,shape:s},children:t})}));h.displayName="Tabs";const w=b("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),L=b("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),T=o.forwardRef(({className:t,...a},s)=>{const{align:e,shape:i}=o.useContext(u),l=e==="center"?"flex w-full justify-center":e==="right"?"flex w-full justify-end":null,p=n(r.List,{ref:s,className:m("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",w({shape:i}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...a});return l?n("div",{className:l,children:p}):p});T.displayName=r.List.displayName;const v=o.forwardRef(({className:t,onClick:a,value:s,...e},i)=>{const{shape:l}=o.useContext(u),p=f=>{a?.(f);const d=f?.currentTarget,c=f?.currentTarget?.parentElement;if(d&&c){const y=d.offsetLeft,x=d.offsetWidth,P=c.offsetWidth,C=y-P/2+x/2;c.scrollTo({left:C,behavior:"smooth"})}};return n(r.Trigger,{ref:i,className:m("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,L({shape:l})),onClick:p,value:g(s),...e})});v.displayName=r.Trigger.displayName;const R=o.forwardRef(({className:t,value:a,...s},e)=>n(r.Content,{ref:e,className:m(t),value:g(a),...s}));R.displayName=r.Content.displayName;export{h as Tabs,R as TabsContent,T as TabsList,v as TabsTrigger};
1
+ "use client";import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{cn as m}from"../helpers/index.js";import*as i from"@radix-ui/react-tabs";import{cva as g}from"class-variance-authority";function u(t){return t.trim().replace(/\s+/g,"-")}const b=o.createContext({align:"left",shape:"square"}),h=o.forwardRef(({children:t,align:s="left",shape:e="default",...a},n)=>r(i.Root,{ref:n,...a,children:r(b.Provider,{value:{align:s,shape:e},children:t})}));h.displayName="Tabs";const w=g("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),L=g("rounded-tabs",{variants:{shape:{default:"",rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"default"}}),T=o.forwardRef(({className:t,...s},e)=>{const{align:a,shape:n}=o.useContext(b),l=a==="center"?"flex w-full justify-center":a==="right"?"flex w-full justify-end":null,p=r(i.List,{ref:e,className:m("bg-tabs-list-bg flex w-fit max-w-full overflow-x-auto p-1",w({shape:n}),t),style:{scrollbarWidth:"none",msOverflowStyle:"none"},...s});return l?r("div",{className:l,children:p}):p});T.displayName=i.List.displayName;const R=o.forwardRef(({className:t,onClick:s,value:e,...a},n)=>{const{shape:l}=o.useContext(b),p=f=>{s?.(f);const d=f?.currentTarget,c=f?.currentTarget?.parentElement;if(d&&c){const x=d.offsetLeft,y=d.offsetWidth,P=c.offsetWidth,C=x-P/2+y/2;c.scrollTo({left:C,behavior:"smooth"})}};return r(i.Trigger,{ref:n,className:m("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,L({shape:l})),onClick:p,value:u(e),"data-radix-collection-item":u(e),...a})});R.displayName=i.Trigger.displayName;const v=o.forwardRef(({className:t,value:s,...e},a)=>r(i.Content,{ref:a,className:m(t),value:u(s),...e}));v.displayName=i.Content.displayName;export{h as Tabs,v as TabsContent,T as TabsList,R as TabsTrigger};
2
2
  //# sourceMappingURL=tabs.js.map
package/dist/esm/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": "aAyCI,cAAAA,MAAA,oBAvCJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAepB,SAASC,EAAiBC,EAAuB,CAC/C,OAAOA,EAAM,KAAK,EAAE,QAAQ,OAAQ,GAAG,CACzC,CAEA,MAAMC,EAAiBN,EAAM,cAG1B,CACD,MAAO,OACP,MAAO,QACT,CAAC,EAEKO,EAAOP,EAAM,WAMjB,CAAC,CAAE,SAAAQ,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,UAAW,GAAGC,CAAM,EAAGC,IAC5Db,EAACG,EAAc,KAAd,CAAmB,IAAKU,EAAM,GAAGD,EAChC,SAAAZ,EAACO,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAC,CAAM,EAAI,SAAAF,EAAS,EAC9D,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMM,EAAmBV,EAAI,eAAgB,CAC3C,SAAU,CACR,MAAO,CACL,QAAS,GACT,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,SACT,CACF,CAAC,EAEKW,EAAsBX,EAAI,eAAgB,CAC9C,SAAU,CACR,MAAO,CACL,QAAS,GACT,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,SACT,CACF,CAAC,EACKY,EAAWf,EAAM,WAGrB,CAAC,CAAE,UAAAgB,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIlB,EAAM,WAAWM,CAAc,EAEpFa,EACJF,IAAoB,SAChB,6BACAA,IAAoB,QAClB,0BACA,KAEFG,EACJrB,EAACG,EAAc,KAAd,CACC,IAAKU,EACL,UAAWX,EACT,4DACAY,EAAiB,CAAE,MAAOK,CAAgB,CAAC,EAC3CF,CACF,EACA,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACC,GAAGL,EACN,EAGF,OAAOQ,EAAepB,EAAC,OAAI,UAAWoB,EAAe,SAAAC,EAAK,EAASA,CACrE,CAAC,EACDL,EAAS,YAAcb,EAAc,KAAK,YAE1C,MAAMmB,EAAcrB,EAAM,WAGxB,CAAC,CAAE,UAAAgB,EAAW,QAAAM,EAAS,MAAAjB,EAAO,GAAGM,CAAM,EAAGC,IAAQ,CAClD,KAAM,CAAE,MAAOM,CAAgB,EAAIlB,EAAM,WAAWM,CAAc,EAC5DiB,EAAeC,GAA2C,CAC9DF,IAAUE,CAAC,EACX,MAAMC,EAAaD,GAAG,cAChBE,EAAYF,GAAG,eAAe,cACpC,GAAIC,GAAcC,EAAW,CAC3B,MAAMC,EAAUF,EAAW,WACrBG,EAAWH,EAAW,YACtBI,EAAiBH,EAAU,YAC3BI,EAAWH,EAAUE,EAAiB,EAAID,EAAW,EAC3DF,EAAU,SAAS,CACjB,KAAMI,EACN,SAAU,QACZ,CAAC,CACH,CACF,EACA,OACE/B,EAACG,EAAc,QAAd,CACC,IAAKU,EACL,UAAWX,EACT,8PACAe,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACA,QAASK,EACT,MAAOnB,EAAiBC,CAAK,EAC5B,GAAGM,EACN,CAEJ,CAAC,EACDU,EAAY,YAAcnB,EAAc,QAAQ,YAEhD,MAAM6B,EAAc/B,EAAM,WAGxB,CAAC,CAAE,UAAAgB,EAAW,MAAAX,EAAO,GAAGM,CAAM,EAAGC,IACjCb,EAACG,EAAc,QAAd,CAAsB,IAAKU,EAAK,UAAWX,EAAGe,CAAS,EAAG,MAAOZ,EAAiBC,CAAK,EAAI,GAAGM,EAAO,CACvG,EACDoB,EAAY,YAAc7B,EAAc,QAAQ",
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\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": ["jsx", "React", "cn", "TabsPrimitive", "cva", "sanitizeTabValue", "value", "TabListContext", "Tabs", "children", "align", "shape", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alignFromParent", "shapeFromParent", "wrapperClass", "list", "TabsTrigger", "onClick", "handleClick", "e", "tabElement", "container", "tabLeft", "tabWidth", "containerWidth", "scrollTo", "TabsContent"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.3.37",
3
+ "version": "1.3.38",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/style.css CHANGED
@@ -1180,6 +1180,9 @@ video {
1180
1180
  .aspect-\[296\/320\] {
1181
1181
  aspect-ratio: 296/320;
1182
1182
  }
1183
+ .aspect-\[356\/200\] {
1184
+ aspect-ratio: 356/200;
1185
+ }
1183
1186
  .aspect-\[358\/190\] {
1184
1187
  aspect-ratio: 358/190;
1185
1188
  }
@@ -5250,6 +5253,9 @@ video {
5250
5253
  .tablet\:aspect-\[346\/240\] {
5251
5254
  aspect-ratio: 346/240;
5252
5255
  }
5256
+ .tablet\:aspect-\[704\/200\] {
5257
+ aspect-ratio: 704/200;
5258
+ }
5253
5259
  .tablet\:aspect-\[704\/360\] {
5254
5260
  aspect-ratio: 704/360;
5255
5261
  }
@@ -5817,6 +5823,9 @@ video {
5817
5823
  .laptop\:col-span-6 {
5818
5824
  grid-column: span 6 / span 6;
5819
5825
  }
5826
+ .laptop\:col-span-7 {
5827
+ grid-column: span 7 / span 7;
5828
+ }
5820
5829
  .laptop\:col-start-1 {
5821
5830
  grid-column-start: 1;
5822
5831
  }
@@ -5904,6 +5913,9 @@ video {
5904
5913
  .laptop\:hidden {
5905
5914
  display: none;
5906
5915
  }
5916
+ .laptop\:aspect-\[1\/1\] {
5917
+ aspect-ratio: 1/1;
5918
+ }
5907
5919
  .laptop\:aspect-\[1024\/384\] {
5908
5920
  aspect-ratio: 1024/384;
5909
5921
  }
@@ -5922,6 +5934,12 @@ video {
5922
5934
  .laptop\:aspect-\[1920\/930\] {
5923
5935
  aspect-ratio: 1920/930;
5924
5936
  }
5937
+ .laptop\:aspect-\[2\/1\] {
5938
+ aspect-ratio: 2/1;
5939
+ }
5940
+ .laptop\:aspect-\[256\/153\] {
5941
+ aspect-ratio: 256/153;
5942
+ }
5925
5943
  .laptop\:aspect-\[288\/192\] {
5926
5944
  aspect-ratio: 288/192;
5927
5945
  }
@@ -6120,6 +6138,9 @@ video {
6120
6138
  .laptop\:max-h-\[320px\] {
6121
6139
  max-height: 320px;
6122
6140
  }
6141
+ .laptop\:min-h-0 {
6142
+ min-height: 0px;
6143
+ }
6123
6144
  .laptop\:min-h-\[280px\] {
6124
6145
  min-height: 280px;
6125
6146
  }
@@ -6192,6 +6213,9 @@ video {
6192
6213
  .laptop\:w-\[calc\(50\%-6px\)\] {
6193
6214
  width: calc(50% - 6px);
6194
6215
  }
6216
+ .laptop\:w-\[unset\] {
6217
+ width: unset;
6218
+ }
6195
6219
  .laptop\:w-auto {
6196
6220
  width: auto;
6197
6221
  }
@@ -6303,6 +6327,9 @@ video {
6303
6327
  .laptop\:grid-cols-10 {
6304
6328
  grid-template-columns: repeat(10, minmax(0, 1fr));
6305
6329
  }
6330
+ .laptop\:grid-cols-12 {
6331
+ grid-template-columns: repeat(12, minmax(0, 1fr));
6332
+ }
6306
6333
  .laptop\:grid-cols-2 {
6307
6334
  grid-template-columns: repeat(2, minmax(0, 1fr));
6308
6335
  }
@@ -6875,6 +6902,15 @@ video {
6875
6902
  .desktop\:top-\[32px\] {
6876
6903
  top: 32px;
6877
6904
  }
6905
+ .desktop\:col-span-4 {
6906
+ grid-column: span 4 / span 4;
6907
+ }
6908
+ .desktop\:col-span-5 {
6909
+ grid-column: span 5 / span 5;
6910
+ }
6911
+ .desktop\:col-span-7 {
6912
+ grid-column: span 7 / span 7;
6913
+ }
6878
6914
  .desktop\:my-\[112px\] {
6879
6915
  margin-top: 112px;
6880
6916
  margin-bottom: 112px;
@@ -6960,6 +6996,12 @@ video {
6960
6996
  .desktop\:aspect-\[1440\/700\] {
6961
6997
  aspect-ratio: 1440/700;
6962
6998
  }
6999
+ .desktop\:aspect-\[16\/15\] {
7000
+ aspect-ratio: 16/15;
7001
+ }
7002
+ .desktop\:aspect-\[19\/9\] {
7003
+ aspect-ratio: 19/9;
7004
+ }
6963
7005
  .desktop\:aspect-\[1920\/480\] {
6964
7006
  aspect-ratio: 1920/480;
6965
7007
  }
@@ -6969,6 +7011,9 @@ video {
6969
7011
  .desktop\:aspect-\[1920\/930\] {
6970
7012
  aspect-ratio: 1920/930;
6971
7013
  }
7014
+ .desktop\:aspect-\[379\/192\] {
7015
+ aspect-ratio: 379/192;
7016
+ }
6972
7017
  .desktop\:aspect-\[427\/256\] {
6973
7018
  aspect-ratio: 427/256;
6974
7019
  }
@@ -7557,6 +7602,15 @@ video {
7557
7602
  .lg-desktop\:top-\[192px\] {
7558
7603
  top: 192px;
7559
7604
  }
7605
+ .lg-desktop\:col-span-4 {
7606
+ grid-column: span 4 / span 4;
7607
+ }
7608
+ .lg-desktop\:col-span-5 {
7609
+ grid-column: span 5 / span 5;
7610
+ }
7611
+ .lg-desktop\:col-span-7 {
7612
+ grid-column: span 7 / span 7;
7613
+ }
7560
7614
  .lg-desktop\:my-\[128px\] {
7561
7615
  margin-top: 128px;
7562
7616
  margin-bottom: 128px;
@@ -7633,6 +7687,9 @@ video {
7633
7687
  .lg-desktop\:aspect-\[1920\/930\] {
7634
7688
  aspect-ratio: 1920/930;
7635
7689
  }
7690
+ .lg-desktop\:aspect-\[480\/248\] {
7691
+ aspect-ratio: 480/248;
7692
+ }
7636
7693
  .lg-desktop\:aspect-\[543\/320\] {
7637
7694
  aspect-ratio: 543/320;
7638
7695
  }
@@ -7642,6 +7699,12 @@ video {
7642
7699
  .lg-desktop\:aspect-\[644\/320\] {
7643
7700
  aspect-ratio: 644/320;
7644
7701
  }
7702
+ .lg-desktop\:aspect-\[7\/3\] {
7703
+ aspect-ratio: 7/3;
7704
+ }
7705
+ .lg-desktop\:aspect-\[8\/7\] {
7706
+ aspect-ratio: 8/7;
7707
+ }
7645
7708
  .lg-desktop\:aspect-\[824\/320\] {
7646
7709
  aspect-ratio: 824/320;
7647
7710
  }