@bikdotai/bik-component-library 0.0.780-beta.3 → 0.0.780-beta.5

package/dist/cjs/components/dropdown-button/DropdownButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("../../constants/Theme.js"),require("lodash/debounce"),require("../TypographyStyle.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js");var n=require("../button/Button.js");require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var t=require("../button/themes.js"),s=require("../spinner/Spinner.js"),i=require("./DropdownButton.style.js");exports.DropdownButton=d=>{var p,u;const a=d.buttonProps,l=e.__rest(a,["onClick"]);return o.jsxs(i.DropdownButtonStyle,Object.assign({type:d.buttonProps.buttonType,disabled:d.buttonProps.disabled},{children:[(null===(p=d.buttonProps)||void 0===p?void 0:p.isLoading)&&o.jsx(i.LoaderContainer,{children:o.jsx(s.Spinner,{className:"spinner",size:"small",color:t.SpinnerColorMap(d.buttonProps.buttonType||"primary",d.buttonProps.inverse)})}),o.jsx(n.Button,Object.assign({},d.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),o.jsx("div",{className:"dd-button-divider"}),o.jsx(r.DropdownPopover,Object.assign({},d.dropdownProps,{isChildLoading:null===(u=d.buttonProps)||void 0===u?void 0:u.isLoading},{children:o.jsx(n.Button,Object.assign({},l,{isLoading:!1,buttonText:"",TrailingIcon:d.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),r=require("../dropdown/DropdownPopover/index.js");require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("react"),require("../zeroState/ZeroState.js"),require("lodash/debounce"),require("../TypographyStyle.js"),require("../../constants/Theme.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js");var n=require("../button/Button.js");require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js");var t=require("../button/themes.js"),s=require("../spinner/Spinner.js"),i=require("./DropdownButton.style.js");exports.DropdownButton=d=>{var p,u;const a=d.buttonProps,l=e.__rest(a,["onClick"]);return o.jsxs(i.DropdownButtonStyle,Object.assign({type:d.buttonProps.buttonType,disabled:d.buttonProps.disabled},{children:[(null===(p=d.buttonProps)||void 0===p?void 0:p.isLoading)&&o.jsx(i.LoaderContainer,{children:o.jsx(s.Spinner,{className:"spinner",size:"small",color:t.SpinnerColorMap(d.buttonProps.buttonType||"primary",d.buttonProps.inverse)})}),o.jsx(n.Button,Object.assign({},d.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),o.jsx("div",{className:"dd-button-divider"}),o.jsx(r.DropdownPopover,Object.assign({},d.dropdownProps,{isChildLoading:null===(u=d.buttonProps)||void 0===u?void 0:u.isLoading},{children:o.jsx(n.Button,Object.assign({},l,{isLoading:!1,buttonText:"",TrailingIcon:d.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Placement } from "../tooltips";
 import { DropdownOption, OpenDropdownProps } from '../dropdown/type';
 import { FloaterProps } from '../floater/floater';
-import { InputProps } from '../input';
+import { InputProps } from '../input/Input.model';
 type DropdownProps = OpenDropdownProps & {
     isLoading?: boolean;
     children?: React.ReactNode;

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

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

package/dist/cjs/components/image-cropper/BikImageCropper.model.d.ts

@@ -0,0 +1,6 @@
+export interface BikImageCropperProps {
+    aspectRatio?: number;
+    src: string;
+    onCropComplete: (base64String: string, didChange: boolean) => void | Promise<void>;
+    onCancel: () => void;
+}

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

@@ -1,5 +1,5 @@
 import { CompressImageOptions } from "../../image-compress";
-import { BikImageCropperProps } from "..";
+import { BikImageCropperProps } from '../BikImageCropper.model';
 /**
  * Todos
  * 	- Add option to pass https url in the src / edit an image

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

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

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

@@ -1,66 +1,6 @@
-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;
-    };
-};
+import React from 'react';
+export declare const getChipStyle: () => React.CSSProperties;
+export declare const getChipRemoveStyle: () => React.CSSProperties;
+export declare const getContainerStyle: (error?: boolean, height?: number, chipsContainerCustomStyle?: React.CSSProperties, focused?: boolean) => React.CSSProperties;
+export declare const getContainerHoverStyle: () => React.CSSProperties;
+export declare const getInputStyle: (height?: number) => React.CSSProperties;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");const r={chip:{padding:"0px 8px 0px 8px",background:e.COLORS.surface.subdued,border:`1px solid ${e.COLORS.stroke.primary}`,fontSize:12,color:e.COLORS.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.COLORS.content.secondary,marginLeft:6,":hover":{color:e.COLORS.content.secondary}}};exports.chipTheme=r,exports.theme=(r,o,n,t)=>({chipsContainer:Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.COLORS.stroke.brand}`}},null!=n?n:{}),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}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");exports.getChipRemoveStyle=()=>({fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.COLORS.content.secondary,marginLeft:6,background:"none",border:"none",padding:0,display:"inline-flex",alignItems:"center"}),exports.getChipStyle=()=>({padding:"0px 8px 0px 8px",background:e.COLORS.surface.subdued,border:`1px solid ${e.COLORS.stroke.primary}`,fontSize:12,color:e.COLORS.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}),exports.getContainerHoverStyle=()=>({border:`2px solid ${e.COLORS.stroke.brand}`}),exports.getContainerStyle=(t,r,n,o)=>Object.assign({display:"flex",position:"relative",border:`${o?2:1}px solid ${o?e.COLORS.stroke.brand:t?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,cursor:"text",minHeight:r||32},n),exports.getInputStyle=e=>({border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:e||32,flex:1,minWidth:120,paddingTop:0,paddingBottom:0,backgroundColor:"transparent"});

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

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

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

@@ -1,73 +1,3 @@
 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;
-}
+import { InputProps } from './Input.model';
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

package/dist/cjs/components/input/Input.model.d.ts

@@ -0,0 +1,72 @@
+/// <reference types="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;
+}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputStateI, InputTypeI, InputVariant } from "./Input";
+import { InputStateI, InputTypeI, InputVariant } from './Input.model';
 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;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Variable } from '../add-variableV2/AddVariableV2';
 import { SelectedVariable } from '../add-variableV2/types';
-import { InputTypeI } from '../input';
+import { InputTypeI } from '../input/Input.model';
 import { PickerType } from '../variable-picker-v3/model';
 export interface InputWithVariablesProps {
     type?: InputTypeI;

package/dist/cjs/components/list-item/List.model.d.ts

@@ -0,0 +1,18 @@
+/// <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';
+}

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

@@ -1,19 +1,3 @@
 /// <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';
-}
+import { ListItemProps } from './List.model';
 export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Variant } from './ListItem';
+import type { Variant } from './List.model';
 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;

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GroupedOption, MultiLevelDropdownOption } from './type';
+import { GroupedOption, MultiLevelDropdownOption, RenderNestedMenu } from './type';
 export declare const GroupedMenuList: React.FC<{
     width: string;
     onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
@@ -9,4 +9,5 @@ export declare const GroupedMenuList: React.FC<{
     maxLevels?: number;
     hideGroupLabel?: boolean;
     currentLevel: number;
+    renderNestedMenu: RenderNestedMenu;
 }>;

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MultiLevelDropdownOption, SingleOption } from './type';
+import { MultiLevelDropdownOption, RenderNestedMenu, SingleOption } from './type';
 export declare const MenuItem: React.FC<{
     width: string;
     onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
@@ -8,4 +8,5 @@ export declare const MenuItem: React.FC<{
     allowParentSelection?: boolean;
     maxLevels?: number;
     currentLevel: number;
+    renderNestedMenu: RenderNestedMenu;
 }>;

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

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

package/dist/cjs/components/multi-level-dropdown/MenuList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./GroupedMenuList.js"),r=require("./MenuItem.js"),n=require("./MultiLevelDropdown.styled.js");exports.MenuList=o=>{let{width:i,onDropdownItemClick:l,options:s,parents:u,allowParentSelection:p,maxLevels:a,hideGroupLabel:d,currentLevel:c}=o;return e.jsx(n.StyledMenuList,{children:s.map(((n,o)=>"value"in n?e.jsx(r.MenuItem,{width:i,onDropdownItemClick:l,option:n,parents:u,allowParentSelection:p,maxLevels:a,currentLevel:c},o):"options"in n&&n.options.length>0?e.jsx(t.GroupedMenuList,{width:i,onDropdownItemClick:l,option:n,parents:u,allowParentSelection:p,maxLevels:a,hideGroupLabel:d,currentLevel:c},o):void 0))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./GroupedMenuList.js"),n=require("./MenuItem.js"),r=require("./MultiLevelDropdown.styled.js");const o=i=>{let{width:l,onDropdownItemClick:s,options:u,parents:a,allowParentSelection:d,maxLevels:p,hideGroupLabel:c,currentLevel:L}=i;const v=(t,n,r)=>e.jsx(o,{width:l,onDropdownItemClick:s,options:t,parents:n,allowParentSelection:d,maxLevels:p,hideGroupLabel:c,currentLevel:r});return e.jsx(r.StyledMenuList,{children:u.map(((r,o)=>"value"in r?e.jsx(n.MenuItem,{width:l,onDropdownItemClick:s,option:r,parents:a,allowParentSelection:d,maxLevels:p,currentLevel:L,renderNestedMenu:v},o):"options"in r&&r.options.length>0?e.jsx(t.GroupedMenuList,{width:l,onDropdownItemClick:s,option:r,parents:a,allowParentSelection:d,maxLevels:p,hideGroupLabel:c,currentLevel:L,renderNestedMenu:v},o):void 0))})};exports.MenuList=o;

package/dist/cjs/components/multi-level-dropdown/type.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 import { FloaterProps } from '../floater/floater';
 export interface MultiLevelDropdownProps extends FloaterProps {
     options: MultiLevelDropdownOption[];
@@ -29,3 +29,4 @@ export type SingleOption = {
     children?: SingleOption[];
 };
 export type MultiLevelDropdownOption = SingleOption | GroupedOption;
+export type RenderNestedMenu = (options: MultiLevelDropdownOption[], parents: MultiLevelDropdownOption[], currentLevel: number) => ReactNode;

package/dist/cjs/components/product-picker-v2/ProductPickerTag.d.ts

@@ -1,5 +1,5 @@
-import { TagType } from '../tag/model';
-import { Product, ProductVariant } from './modal';
+import type { TagType } from '../tag/model';
+import type { Product, ProductVariant } from './type';
 export type ProductPickerTagType = {
     isVariant: boolean;
     data: Product | ProductVariant;

package/dist/cjs/components/product-picker-v2/collectionScreen.d.ts

@@ -1,7 +1,7 @@
-import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
 import React from 'react';
-import { Collection, CollectionFetcherReturn, SelectedItems } from '.';
-import { CollectionsActions, SelectedCollectionsActions } from './reducers';
+import type { CollectionsActions, SelectedCollectionsActions } from './reducers';
+import type { Collection, CollectionFetcherReturn, SelectedItems } from './type';
 export declare const truncate: (str: string, n: number, useWordBoundary: boolean) => string;
 interface CollectionsScreenInterface {
     customCollectionRestriction?: boolean;

package/dist/cjs/components/product-picker-v2/helpers/ProductHelper.d.ts

@@ -1,7 +1,6 @@
-import { TagType } from "../../tag/model";
-import { Product, ProductVariant, SelectedItems } from '../modal';
-import { OUT_OF_STOCK_ACTION } from '../type';
-import { ProductVariantForRearrange } from '../variant';
+import type { TagType } from "../../tag/model";
+import { OUT_OF_STOCK_ACTION, type Product, type ProductVariant, type SelectedItems } from '../type';
+import type { ProductVariantForRearrange } from '../type';
 export declare class ProductHelper {
     /**
      * how to know if a product is out of stock? currentCombination.quantity === 0 (OOS)

package/dist/cjs/components/product-picker-v2/index.d.ts

@@ -1,2 +1,2 @@
 export * from './modal';
-export { ScreenName } from './type';
+export * from './type';

package/dist/cjs/components/product-picker-v2/modal.d.ts

@@ -1,63 +1,7 @@
 /// <reference types="react" />
 import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
-import { ButtonProps } from '../button/model';
-import { FooterForNonModalI, OUT_OF_STOCK_ACTION, ScreenName } from './type';
-export interface ProductVariant {
-    name: string;
-    price: string;
-    image: string;
-    quantity: number;
-    skipSync?: boolean;
-    displayOrder?: number | null;
-    fbStatus?: FbProductStatus;
-    description?: string;
-    id?: string;
-    actualPrice?: string;
-    currency?: string;
-    skuId?: string;
-}
-export interface Product {
-    name: string;
-    image: string;
-    description?: string;
-    variants?: {
-        [key: string]: ProductVariant;
-    };
-    id?: string;
-    handle?: string;
-    currency?: string;
-}
-export interface Collection {
-    name: string;
-    image: string;
-    isSmartCollection: boolean;
-    products?: {
-        [key: string]: Product;
-    };
-}
-export type SelectedItems = {
-    [key: string]: Collection;
-};
-export type SearchedItems = {
-    collections: SelectedItems;
-    products: SelectedItems;
-};
-export type CollectionFetcherReturn = Promise<{
-    collections: {
-        [key: string]: {
-            image: string;
-            name: string;
-            isSmartCollection: string;
-        };
-    };
-}>;
-export type ProductFetcherReturn = Promise<{
-    [key: string]: Product;
-}>;
-export type FbStatusFetcherReturn = Promise<{
-    [key: string]: FbProductStatus;
-}>;
-export type FbProductStatus = 'APPROVED' | 'REJECTED';
+import type { ButtonProps } from '../button/model';
+import { type CollectionFetcherReturn, type FbStatusFetcherReturn, type FooterForNonModalI, OUT_OF_STOCK_ACTION, type ProductFetcherReturn, ScreenName, type SearchedItems, type SelectedItems } from './type';
 export type ProductPickerInterface = {
     hideGlobalSearch?: boolean;
     hideInCollectionSearch?: boolean;

package/dist/cjs/components/product-picker-v2/product.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { Product, ProductVariant, SelectedItems } from './modal';
-import { SelectedCollectionsActions } from './reducers';
-import { OUT_OF_STOCK_ACTION } from './type';
+import type { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION, type Product, type ProductVariant, type SelectedItems } from './type';
 interface ProductGroupInterface {
     collectionId: string;
     productId: string;

package/dist/cjs/components/product-picker-v2/productInfoOverlay.d.ts

@@ -1,5 +1,4 @@
-import { Product, ProductVariant } from './modal';
-import { OUT_OF_STOCK_ACTION } from './type';
+import { OUT_OF_STOCK_ACTION, type Product, type ProductVariant } from './type';
 /**
  * When user presses i icon on a product, we show the overlay.
  * In case of a product, contains products image,  product name & description

package/dist/cjs/components/product-picker-v2/productScreen.d.ts

@@ -1,7 +1,7 @@
-import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
 import React from 'react';
-import { Collection, FbStatusFetcherReturn, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
-import { CollectionsActions, SelectedCollectionsActions } from './reducers';
+import { type CollectionsActions, type SelectedCollectionsActions } from './reducers';
+import type { Collection, FbStatusFetcherReturn, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from './type';
 import { OUT_OF_STOCK_ACTION } from './type';
 interface ProductsScreenInterface {
     hideInCollectionSearch?: boolean;