@anker-in/headless-ui 0.0.27-alpha.28 → 0.0.27-alpha.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/dist/cjs/biz-components/AccordionCards/index.d.ts +11 -8
  2. package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
  3. package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
  4. package/dist/cjs/biz-components/BrandEquity/BrandEquity.d.ts +3 -1
  5. package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
  6. package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +3 -3
  7. package/dist/cjs/biz-components/Evaluate/index.js +1 -1
  8. package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
  9. package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
  10. package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
  11. package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts +8 -6
  12. package/dist/cjs/biz-components/MediaPlayerBase/types.js +1 -1
  13. package/dist/cjs/biz-components/MediaPlayerBase/types.js.map +1 -1
  14. package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
  15. package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
  16. package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +1 -0
  17. package/dist/cjs/biz-components/MediaPlayerMulti/types.js +1 -1
  18. package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
  19. package/dist/cjs/biz-components/MemberEquity/index.js +2 -13
  20. package/dist/cjs/biz-components/MemberEquity/index.js.map +3 -3
  21. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +1 -0
  22. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  23. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
  24. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.d.ts +5 -2
  25. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js +1 -1
  26. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/types.js.map +1 -1
  27. package/dist/cjs/biz-components/ShelfDisplay/index.d.ts +10 -6
  28. package/dist/cjs/biz-components/ShelfDisplay/index.js +5 -5
  29. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  30. package/dist/cjs/biz-components/Slogan/index.js +1 -1
  31. package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
  32. package/dist/cjs/biz-components/Tabs/Tabs.js +1 -1
  33. package/dist/cjs/biz-components/Tabs/Tabs.js.map +3 -3
  34. package/dist/cjs/biz-components/Tabs/types.d.ts +15 -9
  35. package/dist/cjs/biz-components/Tabs/types.js +1 -1
  36. package/dist/cjs/biz-components/Tabs/types.js.map +1 -1
  37. package/dist/cjs/biz-components/Title/index.js +1 -1
  38. package/dist/cjs/biz-components/Title/index.js.map +2 -2
  39. package/dist/cjs/components/alert.d.ts +1 -1
  40. package/dist/cjs/components/avatar.d.ts +1 -1
  41. package/dist/cjs/components/badge.d.ts +1 -1
  42. package/dist/cjs/components/button.d.ts +1 -1
  43. package/dist/cjs/components/checkbox.d.ts +1 -1
  44. package/dist/cjs/components/color.d.ts +1 -1
  45. package/dist/cjs/components/container.d.ts +2 -0
  46. package/dist/cjs/components/container.js +1 -1
  47. package/dist/cjs/components/container.js.map +3 -3
  48. package/dist/cjs/components/heading.d.ts +1 -1
  49. package/dist/cjs/components/input-number.d.ts +2 -2
  50. package/dist/cjs/components/input.d.ts +1 -1
  51. package/dist/cjs/components/link.d.ts +2 -2
  52. package/dist/cjs/components/radio.d.ts +1 -1
  53. package/dist/cjs/components/text.d.ts +1 -1
  54. package/dist/cjs/stories/accordionCards.stories.d.ts +1 -0
  55. package/dist/cjs/stories/alert.stories.d.ts +1 -1
  56. package/dist/cjs/stories/avatar.stories.d.ts +1 -1
  57. package/dist/cjs/stories/avatar.stories.js.map +1 -1
  58. package/dist/cjs/stories/bizTabs.stories.js +1 -1
  59. package/dist/cjs/stories/bizTabs.stories.js.map +2 -2
  60. package/dist/cjs/stories/brandEquity.stories.js +1 -1
  61. package/dist/cjs/stories/brandEquity.stories.js.map +2 -2
  62. package/dist/cjs/stories/carousel.stories.d.ts +3 -3
  63. package/dist/cjs/stories/carousel.stories.js +1 -1
  64. package/dist/cjs/stories/carousel.stories.js.map +2 -2
  65. package/dist/cjs/stories/checkbox.stories.d.ts +1 -1
  66. package/dist/cjs/stories/checkbox.stories.js.map +1 -1
  67. package/dist/cjs/stories/container.stories.d.ts +1 -0
  68. package/dist/cjs/stories/dialog.stories.d.ts +1 -1
  69. package/dist/cjs/stories/dialog.stories.js.map +1 -1
  70. package/dist/cjs/stories/grid.stories.d.ts +2 -2
  71. package/dist/cjs/stories/heading.stories.d.ts +1 -1
  72. package/dist/cjs/stories/input-number.stories.d.ts +1 -1
  73. package/dist/cjs/stories/link.stories.d.ts +1 -1
  74. package/dist/cjs/stories/marquee.stories.d.ts +1 -1
  75. package/dist/cjs/stories/mediaplayerBase.stories.js +1 -1
  76. package/dist/cjs/stories/mediaplayerBase.stories.js.map +1 -1
  77. package/dist/cjs/stories/mediaplayerMulti.stories.js +1 -1
  78. package/dist/cjs/stories/mediaplayerMulti.stories.js.map +2 -2
  79. package/dist/cjs/stories/popover.stories.js.map +1 -1
  80. package/dist/cjs/stories/radio.stories.d.ts +2 -2
  81. package/dist/cjs/stories/radio.stories.js.map +1 -1
  82. package/dist/cjs/stories/tabs.stories.d.ts +14 -1
  83. package/dist/cjs/stories/text.stories.d.ts +1 -1
  84. package/dist/esm/biz-components/AccordionCards/index.d.ts +11 -8
  85. package/dist/esm/biz-components/AccordionCards/index.js +1 -1
  86. package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
  87. package/dist/esm/biz-components/BrandEquity/BrandEquity.d.ts +3 -1
  88. package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
  89. package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +3 -3
  90. package/dist/esm/biz-components/Evaluate/index.js +1 -1
  91. package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
  92. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  93. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
  94. package/dist/esm/biz-components/MediaPlayerBase/types.d.ts +8 -6
  95. package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
  96. package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
  97. package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +1 -0
  98. package/dist/esm/biz-components/MemberEquity/index.js +2 -13
  99. package/dist/esm/biz-components/MemberEquity/index.js.map +3 -3
  100. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts +1 -0
  101. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  102. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +3 -3
  103. package/dist/esm/biz-components/MultiLayoutGraphicBlock/types.d.ts +5 -2
  104. package/dist/esm/biz-components/ShelfDisplay/index.d.ts +10 -6
  105. package/dist/esm/biz-components/ShelfDisplay/index.js +3 -3
  106. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  107. package/dist/esm/biz-components/Slogan/index.js +1 -1
  108. package/dist/esm/biz-components/Slogan/index.js.map +2 -2
  109. package/dist/esm/biz-components/Tabs/Tabs.js +1 -1
  110. package/dist/esm/biz-components/Tabs/Tabs.js.map +3 -3
  111. package/dist/esm/biz-components/Tabs/types.d.ts +15 -9
  112. package/dist/esm/biz-components/Title/index.js +1 -1
  113. package/dist/esm/biz-components/Title/index.js.map +2 -2
  114. package/dist/esm/components/alert.d.ts +1 -1
  115. package/dist/esm/components/avatar.d.ts +1 -1
  116. package/dist/esm/components/badge.d.ts +1 -1
  117. package/dist/esm/components/button.d.ts +1 -1
  118. package/dist/esm/components/checkbox.d.ts +1 -1
  119. package/dist/esm/components/color.d.ts +1 -1
  120. package/dist/esm/components/container.d.ts +2 -0
  121. package/dist/esm/components/container.js +1 -1
  122. package/dist/esm/components/container.js.map +3 -3
  123. package/dist/esm/components/heading.d.ts +1 -1
  124. package/dist/esm/components/input-number.d.ts +2 -2
  125. package/dist/esm/components/input.d.ts +1 -1
  126. package/dist/esm/components/link.d.ts +2 -2
  127. package/dist/esm/components/radio.d.ts +1 -1
  128. package/dist/esm/components/text.d.ts +1 -1
  129. package/dist/esm/stories/accordionCards.stories.d.ts +1 -0
  130. package/dist/esm/stories/alert.stories.d.ts +1 -1
  131. package/dist/esm/stories/avatar.stories.d.ts +1 -1
  132. package/dist/esm/stories/avatar.stories.js.map +1 -1
  133. package/dist/esm/stories/bizTabs.stories.js +1 -1
  134. package/dist/esm/stories/bizTabs.stories.js.map +2 -2
  135. package/dist/esm/stories/brandEquity.stories.js +1 -1
  136. package/dist/esm/stories/brandEquity.stories.js.map +2 -2
  137. package/dist/esm/stories/carousel.stories.d.ts +3 -3
  138. package/dist/esm/stories/carousel.stories.js +1 -1
  139. package/dist/esm/stories/carousel.stories.js.map +2 -2
  140. package/dist/esm/stories/checkbox.stories.d.ts +1 -1
  141. package/dist/esm/stories/checkbox.stories.js.map +1 -1
  142. package/dist/esm/stories/container.stories.d.ts +1 -0
  143. package/dist/esm/stories/dialog.stories.d.ts +1 -1
  144. package/dist/esm/stories/dialog.stories.js.map +1 -1
  145. package/dist/esm/stories/grid.stories.d.ts +2 -2
  146. package/dist/esm/stories/heading.stories.d.ts +1 -1
  147. package/dist/esm/stories/input-number.stories.d.ts +1 -1
  148. package/dist/esm/stories/link.stories.d.ts +1 -1
  149. package/dist/esm/stories/marquee.stories.d.ts +1 -1
  150. package/dist/esm/stories/mediaplayerBase.stories.js +1 -1
  151. package/dist/esm/stories/mediaplayerBase.stories.js.map +1 -1
  152. package/dist/esm/stories/mediaplayerMulti.stories.js +1 -1
  153. package/dist/esm/stories/mediaplayerMulti.stories.js.map +2 -2
  154. package/dist/esm/stories/popover.stories.js.map +1 -1
  155. package/dist/esm/stories/radio.stories.d.ts +2 -2
  156. package/dist/esm/stories/radio.stories.js.map +1 -1
  157. package/dist/esm/stories/tabs.stories.d.ts +14 -1
  158. package/dist/esm/stories/text.stories.d.ts +1 -1
  159. package/package.json +1 -1
  160. package/style.css +17 -17
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as y,jsx as r,jsxs as l}from"react/jsx-runtime";import F from"../Title/index.js";import{cn as s}from"../../helpers/utils.js";import x from"../../components/picture.js";import T from"../../components/button.js";import{useState as m,useEffect as w,useRef as f}from"react";function L(){const[n,d]=m(typeof window<"u"?window?.innerWidth:0);return w(()=>{const u=()=>d(window?.innerWidth||0);return window?.addEventListener("resize",u),()=>window?.removeEventListener("resize",u)},[]),n<=768}const W=({data:n,className:d="",event:u})=>{const g=L(),[E,p]=m(null),[k,v]=m({}),b=f([]),a=f({}),c=f({}),N=(t,e)=>{e&&(b.current[t]=e)},h=t=>{if(c.current?.[t]){const e={...a.current,[t]:!0};v(e),a.current=e}};return w(()=>{const t=b.current;return t?.forEach((e,o)=>{e.addEventListener("transitionend",()=>h(o))}),()=>{t?.forEach((e,o)=>{e.removeEventListener("transitionend",()=>h(o))})}},[]),g?l(y,{children:[n?.title&&r(F,{data:{title:n?.title}}),r("div",{className:s("flex h-[400px] w-full gap-4 overflow-x-auto",d),children:n?.items?.map((t,e)=>r("div",{className:"shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:r(x,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img})},e))})]}):l(y,{children:[n?.title&&r(F,{data:{title:n?.title}}),r("div",{className:s("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",d),children:n?.items?.map((t,e)=>{const o=E===e;return l("div",{style:{flex:o?6:1,transition:"all 0.3s ease-in-out"},ref:i=>{i&&N(e,i)},className:s("relative cursor-pointer overflow-hidden",n?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>{p(e),c.current[e]=!0},onMouseLeave:()=>{p(null);const i={...a.current,[e]:!1};v(i),a.current=i,c.current[e]=!1},children:[r(x,{source:t?.img,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),k?.[e]?l("div",{className:s("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6","transition-all delay-300 duration-[50ms]",o?"opacity-100":"opacity-0"),children:[l("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(T,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>u?.primaryButton?.onClick?.(t),className:s("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",n?.shape==="round"?"rounded-2xl":""),children:n?.primaryButton})]}):null]},e)})})]})};var A=W;export{A as default};
1
+ "use client";import{Fragment as E,jsx as r,jsxs as i}from"react/jsx-runtime";import k from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import f from"../../components/picture.js";import F from"../../components/button.js";import N from"../SwiperBox/index.js";import{useState as v,useEffect as B,useRef as b}from"react";const T=({data:o,className:l="",event:a})=>{const[d,x]=v(0),[h,y]=v({0:!0}),m=b([]),c=b({0:!0}),g=(t,e)=>{e&&(m.current[t]=e)},u=t=>{c.current?.[t]&&y({[t]:!0})};B(()=>{const t=m.current;return t?.forEach((e,s)=>{s?e.style="flex: 1 1 0%; transition: all 0.15s":e.style="flex: 7 1 0%; transition: all 0.15s",e.addEventListener("transitionend",()=>u(s))}),()=>{t?.forEach((e,s)=>{e.removeEventListener("transitionend",()=>u(s))})}},[]);const w=({data:t,configuration:e})=>i("div",{className:"relative shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:[r(f,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img}),i("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6"),children:[i("div",{className:"mb-6 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-2xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(F,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>a?.primaryButton?.onClick?.(t),className:n("w-[116px] mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",e?.shape==="round"?"rounded-2xl":""),children:e?.primaryButton})]})]});return i(E,{children:[o?.title&&r(k,{data:{title:o?.title}}),r("div",{className:"hidden tablet:block",children:r("div",{className:n("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",l),children:o?.items?.map((t,e)=>{const s=d===e;return i("div",{style:{flex:s?7:1},ref:p=>{p&&g(e,p)},className:n("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onClick:()=>{d!==e&&(c.current={[e]:!0},x(e))},children:[r(f,{source:t?.img,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),h?.[e]&&s?i("div",{className:n("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6"),children:[i("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(F,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>a?.primaryButton?.onClick?.(t),className:n("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",o?.shape==="round"?"rounded-2xl":""),children:o?.primaryButton})]}):null]},e)})})}),r("div",{className:"block tablet:hidden",children:r(N,{className:n("!overflow-visible h-[400px]",l),id:"AccordionCards"+o?.key,data:{list:o?.items,configuration:{shape:o?.shape,primaryButton:o?.primaryButton}},Slide:w,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})})]})};var j=T;export{j as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\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(typeof window !== 'undefined' ? 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 className?: string\n data: {\n title?: string\n items: 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 /** \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 }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }\n }\n}\n\nconst AccordionCards = ({\n data,\n className = '',\n event\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 <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className={cn('flex h-[400px] w-full gap-4 overflow-x-auto', className)}>\n {data?.items?.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\n // \u684C\u9762\u7AEF\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}>\n {data?.items?.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(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\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 data?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {data?.primaryButton}\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "useState", "useEffect", "useRef", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "data", "className", "event", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "isExpanded", "AccordionCards_default"]
4
+ "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useState, useEffect, useRef } from 'react';\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: string\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n items: Array<ItemType>\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 }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }\n }\n}\n\nconst AccordionCards = ({\n data,\n className = '',\n event\n}: AccordionCardsType) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0:true })\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 setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style = 'flex: 7 1 0%; transition: all 0.15s'\n } else {\n item.style = 'flex: 1 1 0%; transition: all 0.15s'\n }\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 const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div className=\"relative 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={data?.img} />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-6 pb-6')}>\n <div className=\"mb-6 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-2xl font-bold text-[#FFFFFF]\">{data?.title}</p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF]\">{data?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n onClick={() => event?.primaryButton?.onClick?.(data)}\n className={cn(\n 'w-[116px] mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n configuration?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {configuration?.primaryButton}\n </Button>\n </div>\n </div>\n )\n }\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className=\"hidden tablet:block\">\n <div\n className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}\n >\n {data?.items?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 7 : 1\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onClick={() => {\n if (hoverIndex === idx) return\n // \u66F4\u65B0 ref \u72B6\u6001\n enterRef.current = { [idx]: true }\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n }}\n >\n <Picture source={item?.img} className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" />\n {currentWidth?.[idx] && isExpanded ? (\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6'\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 data?.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {data?.primaryButton}\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"block tablet:hidden\">\n <SwiperBox\n className={cn('!overflow-visible h-[400px]', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.items,\n configuration: {\n shape: data?.shape,\n primaryButton: data?.primaryButton,\n }\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default AccordionCards\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "useState", "useEffect", "useRef", "AccordionCards", "data", "className", "event", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "idx", "isExpanded", "AccordionCards_default"]
7
7
  }
@@ -7,7 +7,9 @@ export interface BrandEquityItem {
7
7
  avatarList?: string[];
8
8
  }
9
9
  export interface BrandEquityProps extends ComponentCommonProps {
10
- data: BrandEquityItem[];
10
+ data: {
11
+ items: BrandEquityItem[];
12
+ };
11
13
  itemShape?: 'round' | 'square';
12
14
  className?: string;
13
15
  theme?: 'light' | 'dark';
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import d from"../../components/picture.js";import{withStyles as c}from"../../shared/Styles.js";const m=({data:i=[],itemShape:o="square",className:l=""})=>e("div",{className:a("brand-equity-wrapper w-full bg-[#F7F8F9]",l),children:e("div",{className:a("grid gap-3","tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:grid-cols-10"),children:i.map((t,r)=>s("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6","desktop:gap-16 gap-12","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(r)},o==="round"?"rounded-[16px]":"rounded-none"),children:[s("div",{className:"flex items-center justify-between gap-3",children:[e("h3",{className:"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg",children:t.title}),t.avatarList?.length?e("div",{className:"flex -space-x-2",children:t.avatarList.map((p,n)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(d,{source:p,className:"size-full object-cover"})},n))}):e("span",{className:"text-[#1D1D1F]",children:t.icon})]}),e("p",{className:"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl",children:t.description})]},r))})});var b=c(m);export{b as default};
1
+ "use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import n from"../../components/picture.js";import{withStyles as c}from"../../shared/Styles.js";const m=({data:{items:i=[]},itemShape:r="square",className:p=""})=>e("div",{className:a("brand-equity-wrapper w-full",p),children:e("div",{className:a("grid gap-3","tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:grid-cols-10"),children:i.map((t,s)=>o("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6","desktop:gap-16 gap-12","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(s)},r==="round"?"rounded-[16px]":"rounded-none"),children:[o("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[e("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.title}),t.avatarList?.length?e("div",{className:"flex -space-x-2",children:t.avatarList.map((d,l)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(n,{source:d,className:"size-full object-cover"})},l))}):e("span",{className:"text-[#1D1D1F]",children:t.icon})]}),e("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]},s))})});var y=c(m);export{y as default};
2
2
  //# sourceMappingURL=BrandEquity.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
4
- "sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n data: BrandEquityItem[]\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ data = [], itemShape = 'square', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full bg-[#F7F8F9]', className)}>\n <div className={cn('grid gap-3', 'tablet:grid-cols-2 grid-cols-1', 'laptop:gap-4 laptop:grid-cols-10')}>\n {data.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6',\n 'desktop:gap-16 gap-12',\n 'laptop:col-span-3',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"flex items-center justify-between gap-3\">\n <h3 className=\"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg\">\n {item.title}\n </h3>\n {item.avatarList?.length ? (\n <div className=\"flex -space-x-2\">\n {item.avatarList.map((avatarUrl: string, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={avatarUrl} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n )}\n </div>\n <p className=\"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
5
- "mappings": "aAyCY,OACE,OAAAA,EADF,QAAAC,MAAA,oBAxCZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAiB3B,MAAMC,EAA0C,CAAC,CAAE,KAAAC,EAAO,CAAC,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,IAE/FR,EAAC,OAAI,UAAWE,EAAG,2CAA4CM,CAAS,EACtE,SAAAR,EAAC,OAAI,UAAWE,EAAG,aAAc,iCAAkC,kCAAkC,EAClG,SAAAI,EAAK,IAAI,CAACG,EAAMC,IACfT,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASQ,CAAK,CACrD,EACAH,IAAc,QAAU,iBAAmB,cAC7C,EAEA,UAAAN,EAAC,OAAI,UAAU,0CACb,UAAAD,EAAC,MAAG,UAAU,oFACX,SAAAS,EAAK,MACR,EACCA,EAAK,YAAY,OAChBT,EAAC,OAAI,UAAU,kBACZ,SAAAS,EAAK,WAAW,IAAI,CAACE,EAAmBD,IACvCV,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQQ,EAAW,UAAU,yBAAyB,GAP1DD,CAQP,CACD,EACH,EAEAV,EAAC,QAAK,UAAU,iBAAkB,SAAAS,EAAK,KAAK,GAEhD,EACAT,EAAC,KAAE,UAAU,iFACV,SAAAS,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOE,EAAQR,EAAWC,CAAW",
6
- "names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "data", "itemShape", "className", "item", "index", "avatarUrl", "BrandEquity_default"]
4
+ "sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n icon?: React.ReactNode\n title: string\n description: string\n avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n data: {\n items: BrandEquityItem[]\n }\n itemShape?: 'round' | 'square'\n className?: string\n theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ data: { items = [] }, itemShape = 'square', className = '' }) => {\n return (\n <div className={cn('brand-equity-wrapper w-full', className)}>\n <div className={cn('grid gap-3', 'tablet:grid-cols-2 grid-cols-1', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <div\n key={index}\n className={cn(\n 'brand-equity-item',\n 'flex flex-col bg-white p-4',\n 'desktop:p-6',\n 'desktop:gap-16 gap-12',\n 'laptop:col-span-3',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {item.title}\n </h3>\n {item.avatarList?.length ? (\n <div className=\"flex -space-x-2\">\n {item.avatarList.map((avatarUrl: string, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={avatarUrl} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {item.description}\n </p>\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nexport default withStyles(BrandEquity)\n"],
5
+ "mappings": "aA2CY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA1CZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAmB3B,MAAMC,EAA0C,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,CAAE,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,IAE1GR,EAAC,OAAI,UAAWE,EAAG,8BAA+BM,CAAS,EACzD,SAAAR,EAAC,OAAI,UAAWE,EAAG,aAAc,iCAAkC,kCAAkC,EAClG,SAAAI,EAAM,IAAI,CAACG,EAAMC,IAChBT,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASQ,CAAK,CACrD,EACAH,IAAc,QAAU,iBAAmB,cAC7C,EAEA,UAAAN,EAAC,OAAI,UAAU,uEACb,UAAAD,EAAC,MAAG,UAAU,mGACX,SAAAS,EAAK,MACR,EACCA,EAAK,YAAY,OAChBT,EAAC,OAAI,UAAU,kBACZ,SAAAS,EAAK,WAAW,IAAI,CAACE,EAAmBD,IACvCV,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQQ,EAAW,UAAU,yBAAyB,GAP1DD,CAQP,CACD,EACH,EAEAV,EAAC,QAAK,UAAU,iBAAkB,SAAAS,EAAK,KAAK,GAEhD,EACAT,EAAC,KAAE,UAAU,+FACV,SAAAS,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOE,EAAQR,EAAWC,CAAW",
6
+ "names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "item", "index", "avatarUrl", "BrandEquity_default"]
7
7
  }
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as w,jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import m from"../Title/index.js";import{cn as l}from"../../helpers/utils.js";import d from"../../components/picture.js";import p from"../SwiperBox/index.js";import{withStyles as c}from"../../shared/Styles.js";import{Avatar as f,AvatarImage as v,AvatarFallback as u}from"../../components/avatar.js";const x=({data:t,configuration:r})=>{const o=i=>i?Array.from(new Array(Number(i)))||[]:[];return s("div",{className:l("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC] p-4","hover:bg-[#FFFFFF] cursor-pointer",r?.shape==="round"?"rounded-2xl":"rounded-none"),children:[s("div",{className:l("laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between"),children:[s("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-semibold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:o(t?.rating)?.map?.((i,a)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},a))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:s(f,{className:"size-full",children:[e(v,{src:t?.avatar}),e(u,{children:t?.title})]})})]}),e("p",{className:"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]",children:t?.description||""}),s("div",{className:l("mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-[8px]":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(d,{className:"w-full object-cover",source:t?.img})}),e("p",{className:"desktop:text-lg line-clamp-2 flex-1 text-sm font-semibold",children:t?.subTitle||""})]})]})},g=({className:t="",data:r,key:o})=>{const{items:i,title:a,...n}=r;return e(w,{children:s("div",{className:l("w-full",t),children:[a&&e(m,{data:{title:a}}),e(p,{className:"!overflow-visible",id:"Category"+o,data:{list:i,configuration:{...n}},Slide:x,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:3.5}}})]})})};var A=c(g);export{A as default};
1
+ "use client";import{Fragment as w,jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import m from"../Title/index.js";import{cn as r}from"../../helpers/utils.js";import d from"../../components/picture.js";import p from"../SwiperBox/index.js";import{withStyles as c}from"../../shared/Styles.js";import{Avatar as v,AvatarImage as f,AvatarFallback as u}from"../../components/avatar.js";const x=({data:t,configuration:a})=>{const o=i=>i?Array.from(new Array(Number(i)))||[]:[];return s("div",{className:r("box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC] p-4","hover:bg-[#FFFFFF] cursor-pointer",a?.shape==="round"?"rounded-2xl":"rounded-none"),children:[s("div",{className:r("laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between"),children:[s("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-semibold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:o(t?.rating)?.map?.((i,l)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},l))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:s(v,{className:"size-full",children:[e(f,{src:t?.avatar}),e(u,{children:t?.title})]})})]}),e("p",{className:"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]",children:t?.description||""}),s("div",{className:r("mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3",a?.shape==="round"?"rounded-[8px]":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(d,{className:"w-full object-cover",source:t?.img})}),e("p",{className:"desktop:text-lg line-clamp-2 flex-1 text-sm font-semibold",children:t?.subTitle||""})]})]})},g=({className:t="",data:a,key:o})=>{const{items:i,title:l,...n}=a;return e(w,{children:s("div",{className:r("w-full",t),children:[l&&e(m,{data:{title:l}}),e(p,{className:"!overflow-visible",id:"Evaluate"+o,data:{list:i,configuration:{...n}},Slide:x,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})]})})};var A=c(g);export{A as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n subTitle: string\n description: string\n avatar?: string\n rating: number\n}\n\nexport interface EvaluateProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n title?: string\n items: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n }\n key?:string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC] p-4',\n 'hover:bg-[#FFFFFF] cursor-pointer',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-semibold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\">\n <AvatarImage src={data?.avatar} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n </div>\n </div>\n <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">{data?.description || ''}</p>\n <div\n className={cn(\n 'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-[8px]' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img} />\n </div>\n <p className=\"desktop:text-lg line-clamp-2 flex-1 text-sm font-semibold\">{data?.subTitle || ''}</p>\n </div>\n </div>\n )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key }) => {\n const { items, title, ...ohter } = data\n return (\n <>\n <div\n className={cn(\n 'w-full',\n className\n )}\n >\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Category' + key}\n data={{ list: items, configuration: { ...ohter } }}\n Slide={EvaluateItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 3.5,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default withStyles(Evaluate)\n"],
5
- "mappings": "aAiDQ,OA2CJ,YAAAA,EA1CM,OAAAC,EADF,QAAAC,MAAA,oBAhDR,MAAkB,QAClB,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BAyBpD,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OACEb,EAAC,OACC,UAAWE,EACT,mEACA,oCACAS,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,UAAAX,EAAC,OAAI,UAAWE,EAAG,6DAA6D,EAC9E,UAAAF,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,uCAAwC,SAAAW,GAAM,MAAM,EAClEX,EAAC,OAAI,UAAU,yBACZ,SAAAa,EAAaF,GAAM,MAAM,GAAG,MAAM,CAACI,EAAGC,IAEnChB,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQgB,CAOV,CAEH,EACH,GACF,EACAhB,EAAC,OAAI,UAAU,0CACb,SAAAC,EAACM,EAAA,CAAO,UAAU,YAChB,UAAAP,EAACQ,EAAA,CAAY,IAAKG,GAAM,OAAQ,EAChCX,EAACS,EAAA,CAAgB,SAAAE,GAAM,MAAM,GAC/B,EACF,GACF,EACAX,EAAC,KAAE,UAAU,wEAAyE,SAAAW,GAAM,aAAe,GAAG,EAC9GV,EAAC,OACC,UAAWE,EACT,2DACAS,GAAe,QAAU,QAAU,gBAAkB,cACvD,EAEA,UAAAZ,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACI,EAAA,CAAQ,UAAU,sBAAsB,OAAQO,GAAM,IAAK,EAC9D,EACAX,EAAC,KAAE,UAAU,4DAA6D,SAAAW,GAAM,UAAY,GAAG,GACjG,GACF,CAEJ,EAEMM,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAP,EAAM,IAAAQ,CAAI,IAAM,CAC3E,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAM,EAAIX,EACnC,OACEX,EAAAD,EAAA,CACE,SAAAE,EAAC,OACC,UAAWE,EACT,SACAe,CACF,EAEC,UAAAG,GAASrB,EAACE,EAAA,CAAM,KAAM,CAAE,MAAOmB,CAAM,EAAG,EACzCrB,EAACK,EAAA,CACC,UAAU,oBACV,GAAI,WAAac,EACjB,KAAM,CAAE,KAAMC,EAAO,cAAe,CAAE,GAAGE,CAAM,CAAE,EACjD,MAAOZ,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,CACF,EACF,GACF,EACF,CAEJ,EAEA,IAAOa,EAAQjB,EAAWW,CAAQ",
4
+ "sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: string\n title: string\n subTitle: string\n description: string\n avatar?: string\n rating: number\n}\n\nexport interface EvaluateProps {\n className?: string\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n data: {\n title?: string\n items: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n }\n key?:string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'box-border flex w-full flex-col overflow-hidden bg-[#EAEAEC] p-4',\n 'hover:bg-[#FFFFFF] cursor-pointer',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-semibold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\">\n <AvatarImage src={data?.avatar} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n </div>\n </div>\n <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">{data?.description || ''}</p>\n <div\n className={cn(\n 'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-[8px]' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img} />\n </div>\n <p className=\"desktop:text-lg line-clamp-2 flex-1 text-sm font-semibold\">{data?.subTitle || ''}</p>\n </div>\n </div>\n )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key }) => {\n const { items, title, ...ohter } = data\n return (\n <>\n <div className={cn('w-full', className)}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: items, configuration: { ...ohter } }}\n Slide={EvaluateItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1.3,\n },\n 768: {\n spaceBetween: '16px',\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default withStyles(Evaluate)\n"],
5
+ "mappings": "aAiDQ,OA2CJ,YAAAA,EA1CM,OAAAC,EADF,QAAAC,MAAA,oBAhDR,MAAkB,QAClB,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BAyBpD,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OACEb,EAAC,OACC,UAAWE,EACT,mEACA,oCACAS,GAAe,QAAU,QAAU,cAAgB,cACrD,EAEA,UAAAX,EAAC,OAAI,UAAWE,EAAG,6DAA6D,EAC9E,UAAAF,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,uCAAwC,SAAAW,GAAM,MAAM,EAClEX,EAAC,OAAI,UAAU,yBACZ,SAAAa,EAAaF,GAAM,MAAM,GAAG,MAAM,CAACI,EAAGC,IAEnChB,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQgB,CAOV,CAEH,EACH,GACF,EACAhB,EAAC,OAAI,UAAU,0CACb,SAAAC,EAACM,EAAA,CAAO,UAAU,YAChB,UAAAP,EAACQ,EAAA,CAAY,IAAKG,GAAM,OAAQ,EAChCX,EAACS,EAAA,CAAgB,SAAAE,GAAM,MAAM,GAC/B,EACF,GACF,EACAX,EAAC,KAAE,UAAU,wEAAyE,SAAAW,GAAM,aAAe,GAAG,EAC9GV,EAAC,OACC,UAAWE,EACT,2DACAS,GAAe,QAAU,QAAU,gBAAkB,cACvD,EAEA,UAAAZ,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACI,EAAA,CAAQ,UAAU,sBAAsB,OAAQO,GAAM,IAAK,EAC9D,EACAX,EAAC,KAAE,UAAU,4DAA6D,SAAAW,GAAM,UAAY,GAAG,GACjG,GACF,CAEJ,EAEMM,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAP,EAAM,IAAAQ,CAAI,IAAM,CAC3E,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAM,EAAIX,EACnC,OACEX,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAWE,EAAG,SAAUe,CAAS,EACnC,UAAAG,GAASrB,EAACE,EAAA,CAAM,KAAM,CAAE,MAAOmB,CAAM,EAAG,EACzCrB,EAACK,EAAA,CACC,UAAU,oBACV,GAAI,WAAac,EACjB,KAAM,CAAE,KAAMC,EAAO,cAAe,CAAE,GAAGE,CAAM,CAAE,EACjD,MAAOZ,EACP,YAAa,CACX,EAAG,CACD,aAAc,OACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,OACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,CAEJ,EAEA,IAAOa,EAAQjB,EAAWW,CAAQ",
6
6
  "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "SwiperBox", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "items", "title", "ohter", "Evaluate_default"]
7
7
  }
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as a,jsxs as s}from"react/jsx-runtime";import{useState as m,useRef as n}from"react";import{cn as x}from"../../helpers/utils.js";import{withStyles as u}from"../../shared/Styles.js";import f from"../../components/picture.js";import b from"../../components/button.js";const y=({className:o="",data:{title:p,videoTitle:r,btnText:i,img:c,media:d}})=>{const[t,l]=m(!1),e=n(null);return s("div",{className:x(" relative w-full",o),children:[s("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:[a("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:t?r:p}}),!t&&a(b,{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:()=>{t?(e.current&&e.current.pause(),l(!1)):(e.current&&e.current.play(),l(!0))},children:i})]}),s("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:[a("video",{ref:e,className:"size-full object-cover",src:d,muted:!0,loop:!0}),!t&&a(f,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:c})]})]})};var N=u(y);export{N as default};
1
+ "use client";import{jsx as t,jsxs as l}from"react/jsx-runtime";import{useState as v,useRef as b}from"react";import{cn as n}from"../../helpers/utils.js";import{withStyles as x}from"../../shared/Styles.js";import h from"../../components/picture.js";import k from"../../components/button.js";import{convertLexicalToHTML as d}from"@payloadcms/richtext-lexical/html";const w=({className:p="",data:{title:a,videoTitle:s,btnText:r,img:m,video:u,theme:f,shape:y}})=>{const[o,c]=v(!1),e=b(null),i=typeof a=="string"?a:a&&d({data:a}),g=typeof s=="string"?s:s&&d({data:s});return l("div",{className:n(" relative w-full",p,{"aiui-dark":f==="dark","rounded-box":y==="rounded"}),children:[l("div",{className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[t("div",{className:"lg-desktop:text-[64px] text-center text-[40px] font-bold text-white lg:text-5xl",dangerouslySetInnerHTML:{__html:!o&&i?i:g||""}}),!o&&r&&t(k,{variant:"secondary",className:n("member-equity-button-secondary"),onClick:()=>{o?(e.current&&e.current.pause(),c(!1)):(e.current&&e.current.play(),c(!0))},children:r})]}),l("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:[t("video",{ref:e,className:"size-full object-cover",src:u,autoPlay:!0,muted:!0,loop:!0}),!o&&t(h,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:m}),t("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})]})};var _=x(w);export{_ as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "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"],
5
- "mappings": "aAqBM,OACE,OAAAA,EADF,QAAAC,MAAA,oBApBN,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BAInB,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,EAAId,EAAS,EAAK,EAC1Ce,EAAWd,EAAyB,IAAI,EAK9C,OACEF,EAAC,OAAI,UAAWG,EAAG,mBAAoBK,CAAS,EAC9C,UAAAR,EAAC,OAAI,UAAU,kHACb,UAAAD,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQe,EAAYJ,EAAaD,CAAM,EACpE,EACC,CAACK,GACAf,EAACO,EAAA,CACC,UAAU,8TACV,QAAQ,UACR,QAAS,IAAM,CACTQ,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,SAAAJ,EACH,GAEJ,EACAX,EAAC,OAAI,UAAU,0PACb,UAAAD,EAAC,SAAM,IAAKiB,EAAU,UAAU,yBAAyB,IAAKH,EAAO,MAAK,GAAC,KAAI,GAAC,EAC/E,CAACC,GAAaf,EAACM,EAAA,CAAQ,UAAU,mDAAmD,OAAQO,EAAK,GACpG,GACF,CAEJ,EAEA,IAAOK,EAAQb,EAAWG,CAAe",
6
- "names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Button", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "media", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerBase_default"]
4
+ "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 { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n const videoRef = useRef<HTMLVideoElement>(null)\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const videoTitle_html =\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\n\n return (\n <div\n className={cn(' relative w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 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 && title_html ? title_html : videoTitle_html || '' }}\n />\n {!isPlaying && btnText && (\n <Button\n variant=\"secondary\"\n className={cn('member-equity-button-secondary')}\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={video} autoPlay muted loop />\n {!isPlaying && <Picture className=\"z-1 absolute left-0 top-0 size-full object-cover\" source={img} />}\n <div\n className=\"absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
5
+ "mappings": "aA2BM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA1BN,OAAgB,YAAAC,EAAU,UAAAC,MAAc,QACxC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIjB,EAAS,EAAK,EAC1CkB,EAAWjB,EAAyB,IAAI,EAExCkB,EAAa,OAAOV,GAAU,SAAWA,EAAQA,GAASH,EAAqB,CAAE,KAAMG,CAAM,CAAC,EAC9FW,EACJ,OAAOV,GAAe,SAAWA,EAAaA,GAAcJ,EAAqB,CAAE,KAAMI,CAAW,CAAC,EAEvG,OACEX,EAAC,OACC,UAAWG,EAAG,mBAAoBM,EAAW,CAC3C,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,UAAAhB,EAAC,OAAI,UAAU,kHACb,UAAAD,EAAC,OACC,UAAU,kFACV,wBAAyB,CAAE,OAAQ,CAACkB,GAAaG,EAAaA,EAAaC,GAAmB,EAAG,EACnG,EACC,CAACJ,GAAaL,GACbb,EAACO,EAAA,CACC,QAAQ,YACR,UAAWH,EAAG,gCAAgC,EAC9C,QAAS,IAAM,CACTc,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,SAAAN,EACH,GAEJ,EACAZ,EAAC,OAAI,UAAU,0PACb,UAAAD,EAAC,SAAM,IAAKoB,EAAU,UAAU,yBAAyB,IAAKL,EAAO,SAAQ,GAAC,MAAK,GAAC,KAAI,GAAC,EACxF,CAACG,GAAalB,EAACM,EAAA,CAAQ,UAAU,mDAAmD,OAAQQ,EAAK,EAClGd,EAAC,OACC,UAAU,uCACV,MAAO,CACL,WAAY,+DACd,EACF,GACF,GACF,CAEJ,EAEA,IAAOuB,EAAQlB,EAAWI,CAAe",
6
+ "names": ["jsx", "jsxs", "useState", "useRef", "cn", "withStyles", "Picture", "Button", "convertLexicalToHTML", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "title_html", "videoTitle_html", "MediaPlayerBase_default"]
7
7
  }
@@ -1,10 +1,12 @@
1
- import type { ComponentCommonProps } from '../../types/props.js';
1
+ import type { ComponentCommonProps, Shape, Theme } from '../../types/props.js';
2
2
  export interface MediaPlayerBaseProps extends ComponentCommonProps {
3
3
  data: {
4
- title: string;
5
- videoTitle: string;
6
- btnText: string;
7
- img: string;
8
- media: string;
4
+ shape?: Shape;
5
+ theme?: Theme;
6
+ title?: string;
7
+ videoTitle?: string;
8
+ btnText?: string;
9
+ img?: string;
10
+ video: string;
9
11
  };
10
12
  }
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import{withStyles as m}from"../../shared/Styles.js";import{Picture as r}from"../../components/index.js";import d from"../Title/index.js";import p from"../SwiperBox/index.js";const f=({data:t})=>l("div",{className:o("tablet:max-w-full w-full max-w-[296px] overflow-hidden","tablet:flex-row flex shrink-0 flex-col ","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto"),children:[l("div",{className:"tablet:w-[49%] relative w-full flex-none",children:[e(r,{source:t.backgroundImage,alt:t.name,className:"size-full",imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute bottom-6 right-6",children:e("div",{className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),l("div",{className:"tablet:gap-[60px] tablet:p-6 flex min-h-[200px] flex-col justify-between gap-4 bg-white p-4",children:[l("div",{className:"flex flex-col gap-2",children:[e("h3",{className:"lg-desktop:text-lg text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.name}),e("p",{className:"lg-desktop:text-lg text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.description})]}),e("p",{className:"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.quote})]})]}),n=({data:{items:t=[],title:i},className:a="",key:s})=>l("div",{className:a,children:[i&&e(d,{data:{title:i}}),e(p,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+s,data:{list:t},Slide:f})]});var y=m(n);export{y as default};
1
+ "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import"react";import{cn as s}from"../../helpers/utils.js";import{withStyles as r}from"../../shared/Styles.js";import{Picture as m}from"../../components/index.js";import p from"../Title/index.js";import d from"../SwiperBox/index.js";const n=({data:t})=>l("div",{className:s("tablet:max-w-full w-full max-w-[296px] overflow-hidden","tablet:flex-row flex shrink-0 flex-col ","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto"),children:[l("div",{className:"tablet:w-[49%] relative w-full flex-none",children:[e(m,{source:t.backgroundImage,alt:t.name,className:"size-full",imgClassName:"w-full h-full object-cover"}),e("div",{className:"absolute bottom-6 right-6",children:e("button",{className:"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),l("div",{className:"tablet:gap-[60px] tablet:p-6 flex min-h-[200px] flex-col justify-between gap-4 bg-white p-4",children:[l("div",{className:"flex flex-col gap-2",children:[e("h3",{className:"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.name}),e("p",{className:"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t.description})]})]}),f=({data:{items:t=[],title:a},className:i="",key:o})=>l("div",{className:i,children:[a&&e(p,{data:{title:a}}),e(d,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+o,data:{list:t},Slide:n})]});var y=r(f);export{y as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Container } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data }: { data: MediaPlayerItemProps }) => {\n return (\n <div\n className={cn(\n 'tablet:max-w-full w-full max-w-[296px] overflow-hidden',\n 'tablet:flex-row flex shrink-0 flex-col ',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto'\n )}\n >\n <div className=\"tablet:w-[49%] relative w-full flex-none\">\n <Picture\n source={data.backgroundImage}\n alt={data.name}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"absolute bottom-6 right-6\">\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 min-h-[200px] flex-col justify-between gap-4 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 {data.name}\n </h3>\n <p className=\"lg-desktop:text-lg text-sm font-medium leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {data.description}\n </p>\n </div>\n\n <p className=\"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {data.quote}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti: React.FC<MediaPlayerMultiProps> = ({ data: { items = [], title }, className = '', key }) => {\n return (\n <div className={className}>\n {title && <Title data={{ title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items }}\n Slide={MediaPlayerItem}\n />\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
- "mappings": "aAmBM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlBN,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAA0B,4BACnC,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBAItB,MAAMC,EAAkB,CAAC,CAAE,KAAAC,CAAK,IAE5BP,EAAC,OACC,UAAWC,EACT,yDACA,0CACA,gEACF,EAEA,UAAAD,EAAC,OAAI,UAAU,2CACb,UAAAD,EAACI,EAAA,CACC,OAAQI,EAAK,gBACb,IAAKA,EAAK,KACV,UAAU,YACV,aAAa,6BACf,EACAR,EAAC,OAAI,UAAU,4BACb,SAAAA,EAAC,OAAI,UAAU,8FACb,SAAAA,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EACF,GACF,EAEAC,EAAC,OAAI,UAAU,8FACb,UAAAA,EAAC,OAAI,UAAU,sBACb,UAAAD,EAAC,MAAG,UAAU,yFACX,SAAAQ,EAAK,KACR,EACAR,EAAC,KAAE,UAAU,yFACV,SAAAQ,EAAK,YACR,GACF,EAEAR,EAAC,KAAE,UAAU,qHACV,SAAAQ,EAAK,MACR,GACF,GACF,EAIEC,EAAoD,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,CAAM,EAAG,UAAAC,EAAY,GAAI,IAAAC,CAAI,IAE1GZ,EAAC,OAAI,UAAWW,EACb,UAAAD,GAASX,EAACK,EAAA,CAAM,KAAM,CAAE,MAAAM,CAAM,EAAG,EAClCX,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BO,EAC/B,KAAM,CAAE,KAAMH,CAAM,EACpB,MAAOH,EACT,GACF,EAIJ,IAAOO,EAAQX,EAAWM,CAAgB",
4
+ "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Container } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\n\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data }: { data: MediaPlayerItemProps }) => {\n return (\n <div\n className={cn(\n 'tablet:max-w-full w-full max-w-[296px] overflow-hidden',\n 'tablet:flex-row flex shrink-0 flex-col ',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto'\n )}\n >\n <div className=\"tablet:w-[49%] relative w-full flex-none\">\n <Picture\n source={data.backgroundImage}\n alt={data.name}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"absolute bottom-6 right-6\">\n <button 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 </button>\n </div>\n </div>\n\n <div className=\"tablet:gap-[60px] tablet:p-6 flex min-h-[200px] flex-col justify-between gap-4 bg-white p-4\">\n <div className=\"flex flex-col gap-2\">\n <h3 className=\"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {data.name}\n </h3>\n <p className=\"lg-desktop:text-lg text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {data.quote}\n </p>\n </div>\n\n <p className=\"lg-desktop:text-2xl tablet:h-[65%] min-h-[100px] text-lg font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti: React.FC<MediaPlayerMultiProps> = ({ data: { items = [], title }, className = '', key }) => {\n return (\n <div className={className}>\n {title && <Title data={{ title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items }}\n Slide={MediaPlayerItem}\n />\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
+ "mappings": "aAmBM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlBN,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,MAA0B,4BACnC,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBAItB,MAAMC,EAAkB,CAAC,CAAE,KAAAC,CAAK,IAE5BP,EAAC,OACC,UAAWC,EACT,yDACA,0CACA,gEACF,EAEA,UAAAD,EAAC,OAAI,UAAU,2CACb,UAAAD,EAACI,EAAA,CACC,OAAQI,EAAK,gBACb,IAAKA,EAAK,KACV,UAAU,YACV,aAAa,6BACf,EACAR,EAAC,OAAI,UAAU,4BACb,SAAAA,EAAC,UAAO,UAAU,8FAChB,SAAAA,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EACF,GACF,EAEAC,EAAC,OAAI,UAAU,8FACb,UAAAA,EAAC,OAAI,UAAU,sBACb,UAAAD,EAAC,MAAG,UAAU,2FACX,SAAAQ,EAAK,KACR,EACAR,EAAC,KAAE,UAAU,2FACV,SAAAQ,EAAK,MACR,GACF,EAEAR,EAAC,KAAE,UAAU,qHACV,SAAAQ,EAAK,YACR,GACF,GACF,EAIEC,EAAoD,CAAC,CAAE,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,CAAM,EAAG,UAAAC,EAAY,GAAI,IAAAC,CAAI,IAE1GZ,EAAC,OAAI,UAAWW,EACb,UAAAD,GAASX,EAACK,EAAA,CAAM,KAAM,CAAE,MAAAM,CAAM,EAAG,EAClCX,EAACM,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BO,EAC/B,KAAM,CAAE,KAAMH,CAAM,EACpB,MAAOH,EACT,GACF,EAIJ,IAAOO,EAAQX,EAAWM,CAAgB",
6
6
  "names": ["jsx", "jsxs", "cn", "withStyles", "Picture", "Title", "SwiperBox", "MediaPlayerItem", "data", "MediaPlayerMulti", "items", "title", "className", "key", "MediaPlayerMulti_default"]
7
7
  }
@@ -4,6 +4,7 @@ export interface MediaPlayerItemProps {
4
4
  description: string;
5
5
  quote: string;
6
6
  backgroundImage: string;
7
+ video: string;
7
8
  }
8
9
  export interface MediaPlayerMultiProps extends ComponentCommonProps {
9
10
  data: {
@@ -1,9 +1,4 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Button as o,Heading as g,Text as b}from"../../components/index.js";import{withStyles as y}from"../../shared/Styles.js";const k=({data:p,className:d=""})=>{const{title:s,description:l,backgroundImage:i,mobileBackgroundImage:r,primaryButton:n,secondaryButton:c,theme:u,shape:a}=p,m=()=>{},x=()=>{};return t("section",{"data-ui-component-id":"MemberEquity",className:`
2
- ${u==="dark"?"aiui-dark":""}
3
- relative
4
- ${a==="rounded"?"rounded-box":""}
5
- ${d}
6
- `,children:[e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:i,type:"video/mp4"})}),e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:e("source",{src:r,type:"video/mp4"})}),e("div",{className:`
1
+ "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{Button as o,Heading as y,Text as v}from"../../components/index.js";import{withStyles as x}from"../../shared/Styles.js";import{cn as a}from"../../helpers/utils.js";const k=({data:p,className:s=""})=>{const{title:l,description:i,backgroundImage:r,mobileBackgroundImage:d,primaryButton:c,secondaryButton:m,theme:n,shape:u}=p,g=()=>{},b=()=>{};return t("section",{"data-ui-component-id":"MemberEquity",className:a("relative overflow-hidden",s,{"aiui-dark":n==="dark","rounded-box":u==="rounded"}),children:[e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:r,type:"video/mp4"})}),e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:e("source",{src:d,type:"video/mp4"})}),e("div",{className:`
7
2
  xs:aspect-[343/200] tablet:aspect-[343/200] laptop:aspect-[592/336]
8
3
  desktop:aspect-[800/448] lg-desktop:aspect-[1000/560]
9
4
  relative
@@ -14,11 +9,5 @@
14
9
  `,children:t("div",{className:`
15
10
  tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-6
16
11
  desktop:gap-7 lg-desktop:gap-8 flex w-full flex-col gap-4 px-4
17
- `,children:[t("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[e(g,{as:"h2",size:5,className:"member-equity-title ",children:s}),e(b,{size:3,className:"member-equity-description",html:l})]}),t("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[e(o,{variant:"secondary",onClick:x,className:`
18
- member-equity-button-secondary
19
- ${a==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
20
- `,children:c.text}),e(o,{variant:"primary",onClick:m,className:`
21
- member-equity-button-primary
22
- ${a==="rounded"?"tablet:rounded-[19px] laptop:rounded-[20px] desktop:rounded-[22px] lg-desktop:rounded-[24px] rounded-[16px]":""}
23
- `,children:n.text})]})]})})]})};var q=y(k);export{q as default};
12
+ `,children:[t("div",{className:"tablet:gap-2 laptop:gap-3 desktop:gap-3 lg-desktop:gap-4 flex flex-col gap-2",children:[e(y,{as:"h2",size:5,className:"member-equity-title ",children:l}),e(v,{size:3,className:"member-equity-description",html:i})]}),t("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[e(o,{variant:"secondary",onClick:b,className:a("member-equity-button-secondary"),children:m.text}),e(o,{variant:"primary",onClick:g,className:a("member-equity-button-primary"),children:c.text})]})]})})]})};var C=x(k);export{C as default};
24
13
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
4
- "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 \n ${shape === 'rounded' ? 'rounded-box' : ''}\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"],
5
- "mappings": "aA2BQ,cAAAA,EAsBE,QAAAC,MAtBF,oBA1BR,MAAkB,QAClB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BACtC,OAAS,cAAAC,MAAkB,yBAG3B,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,OACEjB,EAAC,WACC,uBAAqB,eACrB,UAAW;AAAA,UACPc,IAAU,OAAS,YAAc,EAAE;AAAA;AAAA,UAEnCC,IAAU,UAAY,cAAgB,EAAE;AAAA,UACxCR,CAAS;AAAA,QAGb,UAAAR,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,SAAAA,EAAC,UAAO,IAAKW,EAAiB,KAAK,YAAY,EACjD,EACAX,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,SAAAA,EAAC,UAAO,IAAKY,EAAuB,KAAK,YAAY,EACvD,EACAZ,EAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,UAAAA,EAAC,OAAI,UAAU,+EACb,UAAAD,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAClC,SAAAM,EACH,EACAT,EAACI,EAAA,CAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMM,EAAa,GAC5E,EAEAT,EAAC,OAAI,UAAU,mFACb,UAAAD,EAACE,EAAA,CACC,QAAQ,YACR,QAASgB,EACT,UAAW;AAAA;AAAA,kBAEPF,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAF,EAAgB,KACnB,EACAd,EAACE,EAAA,CACC,QAAQ,UACR,QAASe,EACT,UAAW;AAAA;AAAA,kBAEPD,IAAU,UAAY,8GAAgH,EAAE;AAAA,gBAG3I,SAAAH,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOM,EAAQd,EAAWC,CAAY",
6
- "names": ["jsx", "jsxs", "Button", "Heading", "Text", "withStyles", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "MemberEquity_default"]
4
+ "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'\nimport { cn } from '../../helpers/utils.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const { title, description, backgroundImage, mobileBackgroundImage, primaryButton, secondaryButton, theme, shape } =\n 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={cn('relative overflow-hidden', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\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={cn('member-equity-button-secondary')}\n >\n {secondaryButton.text}\n </Button>\n <Button variant=\"primary\" onClick={handleButtonPrimaryClick} className={cn('member-equity-button-primary')}>\n {primaryButton.text}\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
5
+ "mappings": "aA2BQ,cAAAA,EAsBE,QAAAC,MAtBF,oBA1BR,MAAkB,QAClB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BACtC,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,MAAAC,MAAU,yBAEnB,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,EAC/GT,EACIU,EAA2B,IAAM,CAEvC,EAEMC,EAA6B,IAAM,CAEzC,EAEA,OACElB,EAAC,WACC,uBAAqB,eACrB,UAAWK,EAAG,2BAA4BG,EAAW,CACnD,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CAAC,EAED,UAAAjB,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,SAAAA,EAAC,UAAO,IAAKY,EAAiB,KAAK,YAAY,EACjD,EACAZ,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,SAAAA,EAAC,UAAO,IAAKa,EAAuB,KAAK,YAAY,EACvD,EACAb,EAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUX,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,UAAAA,EAAC,OAAI,UAAU,+EACb,UAAAD,EAACG,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAClC,SAAAO,EACH,EACAV,EAACI,EAAA,CAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMO,EAAa,GAC5E,EAEAV,EAAC,OAAI,UAAU,mFACb,UAAAD,EAACE,EAAA,CACC,QAAQ,YACR,QAASiB,EACT,UAAWb,EAAG,gCAAgC,EAE7C,SAAAS,EAAgB,KACnB,EACAf,EAACE,EAAA,CAAO,QAAQ,UAAU,QAASgB,EAA0B,UAAWZ,EAAG,8BAA8B,EACtG,SAAAQ,EAAc,KACjB,GACF,GACF,EACF,GACF,CAEJ,EAEA,IAAOM,EAAQf,EAAWE,CAAY",
6
+ "names": ["jsx", "jsxs", "Button", "Heading", "Text", "withStyles", "cn", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "MemberEquity_default"]
7
7
  }
@@ -7,3 +7,4 @@ declare const _default: {
7
7
  displayName: string;
8
8
  };
9
9
  export default _default;
10
+ export type { MultiLayoutGraphicBlockProps };
@@ -1,2 +1,2 @@
1
- import{jsx as t,jsxs as r}from"react/jsx-runtime";import u from"react";import{withStyles as d}from"../../shared/Styles.js";import f from"../../components/picture.js";import n from"../../components/button.js";import{Heading as h}from"../../components/heading.js";import{Text as y}from"../../components/text.js";import{Carousel as k,CarouselContent as v,CarouselItem as N}from"../../components/carousel.js";import{Grid as x,GridItem as B}from"../../components/gird.js";import C from"../Title/index.js";const p=({item:l})=>{const{theme:s="light",title:o,description:m,imageUrl:a,primaryBtn:i,secondaryBtn:e}=l;return r("div",{className:`item-wrapper relative w-full border ${s==="dark"?"aiui-dark":"aiui-light"}`,children:[t(f,{source:a,className:"inset-0"}),r("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[r("div",{children:[t(h,{className:"item-title",children:o}),t(y,{className:"item-description",children:m})]}),r("div",{className:"flex gap-2",children:[e&&t(n,{variant:"secondary",asChild:!0,children:t("a",{href:e.link,children:e.text})}),i&&t(n,{variant:"primary",asChild:!0,children:t("a",{href:i.link,children:i.text})})]})]})]})},g=u.forwardRef((l,s)=>{const{sectionTitle:o,items:m=[],carousel:a}=l.data,i=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}};return r("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,className:"",children:[o&&t(C,{data:{title:o},className:"section-title"}),t(x,{className:"w-full",children:m.map((e,c)=>t(B,{span:i(e.width),children:t(p,{item:e})},c))}),a&&a?.items.length>0?t(k,{className:"laptop:mt-4 mt-3",children:t(v,{className:"flex",children:a.items.map((e,c)=>t(N,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(p,{item:e})},c))})}):null]})});var R=d(g);export{R as default};
1
+ import{Fragment as C,jsx as t,jsxs as i}from"react/jsx-runtime";import v from"react";import{withStyles as B}from"../../shared/Styles.js";import w from"../../components/picture.js";import b from"../../components/button.js";import{Heading as G}from"../../components/heading.js";import{Text as I}from"../../components/text.js";import{Carousel as y,CarouselContent as k,CarouselItem as x}from"../../components/carousel.js";import{Grid as N,GridItem as g}from"../../components/gird.js";import L from"../Title/index.js";import{cn as M}from"../../helpers/utils.js";import{Tabs as P,TabsList as S,TabsTrigger as H,TabsContent as R}from"../../components/tabs.js";const u=({item:c,shape:d="square"})=>{const{theme:o="light",title:p,description:f,imageUrl:m,primaryBtn:s,secondaryBtn:l}=c;return i("div",{className:M("item-wrapper relative w-full",{"rounded-box":d==="rounded","aiui-dark":o==="dark"}),children:[t(w,{source:m,className:"inset-0"}),i("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[i("div",{children:[t(G,{className:"item-title",children:p}),t(I,{className:"item-description",children:f})]}),i("div",{className:"flex gap-2",children:[l&&t(b,{variant:"secondary",asChild:!0,children:t("a",{href:l.link,children:l.text})}),s&&t(b,{variant:"primary",asChild:!0,children:t("a",{href:s.link,children:s.text})})]})]})]})},q=v.forwardRef((c,d)=>{const{shape:o,sectionTitle:p,groupByTab:f=!1,items:m=[],carousel:s}=c.data,l=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=m.map(e=>e.tabName).filter(Boolean).filter((e,a,r)=>r.indexOf(e)===a),T=n.map(e=>({tabName:e,items:m.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return i("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:d,className:"",children:[p&&t(L,{data:{title:p},className:"section-title"}),f?i(P,{shape:o,align:"left",defaultValue:n[0],children:[t(S,{children:n.map((e,a)=>t(H,{value:e,children:e},a))}),n.map((e,a)=>t(R,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:i(C,{children:[t(N,{className:"w-full",children:T[e].map((r,h)=>t(g,{span:l(r.width??"full"),children:t(u,{item:r})},h))}),s&&s?.items.length>0?t(y,{className:"laptop:mt-4 mt-3",children:t(k,{className:"flex",children:s.items.map((r,h)=>t(x,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(u,{item:r,shape:o})},h))})}):null]})},a))]}):i(C,{children:[t(N,{className:"w-full",children:m.map((e,a)=>t(g,{span:l(e.width??"full"),children:t(u,{item:e})},a))}),s&&s?.items.length>0?t(y,{className:"laptop:mt-4 mt-3",children:t(k,{className:"flex",children:s.items.map((e,a)=>t(x,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:t(u,{item:e,shape:o})},a))})}):null]})]})});var W=B(q);export{W as default};
2
2
  //# sourceMappingURL=MultiLayoutGraphicBlock.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
4
- "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 {secondaryBtn && (\n <Button variant=\"secondary\" asChild>\n <a href={secondaryBtn.link}>{secondaryBtn.text}</a>\n </Button>\n )}\n {primaryBtn && (\n <Button variant=\"primary\" asChild>\n <a href={primaryBtn.link}>{primaryBtn.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"],
5
- "mappings": "AAgBM,cAAAA,EAEE,QAAAC,MAFF,oBAhBN,OAAOC,MAAW,QAElB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,+BACxD,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAElB,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,OACEd,EAAC,OAAI,UAAW,uCAAuCe,IAAU,OAAS,YAAc,YAAY,GAClG,UAAAhB,EAACI,EAAA,CAAQ,OAAQe,EAAU,UAAU,UAAU,EAC/ClB,EAAC,OAAI,UAAU,kFACb,UAAAA,EAAC,OACC,UAAAD,EAACM,EAAA,CAAQ,UAAU,aAAc,SAAAW,EAAM,EACvCjB,EAACO,EAAA,CAAK,UAAU,mBAAoB,SAAAW,EAAY,GAClD,EACAjB,EAAC,OAAI,UAAU,aACZ,UAAAoB,GACCrB,EAACK,EAAA,CAAO,QAAQ,YAAY,QAAO,GACjC,SAAAL,EAAC,KAAE,KAAMqB,EAAa,KAAO,SAAAA,EAAa,KAAK,EACjD,EAEDD,GACCpB,EAACK,EAAA,CAAO,QAAQ,UAAU,QAAO,GAC/B,SAAAL,EAAC,KAAE,KAAMoB,EAAW,KAAO,SAAAA,EAAW,KAAK,EAC7C,GAEJ,GACF,GACF,CAEJ,EAEME,EAA0BpB,EAAM,WAAyD,CAACqB,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,OACE5B,EAAC,WAAQ,uBAAqB,0BAA0B,IAAKuB,EAAK,UAAU,GACzE,UAAAC,GAAgBzB,EAACa,EAAA,CAAM,KAAM,CAAE,MAAOY,CAAa,EAAG,UAAU,gBAAgB,EACjFzB,EAACW,EAAA,CAAK,UAAU,SACb,SAAAe,EAAM,IAAI,CAACX,EAAMe,IAChB9B,EAACY,EAAA,CAAqB,KAAMgB,EAAQb,EAAK,KAAK,EAC5C,SAAAf,EAACc,EAAA,CAAU,KAAMC,EAAM,GADVe,CAEf,CACD,EACH,EACCH,GAAYA,GAAU,MAAM,OAAS,EACpC3B,EAACQ,EAAA,CAAS,UAAU,mBAClB,SAAAR,EAACS,EAAA,CAAgB,UAAU,OACxB,SAAAkB,EAAS,MAAM,IAAI,CAACZ,EAAMe,IACzB9B,EAACU,EAAA,CAAyB,UAAU,qDAClC,SAAAV,EAACc,EAAA,CAAU,KAAMC,EAAM,GADNe,CAEnB,CACD,EACH,EACF,EACE,MACN,CAEJ,CAAC,EAED,IAAOC,EAAQ5B,EAAWmB,CAAuB",
6
- "names": ["jsx", "jsxs", "React", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "Title", "ItemBlock", "item", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "items", "carousel", "getSpan", "width", "index", "MultiLayoutGraphicBlock_default"]
4
+ "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'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({ item, shape = 'square' }: { item: Item } & { shape?: Shape }) => {\n const { theme = 'light', title, description, imageUrl, primaryBtn, secondaryBtn } = item\n\n return (\n <div\n className={cn(`item-wrapper relative w-full`, {\n 'rounded-box': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n })}\n >\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 {secondaryBtn && (\n <Button variant=\"secondary\" asChild>\n <a href={secondaryBtn.link}>{secondaryBtn.text}</a>\n </Button>\n )}\n {primaryBtn && (\n <Button variant=\"primary\" asChild>\n <a href={primaryBtn.link}>{primaryBtn.text}</a>\n </Button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, 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 const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger key={index} value={tabName!}>\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <Grid className=\"w-full\">\n {tabItemsMaps[tabName].map((item, index) => (\n <GridItem key={index} span={getSpan(item.width ?? 'full')}>\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} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem key={index} span={getSpan(item.width ?? 'full')}>\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} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "withStyles", "Picture", "Button", "Heading", "Text", "Carousel", "CarouselContent", "CarouselItem", "Grid", "GridItem", "Title", "cn", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "ItemBlock", "item", "shape", "theme", "title", "description", "imageUrl", "primaryBtn", "secondaryBtn", "MultiLayoutGraphicBlock", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
7
7
  }
@@ -1,9 +1,10 @@
1
- import type { Theme } from '../../types/props';
1
+ import type { Shape, Theme } from '../../types/props';
2
2
  export type Item = {
3
3
  theme?: Theme;
4
4
  title: string;
5
5
  description: string;
6
6
  imageUrl: string;
7
+ tabName?: string;
7
8
  primaryBtn: {
8
9
  text: string;
9
10
  link: string;
@@ -15,9 +16,11 @@ export type Item = {
15
16
  };
16
17
  export type MultiLayoutGraphicBlockProps = {
17
18
  data: {
19
+ shape?: Shape;
18
20
  sectionTitle?: string;
21
+ groupByTab?: boolean;
19
22
  items: ({
20
- width: 'full' | 'half' | 'one-third';
23
+ width?: 'full' | 'half' | 'one-third';
21
24
  } & Item)[];
22
25
  carousel?: {
23
26
  items: Item[];
@@ -1,18 +1,22 @@
1
1
  export interface ShelfDisplayItem {
2
2
  /** 产品图片*/
3
- img: string;
3
+ img?: string;
4
4
  /** 折扣后价格*/
5
- price: string;
6
- title: string;
5
+ price?: string;
6
+ title?: string;
7
7
  /** 折扣前价格*/
8
- basePrice: string;
9
- subTitle: string;
8
+ basePrice?: string;
9
+ subTitle?: string;
10
10
  /** 标签*/
11
- tagItems: string[];
11
+ tagItems?: string[];
12
+ tab?: string;
13
+ data?: ShelfDisplayItem[];
12
14
  }
13
15
  export interface ShelfDisplayProps {
14
16
  data: {
15
17
  title?: string;
18
+ isShowTab?: boolean;
19
+ align?: 'left' | 'center' | 'right';
16
20
  items: ShelfDisplayItem[];
17
21
  /** 卡片形状 */
18
22
  itemShape?: 'round' | 'square';
@@ -1,10 +1,10 @@
1
- "use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import n from"../../components/picture.js";import d from"../../components/button.js";import m from"../Title/index.js";import x from"../SwiperBox/index.js";import{withStyles as c}from"../../shared/Styles.js";const f=({data:t,configuration:s})=>{const i=o=>{},l=o=>{};return r("div",{className:a("flex w-full flex-col bg-[#EAEAEC] p-4 cursor-pointer","desktop:pt-4 desktop:px-6 desktop:pb-6 hover:bg-[#FFFFFF]",s?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[e("div",{className:a("relative mb-2 inline-block h-[137px] overflow-hidden","desktop:mb-3 desktop:h-[195px]"),children:e(n,{source:t?.img||"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),e("div",{className:"desktop:mb-2 mb-1 flex flex-wrap gap-1",children:t?.tagItems?.map((o,p)=>e("div",{className:"desktop:text-base rounded-3xl border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold text-[#00BEFA]",children:o},p))}),e("p",{className:"desktop:text-2xl flex-1 text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t?.title||""}),e("h3",{className:"desktop:mt-2 desktop:mb-6 desktop:text-lg mb-5 mt-1 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t?.subTitle||""}),r("div",{className:"mb-2 flex items-center",children:[e("div",{className:"desktop:text-2xl text-xl font-bold text-[#1D1D1F]",children:t?.price||""}),e("div",{className:"desktop:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:t?.basePrice||""})]}),r("div",{className:"flex items-center gap-3",children:[e(d,{variant:"primary",onClick:()=>i(t),className:`
1
+ "use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as f,useEffect as h}from"react";import{cn as x}from"../../helpers/utils.js";import v from"../../components/picture.js";import{Tabs as D,TabsList as S,TabsTrigger as w}from"../../components/tabs.js";import u from"../../components/button.js";import B from"../Title/index.js";import N from"../SwiperBox/index.js";import{withStyles as I}from"../../shared/Styles.js";const T=({data:t,configuration:s})=>{const l=a=>{},p=a=>{};return i("div",{className:x("flex w-full h-full flex-col bg-[#EAEAEC] p-4 cursor-pointer","desktop:pt-4 desktop:px-6 desktop:pb-6",s?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[e("div",{className:x("relative mb-2 inline-block h-[137px] overflow-hidden","desktop:mb-3 desktop:h-[195px]"),children:e(v,{source:t?.img||"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),e("div",{className:"desktop:mb-2 mb-1 flex flex-wrap gap-1",children:t?.tagItems?.map((a,n)=>e("div",{className:"desktop:text-base rounded-3xl border-2 border-[#00BEFA] px-2 py-1 text-sm font-bold text-[#00BEFA]",children:a},n))}),e("p",{className:"desktop:text-2xl flex-1 text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:t?.title||""}),e("h3",{className:"desktop:mt-2 desktop:mb-6 desktop:text-lg mb-5 mt-1 text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:t?.subTitle||""}),i("div",{className:"mb-2 flex items-center",children:[e("div",{className:"desktop:text-2xl text-xl font-bold text-[#1D1D1F]",children:t?.price||""}),e("div",{className:"desktop:text-2xl ml-1 text-xl font-bold text-[#86868C]",children:t?.basePrice||""})]}),i("div",{className:"flex items-center gap-3",children:[e(u,{variant:"primary",onClick:()=>l(t),className:`
2
2
  laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
3
3
  border-[#1D1D1F] bg-transparent px-4 py-2 text-xs tracking-[-0.04em] text-[#1D1D1F] hover:bg-transparent hover:text-black
4
4
  ${s?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
5
- `,children:s?.primaryButton||""}),e(d,{variant:"secondary",onClick:()=>l(t),className:`
5
+ `,children:s?.primaryButton||""}),e(u,{variant:"secondary",onClick:()=>p(t),className:`
6
6
  laptop:text-sm desktop:text-base laptop:px-6 desktop:px-7 laptop:py-2.5 desktop:py-3 box-border flex-1 border
7
7
  border-[#1D1D1F] bg-[#1D1D1F] px-4 py-2 text-xs tracking-[-0.04em] text-white
8
8
  ${s?.shape==="round"?"desktop:rounded-3xl rounded-[20px]":""}
9
- `,children:s?.secondaryButton||""})]})]})},b=({data:t,className:s="",key:i})=>{const{items:l,title:o,...p}=t;return r("div",{className:a("w-full",s),children:[o&&e(m,{data:{title:o}}),e(x,{className:"!overflow-visible",id:"Category"+i,data:{list:l,configuration:{...p}},Slide:f,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:3.5}}})]})};var F=c(b);export{F as default};
9
+ `,children:s?.secondaryButton||""})]})]})},F=({data:t,className:s="",key:l})=>{const[p,a]=f(""),[n,d]=f([]),{items:r,title:c,align:g="left",isShowTab:b=!0,...y}=t;return h(()=>{if(b){a(r?.[0]?.tab||""),d(r?.[0]?.data||[]);return}d(r||[])},[]),i("div",{className:x("w-full",s),children:[c&&e(B,{data:{title:c}}),b&&e(D,{align:g,value:p,onValueChange:o=>{a(o);const m=r?.find(k=>k?.tab===o);d(m?.data||[])},className:"mb-8",children:e(S,{children:r?.map((o,m)=>e(w,{value:o?.tab||"",children:o?.tab},m))})}),e(N,{className:"!overflow-visible",id:"ShelfDisplay"+l,data:{list:n,configuration:{...y}},Slide:T,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.3},768:{spaceBetween:"16px",freeMode:!1,slidesPerView:4}}})]})};var $=I(F);export{$ as default};
10
10
  //# sourceMappingURL=index.js.map