@bikdotai/bik-component-library 0.0.512-beta.ai-1 → 0.0.512

package/dist/esm/components/TypographyStyle.js

@@ -1,233 +1,170 @@
-import e from"styled-components";import{COLORS as t,FONTS as i}from"../constants/Theme.js";const o=e=>e+"px",n=e.div`
+import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants/Theme.js";const o=e=>e+"px",n=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.titleLarge.fontWeight};
-	font-size: ${o(i.titleLarge.fontSize)};
-	line-height: ${o(i.titleLarge.lineHeight)};
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,r=e.div`
-	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.titleMedium.fontWeight};
-	font-size: ${o(i.titleMedium.fontSize)};
-	line-height: ${o(i.titleMedium.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleLarge.fontWeight};
+	font-size: ${o(t.titleLarge.fontSize)};
+	line-height: ${o(t.titleLarge.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,l=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.title4.fontWeight};
-	font-size: ${o(i.title4.fontSize)};
-	line-height: ${o(i.title4.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleMedium.fontWeight};
+	font-size: ${o(t.titleMedium.fontSize)};
+	line-height: ${o(t.titleMedium.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,a=e.div`
+`,r=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.titleRegular.fontWeight};
-	font-size: ${o(i.titleRegular.fontSize)};
-	line-height: ${o(i.titleRegular.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.title4.fontWeight};
+	font-size: ${o(t.title4.fontSize)};
+	line-height: ${o(t.title4.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,f=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.titleSmall.fontWeight};
-	font-size: ${o(i.titleSmall.fontSize)};
-	line-height: ${o(i.titleSmall.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleRegular.fontWeight};
+	font-size: ${o(t.titleRegular.fontSize)};
+	line-height: ${o(t.titleRegular.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,b=e.div`
+`,a=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.display.fontWeight};
-	font-size: ${o(i.display.fontSize)};
-	line-height: ${o(i.display.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.titleSmall.fontWeight};
+	font-size: ${o(t.titleSmall.fontSize)};
+	line-height: ${o(t.titleSmall.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,d=e.div`
+`,b=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.bodyPrimary.fontWeight};
-	font-size: ${o(i.bodyLarge.fontSize)};
-	line-height: ${o(i.bodyLarge.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.display.fontWeight};
+	font-size: ${o(t.display.fontSize)};
+	line-height: ${o(t.display.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,c=e.div`
+`,d=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.bodyPrimary.fontWeight};
-	font-size: ${o(i.bodyPrimary.fontSize)};
-	line-height: ${o(i.bodyPrimary.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyPrimary.fontWeight};
+	font-size: ${o(t.bodyLarge.fontSize)};
+	line-height: ${o(t.bodyLarge.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,g=e.div`
+`,h=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.bodySecondary.fontWeight};
-	font-size: ${o(i.bodySecondary.fontSize)};
-	line-height: ${o(i.bodySecondary.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyPrimary.fontWeight};
+	font-size: ${o(t.bodyPrimary.fontSize)};
+	line-height: ${o(t.bodyPrimary.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,h=e.div`
+`,c=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.bodySecondary.fontWeight};
-	font-size: ${o(i.bodySecondary.fontSize)};
-	line-height: ${o(i.bodySecondary.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodySecondary.fontWeight};
+	font-size: ${o(t.bodySecondary.fontSize)};
+	line-height: ${o(t.bodySecondary.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-	z-index: 1;
-	background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	background-clip: text;
-	text-fill-color: transparent;
-`,w=e(c)`
+`,g=e(h)`
 	text-decoration: underline;
-	color: ${t.content.brand};
-	text-decoration-color: ${t.content.brand};
+	color: ${i.content.brand};
+	text-decoration-color: ${i.content.brand};
 	cursor: pointer;
-`,$=e(g)`
+`,$=e(c)`
 	text-decoration: underline;
-	color: ${t.content.brand};
-	text-decoration-color: ${t.content.brand};
+	color: ${i.content.brand};
+	text-decoration-color: ${i.content.brand};
 	cursor: pointer;
-`,p=e.div`
+`,w=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.caption.fontWeight};
-	font-size: ${o(i.caption.fontSize)};
-	line-height: ${o(i.caption.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.caption.fontWeight};
+	font-size: ${o(t.caption.fontSize)};
+	line-height: ${o(t.caption.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
 `,m=e.div`
-	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.caption.fontWeight};
-	font-size: ${o(i.caption.fontSize)};
-	line-height: ${o(i.caption.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.tiny.fontWeight};
+	font-size: ${o(t.tiny.fontSize)};
+	line-height: ${o(t.tiny.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-	z-index: 1;
-	background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	background-clip: text;
-	text-fill-color: transparent;
 `,y=e.div`
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.tiny.fontWeight};
-	font-size: ${o(i.tiny.fontSize)};
-	line-height: ${o(i.tiny.lineHeight)};
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,x=e.div`
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.tiny.fontWeight};
-	font-size: ${o(i.tiny.fontSize)};
-	line-height: ${o(i.tiny.lineHeight)};
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-line-clamp: ${e=>e.numberOfLines};
-	z-index: 1;
-	background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	background-clip: text;
-	text-fill-color: transparent;
-`,s=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.buttonLarge.fontWeight};
-	font-size: ${o(i.buttonLarge.fontSize)};
-	line-height: ${o(i.buttonLarge.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.buttonLarge.fontWeight};
+	font-size: ${o(t.buttonLarge.fontSize)};
+	line-height: ${o(t.buttonLarge.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,k=e.div`
-	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.buttonLarge.fontWeight};
-	font-size: ${o(i.buttonLarge.fontSize)};
-	line-height: ${o(i.buttonLarge.lineHeight)};
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-	display: -webkit-box;
-	-webkit-line-clamp: ${e=>e.numberOfLines};
-	background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
-	z-index: 1;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	background-clip: text;
-	text-fill-color: transparent;
-`,u=e.div`
+`,p=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.buttonRegular.fontWeight};
-	font-size: ${o(i.buttonRegular.fontSize)};
-	line-height: ${o(i.buttonRegular.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.buttonRegular.fontWeight};
+	font-size: ${o(t.buttonRegular.fontSize)};
+	line-height: ${o(t.buttonRegular.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,v=e.div`
+`,s=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.subHeading.fontWeight};
-	font-size: ${o(i.subHeading.fontSize)};
-	line-height: ${o(i.subHeading.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.subHeading.fontWeight};
+	font-size: ${o(t.subHeading.fontSize)};
+	line-height: ${o(t.subHeading.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,z=e.div`
+`,x=e.div`
 	font-family: Inter;
-	color: ${e=>e.color||t.text.primary};
-	font-weight: ${i.bodyRegular.fontWeight};
-	font-size: ${o(i.bodyRegular.fontSize)};
-	line-height: ${o(i.bodyRegular.lineHeight)};
+	color: ${e=>e.color||i.text.primary};
+	font-weight: ${t.bodyRegular.fontWeight};
+	font-size: ${o(t.bodyRegular.fontSize)};
+	line-height: ${o(t.bodyRegular.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`,L=e.div`
+`,k=e.div`
 	font-family: Inter;
-	color: ${t.text.primary};
-	font-weight: ${i.caption.fontWeight};
-	font-size: ${o(i.caption.fontSize)};
-	line-height: ${o(i.caption.lineHeight)};
+	color: ${i.text.primary};
+	font-weight: ${t.caption.fontWeight};
+	font-size: ${o(t.caption.fontSize)};
+	line-height: ${o(t.caption.lineHeight)};
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: ${e=>e.numberOfLines};
-`;export{m as AiBodyCaption,x as AiBodyTiny,p as BodyCaption,d as BodyLarge,c as BodyPrimary,w as BodyPrimaryLink,z as BodyRegular,g as BodySecondary,$ as BodySecondaryLink,y as BodyTiny,s as ButtonLarge,k as ButtonLargeAI,u as ButtonRegular,h as ButtonRegularAI,L as Caption,b as Display,l as SmallRegular,v as SubHeading,n as TitleLarge,r as TitleMedium,a as TitleRegular,f as TitleSmall};
+`;export{w as BodyCaption,d as BodyLarge,h as BodyPrimary,g as BodyPrimaryLink,x as BodyRegular,c as BodySecondary,$ as BodySecondaryLink,m as BodyTiny,y as ButtonLarge,p as ButtonRegular,k as Caption,b as Display,r as SmallRegular,s as SubHeading,n as TitleLarge,l as TitleMedium,f as TitleRegular,a as TitleSmall};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export type Size = 'chip' | 'small' | 'medium' | 'large';
-export type Type = 'primary' | 'secondary' | 'tertiary' | 'tertiaryGray' | 'destructive' | 'dashBold' | 'dashRegular' | 'text' | 'ai';
+export type Type = 'primary' | 'secondary' | 'tertiary' | 'tertiaryGray' | 'destructive' | 'dashBold' | 'dashRegular' | 'text';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     'data-test'?: string;
     /**

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

@@ -3,14 +3,14 @@ export declare const getBackgroundColor: (type: Type, size: Size, inverse?: bool
 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, {
+export declare const GetButtonTextComponent: (size: Size, type: Type) => 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;
-export declare const getHoverButtonBackground: (type: Type, inverse?: boolean) => string;
+export declare const getHoverButtonBackground: (type: Type, inverse?: boolean) => "" | "background-color:transparent;" | "background-color: #000000;\n\t\t\t\topacity: 0.03;";
 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;

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

@@ -1 +1 @@
-import{COLORS as t}from"../../constants/Theme.js";import{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(r,n,e,a)=>{if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return e?t.background.warning.vibrant:t.background.inverseLight;case"destructive":return t.background.negative.vibrant;default:return"transparent"}},d=(r,n,e,a)=>{if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;case"ai":return t.content.ai;default:return e?t.content.primaryInverse:t.stroke.brand}},s=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,p=(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"}},b=(t,c,d)=>d||"ai"!==c?"dashRegular"===c?e:"chip"===t?a:"small"===t?o:i:"small"===t?r:n,g=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,u=(r,n,e,a,o)=>"text"==n?"border: none;":"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${g(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${g(n,!1,o)};`:"border: none;",l=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",h=(r,n)=>"ai"===r?`background: ${t.surface.aiLight};`:"text"===r?"background-color:transparent;":n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",y=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,x=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",k=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",m=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:g(t,!1);return`\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${n},\n\t\t\t${n}\n\t\t\t\t${l(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${n},\n\t\t\t${n}\n\t\t\t\t${l(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${n},\n\t\t\t${n}\n\t\t\t\t${l(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${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t`},v=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.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.background.inverseLight}  !important;`:`background-color: ${t.background.brandLight};`:void 0,$=(r,n,e)=>"chip"===n?`background-color: ${t.background.base};`:"primary"===r?`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",f=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",w=(r,n)=>n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,L=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{b as GetButtonTextComponent,w as SpinnerColorMap,k as generateDisabledStyling,x as generateInverseHoverBackground,c as getBackgroundColor,u as getBorder,g as getBorderColor,L as getButtonIconColor,v as getClickEffect,d as getColor,m as getDashedBorderStyling,s as getDisabledTextColor,h as getHoverButtonBackground,y as getHoverButtonTextDecorationStyle,l as getLinearGradientValue,$ as getLoadingBackground,f as getLoadingBorder,p as getPadding};
+import{COLORS as t}from"../../constants/Theme.js";import{BodySecondary as r,BodyCaption as n,ButtonRegular as e,ButtonLarge as a}from"../TypographyStyle.js";const o=(r,n,e,a)=>{if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return e?t.background.warning.vibrant:t.background.inverseLight;case"destructive":return t.background.negative.vibrant;default:return"transparent"}},i=(r,n,e,a)=>{if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;default:return e?t.content.primaryInverse:t.stroke.brand}},c=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,d=(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"}},s=(t,o)=>"dashRegular"===o?r:"chip"===t?n:"small"===t?e:a,p=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,b=(r,n,e,a,o)=>"text"==n?"border: none;":"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${p(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${p(n,!1,o)};`:"border: none;",g=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",u=(t,r)=>"text"===t?"background-color:transparent;":r||"primary"===t?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",l=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,h=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",y=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",x=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:p(t,!1);return`\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${n},\n\t\t\t${n}\n\t\t\t\t${g(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${n},\n\t\t\t${n}\n\t\t\t\t${g(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${n},\n\t\t\t${n}\n\t\t\t\t${g(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${n},\n\t\t\t${n}\n\t\t\t\t${g(r)}\n\t\t);\n\t}\n\t`},k=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.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.background.inverseLight}  !important;`:`background-color: ${t.background.brandLight};`:void 0,m=(r,n,e)=>"chip"===n?`background-color: ${t.background.base};`:"primary"===r?`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",v=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",$=(r,n)=>n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,f=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{s as GetButtonTextComponent,$ as SpinnerColorMap,y as generateDisabledStyling,h as generateInverseHoverBackground,o as getBackgroundColor,b as getBorder,p as getBorderColor,f as getButtonIconColor,k as getClickEffect,i as getColor,x as getDashedBorderStyling,c as getDisabledTextColor,u as getHoverButtonBackground,l as getHoverButtonTextDecorationStyle,g as getLinearGradientValue,m as getLoadingBackground,v as getLoadingBorder,d as getPadding};

package/dist/esm/components/helpers/FileUploaderHelper.d.ts

@@ -1,4 +1,4 @@
-export declare const FILE_TYPE_NOT_SUPPORT = "File type no supported";
+export declare const FILE_TYPE_NOT_SUPPORT = "File type not supported";
 export declare const FILE_SIZE_REACHED: (size: number) => string;
 export declare const getFileFormatErrorMessage: (format: string) => string;
 export declare const SIZE_LIMIT_MAP: {

package/dist/esm/components/helpers/FileUploaderHelper.js

@@ -1 +1 @@
-import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type no supported",t=e=>`Max file size of ${e}MB is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,l={image:5,video:16,application:100},o=["mp4","png","jpeg","jpg","pdf"];class s{validate(s){const{file:r,linkData:a}=s;let n=0,f="",d="";if(r)n=r.size,f=r.type.split("/")[0],d=r.type.split("/")[1];else{if(!a)return i;n=a.size,f=a.type.split("/")[0],d=a.type.split("/")[1]}if(!l[f])return i;if(e(n)>l[f])return t(l[f]);if(!o.includes(d.toLocaleLowerCase())){if("video"===f)return p("mp4");if("image"===f)return p("png, jpeg, jpg");if("application"===f)return p("pdf")}}}export{t as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,s as FileUploaderHelper,l as SIZE_LIMIT_MAP,o as SUPPORTED_FILE_FORMAT,p as getFileFormatErrorMessage};
+import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type not supported",t=e=>`Max file size of ${e}MB is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,l={image:5,video:16,application:100},o=["mp4","png","jpeg","jpg","pdf"];class s{validate(s){const{file:r,linkData:a}=s;let n=0,f="",d="";if(r)n=r.size,f=r.type.split("/")[0],d=r.type.split("/")[1];else{if(!a)return i;n=a.size,f=a.type.split("/")[0],d=a.type.split("/")[1]}if(!l[f])return i;if(e(n)>l[f])return t(l[f]);if(!o.includes(d.toLocaleLowerCase())){if("video"===f)return p("mp4");if("image"===f)return p("png, jpeg, jpg");if("application"===f)return p("pdf")}}}export{t as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,s as FileUploaderHelper,l as SIZE_LIMIT_MAP,o as SUPPORTED_FILE_FORMAT,p as getFileFormatErrorMessage};

package/dist/esm/components/icon-button/IconButton.styled.js

@@ -1,3 +1,3 @@
 import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{generateBackgroundColor as o}from"./theme.js";const r=t.button`
-	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
+	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground-color: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
 `;export{r as IconButton};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai';
+export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning';
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Icon to render

package/dist/esm/components/icon-button/theme.js

@@ -1 +1 @@
-import{COLORS as t}from"../../constants/Theme.js";const n=(n,e,r)=>{if(e)return t.content.inactive;switch(n){case"default":return r?t.content.brand:t.content.primary;case"negative":return t.content.negative;case"positive":return t.content.positive;case"warning":return r?t.content.warning:t.content.primary;default:return t.content.primary}},e=n=>"default"===n?t.background.brandLight:"negative"===n?t.background.negative.light:"positive"===n?t.background.positive.light:"ai"===n?t.surface.aiLight:t.background.warning.light;export{e as generateBackgroundColor,n as getIconColor};
+import{COLORS as t}from"../../constants/Theme.js";const n=(n,e,r)=>{if(e)return t.content.inactive;switch(n){case"default":return r?t.content.brand:t.content.primary;case"negative":return t.content.negative;case"positive":return t.content.positive;case"warning":return r?t.content.warning:t.content.primary;default:return t.content.primary}},e=n=>"default"===n?t.background.brandLight:"negative"===n?t.background.negative.light:"positive"===n?t.background.positive.light:t.background.warning.light;export{e as generateBackgroundColor,n as getIconColor};

package/dist/esm/components/image-cropper/BikImageCropper.d.ts

@@ -2,7 +2,7 @@ import 'react-image-crop/dist/ReactCrop.css';
 export interface BikImageCropperProps {
     aspectRatio?: number;
     src: string;
-    onCropComplete: (base64String: string, didChange: boolean) => void;
+    onCropComplete: (base64String: string, didChange: boolean) => void | Promise<void>;
     onCancel: () => void;
 }
 export declare const BikImageCropper: (props: BikImageCropperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/image-cropper/BikImageCropper.js

@@ -1 +1 @@
-import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useState as i}from"react";import o from"react-image-crop";import{StyledModal as r}from"../modals/styledModal.js";const n=n=>{const[a,c]=i(!1),[l,d]=i(void 0),[h,s]=i({width:0,height:0}),g=(e,i,o,r)=>t(void 0,void 0,void 0,(function*(){const t=document.createElement("canvas");t.width=i.width,t.height=i.height;const n=t.getContext("2d");if(!n)throw new Error("Failed to get 2D context of canvas.");n.drawImage(e,i.x*o,i.y*r,i.width*o,i.height*r,0,0,i.width,i.height);try{return t.toDataURL("image/png")}catch(t){throw new Error("Failed to create blob for cropped image.")}}));return e(r,Object.assign({open:!0,onClose:n.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",onClick:()=>{var e;e=l,t(void 0,void 0,void 0,(function*(){var t,i;if(n.src&&(null==e?void 0:e.width)&&(null==e?void 0:e.height)){const i=new Image;i.src=n.src;const o=i.naturalWidth/h.width,r=i.naturalHeight/h.height,c=yield g(i,e,o,r);null===(t=null==n?void 0:n.onCropComplete)||void 0===t||t.call(n,c,a)}else null===(i=null==n?void 0:n.onCropComplete)||void 0===i||i.call(n,n.src,a)}))}}},{children:e("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}},{children:e("div",{children:e(o,Object.assign({crop:l,onChange:t=>{d(t)},circularCrop:!1,onDragStart:()=>{c(!0)},aspect:n.aspectRatio},{children:e("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:n.src,alt:"image cropper",onLoad:t=>{const e=t.target,i=e.width;s({width:i,height:e.height})}})}))})}))}))};export{n as BikImageCropper,n as default};
+import{__awaiter as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useState as i}from"react";import o from"react-image-crop";import{StyledModal as r}from"../modals/styledModal.js";const n=n=>{const[a,d]=i(!1),[l,c]=i(void 0),[h,s]=i({width:0,height:0}),[g,m]=i(!1),p=(e,i,o,r)=>t(void 0,void 0,void 0,(function*(){const t=document.createElement("canvas");t.width=i.width,t.height=i.height;const n=t.getContext("2d");if(!n)throw new Error("Failed to get 2D context of canvas.");n.drawImage(e,i.x*o,i.y*r,i.width*o,i.height*r,0,0,i.width,i.height);try{return t.toDataURL("image/png")}catch(t){throw new Error("Failed to create blob for cropped image.")}}));return e(r,Object.assign({open:!0,onClose:n.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:g,onClick:()=>{var e;e=l,t(void 0,void 0,void 0,(function*(){var t,i;if(m(!0),n.src&&(null==e?void 0:e.width)&&(null==e?void 0:e.height)){const i=new Image;i.src=n.src;const o=i.naturalWidth/h.width,r=i.naturalHeight/h.height,d=yield p(i,e,o,r);yield null===(t=null==n?void 0:n.onCropComplete)||void 0===t?void 0:t.call(n,d,a)}else yield null===(i=null==n?void 0:n.onCropComplete)||void 0===i?void 0:i.call(n,n.src,a);m(!1)}))}}},{children:e("div",Object.assign({style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"}},{children:e("div",{children:e(o,Object.assign({crop:l,onChange:t=>{c(t)},circularCrop:!1,onDragStart:()=>{d(!0)},aspect:n.aspectRatio},{children:e("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:n.src,alt:"image cropper",onLoad:t=>{const e=t.target,i=e.width;s({width:i,height:e.height})}})}))})}))}))};export{n as BikImageCropper,n as default};

package/dist/esm/components/input-with-vars/InputWithVariables.d.ts

@@ -22,5 +22,6 @@ export interface InputWithVariablesProps {
     labelElement?: React.ReactNode;
     isRequired?: boolean;
     hintText?: string;
+    onEnterPress?: (input: string) => void;
 }
 export declare const InputWithVariables: React.FC<InputWithVariablesProps>;

package/dist/esm/components/input-with-vars/InputWithVariables.js

@@ -1,4 +1,4 @@
-import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as d}from"react";import o from"styled-components";import{v4 as n}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as h}from"../TypographyStyle.js";const m=o=>{let{type:s,allowMix:m,onChange:g,prevVariable:V,variablesList:T,onBlur:y,onlyVariables:f,placeHolder:x,showAddButton:j=!0,showHelp:C,showSideVariablePanel:S,errorMessage:w,showSideModal:k,maxCharLimit:A,noMaxCharCheck:N,labelText:B,labelElement:L,isRequired:M=!1,hintText:O}=o;const q=i(!0),E=i(null),[I,F]=t(!1),[R]=t(n()),[Z,$]=t(),[z,H]=t(V),[P,D]=t(!1),[W,G]=t(!1),[J,K]=t(0);return d((()=>{if(Z&&Z.actualValue)if(m){if(H((e=>{return{actualValue:(a=e.actualValue,l=Z.actualValue,r=J,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),E.current){K(E.current.selectionStart);const e=J+Z.actualValue.length+2;E.current.setSelectionRange(e,e),K(e)}}else H((e=>({actualValue:Z.actualValue,variableType:Z.variableType,needsFetching:Z.needsFetching})))}),[Z]),d((()=>{q.current?q.current=!1:g(z)}),[z]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(z.actualValue)},{children:[l(p,{isRequired:M,hintText:O,type:null!=s?s:"text",id:R,ref:E,skipFocus:!0,isActive:I,value:z.actualValue,validate:e=>[!0,""],errorMessage:w,noMaxCharCheck:N,maxCharLimit:A,labelText:B,labelElement:L,placeholder:x||"Add a value",onClick:e=>{E.current&&K(E.current.selectionStart)},onChangeText:(e,a)=>{if(E.current&&K(E.current.selectionStart),f){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||H({actualValue:"",variableType:"string"})}else H(m?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{F(!0),G(!0),document.getElementById("varList")&&!P&&D(!0)},onBlur:e=>{var a,l,r,i,t,d,o;null==y||y(e,z),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(E.current&&E.current.focus(),F(!0)):"search-bar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?F(!0):(F(!1),D(!1),G(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[z.actualValue&&C&&l("div",Object.assign({style:{marginTop:4}},{children:l(h,{children:`This value is of type ${z.variableType}`})})),j&&W&&l("div",Object.assign({style:{marginTop:w||O?"-24px":"0px"}},{children:l(v,Object.assign({id:"addVar",onClick:()=>{D(!P)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!S&&P&&l(u,{data:T,showVariable:!0,setShowVariable:()=>{D(!1)},variableValue:Z,setVariableValue:$,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?E.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==R&&(D(!1),G(!1),F(!1)):(D(!1),G(!1),F(!1))}})]})),S&&P&&l(c,{zIndex:2e3,data:null!=T?T:[],showVariable:P,setShowVariable:()=>{D(!1)},placeholder:"Add a variable",customTrigger:e=>{$({actualValue:e.actualValue,variableType:"string"}),H(e)},onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?E.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==R&&(D(!1),G(!1),F(!1)):(D(!1),G(!1),F(!1))}})]})},b=o.div`
+import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as t,useEffect as d}from"react";import o from"styled-components";import{v4 as n}from"uuid";import{COLORS as s}from"../../constants/Theme.js";import{AddVariableV2SideModal as u}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as c}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as h}from"../TypographyStyle.js";const m=o=>{let{type:s,allowMix:m,onChange:g,prevVariable:V,variablesList:T,onBlur:y,onlyVariables:f,placeHolder:x,showAddButton:j=!0,showHelp:w,showSideVariablePanel:C,errorMessage:S,showSideModal:k,maxCharLimit:A,noMaxCharCheck:N,labelText:B,labelElement:E,isRequired:L=!1,hintText:M,onEnterPress:O}=o;const q=i(!0),I=i(null),[F,R]=t(!1),[P]=t(n()),[Z,$]=t(),[z,D]=t(V),[H,K]=t(!1),[W,G]=t(!1),[J,Q]=t(0);return d((()=>{if(Z&&Z.actualValue)if(m){if(D((e=>{return{actualValue:(a=e.actualValue,l=Z.actualValue,r=J,a.slice(0,r)+l+a.slice(r)),variableType:"string"};var a,l,r})),I.current){Q(I.current.selectionStart);const e=J+Z.actualValue.length+2;I.current.setSelectionRange(e,e),Q(e)}}else D((e=>({actualValue:Z.actualValue,variableType:Z.variableType,needsFetching:Z.needsFetching})))}),[Z]),d((()=>{q.current?q.current=!1:g(z)}),[z]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(z.actualValue),onKeyDown:e=>{"Enter"===e.key&&(null==O||O(z.actualValue))}},{children:[l(p,{isRequired:L,hintText:M,type:null!=s?s:"text",id:P,ref:I,skipFocus:!0,isActive:F,value:z.actualValue,validate:e=>[!0,""],errorMessage:S,noMaxCharCheck:N,maxCharLimit:A,labelText:B,labelElement:E,placeholder:x||"Add a value",onClick:e=>{I.current&&Q(I.current.selectionStart)},onChangeText:(e,a)=>{if(I.current&&Q(I.current.selectionStart),f){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||D({actualValue:"",variableType:"string"})}else D(m?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{R(!0),G(!0),document.getElementById("varList")&&!H&&K(!0)},onBlur:e=>{var a,l,r,i,t,d,o;null==y||y(e,z),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(I.current&&I.current.focus(),R(!0)):"search-bar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?R(!0):(R(!1),K(!1),G(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[z.actualValue&&w&&l("div",Object.assign({style:{marginTop:4}},{children:l(h,{children:`This value is of type ${z.variableType}`})})),j&&W&&l("div",Object.assign({style:{marginTop:S||M?"-24px":"0px"}},{children:l(v,Object.assign({id:"addVar",onClick:()=>{K(!H)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!C&&H&&l(c,{data:T,showVariable:!0,setShowVariable:()=>{K(!1)},variableValue:Z,setVariableValue:$,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?I.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==P&&(K(!1),G(!1),R(!1)):(K(!1),G(!1),R(!1))}})]})),C&&H&&l(u,{zIndex:2e3,data:null!=T?T:[],showVariable:H,setShowVariable:()=>{K(!1)},placeholder:"Add a variable",customTrigger:e=>{$({actualValue:e.actualValue,variableType:"string"}),D(e)},onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?I.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==P&&(K(!1),G(!1),R(!1)):(K(!1),G(!1),R(!1))}})]})},b=o.div`
 	position: relative;
 	margin-bottom: 16px;
 	input {

package/dist/esm/components/modals/styledModal.d.ts

@@ -22,4 +22,5 @@ export declare const StyledModal: React.FC<{
     onBackPress?: () => void;
     footerContainerStyle?: React.CSSProperties;
     id?: string;
+    modalHeaderStyles?: React.CSSProperties;
 }>;