@bikdotai/bik-component-library 0.0.788-beta.7 → 0.0.788-beta.8

package/dist/esm/components/feature-announcements/types/feature.types.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Firestore Timestamp type
+ */
+export interface FirestoreTimestamp {
+    seconds: number;
+    nanoseconds?: number;
+}
+/**
+ * Button styling configuration
+ */
+export interface ButtonStyle {
+    textColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+/**
+ * Primary button configuration
+ */
+export interface ButtonConfig {
+    text?: string;
+    action?: 'Play Video' | 'Open link';
+    redirectionUrl?: string;
+    style?: ButtonStyle;
+}
+/**
+ * Secondary button configuration
+ */
+export interface SecondaryButtonConfig {
+    text?: string;
+    action?: 'Open link' | 'Close popup' | '';
+    redirectionUrl?: string;
+    style?: ButtonStyle;
+}
+/**
+ * Feature announcement data model
+ */
+export interface FeatureAnnouncement {
+    id: string;
+    title: string;
+    body: string;
+    content: string;
+    buttonText: string;
+    displayImage: string;
+    featureTag: string;
+    featureUpdateType: 'Major' | 'Minor';
+    image: string;
+    module: string[];
+    pageUrls: string[];
+    productVideo: string;
+    redirectUrl: string;
+    updates: string;
+    visibility: boolean;
+    archived?: boolean;
+    createdAt: FirestoreTimestamp;
+    expirationDate?: FirestoreTimestamp | string | Date;
+    primaryButton?: ButtonConfig;
+    secondaryButton?: SecondaryButtonConfig;
+    padding?: string;
+}
+/**
+ * Store feature progress tracking
+ */
+export interface StoreFeatureProgress {
+    storeId: string;
+    viewedFeatures: Record<string, boolean>;
+}
+/**
+ * Feature update types
+ */
+export type FeatureUpdateType = 'Major' | 'Minor';
+/**
+ * Announcement event data (for tracking when announcement is shown)
+ */
+export interface AnnouncementEvent {
+    storeId: string;
+    announcementId: string;
+    announcementTitle: string;
+    imageUrl?: string;
+    videoUrl?: string;
+}
+/**
+ * Announcement interaction event data (for tracking button clicks)
+ */
+export interface AnnouncementInteractionEvent extends AnnouncementEvent {
+    buttonClicked: 'Primary' | 'Secondary' | 'Skip';
+    buttonName: string;
+    buttonUrl?: string;
+}

package/dist/esm/components/floating-input-dropdown/FloatingInputDropdown.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Placement } from "../tooltips";
+import { DropdownOption, OpenDropdownProps } from '../dropdown/type';
+import { FloaterProps } from '../floater/floater';
+import { InputProps } from '../input';
+type DropdownProps = OpenDropdownProps & {
+    isLoading?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onDropdownOpen?: () => void;
+    onDropdownVisbilityChange?: (isOpen: boolean) => void;
+    tooltipContent?: string;
+    tooltipDirection?: Placement;
+    showTooltipArrow?: boolean;
+};
+type FloatingInputDropdownProps = {
+    inputProps: InputProps;
+    dropdownProps: DropdownProps;
+    floaterProps: FloaterProps;
+    children?: React.ReactNode;
+    isVisible?: boolean;
+    onDropdownOptionClick?: (option: DropdownOption) => void;
+    onChangeText?: (text: string, event?: Event) => void;
+};
+export declare const FloatingInputDropdown: React.FC<FloatingInputDropdownProps>;
+export {};

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

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

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

@@ -0,0 +1,33 @@
+import { CompressImageOptions } from "../../image-compress";
+import { BikImageCropperProps } from "..";
+/**
+ * Todos
+ * 	- Add option to pass https url in the src / edit an image
+ */
+export interface BikImagePipelineProps {
+    fileTitle?: string;
+    cropOptions?: Partial<BikImageCropperProps>;
+    compressionOptions?: CompressImageOptions;
+    currentImage: {
+        src?: string;
+    };
+    options: {
+        upload: boolean;
+        crop?: boolean;
+        compress?: boolean;
+        uploadToFirestorage?: boolean;
+    };
+    onCancel: () => void;
+    onFinish: (base64String: string, file?: File, url?: string) => void;
+    fileUploadOptions?: {
+        path: string;
+        uploadProgress: number;
+        uploadFile: (file: File, path: string) => Promise<string>;
+        error?: string;
+        success?: boolean;
+    };
+    loadingStateOptions?: {
+        headerImage?: string;
+    };
+}
+export declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, loadingStateOptions, }: BikImagePipelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/input/ChipInput.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as r}from"react";import{COLORS as o}from"../../constants/Theme.js";import{BodySecondary as s,BodyCaption as l}from"../TypographyStyle.js";import{getContainerStyle as i,getContainerHoverStyle as c,getChipStyle as a,getChipRemoveStyle as u,getInputStyle as d}from"./ChipInput.styled.js";const p=p=>{let{onChipsChange:y,placeholder:h,chips:g,label:m,labelColor:v,hintText:b,hintTextColor:f,error:C,inputHeight:j,createChipKeys:k,chipsContainerCustomStyle:x,nativeID:T}=p;const[O,D]=n(""),[M,E]=n(!1),w=r(null),B=k||[",",188,"Enter",13],I=i(!!C,j,x,M),K=M?{}:c(),L=a(),S=u(),$=d(j);return e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:T},{children:[m&&t(s,Object.assign({style:{color:M?o.content.brand:C?o.content.negative:v||o.content.primary}},{children:m})),e("div",Object.assign({style:I,onClick:()=>{var e;null===(e=w.current)||void 0===e||e.focus()},onMouseEnter:e=>{M||Object.assign(e.currentTarget.style,K)},onMouseLeave:e=>{M||(e.currentTarget.style.border=`1px solid ${C?o.stroke.negative.vibrant:o.stroke.primary}`)}},{children:[g.map(((n,r)=>e("div",Object.assign({style:L},{children:[t("span",{children:n}),t("button",Object.assign({style:S,onClick:e=>{var t;e.stopPropagation(),t=r,y(g.filter(((e,n)=>n!==t)))},onMouseEnter:e=>{e.currentTarget.style.color=o.content.secondary},onMouseLeave:e=>{e.currentTarget.style.color=o.content.secondary},"aria-label":`Remove ${n}`},{children:"×"}))]}),r))),t("input",{ref:w,type:"text",value:O,onChange:e=>D(e.target.value),onKeyDown:e=>{if(B.includes(e.key)||B.includes(e.keyCode)||B.includes(e.which)){e.preventDefault();const t=O.trim();t&&!g.includes(t)&&(y([...g,t]),D(""))}else"Backspace"===e.key&&""===O&&g.length>0&&y(g.slice(0,-1))},onFocus:()=>{E(!0)},onBlur:()=>{E(!1);const e=O.trim();e&&!g.includes(e)&&(y([...g,e]),D(""))},placeholder:0===g.length&&h&&!M?h:void 0,style:$})]})),(!!b||!!C)&&t(l,Object.assign({style:{color:C?o.content.negative:f||o.content.secondary}},{children:C||b}))]}))};export{p as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useEffect as r}from"react";import o from"react-chips";import{COLORS as i}from"../../constants/Theme.js";import{BodySecondary as l,BodyCaption as c}from"../TypographyStyle.js";import{theme as a,chipTheme as s}from"./ChipInput.styled.js";const p=p=>{let{onChipsChange:h,placeholder:m,chips:d,label:u,labelColor:y,hintText:g,hintTextColor:f,error:v,inputHeight:C,createChipKeys:b,chipsContainerCustomStyle:j,nativeID:x}=p;const[T,S]=n(!1);return r((()=>{var e,t;null===(e=document.querySelector(`#${x} input`))||void 0===e||e.addEventListener("focus",(()=>{S(!0)})),null===(t=document.querySelector(`#${x} input`))||void 0===t||t.addEventListener("blur",(()=>{S(!1)}))}),[]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:x},{children:[u&&t(l,Object.assign({style:{color:T?i.content.brand:v?i.content.negative:y||i.content.primary}},{children:u})),t(o,{value:d,theme:a(!!v,C,j,T),chipTheme:s,placeholder:0===d.length&&!!m&&!T&&m,onChange:e=>{h(e)},createChipKeys:b||","}),(!!g||!!v)&&t(c,Object.assign({style:{color:v?i.content.negative:f||i.content.secondary}},{children:v||g}))]}))};export{p as default};

package/dist/esm/components/input/ChipInput.styled.d.ts

@@ -0,0 +1,66 @@
+export declare const chipTheme: {
+    chip: {
+        padding: string;
+        background: string;
+        border: string;
+        fontSize: number;
+        color: string;
+        fontWeight: number;
+        borderRadius: number;
+        alignItems: string;
+        alignContent: string;
+        justifyContent: string;
+        cursor: string;
+        margin: string;
+        fontFamily: string;
+    };
+    chipRemove: {
+        fontSize: number;
+        fontFamily: string;
+        cursor: string;
+        fontWeight: string;
+        color: string;
+        marginLeft: number;
+        ':hover': {
+            color: string;
+        };
+    };
+};
+export declare const theme: (error?: boolean, height?: number, chipsContainerCustomStyle?: Object, focused?: boolean) => {
+    chipsContainer: {
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        display: string;
+        position: string;
+        border: string;
+        backgroundColor: string;
+        alignItems: string;
+        flexWrap: string;
+        padding: string;
+        borderRadius: number;
+        ':hover': {
+            border: string;
+        };
+    };
+    container: {
+        flex: number;
+    };
+    containerOpen: {};
+    input: {
+        border: string;
+        outline: string;
+        boxSizing: string;
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: number;
+        height: number;
+        width: string;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};

package/dist/esm/components/input/ChipInput.styled.js

@@ -1 +1 @@
-import{COLORS as n}from"../../constants/Theme.js";const e=()=>({padding:"0px 8px 0px 8px",background:n.surface.subdued,border:`1px solid ${n.stroke.primary}`,fontSize:12,color:n.content.secondary,fontWeight:400,borderRadius:4,display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter",marginBottom:"2px",marginTop:"2px",height:24}),r=()=>({fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:n.content.secondary,marginLeft:6,background:"none",border:"none",padding:0,display:"inline-flex",alignItems:"center"}),o=(e,r,o,t)=>Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?n.stroke.brand:e?n.stroke.negative.vibrant:n.stroke.primary}`,backgroundColor:n.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,cursor:"text",minHeight:r||32},o),t=()=>({border:`2px solid ${n.stroke.brand}`}),i=n=>({border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:n||32,flex:1,minWidth:120,paddingTop:0,paddingBottom:0,backgroundColor:"transparent"});export{r as getChipRemoveStyle,e as getChipStyle,t as getContainerHoverStyle,o as getContainerStyle,i as getInputStyle};
+import{COLORS as e}from"../../constants/Theme.js";const n={chip:{padding:"0px 8px 0px 8px",background:e.surface.subdued,border:`1px solid ${e.stroke.primary}`,fontSize:12,color:e.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.content.secondary,marginLeft:6,":hover":{color:e.content.secondary}}},o=(n,o,r,t)=>({chipsContainer:Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.stroke.brand:n?e.stroke.negative.vibrant:e.stroke.primary}`,backgroundColor:e.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.stroke.brand}`}},null!=r?r:{}),container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:o||32,width:"100%",paddingTop:0,paddingBottom:0}});export{n as chipTheme,o as theme};

package/dist/esm/components/input/Input-helper.d.ts

@@ -0,0 +1,6 @@
+import { InputTypeI } from "./Input";
+export declare const isFunction: (fn: any) => boolean;
+export declare const validateInput: (inputText: string | number, type: InputTypeI, rangeValidation?: {
+    min?: number;
+    max?: number;
+}) => [boolean, string];

package/dist/esm/components/input/Input-helper.js

@@ -1 +1 @@
-import{phone as e}from"phone";const t=e=>e&&"function"==typeof e,n=/<(script|style|iframe|object|noscript|template)\b[^<]*(?:(?!<\/\1>)<[^<]*)*<\/\1\s*>/gi,r=/<\/?(script|style|iframe|object|embed|link|meta|base|form|svg|math|noscript|template)\b[^>]*>/gi,i=/(<[a-zA-Z][^>]*?)\s+on[a-zA-Z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/g,a=e=>{if(!e)return e;let t,a=e.replace(n,"");a=a.replace(r,"");do{t=a,a=a.replace(i,"$1")}while(a!==t);return a},l=["text","multiline","email","url","password"],m=e=>l.includes(e),u=function(t,n){let r,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const a=["phonenumber","zip","number"].includes(n),l=a?t?Number(t):null:t;if(null==l||""===l)return[!0,""];if(a&&String(l).length&&(i.min&&l<i.min||i.max&&l>i.max))return[!1,`Enter valid number between ${i.min} and ${i.max}`];if("email"===n)return r=/(.+)@(.+){2,}\.(.+){2,}/,l.match(r)?[!0,""]:[!1,"Enter a valid email id"];if("url"===n)return r=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,l.match(r)?[!0,""]:[!1,"Enter a valid url"];if("number"===n)return l>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===n)return 6===String(l).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===n){const{isValid:t}=e("+"+String(l));return t?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==l?void 0:l.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};export{t as isFunction,a as sanitizeUnsafeInput,m as shouldSanitizeForType,u as validateInput};
+import{phone as n}from"phone";const e=n=>n&&"function"==typeof n,r=function(e,r){let t,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const a=["phonenumber","zip","number"].includes(r),l=a?e?Number(e):null:e;if(null==l||""===l)return[!0,""];if(a&&String(l).length&&(i.min&&l<i.min||i.max&&l>i.max))return[!1,`Enter valid number between ${i.min} and ${i.max}`];if("email"===r)return t=/(.+)@(.+){2,}\.(.+){2,}/,l.match(t)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return t=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,l.match(t)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return l>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(l).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:e}=n("+"+String(l));return e?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==l?void 0:l.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};export{e as isFunction,r as validateInput};

package/dist/esm/components/input/Input.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { ButtonProps } from '../button/model';
+export type InputVariant = 'default' | 'small' | 'x-small';
+export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
+export interface InputProps {
+    'data-test'?: string;
+    noErrorHint?: boolean;
+    placeholder?: string;
+    variant?: InputVariant;
+    width?: string;
+    height?: string;
+    leftIcon?: {
+        icon: React.FC;
+        callback?: () => void;
+    };
+    rightIcon?: {
+        icon: React.FC;
+        callback?: () => void;
+    };
+    labelElement?: React.ReactNode;
+    labelText?: string;
+    maxCharLimit?: number;
+    isRequired?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    state?: InputStateI;
+    type?: InputTypeI;
+    /**
+        validate:  function takes the input and returns boolean + string (error message in case of invalid input)
+     **/
+    validate?: (input?: string | number) => [boolean, string];
+    onChangeText: (input: string, event?: Event) => void;
+    button?: {
+        text: string;
+        onClick?: () => void;
+        buttonProps?: ButtonProps;
+    };
+    suffixText?: string;
+    prefixText?: string;
+    value?: string;
+    reset?: boolean;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onClick?: (e: any) => void;
+    isActive?: boolean;
+    id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    rangeValidation?: {
+        min: number;
+        max: number;
+    };
+    noKeyDownChange?: boolean;
+    skipFocus?: boolean;
+    version?: '1.0' | '2.0';
+    textControl?: boolean;
+    noMaxCharCheck?: boolean;
+    tooltipText?: string;
+    autoGrow?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    labelTextBold?: boolean;
+    truncateText?: boolean;
+    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
+    hightlightInputColor?: string;
+    onKeyDownEvent?: (e: Event) => void;
+    hideInputHeader?: boolean;
+    hideBorder?: boolean;
+    inputWrapperStyles?: React.CSSProperties;
+    minCharsToTrigger?: number;
+    isDisabled?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,shouldSanitizeForType as d,sanitizeUnsafeInput as u,validateInput as v}from"./Input-helper.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{TitleSmall as p,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";import x from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as j,MaxCharStyle as C,InputWrapper as T,IconHolder as O,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,SuffixHolder as B,InputHeader as L}from"./Input.styled.js";const H=l(((l,H)=>{var D,E,M,P,S,z,A,F;const{placeholder:K,leftIcon:N,rightIcon:R,labelText:G,maxCharLimit:W,isRequired:_,hintText:q,type:U,state:V,validate:$,variant:J,button:Q,suffixText:X,prefixText:Y,onChangeText:Z,value:ee,noErrorHint:te,reset:ie,rangeValidation:ne,noKeyDownChange:le,version:re,noMaxCharCheck:oe,labelElement:ae,autoGrow:se,minHeight:ce,maxHeight:he,labelTextBold:de,truncateText:ue,maxCharLimitPosition:ve,hightlightInputColor:ge,onKeyDownEvent:pe,hideInputHeader:me,hideBorder:be,inputWrapperStyles:xe,minCharsToTrigger:fe,isDisabled:ye=!1,allowUnsafeInput:je}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},l),Ce=null==N?void 0:N.icon,Te=null==R?void 0:R.icon,[Oe,we]=r(!1),[Ie,ke]=r(!1),[Be,Le]=r(),He="x-small"===J?"12px":"small"===J?"18px":"22px",De=o(f),[Ee,Me]=r(""),Pe=a(null),Se=null!=H?H:Pe;s((()=>{Me(ee||""),!ee&&se&&(Se.current.style.height=ce||"48px")}),[ee]),s((()=>{var e;Se.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Se.current))}),[Se]),s((()=>{const e=Se.current;if(e&&["phonenumber","zip","number"].includes(U))return e.addEventListener("wheel",Ke,{passive:!1}),()=>{e.removeEventListener("wheel",Ke)}}),[]),s((()=>{ie&&Me("")}),[ie]),s((()=>{var e;ke(!!l.isActive),l.isActive&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Le(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;we(!1),("invalid"===l.state||Be||"disabled-invalid"===l.state)&&we(!0),"active"===l.state&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.state,Be]),s((()=>{we(!!Be||"invalid"===l.state)}),[Be,l.state]);const ze=function(e){if(h(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},Ae=()=>"zip"===U?6:2e3,Fe=e=>{const t=0!==W?W:Ae(),i=fe,n=e.target.value;pe&&(!n.length||n.length>=i)&&pe(e),le||n.length&&!(n.length>=i)||Z(ee||"",e),oe||![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},Ke=e=>{e.preventDefault()},Ne=e=>{let t=e.target.value;const i=0!==W?W+1:Ae(),n=fe;if(!je&&d(U)&&(t=u(t)),!oe&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),l.textControl||Me(t||""),n&&t&&t.length<n)return;Z(t,e),se&&(Se.current.style.height=`${Se.current.scrollHeight}px`,t||(Se.current.style.height=ce||"48px"));const r=$||v;if(!r||!h(r))return;const[o,a]=r(t,U,ne);we(!o),Le(l.errorMessage?l.errorMessage:a)},Re=e=>{var t;l.skipFocus||ke(!0),ze(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Ge=e=>{var t;l.skipFocus||ke(!1),ze(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},We=()=>{var n;return e(i,{children:["multiline"!==U&&t("input",{className:ue?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==De?void 0:De.input)&&void 0!==n?n:{},ref:Se,disabled:ye,type:["phonenumber","zip","number"].includes(U)?"number":U,value:Ee,onFocus:e=>Re(e),onBlur:e=>Ge(e),placeholder:K||"Enter here",onChange:Ne,onClick:e=>ze(l.onClick),onKeyDown:e=>Fe(e)}),"multiline"===U&&t("textarea",{"data-test":l["data-test"],value:Ee,ref:Se,onFocus:e=>Re(e),onBlur:e=>Ge(e),onClick:e=>ze(l.onClick),disabled:ye,placeholder:K||"Enter here",onChange:Ne,onKeyDown:e=>Fe(e),maxLength:W>0?W:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:V,type:U,style:null!==(D=null==De?void 0:De.RootContainer)&&void 0!==D?D:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!te&&(!!q||!!Be)&&e(j,Object.assign({invalid:!!Be},{children:[!!Be&&t(x,{width:16,height:16}),Be||q]})),W>0&&"BOTTOM"===ve&&e(C,Object.assign({position:"BOTTOM"},{children:[null!==(M=null===(E=(null!=ee?ee:"").toString())||void 0===E?void 0:E.length)&&void 0!==M?M:0,"/",W]}))]})),e(T,Object.assign({variant:J,state:V,width:l.width,isActive:"active"===V||Ie,isInvalid:Oe,style:null!==(S=null!==(P=null==De?void 0:De.InputWrapper)&&void 0!==P?P:xe)&&void 0!==S?S:{},version:re,height:l.height,hightlightInputColor:ge,hideBorder:be},{children:[!!Ce&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==N?void 0:N.callback),isLeft:!0,style:null!==(z=null==De?void 0:De.IconHolder)&&void 0!==z?z:{}},{children:t(Ce,{})})),!!Y&&t(w,Object.assign({variant:J},{children:Y})),"default"===J&&t(I,Object.assign({height:l.height,type:l.type,minHeight:ce,maxHeight:he,autoGrow:se},{children:We()})),["x-small","small"].includes(J)&&t(k,Object.assign({height:l.height,type:l.type},{children:We()})),!!Te&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==R?void 0:R.callback),isLeft:!1},{children:t(Te,{})})),!!X&&t(B,Object.assign({variant:J},{children:X})),Q&&Q.text&&t(c,{buttonText:Q.text,onClick:()=>ze(null==Q?void 0:Q.onClick)}),Q&&Q.buttonProps&&t(c,Object.assign({},Q.buttonProps))]})),!me&&(!!G||!!W)&&e(L,Object.assign({invalid:Oe},{children:[ae&&ae,e("div",Object.assign({className:"label__container"},{children:[e(de?p:m,{children:[G,_?t("span",{children:"*"}):""]}),l.tooltipText&&t(g,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:Oe?b.content.negative:b.content.primary})})}))]})),W>0&&"TOP"===ve&&e(C,{children:[null!==(F=null===(A=(null!=ee?ee:"").toString())||void 0===A?void 0:A.length)&&void 0!==F?F:0,"/",W]})]}))]}))}));H.displayName="Input";export{H as Input};
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,validateInput as d}from"./Input-helper.js";import{Tooltip as u}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as g}from"../TypographyStyle.js";import{COLORS as p}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as b}from"./context/InputStyleProvider.js";import{RootContainer as x,InputFooter as f,MaxCharStyle as y,InputWrapper as j,IconHolder as C,PrefixHolder as T,InputContainer as O,InputContainerSmall as w,SuffixHolder as I,InputHeader as k}from"./Input.styled.js";const B=l(((l,B)=>{var L,H,D,E,M,P,S,z;const{placeholder:A,leftIcon:F,rightIcon:K,labelText:N,maxCharLimit:R,isRequired:G,hintText:W,type:_,state:q,validate:V,variant:$,button:J,suffixText:Q,prefixText:U,onChangeText:X,value:Y,noErrorHint:Z,reset:ee,rangeValidation:te,noKeyDownChange:ie,version:ne,noMaxCharCheck:le,labelElement:re,autoGrow:oe,minHeight:ae,maxHeight:se,labelTextBold:ce,truncateText:he,maxCharLimitPosition:de,hightlightInputColor:ue,onKeyDownEvent:ve,hideInputHeader:ge,hideBorder:pe,inputWrapperStyles:me,minCharsToTrigger:be,isDisabled:xe=!1}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},l),fe=null==F?void 0:F.icon,ye=null==K?void 0:K.icon,[je,Ce]=r(!1),[Te,Oe]=r(!1),[we,Ie]=r(),ke="x-small"===$?"12px":"small"===$?"18px":"22px",Be=o(b),[Le,He]=r(""),De=a(null),Ee=null!=B?B:De;s((()=>{He(Y||""),!Y&&oe&&(Ee.current.style.height=ae||"48px")}),[Y]),s((()=>{var e;Ee.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Ee.current))}),[Ee]),s((()=>{const e=Ee.current;if(e&&["phonenumber","zip","number"].includes(_))return e.addEventListener("wheel",ze,{passive:!1}),()=>{e.removeEventListener("wheel",ze)}}),[]),s((()=>{ee&&He("")}),[ee]),s((()=>{var e;Oe(!!l.isActive),l.isActive&&(null===(e=Ee.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Ie(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;Ce(!1),("invalid"===l.state||we||"disabled-invalid"===l.state)&&Ce(!0),"active"===l.state&&(null===(e=Ee.current)||void 0===e||e.focus())}),[l.state,we]),s((()=>{Ce(!!we||"invalid"===l.state)}),[we,l.state]);const Me=function(e){if(h(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},Pe=()=>"zip"===_?6:2e3,Se=e=>{const t=0!==R?R:Pe(),i=be,n=e.target.value;ve&&(!n.length||n.length>=i)&&ve(e),ie||n.length&&!(n.length>=i)||X(Y||"",e),le||![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ze=e=>{e.preventDefault()},Ae=e=>{let t=e.target.value;const i=0!==R?R+1:Pe(),n=be;if(!le&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),l.textControl||He(t||""),n&&t&&t.length<n)return;X(t,e),oe&&(Ee.current.style.height=`${Ee.current.scrollHeight}px`,t||(Ee.current.style.height=ae||"48px"));const r=V||d;if(!r||!h(r))return;const[o,a]=r(t,_,te);Ce(!o),Ie(l.errorMessage?l.errorMessage:a)},Fe=e=>{var t;l.skipFocus||Oe(!0),Me(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Ke=e=>{var t;l.skipFocus||Oe(!1),Me(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},Ne=()=>{var n;return e(i,{children:["multiline"!==_&&t("input",{className:he?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==Be?void 0:Be.input)&&void 0!==n?n:{},ref:Ee,disabled:xe,type:["phonenumber","zip","number"].includes(_)?"number":_,value:Le,onFocus:e=>Fe(e),onBlur:e=>Ke(e),placeholder:A||"Enter here",onChange:Ae,onClick:e=>Me(l.onClick),onKeyDown:e=>Se(e)}),"multiline"===_&&t("textarea",{"data-test":l["data-test"],value:Le,ref:Ee,onFocus:e=>Fe(e),onBlur:e=>Ke(e),onClick:e=>Me(l.onClick),disabled:xe,placeholder:A||"Enter here",onChange:Ae,onKeyDown:e=>Se(e),maxLength:R>0?R:void 0})]})};return e(x,Object.assign({width:l.width,height:l.height,state:q,type:_,style:null!==(L=null==Be?void 0:Be.RootContainer)&&void 0!==L?L:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!Z&&(!!W||!!we)&&e(f,Object.assign({invalid:!!we},{children:[!!we&&t(m,{width:16,height:16}),we||W]})),R>0&&"BOTTOM"===de&&e(y,Object.assign({position:"BOTTOM"},{children:[null!==(D=null===(H=(null!=Y?Y:"").toString())||void 0===H?void 0:H.length)&&void 0!==D?D:0,"/",R]}))]})),e(j,Object.assign({variant:$,state:q,width:l.width,isActive:"active"===q||Te,isInvalid:je,style:null!==(M=null!==(E=null==Be?void 0:Be.InputWrapper)&&void 0!==E?E:me)&&void 0!==M?M:{},version:ne,height:l.height,hightlightInputColor:ue,hideBorder:pe},{children:[!!fe&&t(C,Object.assign({variant:$,iconSize:ke,onClick:()=>Me(null==F?void 0:F.callback),isLeft:!0,style:null!==(P=null==Be?void 0:Be.IconHolder)&&void 0!==P?P:{}},{children:t(fe,{})})),!!U&&t(T,Object.assign({variant:$},{children:U})),"default"===$&&t(O,Object.assign({height:l.height,type:l.type,minHeight:ae,maxHeight:se,autoGrow:oe},{children:Ne()})),["x-small","small"].includes($)&&t(w,Object.assign({height:l.height,type:l.type},{children:Ne()})),!!ye&&t(C,Object.assign({variant:$,iconSize:ke,onClick:()=>Me(null==K?void 0:K.callback),isLeft:!1},{children:t(ye,{})})),!!Q&&t(I,Object.assign({variant:$},{children:Q})),J&&J.text&&t(c,{buttonText:J.text,onClick:()=>Me(null==J?void 0:J.onClick)}),J&&J.buttonProps&&t(c,Object.assign({},J.buttonProps))]})),!ge&&(!!N||!!R)&&e(k,Object.assign({invalid:je},{children:[re&&re,e("div",Object.assign({className:"label__container"},{children:[e(ce?v:g,{children:[N,G?t("span",{children:"*"}):""]}),l.tooltipText&&t(u,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:je?p.content.negative:p.content.primary})})}))]})),R>0&&"TOP"===de&&e(y,{children:[null!==(z=null===(S=(null!=Y?Y:"").toString())||void 0===S?void 0:S.length)&&void 0!==z?z:0,"/",R]})]}))]}))}));B.displayName="Input";export{B as Input};

package/dist/esm/components/input/Input.styled.d.ts

@@ -0,0 +1,128 @@
+/// <reference types="react" />
+import { InputStateI, InputTypeI, InputVariant } from "./Input";
+export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    width?: string | undefined;
+    height?: string | undefined;
+    isActive?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    state?: InputStateI | undefined;
+    variant?: InputVariant | undefined;
+    version?: "1.0" | "2.0" | undefined;
+    hightlightInputColor?: string | undefined;
+    hideBorder?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconHolder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    isLeft?: boolean | undefined;
+    iconSize?: string | undefined;
+    variant?: InputVariant | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputContainer: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+    autoGrow?: boolean | undefined;
+    minHeight?: string | undefined;
+    maxHeight?: string | undefined;
+}, {}, {}>;
+export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+}, {}, {}>;
+export declare const InputHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    invalid?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    position?: string | undefined;
+}, {}, {}>;
+export declare const InputFooter: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    invalid?: boolean | undefined;
+}, {}, {}>;
+export declare const RootContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    width?: string | undefined;
+    height?: string | undefined;
+    state?: InputStateI | undefined;
+    type: InputTypeI;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PrefixHolder: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    variant?: InputVariant | undefined;
+}, {}, {}>;
+export declare const SuffixHolder: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    variant?: InputVariant | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { Variable } from '../add-variableV2/AddVariableV2';
+import { SelectedVariable } from '../add-variableV2/types';
+import { InputTypeI } from '../input';
+import { PickerType } from '../variable-picker-v3/model';
+export interface InputWithVariablesProps {
+    type?: InputTypeI;
+    variablesList: any;
+    onChange: (val: SelectedVariable) => void;
+    onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
+    allowMix: boolean;
+    prevVariable: SelectedVariable;
+    showHelp?: boolean;
+    onlyVariables?: boolean;
+    placeHolder?: string;
+    showAddButton?: boolean;
+    errorMessage?: string;
+    noMaxCharCheck?: boolean;
+    maxCharLimit?: number;
+    labelText?: string;
+    labelElement?: React.ReactNode;
+    isRequired?: boolean;
+    hintText?: string;
+    onEnterPress?: (input: string) => void;
+    pickerType?: PickerType;
+    portalElement?: HTMLElement;
+    showVarHeader?: boolean;
+    varHeaderText?: string;
+    onPickerToggle?: (isOpen: boolean) => void;
+}
+export declare const InputWithVariables: React.FC<InputWithVariablesProps>;

package/dist/esm/components/list-item/ListItem.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type Variant = 'default' | 'selected' | 'inactive' | 'error' | 'readonly' | 'placeholder' | 'separator';
+export interface ListItemElement {
+    label: string;
+    value: string;
+}
+export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: Variant;
+    subText?: string;
+    listItem: ListItemElement;
+    onSelect?: (ListItemElement: any) => void;
+    leadingIcon?: JSX.Element;
+    trailingIcon?: JSX.Element;
+    borderBottom?: string;
+    customComponent?: JSX.Element;
+    customListItemLabel?: JSX.Element;
+    version?: '1.0' | '2.0';
+}
+export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/list-item/ListItem.styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { Variant } from './ListItem';
+export declare const ListItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    variant: Variant;
+    borderBottom?: string | undefined;
+    version?: "1.0" | "2.0" | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/list-item/themes.d.ts

@@ -0,0 +1,3 @@
+import type { Variant } from './ListItem';
+export declare function getColor(variant: Variant): string;
+export declare function getTheme(variant: Variant, version?: '1.0' | '2.0'): import("@emotion/utils").SerializedStyles;

package/dist/esm/components/multi-level-dropdown/GroupedMenuList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GroupedOption, MultiLevelDropdownOption } from './type';
+export declare const GroupedMenuList: React.FC<{
+    width: string;
+    onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
+    option: GroupedOption;
+    parents: MultiLevelDropdownOption[];
+}>;

package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{COLORS as o}from"../../constants/Theme.js";import{BodyTiny as r}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const p=p=>{let{width:i,onDropdownItemClick:s,option:a,parents:m,allowParentSelection:d,maxLevels:c,hideGroupLabel:u,currentLevel:h,renderNestedMenu:x}=p;return e(l,{children:[!u&&t(r,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:o.content.placeholder},{children:a.label})),a.options.map(((e,o)=>t(n,{width:i,onDropdownItemClick:s,option:e,parents:m,allowParentSelection:d,maxLevels:c,currentLevel:h,renderNestedMenu:x},o)))]})};export{p as GroupedMenuList};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import{BodyTiny as e}from"../TypographyStyle.js";import{MenuItem as p}from"./MenuItem.js";import{GroupedMenuListContainer as n}from"./MultiLevelDropdown.styled.js";const i=i=>{let{width:l,onDropdownItemClick:m,option:s,parents:c}=i;return o(n,{children:[t(e,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.content.placeholder},{children:s.label})),s.options.map(((o,r)=>t(p,{width:l,onDropdownItemClick:m,option:o,parents:c},r)))]})};export{i as GroupedMenuList};

package/dist/esm/components/multi-level-dropdown/MenuItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MultiLevelDropdownOption, SingleOption } from './type';
+export declare const MenuItem: React.FC<{
+    width: string;
+    onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
+    option: SingleOption;
+    parents: MultiLevelDropdownOption[];
+}>;

package/dist/esm/components/multi-level-dropdown/MenuItem.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight2.svg.js";import i,{useRef as l}from"react";import{COLORS as r}from"../../constants/Theme.js";import{BodyCaption as s,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as d,MenuItemContainer as a,ContentContainer as p,LeadingIconContainer as u,TrailingIconContainer as h,SubMenuContainer as m,StyledSubMenuWrapper as v,SubMenuListContainer as g}from"./MultiLevelDropdown.styled.js";const b=b=>{let{width:f,onDropdownItemClick:j,option:y,parents:w,allowParentSelection:M,maxLevels:O,currentLevel:S,renderNestedMenu:x}=b;var C,I,T,L,k,D,E;const[N,P]=i.useState(!1),[R,B]=i.useState(!1),[H,W]=i.useState({top:0,left:0}),q=l({top:0,left:0}),z=!!y.children&&y.children.length>0,A=z&&(void 0===O||S<O);return e(d,Object.assign({onMouseEnter:e=>{A&&(P(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();W({top:t.top,left:t.right}),q.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{P(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!j||null!==(e=y.disabled)&&void 0!==e&&e||z&&!M||j(y,w)})()},id:"menuItemWrapper",style:{cursor:null!==(C=y.disabled)&&void 0!==C&&C?"not-allowed":"pointer",backgroundColor:null!==(I=y.disabled)&&void 0!==I&&I?r.surface.standard:"transparent"}},{children:[y.customComponent?y.customComponent:e(a,Object.assign({isSelected:y.selected,isSubMenuOpen:N,isHovered:R,isDisabled:null!==(T=y.disabled)&&void 0!==T&&T},{children:[e(p,{children:[y.leadingIcon&&t(u,{children:y.leadingIcon}),e("div",{children:[t(s,Object.assign({style:{color:null!==(L=y.disabled)&&void 0!==L&&L?r.content.inactive:y.selected||R?r.content.positive:r.content.primary}},{children:y.label})),y.subText&&t(c,Object.assign({style:{color:null!==(k=y.disabled)&&void 0!==k&&k?r.content.inactive:y.selected||R?r.content.positive:r.content.secondary,marginTop:"2px"}},{children:y.subText}))]})]}),z?t(h,{children:t(o,{width:16,height:16,color:!A||null!==(D=y.disabled)&&void 0!==D&&D?r.content.inactive:y.selected||R?r.content.positive:r.content.primary})}):y.trailingIcon?t(h,{children:y.trailingIcon}):t(n,{})]})),!(null!==(E=y.disabled)&&void 0!==E&&E)&&y.children&&y.children.length>0&&A&&N&&t(m,Object.assign({width:f,className:"submenu",onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1)},{children:t(v,Object.assign({width:f,top:H.top,left:H.left},{children:t(g,{children:x(y.children,[...w,y],S+1)})}))}))]}))};export{b as MenuItem};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as l,Suspense as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as d,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as a,MenuItemContainer as p,ContentContainer as h,LeadingIconContainer as u,TrailingIconContainer as m,SubMenuContainer as g,StyledSubMenuWrapper as v,SubMenuListContainer as b}from"./MultiLevelDropdown.styled.js";const f=o.lazy((()=>import("./MenuList.js").then((e=>({default:e.MenuList}))))),j=j=>{let{width:y,onDropdownItemClick:w,option:M,parents:O}=j;var C,I,L,S,T,k,x;const[D,E]=o.useState(!1),[R,z]=o.useState(!1),[B,H]=o.useState({top:0,left:0}),N=l({top:0,left:0});return e(a,Object.assign({onMouseEnter:e=>{E(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();H({top:t.top,left:t.right}),N.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{E(!1)},onClick:()=>{var e,t;!w||null!==(e=M.disabled)&&void 0!==e&&e||(null===(t=M.children)||void 0===t?void 0:t.length)||w(M,O)},id:"menuItemWrapper",style:{cursor:null!==(C=M.disabled)&&void 0!==C&&C?"not-allowed":"pointer",backgroundColor:null!==(I=M.disabled)&&void 0!==I&&I?s.surface.standard:"transparent"}},{children:[M.customComponent?M.customComponent:e(p,Object.assign({isSelected:M.selected,isSubMenuOpen:D,isHovered:R,isDisabled:null!==(L=M.disabled)&&void 0!==L&&L},{children:[e(h,{children:[M.leadingIcon&&t(u,{children:M.leadingIcon}),e("div",{children:[t(d,Object.assign({style:{color:null!==(S=M.disabled)&&void 0!==S&&S?s.content.inactive:M.selected||R?s.content.positive:s.content.primary}},{children:M.label})),M.subText&&t(c,Object.assign({style:{color:null!==(T=M.disabled)&&void 0!==T&&T?s.content.inactive:M.selected||R?s.content.positive:s.content.secondary,marginTop:"2px"}},{children:M.subText}))]})]}),M.children&&M.children.length>0?t(m,{children:t(i,{width:16,height:16,color:null!==(k=M.disabled)&&void 0!==k&&k?s.content.inactive:M.selected||R?s.content.positive:s.content.primary})}):M.trailingIcon?t(m,{children:M.trailingIcon}):t(n,{})]})),!(null!==(x=M.disabled)&&void 0!==x&&x)&&M.children&&M.children.length>0&&D&&t(g,Object.assign({width:y,className:"submenu",onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1)},{children:t(v,Object.assign({width:y,top:B.top,left:B.left},{children:t(b,{children:t(r,Object.assign({fallback:t("div",{children:"Loading..."})},{children:t(f,{width:y,onDropdownItemClick:w,options:M.children,parents:[...O,M]})}))})}))}))]}))};export{j as MenuItem};