@bikdotai/bik-component-library 0.0.736-beta.7 → 0.0.736-beta.9

package/dist/esm/components/bik-layout/FeatureModal.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface FeatureModalProps {
+    zIndex?: number;
+    disableCross?: boolean;
+    onClickingCross: () => void;
+    otherContent?: JSX.Element;
+    onUpgrade?: () => void;
+    primaryButtonText?: string;
+    title?: string;
+    subTitle?: string;
+    showBookADemo?: boolean;
+    demoLink?: string;
+}
+export declare const FeatureModal: React.FC<FeatureModalProps>;

package/dist/esm/components/bik-layout/FeatureModal.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"react-dom";import{COLORS as n}from"../../constants/Theme.js";import s from"../../assets/icons/cross.svg.js";import{Button as i}from"../button/Button.js";import{TitleMedium as a,BodyPrimary as c}from"../TypographyStyle.js";import{FeatureModalContainer as l,InnerModalContainer as d}from"./CommonStyles.js";const m=m=>{const{zIndex:u,disableCross:h=!1,otherContent:p,onClickingCross:b,onUpgrade:f,title:g,subTitle:y,showBookADemo:T,demoLink:k,primaryButtonText:C}=m,v=g||"Upgrade to access this feature",x=y||"This feature is not included in the current plan. Upgrade to get access and use this feature.";return r.createPortal(e(l,{zIndex:u,children:[!h&&t("div",{className:"cross-button",onClick:()=>b(),"aria-hidden":"true",children:t(s,{height:20,width:20,color:n.surface.subdued})}),t(d,{children:p?t(o,{children:p}):e("div",{className:"content-layout",children:[e("div",{children:[t(a,{className:"title-color",children:v}),t(c,{className:"title-color mt-8",children:x})]}),e("div",{className:"cta-buttons",children:[T&&t(i,{buttonText:"Book a demo",buttonType:"secondary",size:"large",inverse:!0,onClick:()=>{window.open(k,"_blank")}}),t(i,{buttonText:C||"Upgrade plan",buttonType:"primary",size:"large",inverse:!0,onClick:()=>f?f():""})]})]})})]}),document.body)};export{m as FeatureModal};
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import s from"react-dom";import{COLORS as r}from"../../constants/Theme.js";import n from"../../assets/icons/cross.svg.js";import{Button as i}from"../button/Button.js";import{TitleMedium as a,BodyPrimary as c}from"../TypographyStyle.js";import{FeatureModalContainer as l,InnerModalContainer as d}from"./CommonStyles.js";const m=m=>{const{zIndex:u,disableCross:h=!1,otherContent:p,onClickingCross:b,onUpgrade:g,title:j,subTitle:f,showBookADemo:y,demoLink:T,primaryButtonText:k}=m,C=j||"Upgrade to access this feature",v=f||"This feature is not included in the current plan. Upgrade to get access and use this feature.";return s.createPortal(e(l,Object.assign({zIndex:u},{children:[!h&&t("div",Object.assign({className:"cross-button",onClick:()=>b(),"aria-hidden":"true"},{children:t(n,{height:20,width:20,color:r.surface.subdued})})),t(d,{children:p?t(o,{children:p}):e("div",Object.assign({className:"content-layout"},{children:[e("div",{children:[t(a,Object.assign({className:"title-color"},{children:C})),t(c,Object.assign({className:"title-color mt-8"},{children:v}))]}),e("div",Object.assign({className:"cta-buttons"},{children:[y&&t(i,{buttonText:"Book a demo",buttonType:"secondary",size:"large",inverse:!0,onClick:()=>{window.open(T,"_blank")}}),t(i,{buttonText:k||"Upgrade plan",buttonType:"primary",size:"large",inverse:!0,onClick:()=>g?g():""})]}))]}))})]})),document.body)};export{m as FeatureModal};

package/dist/esm/components/bik-layout/FeatureModalV2.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface FeatureModalV2Props {
+    zIndex?: number;
+    otherContent?: JSX.Element;
+    onUpgrade?: () => void;
+    primaryButtonText?: string;
+    title?: string;
+    subTitle?: string;
+    onClose?: () => void;
+    featureImage?: string;
+    id?: string;
+}
+export declare const FeatureModalV2: React.FC<FeatureModalV2Props>;

package/dist/esm/components/bik-layout/FeatureModalV2.js

@@ -1 +1 @@
-import{jsx as t,Fragment as e,jsxs as o}from"react/jsx-runtime";import{useState as r,Fragment as a}from"react";import n from"react-dom";import{COLORS as i}from"../../constants/Theme.js";import{Button as s}from"../button/Button.js";import{StyledModal as c}from"../modals/styledModal.js";import{TitleMedium as l,BodySecondary as m}from"../TypographyStyle.js";import{FeatureModalV2Container as d}from"./CommonStyles.js";const u=u=>{const{zIndex:y,otherContent:p,onUpgrade:b,title:f,subTitle:h,primaryButtonText:g,onClose:x,featureImage:C,id:T}=u,j=void 0===f?"Start your 14-day free trial to test your AI assistant on your website":f,w=h||"Test your assistant on your website and unlock many other features for free by starting your trial now. Don't worry, you can cancel anytime before the trial ends and no charges will be deducted.",k=C||"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb74e0e4c-9b3b-47ca-b0af-704b246e3c54?alt=media&token=bb48a397-1981-4c93-a835-eb4f400d5a60",[v,I]=r(!0);return n.createPortal(t(c,{zIndex:y,open:v,onClose:function(){x&&x(),I(!1)},closeOnOutsideClick:!0,centralContainerStyles:{maxWidth:"568px"},innerModalId:T,children:t(d,{children:p?t(e,{children:p}):o(a,{children:[t("div",{className:"top-feature-content",children:t("img",{src:k,alt:"general-icon"})}),o("div",{className:"bottom-feature-content",children:[t(l,{className:"title-class text-align-center mt-8",style:{textAlign:"center"},children:j}),t(m,{className:"text-align-center",style:{color:i.content.secondary},children:w}),t("div",{className:"cta-buttons",children:t(s,{buttonText:g||"Upgrade to growth plan",buttonType:"primary",size:"large",onClick:()=>{b&&b(),I(!1)}})})]})]})})}),document.body)};export{u as FeatureModalV2};
+import{jsx as t,Fragment as e,jsxs as o}from"react/jsx-runtime";import{useState as a,Fragment as n}from"react";import r from"react-dom";import{COLORS as s}from"../../constants/Theme.js";import{Button as i}from"../button/Button.js";import{StyledModal as c}from"../modals/styledModal.js";import{TitleMedium as l,BodySecondary as m}from"../TypographyStyle.js";import{FeatureModalV2Container as d}from"./CommonStyles.js";const b=b=>{const{zIndex:u,otherContent:y,onUpgrade:p,title:g,subTitle:f,primaryButtonText:h,onClose:j,featureImage:x,id:O}=b,C=void 0===g?"Start your 14-day free trial to test your AI assistant on your website":g,T=f||"Test your assistant on your website and unlock many other features for free by starting your trial now. Don't worry, you can cancel anytime before the trial ends and no charges will be deducted.",w=x||"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2Fb74e0e4c-9b3b-47ca-b0af-704b246e3c54?alt=media&token=bb48a397-1981-4c93-a835-eb4f400d5a60",[k,v]=a(!0);return r.createPortal(t(c,Object.assign({zIndex:u,open:k,onClose:function(){j&&j(),v(!1)},closeOnOutsideClick:!0,centralContainerStyles:{maxWidth:"568px"},innerModalId:O},{children:t(d,{children:y?t(e,{children:y}):o(n,{children:[t("div",Object.assign({className:"top-feature-content"},{children:t("img",{src:w,alt:"general-icon"})})),o("div",Object.assign({className:"bottom-feature-content"},{children:[t(l,Object.assign({className:"title-class text-align-center mt-8",style:{textAlign:"center"}},{children:C})),t(m,Object.assign({className:"text-align-center",style:{color:s.content.secondary}},{children:T})),t("div",Object.assign({className:"cta-buttons"},{children:t(i,{buttonText:h||"Upgrade to growth plan",buttonType:"primary",size:"large",onClick:()=>{p&&p(),v(!1)}})}))]}))]})})})),document.body)};export{b as FeatureModalV2};

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -0,0 +1,92 @@
+export declare const Menus: ({
+    displayName: string;
+    key: number;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    activeIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    hoverIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    children: {
+        displayName: string;
+        key: number;
+    }[];
+    isLocked?: undefined;
+    showAccessUpgradePanel?: undefined;
+    isNew?: undefined;
+    isLastSticky?: undefined;
+    layout?: undefined;
+    is2ndLastSticky?: undefined;
+} | {
+    displayName: string;
+    key: number;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    isLocked: boolean;
+    activeIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    hoverIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    children?: undefined;
+    showAccessUpgradePanel?: undefined;
+    isNew?: undefined;
+    isLastSticky?: undefined;
+    layout?: undefined;
+    is2ndLastSticky?: undefined;
+} | {
+    displayName: string;
+    key: number;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    activeIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    hoverIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    showAccessUpgradePanel: boolean;
+    isLocked: boolean;
+    children: {
+        displayName: string;
+        key: number;
+    }[];
+    isNew?: undefined;
+    isLastSticky?: undefined;
+    layout?: undefined;
+    is2ndLastSticky?: undefined;
+} | {
+    displayName: string;
+    key: number;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    activeIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    hoverIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    isNew: boolean;
+    children?: undefined;
+    isLocked?: undefined;
+    showAccessUpgradePanel?: undefined;
+    isLastSticky?: undefined;
+    layout?: undefined;
+    is2ndLastSticky?: undefined;
+} | {
+    displayName: string;
+    key: number;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    activeIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    hoverIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    isNew: boolean;
+    isLastSticky: boolean;
+    children: {
+        displayName: string;
+        key: number;
+    }[];
+    isLocked?: undefined;
+    showAccessUpgradePanel?: undefined;
+    layout?: undefined;
+    is2ndLastSticky?: undefined;
+} | {
+    displayName: string;
+    key: number;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    activeIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    hoverIcon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    layout: string;
+    is2ndLastSticky: boolean;
+    children: {
+        displayName: string;
+        key: number;
+        description: string;
+    }[];
+    isLocked?: undefined;
+    showAccessUpgradePanel?: undefined;
+    isNew?: undefined;
+    isLastSticky?: undefined;
+})[];

package/dist/esm/components/bik-layout/PageLoader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface LoaderProps {
+    message?: string;
+    subMessage?: string;
+}
+export declare const PageLoader: React.FC<LoaderProps>;

package/dist/esm/components/bik-layout/PageLoader.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{DEFAULT_THEME as s}from"../../constants/Theme.js";import{TitleMedium as o,BodyPrimary as m}from"../TypographyStyle.js";import{LoaderWrapper as n,LoadingMessageWrapper as t}from"./CommonStyles.js";const a=a=>e(n,{children:r("div",{className:"inner",children:[e("span",{className:"loader"}),a.message&&r(t,{children:[e(o,{children:a.message}),e(m,{style:{color:s.colorsV2.content.secondary,marginTop:8},children:a.subMessage})]})]})});export{a as PageLoader};
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import{DEFAULT_THEME as r}from"../../constants/Theme.js";import{TitleMedium as o,BodyPrimary as n}from"../TypographyStyle.js";import{LoaderWrapper as m,LoadingMessageWrapper as t}from"./CommonStyles.js";const a=a=>e(m,{children:s("div",Object.assign({className:"inner"},{children:[e("span",{className:"loader"}),a.message&&s(t,{children:[e(o,{children:a.message}),e(n,Object.assign({style:{color:r.colorsV2.content.secondary,marginTop:8}},{children:a.subMessage}))]})]}))});export{a as PageLoader};

package/dist/esm/components/bik-layout/ShowShopifyRestrictedModal.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface ShowShopifyRestrictedModalProps {
+    containerType: 'demo_store' | 'connect_shopify';
+    handleButtonClick: (type: 'shopify' | 'demo' | 'close') => void;
+    connectShopifyDescription?: string;
+    demoDescription?: string;
+    zIndex?: number;
+    triggerPosition?: {
+        top: number;
+        left: number;
+    };
+}
+export declare const ShowShopifyRestrictedModal: React.FC<ShowShopifyRestrictedModalProps>;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import t from"react-dom";import{COLORS as n}from"../../constants/Theme.js";import i from"../../assets/icons/cross.svg.js";import{Button as r}from"../button/Button.js";import{TitleMedium as a,BodyPrimary as s}from"../TypographyStyle.js";import{FeatureModalContainer as c,RelativeModalContainer as l}from"./CommonStyles.js";const d=d=>{const{zIndex:m,containerType:h,handleButtonClick:p,triggerPosition:u,connectShopifyDescription:y,demoDescription:g}=d,b=e=>{p(e)},f=u&&window.innerHeight-u.top<100,v=u?{position:"fixed",top:f?"auto":u.top,bottom:f?"0":"auto",left:u.left,width:"unset",background:"none"}:{alignItems:"center",height:950,background:"linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 129.71%)"};return t.createPortal(e(c,{zIndex:m,resetHeight:!0,style:v,relativePostion:!!u,children:o(l,{children:[e("div",{className:"cross-container",onClick:()=>b("close"),"aria-hidden":"true",children:e(i,{height:24,width:24,color:"#000000"})}),o("div","demo_store"==h?{className:"demo-container",children:[e(a,{color:n.background.negative.vibrant,children:"Demo Store Limitations"}),e(s,{children:null!=g?g:"Apologies, but you are unable to save or take any actions as you are currently in the demo store."})]}:{className:"content-layout",children:[e("div",{className:"left-content",children:e("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"})}),o("div",{className:"right-content",children:[e(a,{children:"Connect Shopify "}),e(s,{style:{maxWidth:432},children:null!=y?y:"Connect Shopify to publish your bot on your Shopify store. Or, explore our demo store to see it in action."}),o("div",{className:"cta-button-container",children:[e(r,{buttonText:"Connect shopify",buttonType:"primary",size:"small",onClick:()=>b("shopify")}),e(r,{buttonText:"View demo store",buttonType:"secondary",size:"small",onClick:()=>b("demo")})]})]})]})]})}),document.body)};export{d as ShowShopifyRestrictedModal};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"react-dom";import{COLORS as n}from"../../constants/Theme.js";import i from"../../assets/icons/cross.svg.js";import{Button as s}from"../button/Button.js";import{TitleMedium as r,BodyPrimary as a}from"../TypographyStyle.js";import{FeatureModalContainer as c,RelativeModalContainer as l}from"./CommonStyles.js";const d=d=>{const{zIndex:m,containerType:h,handleButtonClick:p,triggerPosition:g,connectShopifyDescription:b,demoDescription:u}=d,y=e=>{p(e)},f=g&&window.innerHeight-g.top<100,j=g?{position:"fixed",top:f?"auto":g.top,bottom:f?"0":"auto",left:g.left,width:"unset",background:"none"}:{alignItems:"center",height:950,background:"linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 129.71%)"};return o.createPortal(e(c,Object.assign({zIndex:m,resetHeight:!0,style:j,relativePostion:!!g},{children:t(l,{children:[e("div",Object.assign({className:"cross-container",onClick:()=>y("close"),"aria-hidden":"true"},{children:e(i,{height:24,width:24,color:"#000000"})})),t("div","demo_store"==h?Object.assign({className:"demo-container"},{children:[e(r,Object.assign({color:n.background.negative.vibrant},{children:"Demo Store Limitations"})),e(a,{children:null!=u?u:"Apologies, but you are unable to save or take any actions as you are currently in the demo store."})]}):Object.assign({className:"content-layout"},{children:[e("div",Object.assign({className:"left-content"},{children:e("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"})})),t("div",Object.assign({className:"right-content"},{children:[e(r,{children:"Connect Shopify "}),e(a,Object.assign({style:{maxWidth:432}},{children:null!=b?b:"Connect Shopify to publish your bot on your Shopify store. Or, explore our demo store to see it in action."})),t("div",Object.assign({className:"cta-button-container"},{children:[e(s,{buttonText:"Connect shopify",buttonType:"primary",size:"small",onClick:()=>y("shopify")}),e(s,{buttonText:"View demo store",buttonType:"secondary",size:"small",onClick:()=>y("demo")})]}))]}))]}))]})})),document.body)};export{d as ShowShopifyRestrictedModal};

package/dist/esm/components/bik-layout/SidebarPopup.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Menu } from './SimpleSidebar';
+export interface SidebarPopupI {
+    menuList: Menu[];
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    top?: number;
+    onMouseLeaveOnMenu?: () => void;
+    onClickingPopupMenu: (menuSelected: Menu, reDirect?: boolean) => void;
+}
+export declare const SidebarPopup: React.FC<SidebarPopupI>;

package/dist/esm/components/bik-layout/SidebarPopup.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{TitleRegular as o,BodySecondary as t}from"../TypographyStyle.js";import{SidebarPopupContainer as i}from"./SidebarStyles.js";const r=r=>{const{top:s,menuList:l,zIndex:m,left:d,onMouseLeaveOnMenu:a,onClickingPopupMenu:u}=r;return e(i,{top:s,theme:"white",zIndex:m,left:null!=d?d:95,postion:"fixed",children:e("div",{id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:a,children:null==l?void 0:l.map((i,r)=>n("div",{className:"each-menu",style:{borderBottom:r==l.length-1?"none":void 0},onClick:()=>u(i),children:[e(o,{style:{fontSize:14},children:i.displayName}),e(t,{style:{fontSize:12},children:i.description})]},r))},"_sub-menu")})};export{r as SidebarPopup};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{TitleRegular as s,BodySecondary as t}from"../TypographyStyle.js";import{SidebarPopupContainer as i}from"./SidebarStyles.js";const o=o=>{const{top:r,menuList:l,zIndex:a,left:c,onMouseLeaveOnMenu:m,onClickingPopupMenu:d}=o;return e(i,Object.assign({top:r,theme:"white",zIndex:a,left:null!=c?c:95,postion:"fixed"},{children:e("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:m},{children:null==l?void 0:l.map(((i,o)=>n("div",Object.assign({className:"each-menu",style:{borderBottom:o==l.length-1?"none":void 0},onClick:()=>d(i)},{children:[e(s,Object.assign({style:{fontSize:14}},{children:i.displayName})),e(t,Object.assign({style:{fontSize:12}},{children:i.description}))]}),o)))}),"_sub-menu")}))};export{o as SidebarPopup};

package/dist/esm/components/bik-layout/SidebarSkeleton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SidebarTheme } from './SimpleSidebar';
+export interface BikSidebarShimmerProps {
+    theme: SidebarTheme;
+    width?: number;
+    zIndex?: number;
+    left?: number;
+}
+export declare const SidebarSkeleton: React.FC<BikSidebarShimmerProps>;

package/dist/esm/components/bik-layout/SidebarSkeleton.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{BikShimmer as r}from"../shimmer/ShimmerComponent/BikShimmer.js";import{SimpleSidebarContainer as i}from"./SidebarStyles.js";const t=t=>{const{width:m,zIndex:h,left:d,theme:n}=t;return e(i,{width:m,zIndex:h,left:d,theme:n,children:e("div",{className:"sidebar-right-menu",children:[...new Array(2)].map(()=>0).map(i=>e("div",{className:"sidebar-skeleton",children:e(r,{boxes:[{height:"24px",width:"100%"},{height:"24px",width:"100%"}],isBrand:"brand"===n})},i+"_"+Math.random()))})})};export{t as SidebarSkeleton};
+import{jsx as e}from"react/jsx-runtime";import{BikShimmer as i}from"../shimmer/ShimmerComponent/BikShimmer.js";import{SimpleSidebarContainer as t}from"./SidebarStyles.js";const r=r=>{const{width:m,zIndex:s,left:n,theme:a}=r;return e(t,Object.assign({width:m,zIndex:s,left:n,theme:a},{children:e("div",Object.assign({className:"sidebar-right-menu"},{children:[...new Array(2)].map((()=>0)).map((t=>e("div",Object.assign({className:"sidebar-skeleton"},{children:e(i,{boxes:[{height:"24px",width:"100%"},{height:"24px",width:"100%"}],isBrand:"brand"===a})}),t+"_"+Math.random())))}))}))};export{r as SidebarSkeleton};

package/dist/esm/components/bik-layout/SidebarStyles.d.ts

@@ -0,0 +1,21 @@
+import { SidebarTheme } from './SimpleSidebar';
+export declare const SideBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MainSideBarMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SibeBarMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SimpleSidebarContainer: import("styled-components").StyledComponent<"div", any, {
+    postion?: "fixed" | "sticky" | undefined;
+    top?: number | undefined;
+    theme: SidebarTheme;
+    width?: number | undefined;
+    zIndex?: number | undefined;
+    left?: number | undefined;
+    isNewSidebar?: boolean | undefined;
+}, never>;
+export declare const SidebarPopupContainer: import("styled-components").StyledComponent<"div", any, {
+    postion?: "fixed" | "sticky" | undefined;
+    top?: number | undefined;
+    theme: SidebarTheme;
+    zIndex?: number | undefined;
+    left?: number | undefined;
+    bottom?: number | undefined;
+}, never>;

package/dist/esm/components/bik-layout/SimpleSidebar.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export interface Menu {
+    key: string | number;
+    displayName: string;
+    description?: string;
+    path?: string;
+    page?: string;
+    isNew?: string;
+}
+export type SidebarTheme = 'brand' | 'white';
+export interface SimpleSidebarProps {
+    menuList: Menu[];
+    activeMenu: Menu;
+    theme: SidebarTheme;
+    showAccessUpgradePanel?: boolean;
+    header?: string;
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    postion?: 'fixed' | 'sticky';
+    top?: number;
+    router: any;
+    onMouseLeaveOnMenu?: () => void;
+    onMouseEnterOnMenu?: () => void;
+    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
+    onUpgrade?: () => void;
+    isNewSidebar?: boolean;
+}
+export declare const SimpleSidebar: React.FC<SimpleSidebarProps>;

package/dist/esm/components/bik-layout/SimpleSidebar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as n}from"react";import{COLORS as t}from"../../constants/Theme.js";import{Button as a}from"../button/Button.js";import{NavigationHyperlink as s}from"../navigation-hyperlink/NavigationHyperlink.js";import{BodySecondary as l,TitleSmall as r}from"../TypographyStyle.js";import{SimpleSidebarContainer as o}from"./SidebarStyles.js";const d=d=>{const{menuList:c,activeMenu:u,theme:m,showAccessUpgradePanel:p=!1,header:h,width:v,zIndex:b,left:y,postion:N,top:g,router:f,onMouseLeaveOnMenu:k,onMouseEnterOnMenu:w,onMenuClick:x,onUpgrade:M,isNewSidebar:j}=d,[S,T]=n(u),U=(n,t)=>i("div",{className:"sub-child-menu  "+((null==S?void 0:S.key)==(null==n?void 0:n.key)?"sub-child-active-menu":""),onClick:()=>{T(n),x(n,!n.page)},"aria-hidden":"true",children:[e("span",{className:(null==S?void 0:S.key)==(null==n?void 0:n.key)&&"brand"==m?"sub-child-active-text":""}),e(l,{className:"sub-child-text "+((null==S?void 0:S.key)==(null==n?void 0:n.key)&&"white"==m?"active-bold-weight":""),children:null==n?void 0:n.displayName}),n.isNew&&e("div",{className:"sub-child-new-tag",children:"NEW"})]},t);return e(o,{width:v,zIndex:b,left:y,theme:m,postion:N,top:g,isNewSidebar:j,children:i("div",{id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:k,onMouseEnter:w,children:[i("div",{children:[!j&&e(l,{className:"sub-child-display-name",children:h}),null==c?void 0:c.map((i,n)=>i.page?e(s,{href:i.page,router:f,children:U(i,n)}):U(i,n))]}),p&&i("div",{className:"lower-sticky-panel",children:[e(r,{className:"title-text",style:{color:t.surface.standard},children:"Upgrade plan to access this feature."}),e(a,{className:"upgrade-button",buttonText:"Upgrade plan",buttonType:"primary",size:"small",inverse:!0,onClick:()=>M?M():""})]})]},"_sub-menu")})};export{d as SimpleSidebar};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as s}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as t}from"../button/Button.js";import{NavigationHyperlink as a}from"../navigation-hyperlink/NavigationHyperlink.js";import{BodySecondary as l,TitleSmall as r}from"../TypographyStyle.js";import{SimpleSidebarContainer as o}from"./SidebarStyles.js";const c=c=>{const{menuList:d,activeMenu:u,theme:m,showAccessUpgradePanel:p=!1,header:h,width:b,zIndex:g,left:v,postion:y,top:j,router:N,onMouseLeaveOnMenu:f,onMouseEnterOnMenu:k,onMenuClick:O,onUpgrade:w,isNewSidebar:x}=c,[M,S]=s(u),T=(s,n)=>i("div",Object.assign({className:"sub-child-menu  "+((null==M?void 0:M.key)==(null==s?void 0:s.key)?"sub-child-active-menu":""),onClick:()=>{S(s),O(s,!s.page)},"aria-hidden":"true"},{children:[e("span",{className:(null==M?void 0:M.key)==(null==s?void 0:s.key)&&"brand"==m?"sub-child-active-text":""}),e(l,Object.assign({className:"sub-child-text "+((null==M?void 0:M.key)==(null==s?void 0:s.key)&&"white"==m?"active-bold-weight":"")},{children:null==s?void 0:s.displayName})),s.isNew&&e("div",Object.assign({className:"sub-child-new-tag"},{children:"NEW"}))]}),n);return e(o,Object.assign({width:b,zIndex:g,left:v,theme:m,postion:y,top:j,isNewSidebar:x},{children:i("div",Object.assign({id:"_sub-menu",className:"sidebar-right-menu transform-class",onMouseLeave:f,onMouseEnter:k},{children:[i("div",{children:[!x&&e(l,Object.assign({className:"sub-child-display-name"},{children:h})),null==d?void 0:d.map(((i,s)=>i.page?e(a,Object.assign({href:i.page,router:N},{children:T(i,s)})):T(i,s)))]}),p&&i("div",Object.assign({className:"lower-sticky-panel"},{children:[e(r,Object.assign({className:"title-text",style:{color:n.surface.standard}},{children:"Upgrade plan to access this feature."})),e(t,{className:"upgrade-button",buttonText:"Upgrade plan",buttonType:"primary",size:"small",inverse:!0,onClick:()=>w?w():""})]}))]}),"_sub-menu")}))};export{c as SimpleSidebar};

package/dist/esm/components/bik-layout/index.d.ts

@@ -0,0 +1,9 @@
+export * from './BikHeader';
+export * from './BikLayout';
+export * from './BikProfile';
+export * from './SimpleSidebar';
+export * from './BikSidebar';
+export * from './FeatureModal';
+export * from './SidebarSkeleton';
+export * from './ShowShopifyRestrictedModal';
+export * from './FeatureModalV2';

package/dist/esm/components/button/Button.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ButtonProps } from './model';
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as o,Fragment as n}from"react/jsx-runtime";import i,{forwardRef as r,useCallback as a}from"react";import{Spinner as s}from"../spinner/Spinner.js";import{Button as c,ButtonCustomDashedBorder as l}from"./Button.styled.js";import{getButtonIconColor as d,SpinnerColorMap as m,GetButtonTextComponent as u}from"./themes.js";const b=r((r,b)=>{var{version:h,id:p,buttonType:v="primary",size:g="small",buttonText:y,disabled:C,IconComponent:I,LeadingIcon:x,TrailingIcon:N,isLoading:z,inverse:T,onClick:f,matchParentWidth:j,subtitle:k,darkMode:L,activated:S,error:W,buttonTextColor:B,buttonFontSize:E,customIconColor:M,buttonColor:P,LeadingIconStyles:F}=r,O=t(r,["version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles"]);const _=u(g,v,C),w=d(g,v,T,C,z,L),q=a(()=>{const t="chip"===g?16:20;return{height:t,width:t,color:M||w,style:{display:"block"},className:"icon"}},[g,M,w]);return e(c,Object.assign({"data-test":O["data-test"],version:h,onClick:z?()=>{}:f,ref:b,id:p,disabled:C,size:g,buttonType:v,isLoading:z,inverse:T,matchParentWidth:j,darkMode:L,activated:S,error:W,buttonColor:P},O,{children:o("div",{className:"button-container",children:[v.startsWith("dash")&&e(l,{}),e("div",{className:"overlay-container",children:z&&e(s,{className:"spinner",size:"small",color:m(v,T)})}),I&&e("div",{className:"icon-component",children:i.createElement(I,q())}),x&&e("div",{className:"icon-leading",style:Object.assign({zIndex:1},F),children:i.createElement(x,q())}),y?o(_,{className:"text",style:{color:B,fontSize:E},children:[y,e("div",{className:"text-subtitle",children:k})]}):e(n,{}),N&&e("div",{className:"icon-trailing",style:{zIndex:1},children:i.createElement(N,q())})]})}))});b.displayName="Button";export{b as Button};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as n,Fragment as i}from"react/jsx-runtime";import o,{forwardRef as s,useCallback as a}from"react";import{Spinner as r}from"../spinner/Spinner.js";import{Button as c,ButtonCustomDashedBorder as l}from"./Button.styled.js";import{getButtonIconColor as d,SpinnerColorMap as m,GetButtonTextComponent as b}from"./themes.js";const u=s(((s,u)=>{var{version:g,id:h,buttonType:p="primary",size:v="small",buttonText:j,disabled:y,IconComponent:C,LeadingIcon:I,TrailingIcon:x,isLoading:N,inverse:z,onClick:O,matchParentWidth:T,subtitle:f,darkMode:k,activated:L,error:S,buttonTextColor:W,buttonFontSize:B,customIconColor:E,buttonColor:M,LeadingIconStyles:P}=s,F=t(s,["version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles"]);const _=b(v,p,y),w=d(v,p,z,y,N,k),q=a((()=>{const t="chip"===v?16:20;return{height:t,width:t,color:E||w,style:{display:"block"},className:"icon"}}),[v,E,w]);return e(c,Object.assign({"data-test":F["data-test"],version:g,onClick:N?()=>{}:O,ref:u,id:h,disabled:y,size:v,buttonType:p,isLoading:N,inverse:z,matchParentWidth:T,darkMode:k,activated:L,error:S,buttonColor:M},F,{children:n("div",Object.assign({className:"button-container"},{children:[p.startsWith("dash")&&e(l,{}),e("div",Object.assign({className:"overlay-container"},{children:N&&e(r,{className:"spinner",size:"small",color:m(p,z)})})),C&&e("div",Object.assign({className:"icon-component"},{children:o.createElement(C,q())})),I&&e("div",Object.assign({className:"icon-leading",style:Object.assign({zIndex:1},P)},{children:o.createElement(I,q())})),j?n(_,Object.assign({className:"text",style:{color:W,fontSize:B}},{children:[j,e("div",Object.assign({className:"text-subtitle"},{children:f}))]})):e(i,{}),x&&e("div",Object.assign({className:"icon-trailing",style:{zIndex:1}},{children:o.createElement(x,q())}))]}))}))}));u.displayName="Button";export{u as Button};

package/dist/esm/components/button/Button.styled.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { Size, Type } from './model';
+export declare const Button: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    size: Size;
+    buttonType: Type;
+    isLoading?: boolean | undefined;
+    inverse?: boolean | undefined;
+    disabled?: boolean | undefined;
+    matchParentWidth?: boolean | undefined;
+    version?: "1.0" | "2.0" | undefined;
+    darkMode?: boolean | undefined;
+    activated?: boolean | undefined;
+    error?: boolean | undefined;
+    buttonColor?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const ButtonCustomDashedBorder: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,61 +1 @@
-import{jsxs as t,Fragment as n,jsx as e}from"react/jsx-runtime";import o from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{getBackgroundColor as r,getPadding as a,getBorder as s,getColor as p,getDashedBorderStyling as d,getClickEffect as l,generateDisabledStyling as c,getDisabledTextColor as b,getHoverButtonBackgroundCustom as u,getHoverButtonBackground as h,getHoverButtonTextDecorationStyle as y,generateInverseHoverBackground as $,getLoadingBorder as v,getLoadingButtonBackgroundCustom as g,getLoadingBackground as x}from"./themes.js";const m=o.button`
-	all: unset;
-	cursor: pointer;
-	display: flex;
-	gap: 8.83px;
-	border-radius: ${t=>"text"==t.buttonType?"0":"4px"};
-	overflow: hidden;
-	${t=>t.matchParentWidth?"flex-grow: 1;":""}
-	background-color: ${t=>r(t.buttonType,t.size,t.inverse,t.darkMode,t.buttonColor)};
-
-	${t=>{var n;return t.buttonType.startsWith("dash")?`.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${t.matchParentWidth?"justify-content: center;":""}\n\t\t\t\t\tpadding: ${a(t.buttonType,t.size)};\n\t\t\t\t}`:`padding: ${a(t.buttonType,t.size)};\n\t${s(null!==(n=t.version)&&void 0!==n?n:"1.0",t.buttonType,t.size,t.inverse,t.error)}`}}
-
-	.icon-component {
-		height: ${t=>"chip"===t.size?"16px":"20px"};
-		width: ${t=>"chip"===t.size?"16px":"20px"};
-	}
-
-	.icon-trailing {
-		height: ${t=>"chip"===t.size?"16px":"20px"};
-		width: ${t=>"chip"===t.size?"16px":"20px"};
-	}
-
-	.text {
-		color: ${t=>p(t.buttonType,t.size,t.inverse,t.darkMode)};
-	}
-
-	.icon-leading {
-		height: ${t=>"chip"===t.size?"16px":"20px"};
-		width: ${t=>"chip"===t.size?"16px":"20px"};
-	}
-
-	${t=>d(t.buttonType,t.size,t.isLoading?i.stroke.brandLightAlt:t.error?i.stroke.negative.vibrant:void 0)}
-
-	.overlay-container {
-		display: none;
-	}
-
-	${t=>!t.disabled&&!t.isLoading&&t.activated&&("dashBold"==t.buttonType||"dashRegular"==t.buttonType)&&`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${t.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: ${i.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${i.background.brand};\n\t\t}\n\t\t\n\t}\n\t${l(t.buttonType,t.size,t.inverse)}\n\t${d(t.buttonType,t.size,i.content.brand)}\n\t`}
-
-	:disabled {
-		.overlay-container {
-			display: none !important;
-		}
-		cursor: ${t=>"text"===t.buttonType?"auto":"not-allowed"};
-		${t=>c(t.buttonType,t.size,t.inverse)}
-		.text {
-			color: ${t=>b(t.inverse)} !important;
-		}
-		${t=>d(t.buttonType,t.size,i.stroke.primary)}
-	}
-
-	${t=>!t.disabled&&!t.isLoading&&`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${t.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${"chip"===t.size&&`.text {\n\t\t\t\t\t\tcolor: ${i.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${i.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t}\n\n\n\t\t\t${l(t.buttonType,t.size,t.inverse)}\n\t\t\t${d(t.buttonType,t.size,i.content.brand)}\n\t\t}`}
-
-	${t=>t.isLoading?`\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${v(t.buttonType,t.size,t.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${t.buttonColor?`background-color: ${g(t.buttonColor,15)};`:""}\n\t\t\tpadding: ${a(t.buttonType,t.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${x(t.buttonType,t.size,t.inverse,t.buttonColor)}\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}`:`:not(:active):not(:disabled):hover {\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${t.matchParentWidth?"justify-content: center;":""}\n\t\t\t\tpadding: ${a(t.buttonType,t.size)};\n\t\t\t\t{${t.buttonColor?`background-color: ${u(t.buttonColor,15)}`:""}}\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${h(t.buttonType,t.inverse)}\n\t\t\t\t}\n\t\t\t\t${"chip"===t.size&&"text"!==t.buttonType?t.darkMode?`background-color: ${i.stroke.primary};`:`background-color: ${i.surface.hovered};`:""}\n\t\t\t\t${"primary"!==t.buttonType||"chip"===t.size||t.inverse||t.buttonColor?"":`background-color: ${i.background.inverse};`}\n\t\t\t}\n\t\t\t${"text"===t.buttonType?y(t.buttonType,t.disabled):""}\n\t\t\t${t.inverse?$(t.buttonType,t.disabled):""}\n\t\t}`}
-
-		.button-container {
-		display: flex;
-		gap: 8.33px;
-		${t=>t.matchParentWidth?"margin: auto;":""}
-	}
-`,T=()=>t(n,{children:[e("div",{className:"line-top"}),e("div",{className:"line-left"}),e("div",{className:"line-bottom"}),e("div",{className:"line-right"})]});export{m as Button,T as ButtonCustomDashedBorder};
+import t from"@emotion/styled/base";import{jsxs as c,Fragment as d,jsx as n}from"react/jsx-runtime";import{COLORS as b}from"../../constants/Theme.js";import{getBackgroundColor as l,getPadding as X,getBorder as H,getColor as i,getDashedBorderStyling as G,getClickEffect as R,generateDisabledStyling as x,getDisabledTextColor as e,getHoverButtonBackgroundCustom as o,getHoverButtonBackground as g,getHoverButtonTextDecorationStyle as y,generateInverseHoverBackground as I,getLoadingBorder as m,getLoadingButtonBackgroundCustom as u,getLoadingBackground as a}from"./themes.js";const p=t("button","production"===process.env.NODE_ENV?{target:"exlualr0"}:{target:"exlualr0",label:"Button"})("all:unset;cursor:pointer;display:flex;gap:8.83px;border-radius:",(t=>"text"==t.buttonType?"0":"4px"),";overflow:hidden;",(t=>t.matchParentWidth?"flex-grow: 1;":"")," background-color:",(t=>l(t.buttonType,t.size,t.inverse,t.darkMode,t.buttonColor)),";",(t=>{var c;return t.buttonType.startsWith("dash")?`.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${t.matchParentWidth?"justify-content: center;":""}\n\t\t\t\t\tpadding: ${X(t.buttonType,t.size)};\n\t\t\t\t}`:`padding: ${X(t.buttonType,t.size)};\n\t${H(null!==(c=t.version)&&void 0!==c?c:"1.0",t.buttonType,t.size,t.inverse,t.error)}`})," .icon-component{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}.icon-trailing{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}.text{color:",(t=>i(t.buttonType,t.size,t.inverse,t.darkMode)),";}.icon-leading{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}",(t=>G(t.buttonType,t.size,t.isLoading?b.stroke.brandLightAlt:t.error?b.stroke.negative.vibrant:void 0))," .overlay-container{display:none;}",(t=>!t.disabled&&!t.isLoading&&t.activated&&("dashBold"==t.buttonType||"dashRegular"==t.buttonType)&&`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${t.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: ${b.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${b.background.brand};\n\t\t}\n\t\t\n\t}\n\t${R(t.buttonType,t.size,t.inverse)}\n\t${G(t.buttonType,t.size,b.content.brand)}\n\t`)," :disabled{cursor:",(t=>"text"===t.buttonType?"auto":"not-allowed"),";",(t=>G(t.buttonType,t.size,b.stroke.primary)),";.overlay-container{display:none!important;}",(t=>x(t.buttonType,t.size,t.inverse))," .text{color:",(t=>e(t.inverse)),"!important;}}",(t=>!t.disabled&&!t.isLoading&&`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${t.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${"chip"===t.size&&`.text {\n\t\t\t\t\t\tcolor: ${b.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${b.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t}\n\n\n\t\t\t${R(t.buttonType,t.size,t.inverse)}\n\t\t\t${G(t.buttonType,t.size,b.content.brand)}\n\t\t}`)," ",(t=>t.isLoading?`\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${m(t.buttonType,t.size,t.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${t.buttonColor?`background-color: ${u(t.buttonColor,15)};`:""}\n\t\t\tpadding: ${X(t.buttonType,t.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${a(t.buttonType,t.size,t.inverse,t.buttonColor)}\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}`:`: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${t.matchParentWidth?"justify-content: center;":""}\n\t\t\t\tpadding: ${X(t.buttonType,t.size)};\n\t\t\t\t{${t.buttonColor?`background-color: ${o(t.buttonColor,15)}`:""}}\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${g(t.buttonType,t.inverse)}\n\t\t\t\t}\n\t\t\t\t${"chip"===t.size&&"text"!==t.buttonType?t.darkMode?`background-color: ${b.stroke.primary};`:`background-color: ${b.surface.hovered};`:""}\n\t\t\t\t${"primary"!==t.buttonType||"chip"===t.size||t.inverse||t.buttonColor?"":`background-color: ${b.background.inverse};`}\n\t\t\t}\n\t\t\t${"text"===t.buttonType?y(t.buttonType,t.disabled):""}\n\t\t\t${t.inverse?I(t.buttonType,t.disabled):""}\n\t\t}`)," .button-container{display:flex;gap:8.33px;",(t=>t.matchParentWidth?"margin: auto;":""),";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvQyIsImZpbGUiOiJCdXR0b24uc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4LCBGcmFnbWVudCBhcyBfRnJhZ21lbnQsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmltcG9ydCB7IGdlbmVyYXRlRGlzYWJsZWRTdHlsaW5nLCBnZW5lcmF0ZUludmVyc2VIb3ZlckJhY2tncm91bmQsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0Qm9yZGVyLCBnZXRDbGlja0VmZmVjdCwgZ2V0Q29sb3IsIGdldERhc2hlZEJvcmRlclN0eWxpbmcsIGdldERpc2FibGVkVGV4dENvbG9yLCBnZXRIb3ZlckJ1dHRvbkJhY2tncm91bmQsIGdldEhvdmVyQnV0dG9uQmFja2dyb3VuZEN1c3RvbSwgZ2V0SG92ZXJCdXR0b25UZXh0RGVjb3JhdGlvblN0eWxlLCBnZXRMb2FkaW5nQmFja2dyb3VuZCwgZ2V0TG9hZGluZ0JvcmRlciwgZ2V0TG9hZGluZ0J1dHRvbkJhY2tncm91bmRDdXN0b20sIGdldFBhZGRpbmcsIH0gZnJvbSAnLi90aGVtZXMnO1xyXG5leHBvcnQgY29uc3QgQnV0dG9uID0gc3R5bGVkLmJ1dHRvbiBgXG5cdGFsbDogdW5zZXQ7XG5cdGN1cnNvcjogcG9pbnRlcjtcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiA4LjgzcHg7XG5cdGJvcmRlci1yYWRpdXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYnV0dG9uVHlwZSA9PSAndGV4dCcgPyAnMCcgOiAnNHB4Jyl9O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHQkeyhwcm9wcykgPT4gKHByb3BzLm1hdGNoUGFyZW50V2lkdGggPyBgZmxleC1ncm93OiAxO2AgOiAnJyl9XG5cdGJhY2tncm91bmQtY29sb3I6ICR7KHByb3BzKSA9PiBnZXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSwgcHJvcHMuZGFya01vZGUsIHByb3BzLmJ1dHRvbkNvbG9yKX07XG5cblx0JHsocHJvcHMpID0+IHtcclxuICAgIHZhciBfYTtcclxuICAgIHJldHVybiBwcm9wcy5idXR0b25UeXBlLnN0YXJ0c1dpdGgoJ2Rhc2gnKVxyXG4gICAgICAgID8gYC5idXR0b24tY29udGFpbmVyIHtcblx0XHRcdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0XHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRcdFx0XHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdFx0XHRcdFx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0XHRcdFx0XHQke3Byb3BzLm1hdGNoUGFyZW50V2lkdGggPyAnanVzdGlmeS1jb250ZW50OiBjZW50ZXI7JyA6ICcnfVxuXHRcdFx0XHRcdHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplKX07XG5cdFx0XHRcdH1gXHJcbiAgICAgICAgOiBgcGFkZGluZzogJHtnZXRQYWRkaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUpfTtcblx0JHtnZXRCb3JkZXIoKF9hID0gcHJvcHMudmVyc2lvbikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJzEuMCcsIHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UsIHByb3BzLmVycm9yKX1gO1xyXG59fVxuXG5cdC5pY29uLWNvbXBvbmVudCB7XG5cdFx0aGVpZ2h0OiAkeyhwcm9wcykgPT4gKHByb3BzLnNpemUgPT09ICdjaGlwJyA/ICcxNnB4JyA6ICcyMHB4Jyl9O1xuXHRcdHdpZHRoOiAkeyhwcm9wcykgPT4gKHByb3BzLnNpemUgPT09ICdjaGlwJyA/ICcxNnB4JyA6ICcyMHB4Jyl9O1xuXHR9XG5cblx0Lmljb24tdHJhaWxpbmcge1xuXHRcdGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5zaXplID09PSAnY2hpcCcgPyAnMTZweCcgOiAnMjBweCcpfTtcblx0XHR3aWR0aDogJHsocHJvcHMpID0+IChwcm9wcy5zaXplID09PSAnY2hpcCcgPyAnMTZweCcgOiAnMjBweCcpfTtcblx0fVxuXG5cdC50ZXh0IHtcblx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldENvbG9yKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UsIHByb3BzLmRhcmtNb2RlKX07XG5cdH1cblxuXHQuaWNvbi1sZWFkaW5nIHtcblx0XHRoZWlnaHQ6ICR7KHByb3BzKSA9PiAocHJvcHMuc2l6ZSA9PT0gJ2NoaXAnID8gJzE2cHgnIDogJzIwcHgnKX07XG5cdFx0d2lkdGg6ICR7KHByb3BzKSA9PiAocHJvcHMuc2l6ZSA9PT0gJ2NoaXAnID8gJzE2cHgnIDogJzIwcHgnKX07XG5cdH1cblxuXHQkeyhwcm9wcykgPT4gZ2V0RGFzaGVkQm9yZGVyU3R5bGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplLCBwcm9wcy5pc0xvYWRpbmdcclxuICAgID8gQ09MT1JTLnN0cm9rZS5icmFuZExpZ2h0QWx0XHJcbiAgICA6IHByb3BzLmVycm9yXHJcbiAgICAgICAgPyBDT0xPUlMuc3Ryb2tlLm5lZ2F0aXZlLnZpYnJhbnRcclxuICAgICAgICA6IHVuZGVmaW5lZCl9XG5cblx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBub25lO1xuXHR9XG5cblx0JHsocHJvcHMpID0+ICFwcm9wcy5kaXNhYmxlZCAmJlxyXG4gICAgIXByb3BzLmlzTG9hZGluZyAmJlxyXG4gICAgcHJvcHMuYWN0aXZhdGVkICYmXHJcbiAgICAocHJvcHMuYnV0dG9uVHlwZSA9PSAnZGFzaEJvbGQnIHx8IHByb3BzLmJ1dHRvblR5cGUgPT0gJ2Rhc2hSZWd1bGFyJykgJiZcclxuICAgIGBcblx0LmJ1dHRvbi1jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0JHtwcm9wcy5tYXRjaFBhcmVudFdpZHRoID8gJ2p1c3RpZnktY29udGVudDogY2VudGVyOycgOiAnJ31cblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdFx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRcdGRpc3BsYXk6IG5vbmUgIWltcG9ydGFudDtcblx0XHR9XG5cdFx0JHtgLnRleHQge1xuXHRcdFx0Y29sb3I6ICR7Q09MT1JTLmNvbnRlbnQuYnJhbmR9ICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHRcdC5pY29uIHtcblx0XHRcdGNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmJyYW5kfTtcblx0XHR9XG5cdFx0YH1cblx0fVxuXHQke2dldENsaWNrRWZmZWN0KHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXHQke2dldERhc2hlZEJvcmRlclN0eWxpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgQ09MT1JTLmNvbnRlbnQuYnJhbmQpfVxuXHRgfVxuXG5cdDpkaXNhYmxlZCB7XG5cdFx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRcdGRpc3BsYXk6IG5vbmUgIWltcG9ydGFudDtcblx0XHR9XG5cdFx0Y3Vyc29yOiAkeyhwcm9wcykgPT4gcHJvcHMuYnV0dG9uVHlwZSA9PT0gJ3RleHQnID8gJ2F1dG8nIDogJ25vdC1hbGxvd2VkJ307XG5cdFx0JHsocHJvcHMpID0+IGdlbmVyYXRlRGlzYWJsZWRTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0RGlzYWJsZWRUZXh0Q29sb3IocHJvcHMuaW52ZXJzZSl9ICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHRcdCR7KHByb3BzKSA9PiBnZXREYXNoZWRCb3JkZXJTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIENPTE9SUy5zdHJva2UucHJpbWFyeSl9XG5cdH1cblxuXHQkeyhwcm9wcykgPT4gIXByb3BzLmRpc2FibGVkICYmXHJcbiAgICAhcHJvcHMuaXNMb2FkaW5nICYmXHJcbiAgICBgOmFjdGl2ZSB7XG5cdFx0XHRcdC5idXR0b24tY29udGFpbmVyIHtcblx0XHRcdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0XHRcdCR7cHJvcHMubWF0Y2hQYXJlbnRXaWR0aCA/ICdqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsnIDogJyd9XG5cdFx0XHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdFx0XHRkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHRcdCR7cHJvcHMuc2l6ZSA9PT0gJ2NoaXAnICYmXHJcbiAgICAgICAgYC50ZXh0IHtcblx0XHRcdFx0XHRcdGNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmludmVyc2VMaWdodH0gIWltcG9ydGFudDtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0Lmljb24ge1xuXHRcdFx0XHRcdFx0Y29sb3I6ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZUxpZ2h0fTtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0YH1cblx0XHRcdFx0fVxuXG5cblx0XHRcdCR7Z2V0Q2xpY2tFZmZlY3QocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSl9XG5cdFx0XHQke2dldERhc2hlZEJvcmRlclN0eWxpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgQ09MT1JTLmNvbnRlbnQuYnJhbmQpfVxuXHRcdH1gfVxuXG5cdCR7KHByb3BzKSA9PiBcclxuLy8gZG8gbm90IGxvYWQgaG92ZXIgc3R5bGVzIGZvciBsb2FkaW5nIHN0YXRlIGFuZCBhbHNvIGFjdGl2ZSBzdGF0ZVxyXG4hcHJvcHMuaXNMb2FkaW5nXHJcbiAgICA/IGA6bm90KDphY3RpdmUpOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHtcblx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHQuYnV0dG9uLWNvbnRhaW5lciB7XG5cdFx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdCR7cHJvcHMubWF0Y2hQYXJlbnRXaWR0aCA/ICdqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsnIDogJyd9XG5cdFx0XHRcdHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplKX07XG5cdFx0XHRcdHske3Byb3BzLmJ1dHRvbkNvbG9yXHJcbiAgICAgICAgPyBgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRIb3ZlckJ1dHRvbkJhY2tncm91bmRDdXN0b20ocHJvcHMuYnV0dG9uQ29sb3IsIDE1KX1gXHJcbiAgICAgICAgOiAnJ319XG5cdFx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0XHRcdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdFx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHRcdFx0dG9wOiAwO1xuXHRcdFx0XHRcdGxlZnQ6IDA7XG5cdFx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdFx0aGVpZ2h0OiAxMDAlO1xuXHRcdFx0XHRcdCR7Z2V0SG92ZXJCdXR0b25CYWNrZ3JvdW5kKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLmludmVyc2UpfVxuXHRcdFx0XHR9XG5cdFx0XHRcdCR7cHJvcHMuc2l6ZSA9PT0gJ2NoaXAnICYmIHByb3BzLmJ1dHRvblR5cGUgIT09ICd0ZXh0J1xyXG4gICAgICAgID8gcHJvcHMuZGFya01vZGVcclxuICAgICAgICAgICAgPyBgYmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuc3Ryb2tlLnByaW1hcnl9O2BcclxuICAgICAgICAgICAgOiBgYmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuc3VyZmFjZS5ob3ZlcmVkfTtgXHJcbiAgICAgICAgOiAnJ31cblx0XHRcdFx0JHtwcm9wcy5idXR0b25UeXBlID09PSAncHJpbWFyeScgJiZcclxuICAgICAgICBwcm9wcy5zaXplICE9PSAnY2hpcCcgJiZcclxuICAgICAgICAhcHJvcHMuaW52ZXJzZSAmJlxyXG4gICAgICAgICFwcm9wcy5idXR0b25Db2xvclxyXG4gICAgICAgID8gYGJhY2tncm91bmQtY29sb3I6ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZX07YFxyXG4gICAgICAgIDogJyd9XG5cdFx0XHR9XG5cdFx0XHQke3Byb3BzLmJ1dHRvblR5cGUgPT09ICd0ZXh0J1xyXG4gICAgICAgID8gZ2V0SG92ZXJCdXR0b25UZXh0RGVjb3JhdGlvblN0eWxlKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLmRpc2FibGVkKVxyXG4gICAgICAgIDogJyd9XG5cdFx0XHQke3Byb3BzLmludmVyc2VcclxuICAgICAgICA/IGdlbmVyYXRlSW52ZXJzZUhvdmVyQmFja2dyb3VuZChwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5kaXNhYmxlZClcclxuICAgICAgICA6ICcnfVxuXHRcdH1gXHJcbiAgICA6IGBcblx0XHRcdGN1cnNvcjogbm90LWFsbG93ZWQ7XG5cdFx0XHRwYWRkaW5nOiAwO1xuXHRcdCR7Z2V0TG9hZGluZ0JvcmRlcihwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplLCBwcm9wcy5pbnZlcnNlKX1cblxuXHRcdC5idXR0b24tY29udGFpbmVyIHtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0XHR3aWR0aDogMTAwJTtcblx0XHRcdC50ZXh0IHtcblx0XHRcdFx0b3BhY2l0eTogMDtcblx0XHRcdH1cblx0XHRcdCR7cHJvcHMuYnV0dG9uQ29sb3JcclxuICAgICAgICA/IGBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldExvYWRpbmdCdXR0b25CYWNrZ3JvdW5kQ3VzdG9tKHByb3BzLmJ1dHRvbkNvbG9yLCAxNSl9O2BcclxuICAgICAgICA6ICcnfVxuXHRcdFx0cGFkZGluZzogJHtnZXRQYWRkaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUpfTtcblx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHRcdHBhZGRpbmctdG9wOiAxcHg7XG5cdFx0XHRcdHRvcDogMDtcblx0XHRcdFx0bGVmdDogMDtcblx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdGhlaWdodDogMTAwJTtcblx0XHRcdFx0JHtnZXRMb2FkaW5nQmFja2dyb3VuZChwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplLCBwcm9wcy5pbnZlcnNlLCBwcm9wcy5idXR0b25Db2xvcil9XG5cdFx0XHRcdC5zcGlubmVyIHtcblx0XHRcdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHRcdFx0dG9wOiBjYWxjKDUwJSAtIDE0cHgpO1xuXHRcdFx0XHRcdGxlZnQ6IGNhbGMoNTAlIC0gN3B4KTtcblx0XHRcdFx0fVxuXG5cdFx0XHR9XG5cdFx0fWB9XG5cblx0XHQuYnV0dG9uLWNvbnRhaW5lciB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRnYXA6IDguMzNweDtcblx0XHQkeyhwcm9wcykgPT4gKHByb3BzLm1hdGNoUGFyZW50V2lkdGggPyAnbWFyZ2luOiBhdXRvOycgOiAnJyl9XG5cdH1cbmA7XHJcbmV4cG9ydCBjb25zdCBCdXR0b25DdXN0b21EYXNoZWRCb3JkZXIgPSAoKSA9PiB7XHJcbiAgICByZXR1cm4gKF9qc3hzKF9GcmFnbWVudCwgeyBjaGlsZHJlbjogW19qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IFwibGluZS10b3BcIiB9KSwgX2pzeChcImRpdlwiLCB7IGNsYXNzTmFtZTogXCJsaW5lLWxlZnRcIiB9KSwgX2pzeChcImRpdlwiLCB7IGNsYXNzTmFtZTogXCJsaW5lLWJvdHRvbVwiIH0pLCBfanN4KFwiZGl2XCIsIHsgY2xhc3NOYW1lOiBcImxpbmUtcmlnaHRcIiB9KV0gfSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1CdXR0b24uc3R5bGVkLmpzLm1hcCJdfQ== */")),Z=()=>c(d,{children:[n("div",{className:"line-top"}),n("div",{className:"line-left"}),n("div",{className:"line-bottom"}),n("div",{className:"line-right"})]});export{p as Button,Z as ButtonCustomDashedBorder};

package/dist/esm/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/esm/components/button/model.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+export type Size = 'chip' | 'small' | 'medium' | 'large';
+export type Type = 'primary' | 'secondary' | 'tertiary' | 'tertiaryGray' | 'destructive' | 'dashBold' | 'dashRegular' | 'text' | 'ai';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    'data-test'?: string;
+    /**
+     * Font fize of the text
+     * @default default 'small'
+     */
+    size?: Size;
+    /**
+     * Text to render inside the button
+     * @default ''
+     */
+    buttonText?: string;
+    /**
+     * Whether the button is pressable or not
+     * @default true
+     */
+    disabled?: boolean;
+    /**
+     * Type of the button
+     * @default 'primary'
+     */
+    buttonType?: Type;
+    /**
+     * The icon component that needs to be render, if text also exists, this would be Trailing component
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    IconComponent?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * The icon component that is to the right of the buttonText
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * Custom styles to be applied to the LeadingIcon
+     * @default undefined
+     */
+    LeadingIconStyles?: React.CSSProperties;
+    /**
+     * The icon component that is the left of the buttonText
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * the button container styling that needs to be override the default one
+     * @default null
+     */
+    style?: React.CSSProperties;
+    /**
+     * Indicates if button is loading and a loading indicator should be shown.
+     * When the button is loading the width of the button should not change.
+     */
+    isLoading?: boolean;
+    /**
+     * Indicates if the styling of the button should be inverse
+     */
+    inverse?: boolean;
+    /**
+     * Will take the width of the parent.
+     * @default false
+     */
+    matchParentWidth?: boolean;
+    subtitle?: string;
+    version?: '1.0' | '2.0';
+    darkMode?: boolean;
+    activated?: boolean;
+    error?: boolean;
+    buttonTextColor?: string;
+    customIconColor?: string;
+    buttonColor?: string;
+    buttonFontSize?: number;
+}

package/dist/esm/components/button/themes.d.ts

@@ -0,0 +1,52 @@
+import { Size, Type } from './model';
+export declare const getBackgroundColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean, buttonColor?: string) => string;
+export declare const getColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean) => string;
+export declare const getDisabledTextColor: (inverse?: boolean) => string;
+export declare const getPadding: (type: Type, size: Size) => "0px" | "4px 8px" | "6px 4px" | "6px 12px" | "10px 4px" | "10px 12px" | "14px 4px" | "14px 12px" | undefined;
+export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?: boolean) => import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
+export declare const getBorder: (version: '1.0' | '2.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
+export declare const getLinearGradientValue: (size: Size) => string;
+/**
+ * Adjusts the brightness of a given hex color by a specified percentage.
+ * Below function is used to generate a hover effect for button backgrounds.
+ *
+ * @param {string} color - The hex color code to be adjusted (e.g., "#ff0000").
+ * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.
+ * @returns {string} - The adjusted hex color code.
+ *
+ * @example
+ * // Darken the color #ff0000 (red) by 10%
+ * const darkerRed = getHoverButtonBackgroundCustom("#ff0000", 10);
+ * console.log(darkerRed); // Output might be "#e60000"
+ */
+export declare const getHoverButtonBackgroundCustom: (color: string, percent: number) => string;
+/**
+ * Generates a new color by adjusting the brightness of the given color by a specified percentage.
+ *
+ * @param color - The original color in hexadecimal format (e.g., "#RRGGBB").
+ * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.
+ * @returns The new color in hexadecimal format after adjusting the brightness.
+ *
+ * @example
+ * // Lighten the color by 20%
+ * const newColor = getLoadingButtonBackgroundCustom("#ff0000", 20); // "#ff3333"
+ *
+ * @example
+ * // Darken the color by 10%
+ * const newColor = getLoadingButtonBackgroundCustom("#00ff00", -10); // "#00e600"
+ */
+export declare const getLoadingButtonBackgroundCustom: (color: string, percent: number) => string;
+export declare const getHoverButtonBackground: (type: Type, inverse?: boolean) => string;
+export declare const getHoverButtonTextDecorationStyle: (type: Type, disabled?: boolean) => string;
+export declare const generateInverseHoverBackground: (type: Type, disabled?: boolean) => string;
+export declare const generateDisabledStyling: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const getDashedBorderStyling: (type: Type, size: Size, borderColor?: string) => string;
+export declare const getClickEffect: (type: Type, size: Size, inverse?: boolean) => string | undefined;
+export declare const getLoadingBackground: (type: Type, size: Size, inverse?: boolean, buttonColor?: string) => string;
+export declare const getLoadingBorder: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const SpinnerColorMap: (type: Type, inverse?: boolean) => string;
+export declare const getButtonIconColor: (size: Size, type: Type, inverse?: boolean, disabled?: boolean, isLoading?: boolean, darkMode?: boolean) => string | undefined;