@anker-in/headless-ui 1.1.41 → 1.1.43

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 (10) hide show
  1. package/dist/cjs/biz-components/Ksp/index.js +1 -1
  2. package/dist/cjs/biz-components/Ksp/index.js.map +2 -2
  3. package/dist/cjs/biz-components/Title/index.js +1 -1
  4. package/dist/cjs/biz-components/Title/index.js.map +2 -2
  5. package/dist/esm/biz-components/Ksp/index.js +1 -1
  6. package/dist/esm/biz-components/Ksp/index.js.map +2 -2
  7. package/dist/esm/biz-components/Title/index.js +1 -1
  8. package/dist/esm/biz-components/Title/index.js.map +2 -2
  9. package/package.json +1 -1
  10. package/tailwind.config.js +1 -0
package/dist/cjs/biz-components/Ksp/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var h=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var i=(a,p)=>{for(var e in p)h(a,e,{get:p[e],enumerable:!0})},m=(a,p,e,s)=>{if(p&&typeof p=="object"||typeof p=="function")for(let c of g(p))!r.call(a,c)&&c!==e&&h(a,c,{get:()=>p[c],enumerable:!(s=b(p,c))||s.enumerable});return a};var u=a=>m(h({},"__esModule",{value:!0}),a);var C={};i(C,{default:()=>y});module.exports=u(C);var t=require("react/jsx-runtime"),l=require("../../components/index.js"),w=require("../../helpers/utils.js"),k=require("../../shared/Styles.js");const x=({title:a,desc:p,image:e,mobImage:s,video:c,mobVideo:o,className:d,theme:n})=>(0,t.jsxs)("div",{className:(0,w.cn)("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":n==="dark"},d),children:[c&&o?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:e?.url,className:"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full"}),(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:o?.url,poster:s?.url,className:"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center"})]}):(e||s)&&(0,t.jsx)(l.Picture,{source:e?.url||s?.url,alt:e?.alt||s?.alt||"",className:"ksp-card-image size-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,t.jsxs)("div",{className:"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",children:[(0,t.jsx)(l.Heading,{size:3,html:a,className:"ksp-card-title tablet:block hidden w-full break-all"}),(0,t.jsx)(l.Heading,{size:2,html:a,className:"ksp-card-title tablet:hidden tablet:w-[340px] block w-full break-all"}),(0,t.jsx)(l.Text,{size:2,html:p,className:"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]"})]})]}),f={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]"}},N=(a,p)=>f[p]?.[a]||"";function v({data:a,className:p}){const{title:e,items:s,theme:c="light"}=a;return(0,t.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,w.cn)("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":c==="dark"},p),children:[(0,t.jsx)(l.Heading,{as:"h1",size:4,html:e,className:"ksp-title laptop:text-center text-left text-white"}),(0,t.jsx)("div",{className:"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3",children:s.map((o,d)=>(0,t.jsx)(x,{...o,className:N(d,s.length)},d))})]})}var y=(0,k.withLayout)(v);
1
+ "use strict";var h=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var i=(a,p)=>{for(var e in p)h(a,e,{get:p[e],enumerable:!0})},m=(a,p,e,s)=>{if(p&&typeof p=="object"||typeof p=="function")for(let c of r(p))!g.call(a,c)&&c!==e&&h(a,c,{get:()=>p[c],enumerable:!(s=b(p,c))||s.enumerable});return a};var u=a=>m(h({},"__esModule",{value:!0}),a);var C={};i(C,{default:()=>y});module.exports=u(C);var t=require("react/jsx-runtime"),l=require("../../components/index.js"),w=require("../../helpers/utils.js"),k=require("../../shared/Styles.js");const x=({title:a,desc:p,image:e,mobImage:s,video:c,mobVideo:o,className:d,theme:n})=>(0,t.jsxs)("div",{className:(0,w.cn)("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":n==="dark"},d),children:[c&&o?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:e?.url,className:"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full"}),(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:o?.url,poster:s?.url,className:"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center"})]}):(e||s)&&(0,t.jsx)(l.Picture,{source:e?.url&&s?.url?`${e.url} 1920, ${s.url} 767`:e?.url||s?.url,alt:e?.alt||s?.alt||"",className:"ksp-card-image size-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,t.jsxs)("div",{className:"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",children:[(0,t.jsx)(l.Heading,{size:3,html:a,className:"ksp-card-title tablet:block hidden w-full break-all"}),(0,t.jsx)(l.Heading,{size:2,html:a,className:"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all"}),(0,t.jsx)(l.Text,{size:2,html:p,className:"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]"})]})]}),f={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]"}},N=(a,p)=>f[p]?.[a]||"";function v({data:a,className:p}){const{title:e,items:s,theme:c="light"}=a;return(0,t.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,w.cn)("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":c==="dark"},p),children:[(0,t.jsx)(l.Heading,{as:"h1",size:4,html:e,className:"ksp-title laptop:text-center text-left text-white"}),(0,t.jsx)("div",{className:"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3",children:s.map((o,d)=>(0,t.jsx)(x,{...o,className:N(d,s.length)},d))})]})}var y=(0,k.withLayout)(v);
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": ["import { 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 /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\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 )}\n >\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={image?.url || mobImage?.url}\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image size-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4\">\n <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full break-all\" />\n <Heading\n size={2}\n html={title}\n className=\"ksp-card-title tablet:hidden tablet:w-[340px] block w-full break-all\"\n />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]\"\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 }: KspProps) {\n const { title, items, theme = 'light' } = data\n return (\n <section\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 )}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n {items.map((item, index) => (\n <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(Ksp)\n"],
5
- "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgEQ,IAAAI,EAAA,6BAhERC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAkD3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,MAAAC,CAAM,OAEjF,QAAC,OACC,aAAW,MACT,kEACA,CACE,YAAaA,IAAU,MACzB,EACAD,CACF,EAEC,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OAAQD,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,2BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,kDACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,sDAAsD,KAC/F,OAAC,WACC,KAAM,EACN,KAAMA,EACN,UAAU,uEACZ,KACA,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,+JACZ,GACF,GACF,EAQEO,EAAwD,CAC5D,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,wQACL,EACA,EAAG,CACD,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAP,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAc,EAAO,MAAAP,EAAQ,OAAQ,EAAIM,EAC1C,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MACT,yGACA,CACE,YAAaN,IAAU,MACzB,EACAD,CACF,EAEA,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KACrG,OAAC,OAAI,UAAU,wFACZ,SAAAc,EAAM,IAAI,CAACC,EAAML,OAChB,OAACX,EAAA,CAAuB,GAAGgB,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOjB,KAAQ,cAAWmB,CAAG",
4
+ "sourcesContent": ["import { 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 /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\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 )}\n >\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={\n image?.url && mobImage?.url ? `${image.url} 1920, ${mobImage.url} 767` : image?.url || mobImage?.url\n }\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image size-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4\">\n <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full break-all\" />\n <Heading\n size={2}\n html={title}\n className=\"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all\"\n />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]\"\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 }: KspProps) {\n const { title, items, theme = 'light' } = data\n return (\n <section\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 )}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n {items.map((item, index) => (\n <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(Ksp)\n"],
5
+ "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgEQ,IAAAI,EAAA,6BAhERC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAkD3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,MAAAC,CAAM,OAEjF,QAAC,OACC,aAAW,MACT,kEACA,CACE,YAAaA,IAAU,MACzB,EACAD,CACF,EAEC,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OACED,GAAO,KAAOC,GAAU,IAAM,GAAGD,EAAM,GAAG,UAAUC,EAAS,GAAG,OAASD,GAAO,KAAOC,GAAU,IAEnG,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,2BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,kDACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,sDAAsD,KAC/F,OAAC,WACC,KAAM,EACN,KAAMA,EACN,UAAU,6FACZ,KACA,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,+JACZ,GACF,GACF,EAQEO,EAAwD,CAC5D,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,wQACL,EACA,EAAG,CACD,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAP,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAc,EAAO,MAAAP,EAAQ,OAAQ,EAAIM,EAC1C,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MACT,yGACA,CACE,YAAaN,IAAU,MACzB,EACAD,CACF,EAEA,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KACrG,OAAC,OAAI,UAAU,wFACZ,SAAAc,EAAM,IAAI,CAACC,EAAML,OAChB,OAACX,EAAA,CAAuB,GAAGgB,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOjB,KAAQ,cAAWmB,CAAG",
6
6
  "names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "theme", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "items", "item"]
7
7
  }
package/dist/cjs/biz-components/Title/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var rt=Object.create;var g=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var it=Object.getOwnPropertyNames;var ot=Object.getPrototypeOf,at=Object.prototype.hasOwnProperty;var lt=(t,e)=>{for(var n in e)g(t,n,{get:e[n],enumerable:!0})},V=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of it(e))!at.call(t,i)&&i!==n&&g(t,i,{get:()=>e[i],enumerable:!(o=st(e,i))||o.enumerable});return t};var M=(t,e,n)=>(n=t!=null?rt(ot(t)):{},V(e||!t||!t.__esModule?g(n,"default",{value:t,enumerable:!0}):n,t)),ct=t=>V(g({},"__esModule",{value:!0}),t);var pt={};lt(pt,{default:()=>ut});module.exports=ct(pt);var r=require("react/jsx-runtime"),s=M(require("react")),h=require("gsap"),b=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),l=require("../../helpers/utils.js"),F=require("class-variance-authority"),x=require("../../components/index.js"),j=require("../../shared/Styles.js"),A=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer"),B=M(require("./Countdown.js"));const $="link",z="title",dt=(0,F.cva)("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),mt=(0,F.cva)("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),P=({data:t,className:e})=>{const{theme:n="light",extensions:o,title:i,caption:p,align:c}=t;return o?.textLink?(0,r.jsxs)("a",{className:(0,l.cn)({"aiui-dark":n==="dark"},"hover:text-brand-0 [&_svg_path]:hover:stroke-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":n==="light"},{"text-[#F5F6F7]":n==="dark"},{"justify-center mt-4":c==="center"},{"mt-1 laptop:mt-0":c==="left"},e),href:(0,A.trackUrlRef)(o?.link,`${$}_${z}`),"data-headless-type-name":`${$}#${z}`,"data-headless-title-desc-button":`${i}#${p}`,children:[(0,r.jsx)("div",{className:"truncate whitespace-nowrap",children:o?.textLink}),(0,r.jsx)("div",{className:"lg-desktop:size-5 size-4",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:(0,r.jsx)("path",{d:"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z",stroke:n==="dark"?"#F5F6F7":"#080A0F"})})})]}):null},S=s.default.forwardRef(({data:t,className:e,as:n="h2",weight:o="bold"},i)=>{const{title:p,caption:c,subtitle:y,countdown:N,showCountdown:D=!1,theme:f="light",extensions:_,align:d="left"}=t,C=(0,s.useRef)(null),m=(0,s.useRef)(null),a=(0,s.useRef)(null),u=(0,s.useRef)(null),[U,O]=(0,s.useState)(!0),{ref:Z,inView:L}=(0,I.useInView)();(0,s.useImperativeHandle)(i,()=>C.current);const q=()=>{O(!1)};return(0,s.useEffect)(()=>{h.gsap.registerPlugin(b.SplitText,T.ScrollTrigger);function G(){if(!m.current)return;const J=m.current?.clientHeight||80;a.current&&a.current.revert(),u.current&&u.current.kill(),a.current=new b.SplitText(m.current,{type:"words",wordsClass:"word"});const w=a.current.words;h.gsap.set(w,{opacity:0}),u.current=T.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${J*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:K=>{const Q=K.progress,R=w.length||1,W=.5,v=1/R,E=v*(1-W),H=(R-1)*E+v,X=Math.min(1,H>0?Q/H:0);w.forEach((Y,tt)=>{const et=tt*E,nt=v;let k=(X-et)/nt;k=Math.max(0,Math.min(1,k)),h.gsap.set(Y,{opacity:k})})}})}return L&&G(),()=>{a.current&&a.current.revert(),u.current&&u.current.kill()}},[L]),(p||c)&&(0,r.jsxs)("div",{id:_?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:C,children:[(0,r.jsxs)("div",{ref:Z,className:(0,l.cn)("flex-1",e,{"aiui-dark":f==="dark","text-center":d==="center","text-left":d==="left"}),children:[(0,r.jsx)(x.Heading,{ref:m,as:n,size:4,html:c||p,weight:o,className:dt({theme:f})}),y&&(0,r.jsx)(x.Text,{html:y,as:"p",className:mt({theme:f})}),(0,r.jsx)(P,{data:t,className:(0,l.cn)({"laptop:hidden":d==="left"})}),D&&N&&U&&(0,r.jsx)(B.default,{className:(0,l.cn)("mt-4 justify-start",{"justify-center":d==="center"}),config:N,onCountdownEnd:q,theme:f})]}),(0,r.jsx)(P,{data:t,className:(0,l.cn)("hidden",{"laptop:flex":d==="left"})})]})});S.displayName="Title";var ut=(0,j.withLayout)(S);
1
+ "use strict";"use client";var rt=Object.create;var g=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var it=Object.getOwnPropertyNames;var ot=Object.getPrototypeOf,at=Object.prototype.hasOwnProperty;var lt=(t,e)=>{for(var n in e)g(t,n,{get:e[n],enumerable:!0})},V=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of it(e))!at.call(t,i)&&i!==n&&g(t,i,{get:()=>e[i],enumerable:!(o=st(e,i))||o.enumerable});return t};var M=(t,e,n)=>(n=t!=null?rt(ot(t)):{},V(e||!t||!t.__esModule?g(n,"default",{value:t,enumerable:!0}):n,t)),ct=t=>V(g({},"__esModule",{value:!0}),t);var pt={};lt(pt,{default:()=>ut});module.exports=ct(pt);var r=require("react/jsx-runtime"),s=M(require("react")),h=require("gsap"),b=require("gsap/dist/SplitText"),T=require("gsap/dist/ScrollTrigger"),c=require("../../helpers/utils.js"),F=require("class-variance-authority"),x=require("../../components/index.js"),j=require("../../shared/Styles.js"),A=require("../../shared/trackUrlRef.js"),I=require("react-intersection-observer"),B=M(require("./Countdown.js"));const $="link",z="title",dt=(0,F.cva)("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),mt=(0,F.cva)("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),P=({data:t,className:e})=>{const{theme:n="light",extensions:o,title:i,caption:d,align:a}=t;return o?.textLink?(0,r.jsxs)("a",{className:(0,c.cn)({"aiui-dark":n==="dark"},"hover:text-brand-0 [&_svg_path]:hover:stroke-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":n==="light"},{"text-[#F5F6F7]":n==="dark"},{"justify-center mt-4":a==="center"},{"mt-1 laptop:mt-0":a==="left"},e),href:(0,A.trackUrlRef)(o?.link,`${$}_${z}`),"data-headless-type-name":`${$}#${z}`,"data-headless-title-desc-button":`${i}#${d}`,children:[(0,r.jsx)("div",{className:"truncate whitespace-nowrap",children:o?.textLink}),(0,r.jsx)("div",{className:"lg-desktop:size-5 size-4",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:(0,r.jsx)("path",{d:"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z",stroke:n==="dark"?"#F5F6F7":"#080A0F"})})})]}):null},S=s.default.forwardRef(({data:t,className:e,as:n="h2",weight:o="bold"},i)=>{const{title:d,caption:a,subtitle:y,countdown:N,showCountdown:D=!1,theme:f="light",extensions:_,align:m="left"}=t,C=(0,s.useRef)(null),u=(0,s.useRef)(null),l=(0,s.useRef)(null),p=(0,s.useRef)(null),[U,O]=(0,s.useState)(!0),{ref:Z,inView:L}=(0,I.useInView)();(0,s.useImperativeHandle)(i,()=>C.current);const q=()=>{O(!1)};return(0,s.useEffect)(()=>{h.gsap.registerPlugin(b.SplitText,T.ScrollTrigger);function G(){if(!u.current)return;const J=u.current?.clientHeight||80;l.current&&l.current.revert(),p.current&&p.current.kill(),l.current=new b.SplitText(u.current,{type:"words",wordsClass:"word"});const w=l.current.words;h.gsap.set(w,{opacity:0}),p.current=T.ScrollTrigger.create({trigger:u.current,start:"bottom bottom-=4%",end:`bottom+=${J*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:K=>{const Q=K.progress,R=w.length||1,W=.5,v=1/R,E=v*(1-W),H=(R-1)*E+v,X=Math.min(1,H>0?Q/H:0);w.forEach((Y,tt)=>{const et=tt*E,nt=v;let k=(X-et)/nt;k=Math.max(0,Math.min(1,k)),h.gsap.set(Y,{opacity:k})})}})}return L&&G(),()=>{l.current&&l.current.revert(),p.current&&p.current.kill()}},[L]),(d||a)&&(0,r.jsxs)("div",{id:_?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:C,children:[(0,r.jsxs)("div",{ref:Z,className:(0,c.cn)("flex-1",e,{"aiui-dark":f==="dark","text-center":m==="center","text-left":m==="left"}),children:[(a||d)&&(0,r.jsx)(x.Heading,{ref:u,as:n,size:4,html:a||d,weight:o,className:dt({theme:f})}),y&&(0,r.jsx)(x.Text,{html:y,as:"p",className:mt({theme:f})}),(0,r.jsx)(P,{data:t,className:(0,c.cn)({"laptop:hidden":m==="left"})}),D&&N&&U&&(0,r.jsx)(B.default,{className:(0,c.cn)("mt-4 justify-start",{"justify-center":m==="center"}),config:N,onCountdownEnd:q,theme:f})]}),(0,r.jsx)(P,{data:t,className:(0,c.cn)("hidden",{"laptop:flex":m==="left"})})]})});S.displayName="Title";var ut=(0,j.withLayout)(S);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Title/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Title/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\nimport Countdown from './Countdown.js'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n 'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:stroke-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z\"\n stroke={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const {\n title,\n caption,\n subtitle,\n countdown,\n showCountdown = false,\n theme = 'light',\n extensions,\n align = 'left',\n } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n const handleCountdownEnd = () => {\n setIsCountdownVisible(false)\n }\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n <Heading\n ref={titleRef}\n as={as}\n size={4}\n html={caption || title}\n weight={weight}\n className={titleHeadingVariants({ theme })}\n />\n {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n className={cn('mt-4 justify-start', {\n 'justify-center': align === 'center',\n })}\n config={countdown}\n onCountdownEnd={handleCountdownEnd}\n theme={theme}\n />\n )}\n </div>\n <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\nimport Countdown from './Countdown.js'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n 'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:stroke-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z\"\n stroke={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const {\n title,\n caption,\n subtitle,\n countdown,\n showCountdown = false,\n theme = 'light',\n extensions,\n align = 'left',\n } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n const handleCountdownEnd = () => {\n setIsCountdownVisible(false)\n }\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={4}\n html={caption || title}\n weight={weight}\n className={titleHeadingVariants({ theme })}\n />\n )}\n {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n className={cn('mt-4 justify-start', {\n 'justify-center': align === 'center',\n })}\n config={countdown}\n onCountdownEnd={handleCountdownEnd}\n theme={theme}\n />\n )}\n </div>\n <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_class_variance_authority", "import_components", "import_Styles", "import_trackUrlRef", "import_react_intersection_observer", "import_Countdown", "componentType", "componentName", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "className", "theme", "extensions", "title", "caption", "align", "Title", "React", "as", "weight", "ref", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Countdown"]
7
7
  }
package/dist/esm/biz-components/Ksp/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Fragment as x,jsx as t,jsxs as d}from"react/jsx-runtime";import{Heading as h,Picture as n,Text as b}from"../../components/index.js";import{cn as w}from"../../helpers/utils.js";import{withLayout as g}from"../../shared/Styles.js";const r=({title:a,desc:s,image:e,mobImage:p,video:c,mobVideo:l,className:o,theme:k})=>d("div",{className:w("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":k==="dark"},o),children:[c&&l?d(x,{children:[t("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:e?.url,className:"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full"}),t("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:l?.url,poster:p?.url,className:"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center"})]}):(e||p)&&t(n,{source:e?.url||p?.url,alt:e?.alt||p?.alt||"",className:"ksp-card-image size-full",imgClassName:"h-full w-full object-cover object-bottom"}),d("div",{className:"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",children:[t(h,{size:3,html:a,className:"ksp-card-title tablet:block hidden w-full break-all"}),t(h,{size:2,html:a,className:"ksp-card-title tablet:hidden tablet:w-[340px] block w-full break-all"}),t(b,{size:2,html:s,className:"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]"})]})]}),i={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]"}},m=(a,s)=>i[s]?.[a]||"";function u({data:a,className:s}){const{title:e,items:p,theme:c="light"}=a;return d("section",{"data-ui-component-id":"ksp",className:w("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":c==="dark"},s),children:[t(h,{as:"h1",size:4,html:e,className:"ksp-title laptop:text-center text-left text-white"}),t("div",{className:"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3",children:p.map((l,o)=>t(r,{...l,className:m(o,p.length)},o))})]})}var y=g(u);export{y as default};
1
+ import{Fragment as x,jsx as p,jsxs as d}from"react/jsx-runtime";import{Heading as h,Picture as n,Text as b}from"../../components/index.js";import{cn as w}from"../../helpers/utils.js";import{withLayout as r}from"../../shared/Styles.js";const g=({title:e,desc:s,image:a,mobImage:t,video:c,mobVideo:l,className:o,theme:k})=>d("div",{className:w("ksp-card rounded-box text-info-primary relative overflow-hidden",{"aiui-dark":k==="dark"},o),children:[c&&l?d(x,{children:[p("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:a?.url,className:"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full"}),p("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:l?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center"})]}):(a||t)&&p(n,{source:a?.url&&t?.url?`${a.url} 1920, ${t.url} 767`:a?.url||t?.url,alt:a?.alt||t?.alt||"",className:"ksp-card-image size-full",imgClassName:"h-full w-full object-cover object-bottom"}),d("div",{className:"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4",children:[p(h,{size:3,html:e,className:"ksp-card-title tablet:block hidden w-full break-all"}),p(h,{size:2,html:e,className:"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all"}),p(b,{size:2,html:s,className:"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]"})]})]}),i={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]"}},m=(e,s)=>i[s]?.[e]||"";function u({data:e,className:s}){const{title:a,items:t,theme:c="light"}=e;return d("section",{"data-ui-component-id":"ksp",className:w("ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center",{"aiui-dark":c==="dark"},s),children:[p(h,{as:"h1",size:4,html:a,className:"ksp-title laptop:text-center text-left text-white"}),p("div",{className:"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3",children:t.map((l,o)=>p(g,{...l,className:m(o,t.length)},o))})]})}var y=r(u);export{y 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": ["import { 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 /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\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 )}\n >\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={image?.url || mobImage?.url}\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image size-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4\">\n <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full break-all\" />\n <Heading\n size={2}\n html={title}\n className=\"ksp-card-title tablet:hidden tablet:w-[340px] block w-full break-all\"\n />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]\"\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 }: KspProps) {\n const { title, items, theme = 'light' } = data\n return (\n <section\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 )}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n {items.map((item, index) => (\n <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(Ksp)\n"],
5
- "mappings": "AAgEQ,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAhER,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAkD3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,MAAAC,CAAM,IAEjFd,EAAC,OACC,UAAWI,EACT,kEACA,CACE,YAAaU,IAAU,MACzB,EACAD,CACF,EAEC,UAAAF,GAASC,EACRZ,EAAAF,EAAA,CACE,UAAAC,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKY,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,EACAV,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKa,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,IACRX,EAACG,EAAA,CACC,OAAQO,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,2BACV,aAAa,2CACf,EAGJV,EAAC,OAAI,UAAU,kDACb,UAAAD,EAACE,EAAA,CAAQ,KAAM,EAAG,KAAMM,EAAO,UAAU,sDAAsD,EAC/FR,EAACE,EAAA,CACC,KAAM,EACN,KAAMM,EACN,UAAU,uEACZ,EACAR,EAACI,EAAA,CACC,KAAM,EACN,KAAMK,EACN,UAAU,+JACZ,GACF,GACF,EAQEO,EAAwD,CAC5D,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,wQACL,EACA,EAAG,CACD,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAP,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAc,EAAO,MAAAP,EAAQ,OAAQ,EAAIM,EAC1C,OACEpB,EAAC,WACC,uBAAqB,MACrB,UAAWI,EACT,yGACA,CACE,YAAaU,IAAU,MACzB,EACAD,CACF,EAEA,UAAAd,EAACE,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMM,EAAO,UAAU,oDAAoD,EACrGR,EAAC,OAAI,UAAU,wFACZ,SAAAsB,EAAM,IAAI,CAACC,EAAML,IAChBlB,EAACO,EAAA,CAAuB,GAAGgB,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOM,EAAQlB,EAAWc,CAAG",
4
+ "sourcesContent": ["import { 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 /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n /** \u4E3B\u9898 */\n theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\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 )}\n >\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={\n image?.url && mobImage?.url ? `${image.url} 1920, ${mobImage.url} 767` : image?.url || mobImage?.url\n }\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image size-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4\">\n <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full break-all\" />\n <Heading\n size={2}\n html={title}\n className=\"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all\"\n />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]\"\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 }: KspProps) {\n const { title, items, theme = 'light' } = data\n return (\n <section\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 )}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n {items.map((item, index) => (\n <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n ))}\n </div>\n </section>\n )\n}\n\nexport default withLayout(Ksp)\n"],
5
+ "mappings": "AAgEQ,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAhER,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAkD3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,MAAAC,CAAM,IAEjFd,EAAC,OACC,UAAWI,EACT,kEACA,CACE,YAAaU,IAAU,MACzB,EACAD,CACF,EAEC,UAAAF,GAASC,EACRZ,EAAAF,EAAA,CACE,UAAAC,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKY,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,EACAV,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKa,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,IACRX,EAACG,EAAA,CACC,OACEO,GAAO,KAAOC,GAAU,IAAM,GAAGD,EAAM,GAAG,UAAUC,EAAS,GAAG,OAASD,GAAO,KAAOC,GAAU,IAEnG,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,2BACV,aAAa,2CACf,EAGJV,EAAC,OAAI,UAAU,kDACb,UAAAD,EAACE,EAAA,CAAQ,KAAM,EAAG,KAAMM,EAAO,UAAU,sDAAsD,EAC/FR,EAACE,EAAA,CACC,KAAM,EACN,KAAMM,EACN,UAAU,6FACZ,EACAR,EAACI,EAAA,CACC,KAAM,EACN,KAAMK,EACN,UAAU,+JACZ,GACF,GACF,EAQEO,EAAwD,CAC5D,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,wQACL,EACA,EAAG,CACD,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAP,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAc,EAAO,MAAAP,EAAQ,OAAQ,EAAIM,EAC1C,OACEpB,EAAC,WACC,uBAAqB,MACrB,UAAWI,EACT,yGACA,CACE,YAAaU,IAAU,MACzB,EACAD,CACF,EAEA,UAAAd,EAACE,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMM,EAAO,UAAU,oDAAoD,EACrGR,EAAC,OAAI,UAAU,wFACZ,SAAAsB,EAAM,IAAI,CAACC,EAAML,IAChBlB,EAACO,EAAA,CAAuB,GAAGgB,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOM,EAAQlB,EAAWc,CAAG",
6
6
  "names": ["Fragment", "jsx", "jsxs", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "theme", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "items", "item", "Ksp_default"]
7
7
  }
package/dist/esm/biz-components/Title/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as v}from"react/jsx-runtime";import Q,{useEffect as W,useRef as u,useImperativeHandle as X,useState as Y}from"react";import{gsap as w}from"gsap";import{SplitText as L}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as c}from"../../helpers/utils.js";import{cva as E}from"class-variance-authority";import{Heading as tt,Text as et}from"../../components/index.js";import{withLayout as nt}from"../../shared/Styles.js";import{trackUrlRef as rt}from"../../shared/trackUrlRef.js";import{useInView as st}from"react-intersection-observer";import it from"./Countdown.js";const H="link",V="title",ot=E("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),at=E("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),M=({data:r,className:p})=>{const{theme:e="light",extensions:s,title:f,caption:d,align:i}=r;return s?.textLink?v("a",{className:c({"aiui-dark":e==="dark"},"hover:text-brand-0 [&_svg_path]:hover:stroke-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":e==="light"},{"text-[#F5F6F7]":e==="dark"},{"justify-center mt-4":i==="center"},{"mt-1 laptop:mt-0":i==="left"},p),href:rt(s?.link,`${H}_${V}`),"data-headless-type-name":`${H}#${V}`,"data-headless-title-desc-button":`${f}#${d}`,children:[t("div",{className:"truncate whitespace-nowrap",children:s?.textLink}),t("div",{className:"lg-desktop:size-5 size-4",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:t("path",{d:"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z",stroke:e==="dark"?"#F5F6F7":"#080A0F"})})})]}):null},$=Q.forwardRef(({data:r,className:p,as:e="h2",weight:s="bold"},f)=>{const{title:d,caption:i,subtitle:k,countdown:b,showCountdown:z=!1,theme:m="light",extensions:P,align:o="left"}=r,T=u(null),a=u(null),n=u(null),l=u(null),[S,j]=Y(!0),{ref:A,inView:F}=st();X(f,()=>T.current);const I=()=>{j(!1)};return W(()=>{w.registerPlugin(L,R);function B(){if(!a.current)return;const D=a.current?.clientHeight||80;n.current&&n.current.revert(),l.current&&l.current.kill(),n.current=new L(a.current,{type:"words",wordsClass:"word"});const g=n.current.words;w.set(g,{opacity:0}),l.current=R.create({trigger:a.current,start:"bottom bottom-=4%",end:`bottom+=${D*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:_=>{const U=_.progress,y=g.length||1,O=.5,h=1/y,N=h*(1-O),C=(y-1)*N+h,Z=Math.min(1,C>0?U/C:0);g.forEach((q,G)=>{const J=G*N,K=h;let x=(Z-J)/K;x=Math.max(0,Math.min(1,x)),w.set(q,{opacity:x})})}})}return F&&B(),()=>{n.current&&n.current.revert(),l.current&&l.current.kill()}},[F]),(d||i)&&v("div",{id:P?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:T,children:[v("div",{ref:A,className:c("flex-1",p,{"aiui-dark":m==="dark","text-center":o==="center","text-left":o==="left"}),children:[t(tt,{ref:a,as:e,size:4,html:i||d,weight:s,className:ot({theme:m})}),k&&t(et,{html:k,as:"p",className:at({theme:m})}),t(M,{data:r,className:c({"laptop:hidden":o==="left"})}),z&&b&&S&&t(it,{className:c("mt-4 justify-start",{"justify-center":o==="center"}),config:b,onCountdownEnd:I,theme:m})]}),t(M,{data:r,className:c("hidden",{"laptop:flex":o==="left"})})]})});$.displayName="Title";var vt=nt($);export{vt as default};
1
+ "use client";import{jsx as t,jsxs as v}from"react/jsx-runtime";import Q,{useEffect as W,useRef as u,useImperativeHandle as X,useState as Y}from"react";import{gsap as w}from"gsap";import{SplitText as L}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as d}from"../../helpers/utils.js";import{cva as E}from"class-variance-authority";import{Heading as tt,Text as et}from"../../components/index.js";import{withLayout as nt}from"../../shared/Styles.js";import{trackUrlRef as rt}from"../../shared/trackUrlRef.js";import{useInView as st}from"react-intersection-observer";import it from"./Countdown.js";const H="link",V="title",ot=E("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),at=E("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),M=({data:s,className:p})=>{const{theme:e="light",extensions:i,title:f,caption:o,align:n}=s;return i?.textLink?v("a",{className:d({"aiui-dark":e==="dark"},"hover:text-brand-0 [&_svg_path]:hover:stroke-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":e==="light"},{"text-[#F5F6F7]":e==="dark"},{"justify-center mt-4":n==="center"},{"mt-1 laptop:mt-0":n==="left"},p),href:rt(i?.link,`${H}_${V}`),"data-headless-type-name":`${H}#${V}`,"data-headless-title-desc-button":`${f}#${o}`,children:[t("div",{className:"truncate whitespace-nowrap",children:i?.textLink}),t("div",{className:"lg-desktop:size-5 size-4",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 16 16",fill:"none",children:t("path",{d:"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z",stroke:e==="dark"?"#F5F6F7":"#080A0F"})})})]}):null},$=Q.forwardRef(({data:s,className:p,as:e="h2",weight:i="bold"},f)=>{const{title:o,caption:n,subtitle:k,countdown:b,showCountdown:z=!1,theme:m="light",extensions:P,align:a="left"}=s,T=u(null),l=u(null),r=u(null),c=u(null),[S,j]=Y(!0),{ref:A,inView:F}=st();X(f,()=>T.current);const I=()=>{j(!1)};return W(()=>{w.registerPlugin(L,R);function B(){if(!l.current)return;const D=l.current?.clientHeight||80;r.current&&r.current.revert(),c.current&&c.current.kill(),r.current=new L(l.current,{type:"words",wordsClass:"word"});const g=r.current.words;w.set(g,{opacity:0}),c.current=R.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${D*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:_=>{const U=_.progress,y=g.length||1,O=.5,h=1/y,N=h*(1-O),C=(y-1)*N+h,Z=Math.min(1,C>0?U/C:0);g.forEach((q,G)=>{const J=G*N,K=h;let x=(Z-J)/K;x=Math.max(0,Math.min(1,x)),w.set(q,{opacity:x})})}})}return F&&B(),()=>{r.current&&r.current.revert(),c.current&&c.current.kill()}},[F]),(o||n)&&v("div",{id:P?.id,className:"titleBottom title-box mb-6 flex items-end justify-between gap-2",ref:T,children:[v("div",{ref:A,className:d("flex-1",p,{"aiui-dark":m==="dark","text-center":a==="center","text-left":a==="left"}),children:[(n||o)&&t(tt,{ref:l,as:e,size:4,html:n||o,weight:i,className:ot({theme:m})}),k&&t(et,{html:k,as:"p",className:at({theme:m})}),t(M,{data:s,className:d({"laptop:hidden":a==="left"})}),z&&b&&S&&t(it,{className:d("mt-4 justify-start",{"justify-center":a==="center"}),config:b,onCountdownEnd:I,theme:m})]}),t(M,{data:s,className:d("hidden",{"laptop:flex":a==="left"})})]})});$.displayName="Title";var vt=nt($);export{vt as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Title/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Title/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\nimport Countdown from './Countdown.js'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n 'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:stroke-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z\"\n stroke={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const {\n title,\n caption,\n subtitle,\n countdown,\n showCountdown = false,\n theme = 'light',\n extensions,\n align = 'left',\n } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n const handleCountdownEnd = () => {\n setIsCountdownVisible(false)\n }\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n <Heading\n ref={titleRef}\n as={as}\n size={4}\n html={caption || title}\n weight={weight}\n className={titleHeadingVariants({ theme })}\n />\n {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n className={cn('mt-4 justify-start', {\n 'justify-center': align === 'center',\n })}\n config={countdown}\n onCountdownEnd={handleCountdownEnd}\n theme={theme}\n />\n )}\n </div>\n <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\nimport Countdown from './Countdown.js'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n 'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n {\n variants: {\n theme: {\n light: 'text-[#080A0F]',\n dark: 'text-[#F5F6F7]',\n },\n },\n defaultVariants: {\n theme: 'light',\n },\n }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n const { theme = 'light', extensions, title, caption, align } = data\n if (!extensions?.textLink) return null\n return (\n <a\n className={cn(\n { 'aiui-dark': theme === 'dark' },\n 'hover:text-brand-0 [&_svg_path]:hover:stroke-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n { 'text-[#080A0F]': theme === 'light' },\n { 'text-[#F5F6F7]': theme === 'dark' },\n { 'justify-center mt-4': align === 'center' },\n { 'mt-1 laptop:mt-0': align === 'left' },\n className\n )}\n href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${caption}`}\n >\n <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n <div className=\"lg-desktop:size-5 size-4\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M5.52876 3.52876C5.78911 3.26841 6.21112 3.26841 6.47147 3.52876L10.4715 7.52876C10.7318 7.78911 10.7318 8.21112 10.4715 8.47147L6.47147 12.4715C6.21112 12.7318 5.78911 12.7318 5.52876 12.4715C5.26841 12.2111 5.26841 11.7891 5.52876 11.5288L9.0574 8.00011L5.52876 4.47147C5.26841 4.21112 5.26841 3.78911 5.52876 3.52876Z\"\n stroke={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n />\n </svg>\n </div>\n </a>\n )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className, as = 'h2', weight = 'bold' }, ref) => {\n const {\n title,\n caption,\n subtitle,\n countdown,\n showCountdown = false,\n theme = 'light',\n extensions,\n align = 'left',\n } = data\n const innerRef = useRef<HTMLDivElement>(null)\n const titleRef = useRef<HTMLHeadingElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n const handleCountdownEnd = () => {\n setIsCountdownVisible(false)\n }\n\n useEffect(() => {\n gsap.registerPlugin(SplitText, ScrollTrigger)\n function gsapResize() {\n if (!titleRef.current) return\n const height = titleRef.current?.clientHeight || 80\n if (splitTextInstance.current) {\n splitTextInstance.current.revert()\n }\n if (scrollTriggerRef.current) {\n scrollTriggerRef.current.kill()\n }\n splitTextInstance.current = new SplitText(titleRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'bottom bottom-=4%',\n end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n scrub: true,\n invalidateOnRefresh: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length || 1\n const overlap = 0.5\n const interval = 1 / total\n const step = interval * (1 - overlap)\n const lastEnd = (total - 1) * step + interval\n const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n words.forEach((word: any, i: number) => {\n const start = i * step\n const width = interval\n let opacity = (normalizedProgress - start) / width\n opacity = Math.max(0, Math.min(1, opacity))\n gsap.set(word, { opacity })\n })\n },\n })\n }\n\n if (inView) {\n gsapResize()\n }\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n (title || caption) && (\n <div\n id={extensions?.id}\n className=\"titleBottom title-box mb-6 flex items-end justify-between gap-2\"\n ref={innerRef}\n >\n <div\n ref={inViewRef}\n className={cn('flex-1', className, {\n 'aiui-dark': theme === 'dark',\n 'text-center': align === 'center',\n 'text-left': align === 'left',\n })}\n >\n {(caption || title) && (\n <Heading\n ref={titleRef}\n as={as}\n size={4}\n html={caption || title}\n weight={weight}\n className={titleHeadingVariants({ theme })}\n />\n )}\n {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n {showCountdown && countdown && isCountdownVisible && (\n <Countdown\n className={cn('mt-4 justify-start', {\n 'justify-center': align === 'center',\n })}\n config={countdown}\n onCountdownEnd={handleCountdownEnd}\n theme={theme}\n />\n )}\n </div>\n <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n </div>\n )\n )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "withLayout", "trackUrlRef", "useInView", "Countdown", "componentType", "componentName", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "className", "theme", "extensions", "title", "caption", "align", "Title", "as", "weight", "ref", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.41",
3
+ "version": "1.1.43",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/tailwind.config.js CHANGED
@@ -8,6 +8,7 @@ module.exports = {
8
8
  theme: {
9
9
  extend: {
10
10
  screens: {
11
+ 'xs-tablet': { max: '376px' },
11
12
  'md-tablet': { max: '767px' },
12
13
  'l-tablet': { max: '1024px' },
13
14
  'm-tablet': { max: '1440px' },