npm - @anker-in/headless-ui - Versions diffs - 0.0.27-alpha.152 → 0.0.27-alpha.154 - Mend

@anker-in/headless-ui 0.0.27-alpha.152 → 0.0.27-alpha.154

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 (63) hide show

package/dist/cjs/biz-components/ShelfDisplay/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number) => void\n  secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.primaryButton?.(params, index + 1)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.secondaryButton?.(params, index + 1)\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: 'us',\n    amount: data?.price?.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 max-h-[48px] flex-1 text-xl font-bold\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n        <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    const { trackingData } = useAiuiContext()\n    const { profileActivated } = trackingData\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      memberActiveStatus: profileActivated ? 'active' : 'not active',\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      align = 'left',\n      isShowTab = true,\n      tabShape = 'square',\n      ...other\n    } = data\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n      const newCurrentData = currentData\n        ?.map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      setCurrentItems(newCurrentData)\n    }\n\n    useEffect(() => {\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [])\n        return\n      }\n      handleCurrentTab(productsCard)\n    }, [])\n\n    return (\n      <div ref={innerRef} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'component_click',\n                  member_active_status: profileActivated ? 'active' : 'not active',\n                  event_parameters: {\n                    page_group: 'Activity Page_Home Page',\n                    component_type: componentType,\n                    component_name: componentName,\n                    component_title: data?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <SwiperBox\n          className=\"mt-6 !overflow-visible\"\n          id={`ShelfDisplay${key}${tabId}`}\n          data={{ list: currentItems, configuration: { ...other, event: event } }}\n          Slide={ShelfDisplayItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3,\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_AiuiProvider", "import_useExposure", "import_track", "componentType", "componentName", "ShelfDisplayItem", "data", "configuration", "onPrimaryButton", "params", "index", "onSecondaryButton", "price", "basePrice", "handleUrl", "sku", "skuArray", "item", "Picture", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "trackingData", "profileActivated", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number) => void\n  secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.primaryButton?.(params, index + 1)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.secondaryButton?.(params, index + 1)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: variant?.price?.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return (\n            <div\n              key={index}\n              className=\"tablet:text-base border-info-secondary text-info-primary box-border h-full rounded-2xl border-2 px-2 pt-1 text-sm font-bold\"\n            >\n              {item}\n            </div>\n          )\n        })}\n      </div>\n      <p\n        title={data?.title || ''}\n        className=\"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 flex-1 text-xl font-bold\"\n      >\n        {data?.title || ''}\n      </p>\n      <h3\n        title={data?.description || ''}\n        className=\"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold\"\n      >\n        {data?.description || ''}\n      </h3>\n      <div className=\"mb-2 flex items-center\">\n        {isSoldOut ? (\n          <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n        ) : (\n          <>\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n            <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n          </>\n        )}\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div className={cn('flex items-center gap-3', configuration.direction === 'vertical' ? 'flex-col' : '')}>\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data, configuration?.index)}\n          className={`\n            laptop:text-sm desktop:text-base text-xs\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      align = 'left',\n      isShowTab = true,\n      tabShape = 'square',\n      ...other\n    } = data\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n      const newCurrentData = currentData\n        ?.map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      setCurrentItems(newCurrentData)\n    }\n\n    useEffect(() => {\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [])\n        return\n      }\n      handleCurrentTab(productsCard)\n    }, [])\n\n    return (\n      <div ref={innerRef} className={cn('min-h-[400px] w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'component_click',\n                  event_parameters: {\n                    page_group: 'Activity Page_Home Page',\n                    component_type: componentType,\n                    component_name: componentName,\n                    component_title: data?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <SwiperBox\n          className=\"mt-6 !overflow-visible\"\n          id={`ShelfDisplay${key}${tabId}`}\n          data={{ list: currentItems, configuration: { ...other, event: event } }}\n          Slide={ShelfDisplayItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3,\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 4,\n            },\n          }}\n        />\n      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
 }

package/dist/cjs/biz-components/Slogan/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var Q=Object.create;var v=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var tt=(t,e)=>{for(var o in e)v(t,o,{get:e[o],enumerable:!0})},$=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of W(e))!Z.call(t,n)&&n!==o&&v(t,n,{get:()=>e[n],enumerable:!(s=V(e,n))||s.enumerable});return t};var et=(t,e,o)=>(o=t!=null?Q(X(t)):{},$(e||!t||!t.__esModule?v(o,"default",{value:t,enumerable:!0}):o,t)),rt=t=>$(v({},"__esModule",{value:!0}),t);var st={};tt(st,{componentName:()=>j,componentType:()=>z,default:()=>nt});module.exports=rt(st);var a=require("react/jsx-runtime"),r=et(require("react")),G=require("@gsap/react"),f=require("gsap"),N=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),p=require("../../helpers/utils.js"),b=require("../../components/index.js"),L=require("../../shared/Styles.js"),C=require("../../hooks/useExposure.js"),P=require("../AiuiProvider/index.js");const z="copy",j="brand_slogan";function ot(t=[],e=3){const o=[];for(let s=0;s<t.length;s+=e)o.push(t.slice(s,s+e));return o}const D=r.default.forwardRef(({data:t,className:e=""},o)=>{const{title:s,features:n=[],featureChunkSize:k=3}=t,[y,I]=r.default.useState(0),[F,w]=r.default.useState(!0),T=(0,r.useRef)(null),d=ot(n,k),E=d.length,u=n.length>k,U=u?[...d,d[0]]:d,S=40;(0,r.useImperativeHandle)(o,()=>T.current);const{trackingData:Y}=(0,P.useAiuiContext)(),{profileActivated:_}=Y;(0,C.useExposure)(T,{componentType:z,componentName:j,componentTitle:s,memberActiveStatus:_?"active":"not active"}),r.default.useEffect(()=>{if(!u)return;const l=setInterval(()=>{I(i=>i+1),w(!0)},3e3);return()=>clearInterval(l)},[E,u]),r.default.useEffect(()=>{if(u)if(y===E){const l=setTimeout(()=>{w(!1),I(0)},500);return()=>clearTimeout(l)}else w(!0)},[y,E,u]);const m=(0,r.useRef)(null),M=(0,r.useRef)(null),x=(0,r.useRef)(null);return(0,G.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,N.SplitText),!m.current)return;x.current=new N.SplitText(m.current,{type:"words",wordsClass:"word"});const l=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${l*1.5}px bottom-=4%`,scrub:!0,onUpdate:c=>{const h=c.progress,R=i.length,q=1/R,A=.5;i.forEach((B,J)=>{const K=J/R*(1-A),O=q*(1+A);let H=(h-K)/O;H=Math.max(0,Math.min(H,1)),f.gsap.set(B,{opacity:H})})}}),n&&n.length>0&&g.ScrollTrigger.create({trigger:M.current,start:`bottom+=${l*2}px bottom-=6%`,end:`bottom+=${l*2+100}px bottom-=6%`,onUpdate:c=>{f.gsap.set(M.current,{opacity:c.progress})}}),()=>{x.current&&x.current.revert(),g.ScrollTrigger.getAll().forEach(c=>c.kill())}},[]),(0,a.jsxs)("div",{ref:T,className:(0,p.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,a.jsx)(b.Heading,{ref:m,as:"h2",size:2,weight:"bold",align:"left",className:(0,p.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:s}),n&&n.length>0&&(0,a.jsx)("div",{className:(0,p.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${S}px]`),children:(0,a.jsx)("div",{className:(0,p.cn)(["flex flex-col",F?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${y*S}px)`},children:U.map((l,i)=>(0,a.jsx)("div",{className:(0,p.cn)("flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${S}px]`),children:l.map((c,h)=>(0,a.jsxs)(r.default.Fragment,{children:[h>0&&(0,a.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,a.jsx)(b.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:c.title})]},h))},i))})})]})});D.displayName="Slogan";var nt=(0,L.withStyles)(D);
+"use strict";"use client";var J=Object.create;var v=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var n in e)v(t,n,{get:e[n],enumerable:!0})},G=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of O(e))!V.call(t,o)&&o!==n&&v(t,o,{get:()=>e[o],enumerable:!(s=K(e,o))||s.enumerable});return t};var X=(t,e,n)=>(n=t!=null?J(Q(t)):{},G(e||!t||!t.__esModule?v(n,"default",{value:t,enumerable:!0}):n,t)),Z=t=>G(v({},"__esModule",{value:!0}),t);var rt={};W(rt,{componentName:()=>C,componentType:()=>A,default:()=>et});module.exports=Z(rt);var l=require("react/jsx-runtime"),r=X(require("react")),D=require("@gsap/react"),f=require("gsap"),N=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),c=require("../../helpers/utils.js"),y=require("../../components/index.js"),P=require("../../shared/Styles.js"),z=require("../../hooks/useExposure.js");const A="copy",C="brand_slogan";function tt(t=[],e=3){const n=[];for(let s=0;s<t.length;s+=e)n.push(t.slice(s,s+e));return n}const L=r.default.forwardRef(({data:t,className:e=""},n)=>{const{title:s,features:o=[],featureChunkSize:k=3}=t,[b,I]=r.default.useState(0),[j,w]=r.default.useState(!0),T=(0,r.useRef)(null),d=tt(o,k),E=d.length,u=o.length>k,F=u?[...d,d[0]]:d,S=40;(0,r.useImperativeHandle)(n,()=>T.current),(0,z.useExposure)(T,{componentType:A,componentName:C,componentTitle:s}),r.default.useEffect(()=>{if(!u)return;const a=setInterval(()=>{I(i=>i+1),w(!0)},3e3);return()=>clearInterval(a)},[E,u]),r.default.useEffect(()=>{if(u)if(b===E){const a=setTimeout(()=>{w(!1),I(0)},500);return()=>clearTimeout(a)}else w(!0)},[b,E,u]);const m=(0,r.useRef)(null),M=(0,r.useRef)(null),x=(0,r.useRef)(null);return(0,D.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,N.SplitText),!m.current)return;x.current=new N.SplitText(m.current,{type:"words",wordsClass:"word"});const a=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${a*1.5}px bottom-=4%`,scrub:!0,onUpdate:p=>{const h=p.progress,R=i.length,U=1/R,$=.5;i.forEach((Y,_)=>{const q=_/R*(1-$),B=U*(1+$);let H=(h-q)/B;H=Math.max(0,Math.min(H,1)),f.gsap.set(Y,{opacity:H})})}}),o&&o.length>0&&g.ScrollTrigger.create({trigger:M.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:p=>{f.gsap.set(M.current,{opacity:p.progress})}}),()=>{x.current&&x.current.revert(),g.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),(0,l.jsxs)("div",{ref:T,className:(0,c.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,l.jsx)(y.Heading,{ref:m,as:"h2",size:2,weight:"bold",align:"left",className:(0,c.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:s}),o&&o.length>0&&(0,l.jsx)("div",{className:(0,c.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${S}px]`),children:(0,l.jsx)("div",{className:(0,c.cn)(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${b*S}px)`},children:F.map((a,i)=>(0,l.jsx)("div",{className:(0,c.cn)("flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${S}px]`),children:a.map((p,h)=>(0,l.jsxs)(r.default.Fragment,{children:[h>0&&(0,l.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,l.jsx)(y.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:p.title})]},h))},i))})})]})});L.displayName="Slogan";var et=(0,P.withStyles)(L);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Slogan/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Slogan/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const { trackingData } = useAiuiContext()\n  const { profileActivated } = trackingData\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    memberActiveStatus: profileActivated ? 'active' : 'not active',\n  })\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n    if (!titleRef.current) return\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const height = titleRef.current?.clientHeight || 100\n\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=4%',\n      end: `bottom+=${height * 1.5}px bottom-=4%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=6%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n        onUpdate: (self: any) => {\n          gsap.set(featuresRef.current, { opacity: self.progress })\n        },\n      })\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={innerRef}\n      className={cn(\n        'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n        )}\n        html={title}\n      />\n      {features && features.length > 0 && (\n        <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                    <Text\n                      size={3}\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
-  "mappings": "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",
-  "names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "import_AiuiProvider", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "trackingData", "profileActivated", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { SloganProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nexport const componentType = 'copy'\nexport const componentName = 'brand_slogan'\n\nfunction chunkArray(array: { title: string }[] = [], size: number = 3) {\n  const result = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\nconst Slogan = React.forwardRef<HTMLDivElement, SloganProps>(({ data, className = '' }, ref) => {\n  const { title, features = [], featureChunkSize = 3 } = data\n  const [groupIndex, setGroupIndex] = React.useState(0)\n  const [isTransitioning, setIsTransitioning] = React.useState(true)\n  const innerRef = useRef<HTMLDivElement>(null)\n  const featuresGroups = chunkArray(features, featureChunkSize)\n  const totalGroups = featuresGroups.length\n  const needCarousel = features.length > featureChunkSize\n  const displayGroups = needCarousel ? [...featuresGroups, featuresGroups[0]] : featuresGroups\n  const groupHeight = 40\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n  })\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u542F\u7528\u5B9A\u65F6\u5668\n  React.useEffect(() => {\n    if (!needCarousel) return\n    const timer = setInterval(() => {\n      setGroupIndex(i => i + 1)\n      setIsTransitioning(true)\n    }, 3000)\n    return () => clearInterval(timer)\n  }, [totalGroups, needCarousel])\n\n  // \u53EA\u5728\u9700\u8981\u8F6E\u64AD\u65F6\u5904\u7406\u65E0\u7F1D\u8DF3\u8F6C\n  React.useEffect(() => {\n    if (!needCarousel) return\n    if (groupIndex === totalGroups) {\n      const handle = setTimeout(() => {\n        setIsTransitioning(false)\n        setGroupIndex(0)\n      }, 500) // 500ms\u7B49\u4E8E\u52A8\u753B\u65F6\u957F\n      return () => clearTimeout(handle)\n    } else {\n      setIsTransitioning(true)\n    }\n  }, [groupIndex, totalGroups, needCarousel])\n\n  // \u6807\u9898\u52A8\u753B\u903B\u8F91\u4FDD\u6301\u4E0D\u53D8\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const featuresRef = useRef<HTMLDivElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger, SplitText)\n    if (!titleRef.current) return\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\n    })\n    const height = titleRef.current?.clientHeight || 100\n\n    const words = splitTextInstance.current.words\n    gsap.set(words, { opacity: 0 })\n    ScrollTrigger.create({\n      trigger: titleRef.current,\n      start: 'bottom bottom-=4%',\n      end: `bottom+=${height * 1.5}px bottom-=4%`,\n      scrub: true,\n      onUpdate: (self: any) => {\n        const progress = self.progress\n        const total = words.length\n        const interval = 1 / total\n        const overlap = 0.5\n        words.forEach((word: any, i: number) => {\n          const start = (i / total) * (1 - overlap)\n          const width = interval * (1 + overlap)\n          let opacity = (progress - start) / width\n          opacity = Math.max(0, Math.min(opacity, 1))\n          gsap.set(word, { opacity })\n        })\n      },\n    })\n\n    if (features && features.length > 0) {\n      ScrollTrigger.create({\n        trigger: featuresRef.current,\n        start: `bottom+=${height * 2}px bottom-=6%`,\n        end: `bottom+=${height * 2 + 100}px bottom-=6%`,\n        onUpdate: (self: any) => {\n          gsap.set(featuresRef.current, { opacity: self.progress })\n        },\n      })\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={innerRef}\n      className={cn(\n        'slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center',\n        className\n      )}\n    >\n      <Heading\n        ref={titleRef}\n        as=\"h2\"\n        size={2}\n        weight={'bold'}\n        align={'left'}\n        className={cn(\n          'slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none'\n        )}\n        html={title}\n      />\n      {features && features.length > 0 && (\n        <div className={cn('relative w-full max-w-[500px] overflow-hidden', `tablet:h-[${groupHeight}px]`)}>\n          <div\n            className={cn([\n              'flex flex-col',\n              isTransitioning ? 'transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]' : '!transition-none',\n            ])}\n            style={{\n              transform: `translateY(-${groupIndex * groupHeight}px)`,\n            }}\n          >\n            {displayGroups.map((group, idx) => (\n              <div\n                className={cn(\n                  'flex w-full flex-row items-stretch gap-3 overflow-hidden',\n                  `tablet:h-[${groupHeight}px]`\n                )}\n                key={idx}\n              >\n                {group.map((feature, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && <div className=\"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]\" />}\n                    <Text\n                      size={3}\n                      align=\"left\"\n                      as=\"p\"\n                      className=\"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]\"\n                      html={feature.title}\n                    />\n                  </React.Fragment>\n                ))}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nSlogan.displayName = 'Slogan'\n\nexport default withStyles(Slogan)\n"],
+  "mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,mBAAAE,EAAA,kBAAAC,EAAA,YAAAC,KAAA,eAAAC,EAAAL,IA8HM,IAAAM,EAAA,6BA7HNC,EAAmD,oBACnDA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAA2B,kCAE3BC,EAA4B,sCAErB,MAAMX,EAAgB,OAChBD,EAAgB,eAE7B,SAASa,GAAWC,EAA6B,CAAC,EAAGC,EAAe,EAAG,CACrE,MAAMC,EAAS,CAAC,EAChB,QAASC,EAAI,EAAGA,EAAIH,EAAM,OAAQG,GAAKF,EACrCC,EAAO,KAAKF,EAAM,MAAMG,EAAGA,EAAIF,CAAI,CAAC,EAEtC,OAAOC,CACT,CAEA,MAAME,EAAS,EAAAC,QAAM,WAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CAC9F,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAW,CAAC,EAAG,iBAAAC,EAAmB,CAAE,EAAIL,EACjD,CAACM,EAAYC,CAAa,EAAI,EAAAR,QAAM,SAAS,CAAC,EAC9C,CAACS,EAAiBC,CAAkB,EAAI,EAAAV,QAAM,SAAS,EAAI,EAC3DW,KAAW,UAAuB,IAAI,EACtCC,EAAiBlB,GAAWW,EAAUC,CAAgB,EACtDO,EAAcD,EAAe,OAC7BE,EAAeT,EAAS,OAASC,EACjCS,EAAgBD,EAAe,CAAC,GAAGF,EAAgBA,EAAe,CAAC,CAAC,EAAIA,EACxEI,EAAc,MAEpB,uBAAoBb,EAAK,IAAMQ,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAA7B,EACA,cAAAD,EACA,eAAgBuB,CAClB,CAAC,EAGD,EAAAJ,QAAM,UAAU,IAAM,CACpB,GAAI,CAACc,EAAc,OACnB,MAAMG,EAAQ,YAAY,IAAM,CAC9BT,EAAc,GAAK,EAAI,CAAC,EACxBE,EAAmB,EAAI,CACzB,EAAG,GAAI,EACP,MAAO,IAAM,cAAcO,CAAK,CAClC,EAAG,CAACJ,EAAaC,CAAY,CAAC,EAG9B,EAAAd,QAAM,UAAU,IAAM,CACpB,GAAKc,EACL,GAAIP,IAAeM,EAAa,CAC9B,MAAMK,EAAS,WAAW,IAAM,CAC9BR,EAAmB,EAAK,EACxBF,EAAc,CAAC,CACjB,EAAG,GAAG,EACN,MAAO,IAAM,aAAaU,CAAM,CAClC,MACER,EAAmB,EAAI,CAE3B,EAAG,CAACH,EAAYM,EAAaC,CAAY,CAAC,EAG1C,MAAMK,KAAW,UAA2B,IAAI,EAC1CC,KAAc,UAAuB,IAAI,EACzCC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CAEZ,GADA,OAAK,eAAe,gBAAe,WAAS,EACxC,CAACF,EAAS,QAAS,OACvBE,EAAkB,QAAU,IAAI,YAAUF,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAASH,EAAS,SAAS,cAAgB,IAE3CI,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASJ,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWG,EAAS,GAAG,gBAC5B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAW/B,IAAc,CACtC,MAAMgC,EAAShC,EAAI4B,GAAU,EAAIE,GAC3BG,EAAQJ,GAAY,EAAIC,GAC9B,IAAII,GAAWP,EAAWK,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIH,EAAM,CAAE,QAAAG,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EAEG3B,GAAYA,EAAS,OAAS,GAChC,gBAAc,OAAO,CACnB,QAASe,EAAY,QACrB,MAAO,WAAWE,EAAS,CAAC,gBAC5B,IAAK,WAAWA,EAAS,EAAI,GAAG,gBAChC,SAAWE,GAAc,CACvB,OAAK,IAAIJ,EAAY,QAAS,CAAE,QAASI,EAAK,QAAS,CAAC,CAC1D,CACF,CAAC,EAGI,IAAM,CACXH,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASY,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAKtB,EACL,aAAW,MACT,2KACAT,CACF,EAEA,oBAAC,WACC,IAAKiB,EACL,GAAG,KACH,KAAM,EACN,OAAQ,OACR,MAAO,OACP,aAAW,MACT,sGACF,EACA,KAAMf,EACR,EACCC,GAAYA,EAAS,OAAS,MAC7B,OAAC,OAAI,aAAW,MAAG,gDAAiD,aAAaW,CAAW,KAAK,EAC/F,mBAAC,OACC,aAAW,MAAG,CACZ,gBACAP,EAAkB,mEAAqE,kBACzF,CAAC,EACD,MAAO,CACL,UAAW,eAAeF,EAAaS,CAAW,KACpD,EAEC,SAAAD,EAAc,IAAI,CAACmB,EAAOC,OACzB,OAAC,OACC,aAAW,MACT,2DACA,aAAanB,CAAW,KAC1B,EAGC,SAAAkB,EAAM,IAAI,CAACE,EAASC,OACnB,QAAC,EAAArC,QAAM,SAAN,CACE,UAAAqC,EAAQ,MAAK,OAAC,OAAI,UAAU,wDAAwD,KACrF,OAAC,QACC,KAAM,EACN,MAAM,OACN,GAAG,IACH,UAAU,mGACV,KAAMD,EAAQ,MAChB,IARmBC,CASrB,CACD,GAbIF,CAcP,CACD,EACH,EACF,GAEJ,CAEJ,CAAC,EAEDpC,EAAO,YAAc,SAErB,IAAOhB,MAAQ,cAAWgB,CAAM",
+  "names": ["Slogan_exports", "__export", "componentName", "componentType", "Slogan_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_useExposure", "chunkArray", "array", "size", "result", "i", "Slogan", "React", "data", "className", "ref", "title", "features", "featureChunkSize", "groupIndex", "setGroupIndex", "isTransitioning", "setIsTransitioning", "innerRef", "featuresGroups", "totalGroups", "needCarousel", "displayGroups", "groupHeight", "timer", "handle", "titleRef", "featuresRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "start", "width", "opacity", "t", "group", "idx", "feature", "index"]
 }

package/dist/cjs/hooks/useExposure.d.ts CHANGED Viewed

@@ -6,8 +6,7 @@ interface ExposureOptions {
     componentDescription?: string;
     navigation?: string;
     pageGroup?: string;
-    memberActiveStatus: string;
     position?: number;
 }
-export declare const useExposure: (ref: RefObject<HTMLDivElement>, { componentType, componentName, componentTitle, componentDescription, memberActiveStatus, navigation, position, }: ExposureOptions) => void;
+export declare const useExposure: (ref: RefObject<HTMLDivElement>, { componentType, componentName, componentTitle, componentDescription, navigation, position }: ExposureOptions) => void;
 export {};

package/dist/cjs/hooks/useExposure.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var r=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of u(e))!v.call(t,n)&&n!==o&&r(t,n,{get:()=>e[n],enumerable:!(i=g(e,n))||i.enumerable});return t};var b=t=>l(r({},"__esModule",{value:!0}),t);var y={};_(y,{useExposure:()=>f});module.exports=b(y);var O=require("react"),p=require("../shared/track.js"),s=require("./useIntersectionObserver.js");const f=(t,{componentType:e,componentName:o,componentTitle:i,componentDescription:n,memberActiveStatus:m,navigation:a="",position:c=1})=>{(0,s.useIntersectionObserverDelay)(t,{once:!0,threshold:.5,delay:2e3,callback:()=>{(0,p.gaTrack)({event:"ga4Event",member_active_status:m,event_name:"component_impression",event_parameters:{page_group:"Home Page",component_type:e,component_name:o,position:c,creative_id:"",component_title:i,component_description:n,navigation:a}})}})};
+"use strict";var r=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var v=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},_=(n,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!u.call(n,t)&&t!==o&&r(n,t,{get:()=>e[t],enumerable:!(i=c(e,t))||i.enumerable});return n};var l=n=>_(r({},"__esModule",{value:!0}),n);var b={};v(b,{useExposure:()=>f});module.exports=l(b);var E=require("react"),p=require("../shared/track.js"),s=require("./useIntersectionObserver.js");const f=(n,{componentType:e,componentName:o,componentTitle:i,componentDescription:t,navigation:m="",position:a=1})=>{(0,s.useIntersectionObserverDelay)(n,{once:!0,threshold:.5,delay:2e3,callback:()=>{(0,p.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:"Home Page",component_type:e,component_name:o,position:a,creative_id:"",component_title:i,component_description:t,navigation:m}})}})};
 //# sourceMappingURL=useExposure.js.map

package/dist/cjs/hooks/useExposure.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useExposure.ts"],
-  "sourcesContent": ["import { type RefObject } from 'react'\nimport { gaTrack } from '../shared/track.js'\nimport { useIntersectionObserverDelay } from './useIntersectionObserver.js'\n\ninterface ExposureOptions {\n  componentType: string\n  componentName: string\n  componentTitle?: string\n  componentDescription?: string\n  navigation?: string\n  pageGroup?: string\n  memberActiveStatus: string\n  position?: number\n}\nexport const useExposure = (\n  ref: RefObject<HTMLDivElement>,\n  {\n    componentType,\n    componentName,\n    componentTitle,\n    componentDescription,\n    memberActiveStatus,\n    navigation = '',\n    position = 1,\n  }: ExposureOptions\n) => {\n  useIntersectionObserverDelay(ref, {\n    once: true,\n    threshold: 0.5,\n    delay: 2000,\n    callback: () => {\n      gaTrack({\n        event: 'ga4Event',\n        member_active_status: memberActiveStatus,\n        event_name: 'component_impression',\n        event_parameters: {\n          page_group: 'Home Page',\n          component_type: componentType,\n          component_name: componentName,\n          position: position,\n          creative_id: '',\n          component_title: componentTitle,\n          component_description: componentDescription,\n          navigation: navigation, // \u5982\u679C\u6A21\u5757\u6709\u7C7B\u4F3C\u5BFC\u822A\uFF0C\u7535\u68AF\uFF0C\u951A\u70B9\uFF0C\u4F20\u6587\u6848\n        },\n      })\n    },\n  })\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,iBAC/BC,EAAwB,8BACxBC,EAA6C,wCAYtC,MAAMJ,EAAc,CACzBK,EACA,CACE,cAAAC,EACA,cAAAC,EACA,eAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,WAAAC,EAAa,GACb,SAAAC,EAAW,CACb,IACG,IACH,gCAA6BP,EAAK,CAChC,KAAM,GACN,UAAW,GACX,MAAO,IACP,SAAU,IAAM,IACd,WAAQ,CACN,MAAO,WACP,qBAAsBK,EACtB,WAAY,uBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBJ,EAChB,eAAgBC,EAChB,SAAUK,EACV,YAAa,GACb,gBAAiBJ,EACjB,sBAAuBC,EACvB,WAAYE,CACd,CACF,CAAC,CACH,CACF,CAAC,CACH",
-  "names": ["useExposure_exports", "__export", "useExposure", "__toCommonJS", "import_react", "import_track", "import_useIntersectionObserver", "ref", "componentType", "componentName", "componentTitle", "componentDescription", "memberActiveStatus", "navigation", "position"]
+  "sourcesContent": ["import { type RefObject } from 'react'\nimport { gaTrack } from '../shared/track.js'\nimport { useIntersectionObserverDelay } from './useIntersectionObserver.js'\n\ninterface ExposureOptions {\n  componentType: string\n  componentName: string\n  componentTitle?: string\n  componentDescription?: string\n  navigation?: string\n  pageGroup?: string\n  position?: number\n}\nexport const useExposure = (\n  ref: RefObject<HTMLDivElement>,\n  { componentType, componentName, componentTitle, componentDescription, navigation = '', position = 1 }: ExposureOptions\n) => {\n  useIntersectionObserverDelay(ref, {\n    once: true,\n    threshold: 0.5,\n    delay: 2000,\n    callback: () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_impression',\n        event_parameters: {\n          page_group: 'Home Page',\n          component_type: componentType,\n          component_name: componentName,\n          position: position,\n          creative_id: '',\n          component_title: componentTitle,\n          component_description: componentDescription,\n          navigation: navigation, // \u5982\u679C\u6A21\u5757\u6709\u7C7B\u4F3C\u5BFC\u822A\uFF0C\u7535\u68AF\uFF0C\u951A\u70B9\uFF0C\u4F20\u6587\u6848\n        },\n      })\n    },\n  })\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,iBAC/BC,EAAwB,8BACxBC,EAA6C,wCAWtC,MAAMJ,EAAc,CACzBK,EACA,CAAE,cAAAC,EAAe,cAAAC,EAAe,eAAAC,EAAgB,qBAAAC,EAAsB,WAAAC,EAAa,GAAI,SAAAC,EAAW,CAAE,IACjG,IACH,gCAA6BN,EAAK,CAChC,KAAM,GACN,UAAW,GACX,MAAO,IACP,SAAU,IAAM,IACd,WAAQ,CACN,MAAO,WACP,WAAY,uBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,SAAUI,EACV,YAAa,GACb,gBAAiBH,EACjB,sBAAuBC,EACvB,WAAYC,CACd,CACF,CAAC,CACH,CACF,CAAC,CACH",
+  "names": ["useExposure_exports", "__export", "useExposure", "__toCommonJS", "import_react", "import_track", "import_useIntersectionObserver", "ref", "componentType", "componentName", "componentTitle", "componentDescription", "navigation", "position"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as U,jsx as r,jsxs as s}from"react/jsx-runtime";import I from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import y from"../../components/picture.js";import x from"../../components/button.js";import R from"../SwiperBox/index.js";import{withStyles as D}from"../../shared/Styles.js";import _,{useState as k,useEffect as j,useRef as a,useCallback as P,useImperativeHandle as V}from"react";import{useAiuiContext as q}from"../AiuiProvider/index.js";import{useExposure as z}from"../../hooks/useExposure.js";import{trackUrlRef as W}from"../../shared/trackUrlRef.js";const g="image",w="scene_banner",$=_.forwardRef(({data:o,className:u="",event:p},N)=>{const[c,T]=k(0),[B,E]=k({0:!0}),d=a([]),f=a({0:!0}),l=a(!1),{trackingData:C}=q(),{profileActivated:M}=C,m=a(null);V(N,()=>m.current),z(m,{componentType:g,componentName:w,componentTitle:o?.title,memberActiveStatus:M?"active":"not active"});const S=(t,e)=>{e&&(d.current[t]=e)},v=t=>{f.current?.[t]&&(l.current=!1,E({[t]:!0}))};j(()=>{const t=d.current;return t?.forEach((e,i)=>{i?(e.style.flex="1 1 0%",e.style.transition="all 0.6s"):(e.style.flex="8 1 0%",e.style.transition="all 0.6s"),e.addEventListener("transitionend",()=>{v(i)})}),()=>{t?.forEach((e,i)=>{e.removeEventListener("transitionend",()=>v(i))})}},[]);const A=({data:t,configuration:e})=>s("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",e?.itemShape==="round"?"rounded-2xl":""),children:[r(y,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),s("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[s("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:t?.title}),r("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:t?.subTitle})]}),r("a",{href:t.link,onClick:()=>e?.event?.primaryButton(t,e),children:r(x,{variant:"secondary",className:n("text-info-primary text-sm font-bold"),children:e?.primaryButton})})]})]}),b=P(t=>{c===t||l.current||(l.current=!0,f.current={[t]:!0},T(t))},[c,l]);return s(U,{children:[o?.title&&r(I,{data:{title:o?.title}}),r("div",{ref:m,className:n("laptop:block hidden",{"aiui-dark":o?.theme==="dark"}),children:r("div",{className:n("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",u),children:o?.products?.map((t,e)=>{const i=c===e,L=i?8:1,H=B?.[e]&&i;return s("div",{style:{flex:L},ref:h=>{h&&S(e,h)},className:n("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>b(e),onMouseLeave:()=>{l.current=!1},onClick:()=>b(e),children:[r(y,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),s("div",{className:n("absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",H?"translate-x-0 opacity-100 transition-transform ease-out":"opacity-0"),children:[s("div",{className:"mr-16 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:t?.title}),r("h3",{className:"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold",children:t?.subTitle})]}),r("a",{href:W(t?.link,`${g}_${w}`),onClick:()=>p?.primaryButton?.(o,e),children:r(x,{variant:"secondary",className:n("desktop:text-base mb-1.5 text-sm font-bold"),children:o?.primaryButton})})]})]},e)})})}),r("div",{className:n("laptop:hidden block",{"aiui-dark":o?.theme==="dark"}),children:r(R,{className:n("h-[400px] !overflow-visible",u),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,itemShape:o?.itemShape,primaryButton:o?.primaryButton,event:p}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var te=D($);export{te as default};
+"use client";import{Fragment as z,jsx as r,jsxs as s}from"react/jsx-runtime";import H from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import y from"../../components/picture.js";import x from"../../components/button.js";import I from"../SwiperBox/index.js";import{withStyles as R}from"../../shared/Styles.js";import A,{useState as k,useEffect as D,useRef as a,useCallback as _,useImperativeHandle as j}from"react";import{useExposure as P}from"../../hooks/useExposure.js";import{trackUrlRef as V}from"../../shared/trackUrlRef.js";const w="image",g="scene_banner",q=A.forwardRef(({data:o,className:u="",event:p},N)=>{const[m,T]=k(0),[B,E]=k({0:!0}),d=a([]),f=a({0:!0}),l=a(!1),c=a(null);j(N,()=>c.current),P(c,{componentType:w,componentName:g,componentTitle:o?.title});const M=(t,e)=>{e&&(d.current[t]=e)},v=t=>{f.current?.[t]&&(l.current=!1,E({[t]:!0}))};D(()=>{const t=d.current;return t?.forEach((e,i)=>{i?(e.style.flex="1 1 0%",e.style.transition="all 0.6s"):(e.style.flex="8 1 0%",e.style.transition="all 0.6s"),e.addEventListener("transitionend",()=>{v(i)})}),()=>{t?.forEach((e,i)=>{e.removeEventListener("transitionend",()=>v(i))})}},[]);const C=({data:t,configuration:e})=>s("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",e?.itemShape==="round"?"rounded-2xl":""),children:[r(y,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img?.url}),s("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[s("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:t?.title}),r("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:t?.subTitle})]}),r("a",{href:t.link,onClick:()=>e?.event?.primaryButton(t,e),children:r(x,{variant:"secondary",className:n("text-info-primary text-sm font-bold"),children:e?.primaryButton})})]})]}),b=_(t=>{m===t||l.current||(l.current=!0,f.current={[t]:!0},T(t))},[m,l]);return s(z,{children:[o?.title&&r(H,{data:{title:o?.title}}),r("div",{ref:c,className:n("laptop:block hidden",{"aiui-dark":o?.theme==="dark"}),children:r("div",{className:n("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",u),children:o?.products?.map((t,e)=>{const i=m===e,S=i?8:1,L=B?.[e]&&i;return s("div",{style:{flex:S},ref:h=>{h&&M(e,h)},className:n("relative cursor-pointer overflow-hidden",o?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>b(e),onMouseLeave:()=>{l.current=!1},onClick:()=>b(e),children:[r(y,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),s("div",{className:n("absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",L?"translate-x-0 opacity-100 transition-transform ease-out":"opacity-0"),children:[s("div",{className:"mr-16 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:t?.title}),r("h3",{className:"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold",children:t?.subTitle})]}),r("a",{href:V(t?.link,`${w}_${g}`),onClick:()=>p?.primaryButton?.(o,e),children:r(x,{variant:"secondary",className:n("desktop:text-base mb-1.5 text-sm font-bold"),children:o?.primaryButton})})]})]},e)})})}),r("div",{className:n("laptop:hidden block",{"aiui-dark":o?.theme==="dark"}),children:r(I,{className:n("h-[400px] !overflow-visible",u),id:"AccordionCards"+o?.key,data:{list:o?.products,configuration:{shape:o?.shape,itemShape:o?.itemShape,primaryButton:o?.primaryButton,event:p}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var X=R(q);export{X as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n  const isAnimation = useRef<boolean>(false)\n\n  const { trackingData } = useAiuiContext()\n  const { profileActivated } = trackingData\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    memberActiveStatus: profileActivated ? 'active' : 'not active',\n  })\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      isAnimation.current = false\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style.flex = '8 1 0%'\n        item.style.transition = 'all 0.6s'\n      } else {\n        item.style.flex = '1 1 0%'\n        item.style.transition = 'all 0.6s'\n      }\n      item.addEventListener('transitionend', () => {\n        handleTransitionEnd(index)\n      })\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div\n        className={cn(\n          'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n          configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n        )}\n      >\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n          <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n            <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n            <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n          </div>\n          <a href={data.link} onClick={() => configuration?.event?.primaryButton(data, configuration)}>\n            <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n              {configuration?.primaryButton}\n            </Button>\n          </a>\n        </div>\n      </div>\n    )\n  }\n\n  const handleSwiperItemClick = useCallback(\n    (idx: number) => {\n      if (hoverIndex === idx || isAnimation.current) return\n      isAnimation.current = true\n      // \u66F4\u65B0 ref \u72B6\u6001\n      enterRef.current = { [idx]: true }\n      // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n      setHoverIndex(idx)\n    },\n    [hoverIndex, isAnimation]\n  )\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n        <div\n          className={cn(\n            'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n            className\n          )}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 8 : 1\n            const isShowContent = currentWidth?.[idx] && isExpanded\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onMouseEnter={() => handleSwiperItemClick(idx)}\n                onMouseLeave={() => {\n                  isAnimation.current = false\n                }}\n                onClick={() => handleSwiperItemClick(idx)}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                <div\n                  className={cn(\n                    'absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n                    isShowContent ? 'translate-x-0 opacity-100 transition-transform ease-out' : 'opacity-0'\n                  )}\n                >\n                  <div className=\"mr-16 flex-1 overflow-hidden\">\n                    <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n                      {item?.title}\n                    </p>\n                    <h3 className=\"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold\">\n                      {item?.subTitle}\n                    </h3>\n                  </div>\n                  <a\n                    href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n                    onClick={() => event?.primaryButton?.(data, idx)}\n                  >\n                    <Button variant=\"secondary\" className={cn('desktop:text-base mb-1.5 text-sm font-bold')}>\n                      {data?.primaryButton}\n                    </Button>\n                  </a>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              itemShape: data?.itemShape,\n              primaryButton: data?.primaryButton,\n              event: event,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n})\nexport default withStyles(AccordionCards)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useEffect", "useRef", "useCallback", "useImperativeHandle", "useAiuiContext", "useExposure", "trackUrlRef", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "trackingData", "profileActivated", "innerRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "isExpanded", "flexValue", "isShowContent", "AccordionCards_default"]
+  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport React, { useState, useEffect, useRef, useCallback, useImperativeHandle } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: {\n    url: string\n  }\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n}\n\ntype AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n  const isAnimation = useRef<boolean>(false)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      isAnimation.current = false\n      setCurrentWidth({ [index]: true })\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      if (!index) {\n        item.style.flex = '8 1 0%'\n        item.style.transition = 'all 0.6s'\n      } else {\n        item.style.flex = '1 1 0%'\n        item.style.transition = 'all 0.6s'\n      }\n      item.addEventListener('transitionend', () => {\n        handleTransitionEnd(index)\n      })\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n    return (\n      <div\n        className={cn(\n          'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n          configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n        )}\n      >\n        <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n        <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n          <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n            <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n            <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n          </div>\n          <a href={data.link} onClick={() => configuration?.event?.primaryButton(data, configuration)}>\n            <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n              {configuration?.primaryButton}\n            </Button>\n          </a>\n        </div>\n      </div>\n    )\n  }\n\n  const handleSwiperItemClick = useCallback(\n    (idx: number) => {\n      if (hoverIndex === idx || isAnimation.current) return\n      isAnimation.current = true\n      // \u66F4\u65B0 ref \u72B6\u6001\n      enterRef.current = { [idx]: true }\n      // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n      setHoverIndex(idx)\n    },\n    [hoverIndex, isAnimation]\n  )\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n        <div\n          className={cn(\n            'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n            className\n          )}\n        >\n          {data?.products?.map((item, idx) => {\n            const isExpanded = hoverIndex === idx\n            const flexValue = isExpanded ? 8 : 1\n            const isShowContent = currentWidth?.[idx] && isExpanded\n            return (\n              <div\n                key={idx}\n                style={{\n                  flex: flexValue,\n                }}\n                ref={(el: HTMLDivElement | null) => {\n                  if (el) getRef(idx, el)\n                }}\n                className={cn(\n                  'relative cursor-pointer overflow-hidden',\n                  data?.itemShape === 'round' ? 'rounded-2xl' : ''\n                )}\n                onMouseEnter={() => handleSwiperItemClick(idx)}\n                onMouseLeave={() => {\n                  isAnimation.current = false\n                }}\n                onClick={() => handleSwiperItemClick(idx)}\n              >\n                <Picture\n                  source={item?.img?.url}\n                  className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                />\n                <div\n                  className={cn(\n                    'absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n                    isShowContent ? 'translate-x-0 opacity-100 transition-transform ease-out' : 'opacity-0'\n                  )}\n                >\n                  <div className=\"mr-16 flex-1 overflow-hidden\">\n                    <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n                      {item?.title}\n                    </p>\n                    <h3 className=\"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold\">\n                      {item?.subTitle}\n                    </h3>\n                  </div>\n                  <a\n                    href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n                    onClick={() => event?.primaryButton?.(data, idx)}\n                  >\n                    <Button variant=\"secondary\" className={cn('desktop:text-base mb-1.5 text-sm font-bold')}>\n                      {data?.primaryButton}\n                    </Button>\n                  </a>\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              itemShape: data?.itemShape,\n              primaryButton: data?.primaryButton,\n              event: event,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.1,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n})\nexport default withStyles(AccordionCards)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withStyles", "React", "useState", "useEffect", "useRef", "useCallback", "useImperativeHandle", "useExposure", "trackUrlRef", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "innerRef", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "isExpanded", "flexValue", "isShowContent", "AccordionCards_default"]
 }

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

@@ -1,10 +1,12 @@
 import React from 'react';
 interface AiuiContextType {
     trackingData: Record<string, any>;
+    locale?: string;
+    copyWriting?: Record<string, string>;
 }
 export declare const AiuiContext: React.Context<AiuiContextType>;
 export declare const useAiuiContext: () => AiuiContextType;
-declare const AiuiProvider: ({ children, trackingData, }: {
+declare const AiuiProvider: ({ children, ...rest }: {
     children: React.ReactNode;
 } & AiuiContextType) => import("react/jsx-runtime").JSX.Element;
 export default AiuiProvider;

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

@@ -1,2 +1,2 @@
-import{jsx as u}from"react/jsx-runtime";import{createContext as r,useContext as i}from"react";const t=r({trackingData:{}}),x=()=>{if(!i(t))throw new Error("useAiui must be used in <AiuiProvider>");return i(t)},n=({children:e,trackingData:o})=>u(t.Provider,{value:{trackingData:o},children:e});var d=n;export{t as AiuiContext,d as default,x as useAiuiContext};
+import{jsx as c}from"react/jsx-runtime";import{createContext as r,useContext as i}from"react";const t=r({trackingData:{},locale:void 0,copyWriting:{}}),d=()=>{if(!i(t))throw new Error("useAiui must be used in <AiuiProvider>");return i(t)},n=({children:e,...o})=>c(t.Provider,{value:o,children:e});var s=n;export{t as AiuiContext,s as default,d as useAiuiContext};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AiuiProvider/index.tsx"],
-  "sourcesContent": ["import React, { createContext, useContext } from 'react'\n\ninterface AiuiContextType {\n  trackingData: Record<string, any>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n  trackingData: {},\n})\n\nexport const useAiuiContext = () => {\n  const context = useContext(AiuiContext)\n  if (!context) {\n    throw new Error('useAiui must be used in <AiuiProvider>')\n  }\n  return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n  children,\n  trackingData,\n}: {\n  children: React.ReactNode\n} & AiuiContextType) => {\n  return (\n    <AiuiContext.Provider\n      value={{\n        trackingData,\n      }}\n    >\n      {children}\n    </AiuiContext.Provider>\n  )\n}\n\nexport default AiuiProvider\n"],
-  "mappings": "AAyBI,cAAAA,MAAA,oBAzBJ,OAAgB,iBAAAC,EAAe,cAAAC,MAAkB,QAM1C,MAAMC,EAAcF,EAA+B,CACxD,aAAc,CAAC,CACjB,CAAC,EAEYG,EAAiB,IAAM,CAElC,GAAI,CADYF,EAAWC,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOD,EAAWC,CAAW,CAC/B,EAEME,EAAe,CAAC,CACpB,SAAAC,EACA,aAAAC,CACF,IAIIP,EAACG,EAAY,SAAZ,CACC,MAAO,CACL,aAAAI,CACF,EAEC,SAAAD,EACH,EAIJ,IAAOE,EAAQH",
-  "names": ["jsx", "createContext", "useContext", "AiuiContext", "useAiuiContext", "AiuiProvider", "children", "trackingData", "AiuiProvider_default"]
+  "sourcesContent": ["import React, { createContext, useContext } from 'react'\n\ninterface AiuiContextType {\n  trackingData: Record<string, any>\n  locale?: string\n  copyWriting?: Record<string, string>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n  trackingData: {},\n  locale: undefined,\n  copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n  const context = useContext(AiuiContext)\n  if (!context) {\n    throw new Error('useAiui must be used in <AiuiProvider>')\n  }\n  return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & AiuiContextType) => {\n  return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
+  "mappings": "AA4BS,cAAAA,MAAA,oBA5BT,OAAgB,iBAAAC,EAAe,cAAAC,MAAkB,QAQ1C,MAAMC,EAAcF,EAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYG,EAAiB,IAAM,CAElC,GAAI,CADYF,EAAWC,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOD,EAAWC,CAAW,CAC/B,EAEME,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,IAGSP,EAACG,EAAY,SAAZ,CAAqB,MAAOI,EAAO,SAAAD,EAAS,EAGtD,IAAOE,EAAQH",
+  "names": ["jsx", "createContext", "useContext", "AiuiContext", "useAiuiContext", "AiuiProvider", "children", "rest", "AiuiProvider_default"]
 }

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { BrandEquityProps } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<BrandEquityProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<BrandEquityProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
     className?: string;
     data?: Record<string, any>;
-}, "ref"> & React.RefAttributes<any>>;
+}, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import{forwardRef as w,useEffect as N,useRef as f,useState as E,useImperativeHandle as S}from"react";import{cn as i}from"../../helpers/utils.js";import v from"../../components/picture.js";import{withStyles as q}from"../../shared/Styles.js";import{useMediaQuery as M}from"react-responsive";import{useExposure as D}from"../../hooks/useExposure.js";import{useAiuiContext as A}from"../AiuiProvider/index.js";import{Swiper as B,SwiperSlide as I}from"swiper/react";import{Pagination as P,FreeMode as j,Mousewheel as T}from"swiper/modules";const H="copy",L="store_benefits",R=(e,o)=>{const a=[];for(let r=0;r<e.length;r+=o)a.push(e.slice(r,r+o));return a},z=w(({data:{items:e=[],itemShape:o},className:a},r)=>{const[s,y]=E(!1),m=M({query:"(max-width: 768px)"}),d=f(null),{trackingData:g}=A(),{profileActivated:b}=g,n=f(null);S(r,()=>n.current),D(n,{componentType:H,componentName:L,memberActiveStatus:b?"active":"not active"}),N(()=>{y(m)},[m]);const k=s?R(e,3):e;return t("div",{ref:n,className:i("brand-equity-wrapper w-full",a),children:s?c(B,{className:i(a),modules:[j,T,P],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:d.current},breakpoints:{0:{spaceBetween:12}},children:[k?.map((l,p)=>t(I,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((h,u)=>t(x,{data:h,itemShape:o,index:u},u))},"SwiperSlide"+p)),t("div",{ref:d,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,p)=>t(x,{data:l,itemShape:o,index:p},p))})})}),x=({data:e,itemShape:o,index:a})=>c("div",{className:i("brand-equity-item","flex w-full flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(a)},o==="round"?"rounded-2xl":"rounded-none"),children:[c("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,s)=>t("div",{className:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(v,{source:r.avatar.url,alt:r.avatar?.alt,className:"size-full object-cover"})},s))}):t(v,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var W=q(z);export{W as default};
+"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{forwardRef as k,useEffect as h,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withStyles as E}from"../../shared/Styles.js";import{useMediaQuery as S}from"react-responsive";import{useExposure as q}from"../../hooks/useExposure.js";import{Swiper as M,SwiperSlide as B}from"swiper/react";import{Pagination as D,FreeMode as I,Mousewheel as P}from"swiper/modules";const j="copy",T="store_benefits",A=(e,o)=>{const a=[];for(let r=0;r<e.length;r+=o)a.push(e.slice(r,r+o));return a},H=k(({data:{items:e=[],itemShape:o},className:a},r)=>{const[s,v]=w(!1),c=S({query:"(max-width: 768px)"}),m=f(null),n=f(null);N(r,()=>n.current),q(n,{componentType:j,componentName:T}),h(()=>{v(c)},[c]);const g=s?A(e,3):e;return t("div",{ref:n,className:i("brand-equity-wrapper w-full",a),children:s?d(M,{className:i(a),modules:[I,P,D],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:m.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,p)=>t(B,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((b,u)=>t(y,{data:b,itemShape:o,index:u},u))},"SwiperSlide"+p)),t("div",{ref:m,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,p)=>t(y,{data:l,itemShape:o,index:p},p))})})}),y=({data:e,itemShape:o,index:a})=>d("div",{className:i("brand-equity-item","flex w-full flex-col bg-white p-4","desktop:p-6 desktop:gap-16 gap-12","laptop:col-span-3 lg-desktop:p-8",{"laptop:col-span-4":[0,5,6,11].includes(a)},o==="round"?"rounded-2xl":"rounded-none"),children:[d("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,s)=>t("div",{className:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar.url,alt:r.avatar?.alt,className:"size-full object-cover"})},s))}):t(x,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var J=E(H);export{J as default};
 //# sourceMappingURL=BrandEquity.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n  ({ data: { items = [], itemShape }, className }, ref) => {\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const paginationRef = useRef<HTMLDivElement>(null)\n    const { trackingData } = useAiuiContext()\n    const { profileActivated } = trackingData\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      memberActiveStatus: profileActivated ? 'active' : 'not active',\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n        {isMobile ? (\n          <Swiper\n            className={cn(className)}\n            modules={[FreeMode, Mousewheel, Pagination]}\n            freeMode={true}\n            mousewheel={{\n              forceToAxis: true,\n            }}\n            pagination={{\n              clickable: true,\n              el: paginationRef.current,\n            }}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n              },\n            }}\n          >\n            {itemsArray?.map((item, jIndex) => (\n              <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n                {Array.isArray(item) &&\n                  item?.map((item, index) => (\n                    <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n            {items.map((item, index) => (\n              <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandEquityItem = ({\n  data,\n  itemShape,\n  index,\n}: {\n  data: BrandEquityItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'flex w-full flex-col bg-white p-4',\n        'desktop:p-6 desktop:gap-16 gap-12',\n        'laptop:col-span-3 lg-desktop:p-8',\n        {\n          ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n        },\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n        <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n              <div\n                key={index}\n                className={cn(\n                  'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                  'relative inline-block',\n                  'lg-desktop:size-[36px]'\n                )}\n              >\n                <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <Picture\n            className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nexport default withStyles(BrandEquity)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withStyles", "useMediaQuery", "useExposure", "useAiuiContext", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "trackingData", "profileActivated", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
+  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n  ({ data: { items = [], itemShape }, className }, ref) => {\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const paginationRef = useRef<HTMLDivElement>(null)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n        {isMobile ? (\n          <Swiper\n            className={cn(className)}\n            modules={[FreeMode, Mousewheel, Pagination]}\n            freeMode={true}\n            mousewheel={{\n              forceToAxis: true,\n            }}\n            pagination={{\n              clickable: true,\n              el: paginationRef.current,\n            }}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n              },\n            }}\n          >\n            {itemsArray?.map((item, jIndex) => (\n              <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n                {Array.isArray(item) &&\n                  item?.map((item, index) => (\n                    <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n            {items.map((item, index) => (\n              <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandEquityItem = ({\n  data,\n  itemShape,\n  index,\n}: {\n  data: BrandEquityItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'flex w-full flex-col bg-white p-4',\n        'desktop:p-6 desktop:gap-16 gap-12',\n        'laptop:col-span-3 lg-desktop:p-8',\n        {\n          ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n        },\n        itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n        <h3 className=\"lg-desktop:text-[18px] text-[14px] font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n              <div\n                key={index}\n                className={cn(\n                  'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                  'relative inline-block',\n                  'lg-desktop:size-[36px]'\n                )}\n              >\n                <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <Picture\n            className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nexport default withStyles(BrandEquity)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withStyles", "useMediaQuery", "useExposure", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as x,jsx as t,jsxs as n}from"react/jsx-runtime";import b,{useImperativeHandle as k,useRef as N}from"react";import{cn as i}from"../../helpers/utils.js";import s from"../../components/picture.js";import{withStyles as C}from"../../shared/Styles.js";import w from"../Title/index.js";import f from"./SwiperCategory.js";import{useExposure as I}from"../../hooks/useExposure.js";import{useAiuiContext as _}from"../AiuiProvider/index.js";import{trackUrlRef as u}from"../../shared/trackUrlRef.js";const c="image",m="category_banner",S=(e,o)=>{const r=[];for(let a=0;a<e.length;a+=o)r.push(e.slice(a,a+o));return r},j=({data:e,configuration:o})=>n("div",{className:i("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:"transition-all duration-300 group-hover:scale-110",children:t("a",{href:u(e?.link,`${c}_${m}`),onClick:()=>o?.event?.primaryButton(e,o?.index),children:t(s,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),t("p",{className:"tablet:text-lg text-info-primary box-border line-clamp-2 flex-1 text-center text-sm font-bold",children:e?.name})]}),z=({data:e,configuration:o})=>n("div",{className:i("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[t("a",{href:u(e?.link,`${c}_${m}`),onClick:()=>o?.event?.primaryButton(e,o?.index),children:t(s,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),t("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),$=({data:e,configuration:o})=>n("div",{className:i("tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto","hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:"transition-all duration-300 group-hover:scale-110",children:t("a",{href:u(e?.link,`${c}_${m}`),onClick:()=>o?.event?.primaryButton(e,o?.index),children:t(s,{className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})})}),t("p",{className:"tablet:text-lg text-info-primary text-center text-sm font-bold",children:e?.name})]}),D=({data:e,configuration:o,index:r})=>n("div",{className:i("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[t("a",{href:e?.link||"",onClick:()=>o?.event?.primaryButton(e,o?.index),children:t(s,{source:e?.image?.url||e?.image,className:i("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),t("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),B=({data:e,configuration:o})=>t("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>t(z,{data:r,configuration:o},a))}),T=({data:e,configuration:o})=>n(x,{children:[t("div",{className:"tablet:block hidden",children:t("div",{className:"mx-auto flex w-full gap-4",children:e?.map((r,a)=>t($,{data:r,configuration:o},a))})}),t("div",{className:"tablet:hidden block",children:t("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>t(D,{index:a,data:r,configuration:o},a))})})]}),M=b.forwardRef((e,o)=>{const{data:r,className:a="",key:g,event:d}=e,l=r?.isShowSelect?r?.products:r?.productData,v=l?.length<=5,p=N(null);k(o,()=>p.current);const{trackingData:h}=_(),{profileActivated:y}=h;return I(p,{componentType:c,componentName:m,componentTitle:r?.title,memberActiveStatus:y?"active":"not active"}),n("div",{ref:p,className:i("w-full overflow-hidden",a,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&t(w,{data:{title:r?.title},className:"text-4xl"}),v?t(T,{data:l,configuration:{shape:r?.shape,event:d}}):n(x,{children:[t("div",{className:"tablet:block hidden",children:t(f,{id:`Category${g}`,Slide:j,data:{list:l,configuration:{shape:r?.shape,event:d}}})}),t("div",{className:"tablet:hidden block",children:t(f,{id:`Category1${g}`,Slide:B,data:{list:S(l,6),configuration:{shape:r?.shape,event:d}}})}),t("div",{className:"h-7"})]})]})});var G=C(M);export{G as default};
+"use client";import{Fragment as x,jsx as t,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as y,useRef as b}from"react";import{cn as i}from"../../helpers/utils.js";import s from"../../components/picture.js";import{withStyles as k}from"../../shared/Styles.js";import N from"../Title/index.js";import f from"./SwiperCategory.js";import{useExposure as w}from"../../hooks/useExposure.js";import{trackUrlRef as u}from"../../shared/trackUrlRef.js";const c="image",m="category_banner",C=(e,o)=>{const r=[];for(let a=0;a<e.length;a+=o)r.push(e.slice(a,a+o));return r},I=({data:e,configuration:o})=>n("div",{className:i("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:"transition-all duration-300 group-hover:scale-110",children:t("a",{href:u(e?.link,`${c}_${m}`),onClick:()=>o?.event?.primaryButton(e,o?.index),children:t(s,{source:e?.image?.url||e?.image,className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),t("p",{className:"tablet:text-lg text-info-primary box-border line-clamp-2 flex-1 text-center text-sm font-bold",children:e?.name})]}),_=({data:e,configuration:o})=>n("div",{className:i("bg-container-secondary-1 box-border max-h-[126px] w-full overflow-hidden","hover:bg-info-white cursor-pointer px-3 py-4 duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[t("a",{href:u(e?.link,`${c}_${m}`),onClick:()=>o?.event?.primaryButton(e,o?.index),children:t(s,{className:"m-auto mb-2 flex size-[72px] justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})}),t("p",{className:"text-info-primary flex-1 truncate text-center text-sm font-bold",children:e?.name})]},`${e?.name}`),S=({data:e,configuration:o})=>n("div",{className:i("tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8 h-auto","hover:bg-info-white bg-container-secondary-1 group box-border flex-1 shrink-0 cursor-pointer overflow-hidden duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:"transition-all duration-300 group-hover:scale-110",children:t("a",{href:u(e?.link,`${c}_${m}`),onClick:()=>o?.event?.primaryButton(e,o?.index),children:t(s,{className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",source:e?.image?.url||e?.image})})}),t("p",{className:"tablet:text-lg text-info-primary text-center text-sm font-bold",children:e?.name})]}),j=({data:e,configuration:o,index:r})=>n("div",{className:i("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer p-4",r===0?"aspect-h-[252] row-span-2":"aspect-h-[120]",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[t("a",{href:e?.link||"",onClick:()=>o?.event?.primaryButton(e,o?.index),children:t(s,{source:e?.image?.url||e?.image,className:i("mb-2 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r===0?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]")})}),t("p",{className:"text-info-primary line-clamp-2 text-center text-sm font-bold",children:e?.name})]}),z=({data:e,configuration:o})=>t("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>t(_,{data:r,configuration:o},a))}),$=({data:e,configuration:o})=>n(x,{children:[t("div",{className:"tablet:block hidden",children:t("div",{className:"mx-auto flex w-full gap-4",children:e?.map((r,a)=>t(S,{data:r,configuration:o},a))})}),t("div",{className:"tablet:hidden block",children:t("div",{className:"grid grid-cols-2 gap-3",children:e?.map((r,a)=>t(j,{index:a,data:r,configuration:o},a))})})]}),D=v.forwardRef((e,o)=>{const{data:r,className:a="",key:g,event:d}=e,l=r?.isShowSelect?r?.products:r?.productData,h=l?.length<=5,p=b(null);return y(o,()=>p.current),w(p,{componentType:c,componentName:m,componentTitle:r?.title}),n("div",{ref:p,className:i("w-full overflow-hidden",a,{"aiui-dark":r?.theme==="dark"}),children:[r?.title&&t(N,{data:{title:r?.title},className:"text-4xl"}),h?t($,{data:l,configuration:{shape:r?.shape,event:d}}):n(x,{children:[t("div",{className:"tablet:block hidden",children:t(f,{id:`Category${g}`,Slide:I,data:{list:l,configuration:{shape:r?.shape,event:d}}})}),t("div",{className:"tablet:hidden block",children:t(f,{id:`Category1${g}`,Slide:z,data:{list:C(l,6),configuration:{shape:r?.shape,event:d}}})}),t("div",{className:"h-7"})]})]})});var q=k(D);export{q as default};
 //# sourceMappingURL=index.js.map