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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react-dom"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/cross.svg.js"),n=require("../button/Button.js"),r=require("../TypographyStyle.js"),s=require("./CommonStyles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(t);exports.ShowShopifyRestrictedModal=t=>{const{zIndex:a,containerType:d,handleButtonClick:l,triggerPosition:u,connectShopifyDescription:h,demoDescription:m}=t,y=e=>{l(e)},p=u&&window.innerHeight-u.top<100,x=u?{position:"fixed",top:p?"auto":u.top,bottom:p?"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 c.default.createPortal(e.jsx(s.FeatureModalContainer,{zIndex:a,resetHeight:!0,style:x,relativePostion:!!u,children:e.jsxs(s.RelativeModalContainer,{children:[e.jsx("div",{className:"cross-container",onClick:()=>y("close"),"aria-hidden":"true",children:e.jsx(i.default,{height:24,width:24,color:"#000000"})}),"demo_store"==d?e.jsxs("div",{className:"demo-container",children:[e.jsx(r.TitleMedium,{color:o.COLORS.background.negative.vibrant,children:"Demo Store Limitations"}),e.jsx(r.BodyPrimary,{children:m??"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(r.TitleMedium,{children:"Connect Shopify "}),e.jsx(r.BodyPrimary,{style:{maxWidth:432},children:h??"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(n.Button,{buttonText:"Connect shopify",buttonType:"primary",size:"small",onClick:()=>y("shopify")}),e.jsx(n.Button,{buttonText:"View demo store",buttonType:"secondary",size:"small",onClick:()=>y("demo")})]})]})]})]})}),document.body)};

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

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

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

@@ -0,0 +1,12 @@
+import { SidebarTheme } from './SimpleSidebar.js';
+
+interface BikSidebarShimmerProps {
+    theme: SidebarTheme;
+    width?: number;
+    zIndex?: number;
+    left?: number;
+}
+declare const SidebarSkeleton: React.FC<BikSidebarShimmerProps>;
+
+export { SidebarSkeleton };
+export type { BikSidebarShimmerProps };

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

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

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

@@ -0,0 +1,271 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e);const n=o.default.div`
+	background-color: #28034e;
+	width: 88px;
+	justify-content: space-between;
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	overflow-y: auto;
+	height: 100vh;
+
+	.bik-header-logo {
+		margin: 24px 15.39px 8px 15.39px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 57px;
+		height: 20px;
+		cursor: pointer;
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: container;
+		}
+	}
+
+	.sticky-menu {
+		@media (min-height: 768px) {
+			position: absolute;
+			bottom: 0px;
+			width: 85%;
+		}
+	}
+	.sticky-menu-int {
+		@media (min-height: 768px) {
+			position: absolute;
+			bottom: 64px;
+			width: 85%;
+		}
+	}
+
+	.sticky-menu-three {
+		@media (min-height: 768px) {
+			position: absolute;
+			bottom: 128px;
+			width: 85%;
+		}
+	}
+
+	.new-menu-item {
+		padding-top: 14px;
+	}
+`,r=o.default.div`
+	margin: 16px 0px;
+`,a=o.default.div`
+	.main--sidebar {
+		overflow-y: auto;
+		padding: 0px 8px;
+		margin-bottom: 6px;
+		> * {
+			gap: 8px;
+		}
+	}
+	.locked--channel {
+		position: absolute;
+		right: 10px;
+		margin-top: -5px;
+	}
+
+	.new-tag {
+		position: absolute;
+		right: 5px;
+		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: ${t.COLORS.background.inverse};
+	}
+
+	.tag-sticky {
+		@media (min-height: 768px) {
+			bottom: 116px;
+			z-index: 1;
+		}
+	}
+	.tag-sticky-2 {
+		@media (min-height: 768px) {
+			bottom: 48px;
+			z-index: 1;
+		}
+	}
+
+	.sidebar-menu-item {
+		display: flex;
+		flex-direction: column;
+		border-radius: 10px;
+		align-items: center;
+		justify-content: space-around;
+		cursor: pointer;
+		> * {
+			gap: 10px;
+		}
+		padding: 8px;
+	}
+
+	.menu-item-container {
+		display: flex;
+		flex-direction: row;
+		cursor: pointer;
+		.menu-item-text {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 12px;
+			line-height: 16px;
+			user-select: none;
+			color: ${t.COLORS.content.secondaryInverse};
+			margin-bottom: 0px;
+			text-align: center;
+		}
+		.active-menu-item-text {
+			color: ${t.COLORS.background.warning.vibrant};
+		}
+	}
+	.main-menu-active-class {
+		border-radius: 10px;
+		background-color: #381062;
+		color: ${t.COLORS.background.warning.vibrant};
+	}
+	.sidebar-menu-item-hover {
+		background: #381062;
+		border-radius: 8px;
+	}
+	.sidebar-menu-item:hover {
+		background: #381062;
+		border-radius: 8px;
+	}
+`,d=o.default.div`
+	.transform-class {
+		position: relative;
+		animation: animatebottom 0.5s;
+		transition-timing-function: ease-in;
+	}
+	@keyframes animatebottom {
+		from {
+			width: 88px;
+			opacity: 0;
+		}
+
+		to {
+			width: 200px;
+			opacity: 1;
+		}
+	}
+	.sidebar-right-menu {
+		position: ${e=>e.postion?e.postion:"sticky"};
+		top: ${e=>e.top?e.top:0}px;
+		left: ${e=>e.left?e.left:0}px; //88
+		width: ${e=>e.width?e.width:200}px;
+		z-index: ${e=>e.zIndex?e.zIndex:2};
+		background-color: ${e=>"brand"==e.theme?"#381062":t.COLORS.surface.standard};
+		height: ${e=>e.isNewSidebar?"fit-content":"100vh"};
+		display: flex;
+		flex-direction: column;
+		padding: 8px;
+		border-radius: ${e=>e.isNewSidebar?"12px":""};
+	}
+
+	.sub-child-menu {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-bottom: ${e=>e.isNewSidebar?"":"8px"};
+		cursor: pointer;
+		.sub-child-text {
+			color: ${e=>"brand"==e.theme?t.COLORS.surface.standard:""};
+			margin-bottom: 0px;
+			padding: 8px 12px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.sub-child-new-tag {
+			padding: 2px 9px 2px 9px;
+			border-radius: 16px;
+			background-color: rgba(254, 192, 45, 1);
+			font-family: Inter;
+			font-size: 7px;
+			font-weight: 600;
+			line-height: 10px;
+			color: rgba(40, 3, 78, 1);
+		}
+		.sub-child-active-text {
+			border-radius: 0px 4px 4px 0px;
+			width: 2px;
+			height: 12px;
+			background: ${e=>e.isNewSidebar?t.COLORS.background.warning.vibrant:"white"};
+		}
+		.active-bold-weight {
+			font-weight: 600;
+			color: ${e=>e.isNewSidebar?t.COLORS.background.warning.vibrant:""};
+		}
+		.sub-child-active-menu-style {
+			color: ${e=>e.isNewSidebar?t.COLORS.background.warning.vibrant:""};
+		}
+	}
+	.sub-child-menu:hover {
+		background: ${e=>"brand"==e.theme?t.COLORS.background.inverseLight:t.COLORS.background.base};
+		border-radius: 8px;
+	}
+	.sub-child-active-menu {
+		background: ${e=>"brand"==e.theme?t.COLORS.background.inverseLight:t.COLORS.background.base};
+		border-radius: 8px;
+	}
+	.sub-child-display-name {
+		padding: 14px 12px;
+		color: ${e=>"brand"==e.theme?t.COLORS.content.secondaryInverse:t.COLORS.text.secondary};
+	}
+	.lower-sticky-panel {
+		position: ${e=>e.isNewSidebar?"relative":"absolute"};
+		bottom: ${e=>e.isNewSidebar?"":"16px"};
+		margin-top: ${e=>e.isNewSidebar?"auto":""};
+		margin-bottom: ${e=>e.isNewSidebar?"16px":""};
+		.title-text {
+			padding: 8px 12px;
+			text-align: center;
+		}
+		.upgrade-button {
+			margin: auto;
+		}
+	}
+	.sidebar-skeleton {
+		padding: 8px;
+	}
+`,p=o.default.div`
+	.sidebar-right-menu {
+		border-radius: 4px;
+		border: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);
+		box-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);
+		position: ${e=>e.postion?e.postion:"sticky"};
+		top: ${e=>e.top?e.top:void 0}px;
+		bottom: 10px;
+		left: ${e=>e.left?e.left:0}px; //88
+		z-index: ${e=>e.zIndex?e.zIndex:2};
+		background-color: ${e=>"brand"==e.theme?"#381062":t.COLORS.surface.standard};
+		display: flex;
+		flex-direction: column;
+		padding: 12px;
+		gap: 4px;
+		min-height: 100px;
+		overflow-y: auto;
+	}
+	.each-menu {
+		padding: 8px;
+		gap: 4px;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+		border-bottom: 0.5px solid #e0e0e0;
+		cursor: pointer;
+		max-width: 320px;
+		:hover {
+			background-color: ${t.COLORS.background.base};
+			border-radius: 8px;
+		}
+	}
+`;exports.MainSideBarMenuWrapper=r,exports.SibeBarMenuItem=a,exports.SideBarContainer=n,exports.SidebarPopupContainer=p,exports.SimpleSidebarContainer=d;

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

@@ -0,0 +1,31 @@
+interface Menu {
+    key: string | number;
+    displayName: string;
+    description?: string;
+    path?: string;
+    page?: string;
+    isNew?: string;
+}
+type SidebarTheme = 'brand' | 'white';
+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;
+}
+declare const SimpleSidebar: React.FC<SimpleSidebarProps>;
+
+export { SimpleSidebar };
+export type { Menu, SidebarTheme, SimpleSidebarProps };

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),n=require("@emotion/styled"),e=require("../../constants/Theme.js"),o=require("./themes.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const r=i(n).default.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=>o.getBackgroundColor(t.buttonType,t.size,t.inverse,t.darkMode,t.buttonColor)};
+
+	${t=>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: ${o.getPadding(t.buttonType,t.size)};\n\t\t\t\t}`:`padding: ${o.getPadding(t.buttonType,t.size)};\n\t${o.getBorder(t.version??"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=>o.getColor(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=>o.getDashedBorderStyling(t.buttonType,t.size,t.isLoading?e.COLORS.stroke.brandLightAlt:t.error?e.COLORS.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: ${e.COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${e.COLORS.background.brand};\n\t\t}\n\t\t\n\t}\n\t${o.getClickEffect(t.buttonType,t.size,t.inverse)}\n\t${o.getDashedBorderStyling(t.buttonType,t.size,e.COLORS.content.brand)}\n\t`}
+
+	:disabled {
+		.overlay-container {
+			display: none !important;
+		}
+		cursor: ${t=>"text"===t.buttonType?"auto":"not-allowed"};
+		${t=>o.generateDisabledStyling(t.buttonType,t.size,t.inverse)}
+		.text {
+			color: ${t=>o.getDisabledTextColor(t.inverse)} !important;
+		}
+		${t=>o.getDashedBorderStyling(t.buttonType,t.size,e.COLORS.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: ${e.COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${e.COLORS.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${o.getClickEffect(t.buttonType,t.size,t.inverse)}\n\t\t\t${o.getDashedBorderStyling(t.buttonType,t.size,e.COLORS.content.brand)}\n\t\t}`}
+
+	${t=>t.isLoading?`\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${o.getLoadingBorder(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: ${o.getLoadingButtonBackgroundCustom(t.buttonColor,15)};`:""}\n\t\t\tpadding: ${o.getPadding(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${o.getLoadingBackground(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: ${o.getPadding(t.buttonType,t.size)};\n\t\t\t\t{${t.buttonColor?`background-color: ${o.getHoverButtonBackgroundCustom(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${o.getHoverButtonBackground(t.buttonType,t.inverse)}\n\t\t\t\t}\n\t\t\t\t${"chip"===t.size&&"text"!==t.buttonType?t.darkMode?`background-color: ${e.COLORS.stroke.primary};`:`background-color: ${e.COLORS.surface.hovered};`:""}\n\t\t\t\t${"primary"!==t.buttonType||"chip"===t.size||t.inverse||t.buttonColor?"":`background-color: ${e.COLORS.background.inverse};`}\n\t\t\t}\n\t\t\t${"text"===t.buttonType?o.getHoverButtonTextDecorationStyle(t.buttonType,t.disabled):""}\n\t\t\t${t.inverse?o.generateInverseHoverBackground(t.buttonType,t.disabled):""}\n\t\t}`}
+
+		.button-container {
+		display: flex;
+		gap: 8.33px;
+		${t=>t.matchParentWidth?"margin: auto;":""}
+	}
+`;exports.Button=r,exports.ButtonCustomDashedBorder=()=>t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"line-top"}),t.jsx("div",{className:"line-left"}),t.jsx("div",{className:"line-bottom"}),t.jsx("div",{className:"line-right"})]});

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

@@ -0,0 +1,78 @@
+type Size = 'chip' | 'small' | 'medium' | 'large';
+type Type = 'primary' | 'secondary' | 'tertiary' | 'tertiaryGray' | 'destructive' | 'dashBold' | 'dashRegular' | 'text' | 'ai';
+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;
+}
+
+export type { ButtonProps, Size, Type };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../constants/Theme.js"),r=require("../TypographyStyle.js");const n=(r,n,e)=>e?t.COLORS.stroke.negative.vibrant:n?t.COLORS.surface.standard:"secondary"==r?t.COLORS.stroke.brand:t.COLORS.content.placeholder,e=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",o=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),o=(n>>16)+e,a=(n>>8&255)+e,i=(255&n)+e;return`#${(16777216+(Math.min(o,255)<<16)+(Math.min(a,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`};exports.GetButtonTextComponent=(t,n,e)=>e||"ai"!==n?"dashRegular"===n?r.BodySecondary:"chip"===t?r.BodyCaption:"small"===t?r.ButtonRegular:r.ButtonLarge:"small"===t?r.ButtonRegularAI:r.ButtonLargeAI,exports.SpinnerColorMap=(r,n)=>n?"primary"===r?t.COLORS.content.primary:t.COLORS.content.primaryInverse:"destructive"===r?t.COLORS.content.negative:t.COLORS.content.brand,exports.generateDisabledStyling=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.COLORS.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.COLORS.stroke.primary};`:"",exports.generateInverseHoverBackground=(r,n)=>n?"":"primary"===r?`background-color: ${t.COLORS.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",exports.getBackgroundColor=(r,n,e,o,a)=>{if("chip"===n)return"text"===r?"transparent":o?t.COLORS.surface.hovered:t.COLORS.surface.subdued;switch(r){case"primary":return a||(e?t.COLORS.background.warning.vibrant:t.COLORS.background.inverseLight);case"destructive":return t.COLORS.background.negative.vibrant;default:return"transparent"}},exports.getBorder=(r,e,o,a,i)=>"text"==e?"border: none;":"chip"===o?`border: ${"2.0"===r?.5:1}px solid ${t.COLORS.stroke.primary};`:a?"secondary"===e?`border: ${"2.0"===r?.5:1}px solid ${n(e,a,i)};`:"border: none;":"secondary"===e?`border: ${"2.0"===r?.5:1}px solid ${n(e,!1,i)};`:"border: none;",exports.getBorderColor=n,exports.getButtonIconColor=(r,n,e,o,a,i)=>"chip"===r?o?t.COLORS.content.inactive:i?t.COLORS.content.primary:t.COLORS.content.secondary:a?"transparent":"primary"===n||"destructive"===n?e?o?"rgba(255, 255, 255, 0.5)":t.COLORS.content.primary:o?t.COLORS.content.inactive:t.COLORS.content.primaryInverse:"secondary"===n||"tertiary"===n?e?o?"rgba(255, 255, 255, 0.5)":t.COLORS.content.primaryInverse:o?t.COLORS.content.inactive:t.COLORS.content.brand:"tertiaryGray"===n||n.startsWith("dash")?o?t.COLORS.content.inactive:t.COLORS.content.secondary:void 0,exports.getClickEffect=(r,n,e)=>"text"===r?`background-color: ${t.COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.COLORS.content.brand};`:"chip"===n?`border: 1px solid ${t.COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${t.COLORS.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||r.startsWith("dash")?e?`background-color: ${t.COLORS.background.inverseLight}  !important;`:`background-color: ${t.COLORS.background.brandLight};`:void 0,exports.getColor=(r,n,e,o)=>{if("chip"===n)return"text"===r?e?t.COLORS.content.inactive:t.COLORS.content.brand:o?t.COLORS.content.primary:t.COLORS.content.secondary;switch(r){case"primary":return e?t.COLORS.content.primary:t.COLORS.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.COLORS.content.secondary;case"destructive":return t.COLORS.content.primaryInverse;case"ai":return t.COLORS.content.ai;default:return e?t.COLORS.content.primaryInverse:t.COLORS.stroke.brand}},exports.getDashedBorderStyling=(t,r,o=n(t,!1))=>`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t`,exports.getDisabledTextColor=r=>r?"rgba(255, 255, 255, 0.5)":t.COLORS.content.inactive,exports.getHoverButtonBackground=(r,n)=>"ai"===r?`background: ${t.COLORS.surface.aiLight};`:"text"===r?"background-color:transparent;":n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",exports.getHoverButtonBackgroundCustom=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),o=(n>>16)-e,a=(n>>8&255)-e,i=(255&n)-e;return`#${(16777216+(Math.max(o,0)<<16)+(Math.max(a,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},exports.getHoverButtonTextDecorationStyle=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.COLORS.content.brand};`,exports.getLinearGradientValue=e,exports.getLoadingBackground=(r,n,e,a)=>"chip"===n?`background-color: ${t.COLORS.background.base};`:"primary"===r?a?`background-color: ${o(a,50)};`:`background-color: ${e?t.COLORS.background.warning.vibrant:t.COLORS.background.brandLight};`:"destructive"===r?`background-color: ${t.COLORS.background.negative.light};`:"background-color: transparent;",exports.getLoadingBorder=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.COLORS.content.secondary};`:`border: 1px solid ${t.COLORS.stroke.brandLightAlt};`:"",exports.getLoadingButtonBackgroundCustom=o,exports.getPadding=(t,r)=>{if("text"===t)return"0px";if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}};

package/dist/cjs/components/buttonGroup/ButtonGroup.d.ts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+
+interface ButtonGroupInterface {
+    id: string;
+    title: string;
+    icon?: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
+}
+interface ButtonGroupProps {
+    id?: string;
+    width?: string;
+    gap?: string;
+    iconWidth?: string;
+    iconHeight?: string;
+    iconPosition?: 'left' | 'right' | 'top';
+    onButtonClick: (buttonId: string) => void;
+    activeButtonId?: string;
+    buttonGroup: Array<ButtonGroupInterface>;
+    size: 'small' | 'medium' | 'large';
+    matchParentWidth?: boolean;
+    borderRadius?: string;
+    backgroundColor?: string;
+}
+declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
+
+export { ButtonGroup };
+export type { ButtonGroupInterface, ButtonGroupProps };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),i=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),r=require("./ButtonGroupStyle.js");exports.ButtonGroup=n=>{const[s,c]=e.useState(void 0);e.useEffect((()=>{c(n.activeButtonId||void 0)}),[n?.activeButtonId]);return t.jsx(r.ButtonGroupStyle,{className:"button-group",width:n.width||"100%",gap:n.gap,size:n.size,children:n.buttonGroup.map((e=>{const d=e?.icon;return t.jsxs(r.Button,{borderRadius:n.borderRadius??"4px",matchParentWidth:n.matchParentWidth??!0,className:"button",isActive:s===e.id,onClick:()=>(t=>{c(t.id),n.onButtonClick(t.id)})(e),iconPosition:n.iconPosition,size:n.size,backgroundColor:n.backgroundColor||o.COLORS.surface.subdued,children:[n?.iconPosition&&d&&t.jsx("div",{className:"button__image",children:t.jsx(d,{color:s===e.id?o.COLORS.background.inverseLight:o.COLORS.content.secondary,width:n?.iconWidth||"18px",height:n?.iconHeight||"18px"})}),t.jsx("div",{className:"button__name",children:t.jsx(i.BodySecondary,{style:{color:s===e.id?o.COLORS.background.inverseLight:o.COLORS.content.secondary},children:e.title})})]},e.id)}))})};

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

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e);const r={small:"8px 12px",medium:"10px 12px",large:"14px 12px"},n={small:"36px",medium:"40px",large:"48px"},s=o.default.div`
+	display: flex;
+	flex-direction: row;
+	width: ${e=>e.width||"100%"};
+	height: ${e=>e.size?n[e.size]:"36px"};
+	gap: ${e=>e.gap||"12px"};
+`,p=o.default.div`
+	display: flex;
+	flex-direction: ${e=>"top"!==e.iconPosition?"left"===e.iconPosition?"row":"row-reverse":"column"};
+	flex: ${e=>e.matchParentWidth?1:"unset"};
+	height: 100%;
+	background: ${e=>e.isActive?t.COLORS.background.brandLight:e.backgroundColor};
+	border: 1px solid
+		${e=>e.isActive?t.COLORS.background.inverseLight:t.COLORS.stroke.primary};
+	border-radius: ${e=>e.borderRadius};
+	align-items: center;
+	justify-content: center;
+	padding: ${e=>e.size?r[e.size]:"8px 10px"};
+	gap: ${e=>e.iconPosition&&"top"!==e.iconPosition?"10px":"2px"};
+	.button {
+		align-items: center;
+		justify-content: center;
+		&__image {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+	:hover {
+		cursor: pointer;
+	}
+`;exports.Button=p,exports.ButtonGroupStyle=s;

package/dist/cjs/components/card-selection-modal/CardSelectionModal.d.ts

@@ -0,0 +1,21 @@
+import React__default from 'react';
+
+type CardSelectionModalProps = {
+    isOpen: boolean;
+    title?: string;
+    subTitle?: string;
+    infoText?: string;
+    cards: SelectionCardData[];
+    onCardSelected: (value: string) => void;
+    onClose: () => void;
+};
+type SelectionCardData = {
+    icon?: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
+    value: string;
+    title: string;
+    description: string;
+};
+declare const CardSelectionModal: React__default.FC<CardSelectionModalProps>;
+
+export { CardSelectionModal };
+export type { CardSelectionModalProps, SelectionCardData };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../assets/icons/info.svg.js"),s=require("./CardSelectionModal.styled.js"),i=require("../modals/styledModal.js"),l=require("../../constants/Theme.js"),o=require("../TypographyStyle.js");exports.CardSelectionModal=n=>e.jsx(i.StyledModal,{open:n.isOpen,onClose:n.onClose,headingTitle:n.title,headingSubtitle:n.subTitle,centralContainerStyles:{width:716},children:e.jsxs(s.StyledCardContainer,{children:[e.jsx("div",{className:"cards__wrapper",children:n.cards.map((r=>e.jsxs(s.StyledCard,{onClick:()=>{n.onCardSelected(r.value)},children:[r.icon&&e.jsx("div",{className:"icon__container",children:e.jsx(r.icon,{width:22,color:l.DEFAULT_THEME.colorsV2.content.brand})}),e.jsx(o.TitleRegular,{children:r.title}),e.jsx(o.BodyCaption,{children:r.description})]},r.value)))}),n.infoText&&e.jsxs("div",{className:"info__wrapper",children:[e.jsx(r.default,{width:15,color:l.DEFAULT_THEME.colorsV2.content.placeholder}),e.jsx(o.BodySecondary,{children:n.infoText})]})]})});

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

@@ -0,0 +1,41 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),r=require("../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e);const d=a.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	.cards__wrapper {
+		padding: 0 24px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 16px;
+	}
+	.info__wrapper {
+		padding: 0 24px 24px 24px;
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+`,t=a.default.div`
+	width: 212px;
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	background-color: ${r.DEFAULT_THEME.colorsV2.surface.standard};
+	border: 1px solid ${r.DEFAULT_THEME.colorsV2.stroke.primary};
+	border-radius: 4px;
+	cursor: pointer;
+
+	&:hover {
+		background-color: ${r.DEFAULT_THEME.colorsV2.surface.hovered};
+	}
+
+	.icon__container {
+		width: 48px;
+		height: 48px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background-color: ${r.DEFAULT_THEME.colorsV2.background.brandLight};
+	}
+`;exports.StyledCard=t,exports.StyledCardContainer=d;