@anker-in/headless-ui 0.0.27-alpha.130 → 0.0.27-alpha.131

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  2. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
  3. package/dist/cjs/components/heading.js +1 -1
  4. package/dist/cjs/components/heading.js.map +1 -1
  5. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  6. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
  7. package/dist/esm/components/heading.js +1 -1
  8. package/dist/esm/components/heading.js.map +1 -1
  9. package/package.json +1 -1
  10. package/style.css +4 -4
package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var E=Object.create;var k=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var U=(s,i)=>{for(var o in i)k(s,o,{get:i[o],enumerable:!0})},V=(s,i,o,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of j(i))!Q.call(s,r)&&r!==o&&k(s,r,{get:()=>i[r],enumerable:!(l=H(i,r))||l.enumerable});return s};var u=(s,i,o)=>(o=s!=null?E(z(s)):{},V(i||!s||!s.__esModule?k(o,"default",{value:s,enumerable:!0}):o,s)),q=s=>V(k({},"__esModule",{value:!0}),s);var J={};U(J,{default:()=>F});module.exports=q(J);var e=require("react/jsx-runtime"),n=u(require("react")),G=require("react-responsive"),_=require("../../shared/Styles.js"),I=u(require("../../components/picture.js")),T=u(require("../../components/button.js")),L=require("../../components/heading.js"),$=require("../../components/text.js"),w=require("../../components/gird.js"),S=u(require("../Title/index.js")),R=require("../../helpers/utils.js"),b=u(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),A=require("../../hooks/useEXposure.js"),P=require("../AiuiProvider/index.js"),C=require("../../shared/trackUrlRef.js"),D=require("../../shared/track");const B="image",M="p1_banner",h=({data:s,configuration:i,jIndex:o})=>{const[l,r]=(0,n.useState)(!1),m=(0,G.useMediaQuery)({query:"(max-width: 1024px)"}),{trackingData:p}=(0,P.useAiuiContext)(),{profileActivated:x}=p,v=(0,n.useRef)(null);(0,A.useExposure)(v,{componentType:B,componentName:M,position:o,componentTitle:s.title,componentDescription:s.description,memberActiveStatus:x?"active":"not active",navigation:i?.activeTab}),(0,n.useEffect)(()=>{r(m)},[m]);const{theme:g="light",title:d,description:y,imageUrl:t,primaryButton:a,secondaryButton:f}=s,N="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,R.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",i?.isTab?"laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]":"laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]",{"rounded-2xl":i?.shape==="rounded","aiui-dark":g==="dark","h-[480px]":l&&!i?.isTab,"h-[400px]":l&&i?.isTab},"text-info-primary"),ref:v,children:[(0,e.jsx)(I.default,{source:t?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(L.Heading,{size:3,className:"item-title",html:d}),(0,e.jsx)($.Text,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:y})]}),(0,e.jsxs)("div",{className:"flex gap-[16px]",children:[f&&f.text&&(0,e.jsx)("a",{href:(0,C.trackUrlRef)(f.link,`$${B}_$${M}`),children:(0,e.jsx)(T.default,{className:N,variant:"secondary",children:f.text})}),a&&a.text&&(0,e.jsx)("a",{href:a.link,children:(0,e.jsx)(T.default,{className:N,variant:"primary",children:a.text})})]})]})]})},O=n.default.forwardRef((s,i)=>{const{shape:o,sectionTitle:l,groupByTab:r=!1,items:m=[],carousel:p}=s.data,{trackingData:x}=(0,P.useAiuiContext)(),{profileActivated:v}=x,g=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},d=m.map(t=>t.tabName).filter(Boolean).filter((t,a,f)=>f.indexOf(t)===a),y=d.map(t=>({tabName:t,items:m.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:i,className:"text-info-primary",children:[l&&(0,e.jsx)(S.default,{data:{title:l},className:"section-title"}),r?(0,e.jsxs)(c.Tabs,{shape:o,align:"left",defaultValue:d[0],children:[(0,e.jsx)(c.TabsList,{children:d.map((t,a)=>(0,e.jsx)(c.TabsTrigger,{value:t,onClick:()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",member_active_status:v?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:B,component_name:M,component_title:l,component_position:1,navigation:t}})},children:t},a))}),d.map((t,a)=>(0,e.jsx)(c.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(b.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:y?.[t]||[],configuration:{shape:o,isTab:r,activeTab:t}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3}}}),p&&p?.items.length>0?(0,e.jsx)(b.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:p?.items||[],configuration:{shape:o,isTab:r}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(w.Grid,{className:"w-full",children:[m.map((t,a)=>(0,e.jsx)(w.GridItem,{span:g(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(h,{data:t,configuration:{shape:o},jIndex:a})},`${t?.title||""}${a}`)),m.map((t,a)=>(0,e.jsx)(w.GridItem,{span:g("full"),className:"laptop:hidden block",children:(0,e.jsx)(h,{data:t,configuration:{shape:o},jIndex:a})},`${t?.title||""}${a}`))]}),p&&p?.items.length>0?(0,e.jsx)(b.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:p?.items||[],configuration:{shape:o}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var F=(0,_.withStyles)(O);
1
+ "use strict";var E=Object.create;var k=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var U=(s,i)=>{for(var o in i)k(s,o,{get:i[o],enumerable:!0})},_=(s,i,o,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of j(i))!Q.call(s,r)&&r!==o&&k(s,r,{get:()=>i[r],enumerable:!(l=H(i,r))||l.enumerable});return s};var u=(s,i,o)=>(o=s!=null?E(z(s)):{},_(i||!s||!s.__esModule?k(o,"default",{value:s,enumerable:!0}):o,s)),q=s=>_(k({},"__esModule",{value:!0}),s);var J={};U(J,{default:()=>F});module.exports=q(J);var e=require("react/jsx-runtime"),n=u(require("react")),$=require("react-responsive"),G=require("../../shared/Styles.js"),I=u(require("../../components/picture.js")),T=u(require("../../components/button.js")),L=require("../../components/heading.js"),S=require("../../components/text.js"),w=require("../../components/gird.js"),R=u(require("../Title/index.js")),A=require("../../helpers/utils.js"),y=u(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),C=require("../../hooks/useEXposure.js"),P=require("../AiuiProvider/index.js"),N=require("../../shared/trackUrlRef.js"),D=require("../../shared/track");const b="image",x="p1_banner",h=({data:s,configuration:i,jIndex:o})=>{const[l,r]=(0,n.useState)(!1),m=(0,$.useMediaQuery)({query:"(max-width: 1024px)"}),{trackingData:p}=(0,P.useAiuiContext)(),{profileActivated:B}=p,v=(0,n.useRef)(null);(0,C.useExposure)(v,{componentType:b,componentName:x,position:o,componentTitle:s.title,componentDescription:s.description,memberActiveStatus:B?"active":"not active",navigation:i?.activeTab}),(0,n.useEffect)(()=>{r(m)},[m]);const{theme:g="light",title:d,description:M,imageUrl:t,primaryButton:a,secondaryButton:f}=s,V="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,A.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",i?.isTab?"laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]":"laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]",{"rounded-2xl":i?.shape==="rounded","aiui-dark":g==="dark","h-[480px]":l&&!i?.isTab,"h-[400px]":l&&i?.isTab},"text-info-primary"),ref:v,children:[(0,e.jsx)(I.default,{source:t?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(L.Heading,{size:3,className:"item-title",html:d}),(0,e.jsx)(S.Text,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:M})]}),(0,e.jsxs)("div",{className:"flex gap-[16px]",children:[f&&f.text&&(0,e.jsx)("a",{href:(0,N.trackUrlRef)(f.link,`$${b}_$${x}`),children:(0,e.jsx)(T.default,{className:V,variant:"secondary",children:f.text})}),a&&a.text&&(0,e.jsx)("a",{href:(0,N.trackUrlRef)(a.link,`$${b}_$${x}`),children:(0,e.jsx)(T.default,{className:V,variant:"primary",children:a.text})})]})]})]})},O=n.default.forwardRef((s,i)=>{const{shape:o,sectionTitle:l,groupByTab:r=!1,items:m=[],carousel:p}=s.data,{trackingData:B}=(0,P.useAiuiContext)(),{profileActivated:v}=B,g=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},d=m.map(t=>t.tabName).filter(Boolean).filter((t,a,f)=>f.indexOf(t)===a),M=d.map(t=>({tabName:t,items:m.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:i,className:"text-info-primary",children:[l&&(0,e.jsx)(R.default,{data:{title:l},className:"section-title"}),r?(0,e.jsxs)(c.Tabs,{shape:o,align:"left",defaultValue:d[0],children:[(0,e.jsx)(c.TabsList,{children:d.map((t,a)=>(0,e.jsx)(c.TabsTrigger,{value:t,onClick:()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",member_active_status:v?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:b,component_name:x,component_title:l,component_position:1,navigation:t}})},children:t},a))}),d.map((t,a)=>(0,e.jsx)(c.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(y.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:M?.[t]||[],configuration:{shape:o,isTab:r,activeTab:t}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3}}}),p&&p?.items.length>0?(0,e.jsx)(y.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:p?.items||[],configuration:{shape:o,isTab:r}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(w.Grid,{className:"w-full",children:[m.map((t,a)=>(0,e.jsx)(w.GridItem,{span:g(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(h,{data:t,configuration:{shape:o},jIndex:a})},`${t?.title||""}${a}`)),m.map((t,a)=>(0,e.jsx)(w.GridItem,{span:g("full"),className:"laptop:hidden block",children:(0,e.jsx)(h,{data:t,configuration:{shape:o},jIndex:a})},`${t?.title||""}${a}`))]}),p&&p?.items.length>0?(0,e.jsx)(y.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:p?.items||[],configuration:{shape:o}},Slide:h,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var F=(0,G.withStyles)(O);
2
2
  //# sourceMappingURL=MultiLayoutGraphicBlock.js.map
package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
4
- "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\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 { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useEXposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? 'laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n : 'laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\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 size={3} className=\"item-title\" html={title} />\n <Text size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `$${componentType}_$${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\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 const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\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=\"text-info-primary\">\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\n key={index}\n value={tabName!}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n },\n })\n }}\n >\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 <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: { shape: shape, isTab: groupByTab, activeTab: tabName },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\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\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\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 { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useEXposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? 'laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n : 'laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\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 size={3} className=\"item-title\" html={title} />\n <Text size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `$${componentType}_$${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `$${componentType}_$${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\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 const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\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=\"text-info-primary\">\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\n key={index}\n value={tabName!}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n },\n })\n }}\n >\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 <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: { shape: shape, isTab: groupByTab, activeTab: tabName },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\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\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
+ "mappings": "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",
6
6
  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_tabs", "import_useEXposure", "import_AiuiProvider", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "trackingData", "profileActivated", "ref", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/components/heading.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var u=Object.create;var l=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of R(t))!L.call(e,a)&&a!==o&&l(e,a,{get:()=>t[a],enumerable:!(i=z(t,a))||i.enumerable});return e};var T=(e,t,o)=>(o=e!=null?u(E(e)):{},g(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),V=e=>g(l({},"__esModule",{value:!0}),e);var C={};N(C,{Heading:()=>r});module.exports=V(C);var d=require("react/jsx-runtime"),x=require("../helpers/index.js"),m=require("@radix-ui/react-slot"),c=require("class-variance-authority"),h=T(require("react")),f=require("@payloadcms/richtext-lexical/html");const w=(0,c.cva)("leading-tight tracking-[-0.04em]",{variants:{size:{none:"tracking-[-0.04em]",1:"lg-desktop:text-[16px] text-[14px] leading-[120%]",2:"lg-desktop:text-[24px] text-[20px] leading-[120%]",3:"lg-desktop:text-[32px] text-[24px] leading-[120%]",4:"desktop:text-[36px] lg-desktop:text-[48px] text-[32px] leading-[100%]",5:"desktop:text-[48px] lg-desktop:text-[64px] text-[40px] leading-[100%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),r=h.default.forwardRef((e,t)=>{const{children:o,className:i,size:a="none",align:k,weight:y,asChild:b,as:H="h1",color:s,html:n,...P}=e,p=n?{dangerouslySetInnerHTML:{__html:typeof n=="string"?n:(0,f.convertLexicalToHTML)({data:n})}}:null,S=s?{style:{color:s}}:null;return(0,d.jsx)(m.Slot,{...P,ref:t,className:(0,x.cn)(w({size:a,weight:y,align:k}),i),...p,...S,children:b?o:(0,d.jsx)(H,{children:p?null:o})})});r.displayName="Heading";
1
+ "use strict";var u=Object.create;var l=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of R(t))!L.call(e,a)&&a!==o&&l(e,a,{get:()=>t[a],enumerable:!(i=z(t,a))||i.enumerable});return e};var T=(e,t,o)=>(o=e!=null?u(E(e)):{},g(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),V=e=>g(l({},"__esModule",{value:!0}),e);var C={};N(C,{Heading:()=>r});module.exports=V(C);var d=require("react/jsx-runtime"),x=require("../helpers/index.js"),m=require("@radix-ui/react-slot"),c=require("class-variance-authority"),h=T(require("react")),f=require("@payloadcms/richtext-lexical/html");const w=(0,c.cva)("leading-tight tracking-[-0.04em]",{variants:{size:{none:"tracking-[-0.04em]",1:"lg-desktop:text-[16px] text-[14px] leading-[120%]",2:"lg-desktop:text-[24px] text-[20px] leading-[120%]",3:"lg-desktop:text-[32px] text-[24px] leading-[120%]",4:"desktop:text-[40px] lg-desktop:text-[48px] text-[32px] leading-[100%]",5:"desktop:text-[56px] lg-desktop:text-[64px] text-[40px] leading-[100%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),r=h.default.forwardRef((e,t)=>{const{children:o,className:i,size:a="none",align:k,weight:y,asChild:b,as:H="h1",color:s,html:n,...P}=e,p=n?{dangerouslySetInnerHTML:{__html:typeof n=="string"?n:(0,f.convertLexicalToHTML)({data:n})}}:null,S=s?{style:{color:s}}:null;return(0,d.jsx)(m.Slot,{...P,ref:t,className:(0,x.cn)(w({size:a,weight:y,align:k}),i),...p,...S,children:b?o:(0,d.jsx)(H,{children:p?null:o})})});r.displayName="Heading";
2
2
  //# sourceMappingURL=heading.js.map
package/dist/cjs/components/heading.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/heading.tsx"],
4
- "sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight tracking-[-0.04em]', {\n variants: {\n size: {\n none: 'tracking-[-0.04em]',\n 1: 'lg-desktop:text-[16px] text-[14px] leading-[120%]',\n 2: 'lg-desktop:text-[24px] text-[20px] leading-[120%]',\n 3: 'lg-desktop:text-[32px] text-[24px] leading-[120%]',\n 4: 'desktop:text-[36px] lg-desktop:text-[48px] text-[32px] leading-[100%]',\n 5: 'desktop:text-[48px] lg-desktop:text-[64px] text-[40px] leading-[100%]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n asChild?: boolean\n color?: string\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n const {\n children,\n className,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n align,\n weight,\n asChild,\n as: Tag = 'h1',\n color,\n html,\n ...headingProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n return (\n <Slot\n {...headingProps}\n ref={forwardedRef}\n className={cn(\n headingVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
4
+ "sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight tracking-[-0.04em]', {\n variants: {\n size: {\n none: 'tracking-[-0.04em]',\n 1: 'lg-desktop:text-[16px] text-[14px] leading-[120%]',\n 2: 'lg-desktop:text-[24px] text-[20px] leading-[120%]',\n 3: 'lg-desktop:text-[32px] text-[24px] leading-[120%]',\n 4: 'desktop:text-[40px] lg-desktop:text-[48px] text-[32px] leading-[100%]',\n 5: 'desktop:text-[56px] lg-desktop:text-[64px] text-[40px] leading-[100%]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n asChild?: boolean\n color?: string\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n const {\n children,\n className,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n align,\n weight,\n asChild,\n as: Tag = 'h1',\n color,\n html,\n ...headingProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n return (\n <Slot\n {...headingProps}\n ref={forwardedRef}\n className={cn(\n headingVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
5
5
  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuF4B,IAAAI,EAAA,6BAvF5BC,EAAmB,+BACnBC,EAAqB,gCACrBC,EAAuC,oCACvCC,EAAkB,oBAClBC,EAAqC,6CAGrC,MAAMC,KAAkB,OAAI,mCAAoC,CAC9D,SAAU,CACR,KAAM,CACJ,KAAM,qBACN,EAAG,oDACH,EAAG,oDACH,EAAG,oDACH,EAAG,wEACH,EAAG,uEACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAWKR,EAAU,EAAAS,QAAM,WAAyC,CAACC,EAAOC,IAAiB,CACtF,KAAM,CACJ,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,KACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,KAAO,wBAAqB,CAAE,KAAMA,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KACJ,SACE,OAAC,QACE,GAAGE,EACJ,IAAKV,EACL,aAAW,MACTH,EAAgB,CACd,KAAAM,EACA,OAAAE,EACA,MAAAD,CACF,CAAC,EACDF,CACF,EACC,GAAGS,EACH,GAAGC,EAEH,SAAAN,EAAUL,KAAW,OAACM,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EAEDZ,EAAQ,YAAc",
6
6
  "names": ["heading_exports", "__export", "Heading", "__toCommonJS", "import_jsx_runtime", "import_helpers", "import_react_slot", "import_class_variance_authority", "import_react", "import_html", "headingVariants", "React", "props", "forwardedRef", "children", "className", "size", "align", "weight", "asChild", "Tag", "color", "html", "headingProps", "htmlContentProps", "styleProps"]
7
7
  }
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Fragment as T,jsx as a,jsxs as s}from"react/jsx-runtime";import P,{useState as N,useEffect as V,useRef as G}from"react";import{useMediaQuery as _}from"react-responsive";import{withStyles as I}from"../../shared/Styles.js";import L from"../../components/picture.js";import y from"../../components/button.js";import{Heading as $}from"../../components/heading.js";import{Text as S}from"../../components/text.js";import{Grid as R,GridItem as B}from"../../components/gird.js";import A from"../Title/index.js";import{cn as C}from"../../helpers/utils.js";import g from"../SwiperBox/index.js";import{Tabs as D,TabsList as E,TabsTrigger as H,TabsContent as j}from"../../components/tabs.js";import{useExposure as z}from"../../hooks/useEXposure.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{trackUrlRef as Q}from"../../shared/trackUrlRef.js";import{gaTrack as U}from"../../shared/track";const k="image",b="p1_banner",f=({data:m,configuration:r,jIndex:i})=>{const[p,d]=N(!1),l=_({query:"(max-width: 1024px)"}),{trackingData:o}=M(),{profileActivated:w}=o,u=G(null);z(u,{componentType:k,componentName:b,position:i,componentTitle:m.title,componentDescription:m.description,memberActiveStatus:w?"active":"not active",navigation:r?.activeTab}),V(()=>{d(l)},[l]);const{theme:h="light",title:n,description:v,imageUrl:e,primaryButton:t,secondaryButton:c}=m,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return s("div",{className:C("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",r?.isTab?"laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]":"laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]",{"rounded-2xl":r?.shape==="rounded","aiui-dark":h==="dark","h-[480px]":p&&!r?.isTab,"h-[400px]":p&&r?.isTab},"text-info-primary"),ref:u,children:[a(L,{source:e?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),s("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[s("div",{children:[a($,{size:3,className:"item-title",html:n}),a(S,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:v})]}),s("div",{className:"flex gap-[16px]",children:[c&&c.text&&a("a",{href:Q(c.link,`$${k}_$${b}`),children:a(y,{className:x,variant:"secondary",children:c.text})}),t&&t.text&&a("a",{href:t.link,children:a(y,{className:x,variant:"primary",children:t.text})})]})]})]})},q=P.forwardRef((m,r)=>{const{shape:i,sectionTitle:p,groupByTab:d=!1,items:l=[],carousel:o}=m.data,{trackingData:w}=M(),{profileActivated:u}=w,h=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=l.map(e=>e.tabName).filter(Boolean).filter((e,t,c)=>c.indexOf(e)===t),v=n.map(e=>({tabName:e,items:l.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:r,className:"text-info-primary",children:[p&&a(A,{data:{title:p},className:"section-title"}),d?s(D,{shape:i,align:"left",defaultValue:n[0],children:[a(E,{children:n.map((e,t)=>a(H,{value:e,onClick:()=>{U({event:"ga4Event",event_name:"component_click",member_active_status:u?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:k,component_name:b,component_title:p,component_position:1,navigation:e}})},children:e},t))}),n.map((e,t)=>a(j,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(T,{children:[a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:v?.[e]||[],configuration:{shape:i,isTab:d,activeTab:e}},Slide:f,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3}}}),o&&o?.items.length>0?a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:o?.items||[],configuration:{shape:i,isTab:d}},Slide:f,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},t))]}):s(T,{children:[s(R,{className:"w-full",children:[l.map((e,t)=>a(B,{span:h(e.width??"full"),className:"laptop:block hidden",children:a(f,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`)),l.map((e,t)=>a(B,{span:h("full"),className:"laptop:hidden block",children:a(f,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`))]}),o&&o?.items.length>0?a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:o?.items||[],configuration:{shape:i}},Slide:f,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var pe=I(q);export{pe as default};
1
+ import{Fragment as P,jsx as a,jsxs as s}from"react/jsx-runtime";import N,{useState as V,useEffect as _,useRef as $}from"react";import{useMediaQuery as G}from"react-responsive";import{withStyles as I}from"../../shared/Styles.js";import L from"../../components/picture.js";import y from"../../components/button.js";import{Heading as S}from"../../components/heading.js";import{Text as R}from"../../components/text.js";import{Grid as A,GridItem as B}from"../../components/gird.js";import C from"../Title/index.js";import{cn as D}from"../../helpers/utils.js";import b from"../SwiperBox/index.js";import{Tabs as E,TabsList as H,TabsTrigger as j,TabsContent as z}from"../../components/tabs.js";import{useExposure as Q}from"../../hooks/useEXposure.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{gaTrack as U}from"../../shared/track";const w="image",v="p1_banner",f=({data:m,configuration:r,jIndex:i})=>{const[p,d]=V(!1),l=G({query:"(max-width: 1024px)"}),{trackingData:o}=M(),{profileActivated:g}=o,u=$(null);Q(u,{componentType:w,componentName:v,position:i,componentTitle:m.title,componentDescription:m.description,memberActiveStatus:g?"active":"not active",navigation:r?.activeTab}),_(()=>{d(l)},[l]);const{theme:h="light",title:n,description:k,imageUrl:e,primaryButton:t,secondaryButton:c}=m,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return s("div",{className:D("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",r?.isTab?"laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]":"laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]",{"rounded-2xl":r?.shape==="rounded","aiui-dark":h==="dark","h-[480px]":p&&!r?.isTab,"h-[400px]":p&&r?.isTab},"text-info-primary"),ref:u,children:[a(L,{source:e?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),s("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[s("div",{children:[a(S,{size:3,className:"item-title",html:n}),a(R,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:k})]}),s("div",{className:"flex gap-[16px]",children:[c&&c.text&&a("a",{href:T(c.link,`$${w}_$${v}`),children:a(y,{className:x,variant:"secondary",children:c.text})}),t&&t.text&&a("a",{href:T(t.link,`$${w}_$${v}`),children:a(y,{className:x,variant:"primary",children:t.text})})]})]})]})},q=N.forwardRef((m,r)=>{const{shape:i,sectionTitle:p,groupByTab:d=!1,items:l=[],carousel:o}=m.data,{trackingData:g}=M(),{profileActivated:u}=g,h=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=l.map(e=>e.tabName).filter(Boolean).filter((e,t,c)=>c.indexOf(e)===t),k=n.map(e=>({tabName:e,items:l.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:r,className:"text-info-primary",children:[p&&a(C,{data:{title:p},className:"section-title"}),d?s(E,{shape:i,align:"left",defaultValue:n[0],children:[a(H,{children:n.map((e,t)=>a(j,{value:e,onClick:()=>{U({event:"ga4Event",event_name:"component_click",member_active_status:u?"active":"not active",event_parameters:{page_group:"Activity Page_Home Page",component_type:w,component_name:v,component_title:p,component_position:1,navigation:e}})},children:e},t))}),n.map((e,t)=>a(z,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(P,{children:[a(b,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:k?.[e]||[],configuration:{shape:i,isTab:d,activeTab:e}},Slide:f,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3}}}),o&&o?.items.length>0?a(b,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:o?.items||[],configuration:{shape:i,isTab:d}},Slide:f,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},t))]}):s(P,{children:[s(A,{className:"w-full",children:[l.map((e,t)=>a(B,{span:h(e.width??"full"),className:"laptop:block hidden",children:a(f,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`)),l.map((e,t)=>a(B,{span:h("full"),className:"laptop:hidden block",children:a(f,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`))]}),o&&o?.items.length>0?a(b,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:o?.items||[],configuration:{shape:i}},Slide:f,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var pe=I(q);export{pe as default};
2
2
  //# sourceMappingURL=MultiLayoutGraphicBlock.js.map
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
4
- "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\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 { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useEXposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? 'laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n : 'laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\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 size={3} className=\"item-title\" html={title} />\n <Text size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `$${componentType}_$${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\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 const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\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=\"text-info-primary\">\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\n key={index}\n value={tabName!}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n },\n })\n }}\n >\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 <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: { shape: shape, isTab: groupByTab, activeTab: tabName },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\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\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\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 { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useEXposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? 'laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n : 'laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 tablet:group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\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 size={3} className=\"item-title\" html={title} />\n <Text size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `$${componentType}_$${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `$${componentType}_$${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\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 const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\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=\"text-info-primary\">\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\n key={index}\n value={tabName!}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n member_active_status: profileActivated ? 'active' : 'not active',\n event_parameters: {\n page_group: 'Activity Page_Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n },\n })\n }}\n >\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 <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: { shape: shape, isTab: groupByTab, activeTab: tabName },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\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\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Grid", "GridItem", "Title", "cn", "SwiperBox", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "useAiuiContext", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "trackingData", "profileActivated", "ref", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
7
7
  }
package/dist/esm/components/heading.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as n}from"react/jsx-runtime";import{cn as f}from"../helpers/index.js";import{Slot as k}from"@radix-ui/react-slot";import{cva as y}from"class-variance-authority";import b from"react";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";const P=y("leading-tight tracking-[-0.04em]",{variants:{size:{none:"tracking-[-0.04em]",1:"lg-desktop:text-[16px] text-[14px] leading-[120%]",2:"lg-desktop:text-[24px] text-[20px] leading-[120%]",3:"lg-desktop:text-[32px] text-[24px] leading-[120%]",4:"desktop:text-[36px] lg-desktop:text-[48px] text-[32px] leading-[100%]",5:"desktop:text-[48px] lg-desktop:text-[64px] text-[40px] leading-[100%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),i=b.forwardRef((l,r)=>{const{children:t,className:d,size:s="none",align:p,weight:g,asChild:x,as:m="h1",color:o,html:e,...c}=l,a=e?{dangerouslySetInnerHTML:{__html:typeof e=="string"?e:H({data:e})}}:null,h=o?{style:{color:o}}:null;return n(k,{...c,ref:r,className:f(P({size:s,weight:g,align:p}),d),...a,...h,children:x?t:n(m,{children:a?null:t})})});i.displayName="Heading";export{i as Heading};
1
+ import{jsx as n}from"react/jsx-runtime";import{cn as f}from"../helpers/index.js";import{Slot as k}from"@radix-ui/react-slot";import{cva as y}from"class-variance-authority";import b from"react";import{convertLexicalToHTML as H}from"@payloadcms/richtext-lexical/html";const P=y("leading-tight tracking-[-0.04em]",{variants:{size:{none:"tracking-[-0.04em]",1:"lg-desktop:text-[16px] text-[14px] leading-[120%]",2:"lg-desktop:text-[24px] text-[20px] leading-[120%]",3:"lg-desktop:text-[32px] text-[24px] leading-[120%]",4:"desktop:text-[40px] lg-desktop:text-[48px] text-[32px] leading-[100%]",5:"desktop:text-[56px] lg-desktop:text-[64px] text-[40px] leading-[100%]"},weight:{medium:"font-medium",semibold:"font-semibold",bold:"font-bold",extraBold:"font-extrabold",black:"font-black"},align:{left:"text-left",center:"text-center",right:"text-right"}},defaultVariants:{size:"none",weight:"bold"}}),i=b.forwardRef((l,r)=>{const{children:t,className:d,size:s="none",align:p,weight:g,asChild:x,as:m="h1",color:o,html:e,...c}=l,a=e?{dangerouslySetInnerHTML:{__html:typeof e=="string"?e:H({data:e})}}:null,h=o?{style:{color:o}}:null;return n(k,{...c,ref:r,className:f(P({size:s,weight:g,align:p}),d),...a,...h,children:x?t:n(m,{children:a?null:t})})});i.displayName="Heading";export{i as Heading};
2
2
  //# sourceMappingURL=heading.js.map
package/dist/esm/components/heading.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/heading.tsx"],
4
- "sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight tracking-[-0.04em]', {\n variants: {\n size: {\n none: 'tracking-[-0.04em]',\n 1: 'lg-desktop:text-[16px] text-[14px] leading-[120%]',\n 2: 'lg-desktop:text-[24px] text-[20px] leading-[120%]',\n 3: 'lg-desktop:text-[32px] text-[24px] leading-[120%]',\n 4: 'desktop:text-[36px] lg-desktop:text-[48px] text-[32px] leading-[100%]',\n 5: 'desktop:text-[48px] lg-desktop:text-[64px] text-[40px] leading-[100%]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n asChild?: boolean\n color?: string\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n const {\n children,\n className,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n align,\n weight,\n asChild,\n as: Tag = 'h1',\n color,\n html,\n ...headingProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n return (\n <Slot\n {...headingProps}\n ref={forwardedRef}\n className={cn(\n headingVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
4
+ "sourcesContent": ["import { cn } from '../helpers/index.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { SerializedEditorState, SerializedLexicalNode } from 'lexical'\n\nconst headingVariants = cva('leading-tight tracking-[-0.04em]', {\n variants: {\n size: {\n none: 'tracking-[-0.04em]',\n 1: 'lg-desktop:text-[16px] text-[14px] leading-[120%]',\n 2: 'lg-desktop:text-[24px] text-[20px] leading-[120%]',\n 3: 'lg-desktop:text-[32px] text-[24px] leading-[120%]',\n 4: 'desktop:text-[40px] lg-desktop:text-[48px] text-[32px] leading-[100%]',\n 5: 'desktop:text-[56px] lg-desktop:text-[64px] text-[40px] leading-[100%]',\n },\n weight: {\n medium: 'font-medium',\n semibold: 'font-semibold',\n bold: 'font-bold',\n extraBold: 'font-extrabold',\n black: 'font-black',\n },\n align: {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n },\n },\n defaultVariants: {\n size: 'none',\n weight: 'bold',\n },\n})\n\ntype HeadingElement = React.ElementRef<'h1'>\n\ninterface HeadingProps extends React.ComponentPropsWithoutRef<'h1'>, VariantProps<typeof headingVariants> {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n asChild?: boolean\n color?: string\n html?: string | SerializedEditorState<SerializedLexicalNode>\n}\n\nconst Heading = React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {\n const {\n children,\n className,\n size = 'none', // \u4E3A\u4E86\u517C\u5BB9\u65E7\u7248\u672C\u6837\u5F0F\uFF0C\u9ED8\u8BA4\u503C\u4E3A none\uFF0C\u6CA1\u6709\u9ED8\u8BA4\u7684\u5B57\u4F53\u5927\u5C0F\n align,\n weight,\n asChild,\n as: Tag = 'h1',\n color,\n html,\n ...headingProps\n } = props\n\n const htmlContentProps = html\n ? {\n dangerouslySetInnerHTML: { __html: typeof html === 'string' ? html : convertLexicalToHTML({ data: html }) },\n }\n : null\n\n const styleProps = color\n ? {\n style: {\n color,\n },\n }\n : null\n return (\n <Slot\n {...headingProps}\n ref={forwardedRef}\n className={cn(\n headingVariants({\n size,\n weight,\n align,\n }),\n className\n )}\n {...htmlContentProps}\n {...styleProps}\n >\n {asChild ? children : <Tag>{htmlContentProps ? null : children}</Tag>}\n </Slot>\n )\n})\n\nHeading.displayName = 'Heading'\n\nexport { Heading }\nexport type { HeadingProps }\n"],
5
5
  "mappings": "AAuF4B,cAAAA,MAAA,oBAvF5B,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAW,QAClB,OAAS,wBAAAC,MAA4B,oCAGrC,MAAMC,EAAkBH,EAAI,mCAAoC,CAC9D,SAAU,CACR,KAAM,CACJ,KAAM,qBACN,EAAG,oDACH,EAAG,oDACH,EAAG,oDACH,EAAG,wEACH,EAAG,uEACL,EACA,OAAQ,CACN,OAAQ,cACR,SAAU,gBACV,KAAM,YACN,UAAW,iBACX,MAAO,YACT,EACA,MAAO,CACL,KAAM,YACN,OAAQ,cACR,MAAO,YACT,CACF,EACA,gBAAiB,CACf,KAAM,OACN,OAAQ,MACV,CACF,CAAC,EAWKI,EAAUH,EAAM,WAAyC,CAACI,EAAOC,IAAiB,CACtF,KAAM,CACJ,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,OACP,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,GAAIC,EAAM,KACV,MAAAC,EACA,KAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAmBF,EACrB,CACE,wBAAyB,CAAE,OAAQ,OAAOA,GAAS,SAAWA,EAAOb,EAAqB,CAAE,KAAMa,CAAK,CAAC,CAAE,CAC5G,EACA,KAEEG,EAAaJ,EACf,CACE,MAAO,CACL,MAAAA,CACF,CACF,EACA,KACJ,OACEjB,EAACE,EAAA,CACE,GAAGiB,EACJ,IAAKV,EACL,UAAWR,EACTK,EAAgB,CACd,KAAAM,EACA,OAAAE,EACA,MAAAD,CACF,CAAC,EACDF,CACF,EACC,GAAGS,EACH,GAAGC,EAEH,SAAAN,EAAUL,EAAWV,EAACgB,EAAA,CAAK,SAAAI,EAAmB,KAAOV,EAAS,EACjE,CAEJ,CAAC,EAEDH,EAAQ,YAAc",
6
6
  "names": ["jsx", "cn", "Slot", "cva", "React", "convertLexicalToHTML", "headingVariants", "Heading", "props", "forwardedRef", "children", "className", "size", "align", "weight", "asChild", "Tag", "color", "html", "headingProps", "htmlContentProps", "styleProps"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.27-alpha.130",
3
+ "version": "0.0.27-alpha.131",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/style.css CHANGED
@@ -1876,11 +1876,11 @@ video {
1876
1876
  .desktop\:pt-\[112px\] {
1877
1877
  padding-top: 112px;
1878
1878
  }
1879
- .desktop\:text-\[36px\] {
1880
- font-size: 36px;
1879
+ .desktop\:text-\[40px\] {
1880
+ font-size: 40px;
1881
1881
  }
1882
- .desktop\:text-\[48px\] {
1883
- font-size: 48px;
1882
+ .desktop\:text-\[56px\] {
1883
+ font-size: 56px;
1884
1884
  }
1885
1885
  }
1886
1886
  @media (min-width: 1921px) {