@bikdotai/bik-component-library 0.0.772-beta.3 → 0.0.772-beta.8

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SidebarTheme } from './Sidebar.model';
+import { SidebarTheme } from './SimpleSidebar';
 export interface BikSidebarShimmerProps {
     theme: SidebarTheme;
     width?: number;

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

@@ -1,4 +1,4 @@
-import { SidebarTheme } from './Sidebar.model';
+import { SidebarTheme } from './SimpleSidebar';
 export declare const SideBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MainSideBarMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SibeBarMenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,3 +1,29 @@
 /// <reference types="react" />
-import { SimpleSidebarProps } from './Sidebar.model';
+export interface Menu {
+    key: string | number;
+    displayName: string;
+    description?: string;
+    path?: string;
+    page?: string;
+    isNew?: string;
+}
+export type SidebarTheme = 'brand' | 'white';
+export interface SimpleSidebarProps {
+    menuList: Menu[];
+    activeMenu: Menu;
+    theme: SidebarTheme;
+    showAccessUpgradePanel?: boolean;
+    header?: string;
+    width?: number;
+    zIndex?: number;
+    left?: number;
+    postion?: 'fixed' | 'sticky';
+    top?: number;
+    router: any;
+    onMouseLeaveOnMenu?: () => void;
+    onMouseEnterOnMenu?: () => void;
+    onMenuClick: (menuSelected: Menu, reDirect?: boolean) => void;
+    onUpgrade?: () => void;
+    isNewSidebar?: boolean;
+}
 export declare const SimpleSidebar: React.FC<SimpleSidebarProps>;

package/dist/esm/components/button/Button.styled.d.ts

@@ -2,7 +2,7 @@
 import { Size, Type } from './model';
 export declare const Button: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     size: Size;
     buttonType: Type;

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const StyledCardContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCard: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/carousel-secondary/CarouselSecondary.style.d.ts

@@ -2,35 +2,35 @@
 import { CarouselVersion } from './model';
 export declare const CarouselContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     version?: CarouselVersion | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselBody: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     textAlign: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselPage: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isActive: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CarouselFooter: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     version?: CarouselVersion | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const PageIndicator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Indicator: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isActive: boolean;
     version?: CarouselVersion | undefined;

package/dist/esm/components/checkList/CheckList.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const CheckListStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/colourInput/ColourInput.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const ColorInputContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledColorInput: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/dist/esm/components/country-code-picker/CountryCodePicker.styled.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const StyledCountryPickerOption: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCountryPickerWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     height?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/country-code-picker/CountryPicker.styled.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const StyledCountryOption: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledCountryPickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     height?: string | undefined;
     disabled?: boolean | undefined;

package/dist/esm/components/custom-date-time/CustomDateTime.styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const CustomDateTimeStyle: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/dashboard-review-popup/DashboardReviewPopUp.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const CrossIconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/dashboard-review-popup/components/FiveStar.styled.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/dashboard-review-popup/components/Form.styled.d.ts

@@ -1,27 +1,27 @@
 /// <reference types="react" />
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StarWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Chip: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selected?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextArea: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/datePicker/DatePicker.styled.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
 export declare const PickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selectRange: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimePickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimeInputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TimeLabel: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/discount-modal/DiscountModal.styled.d.ts

@@ -1,23 +1,23 @@
 /// <reference types="react" />
 export declare const CouponTypeContainerStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     selectedDiv: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StaticCouponContainerStyled: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DynamicCouponContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledDiscountDialogueContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const VariablePickerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/dropdown/Dropdown.d.ts

@@ -18,5 +18,6 @@ export type DropdownProps = OpenDropdownProps & {
     showLabelsOnMoreHover?: boolean;
     backgroundColor?: string;
     value?: string;
+    resizeable?: boolean;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as h}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function v(){}const m=m=>{var g,f,b,w,x,{placeHolder:j,size:O,onSelect:I,defaultOptions:y,disabled:H,noErrorHint:S,placeHolderHeight:E,showPlaceholderWhenSelected:C=!1,inputStyle:T={},inputType:D="default",onDeleteChip:P,truncatedText:M,showLeadingIconInPlaceholder:W=!1,showTrailingIconPlaceholder:L=!1,showLabelsOnMoreHover:z=!1,value:k}=m,A=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value"]);const[_,N]=i(!1),[U,V]=i(!1),q=null!=O?O:"default",B=l(),[F,G]=i(null!=y?y:[]);r((()=>{var e;const o=[];null===(e=null==A?void 0:A.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),G([...o])}),[A.options]),r((()=>{y&&G([...y])}),[y]);const J=u(F),K=C?j:null!==(g=null!=J?J:j)&&void 0!==g?g:"Select an option",Q=null!==(f=A.buttonWidth)&&void 0!==f?f:A.width,R=null!=Q?Q:"100%",X=null!==(b=A.dropdownWidth)&&void 0!==b?b:R;return o(n,{children:o(c.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:E||("x-small"===q?24:"small"===q?32:48),width:R},Q?{maxWidth:Q}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===q?"4px 8px":"6px 8px",backgroundColor:void 0!==k?"#C3E4C4":U?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),T),input:{minHeight:"100%",maxWidth:"100%",color:void 0!==k?"#00580E":"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1)},{children:t(h,Object.assign({"data-test":A["data-test"],ref:B,onSelect:function(e){Array.isArray(e)?G([...e]):G([e]),null==I||I(e)},disabled:H,onDropdownVisbilityChange:e=>N(e)},A,{width:X},{children:["default"==D&&o(d,{version:A.version,noErrorHint:S,state:H?"disabled":"none",value:void 0===k?K:k,errorMessage:A.error,variant:q,placeholder:null!=j?j:"Select an option",onChangeText:v,leftIcon:W&&(null===(w=F[0])||void 0===w?void 0:w.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=F[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[L&&(null===(e=F[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:_?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===q?16:"small"===q?20:24,height:"x-small"===q?16:"small"===q?20:24,color:s.content.primary})]}))}},truncateText:null==M||M}),"chip"==D&&o(p,{placeholder:null!=j?j:"Select options",chips:F,onDeleteChip:e=>{null==P||P(e)},errorMessage:A.error,isDropdownOpened:_,sizeToUse:q,containerStyle:{width:null!==(x=A.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:z})]}))}))}))})};m.displayName="Dropdown";export{m as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as o,Fragment as n,jsx as t}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r,useLayoutEffect as s}from"react";import{COLORS as a}from"../../constants/Theme.js";import d from"../../assets/icons/chevronDown.svg.js";import{Input as c}from"../input/Input.js";import{InputStyleContext as p}from"../input/context/InputStyleProvider.js";import h from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as v}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const f=f=>{var g,x,b,w,{placeHolder:j,size:O,onSelect:y,defaultOptions:I,disabled:S,noErrorHint:H,placeHolderHeight:E,showPlaceholderWhenSelected:C=!1,inputStyle:T={},inputType:D="default",onDeleteChip:P,truncatedText:W,showLeadingIconInPlaceholder:z=!1,showTrailingIconPlaceholder:M=!1,showLabelsOnMoreHover:L=!1,value:k,resizeable:A=!1}=f,_=e(f,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","resizeable"]);const[N,U]=i(!1),[V,q]=i(!1),B=null!=O?O:"default",F=l(null),[G,J]=i(0),K=l(),[Q,R]=i(null!=I?I:[]);r((()=>{var e;const o=[];null===(e=null==_?void 0:_.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),R([...o])}),[_.options]),r((()=>{I&&R([...I])}),[I]);const X=v(Q),Y=C?j:null!==(g=null!=X?X:j)&&void 0!==g?g:"Select an option";s((()=>{A&&F.current&&J(F.current.offsetWidth)}),[A,Y]);const Z=_.buttonWidth,$=A?G+("x-small"===B?16:"small"===B?20:24)+("default"===B?8:0)+16+8+4:void 0,ee=null!==(x=_.dropdownWidth)&&void 0!==x?x:"212px";return o(n,{children:[t(p.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:E||("x-small"===B?24:"small"===B?32:48),width:void 0!==$?$:null!=Z?Z:"100%"},Z?{maxWidth:Z}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===B?"4px 8px":"6px 8px",backgroundColor:void 0!==k?"#C3E4C4":V?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),T),input:{minHeight:"100%",maxWidth:"100%",color:void 0!==k?"#00580E":"inherit"}}},{children:t("div",Object.assign({onMouseEnter:()=>q(!0),onMouseLeave:()=>q(!1),style:_.width?{width:_.width}:void 0},{children:o(u,Object.assign({"data-test":_["data-test"],ref:K,onSelect:function(e){Array.isArray(e)?R([...e]):R([e]),null==y||y(e)},disabled:S,onDropdownVisbilityChange:e=>U(e)},_,{width:ee},{children:["default"==D&&t(c,{version:_.version,noErrorHint:H,state:S?"disabled":"none",value:void 0===k?Y:k,errorMessage:_.error,variant:B,placeholder:null!=j?j:"Select an option",onChangeText:m,leftIcon:z&&(null===(b=Q[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return t(n,{children:null===(e=Q[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return o("div",Object.assign({style:{display:"flex"}},{children:[M&&(null===(e=Q[0])||void 0===e?void 0:e.trailingIcon),t(d,{style:{transform:N?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"x-small"===B?16:"small"===B?20:24,height:"x-small"===B?16:"small"===B?20:24,color:a.content.primary})]}))}},truncateText:null==W||W}),"chip"==D&&t(h,{placeholder:null!=j?j:"Select options",chips:Q,onDeleteChip:e=>{null==P||P(e)},errorMessage:_.error,isDropdownOpened:N,sizeToUse:B,containerStyle:{width:null!==(w=_.width)&&void 0!==w?w:"100%",cursor:"pointer"},showLabelsOnMoreHover:L})]}))}))})),A&&t("span",Object.assign({ref:F,"aria-hidden":!0,style:{position:"fixed",top:"-9999px",left:"-9999px",visibility:"hidden",whiteSpace:"nowrap",pointerEvents:"none",fontSize:"x-small"===B?"12px":"small"===B?"14px":"16px"}},{children:Y}))]})};f.displayName="Dropdown";export{f as Dropdown};

package/dist/esm/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/Input.model';
+import { InputProps } from '../input';
 type DropdownProps = OpenDropdownProps & {
     isLoading?: boolean;
     children?: React.ReactNode;

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

@@ -1,4 +1,9 @@
 import 'react-image-crop/dist/ReactCrop.css';
-import { BikImageCropperProps } from './BikImageCropper.model';
+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

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

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

@@ -1,6 +1,66 @@
-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;
+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

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

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

@@ -1,3 +1,73 @@
 import React from 'react';
-import { InputProps } from './Input.model';
+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.styled.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { InputStateI, InputTypeI, InputVariant } from './Input.model';
+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;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;
@@ -16,7 +16,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
 }, 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;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     isLeft?: boolean | undefined;
     iconSize?: string | undefined;
@@ -57,7 +57,7 @@ export declare const InputContainerSmall: import("@emotion/styled").StyledCompon
 }, {}, {}>;
 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;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     invalid?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -91,7 +91,7 @@ export declare const InputFooter: import("@emotion/styled").StyledComponent<{
 }, {}, {}>;
 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;
+    as?: import("react").ElementType<any> | undefined;
 } & {
     width?: string | undefined;
     height?: string | undefined;

package/dist/esm/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/Input.model';
+import { InputTypeI } from '../input';
 import { PickerType } from '../variable-picker-v3/model';
 export interface InputWithVariablesProps {
     type?: InputTypeI;

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

@@ -1,3 +1,19 @@
 /// <reference types="react" />
-import { ListItemProps } from './List.model';
+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>>;