npm - @anker-in/headless-ui - Versions diffs - 0.0.29 → 0.0.30-alpha.2 - Mend

@anker-in/headless-ui 0.0.29 → 0.0.30-alpha.2

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

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

@@ -1,5 +1,5 @@
-"use strict";"use client";var P=Object.create;var d=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,o)=>{for(var a in o)d(t,a,{get:o[a],enumerable:!0})},v=(t,o,a,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of j(o))!C.call(t,l)&&l!==a&&d(t,l,{get:()=>o[l],enumerable:!(s=_(o,l))||s.enumerable});return t};var D=(t,o,a)=>(a=t!=null?P(R(t)):{},v(o||!t||!t.__esModule?d(a,"default",{value:t,enumerable:!0}):a,t)),$=t=>v(d({},"__esModule",{value:!0}),t);var F={};I(F,{default:()=>S});module.exports=$(F);var e=require("react/jsx-runtime"),i=D(require("react")),h=require("react-responsive"),p=require("../../components/index.js"),N=require("../../shared/Styles.js"),u=require("../../helpers/utils.js"),f=require("../../shared/mimeType.js"),B=require("../../hooks/useExposure.js"),g=require("../../shared/trackUrlRef.js");const y="image",b="member_area",L=i.default.forwardRef(({data:t,className:o=""},a)=>{const{title:s,description:l,backgroundImage:r,mobileBackgroundImage:m,primaryButton:n,secondaryButton:c,theme:q,shape:M,primaryButtonHandler:w,secondaryButtonHandler:E}=t,T=(0,h.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,i.useRef)(null);(0,i.useImperativeHandle)(a,()=>x.current),(0,B.useExposure)(x,{componentType:y,componentName:b,componentTitle:s,componentDescription:l});const z=()=>{w?.()},H=()=>{E?.()},k="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,u.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":q==="dark","rounded-box":M==="rounded","h-[480px]":T}),ref:x,children:[(0,f.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(p.Picture,{source:r?.url,alt:r?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,f.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(p.Picture,{source:m?.url,alt:m?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
+"use strict";"use client";var P=Object.create;var d=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,o)=>{for(var a in o)d(t,a,{get:o[a],enumerable:!0})},v=(t,o,a,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of j(o))!C.call(t,p)&&p!==a&&d(t,p,{get:()=>o[p],enumerable:!(s=_(o,p))||s.enumerable});return t};var D=(t,o,a)=>(a=t!=null?P(R(t)):{},v(o||!t||!t.__esModule?d(a,"default",{value:t,enumerable:!0}):a,t)),$=t=>v(d({},"__esModule",{value:!0}),t);var F={};I(F,{default:()=>S});module.exports=$(F);var e=require("react/jsx-runtime"),i=D(require("react")),h=require("react-responsive"),l=require("../../components/index.js"),N=require("../../shared/Styles.js"),u=require("../../helpers/utils.js"),b=require("../../shared/mimeType.js"),B=require("../../hooks/useExposure.js"),g=require("../../shared/trackUrlRef.js");const y="image",f="member_area",L=i.default.forwardRef(({data:t,className:o=""},a)=>{const{title:s,description:p,backgroundImage:r,mobileBackgroundImage:m,primaryButton:n,secondaryButton:c,theme:q,shape:M,primaryButtonHandler:w,secondaryButtonHandler:E}=t,T=(0,h.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,i.useRef)(null);(0,i.useImperativeHandle)(a,()=>x.current),(0,B.useExposure)(x,{componentType:y,componentName:f,componentTitle:s,componentDescription:p});const z=()=>{w?.()},H=()=>{E?.()},k="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,u.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":q==="dark","rounded-box":M==="rounded","h-[480px]":T}),ref:x,children:[(0,b.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(l.Picture,{source:r?.url,alt:r?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,b.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(l.Picture,{source:m?.url,alt:m?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
               tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
               laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
-            `,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(p.Heading,{as:"h2",size:3,className:"member-equity-title ",html:s}),(0,e.jsx)(p.Text,{size:2,className:"member-equity-description",html:l})]}),(0,e.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[c&&c.text&&(0,e.jsx)("a",{href:(0,g.trackUrlRef)(c.link,`${y}_${b}`),children:(0,e.jsx)(p.Button,{variant:"secondary",onClick:H,className:(0,u.cn)("member-equity-button-secondary ",k),children:c.text})}),n&&n.text&&(0,e.jsx)("a",{href:(0,g.trackUrlRef)(n.link,`${y}_${b}`),children:(0,e.jsx)(p.Button,{variant:"primary",onClick:z,className:(0,u.cn)("member-equity-button-primary ",k),children:n.text})})]})]})})]})});var S=(0,N.withStyles)(L);
+            `,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(l.Heading,{as:"h2",size:3,className:"member-equity-title ",html:s}),(0,e.jsx)(l.Text,{size:2,className:"member-equity-description",html:p})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[c&&c.text&&(0,e.jsx)("a",{href:(0,g.trackUrlRef)(c.link,`${y}_${f}`),children:(0,e.jsx)(l.Button,{variant:"secondary",onClick:H,className:(0,u.cn)("member-equity-button-secondary ",k),children:c.text})}),n&&n.text&&(0,e.jsx)("a",{href:(0,g.trackUrlRef)(n.link,`${y}_${f}`),children:(0,e.jsx)(l.Button,{variant:"primary",onClick:z,className:(0,u.cn)("member-equity-button-primary ",k),children:n.text})})]})]})})]})});var S=(0,N.withStyles)(L);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text size={2} className={`member-equity-description`} html={description} />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n              {secondaryButton && secondaryButton.text && (\n                <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                  <Button\n                    variant=\"secondary\"\n                    onClick={handleButtonSecondaryClick}\n                    className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  >\n                    {secondaryButton.text}\n                  </Button>\n                </a>\n              )}\n              {primaryButton && primaryButton.text && (\n                <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                  <Button\n                    variant=\"primary\"\n                    onClick={handleButtonPrimaryClick}\n                    className={cn('member-equity-button-primary ', lgButtonSize)}\n                  >\n                    {primaryButton.text}\n                  </Button>\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nexport default withStyles(MemberEquity)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EY,IAAAI,EAAA,6BA3EZC,EAAmD,oBACnDC,EAA8B,4BAC9BC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBZ,EAAK,IAAMY,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT,yGACA,6CACAhB,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,wBAAQT,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,KAEF,OAAC,OAAI,UAAW,uEACd,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,mFACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,UACC,QAAQ,YACR,QAASmB,EACT,aAAW,MAAG,kCAAmCC,CAAY,EAE5D,SAAAT,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,KAAE,QAAM,eAAYA,EAAc,KAAM,GAAGX,CAAa,IAAIC,CAAa,EAAE,EAC1E,mBAAC,UACC,QAAQ,UACR,QAASkB,EACT,aAAW,MAAG,gCAAiCE,CAAY,EAE1D,SAAAV,EAAc,KACjB,EACF,GAEJ,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOtB,KAAQ,cAAWa,CAAY",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '' }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text size={2} className={`member-equity-description`} html={description} />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                  <Button\n                    variant=\"secondary\"\n                    onClick={handleButtonSecondaryClick}\n                    className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  >\n                    {secondaryButton.text}\n                  </Button>\n                </a>\n              )}\n              {primaryButton && primaryButton.text && (\n                <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                  <Button\n                    variant=\"primary\"\n                    onClick={handleButtonPrimaryClick}\n                    className={cn('member-equity-button-primary ', lgButtonSize)}\n                  >\n                    {primaryButton.text}\n                  </Button>\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nexport default withStyles(MemberEquity)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EY,IAAAI,EAAA,6BA3EZC,EAAmD,oBACnDC,EAA8B,4BAC9BC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBZ,EAAK,IAAMY,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT,yGACA,6CACAhB,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,wBAAQT,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,KAEF,OAAC,OAAI,UAAW,uEACd,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,2CACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,UACC,QAAQ,YACR,QAASmB,EACT,aAAW,MAAG,kCAAmCC,CAAY,EAE5D,SAAAT,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,KAAE,QAAM,eAAYA,EAAc,KAAM,GAAGX,CAAa,IAAIC,CAAa,EAAE,EAC1E,mBAAC,UACC,QAAQ,UACR,QAASkB,EACT,aAAW,MAAG,gCAAiCE,CAAY,EAE1D,SAAAV,EAAc,KACjB,EACF,GAEJ,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOtB,KAAQ,cAAWa,CAAY",
   "names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_Styles", "import_utils", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MemberEquity", "React", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var j=Object.create;var v=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var Q=(s,o)=>{for(var l in o)v(s,l,{get:o[l],enumerable:!0})},V=(s,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of z(o))!U.call(s,i)&&i!==l&&v(s,i,{get:()=>o[i],enumerable:!(p=H(o,i))||p.enumerable});return s};var h=(s,o,l)=>(l=s!=null?j(D(s)):{},V(o||!s||!s.__esModule?v(l,"default",{value:s,enumerable:!0}):l,s)),q=s=>V(v({},"__esModule",{value:!0}),s);var F={};Q(F,{default:()=>O});module.exports=q(F);var t=require("react/jsx-runtime"),n=h(require("react")),G=require("react-responsive"),I=require("../../shared/Styles.js"),M=h(require("../../components/picture.js")),T=h(require("../../components/button.js")),L=require("../../components/heading.js"),_=require("../../components/text.js"),k=require("../../components/gird.js"),$=h(require("../Title/index.js")),S=require("../../helpers/utils.js"),B=h(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),R=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../shared/track.js");const x="image",y="p1_banner",w=({data:s,configuration:o,jIndex:l})=>{const[p,i]=(0,n.useState)(!1),d=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,n.useRef)(null),b=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,R.useExposure)(r,{componentType:x,componentName:y,position:l,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,n.useEffect)(()=>{i(d)},[d]);const{theme:m="light",title:g,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:E}=s,P="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,S.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?b():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:r,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(M.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(M.default,{source:E?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(L.Heading,{size:3,className:"item-title",html:g}),(0,t.jsx)(_.Text,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:f})]}),(0,t.jsxs)("div",{className:"flex gap-[16px]",children:[u&&u.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(u.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"secondary",children:u.text})}),a&&a.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(a.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"primary",children:a.text})})]})]})]})})},A=n.default.forwardRef((s,o)=>{const{shape:l,sectionTitle:p,groupByTab:i=!1,items:d=[],carousel:r}=s.data,b=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),g=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&(0,t.jsx)($.default,{data:{title:p},className:"section-title"}),i?(0,t.jsxs)(c.Tabs,{shape:l,align:"left",defaultValue:m[0],children:[(0,t.jsx)(c.TabsList,{children:m.map((e,a)=>(0,t.jsx)(c.TabsTrigger,{value:e,onClick:()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:y,component_title:p,component_position:1,navigation:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(c.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:l,isTab:i,activeTab:e,num:f?.[e]?.length||0}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:g(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:l,isTab:i}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(k.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:b(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:b("full"),className:"laptop:hidden block",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:l}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var O=(0,I.withStyles)(A);
+"use strict";var j=Object.create;var v=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var Q=(s,o)=>{for(var l in o)v(s,l,{get:o[l],enumerable:!0})},V=(s,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of z(o))!U.call(s,i)&&i!==l&&v(s,i,{get:()=>o[i],enumerable:!(p=H(o,i))||p.enumerable});return s};var h=(s,o,l)=>(l=s!=null?j(D(s)):{},V(o||!s||!s.__esModule?v(l,"default",{value:s,enumerable:!0}):l,s)),q=s=>V(v({},"__esModule",{value:!0}),s);var F={};Q(F,{default:()=>O});module.exports=q(F);var t=require("react/jsx-runtime"),n=h(require("react")),G=require("react-responsive"),I=require("../../shared/Styles.js"),M=h(require("../../components/picture.js")),T=h(require("../../components/button.js")),L=require("../../components/heading.js"),_=require("../../components/text.js"),k=require("../../components/gird.js"),$=h(require("../Title/index.js")),S=require("../../helpers/utils.js"),B=h(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),R=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../shared/track.js");const x="image",y="p1_banner",w=({data:s,configuration:o,jIndex:l})=>{const[p,i]=(0,n.useState)(!1),d=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,n.useRef)(null),g=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,R.useExposure)(r,{componentType:x,componentName:y,position:l,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,n.useEffect)(()=>{i(d)},[d]);const{theme:m="light",title:b,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:E}=s,P="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,S.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?g():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:r,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(M.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(M.default,{source:E?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(L.Heading,{size:3,className:"item-title",html:b}),(0,t.jsx)(_.Text,{size:2,className:"item-description lg-desktop:text-[18px]",html:f})]}),(0,t.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[u&&u.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(u.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"secondary",children:u.text})}),a&&a.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(a.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"primary",children:a.text})})]})]})]})})},A=n.default.forwardRef((s,o)=>{const{shape:l,sectionTitle:p,groupByTab:i=!1,items:d=[],carousel:r}=s.data,g=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),b=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&(0,t.jsx)($.default,{data:{title:p},className:"section-title"}),i?(0,t.jsxs)(c.Tabs,{shape:l,align:"left",defaultValue:m[0],children:[(0,t.jsx)(c.TabsList,{children:m.map((e,a)=>(0,t.jsx)(c.TabsTrigger,{value:e,onClick:()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:y,component_title:p,component_position:1,navigation:e,button_name:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(c.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:l,isTab:i,activeTab:e,num:f?.[e]?.length||0}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:l,isTab:i}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(k.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:g(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:g("full"),className:"laptop:hidden block",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:l}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var O=(0,I.withStyles)(A);
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n  const [isMobile, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        configuration?.isTab\n          ? handleAspect()\n          : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !configuration?.isTab,\n          'h-[400px]': isMobile && configuration?.isTab,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          source={imageUrl?.url}\n          className=\"tablet:block hidden h-full overflow-hidden\"\n          imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n          style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n        />\n        <Picture\n          source={imageMobileUrl?.url || imageUrl?.url}\n          className=\"tablet:hidden block h-full overflow-hidden\"\n          imgClassName=\"h-full transition-all duration-300 object-cover\"\n        />\n        <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n          <div>\n            <Heading size={3} className=\"item-title\" html={title} />\n            <Text\n              size={3}\n              className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\"\n              html={description}\n            />\n          </div>\n          <div className=\"flex gap-[16px]\">\n            {secondaryButton && secondaryButton.text && (\n              <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"secondary\">\n                  {secondaryButton.text}\n                </Button>\n              </a>\n            )}\n            {primaryButton && primaryButton.text && (\n              <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"primary\">\n                  {primaryButton.text}\n                </Button>\n              </a>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={tabName!}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.1,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.1,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => (\n              <GridItem\n                key={`${item?.title || ''}${index}`}\n                span={getSpan(item.width ?? 'full')}\n                className=\"laptop:block hidden\"\n              >\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            // <Carousel className=\"laptop:mt-4 mt-3\">\n            //   <CarouselContent className=\"flex\">\n            //     {carousel.items.map((item, index) => (\n            //       <CarouselItem\n            //         key={`${item?.title || ''}${index}`}\n            //         className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n            //       >\n            //         <ItemBlock item={item} shape={shape} />\n            //       </CarouselItem>\n            //     ))}\n            //   </CarouselContent>\n            // </Carousel>\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.1,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuEQ,IAAAI,EAAA,6BAvERC,EAAmD,oBACnDC,EAA8B,4BAE9BC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAA+B,oCAC/BC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAsB,oCACtBC,EAAyD,oCACzDC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAAwB,iCAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CAAE,KAAMC,EAAM,cAAAC,EAAe,OAAAC,CAAO,IAA4D,CACjH,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAK,EACxCC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DC,KAAM,UAAuB,IAAI,EAEjCC,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,KAEA,eAAYK,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,KAED,aAAU,IAAM,CACdG,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CAAE,MAAAG,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,EAAiB,eAAAC,CAAe,EAAId,EACpGe,EAAe,mFAErB,SACE,OAAC,OACC,aAAW,MACT,kFACAd,GAAe,MACXM,EAAa,EACb,4LACJ,CACE,cAAeN,GAAe,QAAU,UACxC,YAAaO,IAAU,OACvB,YAAaL,GAAY,CAACF,GAAe,MACzC,YAAaE,GAAYF,GAAe,KAC1C,EACA,mBACF,EACA,IAAKK,EAEL,oBAAC,OAAI,UAAU,mBACb,oBAAC,EAAAU,QAAA,CACC,OAAQL,GAAU,IAClB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KACA,OAAC,EAAAK,QAAA,CACC,OAAQF,GAAgB,KAAOH,GAAU,IACzC,UAAU,6CACV,aAAa,kDACf,KACA,QAAC,OAAI,UAAU,kFACb,qBAAC,OACC,oBAAC,WAAQ,KAAM,EAAG,UAAU,aAAa,KAAMF,EAAO,KACtD,OAAC,QACC,KAAM,EACN,UAAU,gEACV,KAAMC,EACR,GACF,KACA,QAAC,OAAI,UAAU,kBACZ,UAAAG,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGhB,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,EAAAmB,QAAA,CAAO,UAAWF,EAAc,QAAQ,YACtC,SAAAF,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,KAAE,QAAM,eAAYA,EAAc,KAAM,GAAGf,CAAa,IAAIC,CAAa,EAAE,EAC1E,mBAAC,EAAAmB,QAAA,CAAO,UAAWF,EAAc,QAAQ,UACtC,SAAAH,EAAc,KACjB,EACF,GAEJ,GACF,GACF,EACF,CAEJ,EAEMM,EAA0B,EAAAC,QAAM,WAAyD,CAACC,EAAOd,IAAQ,CAC7G,KAAM,CAAE,MAAAe,EAAO,aAAAC,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIL,EAAM,KAE1EM,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWJ,EACd,IAAIxB,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAM6B,EAAOC,IAAQA,EAAI,QAAQ9B,CAAI,IAAM6B,CAAK,EAErDE,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeN,EAClB,IAAIO,IAAY,CACf,QAAAA,EACA,MAAOX,EAAM,OAAOxB,GAAQA,EAAK,UAAYmC,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAEF,SACE,QAAC,WAAQ,uBAAqB,0BAA0B,IAAK9B,EAAK,UAAU,oBACzE,UAAAgB,MAAgB,OAAC,EAAAgB,QAAA,CAAM,KAAM,CAAE,MAAOhB,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,KACC,QAAC,QAAK,MAAOF,EAAO,MAAM,OAAO,aAAcO,EAAS,CAAC,EACvD,oBAAC,YACE,SAAAA,EAAS,IAAI,CAACO,EAASN,OACtB,OAAC,eAEC,MAAOM,EACP,QAAS,IAAM,IACb,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBtC,EAChB,eAAgBC,EAChB,gBAAiBwB,EACjB,mBAAoB,EACpB,WAAYa,CACd,CACF,CAAC,CACH,EAEC,SAAAA,GAjBIN,CAkBP,CACD,EACH,EACCD,EAAS,IAAI,CAACO,EAASN,OACtB,OAAC,eAAwB,MAAOM,EAAU,UAAU,qCAClD,gCACE,oBAAC,EAAAI,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAML,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOd,EACP,MAAOE,EACP,UAAWY,EACX,IAAKD,IAAeC,CAAO,GAAG,QAAU,CAC1C,CACF,EACA,MAAOpC,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAegC,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACCV,GAAYA,GAAU,MAAM,OAAS,KACpC,OAAC,EAAAc,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CAAE,KAAMd,GAAU,OAAS,CAAC,EAAG,cAAe,CAAE,MAAOJ,EAAO,MAAOE,CAAW,CAAE,EACxF,MAAOxB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAzEgB8B,CA0ElB,CACD,GACH,KAEA,oBACE,qBAAC,QAAK,UAAU,SACb,UAAAL,EAAM,IAAI,CAACxB,EAAM6B,OAChB,OAAC,YAEC,KAAMH,EAAQ1B,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,mBAACD,EAAA,CAAU,KAAMC,EAAM,cAAe,CAAE,MAAOqB,CAAM,EAAG,OAAQQ,EAAO,GAJlE,GAAG7B,GAAM,OAAS,EAAE,GAAG6B,CAAK,EAKnC,CACD,EACAL,EAAM,IAAI,CAACxB,EAAM6B,OAChB,OAAC,YAA8C,KAAMH,EAAQ,MAAM,EAAG,UAAU,sBAC9E,mBAAC3B,EAAA,CAAU,KAAMC,EAAM,cAAe,CAAE,MAAOqB,CAAM,EAAG,OAAQQ,EAAO,GAD1D,GAAG7B,GAAM,OAAS,EAAE,GAAG6B,CAAK,EAE3C,CACD,GACH,EACCJ,GAAYA,GAAU,MAAM,OAAS,KAapC,OAAC,EAAAc,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CAAE,KAAMd,GAAU,OAAS,CAAC,EAAG,cAAe,CAAE,MAAOJ,CAAM,CAAE,EACrE,MAAOtB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAEJ,CAEJ,CAAC,EAED,IAAOpB,KAAQ,cAAWuC,CAAuB",
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n  const [isMobile, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        configuration?.isTab\n          ? handleAspect()\n          : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !configuration?.isTab,\n          'h-[400px]': isMobile && configuration?.isTab,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          source={imageUrl?.url}\n          className=\"tablet:block hidden h-full overflow-hidden\"\n          imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n          style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n        />\n        <Picture\n          source={imageMobileUrl?.url || imageUrl?.url}\n          className=\"tablet:hidden block h-full overflow-hidden\"\n          imgClassName=\"h-full transition-all duration-300 object-cover\"\n        />\n        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n          <div>\n            <Heading size={3} className=\"item-title\" html={title} />\n            <Text size={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"secondary\">\n                  {secondaryButton.text}\n                </Button>\n              </a>\n            )}\n            {primaryButton && primaryButton.text && (\n              <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"primary\">\n                  {primaryButton.text}\n                </Button>\n              </a>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={tabName!}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.1,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.1,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => (\n              <GridItem\n                key={`${item?.title || ''}${index}`}\n                span={getSpan(item.width ?? 'full')}\n                className=\"laptop:block hidden\"\n              >\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            // <Carousel className=\"laptop:mt-4 mt-3\">\n            //   <CarouselContent className=\"flex\">\n            //     {carousel.items.map((item, index) => (\n            //       <CarouselItem\n            //         key={`${item?.title || ''}${index}`}\n            //         className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n            //       >\n            //         <ItemBlock item={item} shape={shape} />\n            //       </CarouselItem>\n            //     ))}\n            //   </CarouselContent>\n            // </Carousel>\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.1,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
   "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
 }

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

@@ -1,8 +1,6 @@
-"use strict";"use client";var z=Object.create;var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var G=(e,r)=>{for(var n in r)b(e,n,{get:r[n],enumerable:!0})},B=(e,r,n,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of F(r))!W.call(e,s)&&s!==n&&b(e,s,{get:()=>r[s],enumerable:!(p=j(r,s))||p.enumerable});return e};var m=(e,r,n)=>(n=e!=null?z(Q(e)):{},B(r||!e||!e.__esModule?b(n,"default",{value:e,enumerable:!0}):n,e)),J=e=>B(b({},"__esModule",{value:!0}),e);var ee={};G(ee,{default:()=>Z});module.exports=J(ee);var t=require("react/jsx-runtime"),a=m(require("react")),d=require("../../helpers/utils.js"),I=m(require("../../components/picture.js")),C=m(require("./tabSwitch.js")),w=m(require("../../components/button.js")),_=m(require("../Title/index.js")),M=m(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),V=require("./shelfDisplay.js"),q=require("react-responsive"),H=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js");const D="image",P="product_shelf",K=999999999e-2,X=({data:e,configuration:r})=>{const{locale:n="us",copyWriting:p}=(0,$.useAiuiContext)(),s=(i,o)=>r?.event?.primaryButton?.(i,o+1),v=(i,o)=>r?.event?.secondaryButton?.(i,o+1),l=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===K,{price:y,basePrice:h}=(0,V.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const i=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===i)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:g(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,o)=>(0,t.jsx)("div",{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",children:i},o))}),(0,t.jsx)("p",{title:e?.title||"",className:"desktop:text-2xl desktop:leading-7 text-info-primary line-clamp-2 flex-1 text-xl font-bold",children:e?.title||""}),(0,t.jsx)("h3",{title:e?.description||"",className:"tablet:mt-2 tablet:mb-3 desktop:text-lg text-info-primary mb-2 mt-1 h-6 truncate text-sm font-semibold",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 flex items-center",children:u?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:y||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:h||""})]})}),(0,t.jsxs)("div",{className:(0,d.cn)("flex items-center gap-3",r.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(w.default,{variant:"primary",onClick:()=>s(e,r?.index),className:`
-            laptop:text-sm desktop:text-base text-xs
-            ${r.direction==="vertical"?"w-full":""}
-          `,children:r?.primaryButton||""}),(0,t.jsx)(w.default,{variant:"secondary",onClick:()=>v(e,r?.index),className:`
-            laptop:text-sm desktop:text-base text-xs
-            ${r.direction==="vertical"?"w-full":""}
-          `,children:r?.secondaryButton||""})]})]},e?.id||e?.handle)},Y=a.default.forwardRef(({data:e,buildData:r,className:n="",key:p,event:s},v)=>{const[l,u]=(0,a.useState)(""),[y,h]=(0,a.useState)([]),g=(0,q.useMediaQuery)({query:"(max-width: 768px)"}),i=(0,a.useRef)(null);(0,a.useImperativeHandle)(v,()=>i.current),(0,H.useExposure)(i,{componentType:D,componentName:P,componentTitle:e?.title,navigation:l});const{productsTab:o=[],productsCard:S=[],title:f,align:te="left",isShowTab:N=!0,tabShape:A="square",...L}=e,k=c=>{const O=c?.map(x=>{const T=r?.products?.find(U=>U?.handle===x?.handle);if(T)return{sku:x.sku,...T}})?.filter(x=>x);h(O)};return(0,a.useEffect)(()=>{if(N){u(o?.[0]?.tab||""),k(o?.[0]?.data||[]);return}k(S)},[]),(0,t.jsxs)("div",{ref:i,className:(0,d.cn)("w-full",n,{"aiui-dark":e?.theme==="dark"}),children:[f&&(0,t.jsx)(_.default,{data:{title:f}}),N&&(0,t.jsx)("div",{className:`${g?"w-full overflow-hidden":""}`,children:(0,t.jsx)(C.default,{value:l,tabs:o,tabShape:A,onTabClick:c=>{u(c?.tab),k(c?.data||[]),(0,R.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:D,component_name:P,component_title:e?.title,component_position:1,navigation:c?.tab}})}})}),(0,t.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,t.jsx)(M.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${l}`,data:{list:y,configuration:{...L,event:s}},Slide:X,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var Z=(0,E.withStyles)(Y);
+"use strict";"use client";var Q=Object.create;var y=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,i)=>{for(var n in i)y(e,n,{get:i[n],enumerable:!0})},N=(e,i,n,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of G(i))!K.call(e,s)&&s!==n&&y(e,s,{get:()=>i[s],enumerable:!(m=W(i,s))||m.enumerable});return e};var p=(e,i,n)=>(n=e!=null?Q(J(e)):{},N(i||!e||!e.__esModule?y(n,"default",{value:e,enumerable:!0}):n,e)),Y=e=>N(y({},"__esModule",{value:!0}),e);var re={};X(re,{default:()=>ie});module.exports=Y(re);var t=require("react/jsx-runtime"),a=p(require("react")),d=require("../../helpers/utils.js"),I=p(require("../../components/picture.js")),C=p(require("./tabSwitch.js")),w=p(require("../../components/button.js")),_=p(require("../Title/index.js")),M=p(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),z=p(require("../../components/badge.js")),A=require("../../components/heading.js"),L=require("../../components/text.js");const D="image",P="product_shelf",Z=999999999e-2,ee=({data:e,configuration:i})=>{const{locale:n="us",copyWriting:m}=(0,$.useAiuiContext)(),s=(r,o)=>i?.event?.primaryButton?.(r,o+1),h=(r,o)=>i?.event?.secondaryButton?.(r,o+1),l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===Z,{price:b,basePrice:x}=(0,H.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const r=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("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",i?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:g(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>(0,t.jsx)(z.default,{children:r},o))}),(0,t.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),(0,t.jsx)(L.Text,{size:2,className:"shelf-display-product-description line-clamp-1 h-[20px]",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:u?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:x||""})]})}),(0,t.jsxs)("div",{className:(0,d.cn)("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(w.default,{variant:"primary",onClick:()=>s(e,i?.index),className:`
+            ${i.direction==="vertical"?"w-full":""}
+          `,children:i?.primaryButton||""}),(0,t.jsx)(w.default,{variant:"secondary",onClick:()=>h(e,i?.index),className:`
+            ${i.direction==="vertical"?"w-full":""}
+          `,children:i?.secondaryButton||""})]})]},e?.id||e?.handle)},te=a.default.forwardRef(({data:e,buildData:i,className:n="",key:m,event:s},h)=>{const[l,u]=(0,a.useState)(""),[b,x]=(0,a.useState)([]),g=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,a.useRef)(null);(0,a.useImperativeHandle)(h,()=>r.current),(0,q.useExposure)(r,{componentType:D,componentName:P,componentTitle:e?.title,navigation:l});const{productsTab:o=[],productsCard:S=[],title:f,align:ne="left",isShowTab:T=!0,tabShape:O="square",...U}=e,k=c=>{const j=c?.map(v=>{const B=i?.products?.find(F=>F?.handle===v?.handle);if(B)return{sku:v.sku,...B}})?.filter(v=>v);x(j)};return(0,a.useEffect)(()=>{if(T){u(o?.[0]?.tab||""),k(o?.[0]?.data||[]);return}k(S)},[]),(0,t.jsxs)("div",{ref:r,className:(0,d.cn)("w-full",n,{"aiui-dark":e?.theme==="dark"}),children:[f&&(0,t.jsx)(_.default,{data:{title:f}}),T&&(0,t.jsx)("div",{className:`${g?"w-full overflow-hidden":""}`,children:(0,t.jsx)(C.default,{value:l,tabs:o,tabShape:O,onTabClick:c=>{u(c?.tab),k(c?.data||[]),(0,R.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:D,component_name:P,component_title:e?.title,component_position:1,navigation:c?.tab}})}})}),(0,t.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,t.jsx)(M.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${m}${l}`,data:{list:b,configuration:{...U,event:s}},Slide:ee,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var ie=(0,E.withStyles)(te);
 //# sourceMappingURL=index.js.map

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 { 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('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'component_click',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    component_type: componentType,\n                    component_name: componentName,\n                    component_title: data?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n          <SwiperBox\n            className=\"mt-6 !overflow-visible\"\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{ list: currentItems, configuration: { ...other, event: event } }}\n            Slide={ShelfDisplayItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.1,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 2.3,\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 3,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
-  "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"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number) => void\n  secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.primaryButton?.(params, index + 1)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.secondaryButton?.(params, index + 1)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: variant?.price?.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return <Badge key={index}>{item}</Badge>\n        })}\n      </div>\n      <Heading\n        title={data?.title || ''}\n        size={2}\n        className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n      >\n        {data?.title || ''}\n      </Heading>\n      <Text size={2} className=\"shelf-display-product-description line-clamp-1 h-[20px]\">\n        {data?.description || ''}\n      </Text>\n      <div className=\"mb-2 mt-[20px] flex items-center\">\n        {isSoldOut ? (\n          <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n        ) : (\n          <>\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n            <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n          </>\n        )}\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div\n        className={cn(\n          'lg-desktop:gap-3 flex items-center gap-2',\n          configuration.direction === 'vertical' ? 'flex-col' : ''\n        )}\n      >\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data, configuration?.index)}\n          className={`\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data, configuration?.index)}\n          className={`\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      align = 'left',\n      isShowTab = true,\n      tabShape = 'square',\n      ...other\n    } = data\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n      const newCurrentData = currentData\n        ?.map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      setCurrentItems(newCurrentData)\n    }\n\n    useEffect(() => {\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [])\n        return\n      }\n      handleCurrentTab(productsCard)\n    }, [])\n\n    return (\n      <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\n                gaTrack({\n                  event: 'ga4Event',\n                  event_name: 'component_click',\n                  event_parameters: {\n                    page_group: 'Home Page',\n                    component_type: componentType,\n                    component_name: componentName,\n                    component_title: data?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n          <SwiperBox\n            className=\"mt-6 !overflow-visible\"\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{ list: currentItems, configuration: { ...other, event: event } }}\n            Slide={ShelfDisplayItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.1,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 2.3,\n              },\n              1024: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 3,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,EAAAH,IAkHQ,IAAAI,EAAA,6BAjHRC,EAAwE,oBACxEC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,6BACtBC,EAAmB,yCACnBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAmC,6BACnCC,EAA8B,4BAC9BC,EAA4B,sCAC5BC,EAAwB,iCACxBC,EAA+B,oCAC/BC,EAAkB,wCAClBC,EAAwB,uCACxBC,EAAqB,oCAErB,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAiB,aAyDjBC,GAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAEhDC,EAAkB,CAACC,EAA0BC,IACjDL,GAAe,OAAO,gBAAgBI,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDL,GAAe,OAAO,kBAAkBI,EAAQC,EAAQ,CAAC,EAErDE,EAAUR,GAAM,UAAU,KAAMS,GAAcA,GAAM,MAAQT,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGU,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWV,EAErE,CAAE,MAAAa,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQV,EACR,OAAQM,GAAS,OAAO,QAAU,EAClC,WAAYR,GAAM,gBAAgB,QAAUA,GAAM,OAAO,QAAU,EACnE,aAAcA,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKa,EAAY,IAAM,CACtB,MAAMC,EAAMd,GAAM,IACZe,EAAWf,GAAM,SAEvB,OADgBe,GAAU,KAAMN,GAAcA,GAAM,MAAQK,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,SACE,QAAC,OAEC,aAAW,MACT,2JACAd,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,oBAAC,OAAI,aAAW,MAAG,2FAA2F,EAC5G,mBAAC,EAAAe,QAAA,CAAQ,OAAQH,EAAU,EAAG,UAAU,yDAAyD,EACnG,KACA,OAAC,OAAI,UAAU,2DACZ,SAAAb,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACS,EAAWH,OACnC,OAAC,EAAAW,QAAA,CAAmB,SAAAR,GAARH,CAAa,CACjC,EACH,KACA,OAAC,WACC,MAAON,GAAM,OAAS,GACtB,KAAM,EACN,UAAU,6EAET,SAAAA,GAAM,OAAS,GAClB,KACA,OAAC,QAAK,KAAM,EAAG,UAAU,0DACtB,SAAAA,GAAM,aAAe,GACxB,KACA,OAAC,OAAI,UAAU,mCACZ,SAAAU,KACC,OAAC,OAAI,UAAU,sDAAuD,SAAAP,GAAa,YAAY,KAE/F,oBACE,oBAAC,OAAI,UAAU,sDAAuD,SAAAQ,GAAS,GAAG,KAClF,OAAC,OAAI,UAAU,6DAA8D,SAAAC,GAAa,GAAG,GAC/F,EAEJ,KAEA,QAAC,OACC,aAAW,MACT,2CACAX,EAAc,YAAc,WAAa,WAAa,EACxD,EAEA,oBAAC,EAAAiB,QAAA,CACC,QAAQ,UACR,QAAS,IAAMd,EAAgBJ,EAAMC,GAAe,KAAK,EACzD,UAAW;AAAA,cACPA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,eAAiB,GACnC,KACA,OAAC,EAAAiB,QAAA,CACC,QAAQ,YACR,QAAS,IAAMX,EAAkBP,EAAMC,GAAe,KAAK,EAC3D,UAAW;AAAA,cACPA,EAAc,YAAc,WAAa,SAAW,EAAE;AAAA,YAGzD,SAAAA,GAAe,iBAAmB,GACrC,GACF,IA3DKD,GAAM,IAAMA,GAAM,MA4DzB,CAEJ,EAEMmB,GAAe,EAAAC,QAAM,WACzB,CAAC,CAAE,KAAApB,EAAM,UAAAqB,EAAW,UAAAC,EAAY,GAAI,IAAAC,EAAK,MAAAC,CAAM,EAAGC,IAAQ,CACxD,KAAM,CAACC,EAAOC,CAAQ,KAAI,YAAiB,EAAE,EACvC,CAACC,EAAcC,CAAe,KAAI,YAA6B,CAAC,CAAC,EAEjEC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAExDC,KAAW,UAAuB,IAAI,KAC5C,uBAAoBN,EAAK,IAAMM,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAenC,EACf,cAAeC,EACf,eAAgBG,GAAM,MACtB,WAAY0B,CACd,CAAC,EAED,KAAM,CACJ,YAAAM,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,MAAAC,GAAQ,OACR,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,GAAGC,CACL,EAAItC,EAEEuC,EAAoBC,GAAoC,CAC5D,MAAMC,EAAiBD,GACnB,IAAI/B,GAAQ,CACZ,MAAMiC,EAAWrB,GAAW,UAAU,KAAKhB,GAAUA,GAAQ,SAAWI,GAAM,MAAM,EACpF,GAAIiC,EACF,MAAO,CACL,IAAKjC,EAAK,IACV,GAAGiC,CACL,CAEJ,CAAC,GACC,OAAOjC,GAAQA,CAAI,EACvBoB,EAAgBY,CAAc,CAChC,EAEA,sBAAU,IAAM,CACd,GAAIL,EAAW,CACbT,EAASK,IAAc,CAAC,GAAG,KAAO,EAAE,EACpCO,EAAiBP,IAAc,CAAC,GAAG,MAAQ,CAAC,CAAC,EAC7C,MACF,CACAO,EAAiBN,CAAY,CAC/B,EAAG,CAAC,CAAC,KAGH,QAAC,OAAI,IAAKF,EAAU,aAAW,MAAG,SAAUT,EAAW,CAAE,YAAatB,GAAM,QAAU,MAAO,CAAC,EAC3F,UAAAkC,MAAS,OAAC,EAAAS,QAAA,CAAM,KAAM,CAAE,MAAOT,CAAM,EAAG,EACxCE,MACC,OAAC,OAAI,UAAW,GAAGN,EAAW,yBAA2B,EAAE,GACzD,mBAAC,EAAAc,QAAA,CACC,MAAOlB,EACP,KAAMM,EACN,SAAUK,EACV,WAAYQ,GAAK,CACflB,EAASkB,GAAG,GAAG,EACfN,EAAiBM,GAAG,MAAQ,CAAC,CAAC,KAC9B,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBjD,EAChB,eAAgBC,EAChB,gBAAiBG,GAAM,MACvB,mBAAoB,EACpB,WAAY6C,GAAG,GACjB,CACF,CAAC,CACH,EACF,EACF,KAEF,OAAC,OAAI,UAAU,2FACb,mBAAC,EAAAC,QAAA,CACC,UAAU,yBACV,GAAI,eAAevB,CAAG,GAAGG,CAAK,GAC9B,KAAM,CAAE,KAAME,EAAc,cAAe,CAAE,GAAGU,EAAO,MAAOd,CAAM,CAAE,EACtE,MAAOzB,GACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOtB,MAAQ,cAAW0C,EAAY",
+  "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", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "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/Title/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var A=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},y=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of N(r))!C.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(s=L(r,o))||s.enumerable});return t};var G=(t,r,e)=>(e=t!=null?A(z(t)):{},y(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>y(l({},"__esModule",{value:!0}),t);var $={};D($,{default:()=>U});module.exports=I($);var d=require("react/jsx-runtime"),n=G(require("react")),b=require("@gsap/react"),a=require("gsap"),f=require("gsap/dist/SplitText"),c=require("gsap/dist/ScrollTrigger"),w=require("../../helpers/utils.js"),x=require("../../components/index.js"),v=require("../../shared/Styles.js");const T=n.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:s}=t,o=(0,n.useRef)(null),i=(0,n.useRef)(null);return(0,b.useGSAP)(()=>{if(a.gsap.registerPlugin(f.SplitText,c.ScrollTrigger),!o.current)return;const H=o.current?.clientHeight||80;i.current=new f.SplitText(o.current,{type:"words",wordsClass:"word"});const m=i.current.words;return a.gsap.set(m,{opacity:0}),c.ScrollTrigger.create({trigger:o.current,start:"bottom bottom-=4%",end:`bottom+=${H*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:p=>{const S=p.progress,g=m.length,k=1/g,h=.5;m.forEach((E,M)=>{const P=M/g*(1-h),R=k*(1+h);let u=(S-P)/R;u=Math.max(0,Math.min(u,1)),a.gsap.set(E,{opacity:u})})}}),()=>{i.current&&i.current.revert(),c.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),e&&(0,d.jsx)("div",{className:(0,w.cn)("tablet:mb-[32px] mb-[24px] space-y-4",r,{"aiui-dark":s==="dark"}),children:(0,d.jsx)(x.Heading,{ref:o,as:"h1",size:4,html:e})})});T.displayName="Title";var U=(0,v.withStyles)(T);
+"use strict";"use client";var A=Object.create;var l=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},y=(t,r,e,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of N(r))!C.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(s=L(r,o))||s.enumerable});return t};var G=(t,r,e)=>(e=t!=null?A(z(t)):{},y(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),I=t=>y(l({},"__esModule",{value:!0}),t);var $={};D($,{default:()=>U});module.exports=I($);var d=require("react/jsx-runtime"),n=G(require("react")),w=require("@gsap/react"),a=require("gsap"),f=require("gsap/dist/SplitText"),c=require("gsap/dist/ScrollTrigger"),b=require("../../helpers/utils.js"),v=require("../../components/index.js"),x=require("../../shared/Styles.js");const T=n.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:s}=t,o=(0,n.useRef)(null),i=(0,n.useRef)(null);return(0,w.useGSAP)(()=>{if(a.gsap.registerPlugin(f.SplitText,c.ScrollTrigger),!o.current)return;const H=o.current?.clientHeight||80;i.current=new f.SplitText(o.current,{type:"words",wordsClass:"word"});const m=i.current.words;return a.gsap.set(m,{opacity:0}),c.ScrollTrigger.create({trigger:o.current,start:"bottom bottom-=4%",end:`bottom+=${H*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:p=>{const S=p.progress,g=m.length,k=1/g,h=.5;m.forEach((E,M)=>{const P=M/g*(1-h),R=k*(1+h);let u=(S-P)/R;u=Math.max(0,Math.min(u,1)),a.gsap.set(E,{opacity:u})})}}),()=>{i.current&&i.current.revert(),c.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),e&&(0,d.jsx)("div",{className:(0,b.cn)("mb-[24px] space-y-4",r,{"aiui-dark":s==="dark"}),children:(0,d.jsx)(v.Heading,{ref:o,as:"h1",size:4,html:e})})});T.displayName="Title";var U=(0,x.withStyles)(T);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { 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 } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n  const { title, theme } = data\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    if (!titleRef.current) return\n    const height = titleRef.current?.clientHeight || 80\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\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 + 60}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    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n    }\n  }, [])\n\n  return (\n    title && (\n      <div className={cn('tablet:mb-[32px] mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h1\" size={4} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CAEZ,GADA,OAAK,eAAe,YAAW,eAAa,EACxC,CAACD,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASH,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWE,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASa,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHhB,MACE,OAAC,OAAI,aAAW,MAAG,uCAAwCD,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACrG,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOV,KAAQ,cAAWU,CAAK",
+  "sourcesContent": ["'use client'\nimport React, { 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 } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n  const { title, theme } = data\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  useGSAP(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    if (!titleRef.current) return\n    const height = titleRef.current?.clientHeight || 80\n    splitTextInstance.current = new SplitText(titleRef.current, {\n      type: 'words',\n      wordsClass: 'word',\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 + 60}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    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n    }\n  }, [])\n\n  return (\n    title && (\n      <div className={cn('mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h1\" size={4} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withStyles(Title)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqDQ,IAAAI,EAAA,6BApDRC,EAA8B,oBAC9BA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAG3B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACvD,oBAAQ,IAAM,CAEZ,GADA,OAAK,eAAe,YAAW,eAAa,EACxC,CAACD,EAAS,QAAS,OACvB,MAAME,EAASF,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMG,EAAQF,EAAkB,QAAQ,MACxC,cAAK,IAAIE,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9B,gBAAc,OAAO,CACnB,QAASH,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWE,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,EACM,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAC9D,gBAAc,OAAO,EAAE,QAASa,GAA2BA,EAAE,KAAK,CAAC,CACrE,CACF,EAAG,CAAC,CAAC,EAGHhB,MACE,OAAC,OAAI,aAAW,MAAG,sBAAuBD,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACpF,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOV,KAAQ,cAAWU,CAAK",
   "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "Title", "React", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "t"]
 }

package/dist/cjs/components/badge.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var a=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var f=(e,t)=>{for(var n in t)a(e,n,{get:t[n],enumerable:!0})},u=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!l.call(e,o)&&o!==n&&a(e,o,{get:()=>t[o],enumerable:!(r=x(t,o))||r.enumerable});return e};var c=e=>u(a({},"__esModule",{value:!0}),e);var V={};f(V,{default:()=>m});module.exports=c(V);var s=require("react/jsx-runtime"),P=require("react"),i=require("class-variance-authority"),p=require("../helpers/index.js");const b=(0,i.cva)("text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"px-[8px] pb-[4px] pt-[5px] text-[16px] leading-tight"}},defaultVariants:{size:"lg"}});function g({className:e,size:t,...n}){return(0,s.jsx)("div",{className:(0,p.cn)(b({size:t}),e),...n})}var m=g;
+"use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var p in t)n(e,p,{get:t[p],enumerable:!0})},f=(e,t,p,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!l.call(e,o)&&o!==p&&n(e,o,{get:()=>t[o],enumerable:!(a=s(t,o))||a.enumerable});return e};var u=e=>f(n({},"__esModule",{value:!0}),e);var k={};g(k,{default:()=>m});module.exports=u(k);var x=require("react/jsx-runtime"),V=require("react"),r=require("class-variance-authority"),i=require("../helpers/index.js");const b=(0,r.cva)("text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight"}},defaultVariants:{size:"lg"}});function c({className:e,size:t,...p}){return(0,x.jsx)("div",{className:(0,i.cn)(b({size:t}),e),...p})}var m=c;
 //# sourceMappingURL=badge.js.map

package/dist/cjs/components/badge.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/badge.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n  'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n  {\n    variants: {\n      size: {\n        sm: 'px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n        lg: 'px-[8px] pb-[4px] pt-[5px] text-[16px] leading-tight',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n    },\n  }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n  return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBS,IAAAI,EAAA,6BAvBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,uDACJ,GAAI,sDACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIA,SAASC,EAAM,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAe,CACxD,SAAO,OAAC,OAAI,aAAW,MAAGJ,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC5E,CAEA,IAAOV,EAAQO",
+  "sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n  'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n  {\n    variants: {\n      size: {\n        sm: 'h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n        lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] lg-desktop:h-[28px] h-[24px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n    },\n  }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n  return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBS,IAAAI,EAAA,6BAvBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,gEACJ,GAAI,sKACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIA,SAASC,EAAM,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAe,CACxD,SAAO,OAAC,OAAI,aAAW,MAAGJ,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC5E,CAEA,IAAOV,EAAQO",
   "names": ["badge_exports", "__export", "badge_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_helpers", "badgeVariants", "Badge", "className", "size", "props"]
 }

package/dist/cjs/components/button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var w=Object.create;var i=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var a in t)i(e,a,{get:t[a],enumerable:!0})},f=(e,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of B(t))!L.call(e,o)&&o!==a&&i(e,o,{get:()=>t[o],enumerable:!(n=k(t,o))||n.enumerable});return e};var p=(e,t,a)=>(a=e!=null?w(V(e)):{},f(t||!e||!e.__esModule?i(a,"default",{value:e,enumerable:!0}):a,e)),E=e=>f(i({},"__esModule",{value:!0}),e);var I={};z(I,{default:()=>R});module.exports=E(I);var r=require("react/jsx-runtime"),C=p(require("react")),u=require("@radix-ui/react-slot"),y=require("@radix-ui/react-visually-hidden"),d=require("class-variance-authority"),m=p(require("../icons/spinner.js")),g=require("../helpers/index.js");const H={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},M=({size:e="base"})=>{const{width:t,height:a}=H[e];return(0,r.jsx)("svg",{width:t,height:a,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsx)("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})})},N=(0,d.cva)("rounded-btn inline-flex items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ",secondary:"bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]",link:"text-info-primary hover:text-btn-primary-active border-none",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px]  leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"px-7 pb-[14px] pt-[15px] text-[16px]  leading-tight",icon:"size-10 rounded-full  leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1]  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none",state:"default"}}),P=(0,d.cva)("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),c=C.forwardRef(({asChild:e=!1,size:t="base",children:a,variant:n,hoverEffect:o="none",className:v,disabled:b=!1,loading:s=!1,spinner:l,...h},x)=>(0,r.jsx)(e?u.Slot:"button",{disabled:b||s,className:(0,g.cn)(N({variant:n,size:t,hoverEffect:o,state:s?"loading":b?"disabled":"default"}),v),ref:x,...h,children:s?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:a}),(0,r.jsx)("span",{className:"absolute",children:l||(0,r.jsx)(m.default,{className:P({variant:n})})}),(0,r.jsx)(y.VisuallyHidden,{children:a})]}):(0,r.jsxs)(r.Fragment,{children:[a,n==="link"&&t&&t!=="icon"&&(0,r.jsx)(M,{size:t})]})}));c.displayName="Button";var R=c;
+"use strict";"use client";var k=Object.create;var i=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},p=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of B(t))!L.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(n=w(t,a))||n.enumerable});return e};var f=(e,t,o)=>(o=e!=null?k(V(e)):{},p(t||!e||!e.__esModule?i(o,"default",{value:e,enumerable:!0}):o,e)),E=e=>p(i({},"__esModule",{value:!0}),e);var I={};z(I,{default:()=>R});module.exports=E(I);var r=require("react/jsx-runtime"),C=f(require("react")),u=require("@radix-ui/react-slot"),g=require("@radix-ui/react-visually-hidden"),d=require("class-variance-authority"),y=f(require("../icons/spinner.js")),m=require("../helpers/index.js");const H={sm:{width:"16",height:"16"},base:{width:"18",height:"18"},lg:{width:"20",height:"20"}},M=({size:e="base"})=>{const{width:t,height:o}=H[e];return(0,r.jsx)("svg",{width:t,height:o,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsx)("path",{d:"M7.5 5L12.5 10L7.5 15",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})})},N=(0,d.cva)("rounded-btn inline-flex items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ",secondary:"bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]",link:"text-info-primary hover:text-btn-primary-active border-none",ghost:"text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1]  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active disabled:border-btn-primary-disabled-border"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"}],defaultVariants:{variant:"primary",size:"lg",hoverEffect:"none",state:"default"}}),P=(0,d.cva)("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"}},defaultVariants:{variant:"primary"}}),c=C.forwardRef(({asChild:e=!1,size:t="lg",children:o,variant:n,hoverEffect:a="none",className:v,disabled:b=!1,loading:s=!1,spinner:l,...h},x)=>(0,r.jsx)(e?u.Slot:"button",{disabled:b||s,className:(0,m.cn)(N({variant:n,size:t,hoverEffect:a,state:s?"loading":b?"disabled":"default"}),v),ref:x,...h,children:s?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:o}),(0,r.jsx)("span",{className:"absolute",children:l||(0,r.jsx)(y.default,{className:P({variant:n})})}),(0,r.jsx)(g.VisuallyHidden,{children:o})]}):(0,r.jsxs)(r.Fragment,{children:[o,n==="link"&&t&&t!=="icon"&&(0,r.jsx)(M,{size:t})]})}));c.displayName="Button";var R=c;
 //# sourceMappingURL=button.js.map

package/dist/cjs/components/button.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/button.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nconst sizeMap = {\n  sm: {\n    width: '16',\n    height: '16',\n  },\n  base: {\n    width: '18',\n    height: '18',\n  },\n  lg: {\n    width: '20',\n    height: '20',\n  },\n}\nconst LinkButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M7.5 5L12.5 10L7.5 15\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.66667\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n  'rounded-btn inline-flex items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n        secondary:\n          'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n        link: 'text-info-primary hover:text-btn-primary-active border-none',\n        ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n      },\n      size: {\n        sm: 'px-3 py-2 text-[12px]  leading-tight',\n        base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n        lg: 'px-7 pb-[14px] pt-[15px] text-[16px]  leading-tight',\n        icon: 'size-10 rounded-full  leading-tight',\n      },\n      /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n      hoverEffect: {\n        none: '',\n        slide: '',\n      },\n      state: {\n        default: '',\n        disabled: '',\n        loading: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'primary',\n        hoverEffect: 'slide',\n        class:\n          'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n      },\n      {\n        variant: 'secondary',\n        hoverEffect: 'slide',\n        class:\n          'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1]  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n      },\n      {\n        variant: 'primary',\n        state: 'loading',\n        class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n      },\n      {\n        variant: 'secondary',\n        state: 'loading',\n        class:\n          'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n      },\n      {\n        variant: 'primary',\n        state: 'disabled',\n        class:\n          'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n      },\n      {\n        variant: 'secondary',\n        state: 'disabled',\n        class:\n          'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n      },\n      {\n        variant: 'link',\n        state: 'disabled',\n        class: 'disabled:text-info-quaternary',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'base',\n      hoverEffect: 'none',\n      state: 'default',\n    },\n  }\n)\n\nconst loadingSvgVariants = cva('', {\n  variants: {\n    variant: {\n      primary: 'stroke-btn-primary-foreground',\n      secondary: 'stroke-btn-secondary-foreground',\n      link: 'stroke-primary',\n      ghost: 'stroke-primary',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n})\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001  */\n  loading?: boolean\n  /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001  */\n  disabled?: boolean\n  /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n  asChild?: boolean\n  /** \u81EA\u5B9A\u4E49loading  */\n  spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      asChild = false,\n      size = 'base',\n      children,\n      variant,\n      hoverEffect = 'none',\n      className,\n      disabled = false,\n      loading = false,\n      spinner,\n      ...props\n    }: ButtonProps,\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const isInactive = disabled || loading\n    const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n    return (\n      <Comp\n        disabled={isInactive}\n        className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n        ref={ref}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n              {children}\n            </span>\n            <span className=\"absolute\">\n              {spinner ? (\n                spinner\n              ) : (\n                <Spinner\n                  className={loadingSvgVariants({\n                    variant,\n                  })}\n                />\n              )}\n            </span>\n            <VisuallyHidden>{children}</VisuallyHidden>\n          </>\n        ) : (\n          <>\n            {children}\n            {variant === 'link' && size && size !== 'icon' && <LinkButtonAppendIcon size={size} />}\n          </>\n        )}\n      </Comp>\n    )\n  }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BM,IAAAI,EAAA,6BAzBNC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAEnB,MAAMC,EAAU,CACd,GAAI,CACF,MAAO,KACP,OAAQ,IACV,EACA,KAAM,CACJ,MAAO,KACP,OAAQ,IACV,EACA,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACMC,EAAuB,CAAC,CAAE,KAAAC,EAAO,MAAO,IAAsC,CAClF,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIJ,EAAQE,CAAI,EACtC,SACE,OAAC,OAAI,MAAOC,EAAO,OAAQC,EAAQ,QAAQ,YAAY,KAAK,OAAO,MAAM,6BACvE,mBAAC,QACC,EAAE,wBACF,OAAO,eACP,YAAY,UACZ,cAAc,QACd,eAAe,QACjB,EACF,CAEJ,EAMMC,KAAiB,OACrB,iLACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uJACF,UACE,2MACF,KAAM,8DACN,MAAO,0EACT,EACA,KAAM,CACJ,GAAI,uCACJ,KAAM,qDACN,GAAI,sDACJ,KAAM,qCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mEACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0IACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MACE,qHACJ,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,kIACJ,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,iBACN,MAAO,gBACT,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CAAC,EAeKC,EAASb,EAAM,WACnB,CACE,CACE,QAAAc,EAAU,GACV,KAAAN,EAAO,OACP,SAAAO,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,QAAAC,EACA,GAAGC,CACL,EACAC,OAOE,OALWT,EAAU,OAAO,SAK3B,CACC,SALeK,GAAYC,EAM3B,aAAW,MAAGT,EAAe,CAAE,QAAAK,EAAS,KAAAR,EAAM,YAAAS,EAAa,MALjDG,EAAU,UAAYD,EAAW,WAAa,SAKS,CAAC,EAAGD,CAAS,EAC9E,IAAKK,EACJ,GAAGD,EAEH,SAAAF,KACC,oBACE,oBAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAL,EACH,KACA,OAAC,QAAK,UAAU,WACb,SAAAM,MAGC,OAAC,EAAAG,QAAA,CACC,UAAWZ,EAAmB,CAC5B,QAAAI,CACF,CAAC,EACH,EAEJ,KACA,OAAC,kBAAgB,SAAAD,EAAS,GAC5B,KAEA,oBACG,UAAAA,EACAC,IAAY,QAAUR,GAAQA,IAAS,WAAU,OAACD,EAAA,CAAqB,KAAMC,EAAM,GACtF,EAEJ,CAGN,EAEAK,EAAO,YAAc,SACrB,IAAOhB,EAAQgB",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\nconst sizeMap = {\n  sm: {\n    width: '16',\n    height: '16',\n  },\n  base: {\n    width: '18',\n    height: '18',\n  },\n  lg: {\n    width: '20',\n    height: '20',\n  },\n}\nconst LinkButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M7.5 5L12.5 10L7.5 15\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.66667\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n  'rounded-btn inline-flex items-center justify-center text-sm font-bold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active hover:text-btn-primary-active-foreground hover:bg-gradient-brand border-none ',\n        secondary:\n          'bg-btn-secondary outline-btn-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary-active-foreground border-solid outline outline-[1.6px] outline-offset-[-1.6px]',\n        link: 'text-info-primary hover:text-btn-primary-active border-none',\n        ghost: 'text-info-primary hover:bg-btn-primary hover:text-btn-primary-foreground',\n      },\n      size: {\n        sm: 'px-3 py-2 text-[12px] leading-tight',\n        base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n        lg: 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n        icon: 'size-10 rounded-full leading-tight',\n      },\n      /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n      hoverEffect: {\n        none: '',\n        slide: '',\n      },\n      state: {\n        default: '',\n        disabled: '',\n        loading: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'primary',\n        hoverEffect: 'slide',\n        class:\n          'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n      },\n      {\n        variant: 'secondary',\n        hoverEffect: 'slide',\n        class:\n          'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1]  before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n      },\n      {\n        variant: 'primary',\n        state: 'loading',\n        class: 'bg-btn-primary-active disabled:border-btn-primary-disabled-border',\n      },\n      {\n        variant: 'secondary',\n        state: 'loading',\n        class:\n          'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-primary-disabled',\n      },\n      {\n        variant: 'primary',\n        state: 'disabled',\n        class:\n          'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground disabled:border-btn-primary-disabled',\n      },\n      {\n        variant: 'secondary',\n        state: 'disabled',\n        class:\n          'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n      },\n      {\n        variant: 'link',\n        state: 'disabled',\n        class: 'disabled:text-info-quaternary',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'lg',\n      hoverEffect: 'none',\n      state: 'default',\n    },\n  }\n)\n\nconst loadingSvgVariants = cva('', {\n  variants: {\n    variant: {\n      primary: 'stroke-btn-primary-foreground',\n      secondary: 'stroke-btn-secondary-foreground',\n      link: 'stroke-primary',\n      ghost: 'stroke-primary',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n})\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001  */\n  loading?: boolean\n  /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001  */\n  disabled?: boolean\n  /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui (\u5DF2\u4F5C\u5E9F\u8BF7\u52FF\u4F7F\u7528) */\n  asChild?: boolean\n  /** \u81EA\u5B9A\u4E49loading  */\n  spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      asChild = false,\n      size = 'lg',\n      children,\n      variant,\n      hoverEffect = 'none',\n      className,\n      disabled = false,\n      loading = false,\n      spinner,\n      ...props\n    }: ButtonProps,\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'button'\n    const isInactive = disabled || loading\n    const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n    return (\n      <Comp\n        disabled={isInactive}\n        className={cn(buttonVariants({ variant, size, hoverEffect, state }), className)}\n        ref={ref}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n              {children}\n            </span>\n            <span className=\"absolute\">\n              {spinner ? (\n                spinner\n              ) : (\n                <Spinner\n                  className={loadingSvgVariants({\n                    variant,\n                  })}\n                />\n              )}\n            </span>\n            <VisuallyHidden>{children}</VisuallyHidden>\n          </>\n        ) : (\n          <>\n            {children}\n            {variant === 'link' && size && size !== 'icon' && <LinkButtonAppendIcon size={size} />}\n          </>\n        )}\n      </Comp>\n    )\n  }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2BM,IAAAI,EAAA,6BAzBNC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAEnB,MAAMC,EAAU,CACd,GAAI,CACF,MAAO,KACP,OAAQ,IACV,EACA,KAAM,CACJ,MAAO,KACP,OAAQ,IACV,EACA,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACMC,EAAuB,CAAC,CAAE,KAAAC,EAAO,MAAO,IAAsC,CAClF,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIJ,EAAQE,CAAI,EACtC,SACE,OAAC,OAAI,MAAOC,EAAO,OAAQC,EAAQ,QAAQ,YAAY,KAAK,OAAO,MAAM,6BACvE,mBAAC,QACC,EAAE,wBACF,OAAO,eACP,YAAY,UACZ,cAAc,QACd,eAAe,QACjB,EACF,CAEJ,EAMMC,KAAiB,OACrB,iLACA,CACE,SAAU,CACR,QAAS,CACP,QACE,uJACF,UACE,2MACF,KAAM,8DACN,MAAO,0EACT,EACA,KAAM,CACJ,GAAI,sCACJ,KAAM,qDACN,GAAI,sIACJ,KAAM,oCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,mEACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MACE,0IACJ,EACA,CACE,QAAS,UACT,MAAO,WACP,MACE,qHACJ,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,kIACJ,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,KACN,YAAa,OACb,MAAO,SACT,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,iBACN,MAAO,gBACT,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CAAC,EAeKC,EAASb,EAAM,WACnB,CACE,CACE,QAAAc,EAAU,GACV,KAAAN,EAAO,KACP,SAAAO,EACA,QAAAC,EACA,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,QAAAC,EACA,GAAGC,CACL,EACAC,OAOE,OALWT,EAAU,OAAO,SAK3B,CACC,SALeK,GAAYC,EAM3B,aAAW,MAAGT,EAAe,CAAE,QAAAK,EAAS,KAAAR,EAAM,YAAAS,EAAa,MALjDG,EAAU,UAAYD,EAAW,WAAa,SAKS,CAAC,EAAGD,CAAS,EAC9E,IAAKK,EACJ,GAAGD,EAEH,SAAAF,KACC,oBACE,oBAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAL,EACH,KACA,OAAC,QAAK,UAAU,WACb,SAAAM,MAGC,OAAC,EAAAG,QAAA,CACC,UAAWZ,EAAmB,CAC5B,QAAAI,CACF,CAAC,EACH,EAEJ,KACA,OAAC,kBAAgB,SAAAD,EAAS,GAC5B,KAEA,oBACG,UAAAA,EACAC,IAAY,QAAUR,GAAQA,IAAS,WAAU,OAACD,EAAA,CAAqB,KAAMC,EAAM,GACtF,EAEJ,CAGN,EAEAK,EAAO,YAAc,SACrB,IAAOhB,EAAQgB",
   "names": ["button_exports", "__export", "button_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "sizeMap", "LinkButtonAppendIcon", "size", "width", "height", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "children", "variant", "hoverEffect", "className", "disabled", "loading", "spinner", "props", "ref", "Spinner"]
 }

package/dist/cjs/components/container.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var u=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var P=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},x=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of S(o))!N.call(e,p)&&p!==t&&c(e,p,{get:()=>o[p],enumerable:!(a=g(o,p))||a.enumerable});return e};var v=(e,o,t)=>(t=e!=null?u(h(e)):{},x(o||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),w=e=>x(c({},"__esModule",{value:!0}),e);var M={};P(M,{Container:()=>l});module.exports=w(M);var n=require("react/jsx-runtime"),r=v(require("react")),m=require("../helpers/utils.js"),f=require("@radix-ui/react-slot");const T=({children:e})=>(0,n.jsx)(n.Fragment,{children:e}),B=r.default.forwardRef(({...e},o)=>{const{asChild:t,children:a,className:p,spaceY:s="none",spaceTop:i="none",spaceBottom:d="none",...C}=e,y=t?f.Slot:"div",R={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},b={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},k={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return(0,n.jsx)(y,{...C,ref:o,className:(0,m.cn)(p,"ipc_container","relative z-10 w-full"),children:(0,n.jsx)("div",{className:(0,m.cn)(p,"desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",R?.[s]||s,b?.[i]||i,k?.[d]||d),children:a})})}),l=r.default.forwardRef(({...e},o)=>{const{children:t,mode:a="section"}=e,s={section:B,fragment:T}[a];return(0,n.jsx)(s,{...e,ref:o,children:t})});l.displayName="Container";
+"use strict";var g=Object.create;var c=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var P=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},x=(e,o,t,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of S(o))!N.call(e,p)&&p!==t&&c(e,p,{get:()=>o[p],enumerable:!(a=k(o,p))||a.enumerable});return e};var v=(e,o,t)=>(t=e!=null?g(h(e)):{},x(o||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),T=e=>x(c({},"__esModule",{value:!0}),e);var M={};P(M,{Container:()=>l});module.exports=T(M);var n=require("react/jsx-runtime"),r=v(require("react")),m=require("../helpers/utils.js"),f=require("@radix-ui/react-slot");const w=({children:e})=>(0,n.jsx)(n.Fragment,{children:e}),B=r.default.forwardRef(({...e},o)=>{const{asChild:t,children:a,className:p,spaceY:s="none",spaceTop:i="none",spaceBottom:d="none",...C}=e,y=t?f.Slot:"div",R={default:"tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]",none:""},b={default:"tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",none:""},u={default:"tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]",none:""};return(0,n.jsx)(y,{...C,ref:o,className:(0,m.cn)(p,"ipc_container","relative z-10 w-full"),children:(0,n.jsx)("div",{className:(0,m.cn)(p,"lg-desktop:max-w-full mx-auto w-full","tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",R?.[s]||s,b?.[i]||i,u?.[d]||d),children:a})})}),l=r.default.forwardRef(({...e},o)=>{const{children:t,mode:a="section"}=e,s={section:B,fragment:w}[a];return(0,n.jsx)(s,{...e,ref:o,children:t})});l.displayName="Container";
 //# sourceMappingURL=container.js.map

package/dist/cjs/components/container.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/container.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n  asChild?: boolean\n  children?: React.ReactNode\n  className?: string\n  spaceY?: SpaceY\n  spaceTop?: SpaceTop\n  spaceBottom?: SpaceBottom\n  mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    spaceY = 'none',\n    spaceTop = 'none',\n    spaceBottom = 'none',\n    ...containerProps\n  } = props\n\n  const Comp = asChild ? Slot : 'div'\n\n  const spaceY_map: any = {\n    default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n    none: '',\n  }\n\n  const spaceTop_map: any = {\n    default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n    none: '',\n  }\n\n  const spaceBottom_map: any = {\n    default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n    none: '',\n  }\n\n  return (\n    <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n      <div\n        className={cn(\n          className,\n          'desktop:max-w-[1792px] lg-desktop:max-w-full mx-auto w-full',\n          'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n          spaceY_map?.[spaceY] || spaceY,\n          spaceTop_map?.[spaceTop] || spaceTop,\n          spaceBottom_map?.[spaceBottom] || spaceBottom\n        )}\n      >\n        {children}\n      </div>\n    </Comp>\n  )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const { children, mode = 'section' } = props\n\n  const componentsMap: {\n    [P in Mode]: React.ComponentType<any> | string\n  } = {\n    section: Section,\n    fragment: Fragment,\n  }\n\n  const Component = componentsMap![mode!]\n\n  return (\n    <Component {...props} ref={forwardedRef}>\n      {children}\n    </Component>\n  )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAiBS,IAAAI,EAAA,6BAjBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAcrB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAU,OAAO,MAExBO,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,CAAM,GAAGD,EAAgB,IAAKN,EAAc,aAAW,MAAGE,EAAW,gBAAiB,sBAAsB,EAC3G,mBAAC,OACC,aAAW,MACTA,EACA,8DACA,8EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAT,EACH,EACF,CAEJ,CAAC,EAEKP,EAAY,EAAAS,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAJ,EAAU,KAAAe,EAAO,SAAU,EAAIZ,EASjCa,EALF,CACF,QAASf,EACT,SAAUF,CACZ,EAEiCgB,CAAK,EAEtC,SACE,OAACC,EAAA,CAAW,GAAGb,EAAO,IAAKC,EACxB,SAAAJ,EACH,CAEJ,CAAC,EAEDP,EAAU,YAAc",
+  "sourcesContent": ["import React from 'react'\nimport { cn } from '../helpers/utils.js'\nimport { Slot } from '@radix-ui/react-slot'\nimport type { Mode, SpaceY, SpaceTop, SpaceBottom } from '../types/props.js'\n\ntype ContainerElement = React.ElementRef<'div'>\ntype ContainerProps = {\n  asChild?: boolean\n  children?: React.ReactNode\n  className?: string\n  spaceY?: SpaceY\n  spaceTop?: SpaceTop\n  spaceBottom?: SpaceBottom\n  mode?: Mode\n} & React.ComponentPropsWithoutRef<'div'>\n\nconst Fragment = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\nconst Section = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const {\n    asChild,\n    children,\n    className,\n    spaceY = 'none',\n    spaceTop = 'none',\n    spaceBottom = 'none',\n    ...containerProps\n  } = props\n\n  const Comp = asChild ? Slot : 'div'\n\n  const spaceY_map: any = {\n    default: 'tablet:my-[80px] laptop:my-[96px] desktop:my-[112px] lg-desktop:my-[128px] my-[64px]',\n    none: '',\n  }\n\n  const spaceTop_map: any = {\n    default: 'tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]',\n    none: '',\n  }\n\n  const spaceBottom_map: any = {\n    default: 'tablet:pb-[80px] laptop:pb-[96px] desktop:pb-[112px] lg-desktop:pb-[128px] pb-[64px]',\n    none: '',\n  }\n\n  return (\n    <Comp {...containerProps} ref={forwardedRef} className={cn(className, 'ipc_container', 'relative z-10 w-full')}>\n      <div\n        className={cn(\n          className,\n          'lg-desktop:max-w-full mx-auto w-full',\n          'tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4',\n          spaceY_map?.[spaceY] || spaceY,\n          spaceTop_map?.[spaceTop] || spaceTop,\n          spaceBottom_map?.[spaceBottom] || spaceBottom\n        )}\n      >\n        {children}\n      </div>\n    </Comp>\n  )\n})\n\nconst Container = React.forwardRef<ContainerElement, ContainerProps>(({ ...props }, forwardedRef) => {\n  const { children, mode = 'section' } = props\n\n  const componentsMap: {\n    [P in Mode]: React.ComponentType<any> | string\n  } = {\n    section: Section,\n    fragment: Fragment,\n  }\n\n  const Component = componentsMap![mode!]\n\n  return (\n    <Component {...props} ref={forwardedRef}>\n      {children}\n    </Component>\n  )\n})\n\nContainer.displayName = 'Container'\n\nexport { Container }\nexport type { ContainerProps }\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GAiBS,IAAAI,EAAA,6BAjBTC,EAAkB,oBAClBC,EAAmB,+BACnBC,EAAqB,gCAcrB,MAAMC,EAAW,CAAC,CAAE,SAAAC,CAAS,OACpB,mBAAG,SAAAA,EAAS,EAGfC,EAAU,EAAAC,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACjG,KAAM,CACJ,QAAAC,EACA,SAAAL,EACA,UAAAM,EACA,OAAAC,EAAS,OACT,SAAAC,EAAW,OACX,YAAAC,EAAc,OACd,GAAGC,CACL,EAAIP,EAEEQ,EAAON,EAAU,OAAO,MAExBO,EAAkB,CACtB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAoB,CACxB,QAAS,uFACT,KAAM,EACR,EAEMC,EAAuB,CAC3B,QAAS,uFACT,KAAM,EACR,EAEA,SACE,OAACH,EAAA,CAAM,GAAGD,EAAgB,IAAKN,EAAc,aAAW,MAAGE,EAAW,gBAAiB,sBAAsB,EAC3G,mBAAC,OACC,aAAW,MACTA,EACA,uCACA,8EACAM,IAAaL,CAAM,GAAKA,EACxBM,IAAeL,CAAQ,GAAKA,EAC5BM,IAAkBL,CAAW,GAAKA,CACpC,EAEC,SAAAT,EACH,EACF,CAEJ,CAAC,EAEKP,EAAY,EAAAS,QAAM,WAA6C,CAAC,CAAE,GAAGC,CAAM,EAAGC,IAAiB,CACnG,KAAM,CAAE,SAAAJ,EAAU,KAAAe,EAAO,SAAU,EAAIZ,EASjCa,EALF,CACF,QAASf,EACT,SAAUF,CACZ,EAEiCgB,CAAK,EAEtC,SACE,OAACC,EAAA,CAAW,GAAGb,EAAO,IAAKC,EACxB,SAAAJ,EACH,CAEJ,CAAC,EAEDP,EAAU,YAAc",
   "names": ["container_exports", "__export", "Container", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_react_slot", "Fragment", "children", "Section", "React", "props", "forwardedRef", "asChild", "className", "spaceY", "spaceTop", "spaceBottom", "containerProps", "Comp", "spaceY_map", "spaceTop_map", "spaceBottom_map", "mode", "Component"]
 }

package/dist/cjs/stories/accordionCards.stories.d.ts CHANGED Viewed

@@ -11,6 +11,9 @@ declare const meta: {
                 img: {
                     url: string;
                 };
+                mobileImg?: {
+                    url: string;
+                };
                 subTitle: string;
                 link?: string;
             }>;