@bikdotai/bik-component-library 0.0.6-beta.3 → 0.0.6-chips-beta

package/dist/cjs/components/{opennedDropdown → dropdown}/type.d.ts

@@ -1,27 +1,30 @@
+/// <reference types="react" />
 export interface OpenDropdownProps {
+    defaultOptions?: DropdownOption[];
     options: DropdownOption[];
     isSearchable?: boolean;
     error?: string;
-    disabledFocus?: boolean;
     isMultiSelect?: boolean;
-    width?: number | string;
+    width?: string;
     height?: number | string;
     allowFreeForm?: boolean;
     onClose?: () => void;
-    onSelect?: (option: SingleOption | SingleOption[]) => void;
+    onSelect?: (option: DropdownOption | DropdownOption[]) => void;
 }
 export type GroupedOption = {
     label?: string;
-    options: SingleOption[];
+    options: (SingleOption | MultiSelectOption)[];
 };
 export type SingleOption = {
-    label?: string;
-    value?: string;
-    descriptions?: string;
+    label: string;
+    value: string;
+    descriptions?: string | null;
     selected?: boolean;
     disabled?: boolean;
-};
-export type MultiSelectOption = SingleOption & {
     isFreeForm?: boolean;
+    subText?: string;
+    trailingIcon?: JSX.Element;
+    customComponent?: JSX.Element;
 };
+export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/cjs/components/fab-menu/FABMenu.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { FAB_POSITION } from '../floating-action-button/FloatingActionButton.styles';
-import { DropdownOption } from '../opennedDropdown/type';
+import { DropdownOption } from '../dropdown/type';
+import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from '../floating-action-button/FloatingActionButton.styles';
+import { TooltipPlacement } from '../tooltips';
 export declare const FABMenu: React.FC<{
-    onSelect: () => void;
+    onSelect: (selected: DropdownOption | DropdownOption[]) => void;
     menuOptions: DropdownOption[];
     buttonWidth?: number;
     buttonHeight?: number;
@@ -10,6 +11,13 @@ export declare const FABMenu: React.FC<{
     buttonPosition?: FAB_POSITION;
     menuWidth?: number;
     menuHeight?: number;
-    buttonIcon?: any;
-    buttonPadding?: number;
+    buttonIcon?: JSX.Element;
+    buttonPaddingHorizontal?: number;
+    buttonPaddingVertical?: number;
+    tooltipPlacement?: TooltipPlacement;
+    tooltipText?: string;
+    zIndex?: number;
+    isRound?: boolean;
+    dropPosition?: DROP_POSITION;
+    menuAligment?: MENU_ALIGNMENT;
 }>;

package/dist/cjs/components/fab-menu/FABMenu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),n=require("../floating-action-button/FloatingActionButton.js"),o=require("../opennedDropdown/components/OpennedDropdown.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:u,buttonHeight:d,buttonColor:s,buttonPosition:c,menuWidth:p,menuHeight:h,buttonIcon:l,buttonPadding:a}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:l,width:u,height:d,color:s,position:c,buttonPadding:a},{children:t.jsx(o.OpennedDropdown,{options:r,height:h||90,width:p,onSelect:i})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:c,menuHeight:a,buttonIcon:p,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:p,width:d,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w},{children:t.jsx(o.OpenedDropdown,{options:r,height:a||90,width:`${c}px`,onSelect:i})}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.d.ts

@@ -1,13 +1,21 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
-import { FAB_POSITION } from './FloatingActionButton.styles';
+import { TooltipPlacement } from '../tooltips/CustomisedTooltip';
+import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from './FloatingActionButton.styles';
 export declare const FloatingActionButton: React.FC<{
     onClick?: () => void;
-    children: React.ReactNode;
+    children?: React.ReactNode;
     width?: number;
     height?: number;
-    icon?: any;
+    icon?: JSX.Element;
     color?: string;
     position?: FAB_POSITION;
-    buttonPadding?: number;
+    buttonPaddingHorizontal?: number;
+    buttonPaddingVertical?: number;
+    tooltipText?: string;
+    tooltipPlacement?: TooltipPlacement;
+    zIndex?: number;
+    isRound?: boolean;
+    dropPosition?: DROP_POSITION;
+    menuAligment?: MENU_ALIGNMENT;
 }>;

package/dist/cjs/components/floating-action-button/FloatingActionButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),n=require("react-bootstrap"),i=require("../../constants/Theme.js"),e=require("../../assets/icons/question-mark.svg.js"),o=require("./FloatingActionButton.styles.js");exports.FloatingActionButton=r=>{const{icon:s,onClick:d,children:c}=r,h=r.width?r.width:48,a=r.height?r.height:48,l=r.color?r.color:i.COLORS.background.inverse,g=r.position?r.position:o.FAB_POSITION.TOP_LEFT,u=r.buttonPadding?r.buttonPadding:20;return t.jsx(t.Fragment,{children:t.jsx(o.FloatingActionButtonOuterContainer,Object.assign({width:h,height:a,color:l,position:g,buttonPadding:u},{children:t.jsx(o.StyledDropdown,{children:c?t.jsxs(t.Fragment,{children:[t.jsx(n.Dropdown.Toggle,{children:t.jsx(o.FloatingActionButtonContainer,Object.assign({width:h,height:a,color:l,buttonPadding:u,onClick:d},{children:s||t.jsx(e.default,{width:22,height:22})}))}),t.jsx(n.Dropdown.Menu,{children:c})]}):t.jsx(o.FloatingActionButtonContainer,Object.assign({width:h,height:a,color:l,buttonPadding:u,onClick:d},{children:s||t.jsx(e.default,{width:22,height:22})}))})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react"),i=require("react-bootstrap"),n=require("../../constants/Theme.js"),e=require("../tooltips/CustomisedTooltip.js"),r=require("../../assets/icons/question-mark.svg.js"),s=require("./FloatingActionButton.styles.js");const l=o=>{const{width:i,height:n,color:l,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h,isRound:u,isDropdownOpen:g}=o;return h?t.jsx(e.CustomisedTooltip,{isTooltipVisible:!g,tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(s.FloatingActionButtonContainer,Object.assign({width:i,height:n,color:l,onClick:c,isRound:u},{children:d||t.jsx(r.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(s.FloatingActionButtonContainer,Object.assign({width:i,height:n,color:l,onClick:c,isRound:u},{children:d||t.jsx(r.default,{width:22,height:22})}))})};exports.FloatingActionButton=r=>{const{icon:c,onClick:d,children:a,tooltipText:h,isRound:u=!0,width:g=48,height:p=48,color:j=n.COLORS.background.inverse,position:x=s.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:O=20,buttonPaddingVertical:m=20,zIndex:T=1,tooltipPlacement:w=e.TooltipPlacement.Auto,dropPosition:P=s.DROP_POSITION.DOWN,menuAligment:C=s.MENU_ALIGNMENT.END}=r,[b,F]=o.useState(!1);return t.jsx(t.Fragment,{children:t.jsx(s.FloatingActionButtonOuterContainer,Object.assign({width:g,height:p,color:j,position:x,buttonPaddingHorizontal:O,buttonPaddingVertical:m,zIndex:T},{children:t.jsx(s.StyledDropdown,Object.assign({onToggle:(t,o)=>{F(t)},drop:P,align:C},{children:a?t.jsxs(t.Fragment,{children:[t.jsx(s.DropdownToggleContainer,Object.assign({drop:P},{children:t.jsx(l,{width:g,height:p,color:j,tooltipPlacement:w,onClick:d,tooltipText:h,icon:c,position:x,isRound:u,isDropdownOpen:b})})),t.jsx(i.Dropdown.Menu,{children:a})]}):t.jsx(l,{width:g,height:p,color:j,tooltipPlacement:w,onClick:d,tooltipText:h,icon:c,position:x,isRound:u,isDropdownOpen:b})}))}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.d.ts

@@ -5,18 +5,32 @@ export declare enum FAB_POSITION {
     BOTTOM_LEFT = "bottom left",
     BOTTOM_RIGHT = "botton right"
 }
+export declare enum DROP_POSITION {
+    UP = "up",
+    UP_CENTERED = "up-centered",
+    START = "start",
+    END = "end",
+    DOWN = "down",
+    DOWN_CENTERED = "down-centered"
+}
+export declare enum MENU_ALIGNMENT {
+    START = "start",
+    END = "end"
+}
 export declare const FloatingActionButtonContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
     height: number;
     color: string;
-    buttonPadding: number;
+    isRound: boolean;
 }, never>;
 export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
     height: number;
     color: string;
     position: FAB_POSITION;
-    buttonPadding: number;
+    buttonPaddingHorizontal: number;
+    buttonPaddingVertical: number;
+    zIndex: number;
 }, never>;
 export declare const StyledDropdown: import("styled-components").StyledComponent<import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap").DropdownProps> & {
     Toggle: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"button", import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps>;

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.js

@@ -1,19 +1,23 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right";const d=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n,d,p=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right",exports.DROP_POSITION=void 0,(n=exports.DROP_POSITION||(exports.DROP_POSITION={})).UP="up",n.UP_CENTERED="up-centered",n.START="start",n.END="end",n.DOWN="down",n.DOWN_CENTERED="down-centered",exports.MENU_ALIGNMENT=void 0,(d=exports.MENU_ALIGNMENT||(exports.MENU_ALIGNMENT={})).START="start",d.END="end";const a=p.default.div`
 	width: ${t=>t.width}px;
 	height: ${t=>t.height}px;
 	background: ${t=>t.color};
-	border-radius: 50%;
+	${t=>t.isRound?"border-radius: 50%;":"border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius:50%;"}
 	justify-content: center;
 	align-items: center;
 	cursor: pointer;
 	display: flex;
-`,p=n.default.div`
+`,s=p.default.div`
 	display: flex;
+	border-radius: 50%;
 	flex-direction: column;
 	align-items: flex-end;
-	position: absolute;
-	${t=>t.position===exports.FAB_POSITION.BOTTOM_RIGHT?`right: ${t.buttonPadding}px; bottom: ${t.buttonPadding}px`:t.position===exports.FAB_POSITION.BOTTOM_LEFT?`left: ${t.buttonPadding}px; bottom: ${t.buttonPadding}px`:t.position===exports.FAB_POSITION.TOP_LEFT?`left: ${t.buttonPadding}px; top: ${t.buttonPadding}px`:t.position===exports.FAB_POSITION.TOP_RIGHT?`right: ${t.buttonPadding}px; top: ${t.buttonPadding}px`:""}
-`,a=n.default(t.Dropdown)`
+	position: fixed;
+	width: ${t=>t.width}px;
+	height: ${t=>t.height}px;
+	z-index: ${t=>t.zIndex};
+	${t=>t.position===exports.FAB_POSITION.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
+`,l=p.default(t.Dropdown)`
 	.filter-container {
 		.single-row {
 			display: flex;
@@ -37,7 +41,7 @@
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-		padding: 6px 8px;
+		padding: 6px 0px;
 		background: ${t=>"true"===t.active?e.COLORS.background.positive.light:e.COLORS.surface.standard};
 		color: ${t=>"true"===t.active?e.COLORS.content.positive:e.COLORS.content.primary};
 	}
@@ -48,7 +52,7 @@
 	.btn-primary.dropdown-toggle,
 	.show > .btn-primary.dropdown-toggle {
 		color: ${t=>"true"===t.active?e.COLORS.content.positive:e.COLORS.content.primary};
-		background-color: ${t=>"true"===t.active?e.COLORS.background.positive.light:e.COLORS.surface.standard};
+		background-color: ${t=>"true"===t.active?e.COLORS.background.positive.light:"transparent"};
 		border: none;
 	}
 	.btn:focus {
@@ -60,6 +64,11 @@
 		border-top: 0.3em solid ${e.COLORS.content.primary};
 		display: none;
 	}
+
+	.dropdown-toggle::before {
+		border-top: 0.3em solid ${e.COLORS.content.primary};
+		display: none;
+	}
 	.dropdown-menu {
 		min-width: 12rem;
 		padding: 0 0;
@@ -70,7 +79,7 @@
 		text-decoration: none;
 		background-color: ${e.COLORS.background.positive.light};
 	}
-`;n.default(t.Dropdown.Toggle)`
+`,O=p.default(t.Dropdown.Toggle)`
 	border-radius: 4px;
 	display: flex;
 	flex-direction: row;
@@ -80,4 +89,4 @@
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
-`,exports.FloatingActionButtonContainer=d,exports.FloatingActionButtonOuterContainer=p,exports.StyledDropdown=a;
+`;exports.DropdownToggleContainer=O,exports.FloatingActionButtonContainer=a,exports.FloatingActionButtonOuterContainer=s,exports.StyledDropdown=l;

package/dist/cjs/components/floating-action-button/index.d.ts

@@ -1 +1,2 @@
 export * from './FloatingActionButton';
+export * from './FloatingActionButton.styles';

package/dist/cjs/components/image-compress/ImageCompress.d.ts

@@ -0,0 +1,7 @@
+export interface CompressImageReturnType {
+    base64: string;
+    compressedFile: File;
+}
+export declare class ImageService {
+    static compressImage: (file: File) => Promise<CompressImageReturnType>;
+}

package/dist/cjs/components/image-compress/ImageCompress.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(require("browser-image-compression"));class i{}Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:r=>e.__awaiter(void 0,void 0,void 0,(function*(){let e=r,i="";try{const a={maxSizeMB:r.size/1024/1024*.8,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>1&&(e=yield t.default(r,a)),i=yield t.default.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:i,compressedFile:e}}))}),exports.ImageService=i;

package/dist/cjs/components/image-compress/index.d.ts

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

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

@@ -1,18 +1,18 @@
 /// <reference types="react" />
-export type Variant = 'default' | 'small';
+export type InputVariant = 'default' | 'small';
 export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
 export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
 export interface InputProps {
     placeholder?: string;
-    variant?: Variant;
+    variant?: InputVariant;
     width?: string;
     height?: string;
     leftIcon?: {
-        icon: any;
+        icon: React.FC;
         callback?: () => void;
     };
     rightIcon?: {
-        icon: any;
+        icon: React.FC;
         callback?: () => void;
     };
     labelText?: string;
@@ -25,7 +25,7 @@ export interface InputProps {
     /**
         validate:  function takes the input and returns boolean + string (error message in case of invalid input)
      **/
-    validate: (input?: string | number) => [boolean, string];
+    validate?: (input?: string | number) => [boolean, string];
     onChangeText: (input: string) => void;
     button?: {
         text: string;
@@ -33,5 +33,8 @@ export interface InputProps {
     };
     suffixText?: string;
     prefixText?: string;
+    value?: string;
+    onBlur?: () => void;
+    onFocus?: () => void;
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js");const a=e=>e&&"function"==typeof e,o=t.forwardRef(((o,u)=>{var c,d,x;const{placeholder:h,leftIcon:j,rightIcon:v,labelText:p,maxCharLimit:f,isRequired:g,hintText:y,type:I,state:b,validate:C,variant:S,button:m,suffixText:O,prefixText:w,onChangeText:q}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),k=null==j?void 0:j.icon,E=null==v?void 0:v.icon,[H,T]=t.useState(""),[B,F]=t.useState(!1),[L,M]=t.useState(!1),[R,D]=t.useState(),P="small"===S?"18px":"22px",z=t.useContext(l.InputStyleContext);t.useEffect((()=>{D(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{F(!1),("invalid"===o.state||R)&&F(!0)}),[o.state]),t.useEffect((()=>{F(!!R)}),[R]),t.useEffect((()=>{if(q(H),!a(C))return;const[e,t]=C(H);F(!e),D(t)}),[H]);const A=function(e){if(a(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},K=e=>{![8].includes(e.which)&&f>0&&e.target.value.length===f&&e.preventDefault()},W=e=>{T(e.target.value)},_=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==I&&e.jsx("input",{style:null!==(t=null==z?void 0:z.input)&&void 0!==t?t:{},ref:u,type:I,onFocus:()=>M(!0),onBlur:()=>M(!1),placeholder:h||"Enter here",onChange:W,onKeyDown:e=>K(e)}),"multiline"===I&&e.jsx("textarea",{ref:u,onFocus:()=>M(!0),onBlur:()=>M(!1),placeholder:h||"Enter here",onChange:W,onKeyDown:e=>K(e)})]})};return e.jsxs(s.RootContainer,Object.assign({width:o.width,height:o.height,state:b,type:I,style:null!==(c=null==z?void 0:z.RootContainer)&&void 0!==c?c:{}},{children:[(!!y||!!R)&&e.jsxs(s.InputFooter,Object.assign({invalid:!!R},{children:[!!R&&e.jsx(r.default,{}),R||y]})),e.jsxs(s.InputWrapper,Object.assign({variant:S,state:b,width:o.width,isActive:"active"===b||L,isInvalid:B,style:null!==(d=null==z?void 0:z.InputWrapper)&&void 0!==d?d:{}},{children:[!!k&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:P,onClick:()=>A(null==j?void 0:j.callback),isLeft:!0,style:null!==(x=null==z?void 0:z.IconHolder)&&void 0!==x?x:{}},{children:e.jsx(k,{})})),!!w&&e.jsx(s.PrefixHolder,Object.assign({variant:S},{children:w})),"default"===S&&e.jsx(s.InputContainer,{children:_()}),"small"===S&&e.jsx(s.InputContainerSmall,{children:_()}),!!E&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:P,onClick:()=>A(null==j?void 0:j.callback),isLeft:!1},{children:e.jsx(E,{})})),!!O&&e.jsx(s.SuffixHolder,Object.assign({variant:S},{children:O})),!!m&&!!m.text&&e.jsx(n.Button,Object.assign({onClick:()=>A(null==m?void 0:m.onClick)},{children:m.text}))]})),(!!p||!!f)&&"default"===S&&e.jsxs(s.InputHeader,Object.assign({invalid:B},{children:[e.jsxs(i.BodySecondary,{children:[p,g?e.jsx("span",{children:"*"}):""]}),f>0&&e.jsxs(s.MaxCharStyle,{children:[H.length,"/",f]})]}))]}))}));o.displayName="Input",exports.Input=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js");const a=e=>e&&"function"==typeof e,o=t.forwardRef(((o,u)=>{var c,d,x;const{placeholder:v,leftIcon:h,rightIcon:j,labelText:p,maxCharLimit:f,isRequired:g,hintText:y,type:I,state:b,validate:C,variant:S,button:m,suffixText:O,prefixText:w,onChangeText:q,value:T}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),k=null==h?void 0:h.icon,B=null==j?void 0:j.icon,[E,H]=t.useState(""),[F,L]=t.useState(!1),[M,R]=t.useState(!1),[D,P]=t.useState(),z="small"===S?"18px":"22px",A=t.useContext(l.InputStyleContext);t.useEffect((()=>{P(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{L(!1),("invalid"===o.state||D)&&L(!0)}),[o.state,D]),t.useEffect((()=>{L(!!D)}),[D]),t.useEffect((()=>{if(q(E),!C||!a(C))return;const[e,t]=C(E);L(!e),P(t)}),[E]);const K=function(e){if(a(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},W=e=>{![8].includes(e.which)&&f>0&&e.target.value.length===f&&e.preventDefault()},_=e=>{H(e.target.value)},N=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==I&&e.jsx("input",{style:null!==(t=null==A?void 0:A.input)&&void 0!==t?t:{},ref:u,type:I,value:T,onFocus:()=>(R(!0),void K(o.onFocus)),onBlur:()=>(R(!1),void K(o.onBlur)),placeholder:v||"Enter here",onChange:_,onKeyDown:e=>W(e)}),"multiline"===I&&e.jsx("textarea",{value:T,ref:u,onFocus:()=>R(!0),onBlur:()=>R(!1),placeholder:v||"Enter here",onChange:_,onKeyDown:e=>W(e)})]})};return e.jsxs(s.RootContainer,Object.assign({width:o.width,height:o.height,state:b,type:I,style:null!==(c=null==A?void 0:A.RootContainer)&&void 0!==c?c:{}},{children:[(!!y||!!D)&&e.jsxs(s.InputFooter,Object.assign({invalid:!!D},{children:[!!D&&e.jsx(r.default,{}),D||y]})),e.jsxs(s.InputWrapper,Object.assign({variant:S,state:b,width:o.width,isActive:"active"===b||M,isInvalid:F,style:null!==(d=null==A?void 0:A.InputWrapper)&&void 0!==d?d:{}},{children:[!!k&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:z,onClick:()=>K(null==h?void 0:h.callback),isLeft:!0,style:null!==(x=null==A?void 0:A.IconHolder)&&void 0!==x?x:{}},{children:e.jsx(k,{})})),!!w&&e.jsx(s.PrefixHolder,Object.assign({variant:S},{children:w})),"default"===S&&e.jsx(s.InputContainer,{children:N()}),"small"===S&&e.jsx(s.InputContainerSmall,{children:N()}),!!B&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:z,onClick:()=>K(null==h?void 0:h.callback),isLeft:!1},{children:e.jsx(B,{})})),!!O&&e.jsx(s.SuffixHolder,Object.assign({variant:S},{children:O})),m&&m.text&&e.jsx(n.Button,{buttonText:m.text,onClick:()=>K(null==m?void 0:m.onClick)})]})),(!!p||!!f)&&"default"===S&&e.jsxs(s.InputHeader,Object.assign({invalid:F},{children:[e.jsxs(i.BodySecondary,{children:[p,g?e.jsx("span",{children:"*"}):""]}),f>0&&e.jsxs(s.MaxCharStyle,{children:[E.length,"/",f]})]}))]}))}));o.displayName="Input",exports.Input=o;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputStateI, InputTypeI, Variant } from "./Input";
+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> | undefined;
@@ -9,7 +9,7 @@ export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     isActive?: boolean | undefined;
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
-    variant?: Variant | undefined;
+    variant?: InputVariant | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconHolder: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -17,7 +17,7 @@ export declare const IconHolder: import("@emotion/styled").StyledComponent<{
 } & {
     isLeft?: boolean | undefined;
     iconSize?: string | undefined;
-    variant?: Variant | undefined;
+    variant?: InputVariant | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const InputContainer: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -96,7 +96,7 @@ export declare const PrefixHolder: import("@emotion/styled").StyledComponent<{
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
-    variant?: Variant | undefined;
+    variant?: InputVariant | undefined;
 }, {}, {}>;
 export declare const SuffixHolder: import("@emotion/styled").StyledComponent<{
     [x: string]: any;
@@ -110,5 +110,5 @@ export declare const SuffixHolder: import("@emotion/styled").StyledComponent<{
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
-    variant?: Variant | undefined;
+    variant?: InputVariant | undefined;
 }, {}, {}>;