@anker-in/headless-ui 1.0.26-temp-111005 → 1.0.26-temp.1

package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
-  "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, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { isDisplayBackImage = false, itemShape, metafields } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { discounts } = metafields || {}\n  const ref = useRef<HTMLDivElement>(null)\n  const [showTags, setShowTags] = useState<string[]>([])\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  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 { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  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 || ''}`\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])\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) => <Badge key={index} className=\"shelf-items-tag\">{item}</Badge>)}\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-3 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)}\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)}\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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          <div\n            className={cn(\n              'lg-desktop:mb-3 lg-desktop:h-[195px] 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}`,\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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 } = 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) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  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 { price, basePrice, discount } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  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 || ''}`\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])\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 duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\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, 'relative overflow-hidden desktop:mb-0 mb-1')}>\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n          {isShowTag ? (\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)}\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)}\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"],
-  "mappings": "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",
-  "names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "__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", "configuration", "isDisplayBackImage", "itemShape", "metafields", "locale", "copyWriting", "discounts", "ref", "showTags", "setShowTags", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
+  "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 } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { isDisplayBackImage = false, itemShape } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  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 { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  const displayTitle = data?.custom_name || data?.title\n  const displayDescription = data?.custom_description || data?.description\n\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 ? (\n          <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n            {data?.tags\n              ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n              ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n              ?.slice?.(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\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)}\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)}\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]'\n      )}\n    >\n      {isDisplayBackImage ? (\n        <div className=\"absolute inset-0 box-border overflow-hidden\">\n          <div className=\"relative inset-0 size-full\">\n            <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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          <div\n            className={cn(\n              'lg-desktop:mb-3 lg-desktop:h-[195px] 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}`,\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\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 } = configuration || {}\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const ref = useRef<HTMLDivElement>(null)\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.primaryButton?.(params, index + 1, data)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n    configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  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 { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n    baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  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  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        'bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6',\n        'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\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, 'relative overflow-hidden desktop:mb-0 mb-1')}>\n          <a\n            aria-label={displayTitle}\n            target={configuration?.target}\n            href={trackUrlRef(\n              `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\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 source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n          </a>\n        </div>\n        <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n          {isShowTag ? (\n            <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n              {data?.tags\n                ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n                ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n                ?.slice?.(0, 2)\n                ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\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)}\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)}\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"],
+  "mappings": "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",
+  "names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "__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", "configuration", "isDisplayBackImage", "itemShape", "locale", "copyWriting", "ref", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "coupon", "price", "basePrice", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var m=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var S=(e,p)=>{for(var t in p)r(e,t,{get:p[t],enumerable:!0})},s=(e,p,t,a)=>{if(p&&typeof p=="object"||typeof p=="function")for(let o of n(p))!y.call(e,o)&&o!==t&&r(e,o,{get:()=>p[o],enumerable:!(a=h(p,o))||a.enumerable});return e};var v=(e,p,t)=>(t=e!=null?m(u(e)):{},s(p||!e||!e.__esModule?r(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>s(r({},"__esModule",{value:!0}),e);var w={};S(w,{default:()=>k});module.exports=x(w);var l=require("react/jsx-runtime"),i=v(require("react")),d=require("../../helpers/utils.js"),f=require("../../shared/Styles.js");const c=i.default.forwardRef(({className:e,data:p})=>{const{space:t="default"}=p;return(0,l.jsx)("div",{className:(0,d.cn)("ipc_spacer",t==="default"&&"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16",t==="fixed"&&"h-16",e)})});c.displayName="Spacer";var k=(0,f.withLayout)(c);
+"use strict";"use client";var m=Object.create;var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(e,p)=>{for(var t in p)a(e,t,{get:p[t],enumerable:!0})},s=(e,p,t,o)=>{if(p&&typeof p=="object"||typeof p=="function")for(let r of n(p))!v.call(e,r)&&r!==t&&a(e,r,{get:()=>p[r],enumerable:!(o=h(p,r))||o.enumerable});return e};var S=(e,p,t)=>(t=e!=null?m(u(e)):{},s(p||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>s(a({},"__esModule",{value:!0}),e);var w={};y(w,{default:()=>k});module.exports=x(w);var f=require("react/jsx-runtime"),i=S(require("react")),l=require("../../helpers/utils.js"),d=require("../../shared/Styles.js");const c=i.default.forwardRef(({className:e,data:p})=>{const{space:t="default"}=p;return(0,f.jsx)("div",{className:(0,l.cn)("ipc_spacer","relative z-[5]",t==="default"&&"laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16",t==="fixed"&&"h-16",e)})});c.displayName="Spacer";var k=(0,d.withLayout)(c);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Spacer/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }) => {\n  const { space = 'default' } = data\n  return (\n    <div\n      className={cn(\n        'ipc_spacer',\n        space === 'default' && 'laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16',\n        space === 'fixed' && 'h-16',\n        className\n      )}\n    ></div>\n  )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withLayout(Spacer)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BARJC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACpF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAID,EAC9B,SACE,OAAC,OACC,aAAW,MACT,aACAC,IAAU,WAAa,qEACvBA,IAAU,SAAW,OACrBF,CACF,EACD,CAEL,CAAC,EAEDF,EAAO,YAAc,SAErB,IAAON,KAAQ,cAAWM,CAAM",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { SpacerProps } from './types.js'\n\nconst Spacer = React.forwardRef<HTMLDivElement, SpacerProps>(({ className, data }) => {\n  const { space = 'default' } = data\n  return (\n    <div\n      className={cn(\n        'ipc_spacer',\n        'relative z-[5]',\n        space === 'default' && 'laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16',\n        space === 'fixed' && 'h-16',\n        className\n      )}\n    ></div>\n  )\n})\n\nSpacer.displayName = 'Spacer'\n\nexport default withLayout(Spacer)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GASI,IAAAI,EAAA,6BARJC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,UAAAC,EAAW,KAAAC,CAAK,IAAM,CACpF,KAAM,CAAE,MAAAC,EAAQ,SAAU,EAAID,EAC9B,SACE,OAAC,OACC,aAAW,MACT,aACA,iBACAC,IAAU,WAAa,qEACvBA,IAAU,SAAW,OACrBF,CACF,EACD,CAEL,CAAC,EAEDF,EAAO,YAAc,SAErB,IAAON,KAAQ,cAAWM,CAAM",
   "names": ["Spacer_exports", "__export", "Spacer_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "Spacer", "React", "className", "data", "space"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var H=Object.create;var p=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var I=(o,t)=>{for(var l in t)p(o,l,{get:t[l],enumerable:!0})},g=(o,t,l,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of M(t))!k.call(o,r)&&r!==l&&p(o,r,{get:()=>t[r],enumerable:!(a=L(t,r))||a.enumerable});return o};var P=(o,t,l)=>(l=o!=null?H(R(o)):{},g(t||!o||!o.__esModule?p(l,"default",{value:o,enumerable:!0}):l,o)),V=o=>g(p({},"__esModule",{value:!0}),o);var z={};I(z,{default:()=>q});module.exports=V(z);var s=require("react/jsx-runtime"),i=P(require("react")),u=require("../../components/index.js"),m=require("../../helpers/utils.js"),h=require("../../shared/Styles.js"),N=require("../../hooks/useExposure.js");const $="specs",j="specs_comparison",w=i.default.forwardRef(({data:o,className:t},l)=>{const{LeftMenu:a,RightMenu:r}=o||{},[y,F]=(0,i.useState)(""),v=(0,i.useRef)({}),d=(0,i.useRef)(null);(0,N.useExposure)(d,{componentType:$,componentName:j,componentTitle:"Specs Comparison"}),(0,i.useImperativeHandle)(l,()=>d.current);const f=e=>e?(0,s.jsx)("div",{className:"specs-comparison__value-wrapper break-all",children:(0,s.jsx)("p",{className:"specs-comparison__value text-sm font-bold text-[#1D1D1F] min-xl:text-base min-xxl:text-lg",dangerouslySetInnerHTML:{__html:e||""}})}):null,T=e=>e.map((n,x)=>{const S=x===0,_=r?.menus?.[0]?.subTitle,c=r?.menus?.[1]?.subTitle,E=c&&c[n],C=/^[✅❌]$/,b=E&&(c[n]!==_?.[n]||C.test(c[n]));return(0,s.jsxs)("div",{className:(0,m.cn)("specs-comparison__row box-border flex w-full overflow-hidden border-t border-t-[#E4E5E6] l:flex-col",S&&"specs-comparison__row--first border-t-0"),children:[(0,s.jsx)(u.Heading,{as:"h3",html:n||"",className:"specs-comparison__spec-label mr-4 flex-1 pt-4 text-base font-bold text-[#000000] l:text-lg min-l:min-w-[216px] min-l:max-w-[216px] min-xl:min-w-[268px] min-xl:max-w-[268px] min-xl:p-6 min-xxl:min-w-[356px] min-xxl:max-w-[356px] min-xxl:text-lg"}),(0,s.jsxs)("div",{className:(0,m.cn)("specs-comparison__values-grid grid flex-1 place-self-center pb-4 pt-2 l:w-full l:gap-4 min-l:gap-8 min-xl:gap-12 min-xl:p-6 min-xxl:gap-16",b?"specs-comparison__values-grid--double grid-cols-2":"specs-comparison__values-grid--single grid-cols-1"),children:[f(_?.[n]),b&&f(c?.[n])]})]},n)}),D=e=>{const{subTitle:n}=e;return T(n)};return(0,s.jsx)("div",{ref:d,"data-ui-component-id":"SpecsComparison",className:(0,m.cn)("specs-comparison w-full overflow-hidden bg-[#F5F5F7]",t),children:(0,s.jsx)("div",{className:"specs-comparison__container container mx-auto",children:a?.data?(0,s.jsxs)("div",{className:"specs-comparison__wrapper my-16 box-border flex w-full overflow-hidden min-l:mb-24 min-xl:mb-32",children:[a.data.length>1?(0,s.jsx)("div",{className:"specs-comparison__sidebar flex l:hidden min-l:mr-6 min-xl:mr-12",children:(0,s.jsx)("div",{className:"specs-comparison__nav box-border overflow-hidden min-l:w-[196px] min-xl:w-[284px] min-xxl:w-[356px]",children:a.data.map(e=>(0,s.jsx)("div",{onClick:()=>{F(e.title),v.current[e.title]?.scrollIntoView({behavior:"smooth"})},title:e.title||"",className:(0,m.cn)("specs-comparison__nav-item box-border cursor-pointer overflow-hidden truncate rounded-lg px-6 py-2 text-base font-bold leading-9 text-[#1D1D1F] min-xxl:py-4 min-xxl:text-lg",y===e.title&&"specs-comparison__nav-item--active bg-[#FFFFFF]"),children:e.title||""},e.title))})}):null,(0,s.jsx)("div",{className:"specs-comparison__content box-border flex-1 overflow-hidden",children:(0,s.jsx)("div",{className:"specs-comparison__sections w-full",children:a.data.map((e,n)=>(0,s.jsxs)("div",{className:"specs-comparison__section w-full overflow-hidden pt-10 first:pt-0",ref:x=>{v.current[e.title]=x},children:[e.title&&(0,s.jsx)(u.Heading,{as:"h2",className:"specs-comparison__section-title mb-6 text-2xl font-bold min-l:text-[32px]",html:e.title||""}),D(e)]},n))})})]}):null})})});w.displayName="SpecsComparison";var q=(0,h.withLayout)(w);
+"use strict";"use client";var H=Object.create;var p=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var I=(o,t)=>{for(var l in t)p(o,l,{get:t[l],enumerable:!0})},g=(o,t,l,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of M(t))!k.call(o,r)&&r!==l&&p(o,r,{get:()=>t[r],enumerable:!(a=L(t,r))||a.enumerable});return o};var P=(o,t,l)=>(l=o!=null?H(R(o)):{},g(t||!o||!o.__esModule?p(l,"default",{value:o,enumerable:!0}):l,o)),V=o=>g(p({},"__esModule",{value:!0}),o);var z={};I(z,{default:()=>q});module.exports=V(z);var s=require("react/jsx-runtime"),i=P(require("react")),u=require("../../components/index.js"),m=require("../../helpers/utils.js"),h=require("../../shared/Styles.js"),N=require("../../hooks/useExposure.js");const $="specs",j="specs_comparison",w=i.default.forwardRef(({data:o,className:t},l)=>{const{LeftMenu:a,RightMenu:r}=o||{},[y,F]=(0,i.useState)(""),v=(0,i.useRef)({}),d=(0,i.useRef)(null);(0,N.useExposure)(d,{componentType:$,componentName:j,componentTitle:"Specs Comparison"}),(0,i.useImperativeHandle)(l,()=>d.current);const f=e=>e?(0,s.jsx)("div",{className:"specs-comparison__value-wrapper break-all",children:(0,s.jsx)("p",{className:"specs-comparison__value text-sm font-bold text-[#1D1D1F] min-xl:text-base min-xxl:text-lg",dangerouslySetInnerHTML:{__html:e||""}})}):null,T=e=>e.map((n,x)=>{const S=x===0,_=r?.menus?.[0]?.subTitle,c=r?.menus?.[1]?.subTitle,E=c&&c[n],C=/^[✅❌]$/,b=E&&(c[n]!==_?.[n]||C.test(c[n]));return(0,s.jsxs)("div",{className:(0,m.cn)("specs-comparison__row box-border flex w-full overflow-hidden border-t border-t-[#E4E5E6] l:flex-col",S&&"specs-comparison__row--first border-t-0"),children:[(0,s.jsx)(u.Heading,{as:"h3",html:n||"",className:"specs-comparison__spec-label mr-4 flex-1 pt-4 text-base font-bold text-[#000000] l:text-lg min-l:min-w-[216px] min-l:max-w-[216px] min-xl:min-w-[268px] min-xl:max-w-[268px] min-xl:p-6 min-xxl:min-w-[356px] min-xxl:max-w-[356px] min-xxl:text-lg"}),(0,s.jsxs)("div",{className:(0,m.cn)("specs-comparison__values-grid grid flex-1 place-self-center pb-4 pt-2 l:w-full l:gap-4 min-l:gap-8 min-xl:gap-12 min-xl:p-6 min-xxl:gap-16",b?"specs-comparison__values-grid--double grid-cols-2":"specs-comparison__values-grid--single grid-cols-1"),children:[f(_?.[n]),b&&f(c?.[n])]})]},n)}),D=e=>{const{subTitle:n}=e;return T(n)};return(0,s.jsx)("div",{ref:d,"data-ui-component-id":"SpecsComparison",className:(0,m.cn)("specs-comparison w-full overflow-hidden bg-[#F5F5F7]",t),children:(0,s.jsx)("div",{className:"specs-comparison__container container mx-auto",children:a?.data?(0,s.jsxs)("div",{className:"specs-comparison__wrapper my-16 box-border flex w-full overflow-hidden min-l:mb-24 min-xl:mb-32",children:[a.data.length>1?(0,s.jsx)("div",{className:"specs-comparison__sidebar flex l:hidden min-l:mr-6 min-xl:mr-12",children:(0,s.jsx)("div",{className:"specs-comparison__nav box-border overflow-hidden min-l:w-[196px] min-xl:w-[284px] min-xxl:w-[356px]",children:a.data.map(e=>(0,s.jsx)("div",{onClick:()=>{F(e.title),v.current[e.title]?.scrollIntoView({behavior:"smooth"})},title:e.title||"",className:(0,m.cn)("specs-comparison__nav-item box-border cursor-pointer overflow-hidden truncate rounded-btn px-6 py-2 text-base font-bold leading-9 text-[#1D1D1F] min-xxl:py-4 min-xxl:text-lg",y===e.title&&"specs-comparison__nav-item--active bg-[#FFFFFF]"),children:e.title||""},e.title))})}):null,(0,s.jsx)("div",{className:"specs-comparison__content box-border flex-1 overflow-hidden",children:(0,s.jsx)("div",{className:"specs-comparison__sections w-full",children:a.data.map((e,n)=>(0,s.jsxs)("div",{className:"specs-comparison__section w-full overflow-hidden pt-10 first:pt-0",ref:x=>{v.current[e.title]=x},children:[e.title&&(0,s.jsx)(u.Heading,{as:"h2",className:"specs-comparison__section-title mb-6 text-2xl font-bold min-l:text-[32px]",html:e.title||""}),D(e)]},n))})})]}):null})})});w.displayName="SpecsComparison";var q=(0,h.withLayout)(w);
 //# sourceMappingURL=SpecsComparison.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SpecsComparison/SpecsComparison.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useState } from 'react'\nimport { Heading, 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 { SpecsComparisonProps } from './types.js'\n\nconst componentType = 'specs'\nconst componentName = 'specs_comparison'\n\nconst SpecsComparison = React.forwardRef<HTMLDivElement, SpecsComparisonProps>(\n  ({ data, className }, ref) => {\n    const { LeftMenu, RightMenu } = data || {}\n    const [selectItem, setSelectItem] = useState('')\n    const refs = useRef<Record<string, HTMLDivElement | null>>({})\n\n    const boxRef = useRef<HTMLDivElement>(null)\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: 'Specs Comparison',\n    })\n\n    useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    const normalNode = (v: string) => {\n      if (!v) return null\n      return (\n        <div className=\"specs-comparison__value-wrapper break-all\">\n          <p\n            className=\"specs-comparison__value text-sm font-bold text-[#1D1D1F] min-xl:text-base min-xxl:text-lg\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        </div>\n      )\n    }\n\n    const productNode = (subTitle: string[]) => {\n      return subTitle.map((st, idx) => {\n        const isFirstParameter = idx === 0\n        const leftData = RightMenu?.menus?.[0]?.subTitle\n        const rightData = RightMenu?.menus?.[1]?.subTitle\n        const hasRightData = rightData && rightData[st]\n        const reg = /^[\u2705\u274C]$/\n        const isSame =\n          hasRightData &&\n          (rightData[st] !== leftData?.[st] || reg.test(rightData[st]))\n\n        return (\n          <div\n            key={st}\n            className={cn(\n              'specs-comparison__row box-border flex w-full overflow-hidden border-t border-t-[#E4E5E6] l:flex-col',\n              isFirstParameter && 'specs-comparison__row--first border-t-0'\n            )}\n          >\n            <Heading\n              as=\"h3\"\n              html={st || ''}\n              className=\"specs-comparison__spec-label mr-4 flex-1 pt-4 text-base font-bold text-[#000000] l:text-lg min-l:min-w-[216px] min-l:max-w-[216px] min-xl:min-w-[268px] min-xl:max-w-[268px] min-xl:p-6 min-xxl:min-w-[356px] min-xxl:max-w-[356px] min-xxl:text-lg\"\n            />\n            <div\n              className={cn(\n                'specs-comparison__values-grid grid flex-1 place-self-center pb-4 pt-2 l:w-full l:gap-4 min-l:gap-8 min-xl:gap-12 min-xl:p-6 min-xxl:gap-16',\n                isSame ? 'specs-comparison__values-grid--double grid-cols-2' : 'specs-comparison__values-grid--single grid-cols-1'\n              )}\n            >\n              {normalNode(leftData?.[st])}\n              {isSame && normalNode(rightData?.[st])}\n            </div>\n          </div>\n        )\n      })\n    }\n\n    const childrenNode = (node: { subTitle: string[]; isProduct?: boolean }) => {\n      const { subTitle } = node\n      return productNode(subTitle)\n    }\n\n    return (\n      <div\n        ref={boxRef}\n        data-ui-component-id=\"SpecsComparison\"\n        className={cn('specs-comparison w-full overflow-hidden bg-[#F5F5F7]', className)}\n      >\n        <div className=\"specs-comparison__container container mx-auto\">\n          {LeftMenu?.data ? (\n            <div className=\"specs-comparison__wrapper my-16 box-border flex w-full overflow-hidden min-l:mb-24 min-xl:mb-32\">\n              {LeftMenu.data.length > 1 ? (\n                <div className=\"specs-comparison__sidebar flex l:hidden min-l:mr-6 min-xl:mr-12\">\n                  <div className=\"specs-comparison__nav box-border overflow-hidden min-l:w-[196px] min-xl:w-[284px] min-xxl:w-[356px]\">\n                    {LeftMenu.data.map((item) => {\n                      return (\n                        <div\n                          key={item.title}\n                          onClick={() => {\n                            setSelectItem(item.title)\n                            const el = refs.current[item.title]\n                            el?.scrollIntoView({ behavior: 'smooth' })\n                          }}\n                          title={item.title || ''}\n                          className={cn(\n                            'specs-comparison__nav-item box-border cursor-pointer overflow-hidden truncate rounded-lg px-6 py-2 text-base font-bold leading-9 text-[#1D1D1F] min-xxl:py-4 min-xxl:text-lg',\n                            selectItem === item.title && 'specs-comparison__nav-item--active bg-[#FFFFFF]'\n                          )}\n                        >\n                          {item.title || ''}\n                        </div>\n                      )\n                    })}\n                  </div>\n                </div>\n              ) : null}\n              <div className=\"specs-comparison__content box-border flex-1 overflow-hidden\">\n                <div className=\"specs-comparison__sections w-full\">\n                  {LeftMenu.data.map((item, index) => {\n                    return (\n                      <div\n                        key={index}\n                        className=\"specs-comparison__section w-full overflow-hidden pt-10 first:pt-0\"\n                        ref={(r) => {\n                          refs.current[item.title] = r\n                        }}\n                      >\n                        {item.title && (\n                          <Heading\n                            as=\"h2\"\n                            className=\"specs-comparison__section-title mb-6 text-2xl font-bold min-l:text-[32px]\"\n                            html={item.title || ''}\n                          />\n                        )}\n                        {childrenNode(item)}\n                      </div>\n                    )\n                  })}\n                </div>\n              </div>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    )\n  }\n)\n\nSpecsComparison.displayName = 'SpecsComparison'\n\nexport default withLayout(SpecsComparison)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useState } from 'react'\nimport { Heading, 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 { SpecsComparisonProps } from './types.js'\n\nconst componentType = 'specs'\nconst componentName = 'specs_comparison'\n\nconst SpecsComparison = React.forwardRef<HTMLDivElement, SpecsComparisonProps>(\n  ({ data, className }, ref) => {\n    const { LeftMenu, RightMenu } = data || {}\n    const [selectItem, setSelectItem] = useState('')\n    const refs = useRef<Record<string, HTMLDivElement | null>>({})\n\n    const boxRef = useRef<HTMLDivElement>(null)\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: 'Specs Comparison',\n    })\n\n    useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    const normalNode = (v: string) => {\n      if (!v) return null\n      return (\n        <div className=\"specs-comparison__value-wrapper break-all\">\n          <p\n            className=\"specs-comparison__value text-sm font-bold text-[#1D1D1F] min-xl:text-base min-xxl:text-lg\"\n            dangerouslySetInnerHTML={{\n              __html: v || '',\n            }}\n          />\n        </div>\n      )\n    }\n\n    const productNode = (subTitle: string[]) => {\n      return subTitle.map((st, idx) => {\n        const isFirstParameter = idx === 0\n        const leftData = RightMenu?.menus?.[0]?.subTitle\n        const rightData = RightMenu?.menus?.[1]?.subTitle\n        const hasRightData = rightData && rightData[st]\n        const reg = /^[\u2705\u274C]$/\n        const isSame =\n          hasRightData &&\n          (rightData[st] !== leftData?.[st] || reg.test(rightData[st]))\n\n        return (\n          <div\n            key={st}\n            className={cn(\n              'specs-comparison__row box-border flex w-full overflow-hidden border-t border-t-[#E4E5E6] l:flex-col',\n              isFirstParameter && 'specs-comparison__row--first border-t-0'\n            )}\n          >\n            <Heading\n              as=\"h3\"\n              html={st || ''}\n              className=\"specs-comparison__spec-label mr-4 flex-1 pt-4 text-base font-bold text-[#000000] l:text-lg min-l:min-w-[216px] min-l:max-w-[216px] min-xl:min-w-[268px] min-xl:max-w-[268px] min-xl:p-6 min-xxl:min-w-[356px] min-xxl:max-w-[356px] min-xxl:text-lg\"\n            />\n            <div\n              className={cn(\n                'specs-comparison__values-grid grid flex-1 place-self-center pb-4 pt-2 l:w-full l:gap-4 min-l:gap-8 min-xl:gap-12 min-xl:p-6 min-xxl:gap-16',\n                isSame ? 'specs-comparison__values-grid--double grid-cols-2' : 'specs-comparison__values-grid--single grid-cols-1'\n              )}\n            >\n              {normalNode(leftData?.[st])}\n              {isSame && normalNode(rightData?.[st])}\n            </div>\n          </div>\n        )\n      })\n    }\n\n    const childrenNode = (node: { subTitle: string[]; isProduct?: boolean }) => {\n      const { subTitle } = node\n      return productNode(subTitle)\n    }\n\n    return (\n      <div\n        ref={boxRef}\n        data-ui-component-id=\"SpecsComparison\"\n        className={cn('specs-comparison w-full overflow-hidden bg-[#F5F5F7]', className)}\n      >\n        <div className=\"specs-comparison__container container mx-auto\">\n          {LeftMenu?.data ? (\n            <div className=\"specs-comparison__wrapper my-16 box-border flex w-full overflow-hidden min-l:mb-24 min-xl:mb-32\">\n              {LeftMenu.data.length > 1 ? (\n                <div className=\"specs-comparison__sidebar flex l:hidden min-l:mr-6 min-xl:mr-12\">\n                  <div className=\"specs-comparison__nav box-border overflow-hidden min-l:w-[196px] min-xl:w-[284px] min-xxl:w-[356px]\">\n                    {LeftMenu.data.map((item) => {\n                      return (\n                        <div\n                          key={item.title}\n                          onClick={() => {\n                            setSelectItem(item.title)\n                            const el = refs.current[item.title]\n                            el?.scrollIntoView({ behavior: 'smooth' })\n                          }}\n                          title={item.title || ''}\n                          className={cn(\n                            'specs-comparison__nav-item box-border cursor-pointer overflow-hidden truncate rounded-btn px-6 py-2 text-base font-bold leading-9 text-[#1D1D1F] min-xxl:py-4 min-xxl:text-lg',\n                            selectItem === item.title && 'specs-comparison__nav-item--active bg-[#FFFFFF]'\n                          )}\n                        >\n                          {item.title || ''}\n                        </div>\n                      )\n                    })}\n                  </div>\n                </div>\n              ) : null}\n              <div className=\"specs-comparison__content box-border flex-1 overflow-hidden\">\n                <div className=\"specs-comparison__sections w-full\">\n                  {LeftMenu.data.map((item, index) => {\n                    return (\n                      <div\n                        key={index}\n                        className=\"specs-comparison__section w-full overflow-hidden pt-10 first:pt-0\"\n                        ref={(r) => {\n                          refs.current[item.title] = r\n                        }}\n                      >\n                        {item.title && (\n                          <Heading\n                            as=\"h2\"\n                            className=\"specs-comparison__section-title mb-6 text-2xl font-bold min-l:text-[32px]\"\n                            html={item.title || ''}\n                          />\n                        )}\n                        {childrenNode(item)}\n                      </div>\n                    )\n                  })}\n                </div>\n              </div>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    )\n  }\n)\n\nSpecsComparison.displayName = 'SpecsComparison'\n\nexport default withLayout(SpecsComparison)\n"],
+  "mappings": "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",
   "names": ["SpecsComparison_exports", "__export", "SpecsComparison_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "SpecsComparison", "React", "data", "className", "ref", "LeftMenu", "RightMenu", "selectItem", "setSelectItem", "refs", "boxRef", "normalNode", "v", "productNode", "subTitle", "st", "idx", "isFirstParameter", "leftData", "rightData", "hasRightData", "reg", "isSame", "childrenNode", "node", "item", "index", "r"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var D=Object.create;var x=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var l in a)x(t,l,{get:a[l],enumerable:!0})},v=(t,a,l,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of H(a))!M.call(t,p)&&p!==l&&x(t,p,{get:()=>a[p],enumerable:!(c=E(a,p))||c.enumerable});return t};var P=(t,a,l)=>(l=t!=null?D(L(t)):{},v(a||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),R=t=>v(x({},"__esModule",{value:!0}),t);var $={};W($,{default:()=>S});module.exports=R($);var e=require("react/jsx-runtime"),i=P(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),T=require("../../hooks/useExposure.js"),b=require("framer-motion");const z="image",A="tab_with_image",_=i.default.forwardRef(({data:t,className:a},l)=>{const{title:c,subtitle:p,desc:h,image:j,mobileImage:C,datalist:s=[]}=t,f=(0,i.useRef)(null);(0,T.useExposure)(f,{componentType:z,componentName:A,componentTitle:c,componentDescription:h}),(0,i.useImperativeHandle)(l,()=>f.current);const N=(r,o)=>{I(r),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[m,I]=(0,i.useState)(0),u=(0,i.useRef)([]),[w,k]=(0,i.useState)({left:0,width:0});return(0,i.useEffect)(()=>{const r=u.current[m];if(r){const{offsetLeft:o,offsetWidth:d}=r;k({left:o,width:d})}},[m,s.length]),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"TabWithImage",className:(0,g.cn)("tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",a),children:[(0,e.jsxs)("div",{className:"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"tab-with-image__header",children:[(0,e.jsx)(n.Heading,{as:"h3",size:4,html:c,className:"tab-with-image__title"}),(0,e.jsx)(n.Text,{as:"p",size:1,html:h,className:"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:w.left,width:w.width}}),s.map((r,o)=>(0,e.jsx)("div",{ref:d=>{u.current[o]=d},onClick:d=>N(o,d),className:(0,g.cn)("tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",m===o?"tab-with-image__tab--active text-black":"text-white"),children:(0,e.jsx)(n.Heading,{as:"h1",size:1,html:r?.title,className:"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),(0,e.jsx)("div",{className:"tab-with-image__image-wrapper relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]",children:(0,e.jsx)(b.AnimatePresence,{mode:"wait",children:s[m]&&(0,e.jsx)(b.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"tab-with-image__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(n.Picture,{source:`${s[m].image?.url} ,${s[m].imgPad?.url||s[m].image?.url} 1440, ${s[m].imageMob?.url||s[m].image?.url} 767`,alt:s[m].image?.alt,className:"tab-with-image__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},s[m].image?.url)})})]})});_.displayName="TabWithImage";var S=(0,y.withLayout)(_);
+"use strict";"use client";var D=Object.create;var x=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var W=(t,a)=>{for(var l in a)x(t,l,{get:a[l],enumerable:!0})},v=(t,a,l,c)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of H(a))!M.call(t,p)&&p!==l&&x(t,p,{get:()=>a[p],enumerable:!(c=E(a,p))||c.enumerable});return t};var P=(t,a,l)=>(l=t!=null?D(L(t)):{},v(a||!t||!t.__esModule?x(l,"default",{value:t,enumerable:!0}):l,t)),R=t=>v(x({},"__esModule",{value:!0}),t);var $={};W($,{default:()=>S});module.exports=R($);var e=require("react/jsx-runtime"),i=P(require("react")),n=require("../../components/index.js"),g=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),T=require("../../hooks/useExposure.js"),b=require("framer-motion");const z="image",A="tab_with_image",_=i.default.forwardRef(({data:t,className:a},l)=>{const{title:c,subtitle:p,desc:h,image:j,mobileImage:C,datalist:s=[]}=t,f=(0,i.useRef)(null);(0,T.useExposure)(f,{componentType:z,componentName:A,componentTitle:c,componentDescription:h}),(0,i.useImperativeHandle)(l,()=>f.current);const N=(r,o)=>{I(r),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},[m,I]=(0,i.useState)(0),u=(0,i.useRef)([]),[w,k]=(0,i.useState)({left:0,width:0});return(0,i.useEffect)(()=>{const r=u.current[m];if(r){const{offsetLeft:o,offsetWidth:d}=r;k({left:o,width:d})}},[m,s.length]),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"TabWithImage",className:(0,g.cn)("tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]",a),children:[(0,e.jsxs)("div",{className:"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[(0,e.jsxs)("div",{className:"tab-with-image__header",children:[(0,e.jsx)(n.Heading,{as:"h3",size:4,html:c,className:"tab-with-image__title"}),(0,e.jsx)(n.Text,{as:"p",size:1,html:h,className:"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),(0,e.jsx)("div",{className:"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:(0,e.jsxs)("div",{className:"tab-with-image__tabs relative inline-flex rounded-btn bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"tab-with-image__slider absolute bottom-0 top-0 rounded-btn bg-white transition-all duration-300 ease-in-out",style:{left:w.left,width:w.width}}),s.map((r,o)=>(0,e.jsx)("div",{ref:d=>{u.current[o]=d},onClick:d=>N(o,d),className:(0,g.cn)("tab-with-image__tab relative z-10 cursor-pointer rounded-btn px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",m===o?"tab-with-image__tab--active text-black":"text-white"),children:(0,e.jsx)(n.Heading,{as:"h1",size:1,html:r?.title,className:"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),(0,e.jsx)("div",{className:"tab-with-image__image-wrapper relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]",children:(0,e.jsx)(b.AnimatePresence,{mode:"wait",children:s[m]&&(0,e.jsx)(b.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"tab-with-image__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(n.Picture,{source:`${s[m].image?.url} ,${s[m].imgPad?.url||s[m].image?.url} 1440, ${s[m].imageMob?.url||s[m].image?.url} 767`,alt:s[m].image?.alt,className:"tab-with-image__image rounded-box md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] "})},s[m].image?.url)})})]})});_.displayName="TabWithImage";var S=(0,y.withLayout)(_);
 //# sourceMappingURL=TabWithImage.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabWithImage/TabWithImage.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } 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 type { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn(\n        'tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]',\n        className\n      )}\n    >\n      <div className=\"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div className=\"tab-with-image__header\">\n          <Heading as={'h3'} size={4} html={title} className=\"tab-with-image__title\" />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"tab-with-image__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"tab-with-image__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={el => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={e => handleClick(index, e)}\n                className={cn(\n                  'tab-with-image__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'tab-with-image__tab--active text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\"tab-with-image__image-wrapper relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]\">\n        <AnimatePresence mode=\"wait\">\n          {datalist[activeIndex] && (\n            <motion.div\n              key={datalist[activeIndex].image?.url}\n              {...({\n                initial: { opacity: 0 },\n                animate: { opacity: 1 },\n                exit: { opacity: 0 },\n                transition: { duration: 0.3 },\n              } as any)}\n              className=\"tab-with-image__image-motion absolute left-0 top-0 w-full\"\n            >\n              <Picture\n                source={`${datalist[activeIndex].image?.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image?.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image?.url} 767`}\n                alt={datalist[activeIndex].image?.alt}\n                className=\"tab-with-image__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } 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 type { TabWithImageProps, TabWithImageDataItem } from './types.js'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nconst componentType = 'image'\nconst componentName = 'tab_with_image'\n\nconst TabWithImage = React.forwardRef<HTMLDivElement, TabWithImageProps>(({ data, className }, ref) => {\n  const { title, subtitle, desc, image, mobileImage, datalist = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: desc,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const handleClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n    setActiveIndex(index)\n    ;(e.target as HTMLElement).scrollIntoView({\n      behavior: 'smooth', // \u5E73\u6ED1\u6EDA\u52A8\n      inline: 'center', // \u6A2A\u5411\u5C45\u4E2D\u5BF9\u9F50\n      block: 'nearest', // \u5782\u76F4\u65B9\u5411\u4E0D\u52A8\n    })\n  }\n\n  const [activeIndex, setActiveIndex] = useState(0)\n  const tabRefs = useRef<Array<HTMLDivElement | null>>([]) // \u8BB0\u5F55\u6BCF\u4E2Atab\u7684\u4F4D\u7F6E\n  const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n  useEffect(() => {\n    const current = tabRefs.current[activeIndex]\n    if (current) {\n      const { offsetLeft, offsetWidth } = current\n      setSliderStyle({ left: offsetLeft, width: offsetWidth })\n    }\n  }, [activeIndex, datalist.length])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabWithImage\"\n      className={cn(\n        'tab-with-image flex text-[#fff] l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]',\n        className\n      )}\n    >\n      <div className=\"tab-with-image__content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n        <div className=\"tab-with-image__header\">\n          <Heading as={'h3'} size={4} html={title} className=\"tab-with-image__title\" />\n          <Text\n            as={'p'}\n            size={1}\n            html={desc}\n            className=\"tab-with-image__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n          />\n        </div>\n\n        <div className=\"tab-with-image__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n          <div className=\"tab-with-image__tabs relative inline-flex rounded-btn bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n            {/* \u6ED1\u52A8\u80CC\u666F */}\n            <div\n              className=\"tab-with-image__slider absolute bottom-0 top-0 rounded-btn bg-white transition-all duration-300 ease-in-out\"\n              style={{\n                left: sliderStyle.left,\n                width: sliderStyle.width,\n              }}\n            />\n\n            {/* Tab Items */}\n            {datalist.map((item: TabWithImageDataItem, index: number) => (\n              <div\n                key={index}\n                ref={el => {\n                  tabRefs.current[index] = el\n                }}\n                onClick={e => handleClick(index, e)}\n                className={cn(\n                  'tab-with-image__tab relative z-10 cursor-pointer rounded-btn px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n                  activeIndex === index ? 'tab-with-image__tab--active text-black' : 'text-white'\n                )}\n              >\n                <Heading\n                  as=\"h1\"\n                  size={1}\n                  html={item?.title}\n                  className=\"tab-with-image__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n                />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\"tab-with-image__image-wrapper relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]\">\n        <AnimatePresence mode=\"wait\">\n          {datalist[activeIndex] && (\n            <motion.div\n              key={datalist[activeIndex].image?.url}\n              {...({\n                initial: { opacity: 0 },\n                animate: { opacity: 1 },\n                exit: { opacity: 0 },\n                transition: { duration: 0.3 },\n              } as any)}\n              className=\"tab-with-image__image-motion absolute left-0 top-0 w-full\"\n            >\n              <Picture\n                source={`${datalist[activeIndex].image?.url} ,${datalist[activeIndex].imgPad?.url || datalist[activeIndex].image?.url} 1440, ${datalist[activeIndex].imageMob?.url || datalist[activeIndex].image?.url} 767`}\n                alt={datalist[activeIndex].image?.alt}\n                className=\"tab-with-image__image rounded-box md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] \"\n              />\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </section>\n  )\n})\n\nTabWithImage.displayName = 'TabWithImage'\n\nexport default withLayout(TabWithImage)\n"],
+  "mappings": "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",
   "names": ["TabWithImage_exports", "__export", "TabWithImage_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_framer_motion", "componentType", "componentName", "TabWithImage", "React", "data", "className", "ref", "title", "subtitle", "desc", "image", "mobileImage", "datalist", "boxRef", "handleClick", "index", "e", "setActiveIndex", "activeIndex", "tabRefs", "sliderStyle", "setSliderStyle", "current", "offsetLeft", "offsetWidth", "item", "el"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var Q=Object.create;var _=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(n,l)=>{for(var d in l)_(n,d,{get:l[d],enumerable:!0})},P=(n,l,d,b)=>{if(l&&typeof l=="object"||typeof l=="function")for(let h of G(l))!K.call(n,h)&&h!==d&&_(n,h,{get:()=>l[h],enumerable:!(b=U(l,h))||b.enumerable});return n};var Y=(n,l,d)=>(d=n!=null?Q(J(n)):{},P(l||!n||!n.__esModule?_(d,"default",{value:n,enumerable:!0}):d,n)),Z=n=>P(_({},"__esModule",{value:!0}),n);var se={};X(se,{default:()=>ie});module.exports=Z(se);var i=require("react/jsx-runtime"),a=Y(require("react")),f=require("../../components/index.js"),u=require("../../helpers/utils.js"),z=require("../../shared/Styles.js"),j=require("../../hooks/useExposure.js"),T=require("swiper/react"),k=require("swiper/modules"),I=require("framer-motion"),F=require("react-responsive");const $="video",ee="tabs_with_media",te=[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3},{time:2.6,point:12.8,highlightIdx:4},{time:3.2,point:16,highlightIdx:5}],W=a.default.forwardRef(({data:n,className:l},d)=>{const{title:b,poster:h,video:A,mobvideo:B,items:v=[],timeIdx:p=te}=n,[M,V]=(0,a.useState)(null),S=(0,a.useRef)([]),E=(0,a.useRef)(null),y=(0,a.useRef)(null),N=(0,a.useRef)(null);(0,j.useExposure)(N,{componentType:$,componentName:ee,componentTitle:b}),(0,a.useImperativeHandle)(d,()=>N.current);const ae=e=>{const s=E.current,r=S.current[e];if(s&&r){const t=s.getBoundingClientRect(),c=r.getBoundingClientRect().left-t.left-s.clientWidth/2+r.clientWidth/2;s.scrollTo({left:s.scrollLeft+c,behavior:"smooth"})}},R=(0,F.useMediaQuery)({query:"(max-width: 768px)"}),[ne,L,q,x,O]=(0,a.useMemo)(()=>{const r=v.length,t=v?.map((m,c)=>({...m,key:c,index:c}))||[],o=v?.map((m,c)=>({...m,key:c+r,index:c}))||[];return[t,t.concat(o),5,2,r]},[v,R]),[g,C]=(0,a.useState)(x),[w,D]=(0,a.useState)(L.slice(0,q)),H=(e,s,r)=>{if(e!==g&&s!==x){if(s>x){const t=s-x,o=[...w];o.splice(0,t);const m=w[w.length-1]?.key+1,c=[...L].splice(m,t);o.push(...c),D([...o])}if(s<x){const t=x-s,o=[...w];o.splice(-t);const m=w[0]?.key,c=[...L].splice(O+m-t,t);o.unshift(...c),D([...o])}if(C(e),M?.slideTo(e),!r){let t=0;p.forEach(o=>{o.highlightIdx<e&&(t+=o.time)}),y.current&&(y.current.currentTime=t)}}};return(0,a.useEffect)(()=>{const e=y.current;if(!e)return;const s=()=>{const r=e.currentTime;for(let t=0;t<p.length;t++){const o=t===0?0:p[t-1].point;if(r>=o&&r<p[t].point){H(p[t].highlightIdx,p[t].highlightIdx,!0);break}}r>=p[p.length-1].point&&(e.currentTime=0,e.play())};return e.addEventListener("timeupdate",s),()=>{e.removeEventListener("timeupdate",s)}},[M,p]),(0,i.jsxs)("section",{ref:N,"data-ui-component-id":"TabsWithMedia",className:(0,u.cn)("tabs-with-media flex flex-col overflow-hidden text-[#fff] sm:overflow-visible",l),children:[(0,i.jsx)(f.Heading,{as:"h3",size:4,html:b,className:"tabs-with-media__title text-center"}),(0,i.jsx)("div",{className:"tabs-with-media__tabs-wrapper relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible",children:(0,i.jsx)("div",{className:(0,u.cn)("tabs-with-media__tabs-inner mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit"),children:(0,i.jsx)("div",{className:(0,u.cn)("tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]"),ref:E,children:(0,i.jsx)(I.AnimatePresence,{mode:"popLayout",children:w?.map((e,s)=>(0,i.jsx)(I.motion.div,{layout:!0,ref:r=>{S.current[e?.index]=r},onClick:()=>{H(e?.key,s)},className:"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible",initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeOut"},children:(0,i.jsx)("div",{className:"tabs-with-media__tab-inner flex items-center justify-between",children:(0,i.jsxs)("div",{className:(0,u.cn)("tabs-with-media__tab-content flex",{"flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1":g===e?.key}),children:[(0,i.jsx)("div",{className:(0,u.cn)("tabs-with-media__tab-icon flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]",{"h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]":g!==e?.index}),style:g===e?.key?{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))"}:void 0,children:(0,i.jsx)(f.Picture,{source:e?.icon?.url,alt:e?.icon?.alt,className:"tabs-with-media__tab-icon-image h-[22px] w-[22px] md:h-[14px] md:w-[14px]"})}),(0,i.jsx)("div",{className:"tabs-with-media__tab-text-wrapper",children:(0,i.jsx)(f.Heading,{as:"h4",size:2,html:e?.tab,className:(0,u.cn)("tabs-with-media__tab-text dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]",{"h-auto w-[calc-size(auto,size)] px-[6px] opacity-100":g===e?.key})})})]})})},e?.key))})})})}),(0,i.jsx)("div",{className:"tabs-with-media__description-container mt-[16px] lg-desktop:mt-[24px]",children:(0,i.jsx)(T.Swiper,{slidesPerView:1,effect:"fade",fadeEffect:{crossFade:!0},modules:[k.Pagination,k.EffectFade],onSlideChange:e=>{const s=e.realIndex;C(s)},onSwiper:e=>V(e),className:"tabs-with-media__description-swiper",children:v.map((e,s)=>(0,i.jsx)(T.SwiperSlide,{style:{transition:"opacity 1s ease-in-out"},className:"tabs-with-media__description-slide rounded-[26px]",children:(0,i.jsx)("div",{className:"tabs-with-media__description-content",children:(0,i.jsx)(f.Text,{as:"p",size:2,html:e.desc,className:"tabs-with-media__description-text text-center desktop:text-[20px] lg-desktop:text-[18px]"})})},s))})}),(0,i.jsx)("div",{className:"tabs-with-media__video-wrapper mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]",children:(0,i.jsx)("video",{className:"tabs-with-media__video mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]",src:R?B?.url:A?.url,poster:h?.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,ref:y})})]})});W.displayName="TabsWithMedia";var ie=(0,z.withLayout)(W);
+"use strict";"use client";var U=Object.create;var _=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Y=(n,l)=>{for(var c in l)_(n,c,{get:l[c],enumerable:!0})},P=(n,l,c,w)=>{if(l&&typeof l=="object"||typeof l=="function")for(let h of J(l))!X.call(n,h)&&h!==c&&_(n,h,{get:()=>l[h],enumerable:!(w=G(l,h))||w.enumerable});return n};var Z=(n,l,c)=>(c=n!=null?U(K(n)):{},P(l||!n||!n.__esModule?_(c,"default",{value:n,enumerable:!0}):c,n)),$=n=>P(_({},"__esModule",{value:!0}),n);var se={};Y(se,{default:()=>ae});module.exports=$(se);var i=require("react/jsx-runtime"),s=Z(require("react")),f=require("../../components/index.js"),u=require("../../helpers/utils.js"),z=require("../../shared/Styles.js"),j=require("../../hooks/useExposure.js"),T=require("swiper/react"),k=require("swiper/modules"),I=require("framer-motion"),F=require("react-responsive");const ee="video",te="tabs_with_media",ie=[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3},{time:2.6,point:12.8,highlightIdx:4},{time:3.2,point:16,highlightIdx:5}],W=s.default.forwardRef(({data:n,className:l},c)=>{const{title:w,poster:h,video:A,mobvideo:B,items:v=[],timeIdx:p=ie,theme:V="light"}=n,[M,q]=(0,s.useState)(null),S=(0,s.useRef)([]),E=(0,s.useRef)(null),y=(0,s.useRef)(null),N=(0,s.useRef)(null);(0,j.useExposure)(N,{componentType:ee,componentName:te,componentTitle:w}),(0,s.useImperativeHandle)(c,()=>N.current);const ne=e=>{const a=E.current,r=S.current[e];if(a&&r){const t=a.getBoundingClientRect(),d=r.getBoundingClientRect().left-t.left-a.clientWidth/2+r.clientWidth/2;a.scrollTo({left:a.scrollLeft+d,behavior:"smooth"})}},R=(0,F.useMediaQuery)({query:"(max-width: 768px)"}),[oe,L,O,x,Q]=(0,s.useMemo)(()=>{const r=v.length,t=v?.map((m,d)=>({...m,key:d,index:d}))||[],o=v?.map((m,d)=>({...m,key:d+r,index:d}))||[];return[t,t.concat(o),5,2,r]},[v,R]),[g,C]=(0,s.useState)(x),[b,D]=(0,s.useState)(L.slice(0,O)),H=(e,a,r)=>{if(e!==g&&a!==x){if(a>x){const t=a-x,o=[...b];o.splice(0,t);const m=b[b.length-1]?.key+1,d=[...L].splice(m,t);o.push(...d),D([...o])}if(a<x){const t=x-a,o=[...b];o.splice(-t);const m=b[0]?.key,d=[...L].splice(Q+m-t,t);o.unshift(...d),D([...o])}if(C(e),M?.slideTo(e),!r){let t=0;p.forEach(o=>{o.highlightIdx<e&&(t+=o.time)}),y.current&&(y.current.currentTime=t)}}};return(0,s.useEffect)(()=>{const e=y.current;if(!e)return;const a=()=>{const r=e.currentTime;for(let t=0;t<p.length;t++){const o=t===0?0:p[t-1].point;if(r>=o&&r<p[t].point){H(p[t].highlightIdx,p[t].highlightIdx,!0);break}}r>=p[p.length-1].point&&(e.currentTime=0,e.play())};return e.addEventListener("timeupdate",a),()=>{e.removeEventListener("timeupdate",a)}},[M,p]),(0,i.jsxs)("section",{ref:N,"data-ui-component-id":"TabsWithMedia",className:(0,u.cn)("tabs-with-media flex flex-col overflow-hidden text-info-primary sm:overflow-visible",{"aiui-dark":V==="dark"},l),children:[(0,i.jsx)(f.Heading,{as:"h3",size:4,html:w,className:"tabs-with-media__title text-center"}),(0,i.jsx)("div",{className:"tabs-with-media__tabs-wrapper relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible",children:(0,i.jsx)("div",{className:(0,u.cn)("tabs-with-media__tabs-inner mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit"),children:(0,i.jsx)("div",{className:(0,u.cn)("tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]"),ref:E,children:(0,i.jsx)(I.AnimatePresence,{mode:"popLayout",children:b?.map((e,a)=>(0,i.jsx)(I.motion.div,{layout:!0,ref:r=>{S.current[e?.index]=r},onClick:()=>{H(e?.key,a)},className:"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible",initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3,ease:"easeOut"},children:(0,i.jsx)("div",{className:"tabs-with-media__tab-inner flex items-center justify-between",children:(0,i.jsxs)("div",{className:(0,u.cn)("tabs-with-media__tab-content flex",{"flex items-center justify-center gap-[8px] rounded-btn bg-[#fff] p-2 md:gap-[4px] md:p-1":g===e?.key}),children:[(0,i.jsx)("div",{className:(0,u.cn)("tabs-with-media__tab-icon flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]",{"h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]":g!==e?.index}),style:g===e?.key?{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))"}:void 0,children:(0,i.jsx)(f.Picture,{source:e?.icon?.url,alt:e?.icon?.alt,className:"tabs-with-media__tab-icon-image h-[22px] w-[22px] md:h-[14px] md:w-[14px]"})}),(0,i.jsx)("div",{className:"tabs-with-media__tab-text-wrapper",children:(0,i.jsx)(f.Heading,{as:"h4",size:2,html:e?.tab,className:(0,u.cn)("tabs-with-media__tab-text dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]",{"h-auto w-[calc-size(auto,size)] px-[6px] opacity-100":g===e?.key})})})]})})},e?.key))})})})}),(0,i.jsx)("div",{className:"tabs-with-media__description-container mt-[16px] lg-desktop:mt-[24px]",children:(0,i.jsx)(T.Swiper,{slidesPerView:1,effect:"fade",fadeEffect:{crossFade:!0},modules:[k.Pagination,k.EffectFade],onSlideChange:e=>{const a=e.realIndex;C(a)},onSwiper:e=>q(e),className:"tabs-with-media__description-swiper",children:v.map((e,a)=>(0,i.jsx)(T.SwiperSlide,{style:{transition:"opacity 1s ease-in-out"},className:"tabs-with-media__description-slide rounded-btn",children:(0,i.jsx)("div",{className:"tabs-with-media__description-content",children:(0,i.jsx)(f.Text,{as:"p",size:2,html:e.desc,className:"tabs-with-media__description-text text-center desktop:text-[20px] lg-desktop:text-[18px]"})})},a))})}),(0,i.jsx)("div",{className:"tabs-with-media__video-wrapper mt-[24px] overflow-hidden rounded-box laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]",children:(0,i.jsx)("video",{className:"tabs-with-media__video mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]",src:R?B?.url:A?.url,poster:h?.url,playsInline:!0,autoPlay:!0,muted:!0,loop:!0,ref:y})})]})});W.displayName="TabsWithMedia";var ae=(0,z.withLayout)(W);
 //# sourceMappingURL=TabsWithMedia.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabsWithMedia/TabsWithMedia.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useMemo, useRef, useState } 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 type { TabsWithMediaProps, TabItem, TimeIndex } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, EffectFade } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { useMediaQuery } from 'react-responsive'\n\nconst componentType = 'video'\nconst componentName = 'tabs_with_media'\n\n// \u9ED8\u8BA4\u65F6\u95F4\u70B9\u914D\u7F6E\nconst defaultTimeIdx: TimeIndex[] = [\n  { time: 2.4, point: 2.4, highlightIdx: 0 },\n  { time: 2.5, point: 4.9, highlightIdx: 1 },\n  { time: 2.5, point: 7.4, highlightIdx: 2 },\n  { time: 2.8, point: 10.2, highlightIdx: 3 },\n  { time: 2.6, point: 12.8, highlightIdx: 4 },\n  { time: 3.2, point: 16, highlightIdx: 5 },\n]\n\nconst TabsWithMedia = React.forwardRef<HTMLDivElement, TabsWithMediaProps>(({ data, className }, ref) => {\n  const { title, poster, video, mobvideo, items = [], timeIdx = defaultTimeIdx } = data\n\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const tabRefs = useRef<(HTMLDivElement | null)[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(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  const scrollToTabCenter = (index: number) => {\n    const container = scrollContainerRef.current\n    const tab = tabRefs.current[index]\n\n    if (container && tab) {\n      const containerRect = container.getBoundingClientRect()\n      const tabRect = tab.getBoundingClientRect()\n      const offset = tabRect.left - containerRect.left\n      const scroll = offset - container.clientWidth / 2 + tab.clientWidth / 2\n\n      container.scrollTo({\n        left: container.scrollLeft + scroll,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const isMob = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [list, listDouble, row, center, listLength] = useMemo(() => {\n    const row = 5\n    const center = 2\n    const listLength = items.length\n\n    const list =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index,\n          index: index,\n        }\n      }) || []\n\n    // \u4E3A\u7B2C\u4E8C\u4E2A\u5217\u8868\u7684\u5143\u7D20\u521B\u5EFA\u552F\u4E00\u7684 key,\u907F\u514D\u91CD\u590D\n    const listSecond = items?.map((item: TabItem, index: number) => {\n      return {\n        ...item,\n        key: index + listLength,\n        index: index,\n      }\n    }) || []\n\n    return [list, list.concat(listSecond), row, center, listLength]\n  }, [items, isMob])\n\n  const [idx, setIdx] = useState(center)\n\n  const [cureentList, setCureentList] = useState(listDouble.slice(0, row))\n\n  // \u70B9\u51FB tab \u8DF3\u8F6C\u5BF9\u5E94\u89C6\u9891\u4F4D\u7F6E\n  const handleNavClick = (key: number, index: number, isAuto?: boolean) => {\n    if (key === idx) return\n    if (index === center) return\n    if (index > center) {\n      const gap = index - center\n      const copy = [...cureentList]\n      copy.splice(0, gap)\n      const lastkey = (cureentList[cureentList.length - 1] as any)?.key + 1\n      const add = [...listDouble].splice(lastkey, gap)\n      copy.push(...add)\n      setCureentList([...copy])\n    }\n    if (index < center) {\n      const gap = center - index\n      const copy = [...cureentList]\n      copy.splice(-gap)\n      const firstkey = (cureentList[0] as any)?.key\n      const add = [...listDouble].splice(listLength + firstkey - gap, gap)\n      copy.unshift(...add)\n      setCureentList([...copy])\n    }\n\n    setIdx(key)\n    swiper?.slideTo(key)\n\n    if (!isAuto) {\n      let time = 0\n      timeIdx.forEach(item => {\n        if (item.highlightIdx < key) {\n          time += item.time\n        }\n      })\n      if (videoRef.current) {\n        videoRef.current.currentTime = time\n      }\n    }\n  }\n\n  // \u64AD\u653E\u65F6\u6839\u636E\u65F6\u95F4\u5207\u6362 Swiper + tab\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n\n    const handleTimeUpdate = () => {\n      const currentTime = video.currentTime\n\n      // \u81EA\u52A8\u5207\u6362\u5185\u5BB9\n      for (let i = 0; i < timeIdx.length; i++) {\n        const prev = i === 0 ? 0 : timeIdx[i - 1].point\n        if (currentTime >= prev && currentTime < timeIdx[i].point) {\n          handleNavClick(timeIdx[i].highlightIdx, timeIdx[i].highlightIdx, true)\n          break\n        }\n      }\n\n      // \u4FEE\u590D\uFF1A\u64AD\u653E\u5230\u6700\u540E\u540E\u81EA\u52A8\u5F52\u96F6\u5E76\u91CD\u65B0\u64AD\u653E\n      if (currentTime >= timeIdx[timeIdx.length - 1].point) {\n        video.currentTime = 0\n        video.play()\n      }\n    }\n\n    video.addEventListener('timeupdate', handleTimeUpdate)\n    return () => {\n      video.removeEventListener('timeupdate', handleTimeUpdate)\n    }\n  }, [swiper, timeIdx])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabsWithMedia\"\n      className={cn('tabs-with-media flex flex-col overflow-hidden text-[#fff] sm:overflow-visible', className)}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"tabs-with-media__title text-center\" />\n      <div className=\"tabs-with-media__tabs-wrapper relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible\">\n        <div className={cn('tabs-with-media__tabs-inner mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit')}>\n          <div\n            className={cn('tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]')}\n            ref={scrollContainerRef}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {cureentList?.map((item: any, index: number) => (\n                <motion.div\n                  layout\n                  key={item?.key}\n                  ref={el => {\n                    tabRefs.current[item?.index] = el\n                  }}\n                  onClick={() => {\n                    handleNavClick(item?.key, index)\n                  }}\n                  className=\"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible\"\n                  initial={{ opacity: 1 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  transition={{\n                    duration: 0.3,\n                    ease: 'easeOut',\n                  }}\n                >\n                  <div className=\"tabs-with-media__tab-inner flex items-center justify-between\">\n                    <div\n                      className={cn('tabs-with-media__tab-content flex', {\n                        'flex items-center justify-center gap-[8px] rounded-[48px] bg-[#fff] p-2 md:gap-[4px] md:p-1':\n                          idx === item?.key,\n                      })}\n                    >\n                      <div\n                        className={cn(\n                          'tabs-with-media__tab-icon flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]',\n                          {\n                            'h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]':\n                              idx !== item?.index,\n                          }\n                        )}\n                        style={\n                          idx === item?.key\n                            ? {\n                                background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                              }\n                            : undefined\n                        }\n                      >\n                        <Picture\n                          source={item?.icon?.url}\n                          alt={item?.icon?.alt}\n                          className=\"tabs-with-media__tab-icon-image h-[22px] w-[22px] md:h-[14px] md:w-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"tabs-with-media__tab-text-wrapper\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            'tabs-with-media__tab-text dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]',\n                            {\n                              'h-auto w-[calc-size(auto,size)] px-[6px] opacity-100': idx === item?.key,\n                            }\n                          )}\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n      <div className=\"tabs-with-media__description-container mt-[16px] lg-desktop:mt-[24px]\">\n        <Swiper\n          slidesPerView={1}\n          effect=\"fade\"\n          fadeEffect={{ crossFade: true }}\n          modules={[Pagination, EffectFade]}\n          onSlideChange={swiper => {\n            const newIndex = swiper.realIndex\n            setIdx(newIndex)\n          }}\n          onSwiper={swiper => setSwiper(swiper)}\n          className=\"tabs-with-media__description-swiper\"\n        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide key={ind} style={{ transition: 'opacity 1s ease-in-out' }} className=\"tabs-with-media__description-slide rounded-[26px]\">\n              <div className=\"tabs-with-media__description-content\">\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"tabs-with-media__description-text text-center desktop:text-[20px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"tabs-with-media__video-wrapper mt-[24px] overflow-hidden rounded-[22px] laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]\">\n        <video\n          className=\"tabs-with-media__video mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]\"\n          src={isMob ? mobvideo?.url : video?.url}\n          poster={poster?.url}\n          playsInline\n          autoPlay\n          muted\n          loop\n          ref={videoRef}\n        />\n      </div>\n    </section>\n  )\n})\n\nTabsWithMedia.displayName = 'TabsWithMedia'\n\nexport default withLayout(TabsWithMedia)\n"],
-  "mappings": "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",
-  "names": ["TabsWithMedia_exports", "__export", "TabsWithMedia_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_modules", "import_framer_motion", "import_react_responsive", "componentType", "componentName", "defaultTimeIdx", "TabsWithMedia", "React", "data", "className", "ref", "title", "poster", "video", "mobvideo", "items", "timeIdx", "swiper", "setSwiper", "tabRefs", "scrollContainerRef", "videoRef", "boxRef", "scrollToTabCenter", "index", "container", "tab", "containerRect", "scroll", "isMob", "list", "listDouble", "row", "center", "listLength", "item", "listSecond", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useMemo, useRef, useState } 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 type { TabsWithMediaProps, TabItem, TimeIndex } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, EffectFade } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { useMediaQuery } from 'react-responsive'\n\nconst componentType = 'video'\nconst componentName = 'tabs_with_media'\n\n// \u9ED8\u8BA4\u65F6\u95F4\u70B9\u914D\u7F6E\nconst defaultTimeIdx: TimeIndex[] = [\n  { time: 2.4, point: 2.4, highlightIdx: 0 },\n  { time: 2.5, point: 4.9, highlightIdx: 1 },\n  { time: 2.5, point: 7.4, highlightIdx: 2 },\n  { time: 2.8, point: 10.2, highlightIdx: 3 },\n  { time: 2.6, point: 12.8, highlightIdx: 4 },\n  { time: 3.2, point: 16, highlightIdx: 5 },\n]\n\nconst TabsWithMedia = React.forwardRef<HTMLDivElement, TabsWithMediaProps>(({ data, className }, ref) => {\n  const { title, poster, video, mobvideo, items = [], timeIdx = defaultTimeIdx, theme = 'light' } = data\n\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const tabRefs = useRef<(HTMLDivElement | null)[]>([])\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(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  const scrollToTabCenter = (index: number) => {\n    const container = scrollContainerRef.current\n    const tab = tabRefs.current[index]\n\n    if (container && tab) {\n      const containerRect = container.getBoundingClientRect()\n      const tabRect = tab.getBoundingClientRect()\n      const offset = tabRect.left - containerRect.left\n      const scroll = offset - container.clientWidth / 2 + tab.clientWidth / 2\n\n      container.scrollTo({\n        left: container.scrollLeft + scroll,\n        behavior: 'smooth',\n      })\n    }\n  }\n\n  const isMob = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const [list, listDouble, row, center, listLength] = useMemo(() => {\n    const row = 5\n    const center = 2\n    const listLength = items.length\n\n    const list =\n      items?.map((item: TabItem, index: number) => {\n        return {\n          ...item,\n          key: index,\n          index: index,\n        }\n      }) || []\n\n    // \u4E3A\u7B2C\u4E8C\u4E2A\u5217\u8868\u7684\u5143\u7D20\u521B\u5EFA\u552F\u4E00\u7684 key,\u907F\u514D\u91CD\u590D\n    const listSecond = items?.map((item: TabItem, index: number) => {\n      return {\n        ...item,\n        key: index + listLength,\n        index: index,\n      }\n    }) || []\n\n    return [list, list.concat(listSecond), row, center, listLength]\n  }, [items, isMob])\n\n  const [idx, setIdx] = useState(center)\n\n  const [cureentList, setCureentList] = useState(listDouble.slice(0, row))\n\n  // \u70B9\u51FB tab \u8DF3\u8F6C\u5BF9\u5E94\u89C6\u9891\u4F4D\u7F6E\n  const handleNavClick = (key: number, index: number, isAuto?: boolean) => {\n    if (key === idx) return\n    if (index === center) return\n    if (index > center) {\n      const gap = index - center\n      const copy = [...cureentList]\n      copy.splice(0, gap)\n      const lastkey = (cureentList[cureentList.length - 1] as any)?.key + 1\n      const add = [...listDouble].splice(lastkey, gap)\n      copy.push(...add)\n      setCureentList([...copy])\n    }\n    if (index < center) {\n      const gap = center - index\n      const copy = [...cureentList]\n      copy.splice(-gap)\n      const firstkey = (cureentList[0] as any)?.key\n      const add = [...listDouble].splice(listLength + firstkey - gap, gap)\n      copy.unshift(...add)\n      setCureentList([...copy])\n    }\n\n    setIdx(key)\n    swiper?.slideTo(key)\n\n    if (!isAuto) {\n      let time = 0\n      timeIdx.forEach(item => {\n        if (item.highlightIdx < key) {\n          time += item.time\n        }\n      })\n      if (videoRef.current) {\n        videoRef.current.currentTime = time\n      }\n    }\n  }\n\n  // \u64AD\u653E\u65F6\u6839\u636E\u65F6\u95F4\u5207\u6362 Swiper + tab\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video) return\n\n    const handleTimeUpdate = () => {\n      const currentTime = video.currentTime\n\n      // \u81EA\u52A8\u5207\u6362\u5185\u5BB9\n      for (let i = 0; i < timeIdx.length; i++) {\n        const prev = i === 0 ? 0 : timeIdx[i - 1].point\n        if (currentTime >= prev && currentTime < timeIdx[i].point) {\n          handleNavClick(timeIdx[i].highlightIdx, timeIdx[i].highlightIdx, true)\n          break\n        }\n      }\n\n      // \u4FEE\u590D\uFF1A\u64AD\u653E\u5230\u6700\u540E\u540E\u81EA\u52A8\u5F52\u96F6\u5E76\u91CD\u65B0\u64AD\u653E\n      if (currentTime >= timeIdx[timeIdx.length - 1].point) {\n        video.currentTime = 0\n        video.play()\n      }\n    }\n\n    video.addEventListener('timeupdate', handleTimeUpdate)\n    return () => {\n      video.removeEventListener('timeupdate', handleTimeUpdate)\n    }\n  }, [swiper, timeIdx])\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"TabsWithMedia\"\n      className={cn('tabs-with-media flex flex-col overflow-hidden text-info-primary sm:overflow-visible', {\n        'aiui-dark': theme === 'dark',\n      }, className)}\n    >\n      <Heading as=\"h3\" size={4} html={title} className=\"tabs-with-media__title text-center\" />\n      <div className=\"tabs-with-media__tabs-wrapper relative w-full overflow-x-auto scrollbar-hidden sm:overflow-visible\">\n        <div className={cn('tabs-with-media__tabs-inner mx-auto mt-[16px] w-full max-w-[824px] tablet:w-fit')}>\n          <div\n            className={cn('tabs-with-media__tabs-container flex translate-x-0 items-center justify-center gap-[16px] transition-all md:gap-[8px]')}\n            ref={scrollContainerRef}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {cureentList?.map((item: any, index: number) => (\n                <motion.div\n                  layout\n                  key={item?.key}\n                  ref={el => {\n                    tabRefs.current[item?.index] = el\n                  }}\n                  onClick={() => {\n                    handleNavClick(item?.key, index)\n                  }}\n                  className=\"tabs-with-media__tab-item min-w-[28px] flex-none cursor-pointer overflow-hidden sm:overflow-visible\"\n                  initial={{ opacity: 1 }}\n                  animate={{ opacity: 1 }}\n                  exit={{ opacity: 0 }}\n                  transition={{\n                    duration: 0.3,\n                    ease: 'easeOut',\n                  }}\n                >\n                  <div className=\"tabs-with-media__tab-inner flex items-center justify-between\">\n                    <div\n                      className={cn('tabs-with-media__tab-content flex', {\n                        'flex items-center justify-center gap-[8px] rounded-btn bg-[#fff] p-2 md:gap-[4px] md:p-1':\n                          idx === item?.key,\n                      })}\n                    >\n                      <div\n                        className={cn(\n                          'tabs-with-media__tab-icon flex h-[28] w-[28] items-center justify-center rounded-full md:flex-shrink-0 lg-desktop:h-[48px] lg-desktop:w-[48px]',\n                          {\n                            'h-[28px] w-[28px] bg-[#ccc] bg-opacity-50 lg-desktop:h-[48px] lg-desktop:w-[48px]':\n                              idx !== item?.index,\n                          }\n                        )}\n                        style={\n                          idx === item?.key\n                            ? {\n                                background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n                              }\n                            : undefined\n                        }\n                      >\n                        <Picture\n                          source={item?.icon?.url}\n                          alt={item?.icon?.alt}\n                          className=\"tabs-with-media__tab-icon-image h-[22px] w-[22px] md:h-[14px] md:w-[14px]\"\n                        />\n                      </div>\n\n                      <div className=\"tabs-with-media__tab-text-wrapper\">\n                        <Heading\n                          as=\"h4\"\n                          size={2}\n                          html={item?.tab}\n                          className={cn(\n                            'tabs-with-media__tab-text dynamic-width-heading line-clamp-1 h-0 w-0 overflow-hidden whitespace-nowrap text-nowrap text-[#000] opacity-0 transition-all duration-300 ease-linear xs:text-[16px] sm:text-[18px]',\n                            {\n                              'h-auto w-[calc-size(auto,size)] px-[6px] opacity-100': idx === item?.key,\n                            }\n                          )}\n                        />\n                      </div>\n                    </div>\n                  </div>\n                </motion.div>\n              ))}\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n      <div className=\"tabs-with-media__description-container mt-[16px] lg-desktop:mt-[24px]\">\n        <Swiper\n          slidesPerView={1}\n          effect=\"fade\"\n          fadeEffect={{ crossFade: true }}\n          modules={[Pagination, EffectFade]}\n          onSlideChange={swiper => {\n            const newIndex = swiper.realIndex\n            setIdx(newIndex)\n          }}\n          onSwiper={swiper => setSwiper(swiper)}\n          className=\"tabs-with-media__description-swiper\"\n        >\n          {items.map((it: TabItem, ind: number) => (\n            <SwiperSlide key={ind} style={{ transition: 'opacity 1s ease-in-out' }} className=\"tabs-with-media__description-slide rounded-btn\">\n              <div className=\"tabs-with-media__description-content\">\n                <Text\n                  as=\"p\"\n                  size={2}\n                  html={it.desc}\n                  className=\"tabs-with-media__description-text text-center desktop:text-[20px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n      <div className=\"tabs-with-media__video-wrapper mt-[24px] overflow-hidden rounded-box laptop:mt-[32px] desktop:mt-[40px] lg-desktop:mt-[64px]\">\n        <video\n          className=\"tabs-with-media__video mx-auto h-[360px] w-fit desktop:h-[448px] lg-desktop:h-[560px]\"\n          src={isMob ? mobvideo?.url : video?.url}\n          poster={poster?.url}\n          playsInline\n          autoPlay\n          muted\n          loop\n          ref={videoRef}\n        />\n      </div>\n    </section>\n  )\n})\n\nTabsWithMedia.displayName = 'TabsWithMedia'\n\nexport default withLayout(TabsWithMedia)\n"],
+  "mappings": "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",
+  "names": ["TabsWithMedia_exports", "__export", "TabsWithMedia_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_modules", "import_framer_motion", "import_react_responsive", "componentType", "componentName", "defaultTimeIdx", "TabsWithMedia", "React", "data", "className", "ref", "title", "poster", "video", "mobvideo", "items", "timeIdx", "theme", "swiper", "setSwiper", "tabRefs", "scrollContainerRef", "videoRef", "boxRef", "scrollToTabCenter", "index", "container", "tab", "containerRect", "scroll", "isMob", "list", "listDouble", "row", "center", "listLength", "item", "listSecond", "idx", "setIdx", "cureentList", "setCureentList", "handleNavClick", "key", "isAuto", "gap", "copy", "lastkey", "add", "firstkey", "time", "handleTimeUpdate", "currentTime", "i", "prev", "el", "newIndex", "it", "ind"]
 }

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

@@ -1,4 +1,4 @@
-import type { Media } from "../../types/props";
+import type { Media, Theme } from "../../types/props";
 export interface TabItem {
     /** Tab 标签文本 */
     tab: string;
@@ -35,6 +35,8 @@ export interface TabsWithMediaProps {
         items: TabItem[];
         /** 时间点配置（可选，用于视频时间自动切换） */
         timeIdx?: TimeIndex[];
+        /** 主题，默认 light */
+        theme?: Theme;
     };
     /** 自定义类名 */
     className?: string;

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/TabsWithMedia/types.ts"],
-  "sourcesContent": ["import type { Media } from \"../../types/props\"\n\nexport interface TabItem {\n  /** Tab \u6807\u7B7E\u6587\u672C */\n  tab: string\n  /** \u63CF\u8FF0\u6587\u672C */\n  desc: string\n  /** Tab \u56FE\u6807 URL */\n  icon: Media\n  /** \u89C6\u9891\u5C01\u9762\u56FE */\n  poster?: Media\n  /** Tab \u56FE\u6807\uFF08\u53EF\u9009\uFF09 */\n  tabIcon?: Media\n  /** \u89C6\u9891 URL\uFF08\u53EF\u9009\uFF09 */\n  video?: Media\n}\n\nexport interface TimeIndex {\n  /** \u7247\u6BB5\u65F6\u957F */\n  time: number\n  /** \u65F6\u95F4\u8282\u70B9 */\n  point: number\n  /** \u9AD8\u4EAE\u7D22\u5F15 */\n  highlightIdx: number\n}\n\nexport interface TabsWithMediaProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u9ED8\u8BA4\u89C6\u9891\u5C01\u9762\u56FE */\n    poster?: Media\n    /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n    video: Media\n    /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n    mobvideo?: Media\n    /** Tab \u9879\u5217\u8868 */\n    items: TabItem[]\n    /** \u65F6\u95F4\u70B9\u914D\u7F6E\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u89C6\u9891\u65F6\u95F4\u81EA\u52A8\u5207\u6362\uFF09 */\n    timeIdx?: TimeIndex[]\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media, Theme } from \"../../types/props\"\n\nexport interface TabItem {\n  /** Tab \u6807\u7B7E\u6587\u672C */\n  tab: string\n  /** \u63CF\u8FF0\u6587\u672C */\n  desc: string\n  /** Tab \u56FE\u6807 URL */\n  icon: Media\n  /** \u89C6\u9891\u5C01\u9762\u56FE */\n  poster?: Media\n  /** Tab \u56FE\u6807\uFF08\u53EF\u9009\uFF09 */\n  tabIcon?: Media\n  /** \u89C6\u9891 URL\uFF08\u53EF\u9009\uFF09 */\n  video?: Media\n}\n\nexport interface TimeIndex {\n  /** \u7247\u6BB5\u65F6\u957F */\n  time: number\n  /** \u65F6\u95F4\u8282\u70B9 */\n  point: number\n  /** \u9AD8\u4EAE\u7D22\u5F15 */\n  highlightIdx: number\n}\n\nexport interface TabsWithMediaProps {\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title: string\n    /** \u9ED8\u8BA4\u89C6\u9891\u5C01\u9762\u56FE */\n    poster?: Media\n    /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n    video: Media\n    /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n    mobvideo?: Media\n    /** Tab \u9879\u5217\u8868 */\n    items: TabItem[]\n    /** \u65F6\u95F4\u70B9\u914D\u7F6E\uFF08\u53EF\u9009\uFF0C\u7528\u4E8E\u89C6\u9891\u65F6\u95F4\u81EA\u52A8\u5207\u6362\uFF09 */\n    timeIdx?: TimeIndex[]\n    /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n    theme?: Theme\n  }\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var g=Object.create;var n=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var T=(o,r)=>{for(var l in r)n(o,l,{get:r[l],enumerable:!0})},w=(o,r,l,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of N(r))!y.call(o,a)&&a!==l&&n(o,a,{get:()=>r[a],enumerable:!(c=k(r,a))||c.enumerable});return o};var C=(o,r,l)=>(l=o!=null?g(S(o)):{},w(r||!o||!o.__esModule?n(l,"default",{value:o,enumerable:!0}):l,o)),L=o=>w(n({},"__esModule",{value:!0}),o);var j={};T(j,{default:()=>R});module.exports=L(j);var e=require("react/jsx-runtime"),i=C(require("react")),s=require("../../components/index.js"),m=require("../../helpers/utils.js"),v=require("../../shared/Styles.js"),b=require("../../hooks/useExposure.js"),d=require("swiper/react"),p=require("swiper/modules"),M=require("swiper/css"),U=require("swiper/css/navigation"),B=require("swiper/css/pagination"),I=require("swiper/css/effect-coverflow");const E="carousel",D="three_d_carousel",P=()=>(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 scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",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"})]}),z=()=>(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 scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",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"})]}),x=i.default.forwardRef(({data:o,className:r},l)=>{const{title:c,items:a=[]}=o,u=(0,i.useRef)(null),h=(0,i.useRef)(null);return(0,b.useExposure)(h,{componentType:E,componentName:D,componentTitle:c}),(0,i.useImperativeHandle)(l,()=>h.current),(0,e.jsxs)("section",{ref:h,"data-ui-component-id":"ThreeDCarousel",className:(0,m.cn)("three-d-carousel w-full overflow-visible text-white laptop:overflow-hidden",r),children:[(0,e.jsx)(s.Heading,{as:"h1",size:4,html:c,className:"three-d-carousel__title text-left laptop:text-center"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop relative mx-auto mt-[24px] hidden w-full laptop:block",children:[(0,e.jsx)(d.Swiper,{onSwiper:t=>u.current=t,centeredSlides:!0,initialSlide:1,loop:!0,slidesPerView:"auto",loopAdditionalSlides:1,spaceBetween:0,grabCursor:!0,modules:[p.EffectCoverflow,p.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper relative aspect-[1386/502] overflow-visible rounded-[16px]",effect:"coverflow",coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:350,depth:300,modifier:1,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:334,depth:300,modifier:1,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:230,depth:300,modifier:1,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:286,depth:300,modifier:1,slideShadows:!0}}},children:a.map((t,f)=>(0,e.jsx)(d.SwiperSlide,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden",children:({isActive:_})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,m.cn)("three-d-carousel__image mx-auto overflow-hidden rounded-xl shadow-lg"),style:{filter:_?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:"three-d-carousel__image-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",children:[(0,e.jsx)(s.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(s.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px] text-white"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:(0,e.jsx)("button",{className:"three-d-carousel__image-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]})},f))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px]",children:[(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>u.current?.slidePrev(),"aria-label":"Previous slide",children:(0,e.jsx)(P,{})}),(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>u.current?.slideNext(),"aria-label":"Next slide",children:(0,e.jsx)(z,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile mt-[24px] block w-full overflow-visible laptop:hidden",children:(0,e.jsx)(d.Swiper,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:a.map((t,f)=>(0,e.jsxs)(d.SwiperSlide,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[(0,e.jsx)(s.Picture,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile mx-auto overflow-hidden rounded-xl shadow-lg"}),(0,e.jsxs)("div",{className:"three-d-carousel__image-mobile-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",children:[(0,e.jsx)(s.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(s.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)("button",{className:"three-d-carousel__image-mobile-button text-[14px] text-white border border-white rounded-full px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]},f))})})]})});x.displayName="ThreeDCarousel";var R=(0,v.withLayout)(x);
+"use strict";"use client";var g=Object.create;var n=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var T=(o,r)=>{for(var s in r)n(o,s,{get:r[s],enumerable:!0})},v=(o,r,s,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of N(r))!y.call(o,a)&&a!==s&&n(o,a,{get:()=>r[a],enumerable:!(c=k(r,a))||c.enumerable});return o};var C=(o,r,s)=>(s=o!=null?g(S(o)):{},v(r||!o||!o.__esModule?n(s,"default",{value:o,enumerable:!0}):s,o)),L=o=>v(n({},"__esModule",{value:!0}),o);var B={};T(B,{default:()=>j});module.exports=L(B);var e=require("react/jsx-runtime"),i=C(require("react")),l=require("../../components/index.js"),p=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),d=require("swiper/react"),u=require("swiper/modules"),H=require("swiper/css"),M=require("swiper/css/navigation"),U=require("swiper/css/pagination"),I=require("swiper/css/effect-coverflow");const E="carousel",D="three_d_carousel",z=()=>(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 scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",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"})]}),P=()=>(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 scale-[70%] text-white hover:text-[#1f1f1f] lg-desktop:scale-100",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"})]}),x=i.default.forwardRef(({data:o,className:r},s)=>{const{title:c,items:a=[]}=o,h=(0,i.useRef)(null),f=(0,i.useRef)(null);return(0,_.useExposure)(f,{componentType:E,componentName:D,componentTitle:c}),(0,i.useImperativeHandle)(s,()=>f.current),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"ThreeDCarousel",className:(0,p.cn)("three-d-carousel w-full overflow-visible text-white laptop:overflow-hidden",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:c,className:"three-d-carousel__title text-left laptop:text-center"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop relative mx-auto mt-[24px] hidden w-full laptop:block",children:[(0,e.jsx)(d.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 relative aspect-[1386/502] overflow-visible rounded-box",effect:"coverflow",coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:427,depth:300,modifier:1,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:350,depth:300,modifier:1,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:334,depth:300,modifier:1,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:230,depth:300,modifier:1,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:286,depth:300,modifier:1,slideShadows:!0}}},children:a.map((t,m)=>(0,e.jsx)(d.SwiperSlide,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden",children:({isActive:w})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,p.cn)("three-d-carousel__image mx-auto overflow-hidden rounded-box shadow-lg h-full"),imgClassName:"h-full object-cover",style:{filter:w?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:(0,p.cn)("three-d-carousel__image-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",{"aiui-dark":t.theme==="dark","opacity-0":!w}),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 mt-4 desktop:mt-6",children:t.buttonText})})]})]})},m))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls absolute left-[50%] top-[50%] z-20 flex w-full -translate-x-[50%] -translate-y-[50%] justify-between laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px]",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)(z,{})}),(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)(P,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile mt-[24px] block w-full overflow-visible laptop:hidden",children:(0,e.jsx)(d.Swiper,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:a.map((t,m)=>(0,e.jsxs)(d.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 mx-auto overflow-hidden rounded-box shadow-lg"}),(0,e.jsxs)("div",{className:"three-d-carousel__image-mobile-content absolute top-0 left-0 w-full h-full p-[16px] flex flex-col justify-end tablet:p-[24px] desktop:p-[32px] gap-1",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] text-white"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)("button",{className:"three-d-carousel__image-mobile-button text-[14px] text-white border border-white rounded-btn px-[16px] py-[8px] hover:bg-white hover:text-black transition-all duration-300 ease-in-out active:scale-95 mt-3 font-semibold",children:t.buttonText})})]})]},m))})})]})});x.displayName="ThreeDCarousel";var j=(0,b.withLayout)(x);
 //# sourceMappingURL=ThreeDCarousel.js.map