@bikdotai/bik-component-library 0.0.175 → 0.0.177

package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),s=require("../../../../checkBox/CheckBox.js"),n=require("../../../../list-item/ListItem.js"),r=require("../../../../TypographyStyle.js"),i=require("../../../../../constants/Theme.js"),o=require("./FreeFormMenu.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=l(t).default(n.ListItem)`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),n=require("../../../../checkBox/CheckBox.js"),s=require("../../../../list-item/ListItem.js"),r=require("../../../../TypographyStyle.js"),i=require("../../../../../constants/Theme.js"),o=require("./FreeFormMenu.styled.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=l(t).default(s.ListItem)`
 	padding: 14px 16px !important;
-	cursor: default;
-`;exports.MenuItem=t=>{let{option:n,isMultiSelect:l,showDescription:a,onSelect:u,last:d}=t;var m;function p(e){n.disabled||u(Object.assign(Object.assign({},n),{selected:e}))}return e.jsx(c,{style:d?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),p(!n.selected)},onMouseOver:function(){n.description?a(n.label,n.description):a()},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:l?e.jsx(s.CheckBox,{isDisabled:null!==(m=n.disabled)&&void 0!==m&&m,isChecked:!!n.selected,onValueChange:p}):e.jsx(e.Fragment,{}),customComponent:n.customComponent,trailingIcon:n.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(r.BodyCaption,Object.assign({style:{color:i.COLORS.content.secondary}},{children:"Freeform"}))}):n.trailingIcon?e.jsx(e.Fragment,{children:n.trailingIcon}):e.jsx(e.Fragment,{}),variant:n.disabled?"inactive":n.selected?"selected":"default"})};
+	cursor: pointer;
+`;exports.MenuItem=t=>{let{option:s,isMultiSelect:l,showDescription:a,onSelect:u,last:d}=t;var m;function p(e){s.disabled||u(Object.assign(Object.assign({},s),{selected:e}))}return e.jsx(c,{style:d?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),p(!s.selected)},onMouseOver:function(){s.description?a(s.label,s.description):a()},listItem:{value:s.value,label:s.label},subText:s.subText,leadingIcon:l?e.jsx(n.CheckBox,{isDisabled:null!==(m=s.disabled)&&void 0!==m&&m,isChecked:!!s.selected,onValueChange:p}):e.jsx(e.Fragment,{}),customComponent:s.customComponent,trailingIcon:s.isFreeForm?e.jsx(o.FreeFormContainer,{children:e.jsx(r.BodyCaption,Object.assign({style:{color:i.COLORS.content.secondary}},{children:"Freeform"}))}):s.trailingIcon?e.jsx(e.Fragment,{children:s.trailingIcon}):e.jsx(e.Fragment,{}),variant:s.disabled?"inactive":s.selected?"selected":"default"})};

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

package/dist/cjs/components/states/StateComponent.d.ts

@@ -1,5 +1,6 @@
 import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 import React from 'react';
+import { Type } from "../button/model";
 export declare enum StateInterface {
     SUCCESS = "success",
     ERROR = "error",
@@ -22,6 +23,7 @@ export type StateComponentProps = {
     isButtonEnabled: boolean;
     type?: ButtonTypes;
     buttonText?: string;
+    buttonType?: Type;
     buttonIcon?: ReactJSXElement;
     onButtonClick?: (buttonClicked: ButtonActions) => void;
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;

package/dist/cjs/components/states/StateComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,n,s=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),c=require("../button/Button.js"),u=require("../spinner/Spinner.js"),x=require("../TypographyStyle.js"),p=require("./StateComponent.styled.js");exports.StateInterface=void 0,(t=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",t.ERROR="error",t.WARNING="warning",t.LOADING="loading",exports.ButtonActions=void 0,(e=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",e.OTHER="other",exports.ButtonTypes=void 0,(n=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",n.DOUBLE="DOUBLE";exports.StateComponent=t=>{var e;const n=()=>d==exports.StateInterface.SUCCESS?s.jsx(i.default,{}):d==exports.StateInterface.WARNING?s.jsx(a.default,{}):d==exports.StateInterface.ERROR?s.jsx(o.default,{}):d===exports.StateInterface.LOADING?s.jsx(u.Spinner,{size:"large"}):void 0,{states:d,heading:l,subline:j,icon:S=n(),isButtonEnabled:h,type:B,buttonText:I,onButtonClick:y,leadingIcon:C,width:g}=t;return s.jsxs(p.StateComponentContainer,Object.assign({width:g},{children:[s.jsx(p.StateIcon,{children:S}),s.jsx(p.StateHeading,{children:s.jsx(x.TitleMedium,{children:l})}),s.jsx(p.StateSubline,{children:s.jsx(x.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:j}))}),null!==(e=t.children)&&void 0!==e?e:s.jsx(s.Fragment,{}),h&&s.jsx(s.Fragment,{children:s.jsxs(p.ButtonContainer,{children:[B==exports.ButtonTypes.DOUBLE&&s.jsx(c.Button,{onClick:()=>y&&y(exports.ButtonActions.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),s.jsx(c.Button,{onClick:()=>y&&y(exports.ButtonActions.OTHER),buttonType:"primary",LeadingIcon:C,buttonText:null!=I?I:"Retry",matchParentWidth:!0})]})})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,n,s=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),c=require("../button/Button.js"),u=require("../spinner/Spinner.js"),x=require("../TypographyStyle.js"),p=require("./StateComponent.styled.js");exports.StateInterface=void 0,(t=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",t.ERROR="error",t.WARNING="warning",t.LOADING="loading",exports.ButtonActions=void 0,(e=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",e.OTHER="other",exports.ButtonTypes=void 0,(n=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",n.DOUBLE="DOUBLE";exports.StateComponent=t=>{var e;const n=()=>l==exports.StateInterface.SUCCESS?s.jsx(i.default,{}):l==exports.StateInterface.WARNING?s.jsx(a.default,{}):l==exports.StateInterface.ERROR?s.jsx(o.default,{}):l===exports.StateInterface.LOADING?s.jsx(u.Spinner,{size:"large"}):void 0,{states:l,heading:d,subline:j,icon:S=n(),isButtonEnabled:h,type:y,buttonText:B,buttonType:I,onButtonClick:C,leadingIcon:g,width:T}=t;return s.jsxs(p.StateComponentContainer,Object.assign({width:T},{children:[s.jsx(p.StateIcon,{children:S}),s.jsx(p.StateHeading,{children:s.jsx(x.TitleMedium,{children:d})}),s.jsx(p.StateSubline,{children:s.jsx(x.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:j}))}),null!==(e=t.children)&&void 0!==e?e:s.jsx(s.Fragment,{}),h&&s.jsx(s.Fragment,{children:s.jsxs(p.ButtonContainer,{children:[y==exports.ButtonTypes.DOUBLE&&s.jsx(c.Button,{onClick:()=>C&&C(exports.ButtonActions.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),s.jsx(c.Button,{onClick:()=>C&&C(exports.ButtonActions.OTHER),buttonType:null!=I?I:"primary",LeadingIcon:g,buttonText:null!=B?B:"Retry",matchParentWidth:!0})]})})]}))};

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -1,4 +1,4 @@
 import{jsx as e,Fragment as t}from"react/jsx-runtime";import o from"styled-components";import{CheckBox as i}from"../../../../checkBox/CheckBox.js";import{ListItem as n}from"../../../../list-item/ListItem.js";import{BodyCaption as s}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{FreeFormContainer as l}from"./FreeFormMenu.styled.js";const c=o(n)`
 	padding: 14px 16px !important;
-	cursor: default;
+	cursor: pointer;
 `,a=o=>{let{option:n,isMultiSelect:a,showDescription:m,onSelect:d,last:p}=o;var u;function b(e){n.disabled||d(Object.assign(Object.assign({},n),{selected:e}))}return e(c,{style:p?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),b(!n.selected)},onMouseOver:function(){n.description?m(n.label,n.description):m()},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:a?e(i,{isDisabled:null!==(u=n.disabled)&&void 0!==u&&u,isChecked:!!n.selected,onValueChange:b}):e(t,{}),customComponent:n.customComponent,trailingIcon:n.isFreeForm?e(l,{children:e(s,Object.assign({style:{color:r.content.secondary}},{children:"Freeform"}))}):n.trailingIcon?e(t,{children:n.trailingIcon}):e(t,{}),variant:n.disabled?"inactive":n.selected?"selected":"default"})};export{a as MenuItem};

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

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

package/dist/esm/components/states/StateComponent.d.ts

@@ -1,5 +1,6 @@
 import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
 import React from 'react';
+import { Type } from "../button/model";
 export declare enum StateInterface {
     SUCCESS = "success",
     ERROR = "error",
@@ -22,6 +23,7 @@ export type StateComponentProps = {
     isButtonEnabled: boolean;
     type?: ButtonTypes;
     buttonText?: string;
+    buttonType?: Type;
     buttonIcon?: ReactJSXElement;
     onButtonClick?: (buttonClicked: ButtonActions) => void;
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;

package/dist/esm/components/states/StateComponent.js

@@ -1 +1 @@
-import{jsxs as n,jsx as t,Fragment as o}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import e from"../../assets/icons/errorIcon.svg.js";import i from"../../assets/icons/successIcon.svg.js";import s from"../../assets/icons/warningIcon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleMedium as l,BodyPrimary as m}from"../TypographyStyle.js";import{StateComponentContainer as d,StateIcon as h,StateHeading as p,StateSubline as u,ButtonContainer as E}from"./StateComponent.styled.js";var g,C,f;!function(n){n.SUCCESS="success",n.ERROR="error",n.WARNING="warning",n.LOADING="loading"}(g||(g={})),function(n){n.CANCEL="cancel",n.OTHER="other"}(C||(C={})),function(n){n.SINGLE="SINGLE",n.DOUBLE="DOUBLE"}(f||(f={}));const j=j=>{var y;const I=()=>O==g.SUCCESS?t(i,{}):O==g.WARNING?t(s,{}):O==g.ERROR?t(e,{}):O===g.LOADING?t(a,{size:"large"}):void 0,{states:O,heading:R,subline:S,icon:b=I(),isButtonEnabled:L,type:N,buttonText:T,onButtonClick:v,leadingIcon:A,width:B}=j;return n(d,Object.assign({width:B},{children:[t(h,{children:b}),t(p,{children:t(l,{children:R})}),t(u,{children:t(m,Object.assign({color:r.content.secondary},{children:S}))}),null!==(y=j.children)&&void 0!==y?y:t(o,{}),L&&t(o,{children:n(E,{children:[N==f.DOUBLE&&t(c,{onClick:()=>v&&v(C.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),t(c,{onClick:()=>v&&v(C.OTHER),buttonType:"primary",LeadingIcon:A,buttonText:null!=T?T:"Retry",matchParentWidth:!0})]})})]}))};export{C as ButtonActions,f as ButtonTypes,j as StateComponent,g as StateInterface};
+import{jsxs as n,jsx as t,Fragment as o}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import e from"../../assets/icons/errorIcon.svg.js";import i from"../../assets/icons/successIcon.svg.js";import s from"../../assets/icons/warningIcon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleMedium as l,BodyPrimary as m}from"../TypographyStyle.js";import{StateComponentContainer as d,StateIcon as u,StateHeading as p,StateSubline as h,ButtonContainer as E}from"./StateComponent.styled.js";var g,C,f;!function(n){n.SUCCESS="success",n.ERROR="error",n.WARNING="warning",n.LOADING="loading"}(g||(g={})),function(n){n.CANCEL="cancel",n.OTHER="other"}(C||(C={})),function(n){n.SINGLE="SINGLE",n.DOUBLE="DOUBLE"}(f||(f={}));const y=y=>{var b;const j=()=>I==g.SUCCESS?t(i,{}):I==g.WARNING?t(s,{}):I==g.ERROR?t(e,{}):I===g.LOADING?t(a,{size:"large"}):void 0,{states:I,heading:O,subline:R,icon:S=j(),isButtonEnabled:L,type:N,buttonText:T,buttonType:v,onButtonClick:A,leadingIcon:B,width:G}=y;return n(d,Object.assign({width:G},{children:[t(u,{children:S}),t(p,{children:t(l,{children:O})}),t(h,{children:t(m,Object.assign({color:r.content.secondary},{children:R}))}),null!==(b=y.children)&&void 0!==b?b:t(o,{}),L&&t(o,{children:n(E,{children:[N==f.DOUBLE&&t(c,{onClick:()=>A&&A(C.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),t(c,{onClick:()=>A&&A(C.OTHER),buttonType:null!=v?v:"primary",LeadingIcon:B,buttonText:null!=T?T:"Retry",matchParentWidth:!0})]})})]}))};export{C as ButtonActions,f as ButtonTypes,y as StateComponent,g as StateInterface};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.175",
+	"version": "0.0.177",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",

package/CHANGELOG.md

@@ -1,7 +0,0 @@
-# @boilertown/react-ui-boilerplate
-
-## 0.0.1
-
-### Patch Changes
-
-- 93e5422: First release ever!