@anker-in/headless-ui 0.0.27-alpha.25 → 0.0.27-alpha.27

package/dist/cjs/biz-components/AccordionCards/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var f=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var R=(t,r)=>{for(var o in r)f(t,o,{get:r[o],enumerable:!0})},w=(t,r,o,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of z(r))!M.call(t,l)&&l!==o&&f(t,l,{get:()=>r[l],enumerable:!(c=T(r,l))||c.enumerable});return t};var g=(t,r,o)=>(o=t!=null?L(B(t)):{},w(r||!t||!t.__esModule?f(o,"default",{value:t,enumerable:!0}):o,t)),j=t=>w(f({},"__esModule",{value:!0}),t);var H={};R(H,{default:()=>_});module.exports=j(H);var s=require("react/jsx-runtime"),d=require("../../helpers/utils.js"),v=g(require("../../components/picture.js")),y=g(require("../../components/button.js")),i=require("react");function q(){const[t,r]=(0,i.useState)(window?.innerWidth||0);return(0,i.useEffect)(()=>{const o=()=>r(window?.innerWidth||0);return window?.addEventListener("resize",o),()=>window?.removeEventListener("resize",o)},[]),t<=768}const A=({products:t=[],className:r="",shape:o="square",itemShape:c="square",event:l,primaryButton:k=""})=>{const E=q(),[N,b]=(0,i.useState)(null),[W,F]=(0,i.useState)({}),h=(0,i.useRef)([]),m=(0,i.useRef)({}),p=(0,i.useRef)({}),C=(n,e)=>{e&&(h.current[n]=e)},x=n=>{if(p.current?.[n]){const e={...m.current,[n]:!0};F(e),m.current=e}};return(0,i.useEffect)(()=>{const n=h.current;return n?.forEach((e,a)=>{e.addEventListener("transitionend",()=>x(a))}),()=>{n?.forEach((e,a)=>{e.removeEventListener("transitionend",()=>x(a))})}},[]),E?(0,s.jsx)("div",{className:(0,d.cn)("flex h-[400px] w-full gap-4 overflow-x-auto",r),children:t?.map((n,e)=>(0,s.jsx)("div",{className:"shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:(0,s.jsx)(v.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:n?.img})},e))}):(0,s.jsx)("div",{className:(0,d.cn)("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",r),children:t?.map((n,e)=>{const a=N===e;return(0,s.jsxs)("div",{style:{flex:a?6:1,transition:"all 0.3s ease-in-out"},ref:u=>u&&C(e,u),className:(0,d.cn)("relative cursor-pointer overflow-hidden",c==="round"?"rounded-2xl":""),onMouseEnter:()=>{b(e),p.current[e]=!0},onMouseLeave:()=>{b(null);const u={...m.current,[e]:!1};F(u),m.current=u,p.current[e]=!1},children:[(0,s.jsx)(v.default,{source:n?.img,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),W?.[e]?(0,s.jsxs)("div",{className:(0,d.cn)("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6","transition-all delay-300 duration-[50ms]",a?"opacity-100":"opacity-0"),children:[(0,s.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,s.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:n?.title}),(0,s.jsx)("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:n?.subTitle})]}),(0,s.jsx)(y.default,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>l?.primaryButton?.onClick?.(n),className:(0,d.cn)("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",o==="round"?"rounded-2xl":""),children:k})]}):null]},e)})})};var _=A;
+"use strict";"use client";var W=Object.create;var f=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var R=(t,r)=>{for(var o in r)f(t,o,{get:r[o],enumerable:!0})},w=(t,r,o,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of z(r))!B.call(t,l)&&l!==o&&f(t,l,{get:()=>r[l],enumerable:!(c=C(r,l))||c.enumerable});return t};var g=(t,r,o)=>(o=t!=null?W(M(t)):{},w(r||!t||!t.__esModule?f(o,"default",{value:t,enumerable:!0}):o,t)),j=t=>w(f({},"__esModule",{value:!0}),t);var _={};R(_,{default:()=>H});module.exports=j(_);var s=require("react/jsx-runtime"),d=require("../../helpers/utils.js"),v=g(require("../../components/picture.js")),y=g(require("../../components/button.js")),i=require("react");function q(){const[t,r]=(0,i.useState)(window?.innerWidth||0);return(0,i.useEffect)(()=>{const o=()=>r(window?.innerWidth||0);return window?.addEventListener("resize",o),()=>window?.removeEventListener("resize",o)},[]),t<=768}const A=({products:t=[],className:r="",shape:o="square",itemShape:c="square",event:l,primaryButton:E=""})=>{const k=q(),[N,b]=(0,i.useState)(null),[L,F]=(0,i.useState)({}),h=(0,i.useRef)([]),m=(0,i.useRef)({}),p=(0,i.useRef)({}),T=(n,e)=>{e&&(h.current[n]=e)},x=n=>{if(p.current?.[n]){const e={...m.current,[n]:!0};F(e),m.current=e}};return(0,i.useEffect)(()=>{const n=h.current;return n?.forEach((e,a)=>{e.addEventListener("transitionend",()=>x(a))}),()=>{n?.forEach((e,a)=>{e.removeEventListener("transitionend",()=>x(a))})}},[]),k?(0,s.jsx)("div",{className:(0,d.cn)("flex h-[400px] w-full gap-4 overflow-x-auto",r),children:t?.map((n,e)=>(0,s.jsx)("div",{className:"shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:(0,s.jsx)(v.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:n?.img})},e))}):(0,s.jsx)("div",{className:(0,d.cn)("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",r),children:t?.map((n,e)=>{const a=N===e;return(0,s.jsxs)("div",{style:{flex:a?6:1,transition:"all 0.3s ease-in-out"},ref:u=>{u&&T(e,u)},className:(0,d.cn)("relative cursor-pointer overflow-hidden",c==="round"?"rounded-2xl":""),onMouseEnter:()=>{b(e),p.current[e]=!0},onMouseLeave:()=>{b(null);const u={...m.current,[e]:!1};F(u),m.current=u,p.current[e]=!1},children:[(0,s.jsx)(v.default,{source:n?.img,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),L?.[e]?(0,s.jsxs)("div",{className:(0,d.cn)("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6","transition-all delay-300 duration-[50ms]",a?"opacity-100":"opacity-0"),children:[(0,s.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,s.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:n?.title}),(0,s.jsx)("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:n?.subTitle})]}),(0,s.jsx)(y.default,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>l?.primaryButton?.onClick?.(n),className:(0,d.cn)("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",o==="round"?"rounded-2xl":""),children:E})]}):null]},e)})})};var H=A;
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/AccordionCards/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n  const [width, setWidth] = useState(window?.innerWidth || 0)\n  useEffect(() => {\n    const onResize = () => setWidth(window?.innerWidth || 0)\n    window?.addEventListener('resize', onResize)\n    return () => window?.removeEventListener('resize', onResize)\n  }, [])\n  return width <= 768\n}\n\ntype AccordionCardsType = {\n  products: Array<{\n    /** \u6807\u9898\u6587\u672C */\n    title: string\n    /** \u56FE\u7247*/\n    img: string\n    /** \u5185\u5BB9\u8282\u70B9 */\n    subTitle: string\n  }>\n  className?: string\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: {\n      onClick: (v: any) => void\n    }\n  }\n}\n\nconst AccordionCards = ({\n  products = [],\n  className = '',\n  shape = 'square',\n  itemShape = 'square',\n  event,\n  primaryButton = '',\n}: AccordionCardsType) => {\n  const isMobile = useWindowWidth()\n  const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({})\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const refWidth = useRef<{ [key: number]: boolean }>({})\n  const enterRef = useRef<{ [key: number]: boolean }>({})\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      const current = { ...refWidth.current, [index]: true }\n      setCurrentWidth(current)\n      refWidth.current = current\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      item.addEventListener('transitionend', () => handleTransitionEnd(index))\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  // \u79FB\u52A8\u7AEF\n  if (isMobile) {\n    return (\n      <div className={cn('flex h-[400px] w-full gap-4 overflow-x-auto', className)}>\n        {products?.map((item, idx) => (\n          <div key={idx} className=\"shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n            <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={item?.img} />\n          </div>\n        ))}\n      </div>\n    )\n  }\n\n  // \u684C\u9762\u7AEF\n  return (\n    <div className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}>\n      {products?.map((item, idx) => {\n        const isExpanded = hoverIndex === idx\n        const flexValue = isExpanded ? 6 : 1\n        return (\n          <div\n            key={idx}\n            style={{\n              flex: flexValue,\n              transition: 'all 0.3s ease-in-out',\n            }}\n            ref={el => el && getRef(idx, el)}\n            className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n            onMouseEnter={() => {\n              setHoverIndex(idx)\n              enterRef.current[idx] = true\n            }}\n            onMouseLeave={() => {\n              setHoverIndex(null)\n              const current = { ...refWidth.current, [idx]: false }\n              setCurrentWidth(current)\n              refWidth.current = current\n              enterRef.current[idx] = false\n            }}\n          >\n            <Picture source={item?.img} className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" />\n            {currentWidth?.[idx] ? (\n              <div\n                className={cn(\n                  'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6',\n                  'transition-all delay-300 duration-[50ms]',\n                  isExpanded ? 'opacity-100' : 'opacity-0'\n                )}\n              >\n                <div className=\"mr-1 flex-1 overflow-hidden\">\n                  <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n                    {item?.title}\n                  </p>\n                  <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n                </div>\n                <Button\n                  size=\"sm\"\n                  hoverEffect=\"slide\"\n                  variant=\"secondary\"\n                  onClick={() => event?.primaryButton?.onClick?.(item)}\n                  className={cn(\n                    'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n                    shape === 'round' ? 'rounded-2xl' : ''\n                  )}\n                >\n                  {primaryButton}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default AccordionCards\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n  const [width, setWidth] = useState(window?.innerWidth || 0)\n  useEffect(() => {\n    const onResize = () => setWidth(window?.innerWidth || 0)\n    window?.addEventListener('resize', onResize)\n    return () => window?.removeEventListener('resize', onResize)\n  }, [])\n  return width <= 768\n}\n\ntype AccordionCardsType = {\n  products: Array<{\n    /** \u6807\u9898\u6587\u672C */\n    title: string\n    /** \u56FE\u7247*/\n    img: string\n    /** \u5185\u5BB9\u8282\u70B9 */\n    subTitle: string\n  }>\n  className?: string\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: {\n      onClick: (v: any) => void\n    }\n  }\n}\n\nconst AccordionCards = ({\n  products = [],\n  className = '',\n  shape = 'square',\n  itemShape = 'square',\n  event,\n  primaryButton = '',\n}: AccordionCardsType) => {\n  const isMobile = useWindowWidth()\n  const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({})\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const refWidth = useRef<{ [key: number]: boolean }>({})\n  const enterRef = useRef<{ [key: number]: boolean }>({})\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      const current = { ...refWidth.current, [index]: true }\n      setCurrentWidth(current)\n      refWidth.current = current\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      item.addEventListener('transitionend', () => handleTransitionEnd(index))\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  // \u79FB\u52A8\u7AEF\n  if (isMobile) {\n    return (\n      <div className={cn('flex h-[400px] w-full gap-4 overflow-x-auto', className)}>\n        {products?.map((item, idx) => (\n          <div key={idx} className=\"shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n            <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={item?.img} />\n          </div>\n        ))}\n      </div>\n    )\n  }\n\n  // \u684C\u9762\u7AEF\n  return (\n    <div className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}>\n      {products?.map((item, idx) => {\n        const isExpanded = hoverIndex === idx\n        const flexValue = isExpanded ? 6 : 1\n        return (\n          <div\n            key={idx}\n            style={{\n              flex: flexValue,\n              transition: 'all 0.3s ease-in-out',\n            }}\n            ref={(el: HTMLDivElement | null) => {\n              if (el) getRef(idx, el)\n            }}\n            className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n            onMouseEnter={() => {\n              setHoverIndex(idx)\n              enterRef.current[idx] = true\n            }}\n            onMouseLeave={() => {\n              setHoverIndex(null)\n              const current = { ...refWidth.current, [idx]: false }\n              setCurrentWidth(current)\n              refWidth.current = current\n              enterRef.current[idx] = false\n            }}\n          >\n            <Picture source={item?.img} className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" />\n            {currentWidth?.[idx] ? (\n              <div\n                className={cn(\n                  'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6',\n                  'transition-all delay-300 duration-[50ms]',\n                  isExpanded ? 'opacity-100' : 'opacity-0'\n                )}\n              >\n                <div className=\"mr-1 flex-1 overflow-hidden\">\n                  <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n                    {item?.title}\n                  </p>\n                  <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n                </div>\n                <Button\n                  size=\"sm\"\n                  hoverEffect=\"slide\"\n                  variant=\"secondary\"\n                  onClick={() => event?.primaryButton?.onClick?.(item)}\n                  className={cn(\n                    'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n                    shape === 'round' ? 'rounded-2xl' : ''\n                  )}\n                >\n                  {primaryButton}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default AccordionCards\n"],
+  "mappings": "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",
   "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_picture", "import_button", "import_react", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "Picture", "isExpanded", "Button"]
 }

package/dist/cjs/biz-components/HeroBanner/HeroBanner.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var k=Object.create;var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var z=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},h=(e,a,r,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of B(a))!H.call(e,s)&&s!==r&&m(e,s,{get:()=>a[s],enumerable:!(n=w(a,s))||n.enumerable});return e};var C=(e,a,r)=>(r=e!=null?k(D(e)):{},h(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),F=e=>h(m({},"__esModule",{value:!0}),e);var R={};z(R,{default:()=>P});module.exports=F(R);var t=require("react/jsx-runtime"),u=C(require("react")),o=require("../../components/index.js"),l=require("../../helpers/index.js"),v=require("../../shared/Styles.js");const x=u.default.forwardRef(({data:e,className:a},r)=>{const{title:n,subtitle:s,background:b,primaryButton:p,secondaryButton:c,theme:i="light",products:d=[]}=e,g=i==="dark"?"text-white":"text-[#1D1D1F]",N=i==="dark"?"bg-white":"bg-[#1D1D1F]";return(0,t.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:r,className:(0,l.cn)(i==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,t.jsx)(o.Picture,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:b}),(0,t.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32",children:[(0,t.jsxs)("div",{className:"max-w-[686px] space-y-4",children:[(0,t.jsx)(o.Heading,{as:"h1",size:5,className:(0,l.cn)("hero-banner-title",g),html:n}),(0,t.jsx)(o.Text,{className:(0,l.cn)("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",g),html:s})]}),(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[c&&(0,t.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",...c,children:c.text}),p&&(0,t.jsx)(o.Button,{size:"lg",variant:"secondary",...p,className:"hero-banner-secondary-button",children:p.text})]})]}),d.length>0&&(0,t.jsx)("div",{className:"absolute bottom-0 z-10 flex items-center gap-3 px-32 pb-6",children:d.map((y,f)=>(0,t.jsxs)(u.default.Fragment,{children:[(0,t.jsx)(o.Text,{className:(0,l.cn)("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",i==="dark"?"text-white":"text-[#1D1D1F]"),children:y.title}),f<d.length-1&&(0,t.jsx)("div",{className:(0,l.cn)("h-4 w-px",N)})]},f))})]})});x.displayName="HeroBanner";var P=(0,v.withStyles)(x);
+"use strict";"use client";var k=Object.create;var m=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var z=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},h=(e,a,r,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of B(a))!H.call(e,s)&&s!==r&&m(e,s,{get:()=>a[s],enumerable:!(n=w(a,s))||n.enumerable});return e};var C=(e,a,r)=>(r=e!=null?k(D(e)):{},h(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),F=e=>h(m({},"__esModule",{value:!0}),e);var R={};z(R,{default:()=>P});module.exports=F(R);var t=require("react/jsx-runtime"),c=C(require("react")),o=require("../../components/index.js"),l=require("../../helpers/index.js"),v=require("../../shared/Styles.js");const x=c.default.forwardRef(({data:e,className:a},r)=>{const{title:n,subtitle:s,background:b,primaryButton:d,secondaryButton:u,theme:i="light",products:p=[]}=e,g=i==="dark"?"text-white":"text-[#1D1D1F]",N=i==="dark"?"bg-white":"bg-[#1D1D1F]";return(0,t.jsxs)("div",{"data-ui-component-id":"HeroBanner",ref:r,className:(0,l.cn)(i==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,t.jsx)(o.Picture,{className:"laptop:w-full absolute h-full",imgClassName:"h-full object-cover",source:b}),(0,t.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32",children:[n&&(0,t.jsxs)("div",{className:"max-w-[686px] space-y-4",children:[(0,t.jsx)(o.Heading,{as:"h1",size:5,className:(0,l.cn)("hero-banner-title",g),html:n}),(0,t.jsx)(o.Text,{className:(0,l.cn)("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",g),html:s})]}),(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[u&&(0,t.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:u.text}),d&&(0,t.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:d.text})]})]}),p.length>0&&(0,t.jsx)("div",{className:"absolute bottom-0 z-10 flex items-center gap-3 px-32 pb-6",children:p.map((y,f)=>(0,t.jsxs)(c.default.Fragment,{children:[(0,t.jsx)(o.Text,{className:(0,l.cn)("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",i==="dark"?"text-white":"text-[#1D1D1F]"),children:y.title}),f<p.length-1&&(0,t.jsx)("div",{className:(0,l.cn)("h-4 w-px",N)})]},f))})]})});x.displayName="HeroBanner";var P=(0,v.withStyles)(x);
 //# sourceMappingURL=HeroBanner.js.map

package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, background, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n  const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n  const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <Picture className=\"laptop:w-full absolute h-full\" imgClassName=\"h-full object-cover\" source={background} />\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32\">\n        <div className=\"max-w-[686px] space-y-4\">\n          <Heading as=\"h1\" size={5} className={cn('hero-banner-title', textColorClass)} html={title} />\n          <Text\n            className={cn('hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]', textColorClass)}\n            html={subtitle}\n          />\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"flex items-center gap-4\">\n          {secondaryButton && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\" {...secondaryButton}>\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && (\n            <Button size=\"lg\" variant=\"secondary\" {...primaryButton} className=\"hero-banner-secondary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {products.length > 0 && (\n        <div className=\"absolute bottom-0 z-10 flex items-center gap-3 px-32 pb-6\">\n          {products.map((product, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]',\n                  theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n                )}\n              >\n                {product.title}\n              </Text>\n              {index < products.length - 1 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIT,EAClGU,EAAiBF,IAAU,OAAS,aAAe,iBACnDG,EAAoBH,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,uBAAqB,aACrB,IAAKN,EACL,aAAW,MACTM,IAAU,OAAS,YAAc,GACjC,2JACAP,CACF,EAEA,oBAAC,WAAQ,UAAU,gCAAgC,aAAa,sBAAsB,OAAQI,EAAY,KAE1G,QAAC,OAAI,UAAU,2FACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,oBAAqBK,CAAc,EAAG,KAAMP,EAAO,KAC3F,OAAC,QACC,aAAW,MAAG,4EAA6EO,CAAc,EACzG,KAAMN,EACR,GACF,KAEA,QAAC,OAAI,UAAU,0BACZ,UAAAG,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAA8B,GAAGA,EAC5E,SAAAA,EAAgB,KACnB,EAEDD,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,YAAa,GAAGA,EAAe,UAAU,+BAChE,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAS,OAAS,MACjB,OAAC,OAAI,UAAU,4DACZ,SAAAA,EAAS,IAAI,CAACG,EAASC,OACtB,QAAC,EAAAd,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,gFACAS,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAI,EAAQ,MACX,EACCC,EAAQJ,EAAS,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,WAAYE,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDf,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, background, primaryButton, secondaryButton, theme = 'light', products = [] } = data\n  const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n  const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n  return (\n    <div\n      data-ui-component-id=\"HeroBanner\"\n      ref={ref}\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <Picture className=\"laptop:w-full absolute h-full\" imgClassName=\"h-full object-cover\" source={background} />\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 relative top-[30%] z-10 flex flex-col gap-8 px-32\">\n        {title && (\n          <div className=\"max-w-[686px] space-y-4\">\n            <Heading as=\"h1\" size={5} className={cn('hero-banner-title', textColorClass)} html={title} />\n            <Text\n              className={cn(\n                'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n                textColorClass\n              )}\n              html={subtitle}\n            />\n          </div>\n        )}\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"flex items-center gap-4\">\n          {secondaryButton && (\n            <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n              {secondaryButton.text}\n            </Button>\n          )}\n          {primaryButton && (\n            <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {products.length > 0 && (\n        <div className=\"absolute bottom-0 z-10 flex items-center gap-3 px-32 pb-6\">\n          {products.map((product, index) => (\n            <React.Fragment key={index}>\n              <Text\n                className={cn(\n                  'hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]',\n                  theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n                )}\n              >\n                {product.title}\n              </Text>\n              {index < products.length - 1 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAkB,oBAElBC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,SAAAC,EAAW,CAAC,CAAE,EAAIT,EAClGU,EAAiBF,IAAU,OAAS,aAAe,iBACnDG,EAAoBH,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,uBAAqB,aACrB,IAAKN,EACL,aAAW,MACTM,IAAU,OAAS,YAAc,GACjC,2JACAP,CACF,EAEA,oBAAC,WAAQ,UAAU,gCAAgC,aAAa,sBAAsB,OAAQI,EAAY,KAE1G,QAAC,OAAI,UAAU,2FACZ,UAAAF,MACC,QAAC,OAAI,UAAU,0BACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,oBAAqBO,CAAc,EAAG,KAAMP,EAAO,KAC3F,OAAC,QACC,aAAW,MACT,4EACAO,CACF,EACA,KAAMN,EACR,GACF,KAGF,QAAC,OAAI,UAAU,0BACZ,UAAAG,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAA,EAAgB,KACnB,EAEDD,MACC,OAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCG,EAAS,OAAS,MACjB,OAAC,OAAI,UAAU,4DACZ,SAAAA,EAAS,IAAI,CAACG,EAASC,OACtB,QAAC,EAAAd,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,gFACAS,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAI,EAAQ,MACX,EACCC,EAAQJ,EAAS,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,WAAYE,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDf,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
   "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "products", "textColorClass", "dividerColorClass", "product", "index"]
 }

package/dist/cjs/biz-components/MediaPlayerBase/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var g=Object.create;var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var s in t)m(e,s,{get:t[s],enumerable:!0})},x=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!P.call(e,r)&&r!==s&&m(e,r,{get:()=>t[r],enumerable:!(p=h(t,r))||p.enumerable});return e};var n=(e,t,s)=>(s=e!=null?g(w(e)):{},x(t||!e||!e.__esModule?m(s,"default",{value:e,enumerable:!0}):s,e)),B=e=>x(m({},"__esModule",{value:!0}),e);var z={};N(z,{default:()=>k});module.exports=B(z);var a=require("react/jsx-runtime"),c=require("react"),d=require("../../helpers/utils.js"),u=require("../../shared/Styles.js"),f=n(require("../../components/picture.js")),y=n(require("../../components/button.js"));const M=({className:e="",title:t="\u6807\u9898",videoTitle:s="\u89C6\u9891\u6807\u9898",btnText:p="\u6309\u94AE",img:r="https://img.anker.com/product/1719161555161.jpg",media:v="https://img.anker.com/product/1719161555161.mp4"})=>{const[o,i]=(0,c.useState)(!1),l=(0,c.useRef)(null);return(0,a.jsxs)("div",{className:(0,d.cn)(" relative w-full",e),children:[(0,a.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[(0,a.jsx)("div",{className:"text-center text-[40px] font-bold text-white lg:text-5xl xl:text-[64px]",dangerouslySetInnerHTML:{__html:o?s:t}}),!o&&(0,a.jsx)(y.default,{className:"member-equity-button-primary mx-auto border border-white bg-transparent px-4 py-2 text-xs text-white hover:bg-white hover:text-black sm:px-5 sm:py-[10px] sm:text-sm md:px-6 md:py-[11px] md:text-sm lg:px-7 lg:py-[12px] lg:text-base xl:px-7 xl:py-[14px] xl:text-base",variant:"primary",onClick:()=>{o?(l.current&&l.current.pause(),i(!1)):(l.current&&l.current.play(),i(!0))},children:p})]}),(0,a.jsxs)("div",{className:"media-cover xl:aspect-w-[1920] xl:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] md:aspect-w-[1024] md:aspect-h-[520] sm:aspect-w-[768] sm:aspect-h-[660] aspect-w-[390] aspect-h-[660] relative",children:[(0,a.jsx)("video",{ref:l,className:"size-full object-cover",src:v,muted:!0,loop:!0}),!o&&(0,a.jsx)(f.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:r})]})]})};var k=(0,u.withStyles)(M);
+"use strict";"use client";var g=Object.create;var i=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var P=(e,t)=>{for(var a in t)i(e,a,{get:t[a],enumerable:!0})},m=(e,t,a,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of h(t))!w.call(e,l)&&l!==a&&i(e,l,{get:()=>t[l],enumerable:!(p=v(t,l))||p.enumerable});return e};var n=(e,t,a)=>(a=e!=null?g(k(e)):{},m(t||!e||!e.__esModule?i(a,"default",{value:e,enumerable:!0}):a,e)),N=e=>m(i({},"__esModule",{value:!0}),e);var z={};P(z,{default:()=>M});module.exports=N(z);var s=require("react/jsx-runtime"),c=require("react"),x=require("../../helpers/utils.js"),u=require("../../shared/Styles.js"),f=n(require("../../components/picture.js")),b=n(require("../../components/button.js"));const B=({className:e="",data:{title:t,videoTitle:a,btnText:p,img:l,media:y}})=>{const[r,d]=(0,c.useState)(!1),o=(0,c.useRef)(null);return(0,s.jsxs)("div",{className:(0,x.cn)(" relative w-full",e),children:[(0,s.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[(0,s.jsx)("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:r?a:t}}),!r&&(0,s.jsx)(b.default,{className:"member-equity-button-primary lg-desktop:px-7 lg-desktop:py-[14px] lg-desktop:text-base tablet:px-5 tablet:py-[10px] tablet:text-sm desktop:px-6 desktop:py-[11px] desktop:text-sm mx-auto border border-white bg-transparent px-4 py-2 text-xs text-white hover:bg-white hover:text-black lg:px-7 lg:py-[12px] lg:text-base",variant:"primary",onClick:()=>{r?(o.current&&o.current.pause(),d(!1)):(o.current&&o.current.play(),d(!0))},children:p})]}),(0,s.jsxs)("div",{className:"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660] relative overflow-hidden",children:[(0,s.jsx)("video",{ref:o,className:"size-full object-cover",src:y,muted:!0,loop:!0}),!r&&(0,s.jsx)(f.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:l})]})]})};var M=(0,u.withStyles)(B);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MediaPlayerBase/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport type { MediaPlayerBaseProps } from './types.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  title = '\u6807\u9898',\n  videoTitle = '\u89C6\u9891\u6807\u9898',\n  btnText = '\u6309\u94AE',\n  img = 'https://img.anker.com/product/1719161555161.jpg',\n  media = 'https://img.anker.com/product/1719161555161.mp4',\n}) => {\n  const [isPlaying, setIsPlaying] = useState(false)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  return (\n    <div className={cn(' relative w-full', className)}>\n      <div className=\"media-content absolute left-1/2 top-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n        <div\n          className=\"text-center text-[40px] font-bold text-white lg:text-5xl xl:text-[64px]\"\n          dangerouslySetInnerHTML={{ __html: isPlaying ? videoTitle : title }}\n        />\n        {!isPlaying && (\n          <Button\n            className=\"member-equity-button-primary mx-auto border border-white bg-transparent px-4 py-2 text-xs text-white hover:bg-white hover:text-black sm:px-5 sm:py-[10px] sm:text-sm md:px-6 md:py-[11px] md:text-sm lg:px-7 lg:py-[12px] lg:text-base xl:px-7 xl:py-[14px] xl:text-base\"\n            variant=\"primary\"\n            onClick={() => {\n              if (isPlaying) {\n                if (videoRef.current) {\n                  videoRef.current.pause()\n                }\n                setIsPlaying(false)\n              } else {\n                if (videoRef.current) {\n                  videoRef.current.play()\n                }\n                setIsPlaying(true)\n              }\n            }}\n          >\n            {btnText}\n          </Button>\n        )}\n      </div>\n      <div className=\"media-cover xl:aspect-w-[1920] xl:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] md:aspect-w-[1024] md:aspect-h-[520] sm:aspect-w-[768] sm:aspect-h-[660] aspect-w-[390] aspect-h-[660] relative\">\n        <video ref={videoRef} className=\"size-full object-cover\" src={media} muted loop />\n        {!isPlaying && <Picture className=\"z-1 absolute left-0 top-0 size-full object-cover\" source={img} />}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoBM,IAAAI,EAAA,6BAnBNC,EAAwC,iBACxCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCAGnB,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,MAAAC,EAAQ,eACR,WAAAC,EAAa,2BACb,QAAAC,EAAU,eACV,IAAAC,EAAM,kDACN,MAAAC,EAAQ,iDACV,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1CC,KAAW,UAAyB,IAAI,EAC9C,SACE,QAAC,OAAI,aAAW,MAAG,mBAAoBR,CAAS,EAC9C,qBAAC,OAAI,UAAU,kHACb,oBAAC,OACC,UAAU,0EACV,wBAAyB,CAAE,OAAQM,EAAYJ,EAAaD,CAAM,EACpE,EACC,CAACK,MACA,OAAC,EAAAG,QAAA,CACC,UAAU,2QACV,QAAQ,UACR,QAAS,IAAM,CACTH,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,SAAAJ,EACH,GAEJ,KACA,QAAC,OAAI,UAAU,wMACb,oBAAC,SAAM,IAAKK,EAAU,UAAU,yBAAyB,IAAKH,EAAO,MAAK,GAAC,KAAI,GAAC,EAC/E,CAACC,MAAa,OAAC,EAAAI,QAAA,CAAQ,UAAU,mDAAmD,OAAQN,EAAK,GACpG,GACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWQ,CAAe",
+  "sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\n// import { convertLexicalToHTML } from '@payloadcms/richtext-lexical/dist/exports/html/index.js'\nimport type { MediaPlayerBaseProps } from './types.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n  className = '',\n  data: { title, videoTitle, btnText, img, media },\n}) => {\n  const [isPlaying, setIsPlaying] = useState(false)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  // const title_html = typeof title === 'string' ? title : convertLexicalToHTML({ data: title })\n  // const videoTitle_html = typeof videoTitle === 'string' ? videoTitle : convertLexicalToHTML({ data: videoTitle })\n\n  return (\n    <div className={cn(' relative w-full', className)}>\n      <div className=\"media-content absolute left-1/2 top-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\">\n        <div\n          className=\"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl\"\n          dangerouslySetInnerHTML={{ __html: isPlaying ? videoTitle : title }}\n        />\n        {!isPlaying && (\n          <Button\n            className=\"member-equity-button-primary lg-desktop:px-7 lg-desktop:py-[14px] lg-desktop:text-base tablet:px-5 tablet:py-[10px] tablet:text-sm desktop:px-6 desktop:py-[11px] desktop:text-sm mx-auto border border-white bg-transparent px-4 py-2 text-xs text-white hover:bg-white hover:text-black lg:px-7 lg:py-[12px] lg:text-base\"\n            variant=\"primary\"\n            onClick={() => {\n              if (isPlaying) {\n                if (videoRef.current) {\n                  videoRef.current.pause()\n                }\n                setIsPlaying(false)\n              } else {\n                if (videoRef.current) {\n                  videoRef.current.play()\n                }\n                setIsPlaying(true)\n              }\n            }}\n          >\n            {btnText}\n          </Button>\n        )}\n      </div>\n      <div className=\"media-cover lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660] relative overflow-hidden\">\n        <video ref={videoRef} className=\"size-full object-cover\" src={media} muted loop />\n        {!isPlaying && <Picture className=\"z-1 absolute left-0 top-0 size-full object-cover\" source={img} />}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqBM,IAAAI,EAAA,6BApBNC,EAAwC,iBACxCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCAInB,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,CAAM,CACjD,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1CC,KAAW,UAAyB,IAAI,EAK9C,SACE,QAAC,OAAI,aAAW,MAAG,mBAAoBR,CAAS,EAC9C,qBAAC,OAAI,UAAU,kHACb,oBAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQM,EAAYJ,EAAaD,CAAM,EACpE,EACC,CAACK,MACA,OAAC,EAAAG,QAAA,CACC,UAAU,8TACV,QAAQ,UACR,QAAS,IAAM,CACTH,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,SAAAJ,EACH,GAEJ,KACA,QAAC,OAAI,UAAU,0PACb,oBAAC,SAAM,IAAKK,EAAU,UAAU,yBAAyB,IAAKH,EAAO,MAAK,GAAC,KAAI,GAAC,EAC/E,CAACC,MAAa,OAAC,EAAAI,QAAA,CAAQ,UAAU,mDAAmD,OAAQN,EAAK,GACpG,GACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWQ,CAAe",
   "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_picture", "import_button", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "media", "isPlaying", "setIsPlaying", "videoRef", "Button", "Picture"]
 }

package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts

@@ -1,12 +1,10 @@
-import type React from 'react';
-export interface MediaPlayerBaseProps {
-    className?: string;
-    title: string;
-    videoTitle?: string;
-    btnText: string;
-    img: string;
-    media: string;
-    style?: {
-        [key: string]: React.CSSProperties;
+import type { ComponentCommonProps } from '../../types/props.js';
+export interface MediaPlayerBaseProps extends ComponentCommonProps {
+    data: {
+        title: string;
+        videoTitle: string;
+        btnText: string;
+        img: string;
+        media: string;
     };
 }

package/dist/cjs/biz-components/MediaPlayerBase/types.js

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

package/dist/cjs/biz-components/MediaPlayerBase/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/types.ts"],
-  "sourcesContent": ["import type React from 'react'\n\nexport interface MediaPlayerBaseProps {\n  className?: string\n  title: string\n  videoTitle?: string\n  btnText: string\n  img: string\n  media: string\n  style?: {\n    [key: string]: React.CSSProperties\n  }\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n  data: {\n    title: string\n    videoTitle: string\n    btnText: string\n    img: string\n    media: string\n  }\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/MediaPlayerMulti/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var f=Object.create;var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(e,l)=>{for(var i in l)o(e,i,{get:l[i],enumerable:!0})},r=(e,l,i,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of x(l))!g.call(e,a)&&a!==i&&o(e,a,{get:()=>l[a],enumerable:!(s=d(l,a))||s.enumerable});return e};var u=(e,l,i)=>(i=e!=null?f(p(e)):{},r(l||!e||!e.__esModule?o(i,"default",{value:e,enumerable:!0}):i,e)),w=e=>r(o({},"__esModule",{value:!0}),e);var y={};v(y,{default:()=>N});module.exports=w(y);var t=require("react/jsx-runtime"),k=require("react"),m=require("../../helpers/utils.js"),c=require("../../shared/Styles.js"),n=u(require("../../components/picture.js"));const h=({items:e=[],style:l="",className:i=""})=>(0,t.jsx)("div",{className:(0,m.cn)("flex gap-4 overflow-x-auto",i),children:e.map((s,a)=>(0,t.jsxs)("div",{className:(0,m.cn)("w-swiper-1/2 flex shrink-0 flex-col overflow-hidden sm:flex-row"),children:[(0,t.jsxs)("div",{className:"relative w-full flex-none sm:w-[49%]",children:[(0,t.jsx)(n.default,{source:s.backgroundImage,alt:s.name,className:"size-full",imgClassName:"w-full h-full object-cover"}),(0,t.jsx)("div",{className:"absolute bottom-6 right-6 flex items-center justify-center",children:(0,t.jsx)("div",{className:"flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 sm:size-12",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,t.jsxs)("div",{className:"flex flex-col gap-[30px] bg-white p-4 sm:gap-[60px] sm:p-6",children:[(0,t.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,t.jsx)("h3",{className:"text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] xl:text-lg",children:s.name}),(0,t.jsx)("p",{className:"text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] xl:text-lg",children:s.description})]}),(0,t.jsx)("p",{className:"text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] xl:text-2xl",children:s.quote})]})]},a))});var N=(0,c.withStyles)(h);
+"use strict";"use client";var f=Object.create;var o=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var h=(t,l)=>{for(var a in l)o(t,a,{get:l[a],enumerable:!0})},d=(t,l,a,i)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of x(l))!v.call(t,s)&&s!==a&&o(t,s,{get:()=>l[s],enumerable:!(i=n(l,s))||i.enumerable});return t};var u=(t,l,a)=>(a=t!=null?f(g(t)):{},d(l||!t||!t.__esModule?o(a,"default",{value:t,enumerable:!0}):a,t)),w=t=>d(o({},"__esModule",{value:!0}),t);var k={};h(k,{default:()=>N});module.exports=w(k);var e=require("react/jsx-runtime"),D=require("react"),p=require("../../helpers/utils.js"),m=require("../../shared/Styles.js"),r=require("../../components/index.js"),c=u(require("../Title/index.js"));const b=({data:{items:t=[],title:l},className:a=""})=>(0,e.jsxs)("div",{className:a,children:[l&&(0,e.jsx)(c.default,{data:{title:l}}),(0,e.jsx)("div",{className:(0,p.cn)("flex gap-4 overflow-x-auto",a),children:t.map((i,s)=>(0,e.jsxs)("div",{className:(0,p.cn)("w-swiper-1/2 tablet:flex-row flex shrink-0 flex-col overflow-hidden","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-[360px]"),children:[(0,e.jsxs)("div",{className:"tablet:w-[49%] relative w-full flex-none",children:[(0,e.jsx)(r.Picture,{source:i.backgroundImage,alt:i.name,className:"size-full",imgClassName:"w-full h-full object-cover"}),(0,e.jsx)("div",{className:"absolute bottom-6 right-6 flex items-center justify-center",children:(0,e.jsx)("div",{className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,e.jsxs)("div",{className:"tablet:gap-[60px] tablet:p-6 flex flex-col gap-[30px] bg-white p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,e.jsx)("h3",{className:"lg-desktop:text-lg text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:i.name}),(0,e.jsx)("p",{className:"lg-desktop:text-lg text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:i.description})]}),(0,e.jsx)("p",{className:"lg-desktop:text-2xl text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:i.quote})]})]},s))})]});var N=(0,m.withStyles)(b);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport type { TestimonialSectionProps } from './types.js'\n\nconst MediaPlayerMulti: React.FC<TestimonialSectionProps> = ({ items = [], style = '', className = '' }) => {\n  return (\n    <div className={cn('flex gap-4 overflow-x-auto', className)}>\n      {items.map((item, index) => (\n        <div key={index} className={cn('w-swiper-1/2 flex shrink-0 flex-col overflow-hidden sm:flex-row')}>\n          <div className=\"relative w-full flex-none sm:w-[49%]\">\n            <Picture\n              source={item.backgroundImage}\n              alt={item.name}\n              className=\"size-full\"\n              imgClassName=\"w-full h-full object-cover\"\n            />\n            <div className=\"absolute bottom-6 right-6 flex items-center justify-center\">\n              <div className=\"flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 sm:size-12\">\n                <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                </svg>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"flex flex-col gap-[30px] bg-white p-4 sm:gap-[60px] sm:p-6\">\n            <div className=\"flex flex-col gap-2\">\n              <h3 className=\"text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] xl:text-lg\">\n                {item.name}\n              </h3>\n              <p className=\"text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] xl:text-lg\">\n                {item.description}\n              </p>\n            </div>\n\n            <p className=\"text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] xl:text-2xl\">\n              {item.quote}\n            </p>\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAYU,IAAAI,EAAA,6BAXVC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAoB,0CAGpB,MAAMC,EAAsD,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,GAAI,UAAAC,EAAY,EAAG,OAElG,OAAC,OAAI,aAAW,MAAG,6BAA8BA,CAAS,EACvD,SAAAF,EAAM,IAAI,CAACG,EAAMC,OAChB,QAAC,OAAgB,aAAW,MAAG,iEAAiE,EAC9F,qBAAC,OAAI,UAAU,uCACb,oBAAC,EAAAC,QAAA,CACC,OAAQF,EAAK,gBACb,IAAKA,EAAK,KACV,UAAU,YACV,aAAa,6BACf,KACA,OAAC,OAAI,UAAU,6DACb,mBAAC,OAAI,UAAU,0FACb,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EACF,GACF,KAEA,QAAC,OAAI,UAAU,6DACb,qBAAC,OAAI,UAAU,sBACb,oBAAC,MAAG,UAAU,iFACX,SAAAA,EAAK,KACR,KACA,OAAC,KAAE,UAAU,iFACV,SAAAA,EAAK,YACR,GACF,KAEA,OAAC,KAAE,UAAU,gFACV,SAAAA,EAAK,MACR,GACF,IA9BQC,CA+BV,CACD,EACH,EAIJ,IAAOZ,KAAQ,cAAWO,CAAgB",
-  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_picture", "MediaPlayerMulti", "items", "style", "className", "item", "index", "Picture"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\n\nimport type { TestimonialSectionProps } from './types.js'\n\nconst MediaPlayerMulti: React.FC<TestimonialSectionProps> = ({ data: { items = [], title }, className = '' }) => {\n  return (\n    <div className={className}>\n      {title && <Title data={{ title }} />}\n      <div className={cn('flex gap-4 overflow-x-auto', className)}>\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'w-swiper-1/2 tablet:flex-row flex shrink-0 flex-col overflow-hidden',\n              'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-[360px]'\n            )}\n          >\n            <div className=\"tablet:w-[49%] relative w-full flex-none\">\n              <Picture\n                source={item.backgroundImage}\n                alt={item.name}\n                className=\"size-full\"\n                imgClassName=\"w-full h-full object-cover\"\n              />\n              <div className=\"absolute bottom-6 right-6 flex items-center justify-center\">\n                <div className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20\">\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </div>\n              </div>\n            </div>\n\n            <div className=\"tablet:gap-[60px] tablet:p-6 flex flex-col gap-[30px] bg-white p-4\">\n              <div className=\"flex flex-col gap-2\">\n                <h3 className=\"lg-desktop:text-lg text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n                  {item.name}\n                </h3>\n                <p className=\"lg-desktop:text-lg text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n                  {item.description}\n                </p>\n              </div>\n\n              <p className=\"lg-desktop:text-2xl text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n                {item.quote}\n              </p>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAYgB,IAAAI,EAAA,6BAXhBC,EAAkB,iBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAIlB,MAAMC,EAAsD,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,CAAM,EAAG,UAAAC,EAAY,EAAG,OAEvG,QAAC,OAAI,UAAWA,EACb,UAAAD,MAAS,OAAC,EAAAE,QAAA,CAAM,KAAM,CAAE,MAAAF,CAAM,EAAG,KAClC,OAAC,OAAI,aAAW,MAAG,6BAA8BC,CAAS,EACvD,SAAAF,EAAM,IAAI,CAACI,EAAMC,OAChB,QAAC,OAEC,aAAW,MACT,sEACA,mEACF,EAEA,qBAAC,OAAI,UAAU,2CACb,oBAAC,WACC,OAAQD,EAAK,gBACb,IAAKA,EAAK,KACV,UAAU,YACV,aAAa,6BACf,KACA,OAAC,OAAI,UAAU,6DACb,mBAAC,OAAI,UAAU,8FACb,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EACF,GACF,KAEA,QAAC,OAAI,UAAU,qEACb,qBAAC,OAAI,UAAU,sBACb,oBAAC,MAAG,UAAU,yFACX,SAAAA,EAAK,KACR,KACA,OAAC,KAAE,UAAU,yFACV,SAAAA,EAAK,YACR,GACF,KAEA,OAAC,KAAE,UAAU,wFACV,SAAAA,EAAK,MACR,GACF,IAnCKC,CAoCP,CACD,EACH,GACF,EAIJ,IAAOd,KAAQ,cAAWQ,CAAgB",
+  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "MediaPlayerMulti", "items", "title", "className", "Title", "item", "index"]
 }

package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts

@@ -6,6 +6,8 @@ export interface TestimonialItem {
     backgroundImage: string;
 }
 export interface TestimonialSectionProps extends ComponentCommonProps {
-    items: TestimonialItem[];
-    className?: string;
+    data: {
+        title?: string;
+        items: TestimonialItem[];
+    };
 }

package/dist/cjs/biz-components/MediaPlayerMulti/types.js

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

package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/types.ts"],
-  "sourcesContent": ["import type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface TestimonialItem {\n  name: string\n  description: string\n  quote: string\n  backgroundImage: string\n}\n\nexport interface TestimonialSectionProps extends ComponentCommonProps {\n  items: TestimonialItem[]\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface TestimonialItem {\n  name: string\n  description: string\n  quote: string\n  backgroundImage: string\n}\n\nexport interface TestimonialSectionProps extends ComponentCommonProps {\n  data: {\n    title?: string\n    items: TestimonialItem[]\n  }\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/MemberEquity/index.js

@@ -1,12 +1,9 @@
-"use strict";"use client";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var y=(p,e)=>{for(var o in e)s(p,o,{get:e[o],enumerable:!0})},f=(p,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of b(e))!k.call(p,a)&&a!==o&&s(p,a,{get:()=>e[a],enumerable:!(l=u(e,a))||l.enumerable});return p};var w=p=>f(s({},"__esModule",{value:!0}),p);var N={};y(N,{default:()=>h});module.exports=w(N);var t=require("react/jsx-runtime"),B=require("react"),x=require("../../components/index.js"),r=require("../../shared/Styles.js");const v=({data:p,className:e=""})=>{const{title:o,description:l,backgroundImage:a,primaryButton:n,secondaryButton:i,theme:m,shape:d}=p,g=()=>{},c=()=>{};return(0,t.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:`
+"use strict";"use client";var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var v=(o,t)=>{for(var d in t)i(o,d,{get:t[d],enumerable:!0})},f=(o,t,d,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of y(t))!k.call(o,a)&&a!==d&&i(o,a,{get:()=>t[a],enumerable:!(l=b(t,a))||l.enumerable});return o};var N=o=>f(i({},"__esModule",{value:!0}),o);var B={};v(B,{default:()=>q});module.exports=N(B);var e=require("react/jsx-runtime"),C=require("react"),p=require("../../components/index.js"),r=require("../../shared/Styles.js");const h=({data:o,className:t=""})=>{const{title:d,description:l,backgroundImage:a,mobileBackgroundImage:n,primaryButton:u,secondaryButton:c,theme:m,shape:s}=o,x=()=>{},g=()=>{};return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:`
         ${m==="dark"?"aiui-dark":""}
         relative w-full overflow-hidden bg-[#242426]
-        ${d==="rounded"?"tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none":""}
-        ${e}
-      `,children:[(0,t.jsx)("div",{className:"absolute inset-0 size-full",style:{backgroundImage:`
-            radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),
-            url(${a})
-          `,backgroundSize:"cover",backgroundPosition:"center"}}),(0,t.jsx)("div",{className:`
+        ${s==="rounded"?"tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none":""}
+        ${t}
+      `,children:[(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:a,type:"video/mp4"})}),(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:n,type:"video/mp4"})}),(0,e.jsx)("div",{className:`
         xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]
         desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]
         relative 
@@ -14,28 +11,14 @@
         flex
         aspect-[343/200]
         w-full items-center
-      `,children:(0,t.jsxs)("div",{className:`
+      `,children:(0,e.jsxs)("div",{className:`
           tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
           desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
-        `,children:[(0,t.jsxs)("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[(0,t.jsx)("h2",{className:`
-              member-equity-title font-mont tablet:text-2xl laptop:text-3xl desktop:text-4xl
-              lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]
-              max-w-[280px]
-              text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white
-            `,children:o}),(0,t.jsx)("p",{className:`
-              member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg
-              lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]
-              max-w-[260px]
-              text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white
-            `,children:l})]}),(0,t.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,t.jsx)(x.Button,{variant:"primary",onClick:g,className:`
-                member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]
-                laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4
-                py-2 text-xs text-white hover:bg-white hover:text-black
-                ${d==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
-              `,children:n.text}),(0,t.jsx)(x.Button,{variant:"secondary",onClick:c,className:`
-                member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5
-                laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]
-                desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs
-                ${d==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
-              `,children:i.text})]})]})})]})};var h=(0,r.withStyles)(v);
+        `,children:[(0,e.jsxs)("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[(0,e.jsx)(p.Heading,{as:"h2",size:5,className:"member-equity-title ",children:d}),(0,e.jsx)(p.Text,{size:3,className:"member-equity-description",html:l})]}),(0,e.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[(0,e.jsx)(p.Button,{variant:"secondary",onClick:g,className:`
+                member-equity-button-secondary 
+                ${s==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
+              `,children:c.text}),(0,e.jsx)(p.Button,{variant:"primary",onClick:x,className:`
+                member-equity-button-primary 
+                ${s==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
+              `,children:u.text})]})]})})]})};var q=(0,r.withStyles)(h);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MemberEquity/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n  const { title, description, backgroundImage, primaryButton, secondaryButton, theme, shape } = data\n  const handleButtonPrimaryClick = () => {\n    // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n  }\n\n  const handleButtonSecondaryClick = () => {\n    // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"MemberEquity\"\n      className={`\n        ${theme === 'dark' ? 'aiui-dark' : ''}\n        relative w-full overflow-hidden bg-[#242426]\n        ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n        ${className}\n      `}\n    >\n      <div\n        className=\"absolute inset-0 size-full\"\n        style={{\n          backgroundImage: `\n            radial-gradient(circle at 70% 176%, rgba(84, 85, 87, 0) 72%, rgba(84, 85, 87, 1) 100%),\n            url(${backgroundImage})\n          `,\n          backgroundSize: 'cover',\n          backgroundPosition: 'center',\n        }}\n      />\n      <div\n        className={`\n        xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]\n        desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]\n        relative \n        mx-auto\n        flex\n        aspect-[343/200]\n        w-full items-center\n      `}\n      >\n        <div\n          className={`\n          tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n          desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n        `}\n        >\n          <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n            <h2\n              className={`\n              member-equity-title font-mont tablet:text-2xl laptop:text-3xl desktop:text-4xl\n              lg-desktop:text-[32px] tablet:max-w-[300px] laptop:max-w-[400px] desktop:max-w-[500px] lg-desktop:max-w-[547px]\n              max-w-[280px]\n              text-xl font-bold leading-[1.2] tracking-[-0.04em] text-white\n            `}\n            >\n              {title}\n            </h2>\n            <p\n              className={`\n              member-equity-description font-pingfang tablet:text-sm laptop:text-base desktop:text-lg\n              lg-desktop:text-lg tablet:max-w-[286px] laptop:max-w-[350px] desktop:max-w-[426px] lg-desktop:max-w-[547px]\n              max-w-[260px]\n              text-sm font-semibold leading-[1.4] tracking-[-0.02em] text-white\n            `}\n            >\n              {description}\n            </p>\n          </div>\n\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n            <Button\n              variant=\"primary\"\n              onClick={handleButtonPrimaryClick}\n              className={`\n                member-equity-button-primary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5 laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px]\n                laptop:py-[11px] desktop:py-[12px] lg-desktop:py-[14px] border border-white bg-transparent px-4\n                py-2 text-xs text-white hover:bg-white hover:text-black\n                ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n              `}\n            >\n              {primaryButton.text}\n            </Button>\n            <Button\n              variant=\"secondary\"\n              onClick={handleButtonSecondaryClick}\n              className={`\n                member-equity-button-secondary tablet:text-sm laptop:text-sm desktop:text-base lg-desktop:text-base tablet:px-5\n                laptop:px-6 desktop:px-7 lg-desktop:px-7 tablet:py-[10px] laptop:py-[11px]\n                desktop:py-[12px] lg-desktop:py-[14px] px-4 py-2 text-xs\n                ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n              `}\n            >\n              {secondaryButton.text}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default withStyles(MemberEquity)\n"],
-  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0BM,IAAAI,EAAA,6BAzBNC,EAAkB,iBAClBC,EAAuB,qCACvBC,EAA2B,kCAG3B,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAAIR,EACxFS,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,UAAW;AAAA,UACPH,IAAU,OAAS,YAAc,EAAE;AAAA;AAAA,UAEnCC,IAAU,UAAY,uEAAyE,EAAE;AAAA,UACjGP,CAAS;AAAA,QAGb,oBAAC,OACC,UAAU,6BACV,MAAO,CACL,gBAAiB;AAAA;AAAA,kBAETG,CAAe;AAAA,YAEvB,eAAgB,QAChB,mBAAoB,QACtB,EACF,KACA,OAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,qBAAC,OAAI,UAAU,+EACb,oBAAC,MACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAF,EACH,KACA,OAAC,KACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,cAOV,SAAAC,EACH,GACF,KAGA,QAAC,OAAI,UAAU,mFACb,oBAAC,UACC,QAAQ,UACR,QAASM,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPD,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAH,EAAc,KACjB,KACA,OAAC,UACC,QAAQ,YACR,QAASK,EACT,UAAW;AAAA;AAAA;AAAA;AAAA,kBAIPF,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAF,EAAgB,KACnB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWM,CAAY",
-  "names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n  const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } = data\n  const handleButtonPrimaryClick = () => {\n    // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n  }\n\n  const handleButtonSecondaryClick = () => {\n    // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"MemberEquity\"\n      className={`\n        ${theme === 'dark' ? 'aiui-dark' : ''}\n        relative w-full overflow-hidden bg-[#242426]\n        ${shape === 'rounded' ? 'tablet:rounded-lg laptop:rounded-xl desktop:rounded-2xl rounded-none' : ''}\n        ${className}\n      `}\n    >\n      <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n        <source src={backgroundImage} type=\"video/mp4\" />\n      </video>\n      <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n        <source src={mobileBackgroundImage} type=\"video/mp4\" />\n      </video>\n      <div\n        className={`\n        xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]\n        desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]\n        relative \n        mx-auto\n        flex\n        aspect-[343/200]\n        w-full items-center\n      `}\n      >\n        <div\n          className={`\n          tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6\n          desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4\n        `}\n        >\n          <div className=\"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2\">\n            <Heading as=\"h2\" size={5} className={`member-equity-title `}>\n              {title}\n            </Heading>\n            <Text size={3} className={`member-equity-description`} html={description} />\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n            <Button\n              variant=\"secondary\"\n              onClick={handleButtonSecondaryClick}\n              className={`\n                member-equity-button-secondary \n                ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n              `}\n            >\n              {secondaryButton.text}\n            </Button>\n            <Button\n              variant=\"primary\"\n              onClick={handleButtonPrimaryClick}\n              className={`\n                member-equity-button-primary \n                ${shape === 'rounded' ? 'tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]' : ''}\n              `}\n            >\n              {primaryButton.text}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n\nexport default withStyles(MemberEquity)\n"],
+  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BQ,IAAAI,EAAA,6BA1BRC,EAAkB,iBAClBC,EAAsC,qCACtCC,EAA2B,kCAG3B,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,gBAAAC,EAAiB,sBAAAC,EAAuB,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAO,MAAAC,CAAM,EAAIT,EAC/GU,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,SACE,QAAC,WACC,uBAAqB,eACrB,UAAW;AAAA,UACPH,IAAU,OAAS,YAAc,EAAE;AAAA;AAAA,UAEnCC,IAAU,UAAY,uEAAyE,EAAE;AAAA,UACjGR,CAAS;AAAA,QAGb,oBAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,mBAAC,UAAO,IAAKG,EAAiB,KAAK,YAAY,EACjD,KACA,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKC,EAAuB,KAAK,YAAY,EACvD,KACA,OAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,qBAAC,OAAI,UAAU,+EACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAClC,SAAAH,EACH,KACA,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,mFACb,oBAAC,UACC,QAAQ,YACR,QAASQ,EACT,UAAW;AAAA;AAAA,kBAEPF,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAF,EAAgB,KACnB,KACA,OAAC,UACC,QAAQ,UACR,QAASG,EACT,UAAW;AAAA;AAAA,kBAEPD,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAH,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWM,CAAY",
+  "names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
 }

package/dist/cjs/biz-components/MemberEquity/types.d.ts

@@ -5,8 +5,9 @@ export interface MemberEquityProps extends ComponentCommonProps {
         title: string;
         /** 描述文本 */
         description: string;
-        /** 背景图片 URL */
+        /** 背景图片/视频 URL */
         backgroundImage: string;
+        mobileBackgroundImage?: string;
         /** 主按钮配置 */
         primaryButton: {
             text: string;

package/dist/cjs/biz-components/MemberEquity/types.js

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

package/dist/cjs/biz-components/MemberEquity/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/types.ts"],
-  "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n  data: {\n    /** \u6807\u9898 */\n    title: string\n    /** \u63CF\u8FF0\u6587\u672C */\n    description: string\n    /** \u80CC\u666F\u56FE\u7247 URL */\n    backgroundImage: string\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton: {\n      text: string\n      href: string\n    }\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton: {\n      text: string\n      href: string\n    }\n    /** \u5F62\u72B6 */\n    shape?: Shape\n    /** \u4E3B\u9898 */\n    theme?: Theme\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js'\n\nexport interface MemberEquityProps extends ComponentCommonProps {\n  data: {\n    /** \u6807\u9898 */\n    title: string\n    /** \u63CF\u8FF0\u6587\u672C */\n    description: string\n    /** \u80CC\u666F\u56FE\u7247/\u89C6\u9891 URL */\n    backgroundImage: string\n    mobileBackgroundImage?: string\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton: {\n      text: string\n      href: string\n    }\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton: {\n      text: string\n      href: string\n    }\n    /** \u5F62\u72B6 */\n    shape?: Shape\n    /** \u4E3B\u9898 */\n    theme?: Theme\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js

@@ -1,2 +1,2 @@
-"use strict";var k=Object.create;var p=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var b=(e,a)=>{for(var i in a)p(e,i,{get:a[i],enumerable:!0})},d=(e,a,i,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of g(a))!G.call(e,r)&&r!==i&&p(e,r,{get:()=>a[r],enumerable:!(s=B(a,r))||s.enumerable});return e};var n=(e,a,i)=>(i=e!=null?k(C(e)):{},d(a||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),w=e=>d(p({},"__esModule",{value:!0}),e);var M={};b(M,{default:()=>L});module.exports=w(M);var t=require("react/jsx-runtime"),h=n(require("react")),y=require("../../shared/Styles.js"),v=n(require("../../components/picture.js")),u=n(require("../../components/button.js")),x=require("../../components/heading.js"),N=require("../../components/text.js"),l=require("../../components/carousel.js"),c=require("../../components/gird.js");const f=({item:e})=>{const{theme:a,title:i,description:s,imageUrl:r,primaryBtn:o,secondaryBtn:m}=e;return(0,t.jsxs)("div",{className:`item-wrapper relative w-full border ${a==="dark"?"aiui-dark":"aiui-light"}`,children:[(0,t.jsx)(v.default,{source:r,className:"inset-0"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(x.Heading,{className:"item-title",children:i}),(0,t.jsx)(N.Text,{className:"item-description",children:s})]}),(0,t.jsxs)("div",{className:"flex gap-2",children:[(0,t.jsx)(u.default,{variant:"primary",children:o.text}),(0,t.jsx)(u.default,{variant:"secondary",children:m.text})]})]})]})},I=h.default.forwardRef((e,a)=>{const{items:i=[],carousel:s}=e.data,r=o=>{switch(o){case"full":return 12;case"half":return 6;case"one-third":return 4}};return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:a,className:"",children:[(0,t.jsx)(c.Grid,{className:"w-full",children:i.map((o,m)=>(0,t.jsx)(c.GridItem,{span:r(o.width),children:(0,t.jsx)(f,{item:o})},m))}),s?.items.length>0?(0,t.jsx)(l.Carousel,{className:"laptop:mt-4 mt-3",children:(0,t.jsx)(l.CarouselContent,{className:"flex",children:s.items.map((o,m)=>(0,t.jsx)(l.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,t.jsx)(f,{item:o})},m))})}):null]})});var L=(0,y.withStyles)(I);
+"use strict";var C=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var I=(e,a)=>{for(var i in a)c(e,i,{get:a[i],enumerable:!0})},f=(e,a,i,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of G(a))!w.call(e,r)&&r!==i&&c(e,r,{get:()=>a[r],enumerable:!(l=g(a,r))||l.enumerable});return e};var n=(e,a,i)=>(i=e!=null?C(b(e)):{},f(a||!e||!e.__esModule?c(i,"default",{value:e,enumerable:!0}):i,e)),L=e=>f(c({},"__esModule",{value:!0}),e);var H={};I(H,{default:()=>T});module.exports=L(H);var t=require("react/jsx-runtime"),y=n(require("react")),k=require("../../shared/Styles.js"),v=n(require("../../components/picture.js")),d=n(require("../../components/button.js")),N=require("../../components/heading.js"),x=require("../../components/text.js"),s=require("../../components/carousel.js"),p=require("../../components/gird.js"),B=n(require("../Title/index.js"));const h=({item:e})=>{const{theme:a="light",title:i,description:l,imageUrl:r,primaryBtn:m,secondaryBtn:o}=e;return(0,t.jsxs)("div",{className:`item-wrapper relative w-full border ${a==="dark"?"aiui-dark":"aiui-light"}`,children:[(0,t.jsx)(v.default,{source:r,className:"inset-0"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(N.Heading,{className:"item-title",children:i}),(0,t.jsx)(x.Text,{className:"item-description",children:l})]}),(0,t.jsxs)("div",{className:"flex gap-2",children:[m&&(0,t.jsx)(d.default,{variant:"primary",asChild:!0,children:(0,t.jsx)("a",{href:m.link,children:m.text})}),o&&(0,t.jsx)(d.default,{variant:"secondary",asChild:!0,children:(0,t.jsx)("a",{href:o.link,children:o.text})})]})]})]})},M=y.default.forwardRef((e,a)=>{const{sectionTitle:i,items:l=[],carousel:r}=e.data,m=o=>{switch(o){case"full":return 12;case"half":return 6;case"one-third":return 4}};return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:a,className:"",children:[i&&(0,t.jsx)(B.default,{data:{title:i},className:"section-title"}),(0,t.jsx)(p.Grid,{className:"w-full",children:l.map((o,u)=>(0,t.jsx)(p.GridItem,{span:m(o.width),children:(0,t.jsx)(h,{item:o})},u))}),r&&r?.items.length>0?(0,t.jsx)(s.Carousel,{className:"laptop:mt-4 mt-3",children:(0,t.jsx)(s.CarouselContent,{className:"flex",children:r.items.map((o,u)=>(0,t.jsx)(s.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,t.jsx)(h,{item:o})},u))})}):null]})});var T=(0,k.withStyles)(M);
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\n\nconst ItemBlock = ({ item }: { item: Item }) => {\n  const { theme, title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n  return (\n    <div className={`item-wrapper relative w-full border ${theme === 'dark' ? 'aiui-dark' : 'aiui-light'}`}>\n      <Picture source={imageUrl} className=\"inset-0\" />\n      <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n        <div>\n          <Heading className=\"item-title\">{title}</Heading>\n          <Text className=\"item-description\">{description}</Text>\n        </div>\n        <div className=\"flex gap-2\">\n          <Button variant=\"primary\">{primaryBtn.text}</Button>\n          <Button variant=\"secondary\">{secondaryBtn.text}</Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { items = [], carousel } = props.data\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n      <Grid className=\"w-full\">\n        {items.map((item, index) => (\n          <GridItem key={index} span={getSpan(item.width)}>\n            <ItemBlock item={item} />\n          </GridItem>\n        ))}\n      </Grid>\n      {carousel?.items.length > 0 ? (\n        <Carousel className=\"laptop:mt-4 mt-3\">\n          <CarouselContent className=\"flex\">\n            {carousel.items.map((item, index) => (\n              <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n                <ItemBlock item={item} />\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n      ) : null}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAeM,IAAAI,EAAA,6BAfNC,EAAkB,oBAElBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAAwD,wCACxDC,EAA+B,oCAE/B,MAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAsB,CAC9C,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,WAAAC,EAAY,aAAAC,CAAa,EAAIN,EAE1E,SACE,QAAC,OAAI,UAAW,uCAAuCC,IAAU,OAAS,YAAc,YAAY,GAClG,oBAAC,EAAAM,QAAA,CAAQ,OAAQH,EAAU,UAAU,UAAU,KAC/C,QAAC,OAAI,UAAU,kFACb,qBAAC,OACC,oBAAC,WAAQ,UAAU,aAAc,SAAAF,EAAM,KACvC,OAAC,QAAK,UAAU,mBAAoB,SAAAC,EAAY,GAClD,KACA,QAAC,OAAI,UAAU,aACb,oBAAC,EAAAK,QAAA,CAAO,QAAQ,UAAW,SAAAH,EAAW,KAAK,KAC3C,OAAC,EAAAG,QAAA,CAAO,QAAQ,YAAa,SAAAF,EAAa,KAAK,GACjD,GACF,GACF,CAEJ,EAEMG,EAA0B,EAAAC,QAAM,WAAyD,CAACC,EAAOC,IAAQ,CAC7G,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIH,EAAM,KAEjCI,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEA,SACE,QAAC,WAAQ,uBAAqB,0BAA0B,IAAKJ,EAAK,UAAU,GAC1E,oBAAC,QAAK,UAAU,SACb,SAAAC,EAAM,IAAI,CAACb,EAAMiB,OAChB,OAAC,YAAqB,KAAMF,EAAQf,EAAK,KAAK,EAC5C,mBAACD,EAAA,CAAU,KAAMC,EAAM,GADViB,CAEf,CACD,EACH,EACCH,GAAU,MAAM,OAAS,KACxB,OAAC,YAAS,UAAU,mBAClB,mBAAC,mBAAgB,UAAU,OACxB,SAAAA,EAAS,MAAM,IAAI,CAACd,EAAMiB,OACzB,OAAC,gBAAyB,UAAU,qDAClC,mBAAClB,EAAA,CAAU,KAAMC,EAAM,GADNiB,CAEnB,CACD,EACH,EACF,EACE,MACN,CAEJ,CAAC,EAED,IAAO7B,KAAQ,cAAWqB,CAAuB",
-  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "items", "carousel", "getSpan", "width", "index"]
+  "sourcesContent": ["import React from 'react'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\n\nconst ItemBlock = ({ item }: { item: Item }) => {\n  const { theme = 'light', title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n  return (\n    <div className={`item-wrapper relative w-full border ${theme === 'dark' ? 'aiui-dark' : 'aiui-light'}`}>\n      <Picture source={imageUrl} className=\"inset-0\" />\n      <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n        <div>\n          <Heading className=\"item-title\">{title}</Heading>\n          <Text className=\"item-description\">{description}</Text>\n        </div>\n        <div className=\"flex gap-2\">\n          {primaryBtn && (\n            <Button variant=\"primary\" asChild>\n              <a href={primaryBtn.link}>{primaryBtn.text}</a>\n            </Button>\n          )}\n          {secondaryBtn && (\n            <Button variant=\"secondary\" asChild>\n              <a href={secondaryBtn.link}>{secondaryBtn.text}</a>\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { sectionTitle, items = [], carousel } = props.data\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n      <Grid className=\"w-full\">\n        {items.map((item, index) => (\n          <GridItem key={index} span={getSpan(item.width)}>\n            <ItemBlock item={item} />\n          </GridItem>\n        ))}\n      </Grid>\n      {carousel && carousel?.items.length > 0 ? (\n        <Carousel className=\"laptop:mt-4 mt-3\">\n          <CarouselContent className=\"flex\">\n            {carousel.items.map((item, index) => (\n              <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n                <ItemBlock item={item} />\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n        </Carousel>\n      ) : null}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgBM,IAAAI,EAAA,6BAhBNC,EAAkB,oBAElBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAAwD,wCACxDC,EAA+B,oCAC/BC,EAAkB,gCAElB,MAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAsB,CAC9C,KAAM,CAAE,MAAAC,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,WAAAC,EAAY,aAAAC,CAAa,EAAIN,EAEpF,SACE,QAAC,OAAI,UAAW,uCAAuCC,IAAU,OAAS,YAAc,YAAY,GAClG,oBAAC,EAAAM,QAAA,CAAQ,OAAQH,EAAU,UAAU,UAAU,KAC/C,QAAC,OAAI,UAAU,kFACb,qBAAC,OACC,oBAAC,WAAQ,UAAU,aAAc,SAAAF,EAAM,KACvC,OAAC,QAAK,UAAU,mBAAoB,SAAAC,EAAY,GAClD,KACA,QAAC,OAAI,UAAU,aACZ,UAAAE,MACC,OAAC,EAAAG,QAAA,CAAO,QAAQ,UAAU,QAAO,GAC/B,mBAAC,KAAE,KAAMH,EAAW,KAAO,SAAAA,EAAW,KAAK,EAC7C,EAEDC,MACC,OAAC,EAAAE,QAAA,CAAO,QAAQ,YAAY,QAAO,GACjC,mBAAC,KAAE,KAAMF,EAAa,KAAO,SAAAA,EAAa,KAAK,EACjD,GAEJ,GACF,GACF,CAEJ,EAEMG,EAA0B,EAAAC,QAAM,WAAyD,CAACC,EAAOC,IAAQ,CAC7G,KAAM,CAAE,aAAAC,EAAc,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIJ,EAAM,KAE/CK,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEA,SACE,QAAC,WAAQ,uBAAqB,0BAA0B,IAAKL,EAAK,UAAU,GACzE,UAAAC,MAAgB,OAAC,EAAAK,QAAA,CAAM,KAAM,CAAE,MAAOL,CAAa,EAAG,UAAU,gBAAgB,KACjF,OAAC,QAAK,UAAU,SACb,SAAAC,EAAM,IAAI,CAACd,EAAMmB,OAChB,OAAC,YAAqB,KAAMH,EAAQhB,EAAK,KAAK,EAC5C,mBAACD,EAAA,CAAU,KAAMC,EAAM,GADVmB,CAEf,CACD,EACH,EACCJ,GAAYA,GAAU,MAAM,OAAS,KACpC,OAAC,YAAS,UAAU,mBAClB,mBAAC,mBAAgB,UAAU,OACxB,SAAAA,EAAS,MAAM,IAAI,CAACf,EAAMmB,OACzB,OAAC,gBAAyB,UAAU,qDAClC,mBAACpB,EAAA,CAAU,KAAMC,EAAM,GADNmB,CAEnB,CACD,EACH,EACF,EACE,MACN,CAEJ,CAAC,EAED,IAAOhC,KAAQ,cAAWsB,CAAuB",
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "import_Title", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "items", "carousel", "getSpan", "width", "Title", "index"]
 }

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts

@@ -1,6 +1,6 @@
 import type { Theme } from '../../types/props';
 export type Item = {
-    theme: Theme;
+    theme?: Theme;
     title: string;
     description: string;
     imageUrl: string;
@@ -15,10 +15,11 @@ export type Item = {
 };
 export type MultiLayoutGraphicBlockProps = {
     data: {
+        sectionTitle?: string;
         items: ({
             width: 'full' | 'half' | 'one-third';
         } & Item)[];
-        carousel: {
+        carousel?: {
             items: Item[];
         };
     };

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js

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

package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/types.tsx"],
-  "sourcesContent": ["import type { Theme } from '../../types/props'\n\nexport type Item = {\n  theme: Theme\n  title: string\n  description: string\n  imageUrl: string\n  primaryBtn: {\n    text: string\n    link: string\n  }\n  secondaryBtn: {\n    text: string\n    link: string\n  }\n}\n\nexport type MultiLayoutGraphicBlockProps = {\n  data: {\n    items: ({\n      width: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel: {\n      items: Item[]\n    }\n  }\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: string\n  primaryBtn: {\n    text: string\n    link: string\n  }\n  secondaryBtn: {\n    text: string\n    link: string\n  }\n}\n\nexport type MultiLayoutGraphicBlockProps = {\n  data: {\n    sectionTitle?: string\n    items: ({\n      width: 'full' | 'half' | 'one-third'\n    } & Item)[]\n    carousel?: {\n      items: Item[]\n    }\n  }\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/Slogan/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var c=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},n=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of w(e))!v.call(t,p)&&p!==l&&s(t,p,{get:()=>e[p],enumerable:!(o=y(e,p))||o.enumerable});return t};var k=(t,e,l)=>(l=t!=null?c(u(t)):{},n(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),N=t=>n(s({},"__esModule",{value:!0}),t);var h={};D(h,{default:()=>b});module.exports=N(h);var a=require("react/jsx-runtime"),x=k(require("react")),f=require("../../helpers/utils.js"),i=require("../../components/index.js"),d=require("../../shared/Styles.js");const r=x.default.forwardRef(({data:t,className:e},l)=>{const{title:o,features:p}=t;return(0,a.jsxs)("div",{ref:l,className:(0,f.cn)("laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center","tablet:px-6 laptop:px-8 desktop:px-16 lg-desktop:px-32 px-4","tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8",e),children:[(0,a.jsx)(i.Heading,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]",children:o}),p&&p.length>0&&(0,a.jsx)("div",{className:"flex w-full max-w-[423px] flex-row items-center gap-3",children:p.slice(0,3).map((g,m)=>(0,a.jsxs)(x.default.Fragment,{children:[m>0&&(0,a.jsx)("div",{className:"w-px self-stretch bg-[#D9D9D9]"}),(0,a.jsx)("div",{className:"flex-1",children:(0,a.jsx)(i.Text,{align:"left",className:"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:g.title})})]},m))})]})});r.displayName="Slogan";var b=(0,d.withStyles)(r);
+"use strict";"use client";var c=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},r=(t,e,l,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of w(e))!v.call(t,a)&&a!==l&&s(t,a,{get:()=>e[a],enumerable:!(o=y(e,a))||o.enumerable});return t};var N=(t,e,l)=>(l=t!=null?c(u(t)):{},r(e||!t||!t.__esModule?s(l,"default",{value:t,enumerable:!0}):l,t)),h=t=>r(s({},"__esModule",{value:!0}),t);var k={};D(k,{default:()=>b});module.exports=h(k);var p=require("react/jsx-runtime"),m=N(require("react")),f=require("../../helpers/utils.js"),i=require("../../components/index.js"),g=require("../../shared/Styles.js");const x=m.default.forwardRef(({data:t,className:e},l)=>{const{title:o,features:a}=t;return(0,p.jsxs)("div",{ref:l,className:(0,f.cn)("laptop:flex-row laptop:items-end laptop:justify-between flex w-full flex-col items-start justify-center text-center","tablet:py-10 laptop:py-12 desktop:py-16 lg-desktop:py-20 gap-8 py-8",e),children:[(0,p.jsx)(i.Heading,{as:"h2",size:2,weight:"bold",align:"left",className:"slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none text-[#1D1D1F]",children:o}),a&&a.length>0&&(0,p.jsx)("div",{className:"flex w-full max-w-[423px] flex-row items-center gap-3",children:a.slice(0,3).map((d,n)=>(0,p.jsxs)(m.default.Fragment,{children:[n>0&&(0,p.jsx)("div",{className:"w-px self-stretch bg-[#D9D9D9]"}),(0,p.jsx)("div",{className:"flex-1",children:(0,p.jsx)(i.Text,{align:"left",className:"slogan-feature-text laptop:line-clamp-2 tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] font-medium leading-[1.4] text-[#1D1D1F]",html:d.title})})]},n))})]})});x.displayName="Slogan";var b=(0,g.withStyles)(x);
 //# sourceMappingURL=index.js.map