@bikdotai/bik-component-library 0.0.13-beta.3 → 0.0.13-beta.31

package/dist/esm/components/dropdown/{opennedDropdown → OpenedDropdown}/components/searchbox/SearchBox.js

@@ -1 +1 @@
-import{jsx as r,Fragment as o}from"react/jsx-runtime";import{createRef as t}from"react";import{Input as e}from"../../../../input/Input.js";import{InputStyleContext as n}from"../../../../input/context/InputStyleProvider.js";import{COLORS as i}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import s from"../../../../../assets/icons/search.svg.js";const p=p=>{let{onSearch:a}=p;const l=t();return r(n.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+i.stroke.primary,padding:"12px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:r(e,{ref:l,placeholder:"Search",leftIcon:{icon:()=>r(s,{width:24,height:24,color:i.content.placeholder})},rightIcon:{icon:()=>{var t;return(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.value)?r(c,{onClick:()=>{l.current&&(l.current.value=""),a("")},width:24,height:24,color:i.content.placeholder}):r(o,{})}},onChangeText:a})}))};export{p as SearchBox};
+import{jsx as r,Fragment as o}from"react/jsx-runtime";import{createRef as t}from"react";import{Input as e}from"../../../../input/Input.js";import{InputStyleContext as n}from"../../../../input/context/InputStyleProvider.js";import{COLORS as i}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import s from"../../../../../assets/icons/search.svg.js";const p=p=>{let{onSearch:a}=p;const l=t();return r(n.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+i.stroke.primary,padding:"14px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:r(e,{ref:l,placeholder:"Search",leftIcon:{icon:()=>r(s,{width:24,height:24,color:i.content.placeholder})},rightIcon:{icon:()=>{var t;return(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.value)?r(c,{onClick:()=>{l.current&&(l.current.value=""),a("")},width:24,height:24,color:i.content.placeholder}):r(o,{})}},onChangeText:a})}))};export{p as SearchBox};

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { DropdownOption, SingleOption } from '../../type';
+export declare function iterateOnOptions(options: DropdownOption[], newVal: Partial<SingleOption>, checkCB?: (optionForValidation: SingleOption) => boolean): ({
+    label: string;
+    value: string;
+    descriptions?: string | null | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
+} | {
+    label?: string | undefined;
+    value?: string | undefined;
+    descriptions?: string | null | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
+    options: SingleOption[];
+})[];

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

@@ -1 +1,3 @@
 export * from './Dropdown';
+export * from './DropdownPopover';
+export * from './OpenedDropdown';

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

@@ -1,25 +1,30 @@
+/// <reference types="react" />
 export interface OpenDropdownProps {
+    defaultOptions?: DropdownOption[];
     options: DropdownOption[];
     isSearchable?: boolean;
     error?: string;
     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 | MultiSelectOption)[];
 };
 export type SingleOption = {
-    label?: string;
-    value?: string;
-    descriptions?: string;
+    label: string;
+    value: string;
+    descriptions?: string | null;
     selected?: boolean;
     disabled?: boolean;
     isFreeForm?: boolean;
+    subText?: string;
+    trailingIcon?: JSX.Element;
+    customComponent?: JSX.Element;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { DropdownOption, SingleOption } from '../dropdown/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: (selected: SingleOption | SingleOption[]) => void;
+    onSelect: (selected: DropdownOption | DropdownOption[]) => void;
     menuOptions: DropdownOption[];
     buttonWidth?: number;
     buttonHeight?: number;

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

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{OpennedDropdown as o}from"../dropdown/opennedDropdown/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:c,menuWidth:p,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:c,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: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.styles.d.ts

@@ -21,7 +21,7 @@ export declare const FloatingActionButtonContainer: import("styled-components").
     width: number;
     height: number;
     color: string;
-    isRound: boolean;
+    isRound?: boolean | undefined;
 }, never>;
 export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;

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

@@ -62,12 +62,12 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
 
 	.dropdown-toggle::after {
 		border-top: 0.3em solid ${e.content.primary};
-		display: none;
+		display: none !important;
 	}
 
 	.dropdown-toggle::before {
 		border-top: 0.3em solid ${e.content.primary};
-		display: none;
+		display: none !important;
 	}
 	.dropdown-menu {
 		min-width: 12rem;

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

@@ -0,0 +1,12 @@
+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/esm/components/helpers/FileUploaderHelper.js

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

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

@@ -0,0 +1,20 @@
+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/esm/components/input/ChipInput.js

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

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

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

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