@bikdotai/bik-component-library 0.0.814 → 0.0.815

package/dist/cjs/components/bik-layout/ShowShopifyRestrictedModal.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react-dom"),g=require("../../constants/Theme.js"),b=require("../../assets/icons/cross.svg.js"),o=require("../TypographyStyle.js"),r=require("./CommonStyles.js"),s=require("../button/Button.js"),x=a=>{const{zIndex:c,containerType:l,handleButtonClick:d,triggerPosition:t,connectShopifyDescription:u,demoDescription:h}=a,n=y=>{d(y)},i=t&&window.innerHeight-t.top<100,m=t?{position:"fixed",top:i?"auto":t.top,bottom:i?"0":"auto",left:t.left,width:"unset",background:"none"}:{alignItems:"center",height:950,background:"linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 129.71%)"};return p.createPortal(e.jsx(r.FeatureModalContainer,{zIndex:c,resetHeight:!0,style:m,relativePostion:!!t,children:e.jsxs(r.RelativeModalContainer,{children:[e.jsx("div",{className:"cross-container",onClick:()=>n("close"),"aria-hidden":"true",children:e.jsx(b.default,{height:24,width:24,color:"#000000"})}),l=="demo_store"?e.jsxs("div",{className:"demo-container",children:[e.jsx(o.TitleMedium,{color:g.COLORS.background.negative.vibrant,children:"Demo Store Limitations"}),e.jsx(o.BodyPrimary,{children:h??"Apologies, but you are unable to save or take any actions as you are currently in the demo store."})]}):e.jsxs("div",{className:"content-layout",children:[e.jsx("div",{className:"left-content",children:e.jsx("img",{src:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F6300e18e-16ef-4f65-9861-26476d2a3d9a?alt=media&token=0da9e429-4c12-4a06-bba8-9ac7c3fdd2c4",alt:"left-panel"})}),e.jsxs("div",{className:"right-content",children:[e.jsx(o.TitleMedium,{children:"Connect Shopify "}),e.jsx(o.BodyPrimary,{style:{maxWidth:432},children:u??"Connect Shopify to publish your bot on your Shopify store. Or, explore our demo store to see it in action."}),e.jsxs("div",{className:"cta-button-container",children:[e.jsx(s.Button,{buttonText:"Connect shopify",buttonType:"primary",size:"small",onClick:()=>n("shopify")}),e.jsx(s.Button,{buttonText:"View demo store",buttonType:"secondary",size:"small",onClick:()=>n("demo")})]})]})]})]})}),document.body)};exports.ShowShopifyRestrictedModal=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react-dom"),f=require("../../constants/Theme.js"),g=require("../../assets/icons/cross.svg.js"),n=require("../TypographyStyle.js"),s=require("./CommonStyles.js"),a=require("../button/Button.js"),b=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},x=b(p),j=t=>{const{zIndex:c,containerType:l,handleButtonClick:d,triggerPosition:o,connectShopifyDescription:u,demoDescription:h}=t,i=y=>{d(y)},r=o&&window.innerHeight-o.top<100,m=o?{position:"fixed",top:r?"auto":o.top,bottom:r?"0":"auto",left:o.left,width:"unset",background:"none"}:{alignItems:"center",height:950,background:"linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 129.71%)"};return x.default.createPortal(e.jsx(s.FeatureModalContainer,{zIndex:c,resetHeight:!0,style:m,relativePostion:!!o,children:e.jsxs(s.RelativeModalContainer,{children:[e.jsx("div",{className:"cross-container",onClick:()=>i("close"),"aria-hidden":"true",children:e.jsx(g.default,{height:24,width:24,color:"#000000"})}),l=="demo_store"?e.jsxs("div",{className:"demo-container",children:[e.jsx(n.TitleMedium,{color:f.COLORS.background.negative.vibrant,children:"Demo Store Limitations"}),e.jsx(n.BodyPrimary,{children:h??"Apologies, but you are unable to save or take any actions as you are currently in the demo store."})]}):e.jsxs("div",{className:"content-layout",children:[e.jsx("div",{className:"left-content",children:e.jsx("img",{src:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F6300e18e-16ef-4f65-9861-26476d2a3d9a?alt=media&token=0da9e429-4c12-4a06-bba8-9ac7c3fdd2c4",alt:"left-panel"})}),e.jsxs("div",{className:"right-content",children:[e.jsx(n.TitleMedium,{children:"Connect Shopify "}),e.jsx(n.BodyPrimary,{style:{maxWidth:432},children:u??"Connect Shopify to publish your bot on your Shopify store. Or, explore our demo store to see it in action."}),e.jsxs("div",{className:"cta-button-container",children:[e.jsx(a.Button,{buttonText:"Connect shopify",buttonType:"primary",size:"small",onClick:()=>i("shopify")}),e.jsx(a.Button,{buttonText:"View demo store",buttonType:"secondary",size:"small",onClick:()=>i("demo")})]})]})]})]})}),document.body)};exports.ShowShopifyRestrictedModal=j;
 //# sourceMappingURL=ShowShopifyRestrictedModal.js.map

package/dist/cjs/components/bik-layout/ShowShopifyRestrictedModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShowShopifyRestrictedModal.js","sources":["../../../../src/components/bik-layout/ShowShopifyRestrictedModal.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { BodyPrimary, TitleMedium } from '../TypographyStyle';\nimport { FeatureModalContainer, RelativeModalContainer } from './CommonStyles';\n\nexport interface ShowShopifyRestrictedModalProps {\n\tcontainerType: 'demo_store' | 'connect_shopify';\n\thandleButtonClick: (type: 'shopify' | 'demo' | 'close') => void;\n\tconnectShopifyDescription?: string;\n\tdemoDescription?: string;\n\tzIndex?: number;\n\ttriggerPosition?: { top: number; left: number };\n}\nexport const ShowShopifyRestrictedModal: React.FC<\n\tShowShopifyRestrictedModalProps\n> = (relativeModalProps) => {\n\tconst {\n\t\tzIndex,\n\t\tcontainerType,\n\t\thandleButtonClick,\n\t\ttriggerPosition,\n\t\tconnectShopifyDescription,\n\t\tdemoDescription,\n\t} = relativeModalProps;\n\n\tconst handleInternalButtonClick = (type: 'shopify' | 'demo' | 'close') => {\n\t\thandleButtonClick(type);\n\t};\n\tconst notEnoughSpaceAtBottom =\n\t\ttriggerPosition && window.innerHeight - triggerPosition.top < 100;\n\n\tconst modalStyle: React.CSSProperties = triggerPosition\n\t\t? {\n\t\t\t\tposition: 'fixed',\n\t\t\t\ttop: notEnoughSpaceAtBottom ? 'auto' : triggerPosition.top,\n\t\t\t\tbottom: notEnoughSpaceAtBottom ? '0' : 'auto',\n\t\t\t\tleft: triggerPosition.left,\n\t\t\t\twidth: 'unset',\n\t\t\t\tbackground: 'none',\n\t\t  }\n\t\t: {\n\t\t\t\talignItems: 'center',\n\t\t\t\theight: 950,\n\t\t\t\tbackground:\n\t\t\t\t\t'linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 129.71%)',\n\t\t  };\n\n\treturn ReactDOM.createPortal(\n\t\t<FeatureModalContainer\n\t\t\tzIndex={zIndex}\n\t\t\tresetHeight\n\t\t\tstyle={modalStyle}\n\t\t\trelativePostion={triggerPosition ? true : false}\n\t\t>\n\t\t\t<RelativeModalContainer>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"cross-container\"\n\t\t\t\t\tonClick={() => handleInternalButtonClick('close')}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<CrossIcon height={24} width={24} color={'#000000'} />\n\t\t\t\t</div>\n\t\t\t\t{containerType == 'demo_store' ? (\n\t\t\t\t\t<div className=\"demo-container\">\n\t\t\t\t\t\t<TitleMedium color={COLORS.background.negative.vibrant}>\n\t\t\t\t\t\t\tDemo Store Limitations\n\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t<BodyPrimary>\n\t\t\t\t\t\t\t{demoDescription ??\n\t\t\t\t\t\t\t\t'Apologies, but you are unable to save or take any actions as you are currently in the demo store.'}\n\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"content-layout\">\n\t\t\t\t\t\t<div className=\"left-content\">\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F6300e18e-16ef-4f65-9861-26476d2a3d9a?alt=media&token=0da9e429-4c12-4a06-bba8-9ac7c3fdd2c4\"\n\t\t\t\t\t\t\t\talt=\"left-panel\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"right-content\">\n\t\t\t\t\t\t\t<TitleMedium>Connect Shopify </TitleMedium>\n\t\t\t\t\t\t\t<BodyPrimary style={{ maxWidth: 432 }}>\n\t\t\t\t\t\t\t\t{connectShopifyDescription ??\n\t\t\t\t\t\t\t\t\t'Connect Shopify to publish your bot on your Shopify store. Or, explore our demo store to see it in action.'}\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t<div className=\"cta-button-container\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText=\"Connect shopify\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={() => handleInternalButtonClick('shopify')}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText=\"View demo store\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={() => handleInternalButtonClick('demo')}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</RelativeModalContainer>\n\t\t</FeatureModalContainer>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ShowShopifyRestrictedModal","relativeModalProps","zIndex","containerType","handleButtonClick","triggerPosition","connectShopifyDescription","demoDescription","handleInternalButtonClick","type","notEnoughSpaceAtBottom","modalStyle","ReactDOM","jsx","FeatureModalContainer","RelativeModalContainer","CrossIcon","jsxs","TitleMedium","COLORS","BodyPrimary","Button"],"mappings":"kUAeaA,EAERC,GAAuB,CAC3B,KAAM,CACL,OAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,0BAAAC,EACA,gBAAAC,CAAA,EACGN,EAEEO,EAA6BC,GAAuC,CACzEL,EAAkBK,CAAI,CACvB,EACMC,EACLL,GAAmB,OAAO,YAAcA,EAAgB,IAAM,IAEzDM,EAAkCN,EACrC,CACA,SAAU,QACV,IAAKK,EAAyB,OAASL,EAAgB,IACvD,OAAQK,EAAyB,IAAM,OACvC,KAAML,EAAgB,KACtB,MAAO,QACP,WAAY,MAAA,EAEZ,CACA,WAAY,SACZ,OAAQ,IACR,WACC,mEAAA,EAGJ,OAAOO,EAAS,aACfC,EAAAA,IAACC,EAAAA,sBAAA,CACA,OAAAZ,EACA,YAAW,GACX,MAAOS,EACP,gBAAiB,EAAAN,EAEjB,gBAACU,yBAAA,CACA,SAAA,CAAAF,EAAAA,IAAC,MAAA,CACA,UAAU,kBACV,QAAS,IAAML,EAA0B,OAAO,EAChD,cAAY,OAEZ,eAACQ,EAAAA,QAAA,CAAU,OAAQ,GAAI,MAAO,GAAI,MAAO,SAAA,CAAW,CAAA,CAAA,EAEpDb,GAAiB,aACjBc,OAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAJ,MAACK,EAAAA,aAAY,MAAOC,EAAAA,OAAO,WAAW,SAAS,QAAS,SAAA,yBAExD,EACAN,EAAAA,IAACO,EAAAA,YAAA,CACC,SAAAb,GACA,mGAAA,CACF,CAAA,CAAA,CACD,EAEAU,EAAAA,KAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAJ,EAAAA,IAAC,MAAA,CAAI,UAAU,eACd,SAAAA,EAAAA,IAAC,MAAA,CACA,IAAI,+KACJ,IAAI,YAAA,CAAA,EAEN,EACAI,EAAAA,KAAC,MAAA,CAAI,UAAU,gBACd,SAAA,CAAAJ,EAAAA,IAACK,EAAAA,aAAY,SAAA,kBAAA,CAAgB,EAC7BL,MAACO,EAAAA,aAAY,MAAO,CAAE,SAAU,GAAA,EAC9B,YACA,6GACF,EACAH,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACd,SAAA,CAAAJ,EAAAA,IAACQ,EAAAA,OAAA,CACA,WAAW,kBACX,WAAW,UACX,KAAK,QACL,QAAS,IAAMb,EAA0B,SAAS,CAAA,CAAA,EAEnDK,EAAAA,IAACQ,EAAAA,OAAA,CACA,WAAW,kBACX,WAAW,YACX,KAAK,QACL,QAAS,IAAMb,EAA0B,MAAM,CAAA,CAAA,CAChD,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CAEF,CAAA,CAAA,EAED,SAAS,IAAA,CAEX"}
+{"version":3,"file":"ShowShopifyRestrictedModal.js","sources":["../../../../src/components/bik-layout/ShowShopifyRestrictedModal.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { BodyPrimary, TitleMedium } from '../TypographyStyle';\nimport { FeatureModalContainer, RelativeModalContainer } from './CommonStyles';\n\nexport interface ShowShopifyRestrictedModalProps {\n\tcontainerType: 'demo_store' | 'connect_shopify';\n\thandleButtonClick: (type: 'shopify' | 'demo' | 'close') => void;\n\tconnectShopifyDescription?: string;\n\tdemoDescription?: string;\n\tzIndex?: number;\n\ttriggerPosition?: { top: number; left: number };\n}\nexport const ShowShopifyRestrictedModal: React.FC<\n\tShowShopifyRestrictedModalProps\n> = (relativeModalProps) => {\n\tconst {\n\t\tzIndex,\n\t\tcontainerType,\n\t\thandleButtonClick,\n\t\ttriggerPosition,\n\t\tconnectShopifyDescription,\n\t\tdemoDescription,\n\t} = relativeModalProps;\n\n\tconst handleInternalButtonClick = (type: 'shopify' | 'demo' | 'close') => {\n\t\thandleButtonClick(type);\n\t};\n\tconst notEnoughSpaceAtBottom =\n\t\ttriggerPosition && window.innerHeight - triggerPosition.top < 100;\n\n\tconst modalStyle: React.CSSProperties = triggerPosition\n\t\t? {\n\t\t\t\tposition: 'fixed',\n\t\t\t\ttop: notEnoughSpaceAtBottom ? 'auto' : triggerPosition.top,\n\t\t\t\tbottom: notEnoughSpaceAtBottom ? '0' : 'auto',\n\t\t\t\tleft: triggerPosition.left,\n\t\t\t\twidth: 'unset',\n\t\t\t\tbackground: 'none',\n\t\t  }\n\t\t: {\n\t\t\t\talignItems: 'center',\n\t\t\t\theight: 950,\n\t\t\t\tbackground:\n\t\t\t\t\t'linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 129.71%)',\n\t\t  };\n\n\treturn ReactDOM.createPortal(\n\t\t<FeatureModalContainer\n\t\t\tzIndex={zIndex}\n\t\t\tresetHeight\n\t\t\tstyle={modalStyle}\n\t\t\trelativePostion={triggerPosition ? true : false}\n\t\t>\n\t\t\t<RelativeModalContainer>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"cross-container\"\n\t\t\t\t\tonClick={() => handleInternalButtonClick('close')}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<CrossIcon height={24} width={24} color={'#000000'} />\n\t\t\t\t</div>\n\t\t\t\t{containerType == 'demo_store' ? (\n\t\t\t\t\t<div className=\"demo-container\">\n\t\t\t\t\t\t<TitleMedium color={COLORS.background.negative.vibrant}>\n\t\t\t\t\t\t\tDemo Store Limitations\n\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t<BodyPrimary>\n\t\t\t\t\t\t\t{demoDescription ??\n\t\t\t\t\t\t\t\t'Apologies, but you are unable to save or take any actions as you are currently in the demo store.'}\n\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"content-layout\">\n\t\t\t\t\t\t<div className=\"left-content\">\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc=\"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F6300e18e-16ef-4f65-9861-26476d2a3d9a?alt=media&token=0da9e429-4c12-4a06-bba8-9ac7c3fdd2c4\"\n\t\t\t\t\t\t\t\talt=\"left-panel\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"right-content\">\n\t\t\t\t\t\t\t<TitleMedium>Connect Shopify </TitleMedium>\n\t\t\t\t\t\t\t<BodyPrimary style={{ maxWidth: 432 }}>\n\t\t\t\t\t\t\t\t{connectShopifyDescription ??\n\t\t\t\t\t\t\t\t\t'Connect Shopify to publish your bot on your Shopify store. Or, explore our demo store to see it in action.'}\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t<div className=\"cta-button-container\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText=\"Connect shopify\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={() => handleInternalButtonClick('shopify')}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText=\"View demo store\"\n\t\t\t\t\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={() => handleInternalButtonClick('demo')}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</RelativeModalContainer>\n\t\t</FeatureModalContainer>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ShowShopifyRestrictedModal","relativeModalProps","zIndex","containerType","handleButtonClick","triggerPosition","connectShopifyDescription","demoDescription","handleInternalButtonClick","type","notEnoughSpaceAtBottom","modalStyle","ReactDOM","jsx","FeatureModalContainer","RelativeModalContainer","CrossIcon","jsxs","TitleMedium","COLORS","BodyPrimary","Button"],"mappings":"iYAeaA,EAERC,GAAuB,CAC3B,KAAM,CACL,OAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,0BAAAC,EACA,gBAAAC,CAAA,EACGN,EAEEO,EAA6BC,GAAuC,CACzEL,EAAkBK,CAAI,CACvB,EACMC,EACLL,GAAmB,OAAO,YAAcA,EAAgB,IAAM,IAEzDM,EAAkCN,EACrC,CACA,SAAU,QACV,IAAKK,EAAyB,OAASL,EAAgB,IACvD,OAAQK,EAAyB,IAAM,OACvC,KAAML,EAAgB,KACtB,MAAO,QACP,WAAY,MAAA,EAEZ,CACA,WAAY,SACZ,OAAQ,IACR,WACC,mEAAA,EAGJ,OAAOO,EAAAA,QAAS,aACfC,EAAAA,IAACC,EAAAA,sBAAA,CACA,OAAAZ,EACA,YAAW,GACX,MAAOS,EACP,gBAAiB,EAAAN,EAEjB,gBAACU,yBAAA,CACA,SAAA,CAAAF,EAAAA,IAAC,MAAA,CACA,UAAU,kBACV,QAAS,IAAML,EAA0B,OAAO,EAChD,cAAY,OAEZ,eAACQ,EAAAA,QAAA,CAAU,OAAQ,GAAI,MAAO,GAAI,MAAO,SAAA,CAAW,CAAA,CAAA,EAEpDb,GAAiB,aACjBc,OAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAJ,MAACK,EAAAA,aAAY,MAAOC,EAAAA,OAAO,WAAW,SAAS,QAAS,SAAA,yBAExD,EACAN,EAAAA,IAACO,EAAAA,YAAA,CACC,SAAAb,GACA,mGAAA,CACF,CAAA,CAAA,CACD,EAEAU,EAAAA,KAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAJ,EAAAA,IAAC,MAAA,CAAI,UAAU,eACd,SAAAA,EAAAA,IAAC,MAAA,CACA,IAAI,+KACJ,IAAI,YAAA,CAAA,EAEN,EACAI,EAAAA,KAAC,MAAA,CAAI,UAAU,gBACd,SAAA,CAAAJ,EAAAA,IAACK,EAAAA,aAAY,SAAA,kBAAA,CAAgB,EAC7BL,MAACO,EAAAA,aAAY,MAAO,CAAE,SAAU,GAAA,EAC9B,YACA,6GACF,EACAH,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACd,SAAA,CAAAJ,EAAAA,IAACQ,EAAAA,OAAA,CACA,WAAW,kBACX,WAAW,UACX,KAAK,QACL,QAAS,IAAMb,EAA0B,SAAS,CAAA,CAAA,EAEnDK,EAAAA,IAACQ,EAAAA,OAAA,CACA,WAAW,kBACX,WAAW,YACX,KAAK,QACL,QAAS,IAAMb,EAA0B,MAAM,CAAA,CAAA,CAChD,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAAA,CAEF,CAAA,CAAA,EAED,SAAS,IAAA,CAEX"}

package/dist/cjs/components/bik-layout/SidebarStyles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),i=require("../../constants/Theme.js"),n=t.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),t=require("../../constants/Theme.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=o(n),r=i.default.div`
 	background-color: #28034e;
 	width: 88px;
 	justify-content: space-between;
@@ -50,9 +50,9 @@
 	.new-menu-item {
 		padding-top: 14px;
 	}
-`,o=t.div`
+`,a=i.default.div`
 	margin: 0px 0px 16px;
-`,r=t.div`
+`,d=i.default.div`
 	.main--sidebar {
 		overflow-y: auto;
 		padding: 0px 8px;
@@ -70,13 +70,13 @@
 	.new-tag {
 		position: absolute;
 		right: 5px;
-		background: ${i.COLORS.stroke.warning.vibrant} !important;
+		background: ${t.COLORS.stroke.warning.vibrant} !important;
 		font-size: 7.7px;
 		font-family: 'Inter';
 		line-height: 10px;
 		padding: 2px 9.27px 2px 9.27px;
 		border-radius: 16px 16px 0px 16px;
-		background: ${i.COLORS.background.inverse};
+		background: ${t.COLORS.background.inverse};
 	}
 
 	.tag-sticky {
@@ -116,18 +116,18 @@
 			font-size: 12px;
 			line-height: 16px;
 			user-select: none;
-			color: ${i.COLORS.content.secondaryInverse};
+			color: ${t.COLORS.content.secondaryInverse};
 			margin-bottom: 0px;
 			text-align: center;
 		}
 		.active-menu-item-text {
-			color: ${i.COLORS.background.warning.vibrant};
+			color: ${t.COLORS.background.warning.vibrant};
 		}
 	}
 	.main-menu-active-class {
 		border-radius: 10px;
 		background-color: #381062;
-		color: ${i.COLORS.background.warning.vibrant};
+		color: ${t.COLORS.background.warning.vibrant};
 	}
 	.sidebar-menu-item-hover {
 		background: #381062;
@@ -137,7 +137,7 @@
 		background: #381062;
 		border-radius: 8px;
 	}
-`,a=t.div`
+`,p=i.default.div`
 	.transform-class {
 		position: relative;
 		animation: animatebottom 0.5s;
@@ -160,7 +160,7 @@
 		left: ${e=>e.left?e.left:0}px; //88
 		width: ${e=>e.width?e.width:240}px;
 		z-index: ${e=>e.zIndex?e.zIndex:2};
-		background-color: ${e=>e.theme=="brand"?"#381062":i.COLORS.surface.standard};
+		background-color: ${e=>e.theme=="brand"?"#381062":t.COLORS.surface.standard};
 		height: ${e=>e.isNewSidebar?"fit-content":"100vh"};
 		display: flex;
 		flex-direction: column;
@@ -175,7 +175,7 @@
 		margin-bottom: ${e=>e.isNewSidebar?"":"8px"};
 		cursor: pointer;
 		.sub-child-text {
-			color: ${e=>e.theme=="brand"?i.COLORS.surface.standard:""};
+			color: ${e=>e.theme=="brand"?t.COLORS.surface.standard:""};
 			margin-bottom: 0px;
 			padding: 8px 12px;
 			white-space: nowrap;
@@ -196,27 +196,27 @@
 			border-radius: 0px 4px 4px 0px;
 			width: 2px;
 			height: 12px;
-			background: ${e=>e.isNewSidebar?i.COLORS.background.warning.vibrant:"white"};
+			background: ${e=>e.isNewSidebar?t.COLORS.background.warning.vibrant:"white"};
 		}
 		.active-bold-weight {
 			font-weight: 600;
-			color: ${e=>e.isNewSidebar?i.COLORS.background.warning.vibrant:""};
+			color: ${e=>e.isNewSidebar?t.COLORS.background.warning.vibrant:""};
 		}
 		.sub-child-active-menu-style {
-			color: ${e=>e.isNewSidebar?i.COLORS.background.warning.vibrant:""};
+			color: ${e=>e.isNewSidebar?t.COLORS.background.warning.vibrant:""};
 		}
 	}
 	.sub-child-menu:hover {
-		background: ${e=>e.theme=="brand"?i.COLORS.background.inverseLight:i.COLORS.background.base};
+		background: ${e=>e.theme=="brand"?t.COLORS.background.inverseLight:t.COLORS.background.base};
 		border-radius: 8px;
 	}
 	.sub-child-active-menu {
-		background: ${e=>e.theme=="brand"?i.COLORS.background.inverseLight:i.COLORS.background.base};
+		background: ${e=>e.theme=="brand"?t.COLORS.background.inverseLight:t.COLORS.background.base};
 		border-radius: 8px;
 	}
 	.sub-child-display-name {
 		padding: 14px 12px;
-		color: ${e=>e.theme=="brand"?i.COLORS.content.secondaryInverse:i.COLORS.text.secondary};
+		color: ${e=>e.theme=="brand"?t.COLORS.content.secondaryInverse:t.COLORS.text.secondary};
 	}
 	.lower-sticky-panel {
 		position: ${e=>e.isNewSidebar?"relative":"absolute"};
@@ -234,7 +234,7 @@
 	.sidebar-skeleton {
 		padding: 8px;
 	}
-`,d=t.div`
+`,s=i.default.div`
 	.sidebar-right-menu {
 		border-radius: 4px;
 		border: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);
@@ -244,7 +244,7 @@
 		bottom: 10px;
 		left: ${e=>e.left?e.left:0}px; //88
 		z-index: ${e=>e.zIndex?e.zIndex:2};
-		background-color: ${e=>e.theme=="brand"?"#381062":i.COLORS.surface.standard};
+		background-color: ${e=>e.theme=="brand"?"#381062":t.COLORS.surface.standard};
 		display: flex;
 		flex-direction: column;
 		padding: 12px;
@@ -263,9 +263,9 @@
 		cursor: pointer;
 		max-width: 320px;
 		:hover {
-			background-color: ${i.COLORS.background.base};
+			background-color: ${t.COLORS.background.base};
 			border-radius: 8px;
 		}
 	}
-`;exports.MainSideBarMenuWrapper=o;exports.SibeBarMenuItem=r;exports.SideBarContainer=n;exports.SidebarPopupContainer=d;exports.SimpleSidebarContainer=a;
+`;exports.MainSideBarMenuWrapper=a;exports.SibeBarMenuItem=d;exports.SideBarContainer=r;exports.SidebarPopupContainer=s;exports.SimpleSidebarContainer=p;
 //# sourceMappingURL=SidebarStyles.js.map

package/dist/cjs/components/bik-layout/SidebarStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarStyles.js","sources":["../../../../src/components/bik-layout/SidebarStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SidebarTheme } from './Sidebar.model';\n\nexport const SideBarContainer = styled.div`\n\tbackground-color: #28034e;\n\twidth: 88px;\n\tjustify-content: space-between;\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 10;\n\toverflow-y: auto;\n\theight: 100vh;\n\n\t.bik-header-logo {\n\t\tpadding: 8px 8px 0 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: container;\n\t\t}\n\t}\n\n\t.sticky-menu {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 0px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\t.sticky-menu-int {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 64px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.sticky-menu-three {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 128px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.new-menu-item {\n\t\tpadding-top: 14px;\n\t}\n`;\n\nexport const MainSideBarMenuWrapper = styled.div`\n\tmargin: 0px 0px 16px;\n`;\n\nexport const SibeBarMenuItem = styled.div`\n\t.main--sidebar {\n\t\toverflow-y: auto;\n\t\tpadding: 0px 8px;\n\t\tmargin-bottom: 6px;\n\t\t> * {\n\t\t\tgap: 8px;\n\t\t}\n\t}\n\t.locked--channel {\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\tmargin-top: -5px;\n\t}\n\n\t.new-tag {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t\tbackground: ${COLORS.stroke.warning.vibrant} !important;\n\t\tfont-size: 7.7px;\n\t\tfont-family: 'Inter';\n\t\tline-height: 10px;\n\t\tpadding: 2px 9.27px 2px 9.27px;\n\t\tborder-radius: 16px 16px 0px 16px;\n\t\tbackground: ${COLORS.background.inverse};\n\t}\n\n\t.tag-sticky {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 116px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\t.tag-sticky-2 {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 48px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t.sidebar-menu-item {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder-radius: 10px;\n\t\talign-items: center;\n\t\tjustify-content: space-around;\n\t\tcursor: pointer;\n\t\t> * {\n\t\t\tgap: 10px;\n\t\t}\n\t\tpadding: 8px;\n\t}\n\n\t.menu-item-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcursor: pointer;\n\t\t.menu-item-text {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 16px;\n\t\t\tuser-select: none;\n\t\t\tcolor: ${COLORS.content.secondaryInverse};\n\t\t\tmargin-bottom: 0px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.active-menu-item-text {\n\t\t\tcolor: ${COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.main-menu-active-class {\n\t\tborder-radius: 10px;\n\t\tbackground-color: #381062;\n\t\tcolor: ${COLORS.background.warning.vibrant};\n\t}\n\t.sidebar-menu-item-hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n\t.sidebar-menu-item:hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const SimpleSidebarContainer = styled.div<{\n\tpostion?: 'fixed' | 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\twidth?: number;\n\tzIndex?: number;\n\tleft?: number;\n\tisNewSidebar?: boolean;\n}>`\n\t.transform-class {\n\t\tposition: relative;\n\t\tanimation: animatebottom 0.5s;\n\t\ttransition-timing-function: ease-in;\n\t}\n\t@keyframes animatebottom {\n\t\tfrom {\n\t\t\twidth: 88px;\n\t\t\topacity: 0;\n\t\t}\n\n\t\tto {\n\t\t\twidth: 200px;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t.sidebar-right-menu {\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : 0)}px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\twidth: ${(props) => (props.width ? props.width : 240)}px;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\theight: ${(props) => (props.isNewSidebar ? 'fit-content' : '100vh')};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 8px;\n\t\tborder-radius: ${(props) => (props.isNewSidebar ? '12px' : '')};\n\t}\n\n\t.sub-child-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '' : '8px')};\n\t\tcursor: pointer;\n\t\t.sub-child-text {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.theme == 'brand' ? COLORS.surface.standard : ''};\n\t\t\tmargin-bottom: 0px;\n\t\t\tpadding: 8px 12px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.sub-child-new-tag {\n\t\t\tpadding: 2px 9px 2px 9px;\n\t\t\tborder-radius: 16px;\n\t\t\tbackground-color: rgba(254, 192, 45, 1);\n\t\t\tfont-family: Inter;\n\t\t\tfont-size: 7px;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 10px;\n\t\t\tcolor: rgba(40, 3, 78, 1);\n\t\t}\n\t\t.sub-child-active-text {\n\t\t\tborder-radius: 0px 4px 4px 0px;\n\t\t\twidth: 2px;\n\t\t\theight: 12px;\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : 'white'};\n\t\t}\n\t\t.active-bold-weight {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t\t.sub-child-active-menu-style {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t}\n\t.sub-child-menu:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-active-menu {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-display-name {\n\t\tpadding: 14px 12px;\n\t\tcolor: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.content.secondaryInverse\n\t\t\t\t: COLORS.text.secondary};\n\t}\n\t.lower-sticky-panel {\n\t\tposition: ${(props) => (props.isNewSidebar ? 'relative' : 'absolute')};\n\t\tbottom: ${(props) => (props.isNewSidebar ? '' : '16px')};\n\t\tmargin-top: ${(props) => (props.isNewSidebar ? 'auto' : '')};\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '16px' : '')};\n\t\t.title-text {\n\t\t\tpadding: 8px 12px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.upgrade-button {\n\t\t\tmargin: auto;\n\t\t}\n\t}\n\t.sidebar-skeleton {\n\t\tpadding: 8px;\n\t}\n`;\n\nexport const SidebarPopupContainer = styled.div<{\n\tpostion?: 'fixed' | 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\tzIndex?: number;\n\tleft?: number;\n\tbottom?: number;\n}>`\n\t.sidebar-right-menu {\n\t\tborder-radius: 4px;\n\t\tborder: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);\n\t\tbox-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : undefined)}px;\n\t\tbottom: 10px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 12px;\n\t\tgap: 4px;\n\t\tmin-height: 100px;\n\t\toverflow-y: auto;\n\t}\n\t.each-menu {\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t\talign-items: flex-start;\n\t\tborder-bottom: 0.5px solid #e0e0e0;\n\t\tcursor: pointer;\n\t\tmax-width: 320px;\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\tborder-radius: 8px;\n\t\t}\n\t}\n`;\n"],"names":["SideBarContainer","styled","MainSideBarMenuWrapper","SibeBarMenuItem","COLORS","SimpleSidebarContainer","props","SidebarPopupContainer"],"mappings":"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"}
+{"version":3,"file":"SidebarStyles.js","sources":["../../../../src/components/bik-layout/SidebarStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SidebarTheme } from './Sidebar.model';\n\nexport const SideBarContainer = styled.div`\n\tbackground-color: #28034e;\n\twidth: 88px;\n\tjustify-content: space-between;\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 10;\n\toverflow-y: auto;\n\theight: 100vh;\n\n\t.bik-header-logo {\n\t\tpadding: 8px 8px 0 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: container;\n\t\t}\n\t}\n\n\t.sticky-menu {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 0px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\t.sticky-menu-int {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 64px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.sticky-menu-three {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 128px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.new-menu-item {\n\t\tpadding-top: 14px;\n\t}\n`;\n\nexport const MainSideBarMenuWrapper = styled.div`\n\tmargin: 0px 0px 16px;\n`;\n\nexport const SibeBarMenuItem = styled.div`\n\t.main--sidebar {\n\t\toverflow-y: auto;\n\t\tpadding: 0px 8px;\n\t\tmargin-bottom: 6px;\n\t\t> * {\n\t\t\tgap: 8px;\n\t\t}\n\t}\n\t.locked--channel {\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\tmargin-top: -5px;\n\t}\n\n\t.new-tag {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t\tbackground: ${COLORS.stroke.warning.vibrant} !important;\n\t\tfont-size: 7.7px;\n\t\tfont-family: 'Inter';\n\t\tline-height: 10px;\n\t\tpadding: 2px 9.27px 2px 9.27px;\n\t\tborder-radius: 16px 16px 0px 16px;\n\t\tbackground: ${COLORS.background.inverse};\n\t}\n\n\t.tag-sticky {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 116px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\t.tag-sticky-2 {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 48px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t.sidebar-menu-item {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder-radius: 10px;\n\t\talign-items: center;\n\t\tjustify-content: space-around;\n\t\tcursor: pointer;\n\t\t> * {\n\t\t\tgap: 10px;\n\t\t}\n\t\tpadding: 8px;\n\t}\n\n\t.menu-item-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcursor: pointer;\n\t\t.menu-item-text {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 16px;\n\t\t\tuser-select: none;\n\t\t\tcolor: ${COLORS.content.secondaryInverse};\n\t\t\tmargin-bottom: 0px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.active-menu-item-text {\n\t\t\tcolor: ${COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.main-menu-active-class {\n\t\tborder-radius: 10px;\n\t\tbackground-color: #381062;\n\t\tcolor: ${COLORS.background.warning.vibrant};\n\t}\n\t.sidebar-menu-item-hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n\t.sidebar-menu-item:hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const SimpleSidebarContainer = styled.div<{\n\tpostion?: 'fixed' | 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\twidth?: number;\n\tzIndex?: number;\n\tleft?: number;\n\tisNewSidebar?: boolean;\n}>`\n\t.transform-class {\n\t\tposition: relative;\n\t\tanimation: animatebottom 0.5s;\n\t\ttransition-timing-function: ease-in;\n\t}\n\t@keyframes animatebottom {\n\t\tfrom {\n\t\t\twidth: 88px;\n\t\t\topacity: 0;\n\t\t}\n\n\t\tto {\n\t\t\twidth: 200px;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t.sidebar-right-menu {\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : 0)}px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\twidth: ${(props) => (props.width ? props.width : 240)}px;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\theight: ${(props) => (props.isNewSidebar ? 'fit-content' : '100vh')};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 8px;\n\t\tborder-radius: ${(props) => (props.isNewSidebar ? '12px' : '')};\n\t}\n\n\t.sub-child-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '' : '8px')};\n\t\tcursor: pointer;\n\t\t.sub-child-text {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.theme == 'brand' ? COLORS.surface.standard : ''};\n\t\t\tmargin-bottom: 0px;\n\t\t\tpadding: 8px 12px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.sub-child-new-tag {\n\t\t\tpadding: 2px 9px 2px 9px;\n\t\t\tborder-radius: 16px;\n\t\t\tbackground-color: rgba(254, 192, 45, 1);\n\t\t\tfont-family: Inter;\n\t\t\tfont-size: 7px;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 10px;\n\t\t\tcolor: rgba(40, 3, 78, 1);\n\t\t}\n\t\t.sub-child-active-text {\n\t\t\tborder-radius: 0px 4px 4px 0px;\n\t\t\twidth: 2px;\n\t\t\theight: 12px;\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : 'white'};\n\t\t}\n\t\t.active-bold-weight {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t\t.sub-child-active-menu-style {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t}\n\t.sub-child-menu:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-active-menu {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-display-name {\n\t\tpadding: 14px 12px;\n\t\tcolor: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.content.secondaryInverse\n\t\t\t\t: COLORS.text.secondary};\n\t}\n\t.lower-sticky-panel {\n\t\tposition: ${(props) => (props.isNewSidebar ? 'relative' : 'absolute')};\n\t\tbottom: ${(props) => (props.isNewSidebar ? '' : '16px')};\n\t\tmargin-top: ${(props) => (props.isNewSidebar ? 'auto' : '')};\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '16px' : '')};\n\t\t.title-text {\n\t\t\tpadding: 8px 12px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.upgrade-button {\n\t\t\tmargin: auto;\n\t\t}\n\t}\n\t.sidebar-skeleton {\n\t\tpadding: 8px;\n\t}\n`;\n\nexport const SidebarPopupContainer = styled.div<{\n\tpostion?: 'fixed' | 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\tzIndex?: number;\n\tleft?: number;\n\tbottom?: number;\n}>`\n\t.sidebar-right-menu {\n\t\tborder-radius: 4px;\n\t\tborder: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);\n\t\tbox-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : undefined)}px;\n\t\tbottom: 10px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 12px;\n\t\tgap: 4px;\n\t\tmin-height: 100px;\n\t\toverflow-y: auto;\n\t}\n\t.each-menu {\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t\talign-items: flex-start;\n\t\tborder-bottom: 0.5px solid #e0e0e0;\n\t\tcursor: pointer;\n\t\tmax-width: 320px;\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\tborder-radius: 8px;\n\t\t}\n\t}\n`;\n"],"names":["SideBarContainer","styled","MainSideBarMenuWrapper","SibeBarMenuItem","COLORS","SimpleSidebarContainer","props","SidebarPopupContainer"],"mappings":"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"}

package/dist/cjs/components/button/Button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),p=require("./Button.styled.js"),i=require("./themes.js"),F=require("../spinner/Spinner.js"),y=n.forwardRef(({version:S,id:v,buttonType:t="primary",size:s="small",buttonText:m,disabled:c,IconComponent:d,LeadingIcon:u,TrailingIcon:x,isLoading:r,inverse:l,onClick:q,matchParentWidth:f,subtitle:C,darkMode:h,activated:E,error:g,buttonTextColor:R,buttonFontSize:k,customIconColor:a,buttonColor:w,LeadingIconStyles:P,...j},z)=>{const D=i.GetButtonTextComponent(s,t,c),B=i.getButtonIconColor(s,t,l,c,r,h),o=n.useCallback(()=>{const N=s==="chip"?16:20;return{height:N,width:N,color:a||B,style:{display:"block"},className:"icon"}},[s,a,B]);return e.jsx(p.Button,{"data-test":j["data-test"],version:S,onClick:r?()=>{}:q,ref:z,id:v,disabled:c,size:s,buttonType:t,isLoading:r,inverse:l,matchParentWidth:f,darkMode:h,activated:E,error:g,buttonColor:w,...j,children:e.jsxs("div",{className:"button-container",children:[t.startsWith("dash")&&e.jsx(p.ButtonCustomDashedBorder,{}),e.jsx("div",{className:"overlay-container",children:r&&e.jsx(F.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(t,l)})}),d&&e.jsx("div",{className:"icon-component",children:n.createElement(d,o())}),u&&e.jsx("div",{className:"icon-leading",style:{zIndex:1,...P},children:n.createElement(u,o())}),m?e.jsxs(D,{className:"text",style:{color:R,fontSize:k},children:[m,e.jsx("div",{className:"text-subtitle",children:C})]}):e.jsx(e.Fragment,{}),x&&e.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:n.createElement(x,o())})]})})});y.displayName="Button";exports.Button=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),F=require("../spinner/Spinner.js"),G=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=G(u),S=u.forwardRef(({version:e,id:v,buttonType:s="primary",size:n="small",buttonText:m,disabled:a,IconComponent:x,LeadingIcon:h,TrailingIcon:j,isLoading:l,inverse:c,onClick:q,matchParentWidth:C,subtitle:E,darkMode:f,activated:R,error:_,buttonTextColor:g,buttonFontSize:k,customIconColor:r,buttonColor:w,LeadingIconStyles:D,...p},P)=>{const z=i.GetButtonTextComponent(n,s,a),B=i.getButtonIconColor(n,s,c,a,l,f),o=u.useCallback(()=>{const N=n==="chip"?16:20;return{height:N,width:N,color:r||B,style:{display:"block"},className:"icon"}},[n,r,B]);return t.jsx(y.Button,{"data-test":p["data-test"],version:e,onClick:l?()=>{}:q,ref:P,id:v,disabled:a,size:n,buttonType:s,isLoading:l,inverse:c,matchParentWidth:C,darkMode:f,activated:R,error:_,buttonColor:w,...p,children:t.jsxs("div",{className:"button-container",children:[s.startsWith("dash")&&t.jsx(y.ButtonCustomDashedBorder,{}),t.jsx("div",{className:"overlay-container",children:l&&t.jsx(F.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(s,c)})}),x&&t.jsx("div",{className:"icon-component",children:d.default.createElement(x,o())}),h&&t.jsx("div",{className:"icon-leading",style:{zIndex:1,...D},children:d.default.createElement(h,o())}),m?t.jsxs(z,{className:"text",style:{color:g,fontSize:k},children:[m,t.jsx("div",{className:"text-subtitle",children:E})]}):t.jsx(t.Fragment,{}),j&&t.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:d.default.createElement(j,o())})]})})});S.displayName="Button";exports.Button=S;
 //# sourceMappingURL=Button.js.map

package/dist/cjs/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"oOAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,uBACzBtB,EACAD,EACAG,CAAA,EAGKqB,EAAYC,EAAAA,mBACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,EAGKc,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,EAAW3B,IAAS,OAAS,GAAK,GACxC,MAAO,CACN,OAAQ2B,EACR,MAAOA,EACP,MAAOX,GAAoCO,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,CAACvB,EAAMgB,EAAiBO,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,QAAAtB,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,IAAAY,EACA,GAAAtB,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA/B,EAAW,WAAW,MAAM,GAAK6B,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAtB,GACAsB,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBAAgBlC,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,GACAyB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,WAAM,cAAczB,EAAesB,EAAA,CAAc,CAAA,CACnD,EAEArB,GACAwB,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,GAAGV,CAAA,EAEtB,SAAAgB,EAAM,cAAc9B,EAAaqB,EAAA,CAAc,CAAA,CAAA,EAGjDxB,EACA6B,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,MAAOP,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,EACD2B,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAAA,EAG1CkB,EAAAA,IAAAO,EAAAA,SAAA,EAAE,EAEF9B,GACAuB,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAM,cAAc7B,EAAcoB,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,EAEA9B,EAAO,YAAc"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"mSAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,uBACzBtB,EACAD,EACAG,CAAA,EAGKqB,EAAYC,EAAAA,mBACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,EAGKc,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,EAAW3B,IAAS,OAAS,GAAK,GACxC,MAAO,CACN,OAAQ2B,EACR,MAAOA,EACP,MAAOX,GAAoCO,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,CAACvB,EAAMgB,EAAiBO,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,QAAAtB,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,IAAAY,EACA,GAAAtB,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA/B,EAAW,WAAW,MAAM,GAAK6B,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAtB,GACAsB,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBAAgBlC,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,GACAyB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,mBAAM,cAAczB,EAAesB,EAAA,CAAc,CAAA,CACnD,EAEArB,GACAwB,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,GAAGV,CAAA,EAEtB,SAAAgB,EAAAA,QAAM,cAAc9B,EAAaqB,EAAA,CAAc,CAAA,CAAA,EAGjDxB,EACA6B,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,MAAOP,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,EACD2B,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAAA,EAG1CkB,EAAAA,IAAAO,EAAAA,SAAA,EAAE,EAEF9B,GACAuB,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAAA,QAAM,cAAc7B,EAAcoB,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,EAEA9B,EAAO,YAAc"}

package/dist/cjs/components/button/Button.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./themes.js"),a=o.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./themes.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},d=a(o),l=d.default.button`
 	all: unset;
 	cursor: pointer;
 	display: flex;
@@ -162,5 +162,5 @@
 		gap: 8.33px;
 		${t=>t.matchParentWidth?"margin: auto;":""}
 	}
-`,d=()=>i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"line-top"}),i.jsx("div",{className:"line-left"}),i.jsx("div",{className:"line-bottom"}),i.jsx("div",{className:"line-right"})]});exports.Button=a;exports.ButtonCustomDashedBorder=d;
+`,r=()=>i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"line-top"}),i.jsx("div",{className:"line-left"}),i.jsx("div",{className:"line-bottom"}),i.jsx("div",{className:"line-right"})]});exports.Button=l;exports.ButtonCustomDashedBorder=r;
 //# sourceMappingURL=Button.styled.js.map

package/dist/cjs/components/button/Button.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' | '2.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' || props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t  )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t  )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: calc(50% - 14px);\n\t\t\t\t\tleft: calc(50% - 7px);\n\t\t\t\t}\n\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
+{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' | '2.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' || props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t  )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t  )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: calc(50% - 14px);\n\t\t\t\t\tleft: calc(50% - 7px);\n\t\t\t\t}\n\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}

package/dist/cjs/components/buttonGroup/ButtonGroupStyle.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=require("../../constants/Theme.js"),n={small:"8px 12px",medium:"10px 12px",large:"14px 12px"},e={small:"36px",medium:"40px",large:"48px"},r=o.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),i=require("../../constants/Theme.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},o=a(n),r={small:"8px 12px",medium:"10px 12px",large:"14px 12px"},e={small:"36px",medium:"40px",large:"48px"},c=o.default.div`
 	display: flex;
 	flex-direction: row;
 	width: ${t=>t.width||"100%"};
 	height: ${t=>t.iconPosition==="top"?"auto":t.size?e[t.size]:"36px"};
 	min-height: ${t=>t.iconPosition==="top"?t.size?e[t.size]:"36px":"auto"};
 	gap: ${t=>t.gap||"12px"};
-`,c=o.div`
+`,s=o.default.div`
 	display: flex;
 	flex-direction: ${t=>t.iconPosition!=="top"?t.iconPosition==="left"?"row":"row-reverse":"column"};
 	flex: ${t=>t.matchParentWidth?1:"unset"};
@@ -17,7 +17,7 @@
 	border-radius: ${t=>t.borderRadius};
 	align-items: center;
 	justify-content: center;
-	padding: ${t=>t.size?n[t.size]:"8px 10px"};
+	padding: ${t=>t.size?r[t.size]:"8px 10px"};
 	gap: ${t=>t.iconPosition&&t.iconPosition!=="top"?"10px":"2px"};
 	.button {
 		align-items: center;
@@ -31,5 +31,5 @@
 	:hover {
 		cursor: pointer;
 	}
-`;exports.Button=c;exports.ButtonGroupStyle=r;
+`;exports.Button=s;exports.ButtonGroupStyle=c;
 //# sourceMappingURL=ButtonGroupStyle.js.map

package/dist/cjs/components/buttonGroup/ButtonGroupStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroupStyle.js","sources":["../../../../src/components/buttonGroup/ButtonGroupStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst ButtonPaddingMapping = {\n\tsmall: '8px 12px',\n\tmedium: '10px 12px',\n\tlarge: '14px 12px',\n};\n\nconst ButtonSizeMapping = {\n\tsmall: '36px',\n\tmedium: '40px',\n\tlarge: '48px',\n};\n\nexport const ButtonGroupStyle = styled.div<{\n\twidth: string | undefined;\n\tsize: 'small' | 'medium' | 'large';\n\tgap: string | undefined;\n\ticonPosition?: 'left' | 'right' | 'top';\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: ${(props) => props.width || '100%'};\n\theight: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? 'auto'\n\t\t\t: props.size\n\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t: '36px'};\n\tmin-height: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? props.size\n\t\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t\t: '36px'\n\t\t\t: 'auto'};\n\tgap: ${(props) => props.gap || '12px'};\n`;\n\nexport const Button = styled.div<{\n\tisActive: boolean;\n\tmatchParentWidth: boolean;\n\tborderRadius: string;\n\ticonPosition?: 'left' | 'right' | 'top';\n\tsize: 'small' | 'medium' | 'large';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.iconPosition !== 'top'\n\t\t\t? props.iconPosition === 'left'\n\t\t\t\t? 'row'\n\t\t\t\t: 'row-reverse'\n\t\t\t: 'column'};\n\tflex: ${(props) => (props.matchParentWidth ? 1 : 'unset')};\n\theight: ${(props) => (props.iconPosition === 'top' ? 'auto' : '100%')};\n\tmin-height: ${(props) => (props.iconPosition === 'top' ? '100%' : 'auto')};\n\tbackground: ${(props) =>\n\t\tprops.isActive ? COLORS.background.brandLight : props.backgroundColor};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.isActive ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tborder-radius: ${(props) => props.borderRadius};\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: ${(props) =>\n\t\tprops.size ? ButtonPaddingMapping[props.size] : '8px 10px'};\n\tgap: ${(props) =>\n\t\tprops.iconPosition && props.iconPosition !== 'top' ? '10px' : '2px'};\n\t.button {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t&__image {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t:hover {\n\t\tcursor: pointer;\n\t}\n`;\n"],"names":["ButtonPaddingMapping","ButtonSizeMapping","ButtonGroupStyle","styled","props","Button","COLORS"],"mappings":"2JAGMA,EAAuB,CAC5B,MAAO,WACP,OAAQ,YACR,MAAO,WACR,EAEMC,EAAoB,CACzB,MAAO,OACP,OAAQ,OACR,MAAO,MACR,EAEaC,EAAmBC,EAAO;AAAA;AAAA;AAAA,UAQ5BC,GAAUA,EAAM,OAAS,MAAM;AAAA,WAC9BA,GACVA,EAAM,eAAiB,MACpB,OACAA,EAAM,KACNH,EAAkBG,EAAM,IAAI,EAC5B,MAAM;AAAA,eACKA,GACdA,EAAM,eAAiB,MACpBA,EAAM,KACLH,EAAkBG,EAAM,IAAI,EAC5B,OACD,MAAM;AAAA,QACFA,GAAUA,EAAM,KAAO,MAAM;AAAA,EAGzBC,EAASF,EAAO;AAAA;AAAA,mBASTC,GAClBA,EAAM,eAAiB,MACpBA,EAAM,eAAiB,OACtB,MACA,cACD,QAAQ;AAAA,SACHA,GAAWA,EAAM,iBAAmB,EAAI,OAAQ;AAAA,WAC9CA,GAAWA,EAAM,eAAiB,MAAQ,OAAS,MAAO;AAAA,eACtDA,GAAWA,EAAM,eAAiB,MAAQ,OAAS,MAAO;AAAA,eAC1DA,GACdA,EAAM,SAAWE,EAAAA,OAAO,WAAW,WAAaF,EAAM,eAAe;AAAA;AAAA,IAElEA,GACFA,EAAM,SAAWE,EAAAA,OAAO,WAAW,aAAeA,EAAAA,OAAO,OAAO,OAAO;AAAA,kBACvDF,GAAUA,EAAM,YAAY;AAAA;AAAA;AAAA,YAGlCA,GACXA,EAAM,KAAOJ,EAAqBI,EAAM,IAAI,EAAI,UAAU;AAAA,QACnDA,GACPA,EAAM,cAAgBA,EAAM,eAAiB,MAAQ,OAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"ButtonGroupStyle.js","sources":["../../../../src/components/buttonGroup/ButtonGroupStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst ButtonPaddingMapping = {\n\tsmall: '8px 12px',\n\tmedium: '10px 12px',\n\tlarge: '14px 12px',\n};\n\nconst ButtonSizeMapping = {\n\tsmall: '36px',\n\tmedium: '40px',\n\tlarge: '48px',\n};\n\nexport const ButtonGroupStyle = styled.div<{\n\twidth: string | undefined;\n\tsize: 'small' | 'medium' | 'large';\n\tgap: string | undefined;\n\ticonPosition?: 'left' | 'right' | 'top';\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: ${(props) => props.width || '100%'};\n\theight: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? 'auto'\n\t\t\t: props.size\n\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t: '36px'};\n\tmin-height: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? props.size\n\t\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t\t: '36px'\n\t\t\t: 'auto'};\n\tgap: ${(props) => props.gap || '12px'};\n`;\n\nexport const Button = styled.div<{\n\tisActive: boolean;\n\tmatchParentWidth: boolean;\n\tborderRadius: string;\n\ticonPosition?: 'left' | 'right' | 'top';\n\tsize: 'small' | 'medium' | 'large';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.iconPosition !== 'top'\n\t\t\t? props.iconPosition === 'left'\n\t\t\t\t? 'row'\n\t\t\t\t: 'row-reverse'\n\t\t\t: 'column'};\n\tflex: ${(props) => (props.matchParentWidth ? 1 : 'unset')};\n\theight: ${(props) => (props.iconPosition === 'top' ? 'auto' : '100%')};\n\tmin-height: ${(props) => (props.iconPosition === 'top' ? '100%' : 'auto')};\n\tbackground: ${(props) =>\n\t\tprops.isActive ? COLORS.background.brandLight : props.backgroundColor};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.isActive ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tborder-radius: ${(props) => props.borderRadius};\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: ${(props) =>\n\t\tprops.size ? ButtonPaddingMapping[props.size] : '8px 10px'};\n\tgap: ${(props) =>\n\t\tprops.iconPosition && props.iconPosition !== 'top' ? '10px' : '2px'};\n\t.button {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t&__image {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t:hover {\n\t\tcursor: pointer;\n\t}\n`;\n"],"names":["ButtonPaddingMapping","ButtonSizeMapping","ButtonGroupStyle","styled","props","Button","COLORS"],"mappings":"0NAGMA,EAAuB,CAC5B,MAAO,WACP,OAAQ,YACR,MAAO,WACR,EAEMC,EAAoB,CACzB,MAAO,OACP,OAAQ,OACR,MAAO,MACR,EAEaC,EAAmBC,EAAAA,QAAO;AAAA;AAAA;AAAA,UAQ5BC,GAAUA,EAAM,OAAS,MAAM;AAAA,WAC9BA,GACVA,EAAM,eAAiB,MACpB,OACAA,EAAM,KACNH,EAAkBG,EAAM,IAAI,EAC5B,MAAM;AAAA,eACKA,GACdA,EAAM,eAAiB,MACpBA,EAAM,KACLH,EAAkBG,EAAM,IAAI,EAC5B,OACD,MAAM;AAAA,QACFA,GAAUA,EAAM,KAAO,MAAM;AAAA,EAGzBC,EAASF,EAAAA,QAAO;AAAA;AAAA,mBASTC,GAClBA,EAAM,eAAiB,MACpBA,EAAM,eAAiB,OACtB,MACA,cACD,QAAQ;AAAA,SACHA,GAAWA,EAAM,iBAAmB,EAAI,OAAQ;AAAA,WAC9CA,GAAWA,EAAM,eAAiB,MAAQ,OAAS,MAAO;AAAA,eACtDA,GAAWA,EAAM,eAAiB,MAAQ,OAAS,MAAO;AAAA,eAC1DA,GACdA,EAAM,SAAWE,EAAAA,OAAO,WAAW,WAAaF,EAAM,eAAe;AAAA;AAAA,IAElEA,GACFA,EAAM,SAAWE,EAAAA,OAAO,WAAW,aAAeA,EAAAA,OAAO,OAAO,OAAO;AAAA,kBACvDF,GAAUA,EAAM,YAAY;AAAA;AAAA;AAAA,YAGlCA,GACXA,EAAM,KAAOJ,EAAqBI,EAAM,IAAI,EAAI,UAAU;AAAA,QACnDA,GACPA,EAAM,cAAgBA,EAAM,eAAiB,MAAQ,OAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/card-selection-modal/CardSelectionModal.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("../../constants/Theme.js"),o=e.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("styled-components"),r=require("../../constants/Theme.js"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=t(d),a=o.default.div`
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
@@ -14,7 +14,7 @@
 		align-items: center;
 		gap: 4px;
 	}
-`,d=e.div`
+`,i=o.default.div`
 	width: 212px;
 	padding: 16px;
 	display: flex;
@@ -38,5 +38,5 @@
 		border-radius: 50%;
 		background-color: ${r.DEFAULT_THEME.colorsV2.background.brandLight};
 	}
-`;exports.StyledCard=d;exports.StyledCardContainer=o;
+`;exports.StyledCard=i;exports.StyledCardContainer=a;
 //# sourceMappingURL=CardSelectionModal.styled.js.map

package/dist/cjs/components/card-selection-modal/CardSelectionModal.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSelectionModal.styled.js","sources":["../../../../src/components/card-selection-modal/CardSelectionModal.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\n\nexport const StyledCardContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n\t.cards__wrapper {\n\t\tpadding: 0 24px;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 16px;\n\t}\n\t.info__wrapper {\n\t\tpadding: 0 24px 24px 24px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n`;\n\nexport const StyledCard = styled.div`\n\twidth: 212px;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder: 1px solid ${DEFAULT_THEME.colorsV2.stroke.primary};\n\tborder-radius: 4px;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n\n\t.icon__container {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.brandLight};\n\t}\n`;\n"],"names":["StyledCardContainer","styled","StyledCard","DEFAULT_THEME"],"mappings":"2JAGaA,EAAsBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkB7BC,EAAaD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZE,gBAAc,SAAS,QAAQ,QAAQ;AAAA,qBACvCA,gBAAc,SAAS,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKpCA,gBAAc,SAAS,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUtCA,gBAAc,SAAS,WAAW,UAAU;AAAA;AAAA"}
+{"version":3,"file":"CardSelectionModal.styled.js","sources":["../../../../src/components/card-selection-modal/CardSelectionModal.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\n\nexport const StyledCardContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n\t.cards__wrapper {\n\t\tpadding: 0 24px;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 16px;\n\t}\n\t.info__wrapper {\n\t\tpadding: 0 24px 24px 24px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n`;\n\nexport const StyledCard = styled.div`\n\twidth: 212px;\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder: 1px solid ${DEFAULT_THEME.colorsV2.stroke.primary};\n\tborder-radius: 4px;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n\n\t.icon__container {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.brandLight};\n\t}\n`;\n"],"names":["StyledCardContainer","styled","StyledCard","DEFAULT_THEME"],"mappings":"0NAGaA,EAAsBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkB7BC,EAAaD,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZE,gBAAc,SAAS,QAAQ,QAAQ;AAAA,qBACvCA,gBAAc,SAAS,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKpCA,gBAAc,SAAS,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUtCA,gBAAc,SAAS,WAAW,UAAU;AAAA;AAAA"}

package/dist/cjs/components/card-selector/CardSelector.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),d=require("../../constants/Theme.js"),r=t.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),t=require("../../constants/Theme.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(n),o=d.default.div`
 	width: 100%;
 	display: flex;
 	padding: 16px;
@@ -6,15 +6,15 @@
 	gap: 12px;
 	justify-content: ${e=>e.loading?"center":"flex-start"};
 	cursor: ${e=>e.disabled||e.loading?"not-allowed":"pointer"};
-	background-color: ${e=>e.selected?d.COLORS.background.brandLight:d.COLORS.surface.subdued};
+	background-color: ${e=>e.selected?t.COLORS.background.brandLight:t.COLORS.surface.subdued};
 	border: 1px solid
-		${e=>e.selected?d.COLORS.content.brand:e.disabled?d.COLORS.stroke.primary:d.COLORS.content.inactive};
+		${e=>e.selected?t.COLORS.content.brand:e.disabled?t.COLORS.stroke.primary:t.COLORS.content.inactive};
 	:hover {
-		background-color: ${e=>e.isTooltipPresent?d.COLORS.surface.subdued:e.selected?d.COLORS.background.brandLight:e.disabled||e.loading?d.COLORS.surface.subdued:d.COLORS.surface.hovered};
+		background-color: ${e=>e.isTooltipPresent?t.COLORS.surface.subdued:e.selected?t.COLORS.background.brandLight:e.disabled||e.loading?t.COLORS.surface.subdued:t.COLORS.surface.hovered};
 	}
-`,n=t.div`
+`,r=d.default.div`
 	display: flex;
 	justify-content: center;
 	align-items: center;
-`;exports.Container=r;exports.Loader=n;
+`;exports.Container=o;exports.Loader=r;
 //# sourceMappingURL=CardSelector.styled.js.map

package/dist/cjs/components/card-selector/CardSelector.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSelector.styled.js","sources":["../../../../src/components/card-selector/CardSelector.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tselected: boolean;\n\tdisabled: boolean;\n\tloading: boolean;\n\tisTooltipPresent?: boolean;\n}>`\n\twidth: 100%;\n\tdisplay: flex;\n\tpadding: 16px;\n\tborder-radius: 4px;\n\tgap: 12px;\n\tjustify-content: ${(props) => (props.loading ? 'center' : 'flex-start')};\n\tcursor: ${(props) =>\n\t\tprops.disabled || props.loading ? 'not-allowed' : 'pointer'};\n\tbackground-color: ${(props) =>\n\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.subdued};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.selected\n\t\t\t\t? COLORS.content.brand\n\t\t\t\t: props.disabled\n\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t: COLORS.content.inactive};\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isTooltipPresent\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: props.selected\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: props.disabled || props.loading\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const Loader = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n`;\n"],"names":["Container","styled","props","COLORS","Loader"],"mappings":"2JAGaA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWXC,GAAWA,EAAM,QAAU,SAAW,YAAa;AAAA,WAC5DA,GACVA,EAAM,UAAYA,EAAM,QAAU,cAAgB,SAAS;AAAA,qBACvCA,GACpBA,EAAM,SAAWC,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,IAEnED,GACFA,EAAM,SACHC,EAAAA,OAAO,QAAQ,MACfD,EAAM,SACNC,EAAAA,OAAO,OAAO,QACdA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEND,GACpBA,EAAM,iBACHC,EAAAA,OAAO,QAAQ,QACfD,EAAM,SACNC,SAAO,WAAW,WAClBD,EAAM,UAAYA,EAAM,QACxBC,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIfC,EAASH,EAAO;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"CardSelector.styled.js","sources":["../../../../src/components/card-selector/CardSelector.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tselected: boolean;\n\tdisabled: boolean;\n\tloading: boolean;\n\tisTooltipPresent?: boolean;\n}>`\n\twidth: 100%;\n\tdisplay: flex;\n\tpadding: 16px;\n\tborder-radius: 4px;\n\tgap: 12px;\n\tjustify-content: ${(props) => (props.loading ? 'center' : 'flex-start')};\n\tcursor: ${(props) =>\n\t\tprops.disabled || props.loading ? 'not-allowed' : 'pointer'};\n\tbackground-color: ${(props) =>\n\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.subdued};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.selected\n\t\t\t\t? COLORS.content.brand\n\t\t\t\t: props.disabled\n\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t: COLORS.content.inactive};\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isTooltipPresent\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: props.selected\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: props.disabled || props.loading\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const Loader = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n`;\n"],"names":["Container","styled","props","COLORS","Loader"],"mappings":"0NAGaA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWXC,GAAWA,EAAM,QAAU,SAAW,YAAa;AAAA,WAC5DA,GACVA,EAAM,UAAYA,EAAM,QAAU,cAAgB,SAAS;AAAA,qBACvCA,GACpBA,EAAM,SAAWC,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,IAEnED,GACFA,EAAM,SACHC,EAAAA,OAAO,QAAQ,MACfD,EAAM,SACNC,EAAAA,OAAO,OAAO,QACdA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEND,GACpBA,EAAM,iBACHC,EAAAA,OAAO,QAAQ,QACfD,EAAM,SACNC,SAAO,WAAW,WAClBD,EAAM,UAAYA,EAAM,QACxBC,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIfC,EAASH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/carousel/carousel.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("../../assets/icons/chevronLeft.svg.js"),n=require("../../assets/icons/chevronRight.svg.js"),s=require("@trendyol-js/react-carousel"),i=require("styled-components"),l=()=>r.jsx(t,{className:"left",children:r.jsx(o.default,{width:16,height:16,color:"#fff"})}),c=()=>r.jsx(t,{className:"right",children:r.jsx(n.default,{width:16,height:16,color:"#fff"})}),a=e=>r.jsx(r.Fragment,{children:r.jsx(s.Carousel,{leftArrow:r.jsx(l,{}),rightArrow:r.jsx(c,{}),...e,children:e.children})}),t=i.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("../../assets/icons/chevronLeft.svg.js"),n=require("../../assets/icons/chevronRight.svg.js"),s=require("@trendyol-js/react-carousel"),i=require("styled-components"),l=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},a=l(i),c=()=>t.jsx(e,{className:"left",children:t.jsx(o.default,{width:16,height:16,color:"#fff"})}),u=()=>t.jsx(e,{className:"right",children:t.jsx(n.default,{width:16,height:16,color:"#fff"})}),f=r=>t.jsx(t.Fragment,{children:t.jsx(s.Carousel,{leftArrow:t.jsx(c,{}),rightArrow:t.jsx(u,{}),...r,children:r.children})}),e=a.default.div`
 	cursor: pointer;
 	margin: 0 8px;
 	width: 50px;
@@ -19,5 +19,5 @@
 		transform: translate(0%, -50%);
 		right: 0;
 	}
-`;exports.Carousel=a;
+`;exports.Carousel=f;
 //# sourceMappingURL=carousel.js.map

package/dist/cjs/components/carousel/carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsx","ArrowContainer","ChevronLeft","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":"oSAMMA,EAAY,IAEhBC,EAAAA,IAACC,EAAA,CAAe,UAAU,OACzB,SAAAD,MAACE,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,MAAM,MAAA,CAAO,EAClD,EAIIC,EAAa,IAEjBH,EAAAA,IAACC,EAAA,CAAe,UAAU,QACzB,SAAAD,MAACI,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,MAAM,MAAA,CAAO,EACnD,EAIWC,EAAYC,GAEvBN,MAAAO,EAAAA,SAAA,CACC,SAAAP,EAAAA,IAACQ,EAAAA,SAAA,CACA,gBAAYT,EAAA,EAAU,EACtB,iBAAaI,EAAA,EAAW,EACvB,GAAGG,EAEH,SAAAA,EAAM,QAAA,CAAA,EAET,EAIIL,EAAiBQ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsx","ArrowContainer","ChevronLeft","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":"mWAMMA,EAAY,IAEhBC,EAAAA,IAACC,EAAA,CAAe,UAAU,OACzB,SAAAD,MAACE,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,MAAM,MAAA,CAAO,EAClD,EAIIC,EAAa,IAEjBH,EAAAA,IAACC,EAAA,CAAe,UAAU,QACzB,SAAAD,MAACI,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,MAAM,MAAA,CAAO,EACnD,EAIWC,EAAYC,GAEvBN,MAAAO,EAAAA,SAAA,CACC,SAAAP,EAAAA,IAACQ,EAAAA,SAAA,CACA,gBAAYT,EAAA,EAAU,EACtB,iBAAaI,EAAA,EAAW,EACvB,GAAGG,EAEH,SAAAA,EAAM,QAAA,CAAA,EAET,EAIIL,EAAiBQ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/carousel-preview/CarouselPreview.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),S=require("../../assets/icons/aiContentIcon.svg.js"),I=require("react"),v=require("react-slick");require("slick-carousel/slick/slick-theme.css");require("slick-carousel/slick/slick.css");const q=require("./CarouselPreview.style.js"),g=require("./CarouselPreviewCard.js"),T=require("../template-preview/TemplatePreview.styled.js"),y=require("../template-context-mapper/context/templateModalContext.js"),m=require("../template-preview/helpers/templateMiscHelper.js"),A=require("../template-preview/RCS/RCSPreview.styled.js"),j=require("./CustomCarouselArrows.js"),M=I.forwardRef(({channel:s,template:r,isPreview:a,removeBottomBorder:l,borderRadius:t,showArrows:c,hideBorder:d,showSampleValues:n})=>{const{sliderRef:u,selectedCarouselIndex:C,cardCount:i,setIsCarouselHovered:x,cardIndex:o,showVariablePicker:p}=y.useTemplateModalContext(),h=o==-1?m.determineCardIndex(s):o,f=r?.components?.[h]?.cards,w=f?.length?e.jsx(R,{cards:f,cardCount:i??0,selectedCarouselIndex:C??-1,sliderRef:u,isPreview:a,showArrows:c,channel:s,template:r,setIsCarouselHovered:x,showSampleValues:!!n,showVariablePicker:p}):null;return m.isRCSChannel(s)?e.jsx(A.RCSCarousalContainer,{borderRadius:t,children:w}):e.jsxs(q.Container,{removeBottomBorder:l,borderRadius:t,hideBorder:d,children:[(!!r?.aiContentConfigId||!!r?.isAiGenerated)&&e.jsx(T.AiContentBadge,{children:e.jsx(S.default,{width:48,height:48})}),e.jsx(g.default,{channel:s,currentTemplate:r,carouselCardIndex:-1,isPreview:a,width:"77%"}),w]})}),R=({cards:s,cardCount:r,selectedCarouselIndex:a,sliderRef:l,isPreview:t,showArrows:c,channel:d,template:n,setIsCarouselHovered:u,showSampleValues:C,showVariablePicker:i})=>e.jsx(q.CarouselSlickContainer,{cardCount:r,selectedCarouselIndex:a,onMouseEnter:()=>!i&&u?.(!0),onMouseLeave:()=>!i&&u?.(!1),children:e.jsx(v,{ref:l,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!t,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:e.jsx(j.CustomCarouselRightArrow,{isPreview:t??!1}),prevArrow:e.jsx(j.CustomCarouselLeftArrow,{isPreview:t??!1}),children:s?.map((x,o)=>{const p={components:x.components,mapping:n?.mapping?.cards?.[o],content:n?.content,templateType:n?.templateType};return e.jsx(g.default,{channel:d,currentTemplate:p,carouselCardIndex:o,isPreview:t,width:"100%",showSampleValues:C},o)})})});exports.CarouselPreview=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),I=require("../../assets/icons/aiContentIcon.svg.js"),v=require("react"),y=require("react-slick");require("slick-carousel/slick/slick-theme.css");require("slick-carousel/slick/slick.css");const q=require("./CarouselPreview.style.js"),S=require("./CarouselPreviewCard.js"),R=require("../template-preview/TemplatePreview.styled.js"),T=require("../template-context-mapper/context/templateModalContext.js"),m=require("../template-preview/helpers/templateMiscHelper.js"),_=require("../template-preview/RCS/RCSPreview.styled.js"),j=require("./CustomCarouselArrows.js"),g=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},A=g(v),M=g(y),P=A.default.forwardRef(({channel:e,template:t,isPreview:a,removeBottomBorder:i,borderRadius:o,showArrows:c,hideBorder:d,showSampleValues:n})=>{const{sliderRef:u,selectedCarouselIndex:C,cardCount:l,setIsCarouselHovered:f,cardIndex:s,showVariablePicker:p}=T.useTemplateModalContext(),h=s==-1?m.determineCardIndex(e):s,x=t?.components?.[h]?.cards,w=x?.length?r.jsx(b,{cards:x,cardCount:l??0,selectedCarouselIndex:C??-1,sliderRef:u,isPreview:a,showArrows:c,channel:e,template:t,setIsCarouselHovered:f,showSampleValues:!!n,showVariablePicker:p}):null;return m.isRCSChannel(e)?r.jsx(_.RCSCarousalContainer,{borderRadius:o,children:w}):r.jsxs(q.Container,{removeBottomBorder:i,borderRadius:o,hideBorder:d,children:[(!!t?.aiContentConfigId||!!t?.isAiGenerated)&&r.jsx(R.AiContentBadge,{children:r.jsx(I.default,{width:48,height:48})}),r.jsx(S.default,{channel:e,currentTemplate:t,carouselCardIndex:-1,isPreview:a,width:"77%"}),w]})}),b=({cards:e,cardCount:t,selectedCarouselIndex:a,sliderRef:i,isPreview:o,showArrows:c,channel:d,template:n,setIsCarouselHovered:u,showSampleValues:C,showVariablePicker:l})=>r.jsx(q.CarouselSlickContainer,{cardCount:t,selectedCarouselIndex:a,onMouseEnter:()=>!l&&u?.(!0),onMouseLeave:()=>!l&&u?.(!1),children:r.jsx(M.default,{ref:i,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!o,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:r.jsx(j.CustomCarouselRightArrow,{isPreview:o??!1}),prevArrow:r.jsx(j.CustomCarouselLeftArrow,{isPreview:o??!1}),children:e?.map((f,s)=>{const p={components:f.components,mapping:n?.mapping?.cards?.[s],content:n?.content,templateType:n?.templateType};return r.jsx(S.default,{channel:d,currentTemplate:p,carouselCardIndex:s,isPreview:o,width:"100%",showSampleValues:C},s)})})});exports.CarouselPreview=P;
 //# sourceMappingURL=CarouselPreview.js.map