npm - @anker-in/headless-ui - Versions diffs - 1.1.87 → 1.1.88 - Mend

@anker-in/headless-ui 1.1.87 → 1.1.88

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (412) hide show

package/dist/esm/biz-components/MiniCart/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MiniCart/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Button } from '../../components/index.js'\nimport { Text } from '../../components/index.js'\nimport { Heading } from '../../components/index.js'\nimport type { Theme, Img } from '../../types/props.js'\nimport CircleProgress from './CircleProgress.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'cart'\nconst componentName = 'mini_cart'\n\nexport type MiniCartSemanticName =\n  | 'root'\n  | 'content'\n  | 'cartInfo'\n  | 'cartTitle'\n  | 'cartDescription'\n  | 'priceSection'\n  | 'totalPrice'\n  | 'originalPrice'\n  | 'saveAmount'\n  | 'actionButton'\n  | 'itemsGrid'\n  | 'itemGridContainer'\n  | 'gridItem'\n  | 'gridItemOverlay'\n  | 'expandButton'\n  | 'circleProgress'\n  | 'mobileViewMoreButton'\n\n/**\n * \u5706\u5F62\u8FDB\u5EA6\u6761\u914D\u7F6E\n */\nexport interface CircleProgressConfig {\n  /** \u603B\u9636\u6BB5\u6570 (1-4) */\n  totalSteps?: 1 | 2 | 3 | 4\n  /** \u5F53\u524D\u5B8C\u6210\u7684\u9636\u6BB5 (0 \u5230 totalSteps) */\n  currentStep?: number\n  /** \u4E2D\u95F4\u663E\u793A\u7684\u56FE\u7247 */\n  image?: Img\n  /** \u5E95\u90E8\u663E\u793A\u7684\u6587\u6848 */\n  label?: string\n  /** \u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u54C1\u724C\u8272 */\n  progressColor?: string\n  /** \u5E95\u90E8\u6587\u6848\u80CC\u666F\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u54C1\u724C\u8425\u9500\u8272 */\n  labelColor?: string\n  /** \u80CC\u666F\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u5BB9\u5668\u80CC\u666F\u8272 */\n  backgroundColor?: string\n  /** \u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4 48 */\n  size?: number\n  /** laptop \u4EE5\u4E0A\u7EC4\u4EF6\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4 80 */\n  laptopSize?: number\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface MiniCartCopy {\n  emptyCart: string\n  description: string\n  total: string\n  itemsInCart: string\n  totalWithCoupon: string\n  clickToView: string\n  buyNowText: string\n  savingText: string\n}\n\n/**\n * MiniCart \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MiniCartData {\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: MiniCartCopy\n  theme?: 'light' | 'dark'\n  /** \u5730\u533A\u4EE3\u7801\uFF0C\u7528\u4E8E\u4EF7\u683C\u683C\u5F0F\u5316 */\n  locale?: string\n  /** \u662F\u5426\u663E\u793A\u624B\u673A\u7AEF\u67E5\u770B\u66F4\u591A\u6309\u94AE\uFF0C\u9ED8\u8BA4 true */\n  showMobileViewMore?: boolean\n}\n\n/**\n * \u8D2D\u7269\u8F66\u5546\u54C1\u9879\u7C7B\u578B\n */\nexport type CartLineItem = {\n  id: string\n  quantity: number\n  /** \u5546\u54C1\u6807\u7B7E\uFF0C\u5982 \"Free\"\u3001\"Gift\" \u7B49\uFF0C\u663E\u793A\u5728\u5546\u54C1\u56FE\u7247\u5E95\u90E8 */\n  productLabel?: string\n  cost: {\n    totalAmount: {\n      amount: string\n      currencyCode: string\n      formattedPrice: string\n    }\n    subtotalAmount?: {\n      amount: string\n      currencyCode: string\n      formattedPrice?: string\n    }\n  }\n  merchandise: {\n    id: string\n    sku: string\n    /** \u5546\u54C1\u6807\u9898 - MiniCartDialog \u9700\u8981 */\n    title?: string\n    image: {\n      url: string\n      altText: string | null\n    }\n  }\n}\n\n/**\n * \u8D2D\u7269\u8F66\u7C7B\u578B\n */\nexport type Cart = {\n  id: string\n  checkoutUrl: string\n  lineItems: CartLineItem[]\n  cost: {\n    totalAmount: {\n      amount: string\n      currencyCode: string\n      formattedPrice: string\n    }\n    subtotalAmount?: {\n      amount: string\n      currencyCode: string\n      formattedPrice?: string\n    }\n    savingAmount?: {\n      amount?: string\n      currencyCode: string\n      formattedPrice?: string\n    }\n  }\n}\n\nexport interface MiniCartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: MiniCartData\n  /**\n   * \u5404\u90E8\u5206\u7684\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n   */\n  classNames?: Partial<Record<MiniCartSemanticName, string>>\n  /**\n   * \u4EA7\u54C1\u4FE1\u606F\uFF08\u7528\u4E8E\u4E3B\u8981\u5C55\u793A\u7684\u4EA7\u54C1\uFF09\n   */\n  cart: Cart\n  /**\n   * \u5706\u5F62\u8FDB\u5EA6\u6761\u914D\u7F6E\uFF0C\u4E0D\u4F20\u5219\u4E0D\u663E\u793A\u8FDB\u5EA6\u6761\n   */\n  progressConfig?: CircleProgressConfig\n  /**\n   * \u5220\u9664\u5546\u54C1\u9879\u7684\u56DE\u8C03\u51FD\u6570\n   * @param id \u5546\u54C1 ID\n   * @param cart \u8D2D\u7269\u8F66\u6570\u636E\n   * @returns \u652F\u6301\u8FD4\u56DE Promise\uFF0C\u5185\u90E8\u81EA\u52A8\u5904\u7406 loading \u72B6\u6001\n   */\n  onRemoveItem?: (id: string, cart: Cart) => void | Promise<void>\n  /**\n   * \u70B9\u51FB\u7ED3\u7B97\u6309\u94AE\u7684\u56DE\u8C03\u51FD\u6570\n   * @param cart\n   * @returns \u652F\u6301\u8FD4\u56DE Promise\uFF0C\u5185\u90E8\u81EA\u52A8\u5904\u7406 loading \u72B6\u6001\n   */\n  onCheckout?: (cart: Cart) => void | Promise<void>\n  /**\n   * \u70B9\u51FBclick to view\u7684\u56DE\u8C03\u51FD\u6570\n   * @param cart\n   * @returns\n   */\n  onClickToView?: (cart: Cart) => void\n}\n\n/**\n * MiniCart - \u8FF7\u4F60\u8D2D\u7269\u8F66\n *\n * @description \u8FF7\u4F60\u8D2D\u7269\u8F66\uFF08Mini Cart\uFF09\u662F\u4E00\u4E2A\u5E38\u89C1\u7684\u7535\u5546UI\u7EC4\u4EF6\uFF0C\u901A\u5E38\u5728\u7528\u6237\u6D4F\u89C8\u5546\u54C1\u65F6\u4EE5\u5E95\u90E8\u60AC\u6D6E\u7684\u5F62\u5F0F\u51FA\u73B0\uFF0C\u5141\u8BB8\u7528\u6237\u5FEB\u901F\u67E5\u770B\u3001\u7F16\u8F91\u8D2D\u7269\u8F66\u5185\u5BB9\u800C\u4E0D\u79BB\u5F00\u5F53\u524D\u9875\u9762\uFF0C\u540C\u65F6\u53EF\u4EE5\u627F\u8F7D\u6EE1\u8D60\uFF0C\u6EE1\u51CF\u7B49\u6D3B\u52A8\u3002\n */\nconst MiniCart = React.forwardRef<HTMLDivElement, MiniCartProps>(\n  (\n    { className, classNames = {}, data, cart, progressConfig, onRemoveItem, onCheckout, onClickToView, ...props },\n    ref\n  ) => {\n    const boxRef = React.useRef<HTMLDivElement>(null)\n    const { copy, theme = 'light', locale = 'us', showMobileViewMore = true } = data || {}\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: copy?.itemsInCart || 'Mini Cart',\n      componentDescription: copy?.description,\n    })\n\n    React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    // \u6587\u6848\u914D\u7F6E\uFF0C\u5E26\u9ED8\u8BA4\u503C\n    const emptyCart = copy?.emptyCart || 'Your Cart is Empty'\n    const description = copy?.description || ''\n    const itemsInCart = copy?.itemsInCart || 'You have selected {count} items'\n    const total = copy?.total || 'Total {total}'\n    const totalWithCoupon = copy?.totalWithCoupon || 'total: {total} ({subtotal})'\n    const clickToView = copy?.clickToView || 'Click to view cart'\n    const buyNowText = copy?.buyNowText || 'Buy Now'\n    const savingText = copy?.savingText || 'Saving {amount}'\n\n    // \u4ECECart\u5BF9\u8C61\u4E2D\u63D0\u53D6\u6570\u636E\uFF0C\u4F7F\u7528\u53EF\u9009\u94FE\u548C\u9ED8\u8BA4\u503C\n    const items = React.useMemo(() => cart?.lineItems || [], [cart?.lineItems])\n    const itemCount = items.reduce((total, item) => total + (item?.quantity || 0), 0)\n    const isEmpty = itemCount === 0\n\n    // \u63D0\u524D\u8D4B\u503C\u6240\u6709\u91D1\u989D\u76F8\u5173\u53D8\u91CF\n    const totalAmount = parseFloat(cart?.cost?.totalAmount?.amount || '0')\n    const subtotalAmount = parseFloat(cart?.cost?.subtotalAmount?.amount || '0')\n    const savingAmount = parseFloat(cart?.cost?.savingAmount?.amount || '0')\n\n    // \u8BA1\u7B97\u4EF7\u683C\u4FE1\u606F\n    const finalPrice = cart?.cost?.totalAmount?.formattedPrice || ''\n    const originalPrice = subtotalAmount > totalAmount ? cart?.cost?.subtotalAmount?.formattedPrice : null\n    const savingPrice = savingAmount > 0 ? cart?.cost?.savingAmount?.formattedPrice : null\n\n    // \u6EDA\u52A8\u5BB9\u5668\u5F15\u7528\n    const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n\n    // \u79FB\u52A8\u7AEF\u4EA7\u54C1\u5C55\u5F00\u72B6\u6001\n    const [isProductsExpanded, setIsProductsExpanded] = React.useState(false)\n\n    // checkout loading \u72B6\u6001\n    const [checkoutLoading, setCheckoutLoading] = React.useState(false)\n\n    // \u5220\u9664\u5546\u54C1 loading \u72B6\u6001\n    const [removingItemId, setRemovingItemId] = React.useState<string | null>(null)\n\n    // \u5904\u7406\u5220\u9664\u5546\u54C1\n    const handleRemoveItem = async (id: string) => {\n      if (removingItemId) return\n      setRemovingItemId(id)\n      try {\n        await onRemoveItem?.(id, cart)\n      } finally {\n        setRemovingItemId(null)\n      }\n    }\n\n    // \u9F20\u6807\u62D6\u62FD\u6EDA\u52A8\u72B6\u6001\n    const [isDragging, setIsDragging] = React.useState(false)\n    const [startX, setStartX] = React.useState(0)\n    const [scrollLeft, setScrollLeft] = React.useState(0)\n\n    // \u6EDA\u52A8\u4F4D\u7F6E\u72B6\u6001\uFF08\u63A7\u5236\u5DE6\u53F3\u6309\u94AE\u663E\u793A\uFF09\n    const [canScrollLeft, setCanScrollLeft] = React.useState(false)\n    const [canScrollRight, setCanScrollRight] = React.useState(true)\n\n    // \u68C0\u67E5\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u66F4\u65B0\u6309\u94AE\u663E\u793A\u72B6\u6001\n    const updateScrollButtons = React.useCallback(() => {\n      const container = scrollContainerRef.current\n      if (!container) return\n\n      const { scrollLeft, scrollWidth, clientWidth } = container\n      setCanScrollLeft(scrollLeft > 0)\n      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1)\n    }, [])\n\n    // \u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\n    const handleScroll = React.useCallback(() => {\n      updateScrollButtons()\n    }, [updateScrollButtons])\n\n    // \u521D\u59CB\u5316\u548C items \u53D8\u5316\u65F6\u66F4\u65B0\u6EDA\u52A8\u72B6\u6001\n    React.useEffect(() => {\n      updateScrollButtons()\n    }, [items.length, updateScrollButtons])\n\n    // \u9F20\u6807\u62D6\u62FD\u6EDA\u52A8\u5904\u7406\n    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!scrollContainerRef.current) return\n      setIsDragging(true)\n      setStartX(e.pageX - scrollContainerRef.current.offsetLeft)\n      setScrollLeft(scrollContainerRef.current.scrollLeft)\n    }\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isDragging || !scrollContainerRef.current) return\n      e.preventDefault()\n      const x = e.pageX - scrollContainerRef.current.offsetLeft\n      const walk = (x - startX) * 1.5 // \u6EDA\u52A8\u901F\u5EA6\u500D\u6570\n      scrollContainerRef.current.scrollLeft = scrollLeft - walk\n    }\n\n    const handleMouseUp = () => {\n      setIsDragging(false)\n    }\n\n    const handleMouseLeave = () => {\n      setIsDragging(false)\n    }\n\n    // \u6C34\u5E73\u6EDA\u52A8\u51FD\u6570\n    const scrollHorizontally = (direction: 'left' | 'right') => {\n      if (scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const scrollAmount = 100 // \u6BCF\u6B21\u6EDA\u52A8\u7684\u50CF\u7D20\u6570\uFF08\u8C03\u5C0F\u4E00\u4E9B\uFF09\n        container.scrollBy({ left: direction === 'right' ? scrollAmount : -scrollAmount, behavior: 'smooth' })\n      }\n    }\n\n    // \u7BAD\u5934\u56FE\u6807\u7EC4\u4EF6\n    const ArrowIcon = ({ className }: { className?: string }) => (\n      <svg\n        className={className}\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 4L10 8L6 12\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.33\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    )\n\n    // \u5220\u9664\u56FE\u6807\u7EC4\u4EF6\n    const DeleteIcon = ({ className }: { className?: string }) => (\n      <svg\n        className={className}\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M2.5 5H17.5M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667M3.33333 5L4.16667 16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667L16.6667 5M7.5 5V2.5C7.5 2.27899 7.5878 2.06702 7.74408 1.91074C7.90036 1.75446 8.11232 1.66667 8.33333 1.66667H11.6667C11.8877 1.66667 12.0996 1.75446 12.2559 1.91074C12.4122 2.06702 12.5 2.27899 12.5 2.5V5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.25\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    )\n\n    // Render items grid\n    const renderItemsGrid = (theme: Theme) => {\n      if (!items.length) return null\n\n      return (\n        <div className={cn('laptop:bg-container-secondary-0 flex gap-1 rounded-lg p-1', classNames?.itemsGrid)}>\n          {/* \u5DE6\u6EDA\u52A8\u6309\u94AE - \u684C\u9762\u7AEF\u663E\u793A\uFF0C\u5C11\u4E8E5\u4E2A\u5546\u54C1\u65F6\u4E0D\u6E32\u67D3\uFF0C\u6EDA\u52A8\u5230\u5F00\u5934\u65F6\u9690\u85CF\u4F46\u4FDD\u6301\u5360\u4F4D */}\n          {items.length >= 5 && (\n            <button\n              onClick={() => scrollHorizontally('left')}\n              className={cn(\n                'border-border laptop:flex hover:bg-muted-foreground/10 hidden w-[32px] shrink-0 items-center justify-center rounded-lg px-2 transition-colors',\n                !canScrollLeft &&\n                  'laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-ml-1 laptop:py-1 laptop:pl-1 laptop:rounded-r-none',\n                classNames?.expandButton,\n                {\n                  'laptop:bg-container-secondary-0': theme === 'dark',\n                  'laptop:bg-container-primary': theme === 'dark' && !canScrollLeft,\n                }\n              )}\n              aria-label=\"Scroll left to see more items\"\n            >\n              <ArrowIcon className=\"laptop:size-4 size-5 rotate-180\" />\n            </button>\n          )}\n\n          <div\n            ref={scrollContainerRef}\n            onMouseDown={handleMouseDown}\n            onMouseMove={handleMouseMove}\n            onMouseUp={handleMouseUp}\n            onMouseLeave={handleMouseLeave}\n            onScroll={handleScroll}\n            className={cn(\n              'scrollbar-hide laptop:gap-1 laptop:w-[256px] laptop:shrink-0 flex w-full gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n              isDragging ? 'cursor-grabbing' : 'cursor-grab',\n              classNames?.itemGridContainer\n            )}\n          >\n            {items\n              .filter(line => line && line.id)\n              .map(line => {\n                const safeProduct = line.merchandise || {}\n                const safeImage = safeProduct.image || {}\n                const imageUrl = safeImage.url\n                const imageAlt = safeImage.altText || 'Product image'\n                const isLoading = removingItemId === line.id\n\n                return (\n                  <div\n                    key={line.id}\n                    className={cn('laptop:size-12 group relative size-16 shrink-0', classNames?.gridItem)}\n                  >\n                    {imageUrl && (\n                      <img\n                        src={imageUrl}\n                        alt={imageAlt}\n                        draggable={false}\n                        className=\"pointer-events-none size-full select-none rounded-lg object-cover\"\n                      />\n                    )}\n                    {/* \u5220\u9664 loading \u906E\u7F69 */}\n                    {isLoading && (\n                      <div className=\"absolute inset-0 flex items-center justify-center rounded-lg bg-black/50\">\n                        <svg\n                          width=\"20\"\n                          height=\"20\"\n                          viewBox=\"0 0 16 16\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          className=\"animate-spin text-white\"\n                        >\n                          <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" strokeWidth=\"2\" opacity=\"0.3\" />\n                          <path d=\"M14 8a6 6 0 0 0-6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n                        </svg>\n                      </div>\n                    )}\n                    <span\n                      role=\"button\"\n                      onClick={() => handleRemoveItem(line.id)}\n                      className={cn(\n                        'laptop:hidden absolute right-[2px] top-[2px] cursor-pointer',\n                        isLoading && 'pointer-events-none opacity-0'\n                      )}\n                      aria-label=\"delete\"\n                    >\n                      <svg\n                        width=\"16\"\n                        height=\"16\"\n                        viewBox=\"0 0 16 16\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        className=\"pointer-events-none\"\n                      >\n                        <rect x=\"1.33301\" y=\"1.33301\" width=\"13.3333\" height=\"13.3333\" rx=\"6.66667\" fill=\"white\" />\n                        <path\n                          d=\"M5.37705 5.28896C5.57234 5.09402 5.88839 5.09442 6.08347 5.28965L8.08602 7.29358L10.0906 5.28896C10.2858 5.09402 10.6026 5.09395 10.7977 5.28896C10.9928 5.48418 10.9926 5.80078 10.7977 5.99607L8.79312 8.00069L10.7964 10.0053C10.9913 10.2007 10.9909 10.5179 10.7957 10.7131C10.6005 10.908 10.2844 10.9074 10.0893 10.7124L8.08602 8.7078L6.08347 10.7103C5.88821 10.9056 5.57155 10.9057 5.37636 10.7103C5.18148 10.515 5.18132 10.1984 5.37636 10.0032L7.37891 8.00069L5.37636 5.99676C5.18119 5.80143 5.18181 5.48423 5.37705 5.28896Z\"\n                          fill=\"#767880\"\n                        />\n                      </svg>\n                    </span>\n                    {/* \u5546\u54C1\u6807\u7B7E (\u5982 Free Gift) */}\n                    {line.productLabel && (\n                      <div className=\"absolute inset-x-0 bottom-0 flex items-center justify-center\">\n                        <div\n                          className=\"relative flex w-full items-center justify-center rounded-b-lg  px-1 py-px backdrop-blur-sm\"\n                          style={{\n                            backgroundColor: 'rgba(251, 148, 63, 0.60)',\n                          }}\n                        >\n                          <Text size={1} className=\"relative text-center text-white\" html={line.productLabel} />\n                        </div>\n                      </div>\n                    )}\n                    {line.quantity > 1 && !line.productLabel && (\n                      <div className=\"mini-cart-quantity bg-brand-0 laptop:size-4 absolute bottom-0 right-0 flex size-4  items-center justify-center rounded-full text-white\">\n                        <Text className=\"text-sm\" html={String(line.quantity)} />\n                      </div>\n                    )}\n\n                    <div\n                      role=\"button\"\n                      onClick={() => handleRemoveItem(line.id)}\n                      className={cn(\n                        'absolute inset-0 hidden cursor-pointer items-center justify-center rounded-lg bg-black/60 transition-opacity',\n                        'laptop:flex laptop:opacity-0 laptop:group-hover:opacity-100',\n                        isLoading && 'laptop:hidden',\n                        classNames?.gridItemOverlay\n                      )}\n                      aria-label=\"Remove item\"\n                    >\n                      <DeleteIcon className=\"pointer-events-none size-[20px] text-white\" />\n                    </div>\n                  </div>\n                )\n              })}\n\n            {/* \u624B\u673A\u7AEF\u67E5\u770B\u66F4\u591A\u6309\u94AE */}\n            {showMobileViewMore && (\n              <button\n                onClick={() => onClickToView?.(cart)}\n                className={cn(\n                  'bg-container-secondary-0 laptop:hidden flex size-16 shrink-0 items-center justify-center rounded-md',\n                  classNames?.mobileViewMoreButton\n                )}\n                aria-label={clickToView}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"text-info-quaternary\"\n                >\n                  <path\n                    d=\"M7.5 5L12.5 10L7.5 15\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"1.67\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n\n          {/* \u53F3\u6EDA\u52A8\u6309\u94AE - \u684C\u9762\u7AEF\u663E\u793A\uFF0C\u5C11\u4E8E5\u4E2A\u5546\u54C1\u65F6\u4E0D\u6E32\u67D3\uFF0C\u6EDA\u52A8\u5230\u7ED3\u5C3E\u65F6\u9690\u85CF\u4F46\u4FDD\u6301\u5360\u4F4D */}\n          {items.length >= 5 && (\n            <button\n              onClick={() => scrollHorizontally('right')}\n              className={cn(\n                'border-border laptop:flex hover:bg-muted-foreground/10 hidden w-[32px] shrink-0 items-center justify-center rounded-lg px-2 transition-colors',\n                !canScrollRight &&\n                  'laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-mr-1 laptop:py-1 laptop:pr-1 laptop:rounded-l-none',\n                classNames?.expandButton,\n                {\n                  'laptop:bg-container-secondary-0': theme === 'dark',\n                  'laptop:bg-container-primary': theme === 'dark' && !canScrollRight,\n                }\n              )}\n              aria-label=\"Scroll right to see more items\"\n            >\n              <ArrowIcon className=\"laptop:size-4 size-5\" />\n            </button>\n          )}\n        </div>\n      )\n    }\n\n    // Check if cart has items\n    const hasItems = !isEmpty && items.length > 0\n\n    return (\n      <div\n        ref={boxRef}\n        className={cn(\n          'bg-container-secondary-1 text-info-primary tablet:px-6 laptop:px-12 desktop:px-12 lg-desktop:px-[128px] laptop:py-[16px] flex w-full px-4 py-[12px]',\n          // \u79FB\u52A8\u7AEF\u5782\u76F4\u5E03\u5C40\uFF0C\u5927\u5C4F\u5E55\u6C34\u5E73\u5E03\u5C40\n          'flex-col items-stretch gap-3',\n          'laptop:flex-row laptop:items-center laptop:justify-around',\n          hasItems ? 'laptop:items-center laptop:gap-4' : 'laptop:items-center laptop:gap-4',\n          'tablet:gap-6 laptop:gap-8',\n          className,\n          classNames?.root,\n          {\n            'aiui-dark bg-container-primary': theme === 'dark',\n          }\n        )}\n        {...props}\n      >\n        {/* \u79FB\u52A8\u7AEF\uFF1A\u5782\u76F4\u6392\u5217 | \u684C\u9762\u7AEF\uFF1A\u6C34\u5E73\u4E09\u5217\u5E03\u5C40 */}\n        <div\n          className={cn(\n            'laptop:flex-row flex w-full flex-col gap-4',\n            'laptop:flex-1 laptop:items-center laptop:justify-between',\n            'tablet:gap-6 laptop:gap-8',\n            classNames?.content\n          )}\n        >\n          <div\n            className={cn(\n              'relative flex shrink flex-row items-center gap-2',\n              'desktop:gap-4',\n              progressConfig && 'laptop:pl-[104px] pl-[72px]'\n            )}\n          >\n            {/* \u5DE6\u4FA7\u5706\u5F62\u8FDB\u5EA6\u6761 - \u53EA\u6709\u914D\u7F6E\u4E86\u624D\u663E\u793A */}\n            {progressConfig && (\n              <CircleProgress\n                totalSteps={progressConfig.totalSteps}\n                currentStep={progressConfig.currentStep}\n                image={progressConfig.image}\n                label={progressConfig.label}\n                progressColor={progressConfig.progressColor}\n                labelColor={progressConfig.labelColor}\n                backgroundColor={progressConfig.backgroundColor}\n                size={progressConfig.size}\n                laptopSize={progressConfig.laptopSize}\n                className={cn(\n                  'absolute bottom-0 left-0',\n                  'lg-desktop:bottom-auto lg-desktop:top-[-46px] desktop:bottom-auto desktop:top-[-52px]',\n                  classNames?.circleProgress\n                )}\n              />\n            )}\n            {/* Center: Cart info and dynamic content */}\n            <div className=\"laptop:flex-1 flex w-full flex-col\">\n              {/* Cart title area */}\n              <div className={cn('tablet:gap-2 flex flex-col gap-1', classNames?.cartInfo)}>\n                {hasItems ? (\n                  <div className=\"flex w-full items-center gap-2\">\n                    <Heading\n                      size={2}\n                      as=\"h3\"\n                      className={cn('', classNames?.cartTitle)}\n                      html={itemsInCart.replace('{count}', `<span class=\"text-brand-0\">${itemCount || 0}</span>`)}\n                    />\n\n                    {/* Click to view link / Toggle products */}\n                    <Heading\n                      size={1}\n                      as=\"h5\"\n                      onClick={() => {\n                        // \u79FB\u52A8\u7AEF\uFF1A\u5207\u6362\u4EA7\u54C1\u5C55\u5F00\u72B6\u6001\uFF0C\u684C\u9762\u7AEF\uFF1A\u8C03\u7528\u539F\u56DE\u8C03\n                        const isMobile = window.innerWidth < 1025\n                        if (isMobile) {\n                          setIsProductsExpanded(!isProductsExpanded)\n                        } else {\n                          onClickToView?.(cart)\n                        }\n                      }}\n                      className={cn('flex cursor-pointer items-center gap-1', classNames?.expandButton)}\n                    >\n                      {/* \u684C\u9762\u7AEF\u663E\u793A\u6587\u5B57 + \u56FE\u6807\uFF0C\u79FB\u52A8\u7AEF\u53EA\u663E\u793A\u56FE\u6807 */}\n                      <Text\n                        as=\"span\"\n                        size={1}\n                        className=\"desktop:block hidden text-nowrap text-[16px] \"\n                        html={clickToView}\n                      />\n                      <ArrowIcon\n                        className={cn(\n                          'size-4 transition-transform',\n                          isProductsExpanded ? 'laptop:rotate-0 -rotate-90' : 'laptop:rotate-0 rotate-90'\n                        )}\n                      />\n                    </Heading>\n                  </div>\n                ) : (\n                  <Heading\n                    as=\"h3\"\n                    size={2}\n                    className={cn('tablet:text-2xl text-xl font-semibold', classNames?.cartTitle)}\n                    html={emptyCart}\n                  />\n                )}\n              </div>\n\n              {description && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'mini-cart-description text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n                    classNames?.cartDescription\n                  )}\n                  html={description}\n                />\n              )}\n            </div>\n          </div>\n\n          {/* Items grid (\u79FB\u52A8\u7AEF\uFF1A\u6839\u636E\u5C55\u5F00\u72B6\u6001\u663E\u793A\uFF0C\u684C\u9762\u7AEF\uFF1A\u59CB\u7EC8\u663E\u793A) */}\n          {hasItems && (\n            <div className={cn('laptop:block laptop:shrink', isProductsExpanded ? 'block' : 'hidden')}>\n              {renderItemsGrid(theme)}\n            </div>\n          )}\n          {/* \u79FB\u52A8\u7AEF\uFF1A\u5206\u5272\u7EBF\uFF08\u53EA\u5728\u6709\u5546\u54C1\u65F6\u663E\u793A\uFF09 */}\n          {hasItems && <hr className=\"laptop:hidden border-lines w-full border-t\" />}\n\n          {/* Price and button area */}\n          <div\n            className={cn(\n              'tablet:gap-6 laptop:gap-4 laptop:justify-end flex flex-row items-stretch justify-between gap-4',\n              classNames?.priceSection\n            )}\n          >\n            {/* Price info */}\n            <div className=\"flex flex-col items-end justify-center\">\n              {/* Main price row */}\n              <div className=\"flex items-center gap-2\">\n                <Heading\n                  as=\"h6\"\n                  size={2}\n                  className={cn('whitespace-nowrap text-nowrap', classNames?.totalPrice)}\n                  html={total.replace('{total}', finalPrice)}\n                />\n\n                {/* Original price (if discounted) */}\n                {originalPrice && (\n                  <Heading\n                    as=\"h6\"\n                    size={2}\n                    className={cn('text-info-tertiary  whitespace-nowrap line-through', classNames?.originalPrice)}\n                    html={originalPrice}\n                  />\n                )}\n              </div>\n\n              {/* Save amount */}\n              {savingPrice && (\n                <Heading\n                  size={2}\n                  as=\"h6\"\n                  className={cn(\n                    'laptop:text-right text-marketing-1 w-full whitespace-nowrap text-nowrap text-left',\n                    classNames?.saveAmount\n                  )}\n                  html={savingText.replace('{amount}', savingPrice)}\n                />\n              )}\n            </div>\n\n            {/* Action button */}\n            <Button\n              disabled={!hasItems}\n              loading={checkoutLoading}\n              onClick={async () => {\n                if (checkoutLoading) return\n                setCheckoutLoading(true)\n                try {\n                  await onCheckout?.(cart)\n                } finally {\n                  setCheckoutLoading(false)\n                }\n              }}\n              className={cn('whitespace-nowrap', classNames?.actionButton)}\n            >\n              {buyNowText}\n            </Button>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nMiniCart.displayName = 'MiniCart'\nexport default MiniCart\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Button } from '../../components/index.js'\nimport { Text } from '../../components/index.js'\nimport { Heading } from '../../components/index.js'\nimport type { Theme, Img } from '../../types/props.js'\nimport CircleProgress from './CircleProgress.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'cart'\nconst componentName = 'mini_cart'\n\nexport type MiniCartSemanticName =\n  | 'root'\n  | 'content'\n  | 'cartInfo'\n  | 'cartTitle'\n  | 'cartDescription'\n  | 'priceSection'\n  | 'totalPrice'\n  | 'originalPrice'\n  | 'saveAmount'\n  | 'actionButton'\n  | 'itemsGrid'\n  | 'itemGridContainer'\n  | 'gridItem'\n  | 'gridItemOverlay'\n  | 'expandButton'\n  | 'circleProgress'\n  | 'mobileViewMoreButton'\n\n/**\n * \u5706\u5F62\u8FDB\u5EA6\u6761\u914D\u7F6E\n */\nexport interface CircleProgressConfig {\n  /** \u603B\u9636\u6BB5\u6570 (1-4) */\n  totalSteps?: 1 | 2 | 3 | 4\n  /** \u5F53\u524D\u5B8C\u6210\u7684\u9636\u6BB5 (0 \u5230 totalSteps) */\n  currentStep?: number\n  /** \u4E2D\u95F4\u663E\u793A\u7684\u56FE\u7247 */\n  image?: Img\n  /** \u5E95\u90E8\u663E\u793A\u7684\u6587\u6848 */\n  label?: string\n  /** \u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u54C1\u724C\u8272 */\n  progressColor?: string\n  /** \u5E95\u90E8\u6587\u6848\u80CC\u666F\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u54C1\u724C\u8425\u9500\u8272 */\n  labelColor?: string\n  /** \u80CC\u666F\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u5BB9\u5668\u80CC\u666F\u8272 */\n  backgroundColor?: string\n  /** \u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4 48 */\n  size?: number\n  /** laptop \u4EE5\u4E0A\u7EC4\u4EF6\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4 80 */\n  laptopSize?: number\n}\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface MiniCartCopy {\n  emptyCart: string\n  description: string\n  total: string\n  itemsInCart: string\n  totalWithCoupon: string\n  clickToView: string\n  buyNowText: string\n  savingText: string\n}\n\n/**\n * MiniCart \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MiniCartData {\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: MiniCartCopy\n  theme?: 'light' | 'dark'\n  /** \u5730\u533A\u4EE3\u7801\uFF0C\u7528\u4E8E\u4EF7\u683C\u683C\u5F0F\u5316 */\n  locale?: string\n  /** \u662F\u5426\u663E\u793A\u624B\u673A\u7AEF\u67E5\u770B\u66F4\u591A\u6309\u94AE\uFF0C\u9ED8\u8BA4 true */\n  showMobileViewMore?: boolean\n}\n\n/**\n * \u8D2D\u7269\u8F66\u5546\u54C1\u9879\u7C7B\u578B\n */\nexport type CartLineItem = {\n  id: string\n  quantity: number\n  /** \u5546\u54C1\u6807\u7B7E\uFF0C\u5982 \"Free\"\u3001\"Gift\" \u7B49\uFF0C\u663E\u793A\u5728\u5546\u54C1\u56FE\u7247\u5E95\u90E8 */\n  productLabel?: string\n  cost: {\n    totalAmount: {\n      amount: string\n      currencyCode: string\n      formattedPrice: string\n    }\n    subtotalAmount?: {\n      amount: string\n      currencyCode: string\n      formattedPrice?: string\n    }\n  }\n  merchandise: {\n    id: string\n    sku: string\n    /** \u5546\u54C1\u6807\u9898 - MiniCartDialog \u9700\u8981 */\n    title?: string\n    image: {\n      url: string\n      altText: string | null\n    }\n  }\n}\n\n/**\n * \u8D2D\u7269\u8F66\u7C7B\u578B\n */\nexport type Cart = {\n  id: string\n  checkoutUrl: string\n  lineItems: CartLineItem[]\n  cost: {\n    totalAmount: {\n      amount: string\n      currencyCode: string\n      formattedPrice: string\n    }\n    subtotalAmount?: {\n      amount: string\n      currencyCode: string\n      formattedPrice?: string\n    }\n    savingAmount?: {\n      amount?: string\n      currencyCode: string\n      formattedPrice?: string\n    }\n  }\n}\n\nexport interface MiniCartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: MiniCartData\n  /**\n   * \u5404\u90E8\u5206\u7684\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n   */\n  classNames?: Partial<Record<MiniCartSemanticName, string>>\n  /**\n   * \u4EA7\u54C1\u4FE1\u606F\uFF08\u7528\u4E8E\u4E3B\u8981\u5C55\u793A\u7684\u4EA7\u54C1\uFF09\n   */\n  cart: Cart\n  /**\n   * \u5706\u5F62\u8FDB\u5EA6\u6761\u914D\u7F6E\uFF0C\u4E0D\u4F20\u5219\u4E0D\u663E\u793A\u8FDB\u5EA6\u6761\n   */\n  progressConfig?: CircleProgressConfig\n  /**\n   * \u5220\u9664\u5546\u54C1\u9879\u7684\u56DE\u8C03\u51FD\u6570\n   * @param id \u5546\u54C1 ID\n   * @param cart \u8D2D\u7269\u8F66\u6570\u636E\n   * @returns \u652F\u6301\u8FD4\u56DE Promise\uFF0C\u5185\u90E8\u81EA\u52A8\u5904\u7406 loading \u72B6\u6001\n   */\n  onRemoveItem?: (id: string, cart: Cart) => void | Promise<void>\n  /**\n   * \u70B9\u51FB\u7ED3\u7B97\u6309\u94AE\u7684\u56DE\u8C03\u51FD\u6570\n   * @param cart\n   * @returns \u652F\u6301\u8FD4\u56DE Promise\uFF0C\u5185\u90E8\u81EA\u52A8\u5904\u7406 loading \u72B6\u6001\n   */\n  onCheckout?: (cart: Cart) => void | Promise<void>\n  /**\n   * \u70B9\u51FBclick to view\u7684\u56DE\u8C03\u51FD\u6570\n   * @param cart\n   * @returns\n   */\n  onClickToView?: (cart: Cart) => void\n}\n\n/**\n * MiniCart - \u8FF7\u4F60\u8D2D\u7269\u8F66\n *\n * @description \u8FF7\u4F60\u8D2D\u7269\u8F66\uFF08Mini Cart\uFF09\u662F\u4E00\u4E2A\u5E38\u89C1\u7684\u7535\u5546UI\u7EC4\u4EF6\uFF0C\u901A\u5E38\u5728\u7528\u6237\u6D4F\u89C8\u5546\u54C1\u65F6\u4EE5\u5E95\u90E8\u60AC\u6D6E\u7684\u5F62\u5F0F\u51FA\u73B0\uFF0C\u5141\u8BB8\u7528\u6237\u5FEB\u901F\u67E5\u770B\u3001\u7F16\u8F91\u8D2D\u7269\u8F66\u5185\u5BB9\u800C\u4E0D\u79BB\u5F00\u5F53\u524D\u9875\u9762\uFF0C\u540C\u65F6\u53EF\u4EE5\u627F\u8F7D\u6EE1\u8D60\uFF0C\u6EE1\u51CF\u7B49\u6D3B\u52A8\u3002\n */\nconst MiniCart = React.forwardRef<HTMLDivElement, MiniCartProps>(\n  (\n    { className, classNames = {}, data, cart, progressConfig, onRemoveItem, onCheckout, onClickToView, ...props },\n    ref\n  ) => {\n    const boxRef = React.useRef<HTMLDivElement>(null)\n    const { copy, theme = 'light', locale = 'us', showMobileViewMore = true } = data || {}\n\n    useExposure(boxRef, {\n      componentType,\n      componentName,\n      componentTitle: copy?.itemsInCart || 'Mini Cart',\n      componentDescription: copy?.description,\n    })\n\n    React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    // \u6587\u6848\u914D\u7F6E\uFF0C\u5E26\u9ED8\u8BA4\u503C\n    const emptyCart = copy?.emptyCart || 'Your Cart is Empty'\n    const description = copy?.description || ''\n    const itemsInCart = copy?.itemsInCart || 'You have selected {count} items'\n    const total = copy?.total || 'Total {total}'\n    const totalWithCoupon = copy?.totalWithCoupon || 'total: {total} ({subtotal})'\n    const clickToView = copy?.clickToView || 'Click to view cart'\n    const buyNowText = copy?.buyNowText || 'Buy Now'\n    const savingText = copy?.savingText || 'Saving {amount}'\n\n    // \u4ECECart\u5BF9\u8C61\u4E2D\u63D0\u53D6\u6570\u636E\uFF0C\u4F7F\u7528\u53EF\u9009\u94FE\u548C\u9ED8\u8BA4\u503C\n    const items = React.useMemo(() => cart?.lineItems || [], [cart?.lineItems])\n    const itemCount = items.reduce((total, item) => total + (item?.quantity || 0), 0)\n    const isEmpty = itemCount === 0\n\n    // \u63D0\u524D\u8D4B\u503C\u6240\u6709\u91D1\u989D\u76F8\u5173\u53D8\u91CF\n    const totalAmount = parseFloat(cart?.cost?.totalAmount?.amount || '0')\n    const subtotalAmount = parseFloat(cart?.cost?.subtotalAmount?.amount || '0')\n    const savingAmount = parseFloat(cart?.cost?.savingAmount?.amount || '0')\n\n    // \u8BA1\u7B97\u4EF7\u683C\u4FE1\u606F\n    const finalPrice = cart?.cost?.totalAmount?.formattedPrice || ''\n    const originalPrice = subtotalAmount > totalAmount ? cart?.cost?.subtotalAmount?.formattedPrice : null\n    const savingPrice = savingAmount > 0 ? cart?.cost?.savingAmount?.formattedPrice : null\n\n    // \u6EDA\u52A8\u5BB9\u5668\u5F15\u7528\n    const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n\n    // \u79FB\u52A8\u7AEF\u4EA7\u54C1\u5C55\u5F00\u72B6\u6001\n    const [isProductsExpanded, setIsProductsExpanded] = React.useState(false)\n\n    // checkout loading \u72B6\u6001\n    const [checkoutLoading, setCheckoutLoading] = React.useState(false)\n\n    // \u5220\u9664\u5546\u54C1 loading \u72B6\u6001\n    const [removingItemId, setRemovingItemId] = React.useState<string | null>(null)\n\n    // \u5904\u7406\u5220\u9664\u5546\u54C1\n    const handleRemoveItem = async (id: string) => {\n      if (removingItemId) return\n      setRemovingItemId(id)\n      try {\n        await onRemoveItem?.(id, cart)\n      } finally {\n        setRemovingItemId(null)\n      }\n    }\n\n    // \u9F20\u6807\u62D6\u62FD\u6EDA\u52A8\u72B6\u6001\n    const [isDragging, setIsDragging] = React.useState(false)\n    const [startX, setStartX] = React.useState(0)\n    const [scrollLeft, setScrollLeft] = React.useState(0)\n\n    // \u6EDA\u52A8\u4F4D\u7F6E\u72B6\u6001\uFF08\u63A7\u5236\u5DE6\u53F3\u6309\u94AE\u663E\u793A\uFF09\n    const [canScrollLeft, setCanScrollLeft] = React.useState(false)\n    const [canScrollRight, setCanScrollRight] = React.useState(true)\n\n    // \u68C0\u67E5\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u66F4\u65B0\u6309\u94AE\u663E\u793A\u72B6\u6001\n    const updateScrollButtons = React.useCallback(() => {\n      const container = scrollContainerRef.current\n      if (!container) return\n\n      const { scrollLeft, scrollWidth, clientWidth } = container\n      setCanScrollLeft(scrollLeft > 0)\n      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1)\n    }, [])\n\n    // \u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\n    const handleScroll = React.useCallback(() => {\n      updateScrollButtons()\n    }, [updateScrollButtons])\n\n    // \u521D\u59CB\u5316\u548C items \u53D8\u5316\u65F6\u66F4\u65B0\u6EDA\u52A8\u72B6\u6001\n    React.useEffect(() => {\n      updateScrollButtons()\n    }, [items.length, updateScrollButtons])\n\n    // \u9F20\u6807\u62D6\u62FD\u6EDA\u52A8\u5904\u7406\n    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!scrollContainerRef.current) return\n      setIsDragging(true)\n      setStartX(e.pageX - scrollContainerRef.current.offsetLeft)\n      setScrollLeft(scrollContainerRef.current.scrollLeft)\n    }\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isDragging || !scrollContainerRef.current) return\n      e.preventDefault()\n      const x = e.pageX - scrollContainerRef.current.offsetLeft\n      const walk = (x - startX) * 1.5 // \u6EDA\u52A8\u901F\u5EA6\u500D\u6570\n      scrollContainerRef.current.scrollLeft = scrollLeft - walk\n    }\n\n    const handleMouseUp = () => {\n      setIsDragging(false)\n    }\n\n    const handleMouseLeave = () => {\n      setIsDragging(false)\n    }\n\n    // \u6C34\u5E73\u6EDA\u52A8\u51FD\u6570\n    const scrollHorizontally = (direction: 'left' | 'right') => {\n      if (scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const scrollAmount = 100 // \u6BCF\u6B21\u6EDA\u52A8\u7684\u50CF\u7D20\u6570\uFF08\u8C03\u5C0F\u4E00\u4E9B\uFF09\n        container.scrollBy({ left: direction === 'right' ? scrollAmount : -scrollAmount, behavior: 'smooth' })\n      }\n    }\n\n    // \u7BAD\u5934\u56FE\u6807\u7EC4\u4EF6\n    const ArrowIcon = ({ className }: { className?: string }) => (\n      <svg\n        className={className}\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 4L10 8L6 12\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.33\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    )\n\n    // \u5220\u9664\u56FE\u6807\u7EC4\u4EF6\n    const DeleteIcon = ({ className }: { className?: string }) => (\n      <svg\n        className={className}\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M2.5 5H17.5M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667M3.33333 5L4.16667 16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667L16.6667 5M7.5 5V2.5C7.5 2.27899 7.5878 2.06702 7.74408 1.91074C7.90036 1.75446 8.11232 1.66667 8.33333 1.66667H11.6667C11.8877 1.66667 12.0996 1.75446 12.2559 1.91074C12.4122 2.06702 12.5 2.27899 12.5 2.5V5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.25\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    )\n\n    // Render items grid\n    const renderItemsGrid = (theme: Theme) => {\n      if (!items.length) return null\n\n      return (\n        <div className={cn('laptop:bg-container-secondary-0 rounded-box-small flex gap-1 p-1', classNames?.itemsGrid)}>\n          {/* \u5DE6\u6EDA\u52A8\u6309\u94AE - \u684C\u9762\u7AEF\u663E\u793A\uFF0C\u5C11\u4E8E5\u4E2A\u5546\u54C1\u65F6\u4E0D\u6E32\u67D3\uFF0C\u6EDA\u52A8\u5230\u5F00\u5934\u65F6\u9690\u85CF\u4F46\u4FDD\u6301\u5360\u4F4D */}\n          {items.length >= 5 && (\n            <button\n              onClick={() => scrollHorizontally('left')}\n              className={cn(\n                'border-border laptop:flex hover:bg-muted-foreground/10 rounded-box-small hidden w-[32px] shrink-0 items-center justify-center px-2 transition-colors',\n                !canScrollLeft &&\n                  'laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-ml-1 laptop:py-1 laptop:pl-1 laptop:rounded-r-none',\n                classNames?.expandButton,\n                {\n                  'laptop:bg-container-secondary-0': theme === 'dark',\n                  'laptop:bg-container-primary': theme === 'dark' && !canScrollLeft,\n                }\n              )}\n              aria-label=\"Scroll left to see more items\"\n            >\n              <ArrowIcon className=\"laptop:size-4 size-5 rotate-180\" />\n            </button>\n          )}\n\n          <div\n            ref={scrollContainerRef}\n            onMouseDown={handleMouseDown}\n            onMouseMove={handleMouseMove}\n            onMouseUp={handleMouseUp}\n            onMouseLeave={handleMouseLeave}\n            onScroll={handleScroll}\n            className={cn(\n              'scrollbar-hide laptop:gap-1 laptop:w-[256px] laptop:shrink-0 flex w-full gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n              isDragging ? 'cursor-grabbing' : 'cursor-grab',\n              classNames?.itemGridContainer\n            )}\n          >\n            {items\n              .filter(line => line && line.id)\n              .map(line => {\n                const safeProduct = line.merchandise || {}\n                const safeImage = safeProduct.image || {}\n                const imageUrl = safeImage.url\n                const imageAlt = safeImage.altText || 'Product image'\n                const isLoading = removingItemId === line.id\n\n                return (\n                  <div\n                    key={line.id}\n                    className={cn(\n                      'laptop:size-12 bg-container-primary laptop:bg-white rounded-box-small group relative size-16 shrink-0 overflow-hidden',\n                      classNames?.gridItem\n                    )}\n                  >\n                    {imageUrl && (\n                      <img\n                        src={imageUrl}\n                        alt={imageAlt}\n                        draggable={false}\n                        className=\"rounded-box-small pointer-events-none size-full select-none object-cover\"\n                      />\n                    )}\n                    {/* \u5220\u9664 loading \u906E\u7F69 */}\n                    {isLoading && (\n                      <div className=\"rounded-box-small absolute inset-0 flex items-center justify-center bg-black/50\">\n                        <svg\n                          width=\"20\"\n                          height=\"20\"\n                          viewBox=\"0 0 16 16\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          className=\"animate-spin text-white\"\n                        >\n                          <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" strokeWidth=\"2\" opacity=\"0.3\" />\n                          <path d=\"M14 8a6 6 0 0 0-6-6\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n                        </svg>\n                      </div>\n                    )}\n                    <span\n                      role=\"button\"\n                      onClick={() => handleRemoveItem(line.id)}\n                      className={cn(\n                        'laptop:hidden absolute right-[2px] top-[2px] cursor-pointer',\n                        isLoading && 'pointer-events-none opacity-0'\n                      )}\n                      aria-label=\"delete\"\n                    >\n                      <svg\n                        width=\"16\"\n                        height=\"16\"\n                        viewBox=\"0 0 16 16\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        className=\"pointer-events-none\"\n                      >\n                        <rect x=\"1.33301\" y=\"1.33301\" width=\"13.3333\" height=\"13.3333\" rx=\"6.66667\" fill=\"white\" />\n                        <path\n                          d=\"M5.37705 5.28896C5.57234 5.09402 5.88839 5.09442 6.08347 5.28965L8.08602 7.29358L10.0906 5.28896C10.2858 5.09402 10.6026 5.09395 10.7977 5.28896C10.9928 5.48418 10.9926 5.80078 10.7977 5.99607L8.79312 8.00069L10.7964 10.0053C10.9913 10.2007 10.9909 10.5179 10.7957 10.7131C10.6005 10.908 10.2844 10.9074 10.0893 10.7124L8.08602 8.7078L6.08347 10.7103C5.88821 10.9056 5.57155 10.9057 5.37636 10.7103C5.18148 10.515 5.18132 10.1984 5.37636 10.0032L7.37891 8.00069L5.37636 5.99676C5.18119 5.80143 5.18181 5.48423 5.37705 5.28896Z\"\n                          fill=\"#767880\"\n                        />\n                      </svg>\n                    </span>\n                    {/* \u5546\u54C1\u6807\u7B7E (\u5982 Free Gift) */}\n                    {line.productLabel && (\n                      <div className=\"absolute inset-x-0 bottom-0 flex items-center justify-center\">\n                        <div\n                          className=\"relative flex w-full items-center justify-center rounded-b-lg  px-1 py-px backdrop-blur-sm\"\n                          style={{\n                            backgroundColor: 'rgba(251, 148, 63, 0.60)',\n                          }}\n                        >\n                          <Text size={1} className=\"relative text-center text-white\" html={line.productLabel} />\n                        </div>\n                      </div>\n                    )}\n                    {line.quantity > 1 && !line.productLabel && (\n                      <div className=\"mini-cart-quantity bg-brand-0 laptop:size-4 absolute bottom-0 right-0 flex size-4  items-center justify-center rounded-full text-white\">\n                        <Text className=\"text-sm\" html={String(line.quantity)} />\n                      </div>\n                    )}\n\n                    <div\n                      role=\"button\"\n                      onClick={() => handleRemoveItem(line.id)}\n                      className={cn(\n                        'rounded-box-small absolute inset-0 hidden cursor-pointer items-center justify-center bg-black/60 transition-opacity',\n                        'laptop:flex laptop:opacity-0 laptop:group-hover:opacity-100',\n                        isLoading && 'laptop:hidden',\n                        classNames?.gridItemOverlay\n                      )}\n                      aria-label=\"Remove item\"\n                    >\n                      <DeleteIcon className=\"pointer-events-none size-[20px] text-white\" />\n                    </div>\n                  </div>\n                )\n              })}\n\n            {/* \u624B\u673A\u7AEF\u67E5\u770B\u66F4\u591A\u6309\u94AE */}\n            {showMobileViewMore && (\n              <button\n                onClick={() => onClickToView?.(cart)}\n                className={cn(\n                  'bg-container-secondary-0 laptop:hidden flex size-16 shrink-0 items-center justify-center rounded-md',\n                  classNames?.mobileViewMoreButton\n                )}\n                aria-label={clickToView}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  className=\"text-info-quaternary\"\n                >\n                  <path\n                    d=\"M7.5 5L12.5 10L7.5 15\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"1.67\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n\n          {/* \u53F3\u6EDA\u52A8\u6309\u94AE - \u684C\u9762\u7AEF\u663E\u793A\uFF0C\u5C11\u4E8E5\u4E2A\u5546\u54C1\u65F6\u4E0D\u6E32\u67D3\uFF0C\u6EDA\u52A8\u5230\u7ED3\u5C3E\u65F6\u9690\u85CF\u4F46\u4FDD\u6301\u5360\u4F4D */}\n          {items.length >= 5 && (\n            <button\n              onClick={() => scrollHorizontally('right')}\n              className={cn(\n                'border-border laptop:flex hover:bg-muted-foreground/10 rounded-box-small hidden w-[32px] shrink-0 items-center justify-center px-2 transition-colors',\n                !canScrollRight &&\n                  'laptop:bg-container-secondary-1 laptop:text-transparent laptop:pointer-events-none laptop:-my-1 laptop:-mr-1 laptop:py-1 laptop:pr-1 laptop:rounded-l-none',\n                classNames?.expandButton,\n                {\n                  'laptop:bg-container-secondary-0': theme === 'dark',\n                  'laptop:bg-container-primary': theme === 'dark' && !canScrollRight,\n                }\n              )}\n              aria-label=\"Scroll right to see more items\"\n            >\n              <ArrowIcon className=\"laptop:size-4 size-5\" />\n            </button>\n          )}\n        </div>\n      )\n    }\n\n    // Check if cart has items\n    const hasItems = !isEmpty && items.length > 0\n\n    return (\n      <div\n        ref={boxRef}\n        className={cn(\n          'bg-container-secondary-1 text-info-primary tablet:px-6 laptop:px-12 desktop:px-12 lg-desktop:px-[128px] laptop:py-[16px] flex w-full px-4 py-[12px]',\n          // \u79FB\u52A8\u7AEF\u5782\u76F4\u5E03\u5C40\uFF0C\u5927\u5C4F\u5E55\u6C34\u5E73\u5E03\u5C40\n          'flex-col items-stretch gap-3',\n          'laptop:flex-row laptop:items-center laptop:justify-around',\n          hasItems ? 'laptop:items-center laptop:gap-4' : 'laptop:items-center laptop:gap-4',\n          'tablet:gap-6 laptop:gap-8',\n          className,\n          classNames?.root,\n          {\n            'aiui-dark bg-container-primary': theme === 'dark',\n          }\n        )}\n        {...props}\n      >\n        {/* \u79FB\u52A8\u7AEF\uFF1A\u5782\u76F4\u6392\u5217 | \u684C\u9762\u7AEF\uFF1A\u6C34\u5E73\u4E09\u5217\u5E03\u5C40 */}\n        <div\n          className={cn(\n            'laptop:flex-row flex w-full flex-col gap-4',\n            'laptop:flex-1 laptop:items-center laptop:justify-between',\n            'tablet:gap-6 laptop:gap-8',\n            classNames?.content\n          )}\n        >\n          <div\n            className={cn(\n              'relative flex shrink flex-row items-center gap-2',\n              'desktop:gap-4',\n              progressConfig && 'laptop:pl-[104px] pl-[72px]'\n            )}\n          >\n            {/* \u5DE6\u4FA7\u5706\u5F62\u8FDB\u5EA6\u6761 - \u53EA\u6709\u914D\u7F6E\u4E86\u624D\u663E\u793A */}\n            {progressConfig && (\n              <CircleProgress\n                totalSteps={progressConfig.totalSteps}\n                currentStep={progressConfig.currentStep}\n                image={progressConfig.image}\n                label={progressConfig.label}\n                progressColor={progressConfig.progressColor}\n                labelColor={progressConfig.labelColor}\n                backgroundColor={progressConfig.backgroundColor}\n                size={progressConfig.size}\n                laptopSize={progressConfig.laptopSize}\n                className={cn(\n                  'absolute bottom-0 left-0',\n                  'lg-desktop:bottom-auto lg-desktop:top-[-46px] desktop:bottom-auto desktop:top-[-52px]',\n                  classNames?.circleProgress\n                )}\n              />\n            )}\n            {/* Center: Cart info and dynamic content */}\n            <div className=\"laptop:flex-1 flex w-full flex-col\">\n              {/* Cart title area */}\n              <div className={cn('tablet:gap-2 flex flex-col gap-1', classNames?.cartInfo)}>\n                {hasItems ? (\n                  <div className=\"flex w-full items-center gap-2\">\n                    <Heading\n                      size={2}\n                      as=\"h3\"\n                      className={cn('', classNames?.cartTitle)}\n                      html={itemsInCart.replace('{count}', `<span class=\"text-brand-0\">${itemCount || 0}</span>`)}\n                    />\n\n                    {/* Click to view link / Toggle products */}\n                    <Heading\n                      size={1}\n                      as=\"h5\"\n                      onClick={() => {\n                        // \u79FB\u52A8\u7AEF\uFF1A\u5207\u6362\u4EA7\u54C1\u5C55\u5F00\u72B6\u6001\uFF0C\u684C\u9762\u7AEF\uFF1A\u8C03\u7528\u539F\u56DE\u8C03\n                        const isMobile = window.innerWidth < 1025\n                        if (isMobile) {\n                          setIsProductsExpanded(!isProductsExpanded)\n                        } else {\n                          onClickToView?.(cart)\n                        }\n                      }}\n                      className={cn('flex cursor-pointer items-center gap-1', classNames?.expandButton)}\n                    >\n                      {/* \u684C\u9762\u7AEF\u663E\u793A\u6587\u5B57 + \u56FE\u6807\uFF0C\u79FB\u52A8\u7AEF\u53EA\u663E\u793A\u56FE\u6807 */}\n                      <Text\n                        as=\"span\"\n                        size={1}\n                        className=\"desktop:block hidden text-nowrap text-[16px] \"\n                        html={clickToView}\n                      />\n                      <ArrowIcon\n                        className={cn(\n                          'size-4 transition-transform',\n                          isProductsExpanded ? 'laptop:rotate-0 -rotate-90' : 'laptop:rotate-0 rotate-90'\n                        )}\n                      />\n                    </Heading>\n                  </div>\n                ) : (\n                  <Heading\n                    as=\"h3\"\n                    size={2}\n                    className={cn('tablet:text-2xl text-xl', classNames?.cartTitle)}\n                    html={emptyCart}\n                  />\n                )}\n              </div>\n\n              {description && (\n                <Text\n                  size={2}\n                  className={cn(\n                    'mini-cart-description text-info-tertiary desktop:text-[16px] lg-desktop:text-[18px] text-[14px]',\n                    classNames?.cartDescription\n                  )}\n                  html={description}\n                />\n              )}\n            </div>\n          </div>\n\n          {/* Items grid (\u79FB\u52A8\u7AEF\uFF1A\u6839\u636E\u5C55\u5F00\u72B6\u6001\u663E\u793A\uFF0C\u684C\u9762\u7AEF\uFF1A\u59CB\u7EC8\u663E\u793A) */}\n          {hasItems && (\n            <div className={cn('laptop:block laptop:shrink', isProductsExpanded ? 'block' : 'hidden')}>\n              {renderItemsGrid(theme)}\n            </div>\n          )}\n          {/* \u79FB\u52A8\u7AEF\uFF1A\u5206\u5272\u7EBF\uFF08\u53EA\u5728\u6709\u5546\u54C1\u65F6\u663E\u793A\uFF09 */}\n          {hasItems && <hr className=\"laptop:hidden border-lines w-full border-t\" />}\n\n          {/* Price and button area */}\n          <div\n            className={cn(\n              'tablet:gap-6 laptop:gap-4 laptop:justify-end flex flex-row items-stretch justify-between gap-4',\n              classNames?.priceSection\n            )}\n          >\n            {/* Price info */}\n            <div className=\"flex flex-col items-end justify-center\">\n              {/* Main price row */}\n              <div className=\"flex items-center gap-2\">\n                <Heading\n                  as=\"h6\"\n                  size={2}\n                  className={cn('whitespace-nowrap text-nowrap', classNames?.totalPrice)}\n                  html={total.replace('{total}', finalPrice)}\n                />\n\n                {/* Original price (if discounted) */}\n                {originalPrice && (\n                  <Heading\n                    as=\"h6\"\n                    size={2}\n                    className={cn('text-info-tertiary  whitespace-nowrap line-through', classNames?.originalPrice)}\n                    html={originalPrice}\n                  />\n                )}\n              </div>\n\n              {/* Save amount */}\n              {savingPrice && (\n                <Heading\n                  size={2}\n                  as=\"h6\"\n                  className={cn(\n                    'laptop:text-right text-marketing-1 w-full whitespace-nowrap text-nowrap text-left',\n                    classNames?.saveAmount\n                  )}\n                  html={savingText.replace('{amount}', savingPrice)}\n                />\n              )}\n            </div>\n\n            {/* Action button */}\n            <Button\n              disabled={!hasItems}\n              loading={checkoutLoading}\n              onClick={async () => {\n                if (checkoutLoading) return\n                setCheckoutLoading(true)\n                try {\n                  await onCheckout?.(cart)\n                } finally {\n                  setCheckoutLoading(false)\n                }\n              }}\n              className={cn('whitespace-nowrap', classNames?.actionButton)}\n            >\n              {buyNowText}\n            </Button>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nMiniCart.displayName = 'MiniCart'\nexport default MiniCart\n"],
+  "mappings": "aAgUQ,cAAAA,EAiGgB,QAAAC,MAjGhB,oBA9TR,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,UAAAC,OAAc,4BACvB,OAAS,QAAAC,MAAY,4BACrB,OAAS,WAAAC,MAAe,4BAExB,OAAOC,OAAoB,sBAC3B,OAAS,eAAAC,OAAmB,6BAE5B,MAAMC,GAAgB,OAChBC,GAAgB,YA2KhBC,EAAWT,EAAM,WACrB,CACE,CAAE,UAAAU,EAAW,WAAAC,EAAa,CAAC,EAAG,KAAAC,EAAM,KAAAC,EAAM,eAAAC,EAAgB,aAAAC,EAAc,WAAAC,EAAY,cAAAC,EAAe,GAAGC,CAAM,EAC5GC,IACG,CACH,MAAMC,EAASpB,EAAM,OAAuB,IAAI,EAC1C,CAAE,KAAAqB,EAAM,MAAAC,EAAQ,QAAS,OAAAC,GAAS,KAAM,mBAAAC,EAAqB,EAAK,EAAIZ,GAAQ,CAAC,EAErFN,GAAYc,EAAQ,CAClB,cAAAb,GACA,cAAAC,GACA,eAAgBa,GAAM,aAAe,YACrC,qBAAsBA,GAAM,WAC9B,CAAC,EAEDrB,EAAM,oBAAoBmB,EAAK,IAAMC,EAAO,OAAyB,EAGrE,MAAMK,EAAYJ,GAAM,WAAa,qBAC/BK,EAAcL,GAAM,aAAe,GACnCM,EAAcN,GAAM,aAAe,kCACnCO,EAAQP,GAAM,OAAS,gBACvBQ,GAAkBR,GAAM,iBAAmB,8BAC3CS,EAAcT,GAAM,aAAe,qBACnCU,EAAaV,GAAM,YAAc,UACjCW,EAAaX,GAAM,YAAc,kBAGjCY,EAAQjC,EAAM,QAAQ,IAAMa,GAAM,WAAa,CAAC,EAAG,CAACA,GAAM,SAAS,CAAC,EACpEqB,EAAYD,EAAM,OAAO,CAACL,EAAOO,IAASP,GAASO,GAAM,UAAY,GAAI,CAAC,EAC1EC,EAAUF,IAAc,EAGxBG,GAAc,WAAWxB,GAAM,MAAM,aAAa,QAAU,GAAG,EAC/DyB,GAAiB,WAAWzB,GAAM,MAAM,gBAAgB,QAAU,GAAG,EACrE0B,GAAe,WAAW1B,GAAM,MAAM,cAAc,QAAU,GAAG,EAGjE2B,GAAa3B,GAAM,MAAM,aAAa,gBAAkB,GACxD4B,EAAgBH,GAAiBD,GAAcxB,GAAM,MAAM,gBAAgB,eAAiB,KAC5F6B,EAAcH,GAAe,EAAI1B,GAAM,MAAM,cAAc,eAAiB,KAG5E8B,EAAqB3C,EAAM,OAAuB,IAAI,EAGtD,CAAC4C,EAAoBC,EAAqB,EAAI7C,EAAM,SAAS,EAAK,EAGlE,CAAC8C,EAAiBC,CAAkB,EAAI/C,EAAM,SAAS,EAAK,EAG5D,CAACgD,EAAgBC,CAAiB,EAAIjD,EAAM,SAAwB,IAAI,EAGxEkD,EAAmB,MAAOC,GAAe,CAC7C,GAAI,CAAAH,EACJ,CAAAC,EAAkBE,CAAE,EACpB,GAAI,CACF,MAAMpC,IAAeoC,EAAItC,CAAI,CAC/B,QAAE,CACAoC,EAAkB,IAAI,CACxB,EACF,EAGM,CAACG,EAAYC,CAAa,EAAIrD,EAAM,SAAS,EAAK,EAClD,CAACsD,GAAQC,EAAS,EAAIvD,EAAM,SAAS,CAAC,EACtC,CAACwD,GAAYC,EAAa,EAAIzD,EAAM,SAAS,CAAC,EAG9C,CAAC0D,EAAeC,EAAgB,EAAI3D,EAAM,SAAS,EAAK,EACxD,CAAC4D,EAAgBC,EAAiB,EAAI7D,EAAM,SAAS,EAAI,EAGzD8D,EAAsB9D,EAAM,YAAY,IAAM,CAClD,MAAM+D,EAAYpB,EAAmB,QACrC,GAAI,CAACoB,EAAW,OAEhB,KAAM,CAAE,WAAAP,EAAY,YAAAQ,EAAa,YAAAC,CAAY,EAAIF,EACjDJ,GAAiBH,EAAa,CAAC,EAC/BK,GAAkBL,EAAaQ,EAAcC,EAAc,CAAC,CAC9D,EAAG,CAAC,CAAC,EAGCC,GAAelE,EAAM,YAAY,IAAM,CAC3C8D,EAAoB,CACtB,EAAG,CAACA,CAAmB,CAAC,EAGxB9D,EAAM,UAAU,IAAM,CACpB8D,EAAoB,CACtB,EAAG,CAAC7B,EAAM,OAAQ6B,CAAmB,CAAC,EAGtC,MAAMK,GAAmB,GAAwC,CAC1DxB,EAAmB,UACxBU,EAAc,EAAI,EAClBE,GAAU,EAAE,MAAQZ,EAAmB,QAAQ,UAAU,EACzDc,GAAcd,EAAmB,QAAQ,UAAU,EACrD,EAEMyB,GAAmB,GAAwC,CAC/D,GAAI,CAAChB,GAAc,CAACT,EAAmB,QAAS,OAChD,EAAE,eAAe,EAEjB,MAAM0B,GADI,EAAE,MAAQ1B,EAAmB,QAAQ,WAC7BW,IAAU,IAC5BX,EAAmB,QAAQ,WAAaa,GAAaa,CACvD,EAEMC,GAAgB,IAAM,CAC1BjB,EAAc,EAAK,CACrB,EAEMkB,GAAmB,IAAM,CAC7BlB,EAAc,EAAK,CACrB,EAGMmB,EAAsBC,GAAgC,CAC1D,GAAI9B,EAAmB,QAAS,CAC9B,MAAMoB,EAAYpB,EAAmB,QAC/B+B,EAAe,IACrBX,EAAU,SAAS,CAAE,KAAMU,IAAc,QAAUC,EAAe,CAACA,EAAc,SAAU,QAAS,CAAC,CACvG,CACF,EAGMC,EAAY,CAAC,CAAE,UAAAjE,CAAU,IAC7BZ,EAAC,OACC,UAAWY,EACX,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAZ,EAAC,QACC,EAAE,iBACF,OAAO,eACP,YAAY,OACZ,cAAc,QACd,eAAe,QACjB,EACF,EAII8E,GAAa,CAAC,CAAE,UAAAlE,CAAU,IAC9BZ,EAAC,OACC,UAAWY,EACX,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAZ,EAAC,QACC,EAAE,+eACF,OAAO,eACP,YAAY,OACZ,cAAc,QACd,eAAe,QACjB,EACF,EAII+E,GAAmBvD,GAClBW,EAAM,OAGTlC,EAAC,OAAI,UAAWE,EAAG,mEAAoEU,GAAY,SAAS,EAEzG,UAAAsB,EAAM,QAAU,GACfnC,EAAC,UACC,QAAS,IAAM0E,EAAmB,MAAM,EACxC,UAAWvE,EACT,uJACA,CAACyD,GACC,6JACF/C,GAAY,aACZ,CACE,kCAAmCW,IAAU,OAC7C,8BAA+BA,IAAU,QAAU,CAACoC,CACtD,CACF,EACA,aAAW,gCAEX,SAAA5D,EAAC6E,EAAA,CAAU,UAAU,kCAAkC,EACzD,EAGF5E,EAAC,OACC,IAAK4C,EACL,YAAawB,GACb,YAAaC,GACb,UAAWE,GACX,aAAcC,GACd,SAAUL,GACV,UAAWjE,EACT,gLACAmD,EAAa,kBAAoB,cACjCzC,GAAY,iBACd,EAEC,UAAAsB,EACE,OAAO6C,GAAQA,GAAQA,EAAK,EAAE,EAC9B,IAAIA,GAAQ,CAEX,MAAMC,GADcD,EAAK,aAAe,CAAC,GACX,OAAS,CAAC,EAClCE,EAAWD,EAAU,IACrBE,GAAWF,EAAU,SAAW,gBAChCG,EAAYlC,IAAmB8B,EAAK,GAE1C,OACE/E,EAAC,OAEC,UAAWE,EACT,wHACAU,GAAY,QACd,EAEC,UAAAqE,GACClF,EAAC,OACC,IAAKkF,EACL,IAAKC,GACL,UAAW,GACX,UAAU,2EACZ,EAGDC,GACCpF,EAAC,OAAI,UAAU,kFACb,SAAAC,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,0BAEV,UAAAD,EAAC,UAAO,GAAG,IAAI,GAAG,IAAI,EAAE,IAAI,OAAO,eAAe,YAAY,IAAI,QAAQ,MAAM,EAChFA,EAAC,QAAK,EAAE,sBAAsB,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,GAC5F,EACF,EAEFA,EAAC,QACC,KAAK,SACL,QAAS,IAAMoD,EAAiB4B,EAAK,EAAE,EACvC,UAAW7E,EACT,8DACAiF,GAAa,+BACf,EACA,aAAW,SAEX,SAAAnF,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,sBAEV,UAAAD,EAAC,QAAK,EAAE,UAAU,EAAE,UAAU,MAAM,UAAU,OAAO,UAAU,GAAG,UAAU,KAAK,QAAQ,EACzFA,EAAC,QACC,EAAE,ihBACF,KAAK,UACP,GACF,EACF,EAECgF,EAAK,cACJhF,EAAC,OAAI,UAAU,+DACb,SAAAA,EAAC,OACC,UAAU,6FACV,MAAO,CACL,gBAAiB,0BACnB,EAEA,SAAAA,EAACK,EAAA,CAAK,KAAM,EAAG,UAAU,kCAAkC,KAAM2E,EAAK,aAAc,EACtF,EACF,EAEDA,EAAK,SAAW,GAAK,CAACA,EAAK,cAC1BhF,EAAC,OAAI,UAAU,yIACb,SAAAA,EAACK,EAAA,CAAK,UAAU,UAAU,KAAM,OAAO2E,EAAK,QAAQ,EAAG,EACzD,EAGFhF,EAAC,OACC,KAAK,SACL,QAAS,IAAMoD,EAAiB4B,EAAK,EAAE,EACvC,UAAW7E,EACT,sHACA,8DACAiF,GAAa,gBACbvE,GAAY,eACd,EACA,aAAW,cAEX,SAAAb,EAAC8E,GAAA,CAAW,UAAU,6CAA6C,EACrE,IArFKE,EAAK,EAsFZ,CAEJ,CAAC,EAGFtD,GACC1B,EAAC,UACC,QAAS,IAAMmB,IAAgBJ,CAAI,EACnC,UAAWZ,EACT,sGACAU,GAAY,oBACd,EACA,aAAYmB,EAEZ,SAAAhC,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,uBAEV,SAAAA,EAAC,QACC,EAAE,wBACF,OAAO,eACP,YAAY,OACZ,cAAc,QACd,eAAe,QACjB,EACF,EACF,GAEJ,EAGCmC,EAAM,QAAU,GACfnC,EAAC,UACC,QAAS,IAAM0E,EAAmB,OAAO,EACzC,UAAWvE,EACT,uJACA,CAAC2D,GACC,6JACFjD,GAAY,aACZ,CACE,kCAAmCW,IAAU,OAC7C,8BAA+BA,IAAU,QAAU,CAACsC,CACtD,CACF,EACA,aAAW,iCAEX,SAAA9D,EAAC6E,EAAA,CAAU,UAAU,uBAAuB,EAC9C,GAEJ,EA3LwB,KAgMtBQ,EAAW,CAAC/C,GAAWH,EAAM,OAAS,EAE5C,OACEnC,EAAC,OACC,IAAKsB,EACL,UAAWnB,EACT,sJAEA,+BACA,4DACW,mCACX,4BACAS,EACAC,GAAY,KACZ,CACE,iCAAkCW,IAAU,MAC9C,CACF,EACC,GAAGJ,EAGJ,SAAAnB,EAAC,OACC,UAAWE,EACT,6CACA,2DACA,4BACAU,GAAY,OACd,EAEA,UAAAZ,EAAC,OACC,UAAWE,EACT,mDACA,gBACAa,GAAkB,6BACpB,EAGC,UAAAA,GACChB,EAACO,GAAA,CACC,WAAYS,EAAe,WAC3B,YAAaA,EAAe,YAC5B,MAAOA,EAAe,MACtB,MAAOA,EAAe,MACtB,cAAeA,EAAe,cAC9B,WAAYA,EAAe,WAC3B,gBAAiBA,EAAe,gBAChC,KAAMA,EAAe,KACrB,WAAYA,EAAe,WAC3B,UAAWb,EACT,2BACA,wFACAU,GAAY,cACd,EACF,EAGFZ,EAAC,OAAI,UAAU,qCAEb,UAAAD,EAAC,OAAI,UAAWG,EAAG,mCAAoCU,GAAY,QAAQ,EACxE,SAAAwE,EACCpF,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACM,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAWH,EAAG,GAAIU,GAAY,SAAS,EACvC,KAAMgB,EAAY,QAAQ,UAAW,8BAA8BO,GAAa,CAAC,SAAS,EAC5F,EAGAnC,EAACK,EAAA,CACC,KAAM,EACN,GAAG,KACH,QAAS,IAAM,CAEI,OAAO,WAAa,KAEnCyC,GAAsB,CAACD,CAAkB,EAEzC3B,IAAgBJ,CAAI,CAExB,EACA,UAAWZ,EAAG,yCAA0CU,GAAY,YAAY,EAGhF,UAAAb,EAACK,EAAA,CACC,GAAG,OACH,KAAM,EACN,UAAU,gDACV,KAAM2B,EACR,EACAhC,EAAC6E,EAAA,CACC,UAAW1E,EACT,8BACA2C,EAAqB,6BAA+B,2BACtD,EACF,GACF,GACF,EAEA9C,EAACM,EAAA,CACC,GAAG,KACH,KAAM,EACN,UAAWH,EAAG,0BAA2BU,GAAY,SAAS,EAC9D,KAAMc,EACR,EAEJ,EAECC,GACC5B,EAACK,EAAA,CACC,KAAM,EACN,UAAWF,EACT,kGACAU,GAAY,eACd,EACA,KAAMe,EACR,GAEJ,GACF,EAGCyD,GACCrF,EAAC,OAAI,UAAWG,EAAG,6BAA8B2C,EAAqB,QAAU,QAAQ,EACrF,SAAAiC,GAAgBvD,CAAK,EACxB,EAGD6D,GAAYrF,EAAC,MAAG,UAAU,6CAA6C,EAGxEC,EAAC,OACC,UAAWE,EACT,iGACAU,GAAY,YACd,EAGA,UAAAZ,EAAC,OAAI,UAAU,yCAEb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACM,EAAA,CACC,GAAG,KACH,KAAM,EACN,UAAWH,EAAG,gCAAiCU,GAAY,UAAU,EACrE,KAAMiB,EAAM,QAAQ,UAAWY,EAAU,EAC3C,EAGCC,GACC3C,EAACM,EAAA,CACC,GAAG,KACH,KAAM,EACN,UAAWH,EAAG,qDAAsDU,GAAY,aAAa,EAC7F,KAAM8B,EACR,GAEJ,EAGCC,GACC5C,EAACM,EAAA,CACC,KAAM,EACN,GAAG,KACH,UAAWH,EACT,oFACAU,GAAY,UACd,EACA,KAAMqB,EAAW,QAAQ,WAAYU,CAAW,EAClD,GAEJ,EAGA5C,EAACI,GAAA,CACC,SAAU,CAACiF,EACX,QAASrC,EACT,QAAS,SAAY,CACnB,GAAI,CAAAA,EACJ,CAAAC,EAAmB,EAAI,EACvB,GAAI,CACF,MAAM/B,IAAaH,CAAI,CACzB,QAAE,CACAkC,EAAmB,EAAK,CAC1B,EACF,EACA,UAAW9C,EAAG,oBAAqBU,GAAY,YAAY,EAE1D,SAAAoB,EACH,GACF,GACF,EACF,CAEJ,CACF,EAEAtB,EAAS,YAAc,WACvB,IAAO2E,GAAQ3E",
   "names": ["jsx", "jsxs", "React", "cn", "Button", "Text", "Heading", "CircleProgress", "useExposure", "componentType", "componentName", "MiniCart", "className", "classNames", "data", "cart", "progressConfig", "onRemoveItem", "onCheckout", "onClickToView", "props", "ref", "boxRef", "copy", "theme", "locale", "showMobileViewMore", "emptyCart", "description", "itemsInCart", "total", "totalWithCoupon", "clickToView", "buyNowText", "savingText", "items", "itemCount", "item", "isEmpty", "totalAmount", "subtotalAmount", "savingAmount", "finalPrice", "originalPrice", "savingPrice", "scrollContainerRef", "isProductsExpanded", "setIsProductsExpanded", "checkoutLoading", "setCheckoutLoading", "removingItemId", "setRemovingItemId", "handleRemoveItem", "id", "isDragging", "setIsDragging", "startX", "setStartX", "scrollLeft", "setScrollLeft", "canScrollLeft", "setCanScrollLeft", "canScrollRight", "setCanScrollRight", "updateScrollButtons", "container", "scrollWidth", "clientWidth", "handleScroll", "handleMouseDown", "handleMouseMove", "walk", "handleMouseUp", "handleMouseLeave", "scrollHorizontally", "direction", "scrollAmount", "ArrowIcon", "DeleteIcon", "renderItemsGrid", "line", "safeImage", "imageUrl", "imageAlt", "isLoading", "hasItems", "MiniCart_default"]
 }

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
             items: Item[];
         };
     };
-} & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {
+} & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as A,jsx as t,jsxs as l}from"react/jsx-runtime";import Y,{useState as L,useEffect as q,useRef as O}from"react";import{useMediaQuery as Z}from"react-responsive";import{withLayout as F}from"../../shared/Styles.js";import R from"../../components/picture.js";import U from"../../components/button.js";import{Heading as E}from"../../components/heading.js";import{VideoModal as J}from"../VideoModal/index.js";import{Grid as K,GridItem as H}from"../../components/grid.js";import W from"../Title/index.js";import{cn as M,spaceToHyphen as G,getLocalizedPath as _}from"../../helpers/utils.js";import z from"../SwiperBox/index.js";import{isVideo as j}from"../../shared/mimeType.js";import{Tabs as X,TabsList as ee,TabsTrigger as te,TabsContent as ae}from"../../components/tabs.js";import{useExposure as se}from"../../hooks/useExposure.js";import{trackUrlRef as S}from"../../shared/trackUrlRef.js";import{useAiuiContext as le}from"../AiuiProvider/index.js";import{gaTrack as oe}from"../../shared/track.js";const f="image",k="p1_banner",P=({data:d,configuration:s,jIndex:v,spanType:N,title:T,onSecondaryButtonClick:B,onPrimaryButtonClick:I})=>{const[u,o]=L(!1),x=Z({query:"(max-width: 768px)"}),b=O(null),m=()=>{if(N)switch(N){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(s?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};se(b,{componentType:f,componentName:k,position:v,componentTitle:d.title,componentDescription:d.description,navigation:s?.activeTab}),q(()=>{o(x)},[x]);const{theme:V="light",title:i,description:c,imageUrl:p,primaryButton:w,secondaryButton:n,imageMobileUrl:r,blockLink:$,video:g,youtubeId:h,isYouTube:C,id:y}=d,e="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("div",{className:M("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",m(),{"rounded-2xl":s?.shape==="rounded","aiui-dark":V==="dark","h-[400px]":u},"text-info-primary"),ref:b,children:[($||n.link)&&t("a",{className:"absolute inset-0 z-10",href:S(_($||n.link||"",s?.locale||"us"),`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${i}#${c}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,"aria-hidden":"true",tabIndex:-1}),l("div",{className:"absolute inset-0",children:[j(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(R,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),j(r?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:r?.url,type:"video/mp4"})}):t(R,{source:r?.url||p?.url,alt:r?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),l("div",{className:M("absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":d?.width==="full"}),children:[l("div",{className:"flex flex-col gap-1",children:[t(E,{size:3,as:"h3",className:"item-title",html:i}),t(E,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:c})]}),l("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&l(U,{"aria-label":i??c,className:M(e,"link-left"),variant:"secondary",as:"a","data-track":`${y}-link-left`,onClick:()=>{B?.(d)},href:S(_(n.link||"",s?.locale||"us"),`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${i}#${c}#${n.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:[n.text,t("span",{className:"sr-only",children:i??c})]}),w&&w.text&&t(U,{"aria-label":i??c,className:M(e,"link-right"),variant:"primary","data-track":`${y}-link-right`,as:"a",onClick:()=>{I?.(d)},href:S(_(w.link||"",s?.locale||"us"),`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${i}#${c}#${w.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:w.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(g?.url||h)&&t("button",{onClick:()=>{s?.onVideoPlayBtnClick?.(g?.url||h,C)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},D=Y.forwardRef((d,s)=>{const{data:v,className:N,onSecondaryButtonClick:T,onPrimaryButtonClick:B,...I}=d,{shape:u,sectionTitle:o,groupByTab:x=!1,items:b=[],carousel:m}=v,[V,i]=L(!1),[c,p]=L(""),[w,n]=L(""),{locale:r="us"}=le(),$=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},g=b.map(e=>e.tabName).filter(Boolean).filter((e,a,Q)=>Q.indexOf(e)===a),h=(e,a)=>{i(!0),a?n?.(e||""):p?.(e||"")},C=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},y=g.map(e=>({tabName:e,items:b.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,...I,className:M("multiLayoutGraphicBlock","text-info-primary",N),children:[o&&t(W,{data:{title:o},className:"section-title"}),x?l(X,{shape:u,align:"left",defaultValue:G(g[0]),children:[t(ee,{children:g.map((e,a)=>t(te,{value:G(e),onClick:()=>{oe({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:f,component_name:k,component_title:o,component_position:1,navigation:e,button_name:e}})},children:e},a))}),g.map((e,a)=>t(ae,{value:G(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:l(A,{children:[t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:y?.[e]||[],configuration:{shape:u,isTab:x,activeTab:e,title:o,num:y?.[e]?.length||0,locale:r,onVideoPlayBtnClick:h,onSecondaryButtonClick:T,onPrimaryButtonClick:B}},Slide:P,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:C(y?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:C(y?.[e]?.length||0)}}}),m&&m?.items.length>0?t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:m?.items||[],configuration:{shape:u,isTab:x,locale:r,onVideoPlayBtnClick:h,title:o,onSecondaryButtonClick:T,onPrimaryButtonClick:B}},Slide:P,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):l(A,{children:[l(K,{className:"w-full",children:[b.map((e,a)=>t(H,{span:$(e.width??"full"),className:"laptop:block hidden",children:t(P,{data:e,configuration:{shape:u,locale:r,onVideoPlayBtnClick:h,title:o},jIndex:a,spanType:e.width,onSecondaryButtonClick:T,onPrimaryButtonClick:B})},`${e?.title||""}${a}`)),b.map((e,a)=>t(H,{span:$("full"),className:"laptop:hidden block",children:t(P,{data:e,configuration:{shape:u,locale:r,onVideoPlayBtnClick:h,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),m&&m?.items.length>0?t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m?.items||[],configuration:{shape:u,locale:r,onVideoPlayBtnClick:h,title:o,onSecondaryButtonClick:T,onPrimaryButtonClick:B}},Slide:P,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),V&&t(J,{visible:V,youTubeId:w,videoUrl:c,onCloseModal:()=>i(!1)})]})});D.displayName="MultiLayoutGraphicBlock";var xe=F(D);export{xe as default};
+import{Fragment as A,jsx as t,jsxs as l}from"react/jsx-runtime";import Y,{useState as L,useEffect as q,useRef as O}from"react";import{useMediaQuery as Z}from"react-responsive";import{withLayout as F}from"../../shared/Styles.js";import R from"../../components/picture.js";import U from"../../components/button.js";import{Heading as E}from"../../components/heading.js";import{VideoModal as J}from"../VideoModal/index.js";import{Grid as K,GridItem as H}from"../../components/grid.js";import W from"../Title/index.js";import{cn as M,spaceToHyphen as G,getLocalizedPath as _}from"../../helpers/utils.js";import z from"../SwiperBox/index.js";import{isVideo as j}from"../../shared/mimeType.js";import{Tabs as X,TabsList as ee,TabsTrigger as te,TabsContent as ae}from"../../components/tabs.js";import{useExposure as se}from"../../hooks/useExposure.js";import{trackUrlRef as S}from"../../shared/trackUrlRef.js";import{useAiuiContext as le}from"../AiuiProvider/index.js";import{gaTrack as oe}from"../../shared/track.js";const f="image",k="p1_banner",P=({data:d,configuration:s,jIndex:v,spanType:N,title:T,onSecondaryButtonClick:B,onPrimaryButtonClick:I})=>{const[u,o]=L(!1),x=Z({query:"(max-width: 768px)"}),b=O(null),m=()=>{if(N)switch(N){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(s?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};se(b,{componentType:f,componentName:k,position:v,componentTitle:d.title,componentDescription:d.description,navigation:s?.activeTab}),q(()=>{o(x)},[x]);const{theme:V="light",title:i,description:c,imageUrl:p,primaryButton:w,secondaryButton:n,imageMobileUrl:r,blockLink:$,video:g,youtubeId:h,isYouTube:C,id:y}=d,e="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("div",{className:M("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",m(),{"rounded-2xl":s?.shape==="rounded","aiui-dark":V==="dark","h-[400px]":u},"text-info-primary"),ref:b,children:[($||n.link)&&t("a",{className:"absolute inset-0 z-10",href:S(_($||n.link||"",s?.locale||"us"),`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${i}#${c}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,"aria-hidden":"true",tabIndex:-1}),l("div",{className:"absolute inset-0",children:[j(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(R,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),j(r?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:r?.url,type:"video/mp4"})}):t(R,{source:r?.url||p?.url,alt:r?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),l("div",{className:M("absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":d?.width==="full"}),children:[l("div",{className:"flex flex-col gap-1",children:[t(E,{size:3,as:"h3",className:"item-title",html:i}),t(E,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:c})]}),l("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&l(U,{"aria-label":i??c,className:M(e,"link-left"),variant:"secondary",as:"a","data-track":`${y}-link-left`,onClick:()=>{B?.(d)},href:S(_(n.link||"",s?.locale||"us"),`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${i}#${c}#${n.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:[n.text,t("span",{className:"sr-only",children:i??c})]}),w&&w.text&&t(U,{"aria-label":i??c,className:M(e,"link-right"),variant:"primary","data-track":`${y}-link-right`,as:"a",onClick:()=>{I?.(d)},href:S(_(w.link||"",s?.locale||"us"),`${f}_${k}`),"data-headless-type-name":`${f}#${k}`,"data-headless-title-desc-button":`${i}#${c}#${w.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:w.text})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(g?.url||h)&&t("button",{onClick:()=>{s?.onVideoPlayBtnClick?.(g?.url||h,C)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},D=Y.forwardRef((d,s)=>{const{data:v,className:N,onSecondaryButtonClick:T,onPrimaryButtonClick:B,...I}=d,{shape:u,sectionTitle:o,groupByTab:x=!1,items:b=[],carousel:m}=v,[V,i]=L(!1),[c,p]=L(""),[w,n]=L(""),{locale:r="us"}=le(),$=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},g=b.map(e=>e.tabName).filter(Boolean).filter((e,a,Q)=>Q.indexOf(e)===a),h=(e,a)=>{i(!0),a?n?.(e||""):p?.(e||"")},C=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},y=g.map(e=>({tabName:e,items:b.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,...I,className:M("multiLayoutGraphicBlock","text-info-primary",N),children:[o&&t(W,{data:{title:o},className:"section-title"}),x?l(X,{shape:u,align:"left",defaultValue:G(g[0]),children:[t(ee,{children:g.map((e,a)=>t(te,{value:G(e),onClick:()=>{oe({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:f,component_name:k,component_title:o,component_position:1,navigation:e,button_name:e}})},children:e},a))}),g.map((e,a)=>t(ae,{value:G(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:l(A,{children:[t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:y?.[e]||[],configuration:{shape:u,isTab:x,activeTab:e,title:o,num:y?.[e]?.length||0,locale:r,onVideoPlayBtnClick:h,onSecondaryButtonClick:T,onPrimaryButtonClick:B}},Slide:P,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:C(y?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:C(y?.[e]?.length||0)}}}),m&&m?.items.length>0?t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:m?.items||[],configuration:{shape:u,isTab:x,locale:r,onVideoPlayBtnClick:h,title:o,onSecondaryButtonClick:T,onPrimaryButtonClick:B}},Slide:P,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):l(A,{children:[l(K,{className:"w-full",children:[b.map((e,a)=>t(H,{span:$(e.width??"full"),className:"laptop:block hidden",children:t(P,{data:e,configuration:{shape:u,locale:r,onVideoPlayBtnClick:h,title:o},jIndex:a,spanType:e.width,onSecondaryButtonClick:T,onPrimaryButtonClick:B})},`${e?.title||""}${a}`)),b.map((e,a)=>t(H,{span:$("full"),className:"laptop:hidden block",children:t(P,{data:e,configuration:{shape:u,locale:r,onVideoPlayBtnClick:h,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),m&&m?.items.length>0?t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m?.items||[],configuration:{shape:u,locale:r,onVideoPlayBtnClick:h,title:o,onSecondaryButtonClick:T,onPrimaryButtonClick:B}},Slide:P,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),V&&t(J,{visible:V,youTubeId:w,videoUrl:c,onCloseModal:()=>i(!1)})]})});D.displayName="MultiLayoutGraphicBlock";var xe=F(D);export{xe as default};
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n    id,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                data-track={`${id}-link-left`}\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                data-track={`${id}-link-right`}\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      {...rest}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        locale,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{\n                      shape: shape,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      title: sectionTitle,\n                    }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    shape: shape,\n                    locale,\n                    onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    title: sectionTitle,\n                  }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  locale,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n    id,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n      </div>\n      {/* Title and subtitle are direct siblings of the overlay link in the card stacking context\n          to ensure z-20 > z-10 is evaluated without z-auto parent ambiguity (#381) */}\n      <div\n        className={cn(\n          'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n          {\n            'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n          }\n        )}\n      >\n        <div className=\"flex flex-col gap-1\">\n          <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n          <Heading\n            as=\"h4\"\n            className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n            html={description}\n          />\n        </div>\n        <div className=\"lg-desktop:gap-3 flex gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <Button\n              aria-label={title ?? description}\n              className={cn(lgButtonSize, 'link-left')}\n              variant=\"secondary\"\n              as=\"a\"\n              data-track={`${id}-link-left`}\n              onClick={() => {\n                onSecondaryButtonClick?.(item)\n              }}\n              href={trackUrlRef(\n                getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                `${componentType}_${componentName}`\n              )}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n              data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n            >\n              {secondaryButton.text}\n              <span className=\"sr-only\">{title ?? description}</span>\n            </Button>\n          )}\n          {primaryButton && primaryButton.text && (\n            <Button\n              aria-label={title ?? description}\n              className={cn(lgButtonSize, 'link-right')}\n              variant=\"primary\"\n              data-track={`${id}-link-right`}\n              as=\"a\"\n              onClick={() => {\n                onPrimaryButtonClick?.(item)\n              }}\n              href={trackUrlRef(\n                getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                `${componentType}_${componentName}`\n              )}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n              data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n            >\n              {primaryButton.text}\n            </Button>\n          )}\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      {...rest}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        locale,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{\n                      shape: shape,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      title: sectionTitle,\n                    }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    shape: shape,\n                    locale,\n                    onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    title: sectionTitle,\n                  }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  locale,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "AAmHQ,OA0NM,YAAAA,EA1NN,OAAAC,EAaF,QAAAC,MAbE,oBAnHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,EAAI,iBAAAC,EAAe,oBAAAC,MAAwB,yBACpD,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,QAAAC,EAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,2BACzD,OAAS,eAAAC,OAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,kBAAAC,OAAsB,2BAC/B,OAAS,WAAAC,OAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAOC,EACP,uBAAAC,EACA,qBAAAC,CACF,IAQM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIpC,EAAkB,EAAK,EACjDqC,EAAalC,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DmC,EAAMpC,EAAuB,IAAI,EAEjCqC,EAAe,IAAM,CACzB,GAAIR,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,IAAK,YACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,EAEAR,GAAYiB,EAAK,CACf,cAAeb,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAED5B,EAAU,IAAM,CACdmC,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAAC,CACF,EAAIvB,EACEwB,EAAe,mFAErB,OACEtD,EAAC,OACC,UAAWc,EACT,8BACA,qEACA2B,EAAa,EACb,CACE,cAAeV,GAAe,QAAU,UACxC,YAAaW,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEH,WAAAS,GAAaF,EAAgB,OAC7BhD,EAAC,KACC,UAAU,wBACV,KAAMyB,EACJR,EAAiBiC,GAAaF,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EACvF,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,GACxD,6BAA4B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GACjE,cAAY,OACZ,SAAU,GACZ,EAEFhC,EAAC,OAAI,UAAU,mBACZ,UAAAkB,EAAQ2B,GAAU,QAAQ,EACzB9C,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAK8C,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEA9C,EAACQ,EAAA,CACC,OAAQsC,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAED3B,EAAQ8B,GAAgB,QAAQ,EAC/BjD,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAKiD,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEAjD,EAACQ,EAAA,CACC,OAAQyC,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,GAEJ,EAGA7C,EAAC,OACC,UAAWc,EACT,sIACA,CACE,sEAAuEgB,GAAM,QAAU,MACzF,CACF,EAEA,UAAA9B,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACU,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMkC,EAAO,EAC9D5C,EAACU,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMmC,EACR,GACF,EACA5C,EAAC,OAAI,UAAU,8BACZ,UAAA+C,GAAmBA,EAAgB,MAClC/C,EAACQ,EAAA,CACC,aAAYmC,GAASC,EACrB,UAAW9B,EAAGwC,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,aAAY,GAAGD,CAAE,aACjB,QAAS,IAAM,CACblB,IAAyBL,CAAI,CAC/B,EACA,KAAMN,EACJR,EAAiB+B,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EAC1E,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIG,EAAgB,IAAI,GAChF,6BAA4B,GAAGhB,GAAe,SAAS,IAAIC,CAAM,GAEhE,UAAAe,EAAgB,KACjBhD,EAAC,QAAK,UAAU,UAAW,SAAA4C,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9B/C,EAACS,EAAA,CACC,aAAYmC,GAASC,EACrB,UAAW9B,EAAGwC,EAAc,YAAY,EACxC,QAAQ,UACR,aAAY,GAAGD,CAAE,cACjB,GAAG,IACH,QAAS,IAAM,CACbjB,IAAuBN,CAAI,CAC7B,EACA,KAAMN,EACJR,EAAiB8B,EAAc,MAAQ,GAAIf,GAAe,QAAU,IAAI,EACxE,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,6BAA4B,GAAGf,GAAe,SAAS,IAAIC,CAAM,GAEhE,SAAAc,EAAc,KACjB,GAEJ,GACF,EACA/C,EAAC,OACC,SAAAA,EAAC,OAAI,UAAU,gEACX,UAAAmD,GAAO,KAAOC,IACdpD,EAAC,UACC,QAAS,IAAM,CACbgC,GAAe,sBAAsBmB,GAAO,KAAOC,EAAWC,CAAS,CACzE,EACA,UAAU,+GAEV,SAAArD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,EACF,GACF,CAEJ,EAEMwD,EAA0BtD,EAAM,WAAyD,CAACuD,EAAOhB,IAAQ,CAC7G,KAAM,CAAE,KAAAiB,EAAM,UAAAC,EAAW,uBAAAvB,EAAwB,qBAAAC,EAAsB,GAAGuB,CAAK,EAAIH,EAC7E,CAAE,MAAAI,EAAO,aAAAC,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIP,EACpE,CAACQ,EAASC,CAAU,EAAIhE,EAAkB,EAAK,EAC/C,CAACiE,EAAUC,CAAW,EAAIlE,EAAiB,EAAE,EAC7C,CAACmE,EAAWC,CAAY,EAAIpE,EAAiB,EAAE,EAC/C,CAAE,OAAAqE,EAAS,IAAK,EAAI9C,GAAe,EAEnC+C,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWX,EACd,IAAIjC,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAM6C,EAAOC,IAAQA,EAAI,QAAQ9C,CAAI,IAAM6C,CAAK,EAErDE,EAA0B,CAACC,EAAa1B,IAAuB,CACnEc,EAAW,EAAI,EACXd,EACFkB,IAAeQ,GAAO,EAAE,EAExBV,IAAcU,GAAO,EAAE,CAE3B,EACMC,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeR,EAClB,IAAIS,IAAY,CACf,QAAAA,EACA,MAAOpB,EAAM,OAAOjC,GAAQA,EAAK,UAAYqD,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAEF,OACEpF,EAAC,WACC,uBAAqB,0BACrB,IAAKwC,EACJ,GAAGmB,EACJ,UAAW7C,EAAG,0BAA2B,oBAAqB4C,CAAS,EAEtE,UAAAG,GAAgB9D,EAACc,EAAA,CAAM,KAAM,CAAE,MAAOgD,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,EACC9D,EAACmB,EAAA,CAAK,MAAOyC,EAAO,MAAM,OAAO,aAAc7C,EAAc2D,EAAS,CAAC,CAAE,EACvE,UAAA3E,EAACqB,GAAA,CACE,SAAAsD,EAAS,IAAI,CAACS,EAASR,IACtB5E,EAACsB,GAAA,CAEC,MAAON,EAAcoE,CAAQ,EAC7B,QAAS,IAAM,CACbzD,GAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,gBAAiBiC,EACjB,mBAAoB,EACpB,WAAYsB,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIR,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACS,EAASR,IACtB5E,EAACuB,GAAA,CAAwB,MAAOP,EAAcoE,CAAQ,EAAG,UAAU,qCACjE,SAAAnF,EAAAF,EAAA,CACE,UAAAC,EAACkB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMiE,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOvB,EACP,MAAOE,EACP,UAAWqB,EACX,MAAOtB,EACP,IAAKqB,IAAeC,CAAO,GAAG,QAAU,EACxC,OAAAZ,EACA,oBAAqBM,EACrB,uBAAA1C,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAekD,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACCnB,GAAYA,GAAU,MAAM,OAAS,EACpCjE,EAACkB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM+C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,MAAOE,EACP,OAAAS,EACA,oBAAqBM,EACrB,MAAOhB,EACP,uBAAA1B,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAzFgB8C,CA0FlB,CACD,GACH,EAEA3E,EAAAF,EAAA,CACE,UAAAE,EAACW,EAAA,CAAK,UAAU,SACb,UAAAoD,EAAM,IAAI,CAACjC,EAAM6C,IAEd5E,EAACa,EAAA,CAEC,KAAM4D,EAAQ1C,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,SAAA/B,EAAC8B,EAAA,CACC,KAAMC,EACN,cAAe,CACb,MAAO8B,EACP,OAAAW,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU7C,EAAK,MACf,uBAAwBK,EACxB,qBAAsBC,EACxB,GAhBK,GAAGN,GAAM,OAAS,EAAE,GAAG6C,CAAK,EAiBnC,CAEH,EACAZ,EAAM,IAAI,CAACjC,EAAM6C,IAChB5E,EAACa,EAAA,CAA8C,KAAM4D,EAAQ,MAAM,EAAG,UAAU,sBAC9E,SAAAzE,EAAC8B,EAAA,CACC,KAAMC,EACN,cAAe,CACb,MAAO8B,EACP,OAAAW,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU,OACZ,GAXa,GAAG7C,GAAM,OAAS,EAAE,GAAG6C,CAAK,EAY3C,CACD,GACH,EACCX,GAAYA,GAAU,MAAM,OAAS,EACpCjE,EAACkB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM+C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOJ,EACP,OAAAW,EACA,oBAAqBM,EACrB,MAAOhB,EACP,uBAAA1B,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,EAEDoC,GACClE,EAACW,EAAA,CACC,QAASuD,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDX,EAAwB,YAAc,0BAEtC,IAAO+B,GAAQhF,EAAWiD,CAAuB",
   "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

package/dist/esm/biz-components/NavigationSearch/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { NavigationSearchProps } from './types.js';
 export declare const canSearch: (target: any) => boolean;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<NavigationSearchProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<NavigationSearchProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/esm/biz-components/ProductCompare/index.d.ts CHANGED Viewed

@@ -44,5 +44,5 @@ export interface ProductCompareProps extends React.HTMLAttributes<HTMLElement> {
         theme?: Theme;
     };
 }
-declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductCompareProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductCompareProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {};
 export default _default;

package/dist/esm/biz-components/ProductHero/ProductHero.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ProductHeroProps } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<ProductHeroProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<ProductHeroProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/esm/biz-components/ProductLottery/MediaDrawArea.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import"react";import{cn as r}from"../../helpers/index.js";import"./types.js";const i={tablet:"(min-width: 768px)",laptop:"(min-width: 1025px)",desktop:"(min-width: 1440px)",lgDesktop:"(min-width: 1920px)"};function b(e){return typeof e=="object"&&"default"in e}function f(e){return typeof e.src=="string"?e.src:e.src.default}const m=({media:e,className:a})=>{const s=e.alt||"Product Lottery";if(!b(e.src))return t("img",{src:e.src,alt:s,className:r("size-full object-contain",a),loading:"lazy"});const o=e.src;return n("picture",{children:[o.lgDesktop&&t("source",{media:i.lgDesktop,srcSet:o.lgDesktop}),o.desktop&&t("source",{media:i.desktop,srcSet:o.desktop}),o.laptop&&t("source",{media:i.laptop,srcSet:o.laptop}),o.tablet&&t("source",{media:i.tablet,srcSet:o.tablet}),t("img",{src:o.default,alt:s,className:r("size-full object-cover",a),loading:"lazy"})]})},g=({media:e,className:a})=>{const s=f(e);return t("video",{src:s,poster:e.poster,autoPlay:e.autoPlay??!0,muted:e.muted??!0,loop:e.loop??!0,playsInline:!0,className:r("size-full object-cover",a),"aria-label":e.alt||"Product Lottery Video"})},y={primary:r("bg-btn-primary text-btn-primary-foreground","shadow-lg"),secondary:r("bg-[#1D1D1F] text-white","shadow-lg hover:bg-[#1D1D1F]/90"),outline:r("border-2 border-white bg-transparent text-white","hover:bg-white/10")},p=({media:e,ctaButton:a,isDrawing:s=!1,isDisabled:o=!1,onClick:c,className:d})=>{const l=a?.text??"",u=a?.style||"primary";return n("div",{className:r("media-draw-area","size-full overflow-hidden",d),children:[t("div",{className:"absolute inset-0",children:e.type==="video"?t(g,{media:e}):t(m,{media:e})}),t("button",{type:"button",onClick:c,disabled:o||s,className:r("absolute inset-0 z-10 flex cursor-pointer items-end justify-center","tablet:pb-5 laptop:pb-6 desktop:pb-8 lg-desktop:pb-10 pb-4","disabled:cursor-not-allowed","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2"),"aria-label":s?"Drawing in progress...":l,"aria-busy":s,children:l&&n("span",{className:r("inline-flex items-center justify-center gap-2","rounded-btn px-6 py-2.5","text-sm font-semibold","laptop:px-8 laptop:py-3 laptop:text-base","desktop:px-10 desktop:py-3.5","transition-all duration-200","hover:scale-105 active:scale-95",y[u],s&&"pointer-events-none opacity-80",o&&"pointer-events-none opacity-50"),children:[s&&n("svg",{className:"size-4 animate-spin",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:[t("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",className:"opacity-25"}),t("path",{d:"M4 12a8 8 0 018-8",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",className:"opacity-75"})]}),l]})})]})};p.displayName="MediaDrawArea";var M=p;export{p as MediaDrawArea,M as default};
+"use client";import{jsx as t,jsxs as l}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/index.js";import"./types.js";const i={tablet:"(min-width: 768px)",laptop:"(min-width: 1025px)",desktop:"(min-width: 1440px)",lgDesktop:"(min-width: 1920px)"},v=({media:e,className:s})=>{const r=e.image?.alt||"Product Lottery";return l("picture",{children:[e.imageLgDesktop&&t("source",{media:i.lgDesktop,srcSet:e.imageLgDesktop.url}),e.imageDesktop&&t("source",{media:i.desktop,srcSet:e.imageDesktop.url}),e.imageLaptop&&t("source",{media:i.laptop,srcSet:e.imageLaptop.url}),e.imageTablet&&t("source",{media:i.tablet,srcSet:e.imageTablet.url}),t("img",{src:e.image?.url||"",alt:r,className:a("size-full object-cover",s),loading:"lazy"})]})},h=({media:e,autoPlay:s=!0,muted:r=!0,loop:n=!0,className:p})=>{const o=e.video;return o?t("video",{src:o.url,poster:o.thumbnailURL||void 0,autoPlay:s,muted:r,loop:n,playsInline:!0,className:a("size-full object-cover",p),"aria-label":o.alt||"Product Lottery Video"}):null},k={primary:a("bg-btn-primary text-btn-primary-foreground","shadow-lg"),secondary:a("bg-[#1D1D1F] text-white","shadow-lg hover:bg-[#1D1D1F]/90"),outline:a("border-2 border-white bg-transparent text-white","hover:bg-white/10")},u=({media:e,ctaButton:s,videoAutoPlay:r,videoMuted:n,videoLoop:p,isDrawing:o=!1,isDisabled:d=!1,onClick:m,className:b,ctaTrackTypeName:g,ctaTrackTitleDescButton:y})=>{const c=s?.text??"",f=s?.style||"primary";return l("div",{className:a("media-draw-area","size-full overflow-hidden",b),children:[t("div",{className:"absolute inset-0",children:e.type==="video"?t(h,{media:e,autoPlay:r,muted:n,loop:p}):t(v,{media:e})}),t("button",{type:"button",onClick:m,disabled:d||o,className:a("absolute inset-0 z-10 flex cursor-pointer items-end justify-center","tablet:pb-5 laptop:pb-6 desktop:pb-8 lg-desktop:pb-10 pb-4","disabled:cursor-not-allowed","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2"),"aria-label":o?"Drawing in progress...":c,"aria-busy":o,"data-headless-type-name":g,"data-headless-title-desc-button":y,children:c&&l("span",{className:a("inline-flex items-center justify-center gap-2","rounded-btn px-6 py-2.5","text-sm font-semibold","laptop:px-8 laptop:py-3 laptop:text-base","desktop:px-10 desktop:py-3.5","transition-all duration-200","hover:scale-105 active:scale-95",k[f],o&&"pointer-events-none opacity-80",d&&"pointer-events-none opacity-50"),children:[o&&l("svg",{className:"size-4 animate-spin",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:[t("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",className:"opacity-25"}),t("path",{d:"M4 12a8 8 0 018-8",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",className:"opacity-75"})]}),c]})})]})};u.displayName="MediaDrawArea";var L=u;export{u as MediaDrawArea,L as default};
 //# sourceMappingURL=MediaDrawArea.js.map

package/dist/esm/biz-components/ProductLottery/MediaDrawArea.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductLottery/MediaDrawArea.tsx"],
-  "sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport type { MediaDrawAreaProps, MediaConfig, ResponsiveMedia } from './types.js'\nimport { DEFAULT_CTA_BUTTON } from './types.js'\n\nconst BREAKPOINTS = {\n  tablet: '(min-width: 768px)',\n  laptop: '(min-width: 1025px)',\n  desktop: '(min-width: 1440px)',\n  lgDesktop: '(min-width: 1920px)',\n} as const\n\nfunction isResponsiveMedia(src: string | ResponsiveMedia): src is ResponsiveMedia {\n  return typeof src === 'object' && 'default' in src\n}\n\nfunction getDefaultSrc(media: MediaConfig): string {\n  if (typeof media.src === 'string') return media.src\n  return media.src.default\n}\n\nconst ResponsiveImage: React.FC<{\n  media: MediaConfig\n  className?: string\n}> = ({ media, className }) => {\n  const alt = media.alt || 'Product Lottery'\n\n  if (!isResponsiveMedia(media.src)) {\n    return <img src={media.src} alt={alt} className={cn('size-full object-contain', className)} loading=\"lazy\" />\n  }\n\n  const responsive = media.src\n\n  return (\n    <picture>\n      {responsive.lgDesktop && <source media={BREAKPOINTS.lgDesktop} srcSet={responsive.lgDesktop} />}\n      {responsive.desktop && <source media={BREAKPOINTS.desktop} srcSet={responsive.desktop} />}\n      {responsive.laptop && <source media={BREAKPOINTS.laptop} srcSet={responsive.laptop} />}\n      {responsive.tablet && <source media={BREAKPOINTS.tablet} srcSet={responsive.tablet} />}\n      <img src={responsive.default} alt={alt} className={cn('size-full object-cover', className)} loading=\"lazy\" />\n    </picture>\n  )\n}\n\nconst VideoMedia: React.FC<{\n  media: MediaConfig\n  className?: string\n}> = ({ media, className }) => {\n  const src = getDefaultSrc(media)\n\n  return (\n    <video\n      src={src}\n      poster={media.poster}\n      autoPlay={media.autoPlay ?? true}\n      muted={media.muted ?? true}\n      loop={media.loop ?? true}\n      playsInline\n      className={cn('size-full object-cover', className)}\n      aria-label={media.alt || 'Product Lottery Video'}\n    />\n  )\n}\n\nconst CTA_STYLE_MAP = {\n  primary: cn('bg-btn-primary text-btn-primary-foreground', 'shadow-lg'),\n  secondary: cn('bg-[#1D1D1F] text-white', 'shadow-lg hover:bg-[#1D1D1F]/90'),\n  outline: cn('border-2 border-white bg-transparent text-white', 'hover:bg-white/10'),\n} as const\n\nexport const MediaDrawArea: React.FC<MediaDrawAreaProps> = ({\n  media,\n  ctaButton,\n  isDrawing = false,\n  isDisabled = false,\n  onClick,\n  className,\n}) => {\n  const buttonText = ctaButton?.text ?? ''\n  const buttonStyle = ctaButton?.style || 'primary'\n\n  return (\n    <div className={cn('media-draw-area', 'size-full overflow-hidden', className)}>\n      {/* Media Layer */}\n      <div className=\"absolute inset-0\">\n        {media.type === 'video' ? <VideoMedia media={media} /> : <ResponsiveImage media={media} />}\n      </div>\n\n      {/* Clickable overlay \u2014 entire area triggers draw */}\n      <button\n        type=\"button\"\n        onClick={onClick}\n        disabled={isDisabled || isDrawing}\n        className={cn(\n          'absolute inset-0 z-10 flex cursor-pointer items-end justify-center',\n          'tablet:pb-5 laptop:pb-6 desktop:pb-8 lg-desktop:pb-10 pb-4',\n          'disabled:cursor-not-allowed',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2'\n        )}\n        aria-label={isDrawing ? 'Drawing in progress...' : buttonText}\n        aria-busy={isDrawing}\n      >\n        {/* CTA Button visual \u2014 hidden when no text configured */}\n        {buttonText && (\n          <span\n            className={cn(\n              'inline-flex items-center justify-center gap-2',\n              'rounded-btn px-6 py-2.5',\n              'text-sm font-semibold',\n              'laptop:px-8 laptop:py-3 laptop:text-base',\n              'desktop:px-10 desktop:py-3.5',\n              'transition-all duration-200',\n              'hover:scale-105 active:scale-95',\n              CTA_STYLE_MAP[buttonStyle],\n              isDrawing && 'pointer-events-none opacity-80',\n              isDisabled && 'pointer-events-none opacity-50'\n            )}\n          >\n            {isDrawing && (\n              <svg className=\"size-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                  className=\"opacity-25\"\n                />\n                <path\n                  d=\"M4 12a8 8 0 018-8\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                  className=\"opacity-75\"\n                />\n              </svg>\n            )}\n            {buttonText}\n          </span>\n        )}\n      </button>\n    </div>\n  )\n}\n\nMediaDrawArea.displayName = 'MediaDrawArea'\n\nexport default MediaDrawArea\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "cn", "BREAKPOINTS", "isResponsiveMedia", "src", "getDefaultSrc", "media", "ResponsiveImage", "className", "alt", "responsive", "VideoMedia", "CTA_STYLE_MAP", "MediaDrawArea", "ctaButton", "isDrawing", "isDisabled", "onClick", "buttonText", "buttonStyle", "MediaDrawArea_default"]
+  "sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport type { MediaDrawAreaProps, MediaConfig } from './types.js'\nimport { DEFAULT_CTA_BUTTON } from './types.js'\n\nconst BREAKPOINTS = {\n  tablet: '(min-width: 768px)',\n  laptop: '(min-width: 1025px)',\n  desktop: '(min-width: 1440px)',\n  lgDesktop: '(min-width: 1920px)',\n} as const\n\nconst ResponsiveImage: React.FC<{\n  media: MediaConfig\n  className?: string\n}> = ({ media, className }) => {\n  const alt = media.image?.alt || 'Product Lottery'\n  return (\n    <picture>\n      {media.imageLgDesktop && <source media={BREAKPOINTS.lgDesktop} srcSet={media.imageLgDesktop.url} />}\n      {media.imageDesktop && <source media={BREAKPOINTS.desktop} srcSet={media.imageDesktop.url} />}\n      {media.imageLaptop && <source media={BREAKPOINTS.laptop} srcSet={media.imageLaptop.url} />}\n      {media.imageTablet && <source media={BREAKPOINTS.tablet} srcSet={media.imageTablet.url} />}\n      <img src={media.image?.url || ''} alt={alt} className={cn('size-full object-cover', className)} loading=\"lazy\" />\n    </picture>\n  )\n}\n\nconst VideoMedia: React.FC<{\n  media: MediaConfig\n  autoPlay?: boolean\n  muted?: boolean\n  loop?: boolean\n  className?: string\n}> = ({ media, autoPlay = true, muted = true, loop = true, className }) => {\n  const vid = media.video\n  if (!vid) return null\n  return (\n    <video\n      src={vid.url}\n      poster={vid.thumbnailURL || undefined}\n      autoPlay={autoPlay}\n      muted={muted}\n      loop={loop}\n      playsInline\n      className={cn('size-full object-cover', className)}\n      aria-label={vid.alt || 'Product Lottery Video'}\n    />\n  )\n}\n\nconst CTA_STYLE_MAP = {\n  primary: cn('bg-btn-primary text-btn-primary-foreground', 'shadow-lg'),\n  secondary: cn('bg-[#1D1D1F] text-white', 'shadow-lg hover:bg-[#1D1D1F]/90'),\n  outline: cn('border-2 border-white bg-transparent text-white', 'hover:bg-white/10'),\n} as const\n\nexport const MediaDrawArea: React.FC<MediaDrawAreaProps> = ({\n  media,\n  ctaButton,\n  videoAutoPlay,\n  videoMuted,\n  videoLoop,\n  isDrawing = false,\n  isDisabled = false,\n  onClick,\n  className,\n  ctaTrackTypeName,\n  ctaTrackTitleDescButton,\n}) => {\n  const buttonText = ctaButton?.text ?? ''\n  const buttonStyle = ctaButton?.style || 'primary'\n\n  return (\n    <div className={cn('media-draw-area', 'size-full overflow-hidden', className)}>\n      {/* Media Layer */}\n      <div className=\"absolute inset-0\">\n        {media.type === 'video' ? (\n          <VideoMedia media={media} autoPlay={videoAutoPlay} muted={videoMuted} loop={videoLoop} />\n        ) : (\n          <ResponsiveImage media={media} />\n        )}\n      </div>\n\n      {/* Clickable overlay \u2014 entire area triggers draw */}\n      <button\n        type=\"button\"\n        onClick={onClick}\n        disabled={isDisabled || isDrawing}\n        className={cn(\n          'absolute inset-0 z-10 flex cursor-pointer items-end justify-center',\n          'tablet:pb-5 laptop:pb-6 desktop:pb-8 lg-desktop:pb-10 pb-4',\n          'disabled:cursor-not-allowed',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2'\n        )}\n        aria-label={isDrawing ? 'Drawing in progress...' : buttonText}\n        aria-busy={isDrawing}\n        data-headless-type-name={ctaTrackTypeName}\n        data-headless-title-desc-button={ctaTrackTitleDescButton}\n      >\n        {/* CTA Button visual \u2014 hidden when no text configured */}\n        {buttonText && (\n          <span\n            className={cn(\n              'inline-flex items-center justify-center gap-2',\n              'rounded-btn px-6 py-2.5',\n              'text-sm font-semibold',\n              'laptop:px-8 laptop:py-3 laptop:text-base',\n              'desktop:px-10 desktop:py-3.5',\n              'transition-all duration-200',\n              'hover:scale-105 active:scale-95',\n              CTA_STYLE_MAP[buttonStyle],\n              isDrawing && 'pointer-events-none opacity-80',\n              isDisabled && 'pointer-events-none opacity-50'\n            )}\n          >\n            {isDrawing && (\n              <svg className=\"size-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <circle\n                  cx=\"12\"\n                  cy=\"12\"\n                  r=\"10\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                  className=\"opacity-25\"\n                />\n                <path\n                  d=\"M4 12a8 8 0 018-8\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"3\"\n                  strokeLinecap=\"round\"\n                  className=\"opacity-75\"\n                />\n              </svg>\n            )}\n            {buttonText}\n          </span>\n        )}\n      </button>\n    </div>\n  )\n}\n\nMediaDrawArea.displayName = 'MediaDrawArea'\n\nexport default MediaDrawArea\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "cn", "BREAKPOINTS", "ResponsiveImage", "media", "className", "alt", "VideoMedia", "autoPlay", "muted", "loop", "vid", "CTA_STYLE_MAP", "MediaDrawArea", "ctaButton", "videoAutoPlay", "videoMuted", "videoLoop", "isDrawing", "isDisabled", "onClick", "ctaTrackTypeName", "ctaTrackTitleDescButton", "buttonText", "buttonStyle", "MediaDrawArea_default"]
 }

package/dist/esm/biz-components/ProductLottery/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { ProductLotteryProps, ProductLotteryHandle } from './types.js';
 export declare const ProductLottery: import("react").ForwardRefExoticComponent<ProductLotteryProps & import("react").RefAttributes<ProductLotteryHandle>>;
-declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductLotteryProps & import("react").RefAttributes<ProductLotteryHandle>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductLotteryProps & import("react").RefAttributes<ProductLotteryHandle>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("./index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;
@@ -10,10 +10,11 @@ export { MyRewardsModal } from '../LotteryShared/MyRewardsModal.js';
 export { ErrorModal } from '../LotteryShared/ErrorModal.js';
 export { ShareModal } from '../LotteryShared/ShareModal.js';
 export { BaseModal } from '../LotteryShared/BaseModal.js';
-export type { ProductLotteryProps, ProductLotteryHandle, MediaConfig, CtaButtonConfig, ResponsiveMedia, MediaDrawAreaProps, } from './types.js';
+export type { ProductLotteryProps, ProductLotteryHandle, MediaConfig, CtaButtonConfig, MediaDrawAreaProps, } from './types.js';
 export type { Prize, ChanceMethod, ChanceMethodStatus, WinningInfo, PrizePoolProps, ChanceMethodsProps, WinnerModalProps, WinnerModalConfig, UserData, ShareModalConfig, SocialPlatform, SharePlatformConfig, } from '../LotteryShared/types.js';
 export type { RulesModalProps, RuleItem } from '../LotteryShared/RulesModal.js';
 export type { MyRewardsModalProps, Reward, RewardStatus } from '../LotteryShared/MyRewardsModal.js';
 export type { ErrorModalProps } from '../LotteryShared/ErrorModal.js';
 export type { ShareModalProps } from '../LotteryShared/ShareModal.js';
 export type { BaseModalProps } from '../LotteryShared/BaseModal.js';
+export type { ContainerProps } from '../../shared/Styles.js';