@bikdotai/bik-component-library 0.0.709 → 0.0.710-beta.1

package/dist/esm/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.d.ts

@@ -1,19 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { ButtonProps } from '../button/model';
-export interface StepsDetails {
-    info: string;
-    hideBullet?: boolean;
-}
-export declare const AccessTokenTroubleshootDialog: React.FC<{
-    onCancel: () => void;
-    titleIconContainerStyles?: CSSProperties;
-    title: string;
-    TitleIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    desc: string;
-    primaryButton: ButtonProps | undefined;
-    isModalOpen: boolean;
-    stepsDetails?: StepsDetails[];
-    titleIconColor?: string;
-    content?: string;
-    secondaryButtonText?: string;
-}>;

package/dist/esm/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import t from"../../assets/icons/alert.svg.js";import{COLORS as s}from"../../constants/Theme.js";import{StyledModal as n}from"../modals/styledModal.js";import{TitleMedium as o,BodySecondary as l,TitleSmall as r,BodyCaption as i}from"../TypographyStyle.js";import{Header as a,IconContainer as c,Description as j,StepsContainer as d,EachStep as h,BulletWrapper as m,Bullet as x}from"./AccessTokenTroubleshootDialog.styles.js";const u=t=>{let{info:s,hideBullet:n,last:o}=t;return e.jsxs(h,Object.assign({last:o},{children:[!n&&e.jsx(m,{children:e.jsx(x,{})}),e.jsx(i,{dangerouslySetInnerHTML:{__html:s}})]}))},g=i=>{let{onCancel:h,titleIconContainerStyles:m,isModalOpen:x,title:g,desc:p,primaryButton:y,TitleIcon:T,stepsDetails:f,titleIconColor:b,secondaryButtonText:B,content:_}=i;return e.jsxs(n,Object.assign({open:!!x,primaryButton:y?Object.assign({},y):void 0,secondaryButton:{buttonText:null!=B?B:"Cancel",onClick:h,buttonType:"tertiaryGray"},onClose:h},{children:[e.jsxs(a,{children:[e.jsx(c,Object.assign({style:Object.assign({},m)},{children:T?e.jsx(T,{width:18,height:18,color:b}):e.jsx(t,{width:18,height:18,color:s.content.negative})})),e.jsx(o,{children:g})]}),e.jsx(j,{children:e.jsx(l,{dangerouslySetInnerHTML:{__html:p}})}),e.jsxs(d,{children:[f&&!!f.length&&e.jsxs(e.Fragment,{children:[e.jsx(r,{children:"Follow the steps:"}),f.map(((t,s)=>e.jsx(u,{info:t.info,hideBullet:t.hideBullet,last:f.length-1===s},s)))]}),_&&e.jsx(l,{dangerouslySetInnerHTML:{__html:_}})]})]}))};export{g as AccessTokenTroubleshootDialog};

package/dist/esm/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.styles.d.ts

@@ -1,10 +0,0 @@
-export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StepsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EachStep: import("styled-components").StyledComponent<"div", any, {
-    last?: boolean | undefined;
-}, never>;
-export declare const BulletWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Bullet: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;

package/dist/esm/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.styles.js

@@ -1,50 +0,0 @@
-import t from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const r=t.div`
-	display: flex;
-	gap: 12;
-	align-items: center;
-	margin-bottom: 8px;
-	padding: 34px 32px 0px 32px;
-`,o=t.div`
-	background-color: ${i.background.negative.light};
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 28px;
-	height: 28px;
-	border-radius: 100%;
-	margin-right: 12px;
-`,p=t.div`
-	padding-bottom: 32px;
-	border-bottom: 1px solid ${i.stroke.primary};
-	margin-left: 32px;
-	margin-right: 40px;
-`,d=t.div`
-	padding: 32px;
-	padding-bottom: 24px;
-	border-bottom: 1px solid ${i.stroke.primary};
-`,e=t.div`
-	padding-top: 12px;
-	padding-bottom: 12px;
-	border-bottom: ${t=>t.last?"0px":"1px"} solid
-		${i.stroke.primary};
-	display: flex;
-	gap: 9px;
-`,a=t.div`
-	background-color: ${i.surface.hovered};
-	width: 14px;
-	height: 14px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 100%;
-`,n=t.div`
-	width: 8px;
-	height: 8px;
-	background-color: ${i.content.primary};
-	border-radius: 100%;
-`;t.img`
-	width: 16px;
-	height: 16px;
-	margin-left: 6px;
-	margin-right: 4px;
-`;export{n as Bullet,a as BulletWrapper,p as Description,e as EachStep,r as Header,o as IconContainer,d as StepsContainer};

package/dist/esm/components/access-token-troubleshoot-dialog/index.d.ts

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

package/dist/esm/components/accordion/Accordion.d.ts

@@ -1,35 +0,0 @@
-import React, { ReactNode } from 'react';
-export type HeaderButton = {
-    icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    title: string;
-    onClick: () => void;
-    style?: React.CSSProperties;
-};
-export interface AccordionProps {
-    header: JSX.Element | string;
-    subHeader?: JSX.Element | string;
-    caption?: string;
-    children: ReactNode;
-    width?: string;
-    rightActionComponent?: JSX.Element;
-    contentMargin?: string;
-    skipHoverHeader?: boolean;
-    headerPadding?: string;
-    showBorders?: boolean;
-    backgroundColor?: string;
-    refresh?: number | boolean;
-    autoOpen?: boolean;
-    childrenMaxHeight?: number;
-    openDirection?: 'DOWN' | 'UP';
-    headerStyles?: React.CSSProperties;
-    onToggleAccordion?: (state: boolean) => void;
-    arrowColor?: string;
-    isOpen?: boolean;
-    buttonLinkText?: string;
-    onButtonLinkClick?: () => void;
-    captionStyle?: React.CSSProperties;
-    borderColor?: string;
-    borderRadius?: string;
-    headerButtons?: HeaderButton[];
-}
-export declare const BikAccordion: React.FC<AccordionProps>;

package/dist/esm/components/accordion/Accordion.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useState as r,useRef as o,useEffect as t}from"react";import{TitleRegular as n,BodySecondary as i}from"../TypographyStyle.js";import{Button as s}from"../button/Button.js";import{IconButton as c}from"../icon-button/IconButton.js";import l,{AccordionHeaderGroup as a,AccordionHeaderGroup2 as d}from"./Accordion.style.js";import u from"./AccordionArrow.js";const h=h=>{var v,g,p;const[m,j]=r(!1),x=o(null),b=o(null);t((()=>{h.autoOpen&&y(h.autoOpen,{})}),[h.autoOpen]),t((()=>{void 0!==h.isOpen&&y(h.isOpen,{})}),[h.isOpen]);const y=(e,r)=>{var o,t;b.current&&x.current&&("keydown"===r.type&&"Enter"!==r.key||(e!==m&&j(e),e?(b.current.style.maxHeight=(null!==(o=h.childrenMaxHeight)&&void 0!==o?o:b.current.scrollHeight)+"px",x.current.style.transform="rotate(180deg)",x.current.style.transition="transform 0.25s ease-in-out",b.current.style.transition="max-height 0.25s ease-in-out"):(b.current.style.maxHeight="",x.current.style.transform="rotate(0deg)",x.current.style.transition="transform 0.25s ease-in-out",b.current.style.transition="padding 0s"),null===(t=h.onToggleAccordion)||void 0===t||t.call(h,e)))};return t((()=>{const e=new MutationObserver((()=>{m&&b.current&&(b.current.style.maxHeight=b.current.scrollHeight+"px")}));return b.current&&e.observe(b.current,{childList:!0,subtree:!0}),()=>{e.disconnect()}}),[m]),t((()=>{var e;m&&(null==h?void 0:h.refresh)&&(null===(e=null==b?void 0:b.current)||void 0===e?void 0:e.scrollHeight)&&!h.childrenMaxHeight&&setTimeout((()=>{b.current.style.maxHeight=b.current.scrollHeight+"px"}),100)}),[m,null==h?void 0:h.refresh,null===(v=null==b?void 0:b.current)||void 0===v?void 0:v.scrollHeight]),e.jsxs(l,Object.assign({className:"accordion",isActive:m,width:null==h?void 0:h.width,contentMargin:null==h?void 0:h.contentMargin,headerPadding:h.headerPadding,skipHoverState:h.skipHoverHeader,showBorders:h.showBorders,borderColor:h.borderColor,backgroundColor:h.backgroundColor,openDirection:h.openDirection,borderRadius:h.borderRadius},{children:[e.jsxs("div",Object.assign({className:"accordion__overview "+(m?"active":""),onClick:e=>y(!m,e),onKeyDown:e=>y(!m,e),role:"button",tabIndex:0},{children:[!h.rightActionComponent&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({className:"accordion__overview__header",style:null!==(g=h.headerStyles)&&void 0!==g?g:{}},{children:[e.jsxs(a,{children:["string"==typeof h.header?e.jsx(n,{children:null==h?void 0:h.header}):h.header,h.buttonLinkText&&e.jsx(s,{buttonText:h.buttonLinkText,buttonType:"text",darkMode:!0,onClick:h.onButtonLinkClick})]}),e.jsxs(d,{children:[h.headerButtons&&e.jsx("div",Object.assign({className:"accordion__overview__header-buttons"},{children:null===(p=h.headerButtons)||void 0===p?void 0:p.map((r=>e.jsx(c,{Icon:r.icon,onClick:e=>{e.stopPropagation(),r.onClick()},width:16,height:16,style:r.style,title:r.title},r.title)))})),e.jsx(u,{arrowColor:h.arrowColor,isNewIcon:!0,ref:x})]})]})),(null==h?void 0:h.subHeader)?null==h?void 0:h.subHeader:null]}),h.rightActionComponent&&e.jsxs("div",Object.assign({className:"accordion__overview__header"},{children:[e.jsxs("div",Object.assign({className:"accordion__overview__title-wrapper"},{children:[e.jsx(u,{arrowColor:h.arrowColor,isNewIcon:!0,ref:x}),"string"==typeof h.header?e.jsx(n,{children:null==h?void 0:h.header}):h.header]})),e.jsx("div",Object.assign({onClick:e=>e.stopPropagation(),onKeyDown:e=>{"Enter"===e.key&&e.stopPropagation()},role:"button",tabIndex:0},{children:h.rightActionComponent}))]})),(null==h?void 0:h.caption)&&e.jsx("div",Object.assign({className:"accordion__overview__caption"},{children:e.jsx(i,{children:e.jsx("div",Object.assign({style:h.captionStyle},{children:h.caption}))})}))]})),e.jsx("div",Object.assign({ref:b,className:"accordion__content"},{children:h.children}))]}))};export{h as BikAccordion};

package/dist/esm/components/accordion/Accordion.style.d.ts

@@ -1,17 +0,0 @@
-import { AccordionProps } from './Accordion';
-declare const AccordionStyle: import("styled-components").StyledComponent<"div", any, {
-    isActive: boolean;
-    width?: string | undefined;
-    contentMargin?: string | undefined;
-    skipHoverState?: boolean | undefined;
-    headerPadding?: string | undefined;
-    showBorders?: boolean | undefined;
-    borderColor?: string | undefined;
-    borderRadius?: string | undefined;
-    backgroundColor?: string | undefined;
-    hasChildrenMaxHeight?: boolean | undefined;
-    openDirection?: AccordionProps['openDirection'];
-}, never>;
-export default AccordionStyle;
-export declare const AccordionHeaderGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AccordionHeaderGroup2: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/accordion/Accordion.style.js

@@ -1,50 +0,0 @@
-import e from"styled-components";import{COLORS as r}from"../../constants/Theme.js";const o=e.div`
-	width: ${e=>(null==e?void 0:e.width)||"100%"};
-	display: flex;
-	flex-direction: column;
-	border: ${e=>e.showBorders?"1px solid "+r.stroke.primary:""};
-	border-color: ${e=>e.borderColor||r.stroke.primary};
-	border-radius: ${e=>e.borderRadius?e.borderRadius:e.showBorders?"4px":""};
-	background: ${e=>e.backgroundColor||"unset"};
-	.accordion {
-		&__overview {
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-			padding: ${e=>e.headerPadding?e.headerPadding:"24px"};
-			border-bottom: ${e=>e.showBorders&&e.isActive?"1px solid "+r.stroke.primary:""};
-			border-color: ${e=>e.borderColor||r.stroke.primary};
-			&__header {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				justify-content: space-between;
-			}
-			&__header-buttons {
-				display: flex;
-				gap: 8px;
-			}
-			&__title-wrapper {
-				display: flex;
-				gap: 8px;
-			}
-			:hover {
-				background: ${e=>e.skipHoverState?null:r.surface.subdued};
-				border-radius: ${e=>e.skipHoverState?null:"4px"};
-			}
-		}
-		&__content {
-			${e=>e.isActive?{margin:(null==e?void 0:e.contentMargin)||"0px"}:{}};
-			overflow: ${e=>e.hasChildrenMaxHeight?"scroll":"hidden"};
-			max-height: 0;
-			order: ${e=>"UP"===e.openDirection?-1:0};
-		}
-	}
-`,d=e.div`
-	display: flex;
-	align-items: center;
-	gap: 24px;
-`,i=e.div`
-	display: flex;
-	gap: 16px;
-`;export{d as AccordionHeaderGroup,i as AccordionHeaderGroup2,o as default};

package/dist/esm/components/accordion/AccordionArrow.d.ts

@@ -1,7 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-interface BikAccordionArrowProps extends HTMLAttributes<HTMLDivElement> {
-    isNewIcon: boolean;
-    arrowColor?: string;
-}
-declare const BikAccordionArrow: React.ForwardRefExoticComponent<BikAccordionArrowProps & React.RefAttributes<HTMLDivElement>>;
-export default BikAccordionArrow;

package/dist/esm/components/accordion/AccordionArrow.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import r from"react";const o=r.forwardRef(((r,o)=>{var l,i;return e.jsxs("div",Object.assign({ref:o,className:"d-flex align-items-center"},{children:[!r.isNewIcon&&e.jsx("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{d:"M7.7071 10.7071C7.07713 10.0771 7.5233 9 8.41421 9H15.5858C16.4767 9 16.9228 10.0771 16.2929 10.7071L12.7071 14.2929C12.3166 14.6834 11.6834 14.6834 11.2929 14.2929L7.7071 10.7071Z",fill:null!==(l=r.arrowColor)&&void 0!==l?l:"currentColor"})})),r.isNewIcon&&e.jsx("svg",Object.assign({width:"10",height:"6",viewBox:"0 0 10 6",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.528758 0.52827C0.789108 0.26792 1.21122 0.26792 1.47157 0.52827L5.00016 4.05687L8.52876 0.52827C8.78911 0.26792 9.21122 0.26792 9.47157 0.52827C9.73192 0.788619 9.73192 1.21073 9.47157 1.47108L5.47157 5.47108C5.21122 5.73143 4.78911 5.73143 4.52876 5.47108L0.528758 1.47108C0.268409 1.21073 0.268409 0.788619 0.528758 0.52827Z",fill:null!==(i=r.arrowColor)&&void 0!==i?i:"currentColor"})}))]}))}));o.displayName="BikAccordionArrow";export{o as default};

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

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

package/dist/esm/components/action-button/ActionButton.styled.d.ts

@@ -1,7 +0,0 @@
-export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, {
-    isSelected: boolean;
-    isError: boolean;
-    border: string;
-    isConfigured: boolean;
-    width?: string | undefined;
-}, never>;

package/dist/esm/components/action-button/ActionButton.styled.js

@@ -1,23 +0,0 @@
-import r from"styled-components";import{BASE_COLORS as e}from"../../constants/Theme.js";const o=r.div`
-	width: ${r=>{var e;return null!==(e=r.width)&&void 0!==e?e:"100%"}};
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	gap: 8px;
-	padding: 14px 0px;
-	box-shadow: ${r=>r.isConfigured||r.isSelected||r.isError?"0px 2px 8px 0px #0000001f":""};
-	background-color: white;
-	border-radius: 4px;
-	border: ${r=>{var o;return null!==(o=r.border)&&void 0!==o?o:`1px solid ${e.grayscale[200]}`}};
-	cursor: pointer;
-	:hover {
-		background-color: ${r=>r.isSelected||r.isError?"":e.grayscale[200]};
-		border: ${r=>r.isSelected||r.isError?"":r.isConfigured?`1px solid ${e.grayscale[400]}`:`1px dashed ${e.grayscale[400]}`};
-	}
-
-	.action__icon {
-		height: 20px;
-		width: 20px;
-	}
-`;export{o as ActionButtonContainer};

package/dist/esm/components/action-button/ActionButtons.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface ActionButtonInterface {
-    state: 'CONFIGURED' | 'NOT-CONFIGURED';
-    buttonText: string;
-    isSelected: boolean;
-    isError: boolean;
-    onClick: () => void;
-    icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-}
-export declare const ActionButtons: React.FC<ActionButtonInterface>;

package/dist/esm/components/action-button/ActionButtons.js

@@ -1 +0,0 @@
-import{j as r}from"../../node_modules/react/jsx-runtime.js";import{BASE_COLORS as e}from"../../constants/Theme.js";import o from"../../assets/icons/similar.svg.js";import{BodyPrimary as s}from"../TypographyStyle.js";import{ActionButtonContainer as i}from"./ActionButton.styled.js";const t=t=>{let{state:l,buttonText:c,icon:a=o,isSelected:d,isError:n,onClick:g}=t;const{color:b,border:p}="CONFIGURED"===l?(r=>{let{isSelected:o,isError:s}=r;return o&&s?{color:e.negative[700],border:`1px solid ${e.negative[700]}`}:o?{color:e.brand[500],border:`1px solid ${e.brand[500]}`}:s?{color:e.grayscale[900],border:`1px solid ${e.negative[700]}`}:{color:e.grayscale[900],border:`1px solid ${e.grayscale[200]}`}})({isSelected:d,isError:n}):(r=>{let{isSelected:o,isError:s}=r;return o&&s?{color:e.negative[700],border:`1px solid ${e.negative[700]}`}:o?{color:e.brand[500],border:`1px solid ${e.brand[500]}`}:s?{color:e.grayscale[700],border:`1px solid ${e.negative[700]}`}:{color:e.grayscale[700],border:`1px dashed ${e.grayscale[200]}`}})({isSelected:d,isError:n}),m={height:20,width:20,color:b,style:{display:"block"},className:"icon"};return r.jsxs(i,Object.assign({isSelected:d,isError:n,border:p,isConfigured:"CONFIGURED"===l,onClick:g},{children:[r.jsx("div",Object.assign({className:"action__icon"},{children:r.jsx(a,Object.assign({},m))})),r.jsx(s,Object.assign({style:{fontWeight:600,color:b}},{children:c}))]}))};export{t as ActionButtons};

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

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

package/dist/esm/components/add-variableV2/AddVariableBox.styled.d.ts

@@ -1 +0,0 @@
-export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/esm/components/add-variableV2/AddVariableBox.styled.js

@@ -1,25 +0,0 @@
-import t from"styled-components";const o=t.button`
-	padding: 2px 8px;
-	position: absolute;
-	right: 0px;
-	cursor: pointer;
-	color: white;
-	background-color: black;
-	width: fit-content;
-	float: right;
-	margin-top: 0px;
-	font-family: Inter;
-	font-style: normal;
-	font-weight: 600;
-	font-size: 14px;
-	line-height: 20px;
-	border-radius: 4px;
-	border: 1px solid #ccc;
-	margin-right: 1px;
-	z-index: 100;
-
-	.add {
-		display: flex;
-		align-items: center;
-	}
-`;export{o as AddVariableStyled};

package/dist/esm/components/add-variableV2/AddVariableV2.d.ts

@@ -1,58 +0,0 @@
-import React from 'react';
-export interface VariableListInterfaceV2 {
-    displayName: string;
-    description: string;
-    orderId: number;
-    variables?: any;
-}
-export interface Variable {
-    description?: string;
-    defaultValue?: string;
-    displayName: string;
-    actualValue: string;
-    variableType: string;
-    isAvailable: boolean;
-    actualValueEval?: string;
-    isSubHeader?: boolean;
-    variables?: {
-        [key: string]: Variable;
-    };
-    needsFetching?: boolean;
-}
-export interface AddVariableProps {
-    data: VariableListInterfaceV2[];
-    showVariable: any;
-    setShowVariable: any;
-    variableValue?: any;
-    setVariableValue?: any;
-    placeholder: string;
-    customTrigger?: any;
-    isSearchRequired?: boolean;
-    isModalState?: boolean;
-    leftPosition?: number;
-    topPosition?: string;
-    pickerSize?: string;
-    enableVariable?: boolean;
-    isEvaluationList?: boolean;
-    onSearchBlur?: (e: any) => void;
-    id?: string;
-    selectWithTypes?: boolean;
-    positionStrategy?: 'static' | 'fixed';
-    zindex?: number;
-    hasHeader?: boolean;
-    height?: string;
-    needsBorder?: boolean;
-    reRender?: string;
-    styledCloseBtn?: boolean;
-    width?: string;
-    readonly?: boolean;
-}
-type Props = AddVariableProps;
-export interface VariableBoxProps {
-    item: Variable;
-    raw?: string;
-    parentKey?: string;
-    readonly?: boolean;
-}
-export declare const AddVariableV2: React.FC<Props>;
-export {};

package/dist/esm/components/add-variableV2/AddVariableV2.js

@@ -1 +0,0 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{j as s}from"../../node_modules/react/jsx-runtime.js";import a from"../../assets/icons/back_icon.svg.js";import i from"../../assets/icons/chevronRightAlt.svg.js";import l from"../../assets/icons/cross.svg.js";import t from"../../assets/icons/plus.svg.js";import n from"../../assets/icons/undo.svg.js";import{memo as r,useState as o,useEffect as c}from"react";import{AddVariableStyled as d}from"./AddVariableV2.styled.js";import{Button as b}from"../button/Button.js";import{IconButton as m}from"../icon-button/IconButton.js";import{SearchBar as j}from"../searchBar/searchBar.js";import{Tooltip as v}from"../tooltips/Tooltip.js";import{COLORS as g}from"../../constants/Theme.js";import{CloseButtonContainer as h}from"../modals/modal.styled.js";import{Switch as p}from"../switch/Switch.js";import{BodySecondary as u,TitleSmall as y,BodyCaption as x}from"../TypographyStyle.js";const f=r((r=>{const{data:f,hasHeader:O=!0,needsBorder:N=!0,styledCloseBtn:V=!1,readonly:w=!1}=r,[S,_]=o({}),[C,T]=o(),[k,F]=o(""),[L,B]=o(""),[I,A]=o(!0),E=/.*\..*/,[H,z]=o(r.data),[P,$]=o(!0);c((()=>{const e={};f.forEach((s=>{e[s.displayName]=[]})),T(e)}),[f]),c((()=>{D(!0)}),[]),c((()=>{D(P,!k)}),[S,k]),c((()=>{$(!0),B(""),M([],k),T((e=>Object.assign(Object.assign({},e),{[k]:[]}))),F("");const e=r.data.map((e=>q(e))).filter((e=>null!==e));z(e),e.length>0?A(!0):A(!1)}),[r.reRender]),c((()=>{let e=r.data;k&&(e=[S[k]]);R(e,P).length>0?A(!0):A(!1)}),[L]);const R=function(e){let s=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((a=>{var i;return(null===(i=e.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(L.toLowerCase()))&&(!s||e.variables[a].isAvailable===s)||W(e.variables[a])}))))},M=(e,s)=>{const a=f.find((e=>e.displayName===s));if(a){let i=a;e.forEach(((e,s)=>{i=i.variables[e]})),_((e=>Object.assign(Object.assign({},e),{[s]:i})))}},W=e=>{let s=!1;if(e.isSubHeader&&e.variables){const a=Object.keys(e.variables);for(let i=0;i<a.length;i++){const l=a[i];if(e.variables&&e.variables[l].displayName.toLowerCase().includes(L.toLowerCase())&&e.variables[l].isAvailable===P){s=!0;break}}}return s},D=function(e){let s=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if($(e),e){let a=[];if(!k||s)a=r.data.map((e=>q(e))).filter((e=>null!==e));else{const e=S[k];a=r.data.filter((e=>e.displayName===k)).map((s=>q(s,e))).filter((e=>null!=e))}z(a),L&&(a=R(a,e)),a.length>0?A(!0):A(!1)}else if(z(r.data),L){R(r.data,e).length>0?A(!0):A(!1)}else A(!0)};function q(e,s){let a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(s)for(const i in e.variables)if(e.variables[i].displayName===s.displayName)for(const s in e.variables[i].variables)e.variables[i].variables[s].isAvailable&&(a[s]=e.variables[i].variables[s]);else e.variables[i].isSubHeader&&q(e.variables[i],s,a);else for(const s in e.variables)e.variables[s].isAvailable&&(a[s]=e.variables[s]);return 0===Object.keys(a).length?null:Object.assign(Object.assign({},e),{variables:a})}const G=e=>{const a=e.item.description;return e.readonly?s.jsx("div",{children:s.jsx(J,{item:e.item,readonly:e.readonly})}):s.jsx(s.Fragment,{children:s.jsx(v,Object.assign({body:"",tooltipContent:s.jsx(x,Object.assign({color:g.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?a?`• ${a}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:s.jsx("div",{children:s.jsx(J,{item:e.item})})}))})},J=e=>s.jsx(b,{darkMode:r.enableVariable?r.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:t,TrailingIcon:()=>e.item.isSubHeader?s.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:s.jsx(i,{})})):s.jsx(s.Fragment,{}),buttonText:e.item.displayName}),K=(e,a)=>P&&!e.isAvailable?s.jsx(s.Fragment,{}):s.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{R([e],P).length||A(!1),B("");const s=[...C[k],a];M(s,k),T((e=>Object.assign(Object.assign({},e),{[k]:s})))}:()=>{r.customTrigger?(r.customTrigger(e),r.setShowVariable(!1)):r.isEvaluationList?U(e):r.setVariableValue(r.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:s.jsx(G,{item:e,readonly:w})})),Q=(e,s)=>{const a=[...C[e.displayName],s];M(a,e.displayName),T((s=>Object.assign(Object.assign({},s),{[e.displayName]:a}))),F(e.displayName)},U=e=>{if(e.actualValue.match(E)){const s=e.actualValue.replace("{{","").replace("}}","").split(".");let a=s[0];s.forEach(((e,s)=>{if(0===s)return;const i=(e=>/\w+\[\d+\]/g.test(e))(e);if(i){const s=e.match(/(\w+)\[(\d+)\]/);if(s){const e=s[1],i=s[2];a+=`['${e}'][${i}]`}}else a+=`['${e}']`})),r.setVariableValue(r.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}else{const s=e.actualValueEval?e.actualValueEval:e.actualValue;r.setVariableValue(r.selectWithTypes?{actualValue:s,variableType:e.variableType,needsFetching:e.needsFetching}:s)}},X=(e,s)=>{if(r.customTrigger)r.customTrigger(e.variables[s]),r.setShowVariable(!1);else if(r.isEvaluationList){const a=e.variables[s];U(a)}else r.setVariableValue(r.selectWithTypes?{actualValue:e.variables[s].actualValue,variableType:e.variables[s].variableType,needsFetching:e.variables[s].needsFetching}:e.variables[s].actualValue)},Y=r.isModalState?void 0:{top:`${r.topPosition?r.topPosition:"small"===r.pickerSize?"300px":"60px"}`,left:`${r.leftPosition?r.leftPosition+24:430}px`};return s.jsx("div",Object.assign({id:"varList",tabIndex:-1},{children:s.jsxs(d,Object.assign({style:Y,onClick:e=>{e.stopPropagation()},pickerSize:r.pickerSize||"large",isModalState:r.isModalState,positionStrategy:r.positionStrategy,zIndex:r.zindex,height:r.height,needsBorder:N,width:r.width},{children:[V&&s.jsx(h,Object.assign({onClick:()=>{r.setShowVariable(!1)},style:{zIndex:300}},{children:s.jsx(l,{height:20,width:20,color:g.content.secondary})})),r.showVariable&&s.jsxs("div",Object.assign({className:"popup"},{children:[s.jsxs("div",Object.assign({className:"sticky__bar"},{children:[O&&s.jsxs("div",Object.assign({className:"header__bar"},{children:[s.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!V&&s.jsx("div",Object.assign({onClick:()=>{r.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:s.jsx(m,{iconButtonType:"default",Icon:l})}))]})),s.jsxs("div",Object.assign({className:"search__bar",onBlur:e=>{r.onSearchBlur&&r.onSearchBlur(e)}},{children:[s.jsx(j,{width:"100%",isEnabled:!0,onChange:e=>{B(e)},onEnter:()=>{},reset:!L,placeholder:"Search...",variant:"default"}),s.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[s.jsx(u,Object.assign({style:{color:g.content.secondary}},{children:"Show only recommended variables"})),s.jsx(p,{value:P,onValueChange:s=>e(void 0,void 0,void 0,(function*(){return yield D(s)}))})]}))]})),k&&C[k].length>0&&s.jsxs("div",Object.assign({className:"nav__bar"},{children:[s.jsxs("div",Object.assign({className:"left__nav"},{children:[s.jsx(m,{Icon:a,style:{color:"#919191",display:"flex"},onClick:()=>{B("");const e=C[k].slice(0,-1);M(e,k),T((s=>Object.assign(Object.assign({},s),{[k]:e}))),e.length||F("")}}),s.jsxs("div",Object.assign({className:"block"},{children:[s.jsx(y,{children:S[k].displayName}),S[k].description&&s.jsx(x,{children:S[k].description})]}))]})),s.jsxs("div",Object.assign({className:"right__nav"},{children:[s.jsx(m,{Icon:n,style:{display:"flex"},onClick:()=>{B(""),M([],k),T((e=>Object.assign(Object.assign({},e),{[k]:[]}))),F("")}}),s.jsx("div",{children:"First page"})]}))]}))]})),!I&&s.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[s.jsx(y,{children:"No results found!"}),P?s.jsx(x,{children:"Sorry we could not find any recommended variables"}):s.jsx(x,{children:`Sorry we could not find any results for "${L}"`})]})),s.jsx("div",Object.assign({className:"wrapper"},{children:s.jsx("div",Object.assign({className:"list__map"},{children:s.jsxs("div",Object.assign({className:"items"},{children:[!k&&H.map((e=>{let a=[];return L&&(a=Object.keys(e.variables).filter((s=>{var a;return(null===(a=e.variables[s].displayName)||void 0===a?void 0:a.toLowerCase().includes(L.toLowerCase()))||W(e.variables[s])}))),s.jsxs(s.Fragment,{children:[L?a.length>0?s.jsxs("div",Object.assign({className:"block"},{children:[s.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),s.jsx(x,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):s.jsx(s.Fragment,{}):s.jsxs("div",Object.assign({className:"block"},{children:[s.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),s.jsx(x,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((a=>{var i;return L?(null===(i=e.variables[a].displayName)||void 0===i?void 0:i.toLowerCase().includes(L.toLowerCase()))||W(e.variables[a])?s.jsx("div",Object.assign({onClick:e.variables[a].isSubHeader?()=>Q(e,a):()=>X(e,a)},{children:s.jsx(G,{item:e.variables[a],readonly:w})})):s.jsx(s.Fragment,{}):s.jsx("div",Object.assign({onClick:e.variables[a].isSubHeader?()=>Q(e,a):()=>X(e,a)},{children:s.jsx(G,{item:e.variables[a],readonly:w})}))}))]})})),k&&s.jsx("div",Object.assign({className:"list__map"},{children:s.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(S[k].variables).map(((e,a)=>{var i;return L?(null===(i=S[k].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(L.toLowerCase()))||W(S[k].variables[e])?K(S[k].variables[e],e):s.jsx(s.Fragment,{}):K(S[k].variables[e],e)}))}))}))]}))}))})),s.jsx("div",{className:"bottom__padding"})]}))]}))}))}),((e,s)=>e.enableVariable===s.enableVariable&&(e.leftPosition===s.leftPosition&&e.reRender===s.reRender)));export{f as AddVariableV2};

package/dist/esm/components/add-variableV2/AddVariableV2.styled.d.ts

@@ -1,12 +0,0 @@
-export declare const AddVariableStyled: import("styled-components").StyledComponent<"div", any, {
-    pickerSize: string;
-    isModalState?: boolean | undefined;
-    zIndex?: number | undefined;
-    positionStrategy?: string | undefined;
-    height?: string | undefined;
-    needsBorder?: boolean | undefined;
-    width?: string | undefined;
-}, never>;
-export declare const VariableBoxStyled: import("styled-components").StyledComponent<"div", any, {
-    isAvailable?: boolean | undefined;
-}, never>;

package/dist/esm/components/add-variableV2/AddVariableV2.styled.js

@@ -1,164 +0,0 @@
-import e from"styled-components";const o=e.div`
-	position: ${e=>e.positionStrategy?e.positionStrategy:"fixed"};
-	z-index: ${e=>e.zIndex?e.zIndex:250};
-	*::-webkit-scrollbar {
-		display: none;
-	}
-	* {
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-	.popup {
-		background: white;
-		width: ${e=>e.width?e.width:e.isModalState?"566px":"480px"};
-		height: ${e=>e.isModalState?"100vh":e.height?e.height:"small"===e.pickerSize?"40vh":"90vh"};
-		border: ${e=>e.needsBorder?e.isModalState?"unset":"1px solid #e0e0e0":"none"};
-		border-radius: 8px;
-		overflow-y: scroll;
-		.sticky__bar {
-			z-index: 10;
-			position: sticky;
-			top: 0;
-			background: white;
-
-			.header__bar {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				padding: 24px 24px 16px 24px;
-				border-bottom: 1px solid var(--stroke-color-stroke-primary, #e0e0e0);
-				.add__variable {
-					font-family: 'Inter';
-					font-style: normal;
-					font-weight: 600;
-					font-size: 20px;
-					line-height: 24px;
-
-					color: #212121;
-				}
-			}
-
-			.search__bar {
-				padding: 24px 24px 8px 24px;
-				background-color: #fafafa;
-				border-bottom: 1px solid var(--stroke-color-stroke-primary, #e0e0e0);
-			}
-			.nav__bar {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-				border-bottom: 1px solid var(--stroke-color-stroke-primary, #e0e0e0);
-				background: var(--surface-color-surface-hovered, #f0f0f0);
-				padding: 10px 24px;
-
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-
-				line-height: 20px;
-
-				.left__nav {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					color: var(--content-color-content-primary, #212121);
-					cursor: pointer;
-				}
-				.right__nav {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					font-weight: 400;
-					color: var(--content-color-content-secondary, #616161);
-					cursor: pointer;
-				}
-			}
-		}
-		hr {
-			margin: 0;
-			border: 0.2px solid #e0e0e0;
-		}
-		.wrapper {
-			padding: 4px 24px 16px 24px;
-			.search__bar {
-				padding-bottom: 16px;
-				input {
-					width: 100%;
-					padding: 6px 8px;
-					border: 1px solid #e0e0e0;
-					border-radius: 4px;
-					background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F5bc8962e-af88-4692-80f1-631ac4a5c6c7?alt=media&token=7931b07d-cb55-43aa-be75-9ddac4b8ddad');
-					background-repeat: no-repeat;
-					background-position: 95% 50%;
-					background-size: 20px 20px;
-				}
-			}
-			.heading__font {
-				font-family: 'Inter';
-				font-style: normal;
-				font-weight: 600;
-				font-size: 16px;
-				line-height: 24px;
-				padding: 12px 0 0 0;
-				color: #212121;
-			}
-			.sub_heading__font {
-				font-family: 'Inter';
-				font-style: normal;
-				font-size: 12px;
-				line-height: 24px;
-				color: #212121;
-			}
-
-			.items {
-				display: flex;
-				flex-wrap: wrap;
-				grid-gap: 8px;
-				.block {
-					display: block;
-					min-width: 100%;
-					flex-wrap: nowrap;
-					width: 430px;
-				}
-			}
-		}
-		position: relative;
-
-		.bottom__padding {
-			background: white;
-			min-height: 30px;
-			width: 100%;
-			position: sticky;
-			z-index: 10;
-			bottom: 0px;
-		}
-	}
-`;e.div`
-	.box {
-		display: flex;
-		align-items: center;
-		cursor: pointer;
-		padding: 6px 12px 6px 8px;
-		gap: 8px;
-		width: auto;
-		height: 32px;
-
-		background: ${e=>(null==e?void 0:e.isAvailable)?"#f0f0f0":"#fafafa"};
-
-		border: 1px solid #e0e0e0;
-		border-radius: 4px;
-		.icon {
-			color: ${e=>(null==e?void 0:e.isAvailable)?"#212121":"#bdbdbd"};
-			display: flex;
-			align-items: center;
-		}
-		.variable__name {
-			font-family: 'Inter';
-			font-style: normal;
-			font-weight: 400;
-			font-size: 14px;
-			line-height: 20px;
-			color: ${e=>(null==e?void 0:e.isAvailable)?"#212121":"#bdbdbd"};
-		}
-	}
-`;export{o as AddVariableStyled};

package/dist/esm/components/add-variableV2/AddVariableV2SideModal.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { VariableListInterfaceV2 } from "./AddVariableV2";
-export interface VariableV2SideModalProps {
-    data: VariableListInterfaceV2[];
-    showVariable: any;
-    setShowVariable: any;
-    variableValue?: any;
-    setVariableValue?: any;
-    placeholder: string;
-    customTrigger?: any;
-    isSearchRequired?: boolean;
-    leftPosition?: number;
-    pickerSize?: string;
-    zIndex?: number;
-    onSearchBlur?: (e: any) => void;
-    id?: string;
-    selectWithTypes?: boolean;
-}
-export declare const AddVariableV2SideModal: React.FC<VariableV2SideModalProps>;

package/dist/esm/components/add-variableV2/AddVariableV2SideModal.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import a from"react-dom";import{AddVariableV2 as r}from"./AddVariableV2.js";import{SideModalStyle as l,SideModalContainer as o}from"../side-modal/SideModal.style.js";const t=t=>a.createPortal(e.jsx(l,Object.assign({zIndex:t.zIndex},{children:e.jsx(o,{children:e.jsx(r,{data:t.data,showVariable:t.showVariable,setShowVariable:t.setShowVariable,variableValue:t.variableValue,setVariableValue:t.setVariableValue,placeholder:"Add a variable",customTrigger:t.customTrigger,isModalState:!0,onSearchBlur:t.onSearchBlur,selectWithTypes:t.selectWithTypes})})})),document.body);export{t as AddVariableV2SideModal};

package/dist/esm/components/add-variableV2/index.d.ts

@@ -1,2 +0,0 @@
-export * from './AddVariableV2SideModal';
-export * from './AddVariableV2';

package/dist/esm/components/add-variableV2/types.d.ts

@@ -1,6 +0,0 @@
-export type SelectedVariable = {
-    actualValue: string;
-    variableType: VARIABLE_TYPES;
-    needsFetching?: boolean;
-};
-export type VARIABLE_TYPES = 'number' | 'string' | 'integer' | 'boolean' | 'list' | 'any';

package/dist/esm/components/ai-modals/ActivateBikAI.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { POD } from '../template-preview/models/WhatsAppTemplate';
-export declare const ActivateBikAi: React.FC<{
-    open: boolean;
-    onModalClose: () => void;
-    onRightBtnClick: () => void;
-    onLeftBtnClick: () => void;
-    source: POD.CHATBOT | POD.CRM;
-}>;

package/dist/esm/components/ai-modals/ActivateBikAI.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{COLORS as t}from"../../constants/Theme.js";import s from"../../assets/icons/graph.svg.js";import i from"../../assets/icons/sparkle.svg.js";import{Button as n}from"../button/Button.js";import{Modal as o}from"../modals/Modal.js";import{TitleMedium as r,TitleLarge as c,BodyPrimary as l}from"../TypographyStyle.js";const a=a=>{let{open:d,onModalClose:x,onRightBtnClick:g,onLeftBtnClick:p,source:j}=a;return e.jsx(o,Object.assign({open:d,centralContainerStyles:{height:"430px",width:"464px",borderRadius:"12px"},zIndex:40,onClose:x,closeOnOutsideClick:!0},{children:e.jsxs("div",{children:[e.jsxs("div",Object.assign({style:{height:"180px",width:"100%",backgroundColor:"rgba(142, 142, 142, 0.2)",display:"flex",justifyContent:"center",alignItems:"center",gap:"18px",padding:"24px"}},{children:[e.jsx("div",{children:e.jsx(s,{width:100,height:90})}),e.jsx("div",{children:"CHATBOT"===j?e.jsx(r,{children:"Unlock higher conversion and ease agent work with BIK.AI"}):e.jsx(r,{children:"Experience reduced Average Handling Time of your tickets with Bik.AI!"})})]})),e.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",gap:"16px",padding:"24px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"4px"}},{children:[e.jsx(c,{children:"Activate BIK AI"}),e.jsx(i,{width:32,height:32})]})),"CHATBOT"===j?e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e.jsx(l,Object.assign({color:"#888888"},{children:"Sync your Shopify Data to Bik.AI to supercharge it with"})),e.jsx(l,Object.assign({color:"#888888"},{children:"your store’s data to start personalizing it to your"})),e.jsx(l,Object.assign({color:"#888888"},{children:"customers!"}))]})):e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e.jsxs(l,Object.assign({color:"#888888"},{children:["Sync your Shopify Data to Bik.AI to supercharge it with"," "]})),e.jsx(l,Object.assign({color:"#888888"},{children:"your store’s data to start responding to customer"})),e.jsx(l,Object.assign({color:"#888888"},{children:"queries right away!"}))]}))]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px",paddingBottom:"24px",paddingLeft:"24px",paddingRight:"24px"}},{children:[e.jsx(n,{buttonText:"Learn More",buttonType:"text",size:"large",onClick:p}),e.jsx(n,{buttonText:"Sync Shopify Data",size:"large",style:{backgroundColor:t.background.brand},onClick:g})]}))]})}))};export{a as ActivateBikAi};

package/dist/esm/components/ai-modals/AiCreditsExhausted.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export declare const AiCreditsExhausted: React.FC<{
-    open: boolean;
-    onModalClose: () => void;
-    body?: string;
-    onRightBtnClick: () => void;
-    onLeftBtnClick: () => void;
-}>;

package/dist/esm/components/ai-modals/AiCreditsExhausted.js

@@ -1 +0,0 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{COLORS as t}from"../../constants/Theme.js";import s from"../../assets/icons/alert_triangle.svg.js";import{Button as n}from"../button/Button.js";import{Modal as i}from"../modals/Modal.js";import{ProgressBarComponent as o}from"../progress-bar/ProgressBarComponent.js";import{TitleLarge as r,TitleRegular as l,BodySecondary as c,BodyPrimary as d}from"../TypographyStyle.js";const a=a=>{let{open:x,onModalClose:p,body:j,onRightBtnClick:g,onLeftBtnClick:h}=a;return e.jsx(i,Object.assign({open:x,centralContainerStyles:{width:"498px",height:"312px",borderRadius:"12px"},onClose:p,closeOnOutsideClick:!0,zIndex:40},{children:e.jsxs("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column"}},{children:[e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"center"}},{children:e.jsx(r,{children:"Free AI Credits Exhausted"})})),e.jsx("div",{style:{height:"24px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px"}},{children:[e.jsx(s,{color:t.content.negative,width:20,height:20}),e.jsx("div",{style:{width:"8px"}}),e.jsx(l,{children:"0/100"}),e.jsx(c,Object.assign({color:t.content.secondary},{children:"Free Credits left"}))]})),e.jsx(o,{completed:100,isAnimated:!1,height:16,color:t.content.negative})]})),e.jsx("div",{style:{height:"24px"}}),e.jsx(d,Object.assign({color:t.content.secondary},{children:j||"Contact support to add credits to generate replies using AI, and enjoy continued AI assistance!"})),e.jsx("div",{style:{height:"44px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e.jsx(n,{buttonText:"Learn More",buttonType:"text",size:"small",onClick:h}),e.jsx(n,{buttonText:"Contact Support",size:"small",style:{backgroundColor:t.background.brand},onClick:g})]}))]}))}))};export{a as AiCreditsExhausted};