@bikdotai/bik-component-library 0.0.5--plans--beta → 0.0.5-beta

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

@@ -1,50 +0,0 @@
-/// <reference types="react" />
-export declare enum FAB_POSITION {
-    TOP_LEFT = "top left",
-    TOP_RIGHT = "top right",
-    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;
-    isRound?: boolean | undefined;
-}, never>;
-export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
-    width: number;
-    height: number;
-    color: string;
-    position: FAB_POSITION;
-    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>;
-    Menu: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/esm/DropdownMenu").DropdownMenuProps>;
-    Item: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<import("@restart/ui/esm/types").DynamicRefForwardingComponent<import("react").ForwardRefExoticComponent<import("@restart/ui/esm/Button").ButtonProps & import("react").RefAttributes<HTMLElement>>, import("@restart/ui/esm/DropdownItem").DropdownItemProps>, import("react-bootstrap/esm/DropdownItem").DropdownItemProps>;
-    ItemText: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"span", unknown>;
-    Divider: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"hr", unknown>;
-    Header: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", unknown>;
-}, any, {
-    active?: string | undefined;
-    width?: string | undefined;
-    height?: string | undefined;
-}, never>;
-export declare const DropdownToggleContainer: import("styled-components").StyledComponent<import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"button", import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps>, any, {}, never>;
-export declare const TooltipStyled: import("styled-components").StyledComponent<"div", any, {
-    tooltipWidth?: number | undefined;
-}, never>;

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

@@ -1,99 +0,0 @@
-"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};
-	${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;
-`,s=p.default.div`
-	display: flex;
-	border-radius: 50%;
-	flex-direction: column;
-	align-items: flex-end;
-	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;
-			flex-direction: row;
-			align-items: center;
-			justify-content: flex-start;
-			gap: 8px;
-			padding: 14px;
-			border-bottom: 1px solid ${e.COLORS.stroke.primary};
-
-			:last-child {
-				border-bottom: none !important;
-			}
-		}
-	}
-	button {
-		border: 1px solid
-			${t=>"true"===t.active?e.COLORS.stroke.positive.lightAlt:e.COLORS.stroke.primary};
-		border-radius: 4px;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-		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};
-	}
-
-	.btn-primary:hover,
-	.btn-primary:active,
-	.btn-primary:focus,
-	.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:"transparent"};
-		border: none;
-	}
-	.btn:focus {
-		outline: 0;
-		box-shadow: 0 0 0 0.25rem transparent !important;
-	}
-
-	.dropdown-toggle::after {
-		border-top: 0.3em solid ${e.COLORS.content.primary};
-		display: none !important;
-	}
-
-	.dropdown-toggle::before {
-		border-top: 0.3em solid ${e.COLORS.content.primary};
-		display: none !important;
-	}
-	.dropdown-menu {
-		min-width: 12rem;
-		padding: 0 0;
-	}
-	.dropdown-item:active,
-	.dropdown-item:hover {
-		color: ${e.COLORS.content.positive};
-		text-decoration: none;
-		background-color: ${e.COLORS.background.positive.light};
-	}
-`,c=p.default(t.Dropdown.Toggle)`
-	border-radius: 4px;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	padding: 6px 8px;
-	font-weight: 400;
-	font-size: 14px;
-	line-height: 20px;
-`,O=p.default.div`
-	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-radius: 4px;
-	padding: 8px;
-	background-color: ${e.COLORS.content.primary};
-	color: ${e.COLORS.content.primaryInverse};
-	width: ${t=>t.tooltipWidth?t.tooltipWidth+"px":"120px"};
-`;exports.DropdownToggleContainer=c,exports.FloatingActionButtonContainer=a,exports.FloatingActionButtonOuterContainer=s,exports.StyledDropdown=l,exports.TooltipStyled=O;

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

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

package/dist/cjs/components/helpers/FileUploaderHelper.d.ts

@@ -1,12 +0,0 @@
-export declare const FILE_TYPE_NOT_SUPPORT = "File type no supported";
-export declare const FILE_SIZE_REACHED: (size: number) => string;
-export declare const getFileFormatErrorMessage: (format: string) => string;
-export declare const SIZE_LIMIT_MAP: {
-    image: number;
-    video: number;
-    application: number;
-};
-export declare const SUPPORTED_FILE_FORMAT: string[];
-export declare class FileUploaderHelper {
-    validate(file: Blob): string | undefined;
-}

package/dist/cjs/components/helpers/FileUploaderHelper.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../utils/bytesToMB.js");const r="File type no supported",t=e=>`Max file size of ${e}mb is allowed`,p=e=>`Only ${e.toUpperCase()} format allowed`,o={image:5,video:16,application:100},i=["mp4","png","jpeg","jpg","pdf"];exports.FILE_SIZE_REACHED=t,exports.FILE_TYPE_NOT_SUPPORT=r,exports.FileUploaderHelper=class{validate(s){const a=s.size,[l,n]=s.type.split("/");if(!o[l])return r;if(e.bytesToMB(a)>o[l])return t(o[l]);if(!i.includes(n.toLocaleLowerCase())){if("video"===l)return p("mp4");if("image"===l)return p("png, jpeg, jpg");if("application"===l)return p("pdf")}}},exports.SIZE_LIMIT_MAP=o,exports.SUPPORTED_FILE_FORMAT=i,exports.getFileFormatErrorMessage=p;

package/dist/cjs/components/icon-button/IconButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconButtonProps } from './model';
-export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/icon-button/IconButton.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),o=require("./IconButton.styled.js"),i=require("./theme.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const s=r.forwardRef(((r,d)=>{var{id:s,iconButtonType:c="default",Icon:l,height:u=20,width:a=20,bordered:y,disabled:b,isSelected:h,style:f}=r,p=e.__rest(r,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style"]);const j=i.getIconColor(c,b,h);return t.jsx(o.IconButton,Object.assign({id:s,ref:d,style:f,iconButtonType:c,bordered:y,disabled:b,isSelected:h},p,{children:n.default.createElement(l,{height:u,width:a,color:j,style:{display:"block"}})}))}));s.displayName="IconButton",exports.IconButton=s;

package/dist/cjs/components/icon-button/IconButton.styled.d.ts

@@ -1,6 +0,0 @@
-import { IconButtonType } from './model';
-export declare const IconButton: import("styled-components").StyledComponent<"button", any, {
-    bordered?: boolean | undefined;
-    iconButtonType: IconButtonType;
-    isSelected?: boolean | undefined;
-}, never>;

package/dist/cjs/components/icon-button/IconButton.styled.js

@@ -1,3 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js"),n=require("./theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=r(t).default.button`
-	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered?`border: 1px solid ${e.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground-color: ${n.generateBackgroundColor(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
-`;exports.IconButton=o;

package/dist/cjs/components/icon-button/index.d.ts

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

package/dist/cjs/components/icon-button/model.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning';
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Icon to render
-     */
-    Icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    /**
-     * Custom styles which can be added to the icon button
-     * @default default undefined
-     */
-    style?: React.CSSProperties;
-    /**
-     * Custom height for the svg icon
-     * @default default 20
-     */
-    height?: number;
-    /**
-     * Custom width for the svg icon
-     * @default default 20
-     */
-    width?: number;
-    /**
-     * Custom height for the svg icon
-     * @default default default
-     */
-    iconButtonType?: IconButtonType;
-    /**
-     * Add border to the button
-     * @default default false
-     */
-    bordered?: boolean;
-    /**
-     * Flag to check if icon button is selected/clicked
-     */
-    isSelected?: boolean;
-}

package/dist/cjs/components/icon-button/theme.d.ts

@@ -1,3 +0,0 @@
-import { IconButtonType } from './model';
-export declare const getIconColor: (type: IconButtonType, disabled?: boolean, isSelected?: boolean) => string;
-export declare const generateBackgroundColor: (type: IconButtonType) => string;

package/dist/cjs/components/icon-button/theme.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");exports.generateBackgroundColor=t=>"default"===t?e.COLORS.background.brandLight:"negative"===t?e.COLORS.background.negative.light:"positive"===t?e.COLORS.background.positive.light:e.COLORS.background.warning.light,exports.getIconColor=(t,n,r)=>{if(n)return e.COLORS.content.inactive;switch(t){case"default":return r?e.COLORS.content.brand:e.COLORS.content.primary;case"negative":return e.COLORS.content.negative;case"positive":return e.COLORS.content.positive;case"warning":return r?e.COLORS.content.warning:e.COLORS.content.primary;default:return e.COLORS.content.primary}};

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

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

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

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

@@ -1,20 +0,0 @@
-import React from 'react';
-export declare const extractSingleValueIfAny: (nativeID: string) => string;
-export declare const getInputNode: (nativeID: string) => HTMLInputElement;
-export interface ChipInputProps {
-    onChipsChange: (chips: (string | number)[]) => void;
-    placeholder: string;
-    label?: string;
-    labelColor?: string;
-    hintText?: string;
-    hintTextColor?: string;
-    chipTheme?: () => void;
-    chips: string[];
-    error?: string;
-    inputHeight?: number;
-    createChipKeys?: (string | number)[];
-    chipsContainerCustomStyle?: React.CSSProperties;
-    nativeID?: string;
-}
-declare const ChipInput: React.FC<ChipInputProps>;
-export default ChipInput;

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

@@ -1 +0,0 @@
-"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}))]}))};

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

@@ -1,66 +0,0 @@
-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/cjs/components/input/ChipInput.styled.js

@@ -1 +0,0 @@
-"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}});

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

@@ -1,43 +0,0 @@
-/// <reference types="react" />
-export type InputVariant = 'default' | 'small';
-export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
-export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
-export interface InputProps {
-    noErrorHint?: boolean;
-    placeholder?: string;
-    variant?: InputVariant;
-    width?: string;
-    height?: string;
-    leftIcon?: {
-        icon: React.FC;
-        callback?: () => void;
-    };
-    rightIcon?: {
-        icon: React.FC;
-        callback?: () => void;
-    };
-    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;
-    };
-    suffixText?: string;
-    prefixText?: string;
-    value?: string;
-    onBlur?: (e: any) => void;
-    onFocus?: () => void;
-    isActive?: boolean;
-    id?: string;
-}
-export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

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

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

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

@@ -1,114 +0,0 @@
-/// <reference types="react" />
-import { InputStateI, InputTypeI, InputVariant } from "./Input";
-export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    width?: string | undefined;
-    height?: string | undefined;
-    isActive?: boolean | undefined;
-    isInvalid?: boolean | undefined;
-    state?: InputStateI | 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;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    isLeft?: boolean | undefined;
-    iconSize?: string | undefined;
-    variant?: InputVariant | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputContainer: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const InputHeader: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    invalid?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const InputFooter: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    invalid?: boolean | undefined;
-}, {}, {}>;
-export declare const RootContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    width?: string | undefined;
-    height?: string | undefined;
-    state?: InputStateI | undefined;
-    type: InputTypeI;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PrefixHolder: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    variant?: InputVariant | undefined;
-}, {}, {}>;
-export declare const SuffixHolder: import("@emotion/styled").StyledComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-} & {
-    as?: string | import("react").ComponentType<any> | undefined;
-    forwardedAs?: string | import("react").ComponentType<any> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    variant?: InputVariant | undefined;
-}, {}, {}>;