@anker-in/headless-ui 1.1.9-alpha.1765274523036 → 1.1.9-alpha.1765352011951

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 (29) hide show
  1. package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
  2. package/dist/cjs/biz-components/BrandEquity/BrandEquity.js.map +2 -2
  3. package/dist/cjs/biz-components/FeatureCards/FeatureCards.js +1 -1
  4. package/dist/cjs/biz-components/FeatureCards/FeatureCards.js.map +2 -2
  5. package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +1 -1
  6. package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
  7. package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
  8. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  9. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
  10. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
  11. package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
  12. package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
  13. package/dist/cjs/components/container.js +1 -1
  14. package/dist/cjs/components/container.js.map +2 -2
  15. package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
  16. package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map +2 -2
  17. package/dist/esm/biz-components/FeatureCards/FeatureCards.js +1 -1
  18. package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map +2 -2
  19. package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +1 -1
  20. package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
  21. package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
  22. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  23. package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +5 -5
  24. package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
  25. package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
  26. package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
  27. package/dist/esm/components/container.js +1 -1
  28. package/dist/esm/components/container.js.map +2 -2
  29. package/package.json +1 -1
package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
4
- "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 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=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 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=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
- "mappings": "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",
6
- "names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "getProductImage", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_shelfDisplay", "import_picture", "import_badge", "import_utils", "import_text", "import_button", "import_track", "import_trackUrlRef", "import_heading", "import_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
4
+ "sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 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=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.primaryButton?.(params, index + 1, data, coupon)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType, coupon: any) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data, coupon)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount, discountAmount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n const showPrice = () => {\n if (coupon?.value_type === 'fixed_amount') {\n const amountStr = discountAmount || ''\n const match = amountStr.match(/^(.*?)(\\d[\\d.,]*)(.*)$/)\n if (match) {\n const [, prefix, numeric, suffix] = match\n let updatedNumeric = numeric\n if (numeric.endsWith('.00')) {\n updatedNumeric = numeric.replace(/\\.00$/, '')\n } else if (numeric.endsWith(',00')) {\n updatedNumeric = numeric.replace(/,00$/, '')\n }\n return `${prefix}${updatedNumeric}${suffix}`\n }\n return amountStr\n }\n return discount || ''\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount || discountAmount) {\n const discountTag = `${showPrice()}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discountAmount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 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=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration, coupon)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
5
+ "mappings": "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",
6
+ "names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "getProductImage", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_shelfDisplay", "import_picture", "import_badge", "import_utils", "import_text", "import_button", "import_track", "import_trackUrlRef", "import_heading", "import_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "coupon", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "discountAmount", "displayTitle", "displayDescription", "showPrice", "amountStr", "match", "prefix", "numeric", "suffix", "updatedNumeric", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
7
7
  }
package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var k=Object.create;var p=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(o,r)=>{for(var s in r)p(o,s,{get:r[s],enumerable:!0})},x=(o,r,s,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of y(r))!T.call(o,a)&&a!==s&&p(o,a,{get:()=>r[a],enumerable:!(d=N(r,a))||d.enumerable});return o};var L=(o,r,s)=>(s=o!=null?k(S(o)):{},x(r||!o||!o.__esModule?p(s,"default",{value:o,enumerable:!0}):s,o)),E=o=>x(p({},"__esModule",{value:!0}),o);var R={};C(R,{default:()=>P});module.exports=E(R);var e=require("react/jsx-runtime"),i=L(require("react")),l=require("../../components/index.js"),n=require("../../helpers/utils.js"),_=require("../../shared/Styles.js"),g=require("../../hooks/useExposure.js"),c=require("swiper/react"),u=require("swiper/modules"),M=require("swiper/css"),U=require("swiper/css/navigation"),I=require("swiper/css/pagination"),O=require("swiper/css/effect-coverflow");const z="carousel",D="three_d_carousel",j=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),B=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),b=i.default.forwardRef(({data:o,className:r},s)=>{const{title:d,items:a=[]}=o,w=a.length<4?[...a,...a]:a,h=(0,i.useRef)(null),f=(0,i.useRef)(null);return(0,g.useExposure)(f,{componentType:z,componentName:D,componentTitle:d}),(0,i.useImperativeHandle)(s,()=>f.current),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"ThreeDCarousel",className:(0,n.cn)("three-d-carousel laptop:overflow-hidden w-full overflow-visible",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4",children:[(0,e.jsx)(c.Swiper,{onSwiper:t=>h.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[u.EffectCoverflow,u.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}}},children:w.map((t,m)=>(0,e.jsx)(c.SwiperSlide,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:v})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,n.cn)("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden"),imgClassName:"h-full object-cover",style:{filter:v?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:(0,n.cn)("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!v}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},m))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>h.current?.slidePrev(),"aria-label":"Previous slide",children:(0,e.jsx)(j,{})}),(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>h.current?.slideNext(),"aria-label":"Next slide",children:(0,e.jsx)(B,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:(0,e.jsx)(c.Swiper,{loop:!0,loopAdditionalSlides:1,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:w.map((t,m)=>(0,e.jsxs)(c.SwiperSlide,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[(0,e.jsx)(l.Picture,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:(0,n.cn)("three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-mobile-button mt-3",children:t.buttonText})})]})]},m))})})]})});b.displayName="ThreeDCarousel";var P=(0,_.withLayout)(b);
1
+ "use strict";"use client";var k=Object.create;var p=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(o,r)=>{for(var s in r)p(o,s,{get:r[s],enumerable:!0})},x=(o,r,s,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of y(r))!T.call(o,a)&&a!==s&&p(o,a,{get:()=>r[a],enumerable:!(d=N(r,a))||d.enumerable});return o};var L=(o,r,s)=>(s=o!=null?k(S(o)):{},x(r||!o||!o.__esModule?p(s,"default",{value:o,enumerable:!0}):s,o)),E=o=>x(p({},"__esModule",{value:!0}),o);var R={};C(R,{default:()=>P});module.exports=E(R);var e=require("react/jsx-runtime"),i=L(require("react")),l=require("../../components/index.js"),n=require("../../helpers/utils.js"),_=require("../../shared/Styles.js"),g=require("../../hooks/useExposure.js"),c=require("swiper/react"),u=require("swiper/modules"),M=require("swiper/css"),U=require("swiper/css/navigation"),I=require("swiper/css/pagination"),O=require("swiper/css/effect-coverflow");const z="carousel",D="three_d_carousel",j=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),B=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),b=i.default.forwardRef(({data:o,className:r},s)=>{const{title:d,items:a=[]}=o,w=a.length<4?[...a,...a]:a,h=(0,i.useRef)(null),f=(0,i.useRef)(null);return(0,g.useExposure)(f,{componentType:z,componentName:D,componentTitle:d}),(0,i.useImperativeHandle)(s,()=>f.current),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"ThreeDCarousel",className:(0,n.cn)("three-d-carousel laptop:overflow-hidden w-full overflow-visible",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4",children:[(0,e.jsx)(c.Swiper,{onSwiper:t=>h.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[u.EffectCoverflow,u.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}}},children:w.map((t,m)=>(0,e.jsx)(c.SwiperSlide,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:v})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,n.cn)("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden"),imgClassName:"h-full object-cover",style:{filter:v?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:(0,n.cn)("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!v}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},m))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>h.current?.slidePrev(),"aria-label":"Previous slide",children:(0,e.jsx)(j,{})}),(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>h.current?.slideNext(),"aria-label":"Next slide",children:(0,e.jsx)(B,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:(0,e.jsx)(c.Swiper,{loop:!0,loopAdditionalSlides:1,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:w.map((t,m)=>(0,e.jsxs)(c.SwiperSlide,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[(0,e.jsx)(l.Picture,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:(0,n.cn)("three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-mobile-button mt-3",children:t.buttonText})})]})]},m))})})]})});b.displayName="ThreeDCarousel";var P=(0,_.withLayout)(b,{style:"overflow: hidden;"});
2
2
  //# sourceMappingURL=ThreeDCarousel.js.map
package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n const { title, items = [] } = data\n const cloneItems = items.length < 4 ? [...items, ...items] : items\n const swiperRef = useRef<SwiperType | null>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ThreeDCarousel\"\n className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n {/* Desktop carousel with 3D effect */}\n <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4\">\n <Swiper\n onSwiper={swiper => (swiperRef.current = swiper)}\n centeredSlides={true}\n initialSlide={0}\n loop\n slidesPerView={'auto'}\n // loopAdditionalSlides={2}\n spaceBetween={0}\n grabCursor\n modules={[EffectCoverflow, Navigation]}\n slideToClickedSlide\n className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n effect=\"coverflow\"\n coverflowEffect={{\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n }}\n breakpoints={{\n 1921: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1490: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1441: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1025: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 769: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n }}\n >\n {cloneItems.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100\"\n >\n {({ isActive }) => (\n <>\n <Picture\n source={item.imageUrl?.url || ''}\n alt={item.imageUrl?.alt || item.title}\n className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden')}\n imgClassName=\"h-full object-cover\"\n style={{\n filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n }}\n />\n <div\n className={cn(\n 'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'opacity-0': !isActive,\n }\n )}\n >\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-description text-[14px]\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n <Button\n size=\"base\"\n variant=\"secondary\"\n className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n >\n {item.buttonText}\n </Button>\n </a>\n )}\n </div>\n </>\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n\n {/* Mobile carousel */}\n <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n <Swiper\n loop={true}\n loopAdditionalSlides={1}\n slidesPerView={'auto'}\n spaceBetween={12}\n grabCursor\n className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n >\n {cloneItems.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n >\n <Picture\n source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n alt={item.mobImageUrl?.alt || item.title}\n className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden\"\n imgClassName=\"h-full object-cover\"\n />\n <div\n className={cn(\n 'three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n {\n 'aiui-dark': item.theme === 'dark',\n }\n )}\n >\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-mobile-description text-[14px]\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n <Button size=\"base\" variant=\"secondary\" className=\"three-d-carousel__image-mobile-button mt-3\">\n {item.buttonText}\n </Button>\n </a>\n )}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n const { title, items = [] } = data\n const cloneItems = items.length < 4 ? [...items, ...items] : items\n const swiperRef = useRef<SwiperType | null>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ThreeDCarousel\"\n className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n {/* Desktop carousel with 3D effect */}\n <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4\">\n <Swiper\n onSwiper={swiper => (swiperRef.current = swiper)}\n centeredSlides={true}\n initialSlide={0}\n loop\n slidesPerView={'auto'}\n // loopAdditionalSlides={2}\n spaceBetween={0}\n grabCursor\n modules={[EffectCoverflow, Navigation]}\n slideToClickedSlide\n className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n effect=\"coverflow\"\n coverflowEffect={{\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n }}\n breakpoints={{\n 1921: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1490: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1441: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1025: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 769: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n }}\n >\n {cloneItems.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100\"\n >\n {({ isActive }) => (\n <>\n <Picture\n source={item.imageUrl?.url || ''}\n alt={item.imageUrl?.alt || item.title}\n className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden')}\n imgClassName=\"h-full object-cover\"\n style={{\n filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n }}\n />\n <div\n className={cn(\n 'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'opacity-0': !isActive,\n }\n )}\n >\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-description text-[14px]\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n <Button\n size=\"base\"\n variant=\"secondary\"\n className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n >\n {item.buttonText}\n </Button>\n </a>\n )}\n </div>\n </>\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n\n {/* Mobile carousel */}\n <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n <Swiper\n loop={true}\n loopAdditionalSlides={1}\n slidesPerView={'auto'}\n spaceBetween={12}\n grabCursor\n className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n >\n {cloneItems.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n >\n <Picture\n source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n alt={item.mobImageUrl?.alt || item.title}\n className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden\"\n imgClassName=\"h-full object-cover\"\n />\n <div\n className={cn(\n 'three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n {\n 'aiui-dark': item.theme === 'dark',\n }\n )}\n >\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-mobile-description text-[14px]\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n <Button size=\"base\" variant=\"secondary\" className=\"three-d-carousel__image-mobile-button mt-3\">\n {item.buttonText}\n </Button>\n </a>\n )}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel, { style: 'overflow: hidden;' })\n"],
5
+ "mappings": "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",
6
6
  "names": ["ThreeDCarousel_exports", "__export", "ThreeDCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_modules", "import_css", "import_navigation", "import_pagination", "import_effect_coverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "React", "data", "className", "ref", "title", "items", "cloneItems", "swiperRef", "boxRef", "swiper", "item", "index", "isActive"]
7
7
  }
package/dist/cjs/components/container.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var u=Object.create;var s=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var v=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},f=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of N(t))!P.call(e,p)&&p!==o&&s(e,p,{get:()=>t[p],enumerable:!(a=k(t,p))||a.enumerable});return e};var T=(e,t,o)=>(o=e!=null?u(S(e)):{},f(t||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),w=e=>f(s({},"__esModule",{value:!0}),e);var Y={};v(Y,{Container:()=>m});module.exports=w(Y);var n=require("react/jsx-runtime"),r=T(require("react")),l=require("../helpers/utils.js"),C=require("@radix-ui/react-slot");const B=({children:e})=>(0,n.jsx)(n.Fragment,{children:e}),M=r.default.forwardRef(({...e},t)=>{const{asChild:o,children:a,className:p,childClassName:c,spaceY:i="none",spaceTop:d="none",spaceBottom:x="none",...y}=e,R=o?C.Slot:"div",b={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},g={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},h={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return(0,n.jsx)(R,{...y,ref:t,className:(0,l.cn)(p,"ipc_container","relative z-10 w-full bg-white"),children:(0,n.jsx)("div",{className:(0,l.cn)("lg-desktop:max-w-full mx-auto size-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",c,b?.[i]||i,g?.[d]||d,h?.[x]||x),children:a})})}),m=r.default.forwardRef(({...e},t)=>{const{children:o,mode:a="section"}=e,c={section:M,fragment:B}[a];return(0,n.jsx)(c,{...e,ref:t,children:o})});m.displayName="Container";
1
+ "use strict";var u=Object.create;var s=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var P=(e,o)=>{for(var t in o)s(e,t,{get:o[t],enumerable:!0})},f=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of N(o))!v.call(e,p)&&p!==t&&s(e,p,{get:()=>o[p],enumerable:!(a=k(o,p))||a.enumerable});return e};var w=(e,o,t)=>(t=e!=null?u(S(e)):{},f(o||!e||!e.__esModule?s(t,"default",{value:e,enumerable:!0}):t,e)),T=e=>f(s({},"__esModule",{value:!0}),e);var Y={};P(Y,{Container:()=>m});module.exports=T(Y);var n=require("react/jsx-runtime"),r=w(require("react")),l=require("../helpers/utils.js"),C=require("@radix-ui/react-slot");const B=({children:e})=>(0,n.jsx)(n.Fragment,{children:e}),M=r.default.forwardRef(({...e},o)=>{const{asChild:t,children:a,className:p,childClassName:c,spaceY:i="none",spaceTop:d="none",spaceBottom:x="none",...y}=e,R=t?C.Slot:"div",b={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},g={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},h={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return(0,n.jsx)(R,{...y,ref:o,className:(0,l.cn)(p,"ipc_container","relative z-10 w-full overflow-hidden bg-white"),children:(0,n.jsx)("div",{className:(0,l.cn)("lg-desktop:max-w-full mx-auto size-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",c,b?.[i]||i,g?.[d]||d,h?.[x]||x),children:a})})}),m=r.default.forwardRef(({...e},o)=>{const{children:t,mode:a="section"}=e,c={section:M,fragment:B}[a];return(0,n.jsx)(c,{...e,ref:o,children:t})});m.displayName="Container";
2
2
  //# sourceMappingURL=container.js.map
package/dist/cjs/components/container.js.map CHANGED
@@ -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 childClassName?: 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 childClassName,\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\n {...containerProps}\n ref={forwardedRef}\n className={cn(className, 'ipc_container', 'relative z-10 w-full bg-white')}\n >\n <div\n className={cn(\n 'lg-desktop:max-w-full mx-auto size-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n childClassName,\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\n/**\n * Container - \u5BB9\u5668\n *\n * @description \u9875\u9762\u5E03\u5C40\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u54CD\u5E94\u5F0F\u95F4\u8DDD\u548C\u6700\u5927\u5BBD\u5EA6\u9650\u5236\uFF0C\u652F\u6301\u4E0D\u540C\u6A21\u5F0F\u548C\u95F4\u8DDD\u914D\u7F6E\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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAkBS,IAAAI,EAAA,6BAlBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAerB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,eAAAC,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIR,EAEES,EAAOP,EAAU,OAAO,MAExBQ,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,CACE,GAAGD,EACJ,IAAKP,EACL,aAAW,MAAGE,EAAW,gBAAiB,+BAA+B,EAEzE,mBAAC,OACC,aAAW,MACT,0CACA,8EACAC,EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAV,EACH,EACF,CAEJ,CAAC,EAOKP,EAAY,EAAAS,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAJ,EAAU,KAAAgB,EAAO,SAAU,EAAIb,EASjCc,EALF,CACF,QAAShB,EACT,SAAUF,CACZ,EAEiCiB,CAAK,EAEtC,SACE,OAACC,EAAA,CAAW,GAAGd,EAAO,IAAKC,EACxB,SAAAJ,EACH,CAEJ,CAAC,EAEDP,EAAU,YAAc",
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 childClassName?: 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 childClassName,\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\n {...containerProps}\n ref={forwardedRef}\n className={cn(className, 'ipc_container', 'relative z-10 w-full overflow-hidden bg-white')}\n >\n <div\n className={cn(\n 'lg-desktop:max-w-full mx-auto size-full',\n 'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n childClassName,\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\n/**\n * Container - \u5BB9\u5668\n *\n * @description \u9875\u9762\u5E03\u5C40\u5BB9\u5668\u7EC4\u4EF6\uFF0C\u63D0\u4F9B\u54CD\u5E94\u5F0F\u95F4\u8DDD\u548C\u6700\u5927\u5BBD\u5EA6\u9650\u5236\uFF0C\u652F\u6301\u4E0D\u540C\u6A21\u5F0F\u548C\u95F4\u8DDD\u914D\u7F6E\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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAkBS,IAAAI,EAAA,6BAlBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAerB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,eAAAC,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIR,EAEES,EAAOP,EAAU,OAAO,MAExBQ,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,CACE,GAAGD,EACJ,IAAKP,EACL,aAAW,MAAGE,EAAW,gBAAiB,+CAA+C,EAEzF,mBAAC,OACC,aAAW,MACT,0CACA,8EACAC,EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAV,EACH,EACF,CAEJ,CAAC,EAOKP,EAAY,EAAAS,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAJ,EAAU,KAAAgB,EAAO,SAAU,EAAIb,EASjCc,EALF,CACF,QAAShB,EACT,SAAUF,CACZ,EAEiCiB,CAAK,EAEtC,SACE,OAACC,EAAA,CAAW,GAAGd,EAAO,IAAKC,EACxB,SAAAJ,EACH,CAEJ,CAAC,EAEDP,EAAU,YAAc",
6
6
  "names": ["container_exports", "__export", "Container", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_react_slot", "Fragment", "children", "Section", "React", "props", "forwardedRef", "asChild", "className", "childClassName", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "mode", "Component"]
7
7
  }
package/dist/esm/biz-components/BrandEquity/BrandEquity.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{forwardRef as h,useEffect as k,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as E}from"../../shared/Styles.js";import{useMediaQuery as q}from"react-responsive";import{useExposure as M}from"../../hooks/useExposure.js";import{Swiper as S,SwiperSlide as B}from"swiper/react";import{Pagination as I,FreeMode as j,Mousewheel as A}from"swiper/modules";import P from"../Title/index.js";const T="copy",L="store_benefits",H=(e,a)=>{const r=[];for(let o=0;o<e.length;o+=a)r.push(e.slice(o,o+a));return r},D=h(({data:{items:e=[],title:a},className:r},o)=>{const[c,v]=w(!1),d=q({query:"(max-width: 768px)"}),m=f(null),n=f(null);N(o,()=>n.current),M(n,{componentType:T,componentName:L}),k(()=>{v(d)},[d]);const g=c?H(e,3):e;return p("div",{ref:n,className:i("brand-equity-wrapper w-full",r),children:[a&&t(P,{data:{title:a}}),c?p(S,{className:i(r),modules:[j,A,I],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:m.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,s)=>t(B,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((b,u)=>t(y,{data:b,index:u},u))},"SwiperSlide"+s)),t("div",{ref:m,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,s)=>t(y,{data:l,index:s},s))})]})}),y=({data:e,index:a})=>p("div",{className:i("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(a)},"rounded-box"),children:[p("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,o)=>t("div",{className:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar?.url,alt:r.avatar?.alt,className:"size-full object-cover"})},o))}):t(x,{className:"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]",children:e.description})]});var O=E(D);export{O as default};
1
+ "use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{forwardRef as h,useEffect as k,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as E}from"../../shared/Styles.js";import{useMediaQuery as q}from"react-responsive";import{useExposure as M}from"../../hooks/useExposure.js";import{Swiper as S,SwiperSlide as B}from"swiper/react";import{Pagination as I,FreeMode as j,Mousewheel as A}from"swiper/modules";import P from"../Title/index.js";const T="copy",L="store_benefits",H=(e,a)=>{const r=[];for(let o=0;o<e.length;o+=a)r.push(e.slice(o,o+a));return r},D=h(({data:{items:e=[],title:a},className:r},o)=>{const[d,v]=w(!1),c=q({query:"(max-width: 768px)"}),m=f(null),n=f(null);N(o,()=>n.current),M(n,{componentType:T,componentName:L}),k(()=>{v(c)},[c]);const g=d?H(e,3):e;return p("div",{ref:n,className:i("brand-equity-wrapper w-full",r),children:[a&&t(P,{data:{title:a}}),d?p(S,{className:i(r),modules:[j,A,I],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:m.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,s)=>t(B,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((b,u)=>t(y,{data:b,index:u},u))},"SwiperSlide"+s)),t("div",{ref:m,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,s)=>t(y,{data:l,index:s},s))})]})}),y=({data:e,index:a})=>p("div",{className:i("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(a)},"rounded-box"),children:[p("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,o)=>t("div",{className:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar?.url,alt:r.avatar?.alt,className:"size-full object-cover"})},o))}):t(x,{className:"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]",children:e.description})]});var O=E(D,{style:"overflow: hidden;"});export{O as default};
2
2
  //# sourceMappingURL=BrandEquity.js.map
package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
4
- "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(({ data: { items = [], title }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => <BrandEquityItem key={index} data={item} index={index} />)}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n})\n\nconst BrandEquityItem = ({ data, index }: { data: BrandEquityItemProps; index: number }) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'box-border flex w-full flex-col bg-white p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n 'rounded-box'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nexport default withLayout(BrandEquity)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n const chunks = []\n for (let i = 0; i < arr.length; i += size) {\n chunks.push(arr.slice(i, i + size))\n }\n return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(({ data: { items = [], title }, className }, ref) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n const paginationRef = useRef<HTMLDivElement>(null)\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const itemsArray = isMobile ? chunkArray(items, 3) : items\n return (\n <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n {title && <Title data={{ title: title }} />}\n {isMobile ? (\n <Swiper\n className={cn(className)}\n modules={[FreeMode, Mousewheel, Pagination]}\n freeMode={true}\n mousewheel={{\n forceToAxis: true,\n }}\n pagination={{\n clickable: true,\n el: paginationRef.current,\n }}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n },\n }}\n >\n {itemsArray?.map((item, jIndex) => (\n <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n {Array.isArray(item) &&\n item?.map((item, index) => <BrandEquityItem key={index} data={item} index={index} />)}\n </SwiperSlide>\n ))}\n <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n </Swiper>\n ) : (\n <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n {items.map((item, index) => (\n <BrandEquityItem key={index} data={item} index={index} />\n ))}\n </div>\n )}\n </div>\n )\n})\n\nconst BrandEquityItem = ({ data, index }: { data: BrandEquityItemProps; index: number }) => {\n return (\n <div\n className={cn(\n 'brand-equity-item',\n 'box-border flex w-full flex-col bg-white p-4',\n 'desktop:p-6 justify-between',\n 'laptop:col-span-3 lg-desktop:p-8',\n 'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n {\n ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n },\n 'rounded-box'\n )}\n >\n <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n {data.title}\n </h3>\n {data.type === 'avatar' ? (\n <div className=\"flex -space-x-2\">\n {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n <div\n key={index}\n className={cn(\n 'size-[30px] overflow-hidden rounded-full border-2 border-white',\n 'relative inline-block',\n 'lg-desktop:size-[36px]'\n )}\n >\n <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n </div>\n ))}\n </div>\n ) : (\n <Picture\n className=\"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover\"\n source={data.icon?.url}\n alt={data.icon?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n </div>\n <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]\">\n {data.description}\n </p>\n </div>\n )\n}\n\nexport default withLayout(BrandEquity, { style: 'overflow: hidden;' })\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withLayout", "useMediaQuery", "useExposure", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "title", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
7
7
  }
package/dist/esm/biz-components/FeatureCards/FeatureCards.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as D,jsx as t,jsxs as l}from"react/jsx-runtime";import g,{useImperativeHandle as F,useRef as T}from"react";import{Heading as u,Picture as v,Text as c}from"../../components/index.js";import{cn as f}from"../../helpers/utils.js";import{withLayout as z}from"../../shared/Styles.js";import{useExposure as H}from"../../hooks/useExposure.js";import{trackUrlRef as R}from"../../shared/trackUrlRef.js";import{Swiper as $,SwiperSlide as S}from"swiper/react";const n="image",x="feature_cards",j=(a,r)=>r===2?a===0?"laptop:flex-[2]":"laptop:flex-[3]":r===3?"laptop:flex-[1]":r===4?a===0?"laptop:flex-[2]":a===1||a===2?"laptop:flex-[3]":"laptop:flex-[2]":r===5?a<3?"laptop:flex-[1]":a===3?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]",L=(a,r)=>r===4&&a===1||r===5&&a===2,b=g.forwardRef(({data:a,className:r},k)=>{const{title:o,subtitle:i,items:p=[],theme:N="light"}=a,d=T(null);H(d,{componentType:n,componentName:x,componentTitle:o,componentDescription:i}),F(k,()=>d.current);const m="rounded-box",w=(e,s)=>{const h=l(D,{children:[t(v,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),l("div",{className:"feature-cards__card-content z-10",children:[t(u,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:e.title}),t(c,{size:4,as:"p",className:"feature-cards__card-subtitle laptop:h-[42px] lg-desktop:h-[54px] lg-desktop:text-[18px] mt-[4px] line-clamp-2 h-[42px] text-[14px]",children:e.subtitle})]})]}),y="feature-cards__card relative flex h-[360px] max-h-[560px] flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",C=s!==void 0?j(s,p.length):"flex-1",_=f(y,m,C,{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"});return e.link?t("a",{href:R(e.link,`${n}_${x}`),className:_,"data-headless-type-name":`${n}#${x}`,"data-headless-title-desc-button":`${o}#${e.title}#${e.subtitle}`,children:h}):t("div",{className:_,children:h})};return l("section",{ref:d,"data-ui-component-id":"FeatureCards",className:f("feature-cards text-info-primary flex w-full flex-col justify-center",{"aiui-dark":N==="dark"},r),children:[l("div",{className:"feature-cards__header",children:[t(u,{size:4,as:"h1",className:"feature-cards__title laptop:text-center text-left",children:o}),i&&t(c,{size:2,as:"p",className:"feature-cards__subtitle laptop:text-center desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-left text-[14px]",children:i})]}),t("div",{className:"feature-cards__grid laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px] mt-[24px] hidden w-full flex-wrap gap-[16px]",children:p.map((e,s)=>l(g.Fragment,{children:[w(e,s),L(s,p.length)&&t("div",{className:"laptop:basis-full laptop:h-0"})]},e.title))}),t("div",{className:"feature-cards__swiper-container laptop:hidden mt-[24px] w-full",children:t($,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:p.map(e=>t(S,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:l("div",{className:f("feature-cards__card feature-cards__card--mobile text-info-primary absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px]",m,{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"}),children:[t(v,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),l("div",{className:"feature-cards__card-content z-10",children:[t(u,{size:3,as:"h2",className:"feature-cards__card-title",children:e.title}),t(c,{size:4,as:"p",className:"feature-cards__card-subtitle laptop:h-[42px] lg-desktop:h-[54px] lg-desktop:text-[18px] mt-[4px] line-clamp-2 h-[42px] overflow-visible text-[14px]",children:e.subtitle})]})]},e.title)},e.title))})})]})});b.displayName="FeatureCards";var q=z(b);export{q as default};
1
+ "use client";import{Fragment as D,jsx as t,jsxs as l}from"react/jsx-runtime";import g,{useImperativeHandle as F,useRef as T}from"react";import{Heading as u,Picture as v,Text as c}from"../../components/index.js";import{cn as f}from"../../helpers/utils.js";import{withLayout as z}from"../../shared/Styles.js";import{useExposure as H}from"../../hooks/useExposure.js";import{trackUrlRef as R}from"../../shared/trackUrlRef.js";import{Swiper as $,SwiperSlide as S}from"swiper/react";const n="image",x="feature_cards",j=(a,r)=>r===2?a===0?"laptop:flex-[2]":"laptop:flex-[3]":r===3?"laptop:flex-[1]":r===4?a===0?"laptop:flex-[2]":a===1||a===2?"laptop:flex-[3]":"laptop:flex-[2]":r===5?a<3?"laptop:flex-[1]":a===3?"laptop:flex-[2]":"laptop:flex-[3]":"laptop:flex-[1]",L=(a,r)=>r===4&&a===1||r===5&&a===2,b=g.forwardRef(({data:a,className:r},k)=>{const{title:o,subtitle:i,items:p=[],theme:N="light"}=a,d=T(null);H(d,{componentType:n,componentName:x,componentTitle:o,componentDescription:i}),F(k,()=>d.current);const m="rounded-box",w=(e,s)=>{const h=l(D,{children:[t(v,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),l("div",{className:"feature-cards__card-content z-10",children:[t(u,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:e.title}),t(c,{size:4,as:"p",className:"feature-cards__card-subtitle laptop:h-[42px] lg-desktop:h-[54px] lg-desktop:text-[18px] mt-[4px] line-clamp-2 h-[42px] text-[14px]",children:e.subtitle})]})]}),y="feature-cards__card relative flex h-[360px] max-h-[560px] flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",C=s!==void 0?j(s,p.length):"flex-1",_=f(y,m,C,{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"});return e.link?t("a",{href:R(e.link,`${n}_${x}`),className:_,"data-headless-type-name":`${n}#${x}`,"data-headless-title-desc-button":`${o}#${e.title}#${e.subtitle}`,children:h}):t("div",{className:_,children:h})};return l("section",{ref:d,"data-ui-component-id":"FeatureCards",className:f("feature-cards text-info-primary flex w-full flex-col justify-center",{"aiui-dark":N==="dark"},r),children:[l("div",{className:"feature-cards__header",children:[t(u,{size:4,as:"h1",className:"feature-cards__title laptop:text-center text-left",children:o}),i&&t(c,{size:2,as:"p",className:"feature-cards__subtitle laptop:text-center desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-left text-[14px]",children:i})]}),t("div",{className:"feature-cards__grid laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px] mt-[24px] hidden w-full flex-wrap gap-[16px]",children:p.map((e,s)=>l(g.Fragment,{children:[w(e,s),L(s,p.length)&&t("div",{className:"laptop:basis-full laptop:h-0"})]},e.title))}),t("div",{className:"feature-cards__swiper-container laptop:hidden mt-[24px] w-full",children:t($,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:p.map(e=>t(S,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:l("div",{className:f("feature-cards__card feature-cards__card--mobile text-info-primary absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px]",m,{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"}),children:[t(v,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),l("div",{className:"feature-cards__card-content z-10",children:[t(u,{size:3,as:"h2",className:"feature-cards__card-title",children:e.title}),t(c,{size:4,as:"p",className:"feature-cards__card-subtitle laptop:h-[42px] lg-desktop:h-[54px] lg-desktop:text-[18px] mt-[4px] line-clamp-2 h-[42px] overflow-visible text-[14px]",children:e.subtitle})]})]},e.title)},e.title))})})]})});b.displayName="FeatureCards";var q=z(b,{style:"overflow: hidden;"});export{q as default};
2
2
  //# sourceMappingURL=FeatureCards.js.map
package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/FeatureCards/FeatureCards.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\n/**\n * \u6839\u636E\u5361\u7247\u6570\u91CF\u83B7\u53D6\u684C\u9762\u7AEF\uFF08laptop+\uFF09\u7684\u7F51\u683C\u5E03\u5C40\u7C7B\u540D\n * - 2\u5F20\u5361\u7247: 2:3\n * - 3\u5F20\u5361\u7247: 1:1:1\n * - 4\u5F20\u5361\u7247: \u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\n * - 5\u5F20\u5361\u7247: \u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\n */\nconst getCardLayoutClasses = (index: number, totalCards: number): string => {\n if (totalCards === 2) {\n // 2:3 \u6BD4\u4F8B\n return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n }\n\n if (totalCards === 3) {\n // 1:1:1 \u6BD4\u4F8B\n return 'laptop:flex-[1]'\n }\n\n if (totalCards === 4) {\n // \u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\n if (index === 0) return 'laptop:flex-[2]'\n if (index === 1) return 'laptop:flex-[3]'\n if (index === 2) return 'laptop:flex-[3]'\n return 'laptop:flex-[2]'\n }\n\n if (totalCards === 5) {\n // \u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\n if (index < 3) return 'laptop:flex-[1]'\n if (index === 3) return 'laptop:flex-[2]'\n return 'laptop:flex-[3]'\n }\n\n // \u9ED8\u8BA4\u7B49\u5BBD\n return 'laptop:flex-[1]'\n}\n\n/**\n * \u6839\u636E\u5361\u7247\u6570\u91CF\u786E\u5B9A\u662F\u5426\u9700\u8981\u6362\u884C\n * - 4\u5F20\u5361\u7247: \u7B2C\u4E00\u884C2\u5F20\uFF0C\u7B2C\u4E8C\u884C2\u5F20\n * - 5\u5F20\u5361\u7247: \u7B2C\u4E00\u884C3\u5F20\uFF0C\u7B2C\u4E8C\u884C2\u5F20\n */\nconst shouldBreakRow = (index: number, totalCards: number): boolean => {\n if (totalCards === 4 && index === 1) return true\n if (totalCards === 5 && index === 2) return true\n return false\n}\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n const { title, subtitle, items = [], theme = 'light' } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // \u7EDF\u4E00\u4F7F\u7528 rounded-box\n const roundedClasses = 'rounded-box'\n\n const renderCard = (item: FeatureCardItem, index?: number) => {\n const cardContent = (\n <>\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading\n size={3}\n as=\"h2\"\n className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\"\n >\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle laptop:h-[42px] lg-desktop:h-[54px] lg-desktop:text-[18px] mt-[4px] line-clamp-2 h-[42px] text-[14px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </>\n )\n\n // \u57FA\u7840\u6837\u5F0F\uFF08\u79FB\u9664\u539F\u6709\u7684 rounded \u7C7B\uFF09\n const baseClasses =\n 'feature-cards__card relative flex h-[360px] max-h-[560px] flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]'\n\n // \u83B7\u53D6\u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D\uFF08\u4EC5\u7528\u4E8E\u684C\u9762\u7AEF\uFF09\n const layoutClasses = index !== undefined ? getCardLayoutClasses(index, items.length) : 'flex-1'\n\n const cardClasses = cn(baseClasses, roundedClasses, layoutClasses, {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n })\n\n if (item.link) {\n return (\n <a\n href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n className={cardClasses}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n >\n {cardContent}\n </a>\n )\n }\n\n return <div className={cardClasses}>{cardContent}</div>\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureCards\"\n className={cn(\n 'feature-cards text-info-primary flex w-full flex-col justify-center',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n <div className=\"feature-cards__header\">\n <Heading size={4} as=\"h1\" className=\"feature-cards__title laptop:text-center text-left\">\n {title}\n </Heading>\n {subtitle && (\n <Text\n size={2}\n as=\"p\"\n className=\"feature-cards__subtitle laptop:text-center desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-left text-[14px]\"\n >\n {subtitle}\n </Text>\n )}\n </div>\n\n {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n <div className=\"feature-cards__grid laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px] mt-[24px] hidden w-full flex-wrap gap-[16px]\">\n {items.map((item, index) => (\n <React.Fragment key={item.title}>\n {renderCard(item, index)}\n {/* \u5728\u7279\u5B9A\u4F4D\u7F6E\u63D2\u5165\u6362\u884C */}\n {shouldBreakRow(index, items.length) && <div className=\"laptop:basis-full laptop:h-0\" />}\n </React.Fragment>\n ))}\n </div>\n\n {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n <div className=\"feature-cards__swiper-container laptop:hidden mt-[24px] w-full\">\n <Swiper\n spaceBetween={12}\n slidesPerView=\"auto\"\n grabCursor\n className=\"feature-cards__swiper relative w-full !overflow-visible\"\n >\n {items.map(item => (\n <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n <div\n key={item.title}\n className={cn(\n 'feature-cards__card feature-cards__card--mobile text-info-primary absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px]',\n roundedClasses,\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )}\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle laptop:h-[42px] lg-desktop:h-[54px] lg-desktop:text-[18px] mt-[4px] line-clamp-2 h-[42px] overflow-visible text-[14px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\n/**\n * \u6839\u636E\u5361\u7247\u6570\u91CF\u83B7\u53D6\u684C\u9762\u7AEF\uFF08laptop+\uFF09\u7684\u7F51\u683C\u5E03\u5C40\u7C7B\u540D\n * - 2\u5F20\u5361\u7247: 2:3\n * - 3\u5F20\u5361\u7247: 1:1:1\n * - 4\u5F20\u5361\u7247: \u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\n * - 5\u5F20\u5361\u7247: \u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\n */\nconst getCardLayoutClasses = (index: number, totalCards: number): string => {\n if (totalCards === 2) {\n // 2:3 \u6BD4\u4F8B\n return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n }\n\n if (totalCards === 3) {\n // 1:1:1 \u6BD4\u4F8B\n return 'laptop:flex-[1]'\n }\n\n if (totalCards === 4) {\n // \u7B2C\u4E00\u884C 2:3\uFF0C\u7B2C\u4E8C\u884C 3:2\n if (index === 0) return 'laptop:flex-[2]'\n if (index === 1) return 'laptop:flex-[3]'\n if (index === 2) return 'laptop:flex-[3]'\n return 'laptop:flex-[2]'\n }\n\n if (totalCards === 5) {\n // \u7B2C\u4E00\u884C 1:1:1\uFF0C\u7B2C\u4E8C\u884C 2:3\n if (index < 3) return 'laptop:flex-[1]'\n if (index === 3) return 'laptop:flex-[2]'\n return 'laptop:flex-[3]'\n }\n\n // \u9ED8\u8BA4\u7B49\u5BBD\n return 'laptop:flex-[1]'\n}\n\n/**\n * \u6839\u636E\u5361\u7247\u6570\u91CF\u786E\u5B9A\u662F\u5426\u9700\u8981\u6362\u884C\n * - 4\u5F20\u5361\u7247: \u7B2C\u4E00\u884C2\u5F20\uFF0C\u7B2C\u4E8C\u884C2\u5F20\n * - 5\u5F20\u5361\u7247: \u7B2C\u4E00\u884C3\u5F20\uFF0C\u7B2C\u4E8C\u884C2\u5F20\n */\nconst shouldBreakRow = (index: number, totalCards: number): boolean => {\n if (totalCards === 4 && index === 1) return true\n if (totalCards === 5 && index === 2) return true\n return false\n}\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n const { title, subtitle, items = [], theme = 'light' } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // \u7EDF\u4E00\u4F7F\u7528 rounded-box\n const roundedClasses = 'rounded-box'\n\n const renderCard = (item: FeatureCardItem, index?: number) => {\n const cardContent = (\n <>\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading\n size={3}\n as=\"h2\"\n className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\"\n >\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle laptop:h-[42px] lg-desktop:h-[54px] lg-desktop:text-[18px] mt-[4px] line-clamp-2 h-[42px] text-[14px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </>\n )\n\n // \u57FA\u7840\u6837\u5F0F\uFF08\u79FB\u9664\u539F\u6709\u7684 rounded \u7C7B\uFF09\n const baseClasses =\n 'feature-cards__card relative flex h-[360px] max-h-[560px] flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]'\n\n // \u83B7\u53D6\u54CD\u5E94\u5F0F\u5E03\u5C40\u7C7B\u540D\uFF08\u4EC5\u7528\u4E8E\u684C\u9762\u7AEF\uFF09\n const layoutClasses = index !== undefined ? getCardLayoutClasses(index, items.length) : 'flex-1'\n\n const cardClasses = cn(baseClasses, roundedClasses, layoutClasses, {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n })\n\n if (item.link) {\n return (\n <a\n href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n className={cardClasses}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n >\n {cardContent}\n </a>\n )\n }\n\n return <div className={cardClasses}>{cardContent}</div>\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"FeatureCards\"\n className={cn(\n 'feature-cards text-info-primary flex w-full flex-col justify-center',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* \u6807\u9898\u533A\u57DF */}\n <div className=\"feature-cards__header\">\n <Heading size={4} as=\"h1\" className=\"feature-cards__title laptop:text-center text-left\">\n {title}\n </Heading>\n {subtitle && (\n <Text\n size={2}\n as=\"p\"\n className=\"feature-cards__subtitle laptop:text-center desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-left text-[14px]\"\n >\n {subtitle}\n </Text>\n )}\n </div>\n\n {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n <div className=\"feature-cards__grid laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px] mt-[24px] hidden w-full flex-wrap gap-[16px]\">\n {items.map((item, index) => (\n <React.Fragment key={item.title}>\n {renderCard(item, index)}\n {/* \u5728\u7279\u5B9A\u4F4D\u7F6E\u63D2\u5165\u6362\u884C */}\n {shouldBreakRow(index, items.length) && <div className=\"laptop:basis-full laptop:h-0\" />}\n </React.Fragment>\n ))}\n </div>\n\n {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n <div className=\"feature-cards__swiper-container laptop:hidden mt-[24px] w-full\">\n <Swiper\n spaceBetween={12}\n slidesPerView=\"auto\"\n grabCursor\n className=\"feature-cards__swiper relative w-full !overflow-visible\"\n >\n {items.map(item => (\n <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n <div\n key={item.title}\n className={cn(\n 'feature-cards__card feature-cards__card--mobile text-info-primary absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden px-[16px] py-[12px]',\n roundedClasses,\n {\n 'aiui-dark': item.theme === 'dark',\n 'aiui-light': item.theme === 'light',\n }\n )}\n >\n <Picture\n source={item.image?.url}\n alt={item.image?.alt || item.title}\n className=\"feature-cards__card-image absolute inset-0 !h-full\"\n imgClassName=\"!h-full object-cover\"\n />\n <div className=\"feature-cards__card-content z-10\">\n <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n {item.title}\n </Heading>\n <Text\n size={4}\n as=\"p\"\n className=\"feature-cards__card-subtitle laptop:h-[42px] lg-desktop:h-[54px] lg-desktop:text-[18px] mt-[4px] line-clamp-2 h-[42px] overflow-visible text-[14px]\"\n >\n {item.subtitle}\n </Text>\n </div>\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards, { style: 'overflow: hidden;' })\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "Swiper", "SwiperSlide", "componentType", "componentName", "getCardLayoutClasses", "index", "totalCards", "shouldBreakRow", "FeatureCards", "data", "className", "ref", "title", "subtitle", "items", "theme", "boxRef", "roundedClasses", "renderCard", "item", "cardContent", "baseClasses", "layoutClasses", "cardClasses", "FeatureCards_default"]
7
7
  }
package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js CHANGED
@@ -7,5 +7,5 @@
7
7
  transform: translate3d(0, 0, 0);
8
8
  }
9
9
  }
10
- `}),r("section",{id:o,ref:k,className:n("media-scene-switcher text-info-primary w-full",{"aiui-dark":p==="dark"},i),children:[r("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[e("div",{className:n("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":b==="right"}),children:l.map((s,a)=>{const E=s?.videoUrl?.url,I=s?.imageUrl?.url,L=I||s?.videoUrl?.thumbnailURL||"";return e("div",{className:n("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":a===g}),children:E?e("video",{src:E,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:L,className:"size-full object-cover"}):I?e(w,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:s?.title||""}):null},s.id||a)})}),r("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[r("div",{className:"media-scene-switcher-header flex flex-col",children:[r("div",{className:"desktop:gap-2 flex items-center gap-1",children:[t&&e(h,{as:"h3",html:t,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),u&&e(w,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),m&&e(C,{as:"span",size:4,html:m,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),e("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:l.map((s,a)=>e(O,{data:s,configuration:{index:a,isActive:a===g,onItemClick:P},theme:p},s.id||a))})]})]}),r("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[r("div",{className:"media-scene-switcher-mobile-header",children:[r("div",{className:"desktop:gap-2 flex items-center gap-1",children:[t&&e(h,{as:"h2",html:t,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),u&&e(w,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),m&&e(C,{as:"span",size:4,html:m,className:"media-scene-switcher-subtitle text-[14px]"})]}),e("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:e(_,{onSlideChange:s=>B(s.realIndex),initialSlide:0,modules:[$],loop:l.length>1,autoplay:l.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:l.map((s,a)=>e(q,{className:"!h-auto !w-[296px] max-w-full",children:e(Q,{data:s,configuration:{index:a,isActive:a===T},theme:p})},s.id||a))})})]})]})]})});F.displayName="MediaSceneSwitcher";var ae=V(F);export{ae as default};
10
+ `}),r("section",{id:o,ref:k,className:n("media-scene-switcher text-info-primary w-full",{"aiui-dark":p==="dark"},i),children:[r("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[e("div",{className:n("media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",{"order-1":b==="right"}),children:l.map((s,a)=>{const E=s?.videoUrl?.url,I=s?.imageUrl?.url,L=I||s?.videoUrl?.thumbnailURL||"";return e("div",{className:n("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":a===g}),children:E?e("video",{src:E,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:L,className:"size-full object-cover"}):I?e(w,{className:"size-full",imgClassName:"size-full object-cover",source:I,alt:s?.title||""}):null},s.id||a)})}),r("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[r("div",{className:"media-scene-switcher-header flex flex-col",children:[r("div",{className:"desktop:gap-2 flex items-center gap-1",children:[t&&e(h,{as:"h3",html:t,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),u&&e(w,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),m&&e(C,{as:"span",size:4,html:m,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px]"})]}),e("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:l.map((s,a)=>e(O,{data:s,configuration:{index:a,isActive:a===g,onItemClick:P},theme:p},s.id||a))})]})]}),r("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[r("div",{className:"media-scene-switcher-mobile-header",children:[r("div",{className:"desktop:gap-2 flex items-center gap-1",children:[t&&e(h,{as:"h2",html:t,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight text-[#00BEFA]"}),u&&e(w,{source:u.url,alt:u.alt||"title icon",className:"desktop:h-8 lg-desktop:h-10 h-6",imgClassName:"!w-auto h-full"})]}),m&&e(C,{as:"span",size:4,html:m,className:"media-scene-switcher-subtitle text-[14px]"})]}),e("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:e(_,{onSlideChange:s=>B(s.realIndex),initialSlide:0,modules:[$],loop:l.length>1,autoplay:l.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:l.map((s,a)=>e(q,{className:"!h-auto !w-[296px] max-w-full",children:e(Q,{data:s,configuration:{index:a,isActive:a===T},theme:p})},s.id||a))})})]})]})]})});F.displayName="MediaSceneSwitcher";var ae=V(F,{style:"overflow: hidden;"});export{ae as default};
11
11
  //# sourceMappingURL=MediaSceneSwitcher.js.map