@anker-in/headless-ui 0.0.29-alpha.7 → 0.0.30
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.
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +3 -5
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +2 -2
- package/dist/cjs/components/container.js +1 -1
- package/dist/cjs/components/container.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +2 -4
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +2 -2
- package/dist/esm/components/container.js +1 -1
- package/dist/esm/components/container.js.map +2 -2
- package/package.json +1 -1
- package/style.css +6 -3
|
@@ -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 { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\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: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = 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 ? handleAspect()\n : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[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 <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\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={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\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 </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 handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\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 event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: 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: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\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: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\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": "AAuEQ,OAkHM,YAAAA,EAlHN,OAAAC,EAYE,QAAAC,MAZF,oBAvER,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAe,wBACtB,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,EAAa,eAAAC,MAAmB,2BACzD,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,WAAAC,MAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CAAE,KAAMC,EAAM,cAAAC,EAAe,OAAAC,CAAO,IAA4D,CACjH,KAAM,CAACC,EAAUC,CAAW,EAAI5B,EAAS,EAAK,EACxC6B,EAAa1B,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1D2B,EAAM5B,EAAuB,IAAI,EAEjC6B,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,EAEAP,EAAYY,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAEDxB,EAAU,IAAM,CACd2B,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CAAE,MAAAG,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,EAAiB,eAAAC,CAAe,EAAId,EACpGe,EAAe,mFAErB,OACE1C,EAAC,OACC,UAAWe,EACT,kFACAa,GAAe,MACXM,EAAa,EACb,4LACJ,CACE,cAAeN,GAAe,QAAU,UACxC,YAAaO,IAAU,OACvB,YAAaL,GAAY,CAACF,GAAe,MACzC,YAAaE,GAAYF,GAAe,KAC1C,EACA,mBACF,EACA,IAAKK,EAEL,SAAAhC,EAAC,OAAI,UAAU,mBACb,UAAAD,EAACQ,EAAA,CACC,OAAQ8B,GAAU,IAClB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EACAtC,EAACQ,EAAA,CACC,OAAQiC,GAAgB,KAAOH,GAAU,IACzC,UAAU,6CACV,aAAa,kDACf,EACArC,EAAC,OAAI,UAAU,
|
|
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 { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\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: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = 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 ? handleAspect()\n : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[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 <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 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={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\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 </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 handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\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 event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: 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: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\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: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\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", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
|
|
7
7
|
}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
"use client";import{Fragment as X,jsx as t,jsxs as c}from"react/jsx-runtime";import _,{useState as S,useEffect as M,useRef as E,useImperativeHandle as H}from"react";import{cn as m}from"../../helpers/utils.js";import V from"../../components/picture.js";import q from"./tabSwitch.js";import T from"../../components/button.js";import R from"../Title/index.js";import $ from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as A}from"./shelfDisplay.js";import{useMediaQuery as L}from"react-responsive";import{useExposure as O}from"../../hooks/useExposure.js";import{gaTrack as U}from"../../shared/track.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import F from"../../components/badge.js";import{Heading as Q}from"../../components/heading.js";import{Text as W}from"../../components/text.js";const B="image",N="product_shelf",G=999999999e-2,J=({data:e,configuration:r})=>{const{locale:d="us",copyWriting:u}=j(),f=(i,n)=>r?.event?.primaryButton?.(i,n+1),v=(i,n)=>r?.event?.secondaryButton?.(i,n+1),o=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},s=!o?.availableForSale&&o?.price?.amount===G,{price:
|
|
2
|
-
laptop:text-sm desktop:text-base text-xs
|
|
1
|
+
"use client";import{Fragment as X,jsx as t,jsxs as c}from"react/jsx-runtime";import _,{useState as S,useEffect as M,useRef as E,useImperativeHandle as H}from"react";import{cn as m}from"../../helpers/utils.js";import V from"../../components/picture.js";import q from"./tabSwitch.js";import T from"../../components/button.js";import R from"../Title/index.js";import $ from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as A}from"./shelfDisplay.js";import{useMediaQuery as L}from"react-responsive";import{useExposure as O}from"../../hooks/useExposure.js";import{gaTrack as U}from"../../shared/track.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import F from"../../components/badge.js";import{Heading as Q}from"../../components/heading.js";import{Text as W}from"../../components/text.js";const B="image",N="product_shelf",G=999999999e-2,J=({data:e,configuration:r})=>{const{locale:d="us",copyWriting:u}=j(),f=(i,n)=>r?.event?.primaryButton?.(i,n+1),v=(i,n)=>r?.event?.secondaryButton?.(i,n+1),o=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},s=!o?.availableForSale&&o?.price?.amount===G,{price:y,basePrice:h}=A({locale:d,amount:o?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const i=e?.sku,n=e?.variants;return n?.find(l=>l?.sku===i)?.image?.url||n?.[0]?.image?.url||""};return c("div",{className:m("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:m("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(V,{source:b(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,n)=>t(F,{children:i},n))}),t(Q,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),t(W,{size:2,className:"shelf-display-product-description line-clamp-1 h-[20px]",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:s?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u?.soldOutText}):c(X,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:y||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:h||""})]})}),c("div",{className:m("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[t(T,{variant:"primary",onClick:()=>f(e,r?.index),className:`
|
|
3
2
|
${r.direction==="vertical"?"w-full":""}
|
|
4
3
|
`,children:r?.primaryButton||""}),t(T,{variant:"secondary",onClick:()=>v(e,r?.index),className:`
|
|
5
|
-
laptop:text-sm desktop:text-base text-xs
|
|
6
4
|
${r.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},K=_.forwardRef(({data:e,buildData:r,className:d="",key:u,event:f},v)=>{const[o,s]=S(""),[
|
|
5
|
+
`,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},K=_.forwardRef(({data:e,buildData:r,className:d="",key:u,event:f},v)=>{const[o,s]=S(""),[y,h]=S([]),b=L({query:"(max-width: 768px)"}),i=E(null);H(v,()=>i.current),O(i,{componentType:B,componentName:N,componentTitle:e?.title,navigation:o});const{productsTab:n=[],productsCard:g=[],title:l,align:Y="left",isShowTab:k=!0,tabShape:D="square",...P}=e,x=a=>{const I=a?.map(p=>{const w=r?.products?.find(C=>C?.handle===p?.handle);if(w)return{sku:p.sku,...w}})?.filter(p=>p);h(I)};return M(()=>{if(k){s(n?.[0]?.tab||""),x(n?.[0]?.data||[]);return}x(g)},[]),c("div",{ref:i,className:m("w-full",d,{"aiui-dark":e?.theme==="dark"}),children:[l&&t(R,{data:{title:l}}),k&&t("div",{className:`${b?"w-full overflow-hidden":""}`,children:t(q,{value:o,tabs:n,tabShape:D,onTabClick:a=>{s(a?.tab),x(a?.data||[]),U({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:B,component_name:N,component_title:e?.title,component_position:1,navigation:a?.tab}})}})}),t("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:t($,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${u}${o}`,data:{list:y,configuration:{...P,event:f}},Slide:J,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},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var ve=z(K);export{ve as default};
|
|
8
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text size={2} className=\"shelf-display-product-description line-clamp-1 h-[20px]\">\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n
|
|
5
|
-
"mappings": "aAkHQ,OAqBE,YAAAA,EArBF,OAAAC,EAqBE,QAAAC,MArBF,oBAjHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QACxE,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,iBACtB,OAAOC,MAAY,6BACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,sBAAAC,MAA0B,oBACnC,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,WAAAC,MAAe,wBACxB,OAAS,kBAAAC,MAAsB,2BAC/B,OAAOC,MAAW,4BAClB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BAErB,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAiB,aAyDjBC,EAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,EAAIX,EAAe,EAEhDY,EAAkB,CAACC,EAA0BC,IACjDL,GAAe,OAAO,gBAAgBI,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDL,GAAe,OAAO,kBAAkBI,EAAQC,EAAQ,CAAC,EAErDE,EAAUR,GAAM,UAAU,KAAMS,GAAcA,GAAM,MAAQT,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGU,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWV,EAErE,CAAE,MAAAa,EAAO,UAAAC,CAAU,EAAIxB,EAAmB,CAC9C,OAAQc,EACR,OAAQM,GAAS,OAAO,QAAU,EAClC,WAAYR,GAAM,gBAAgB,QAAUA,GAAM,OAAO,QAAU,EACnE,aAAcA,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKa,EAAY,IAAM,CACtB,MAAMC,EAAMd,GAAM,IACZe,EAAWf,GAAM,SAEvB,OADgBe,GAAU,KAAMN,GAAcA,GAAM,MAAQK,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,OACExC,EAAC,OAEC,UAAWM,EACT,2JACAoB,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,UAAA3B,EAAC,OAAI,UAAWO,EAAG,2FAA2F,EAC5G,SAAAP,EAACQ,EAAA,CAAQ,OAAQ+B,EAAU,EAAG,UAAU,yDAAyD,EACnG,EACAvC,EAAC,OAAI,UAAU,2DACZ,SAAA0B,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACS,EAAWH,IACnChC,EAACmB,EAAA,CAAmB,SAAAgB,GAARH,CAAa,CACjC,EACH,EACAhC,EAACoB,EAAA,CACC,MAAOM,GAAM,OAAS,GACtB,KAAM,EACN,UAAU,6EAET,SAAAA,GAAM,OAAS,GAClB,EACA1B,EAACqB,EAAA,CAAK,KAAM,EAAG,UAAU,0DACtB,SAAAK,GAAM,aAAe,GACxB,EACA1B,EAAC,OAAI,UAAU,mCACZ,SAAAoC,EACCpC,EAAC,OAAI,UAAU,sDAAuD,SAAA6B,GAAa,YAAY,EAE/F5B,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAU,sDAAuD,SAAAqC,GAAS,GAAG,EAClFrC,EAAC,OAAI,UAAU,6DAA8D,SAAAsC,GAAa,GAAG,GAC/F,EAEJ,EAEArC,EAAC,OACC,UAAWM,EACT,2CACAoB,EAAc,YAAc,WAAa,WAAa,EACxD,EAEA,UAAA3B,EAACU,EAAA,CACC,QAAQ,UACR,QAAS,IAAMoB,EAAgBJ,EAAMC,GAAe,KAAK,EACzD,UAAW;AAAA
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n <Text size={2} className=\"shelf-display-product-description line-clamp-1 h-[20px]\">\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\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 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i}from"react/jsx-runtime";import"react";import{cva as o}from"class-variance-authority";import{cn as n}from"../helpers/index.js";const a=o("text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight"}},defaultVariants:{size:"lg"}});function r({className:t,size:e,...p}){return i("div",{className:n(a({size:e}),t),...p})}var l=r;export{l as default};
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import"react";import{cva as o}from"class-variance-authority";import{cn as n}from"../helpers/index.js";const a=o("text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight"}},defaultVariants:{size:"lg"}});function r({className:t,size:e,...p}){return i("div",{className:n(a({size:e}),t),...p})}var l=r;export{l as default};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
-
"mappings": "AAuBS,cAAAA,MAAA,oBAvBT,MAAuB,QACvB,OAA4B,OAAAC,MAAW,2BAEvC,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAAgBF,EACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
+
"mappings": "AAuBS,cAAAA,MAAA,oBAvBT,MAAuB,QACvB,OAA4B,OAAAC,MAAW,2BAEvC,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAAgBF,EACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,gEACJ,GAAI,sKACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIA,SAASG,EAAM,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAe,CACxD,OAAOP,EAAC,OAAI,UAAWE,EAAGC,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC5E,CAEA,IAAOC,EAAQJ",
|
|
6
6
|
"names": ["jsx", "cva", "cn", "badgeVariants", "Badge", "className", "size", "props", "badge_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as g,jsx as t}from"react/jsx-runtime";import m from"react";import{cn as l}from"../helpers/utils.js";import{Slot as R}from"@radix-ui/react-slot";const b=({children:e})=>t(g,{children:e}),u=m.forwardRef(({...e},p)=>{const{asChild:n,children:a,className:s,spaceY:o="none",spaceTop:c="none",spaceBottom:r="none",...d}=e,x=n?R:"div",f={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},C={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},y={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return t(x,{...d,ref:p,className:l(s,"ipc_container","relative z-10 w-full"),children:t("div",{className:l(s,"lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",f?.[o]||o,C?.[c]||c,y?.[r]||r),children:a})})}),i=m.forwardRef(({...e},p)=>{const{children:n,mode:a="section"}=e,o={section:u,fragment:b}[a];return t(o,{...e,ref:p,children:n})});i.displayName="Container";export{i as Container};
|
|
2
2
|
//# sourceMappingURL=container.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/container.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'none',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n <div\n className={cn(\n className,\n '
|
|
5
|
-
"mappings": "AAiBS,mBAAAA,EAAA,OAAAC,MAAA,oBAjBT,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAcrB,MAAMJ,EAAW,CAAC,CAAE,SAAAK,CAAS,IACpBJ,EAAAD,EAAA,CAAG,SAAAK,EAAS,EAGfC,EAAUJ,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAJ,EACA,UAAAK,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAUL,EAAO,MAExBY,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,OACEjB,EAACc,EAAA,CAAM,GAAGD,EAAgB,IAAKN,EAAc,UAAWL,EAAGO,EAAW,gBAAiB,sBAAsB,EAC3G,SAAAT,EAAC,OACC,UAAWE,EACTO,EACA,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n asChild?: boolean\n children?: React.ReactNode\n className?: string\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const {\n asChild,\n children,\n className,\n spaceY = 'none',\n spaceTop = 'none',\n spaceBottom = 'none',\n ...containerProps\n } = props\n\n const Comp = asChild ? Slot : 'div'\n\n const spaceY_map: any = {\n default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n none: '',\n }\n\n const spaceTop_map: any = {\n default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n none: '',\n }\n\n const spaceBottom_map: any = {\n default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n none: '',\n }\n\n return (\n <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n <div\n className={cn(\n className,\n 'lg-desktop:max-w-full mx-auto w-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n spaceY_map?.[spaceY] || spaceY,\n spaceTop_map?.[spaceTop] || spaceTop,\n spaceBottom_map?.[spaceBottom] || spaceBottom\n )}\n >\n {children}\n </div>\n </Comp>\n )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n const { children, mode = 'section' } = props\n\n const componentsMap: {\n [P in Mode]: React.ComponentType<any> | string\n } = {\n section: Section,\n fragment: Fragment,\n }\n\n const Component = componentsMap![mode!]\n\n return (\n <Component {...props} ref={forwardedRef}>\n {children}\n </Component>\n )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
|
|
5
|
+
"mappings": "AAiBS,mBAAAA,EAAA,OAAAC,MAAA,oBAjBT,OAAOC,MAAW,QAClB,OAAS,MAAAC,MAAU,sBACnB,OAAS,QAAAC,MAAY,uBAcrB,MAAMJ,EAAW,CAAC,CAAE,SAAAK,CAAS,IACpBJ,EAAAD,EAAA,CAAG,SAAAK,EAAS,EAGfC,EAAUJ,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAJ,EACA,UAAAK,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAUL,EAAO,MAExBY,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,OACEjB,EAACc,EAAA,CAAM,GAAGD,EAAgB,IAAKN,EAAc,UAAWL,EAAGO,EAAW,gBAAiB,sBAAsB,EAC3G,SAAAT,EAAC,OACC,UAAWE,EACTO,EACA,uCACA,8EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAR,EACH,EACF,CAEJ,CAAC,EAEKc,EAAYjB,EAAM,WAA6C,CAAC,CAAE,GAAGK,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAH,EAAU,KAAAe,EAAO,SAAU,EAAIb,EASjCc,EALF,CACF,QAASf,EACT,SAAUN,CACZ,EAEiCoB,CAAK,EAEtC,OACEnB,EAACoB,EAAA,CAAW,GAAGd,EAAO,IAAKC,EACxB,SAAAH,EACH,CAEJ,CAAC,EAEDc,EAAU,YAAc",
|
|
6
6
|
"names": ["Fragment", "jsx", "React", "cn", "Slot", "children", "Section", "props", "forwardedRef", "asChild", "className", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "Container", "mode", "Component"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -748,6 +748,9 @@ video {
|
|
|
748
748
|
.h-8 {
|
|
749
749
|
height: 2rem;
|
|
750
750
|
}
|
|
751
|
+
.h-\[24px\] {
|
|
752
|
+
height: 24px;
|
|
753
|
+
}
|
|
751
754
|
.h-\[3px\] {
|
|
752
755
|
height: 3px;
|
|
753
756
|
}
|
|
@@ -1854,9 +1857,6 @@ video {
|
|
|
1854
1857
|
margin-top: 112px;
|
|
1855
1858
|
margin-bottom: 112px;
|
|
1856
1859
|
}
|
|
1857
|
-
.desktop\:max-w-\[1792px\] {
|
|
1858
|
-
max-width: 1792px;
|
|
1859
|
-
}
|
|
1860
1860
|
.desktop\:px-16 {
|
|
1861
1861
|
padding-left: 4rem;
|
|
1862
1862
|
padding-right: 4rem;
|
|
@@ -1882,6 +1882,9 @@ video {
|
|
|
1882
1882
|
margin-top: 128px;
|
|
1883
1883
|
margin-bottom: 128px;
|
|
1884
1884
|
}
|
|
1885
|
+
.lg-desktop\:h-\[28px\] {
|
|
1886
|
+
height: 28px;
|
|
1887
|
+
}
|
|
1885
1888
|
.lg-desktop\:max-w-full {
|
|
1886
1889
|
max-width: 100%;
|
|
1887
1890
|
}
|