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

package/dist/esm/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/esm/components/fab-menu/FABMenu.js

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

package/dist/esm/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/esm/components/floating-action-button/FloatingActionButton.js

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

package/dist/esm/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/esm/components/floating-action-button/FloatingActionButton.styles.js

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

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

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

package/dist/esm/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/esm/components/image-compress/ImageCompress.js

@@ -0,0 +1 @@
+import{__awaiter as e}from"../../_virtual/_tslib.js";import r from"browser-image-compression";class i{}Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:i=>e(void 0,void 0,void 0,(function*(){let e=i,o="";try{const t={maxSizeMB:i.size/1024/1024*.8,maxWidthOrHeight:1920,useWebWorker:!0};i.size/1024/1024>1&&(e=yield r(i,t)),o=yield r.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:o,compressedFile:e}}))});export{i as ImageService};

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

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

package/dist/esm/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/esm/components/input/Input.js

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

package/dist/esm/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;
 }, {}, {}>;