@fvc/input 1.2.0 → 2.0.0-next-77277478bcfbaaf8f2357b39eb29a3f07d9495d9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Input as n}from"antd";import{MaskedInput as i}from"antd-mask-input";import r,{forwardRef as t,useState as o,useCallback as e}from"react";import{Icon as d}from"@fvc/icons";import{transformText as u}from"@fvc/utils";function a(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}"function"==typeof SuppressedError&&SuppressedError;var p,c={exports:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|
|
5
5
|
http://jedwatson.github.io/classnames
|
|
6
|
-
*/var _,f=u((o||(o=1,_=a,function(){var n={}.hasOwnProperty;function t(){for(var n="",t=0;t<arguments.length;t++){var p=arguments[t];p&&(n=r(n,e(p)))}return n}function e(e){if("string"==typeof e||"number"==typeof e)return e;if("object"!=typeof e)return"";if(Array.isArray(e))return t.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var p="";for(var i in e)n.call(e,i)&&e[i]&&(p=r(p,i));return p}function r(n,t){return t?n?n+" "+t:n+t:n}_.exports?(t.default=t,_.exports=t):window.classNames=t}()),a.exports));const c=({error:t})=>n.createElement("div",{className:"fvc-input-error-text"},n.createElement(p.Info,{width:16,height:16,color:"var(--red-800)"}),t),l="fvc-input-label",d=({label:t,name:e,withAsterisk:r})=>n.createElement("label",{className:l,htmlFor:e},t,r&&n.createElement("span",{className:`${l}-asterisk`},"*")),s="fvc-input-suffix-sticky",v=({prefix:t,suffix:e,isSticky:r,inputValue:p})=>r?n.createElement("div",{className:`${s}-wrapper`},n.createElement("div",{className:`${s}-content`},n.createElement("span",null,t),p),n.createElement("div",{className:`${s}-suffix`},e)):e;!function(n,t){void 0===t&&(t={});var e=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],p=document.createElement("style");p.type="text/css","top"===e&&r.firstChild?r.insertBefore(p,r.firstChild):r.appendChild(p),p.styleSheet?p.styleSheet.cssText=n:p.appendChild(document.createTextNode(n))}}('.Input_fvc-input__LSVML {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--black-1000);\n height: 32px;\n border-radius: 4px;\n padding: 8px 12px;\n /* OUTLINED VARIANT */\n /* ERROR */\n /* EMPTY */\n /* LABEL */\n /* AFFIX WRAPPER */\n /* STICKY SUFFIX */\n /* GROUP */\n /* ROOT */\n}\n.Input_fvc-input__LSVML::placeholder, .Input_fvc-input__LSVML::-webkit-input-placeholder, .Input_fvc-input__LSVML:-moz-placeholder, .Input_fvc-input__LSVML:-ms-input-placeholder {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--blue-300);\n}\n.Input_fvc-input-outlined__e87wk {\n border-width: 1px;\n border-style: solid;\n background-color: var(--neutral-0);\n border-color: var(--gray-400);\n}\n.Input_fvc-input-outlined__e87wk:hover {\n background-color: var(--neutral-0);\n border-color: var(--gray-600);\n}\n.Input_fvc-input-outlined__e87wk:focus, .Input_fvc-input-outlined__e87wk:focus-visible, .Input_fvc-input-outlined__e87wk:focus-within {\n background-color: var(--neutral-0);\n border-color: var(--blue-400);\n outline: none;\n box-shadow: none;\n}\n.Input_fvc-input-outlined__e87wk:valid, .Input_fvc-input-outlined__e87wk[data-valid=true], .Input_fvc-input-outlined__e87wk:has(input[data-valid=true]) {\n background-color: var(--neutral-0);\n border-color: var(--gray-400);\n}\n.Input_fvc-input-outlined__e87wk.Input_fvc-input-disabled__4uNGr, .Input_fvc-input-outlined__e87wk.Input_fvc-input-disabled__4uNGr:hover:not([disabled]), .Input_fvc-input-outlined__e87wk.Input_fvc-input-disabled__4uNGr[disabled]:hover:not([disabled]), .Input_fvc-input-outlined__e87wk:has(.Input_fvc-input-disabled__4uNGr[disabled]) {\n background-color: var(--gray-50);\n border-color: var(--gray-400);\n color: var(--blue-gray-600);\n}\n.Input_fvc-input-error__034A5, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ {\n background-color: var(--red-100);\n border-color: var(--red-800);\n}\n.Input_fvc-input-error__034A5:hover, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:hover, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:hover {\n background-color: var(--red-100);\n border-color: var(--red-600);\n}\n.Input_fvc-input-error__034A5:focus, .Input_fvc-input-error__034A5:focus-visible, .Input_fvc-input-error__034A5:focus-within, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:focus, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:focus-visible, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:focus-within, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:focus, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:focus-visible, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:focus-within {\n background-color: var(--red-100);\n border-color: var(--red-800);\n outline: none;\n box-shadow: none;\n}\n.Input_fvc-input-error__034A5:valid, .Input_fvc-input-error__034A5[data-valid=true], .Input_fvc-input-error__034A5:has(input[data-valid=true]), .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:valid, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML[data-valid=true], .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:has(input[data-valid=true]), .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:valid, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ[data-valid=true], .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:has(input[data-valid=true]) {\n background-color: var(--red-100);\n border-color: var(--red-800);\n}\n.Input_fvc-input-error__034A5.Input_fvc-input-disabled__4uNGr, .Input_fvc-input-error__034A5.Input_fvc-input-disabled__4uNGr:hover:not([disabled]), .Input_fvc-input-error__034A5.Input_fvc-input-disabled__4uNGr[disabled]:hover:not([disabled]), .Input_fvc-input-error__034A5:has(.Input_fvc-input-disabled__4uNGr[disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML.Input_fvc-input-disabled__4uNGr, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML.Input_fvc-input-disabled__4uNGr:hover:not([disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML.Input_fvc-input-disabled__4uNGr[disabled]:hover:not([disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:has(.Input_fvc-input-disabled__4uNGr[disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ.Input_fvc-input-disabled__4uNGr, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ.Input_fvc-input-disabled__4uNGr:hover:not([disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ.Input_fvc-input-disabled__4uNGr[disabled]:hover:not([disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:has(.Input_fvc-input-disabled__4uNGr[disabled]) {\n background-color: var(--red-100);\n border-color: var(--red-800);\n color: var(--blue-gray-600);\n}\n.Input_fvc-input-error-text__hWsPQ, .Input_fvc-input-error__034A5 .Input_fvc-input-text__U2DwZ, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper-text__1JVEd {\n display: flex;\n align-items: center;\n width: 100%;\n margin-top: 4px;\n gap: 4px;\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--red-800);\n}\n.Input_fvc-input-empty__IKME- .Input_fvc-input-clear-icon__TUMTi {\n display: none;\n}\n.Input_fvc-input-label__jlQwj {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--black-1000);\n font-weight: 700;\n margin-bottom: 6px;\n display: flex;\n width: 100%;\n gap: 2px;\n}\n.Input_fvc-input-label-asterisk__nVu3L {\n color: var(--red-800);\n}\n.Input_fvc-input-affix-wrapper__kvSeJ {\n height: 32px;\n border-radius: 4px;\n padding: 8px 12px;\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--black-1000);\n}\n.Input_fvc-input-affix-wrapper__kvSeJ::placeholder, .Input_fvc-input-affix-wrapper__kvSeJ::-webkit-input-placeholder, .Input_fvc-input-affix-wrapper__kvSeJ:-moz-placeholder, .Input_fvc-input-affix-wrapper__kvSeJ:-ms-input-placeholder {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--blue-300);\n}\n.Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input__LSVML {\n height: 100%;\n /* PREFIX AND SUFFIX */\n}\n.Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input-prefix__T788S, .Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input-suffix__DDwrv {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--blue-gray-600);\n}\n.Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input-prefix__T788S {\n height: 100%;\n line-height: 15px;\n}\n.Input_fvc-input-suffix-sticky__5yeF3 .Input_fvc-input-affix-wrapper__kvSeJ {\n position: relative;\n}\n.Input_fvc-input-suffix-sticky-wrapper__TL0cC {\n display: flex;\n align-items: center;\n}\n.Input_fvc-input-suffix-sticky-content__01TIn {\n visibility: hidden;\n display: flex;\n gap: 4px;\n}\n.Input_fvc-input-suffix-sticky__5yeF3 .Input_fvc-input-suffix__DDwrv {\n position: absolute;\n display: flex;\n align-items: center;\n height: 100%;\n top: 50%;\n transform: translateY(-50%);\n z-index: 999;\n}\n.Input_fvc-input-group__de-LY {\n display: flex;\n align-items: center;\n height: 100%;\n /* GROUP WRAPPER */\n}\n.Input_fvc-input-group-wrapper__I6YHL {\n height: 32px;\n border-radius: 4px;\n padding: 8px 12px;\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--black-1000);\n padding: 0;\n overflow: hidden;\n /* ADDON AFTER AND ADDON BEFORE */\n /* AFFIX WRAPPER */\n /* OUTLINED */\n}\n.Input_fvc-input-group-wrapper__I6YHL::placeholder, .Input_fvc-input-group-wrapper__I6YHL::-webkit-input-placeholder, .Input_fvc-input-group-wrapper__I6YHL:-moz-placeholder, .Input_fvc-input-group-wrapper__I6YHL:-ms-input-placeholder {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--blue-300);\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input__LSVML {\n height: 32px;\n border-radius: 4px;\n padding: 8px 12px;\n border: none;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-group-addon__csVuR {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--blue-gray-600);\n display: flex;\n align-items: center;\n justify-content: center;\n width: auto;\n height: 30px;\n border: none;\n background-color: transparent;\n line-height: 15px;\n padding: 0;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-group-addon__csVuR:first-child {\n padding-left: 12px;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-group-addon__csVuR:last-child {\n padding-right: 12px;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-affix-wrapper__kvSeJ {\n border: none;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input__LSVML {\n height: auto;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--blue-gray-600);\n display: flex;\n align-items: center;\n justify-content: center;\n width: auto;\n height: 30px;\n border: none;\n background-color: transparent;\n line-height: 15px;\n padding: 0;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:first-child {\n padding-left: 12px;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:last-child {\n padding-right: 12px;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:hover:not([disabled]) {\n font-family: "Roboto", sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 14px;\n letter-spacing: 0;\n color: var(--blue-gray-600);\n display: flex;\n align-items: center;\n justify-content: center;\n width: auto;\n height: 30px;\n border: none;\n background-color: transparent;\n line-height: 15px;\n padding: 0;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:hover:not([disabled]):first-child {\n padding-left: 12px;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:hover:not([disabled]):last-child {\n padding-right: 12px;\n}\n.Input_fvc-input-root__cwBrU {\n width: 100%;\n display: flex;\n flex-direction: column;\n}');const I="fvc-input",g=`${I}-root`,h=`${I}-suffix-sticky`,b={clearIcon:n.createElement(p.Clear,{width:16,height:16,color:"var(--blue-gray-600)","aria-label":"input-clear-icon"})},x=p=>{var{allowClear:u,className:o,defaultValue:a,error:_,label:l,name:s,onChange:x,placeholder:w,prefix:m,suffix:y,suffixType:k="fixed",testId:S,textTransform:A,value:L,variant:V="outlined",withAsterisk:R=!1}=p,N=function(n,t){var e={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(e[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var p=0;for(r=Object.getOwnPropertySymbols(n);p<r.length;p++)t.indexOf(r[p])<0&&Object.prototype.propertyIsEnumerable.call(n,r[p])&&(e[r[p]]=n[r[p]])}return e}(p,["allowClear","className","defaultValue","error","label","name","onChange","placeholder","prefix","suffix","suffixType","testId","textTransform","value","variant","withAsterisk"]);const[E,O]=t(a),J=void 0!==L,M=J?L:E,T=e((n=>{const{value:t}=n.target,e=A?i(t,A):t;J||O(e),null==x||x(Object.assign(Object.assign({},n),{target:Object.assign(Object.assign({},n.target),{value:e})}))}),[J,x,A]),G="sticky"===k&&!!y,j=f(o,`${I}-${V}`,{[`${I}-error`]:!!_,[`${I}-empty`]:!M,[`${h}`]:G}),H=u&&b;return n.createElement("div",{className:g},l&&n.createElement(d,{label:l,name:s,withAsterisk:R}),n.createElement(r,Object.assign({},N,{prefixCls:I,className:j,required:!0,pattern:".*\\S.*","data-testid":S,name:s,value:M,onChange:T,prefix:m,suffix:n.createElement(v,{suffix:y,prefix:m,inputValue:M,isSticky:G}),allowClear:H,placeholder:G?void 0:w,"data-valid":!!M})),"string"==typeof _&&n.createElement(c,{error:_}))};export{x as Input};
|
|
6
|
+
*/var f,v=a((p||(p=1,f=c,function(){var n={}.hasOwnProperty;function i(){for(var n="",i=0;i<arguments.length;i++){var o=arguments[i];o&&(n=t(n,r(o)))}return n}function r(r){if("string"==typeof r||"number"==typeof r)return r;if("object"!=typeof r)return"";if(Array.isArray(r))return i.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var o="";for(var e in r)n.call(r,e)&&r[e]&&(o=t(o,e));return o}function t(n,i){return i?n?n+" "+i:n+i:n}f.exports?(i.default=i,f.exports=i):window.classNames=i}()),c.exports));const l=({error:n})=>r.createElement("div",{className:"fvc-input-error-text","aria-label":"error message container"},r.createElement(d.Info,{width:16,height:16,color:"var(--red-800)","aria-label":"error icon"}),n),s="fvc-input-label",h=({label:n,name:i,withAsterisk:t})=>r.createElement("label",{className:s,htmlFor:i},n,t&&r.createElement("span",{className:`${s}-asterisk`},"*")),g="fvc-input-suffix-sticky",b=({prefix:n,suffix:i,isSticky:t,inputValue:o})=>t?r.createElement("div",{className:`${g}-wrapper`,"aria-label":"sticky suffix wrapper"},r.createElement("div",{className:`${g}-content`},n&&r.createElement("span",null,n),(o||"").toString().replace(/ /g," ")),r.createElement("div",{className:`${g}-suffix`},i)):i;!function(n,i){void 0===i&&(i={});var r=i.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}(":root {\n /* Input Default Variables */\n --input-font-family: 'Roboto', sans-serif;\n --input-addon-text-color: var(--blue-gray-600);\n --input-addon-min-width: 56px;\n --input-description-spacing: 4px;\n --input-description-error-color: var(--red-800);\n --input-asterisk-color: var(--red-800);\n --input-border-width: 1px;\n /* Input Size Variables */\n --input-md-size-height: 32px;\n --input-md-size-border-radius: 4px;\n --input-md-size-spacing: 7px 12px;\n --input-md-size-fz: 14px;\n --input-md-size-fw: 400;\n --input-md-size-lh: 16px;\n --input-md-size-addon-lh: 15px;\n --input-md-size-addon-spacing: 12px;\n --input-md-size-affix-spacing: 10px;\n --input-md-size-affix-height: 16px;\n --input-md-size-label-fw: 700;\n --input-md-size-label-spacing: 6px;\n /* Input Outlined Variant */\n --input-outlined-text-color: var(--black-1000);\n --input-outlined-placeholder-color: var(--blue-300);\n --input-outlined-bg-color: var(--neutral-0);\n --input-outlined-border-color: var(--gray-400);\n --input-outlined-hover-bg-color: var(--neutral-0);\n --input-outlined-hover-border-color: var(--gray-600);\n --input-outlined-focus-border-color: var(--blue-400);\n --input-outlined-valid-bg-color: var(--neutral-0);\n --input-outlined-valid-border-color: var(--gray-400);\n --input-outlined-disabled-bg-color: var(--gray-50);\n --input-outlined-disabled-border-color: var(--gray-400);\n --input-outlined-disabled-text-color: var(--blue-gray-600);\n --input-outlined-label-color: var(--black-1000);\n --input-outlined-addon-bg-color: var(--blue-20);\n /* Input Error Variant */\n --input-error-text-color: var(--black-1000);\n --input-error-placeholder-color: var(--blue-300);\n --input-error-bg-color: var(--red-100);\n --input-error-border-color: var(--red-800);\n --input-error-hover-bg-color: var(--red-100);\n --input-error-hover-border-color: var(--red-600);\n --input-error-focus-border-color: var(--red-800);\n --input-error-valid-bg-color: var(--red-100);\n --input-error-valid-border-color: var(--red-800);\n --input-error-disabled-bg-color: var(--red-100);\n --input-error-disabled-border-color: var(--red-800);\n --input-error-disabled-text-color: var(--blue-gray-600);\n --input-error-label-color: var(--black-1000);\n --input-error-addon-bg-color: #f9cbd166;\n}\n\n.fvc-input {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-outlined-text-color);\n}\n\n.fvc-input::placeholder, .fvc-input::-webkit-input-placeholder, .fvc-input:-moz-placeholder, .fvc-input:-ms-input-placeholder {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-outlined-placeholder-color);\n}\n\n.fvc-input {\n height: var(--input-md-size-height);\n border-radius: var(--input-md-size-border-radius);\n padding: var(--input-md-size-spacing);\n /* OUTLINED VARIANT */\n}\n\n.fvc-input-outlined, .fvc-input-outlined.fvc-input-search {\n border-width: var(--input-border-width);\n border-style: solid;\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-outlined-text-color);\n}\n\n.fvc-input-outlined::placeholder, .fvc-input-outlined::-webkit-input-placeholder, .fvc-input-outlined:-moz-placeholder, .fvc-input-outlined:-ms-input-placeholder, .fvc-input-outlined.fvc-input-search::placeholder, .fvc-input-outlined.fvc-input-search::-webkit-input-placeholder, .fvc-input-outlined.fvc-input-search:-moz-placeholder, .fvc-input-outlined.fvc-input-search:-ms-input-placeholder {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-outlined-placeholder-color);\n}\n\n.fvc-input-outlined, .fvc-input-outlined.fvc-input-search {\n background-color: var(--input-outlined-bg-color);\n border-color: var(--input-outlined-border-color);\n}\n\n.fvc-input-outlined .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-outlined-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-outlined .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-outlined-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-outlined-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined:hover, .fvc-input-outlined.fvc-input-search:hover {\n background-color: var(--input-outlined-hover-bg-color);\n border-color: var(--input-outlined-hover-border-color);\n}\n\n.fvc-input-outlined:hover .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search:hover .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-outlined-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-outlined:hover .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search:hover .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-outlined-hover-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined:hover .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search:hover .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-outlined-hover-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined:focus, .fvc-input-outlined:focus-visible, .fvc-input-outlined:focus-within, .fvc-input-outlined.fvc-input-search:focus, .fvc-input-outlined.fvc-input-search:focus-visible, .fvc-input-outlined.fvc-input-search:focus-within {\n background-color: var(--input-outlined-bg-color);\n border-color: var(--input-outlined-focus-border-color);\n outline: none;\n box-shadow: none;\n}\n\n.fvc-input-outlined:focus .fvc-input-group-addon, .fvc-input-outlined:focus-visible .fvc-input-group-addon, .fvc-input-outlined:focus-within .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search:focus .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search:focus-visible .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search:focus-within .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-outlined-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-outlined:focus .fvc-input-group-addon:first-child, .fvc-input-outlined:focus-visible .fvc-input-group-addon:first-child, .fvc-input-outlined:focus-within .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search:focus .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search:focus-visible .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search:focus-within .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-outlined-focus-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined:focus .fvc-input-group-addon:last-child, .fvc-input-outlined:focus-visible .fvc-input-group-addon:last-child, .fvc-input-outlined:focus-within .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search:focus .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search:focus-visible .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search:focus-within .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-outlined-focus-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined[data-valid=true], .fvc-input-outlined:has(input[data-valid=true]), .fvc-input-outlined.fvc-input-search[data-valid=true], .fvc-input-outlined.fvc-input-search:has(input[data-valid=true]) {\n background-color: var(--input-outlined-valid-bg-color);\n border-color: var(--input-outlined-valid-border-color);\n}\n\n.fvc-input-outlined[data-valid=true] .fvc-input-group-addon, .fvc-input-outlined:has(input[data-valid=true]) .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search[data-valid=true] .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search:has(input[data-valid=true]) .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-outlined-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-outlined[data-valid=true] .fvc-input-group-addon:first-child, .fvc-input-outlined:has(input[data-valid=true]) .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search[data-valid=true] .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search:has(input[data-valid=true]) .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-outlined-valid-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined[data-valid=true] .fvc-input-group-addon:last-child, .fvc-input-outlined:has(input[data-valid=true]) .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search[data-valid=true] .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search:has(input[data-valid=true]) .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-outlined-valid-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined.fvc-input-disabled, .fvc-input-outlined.fvc-input-disabled:hover:not([disabled]), .fvc-input-outlined.fvc-input-disabled[disabled]:hover:not([disabled]), .fvc-input-outlined:has(.fvc-input-disabled[disabled]), .fvc-input-outlined.fvc-input-search.fvc-input-disabled, .fvc-input-outlined.fvc-input-search.fvc-input-disabled:hover:not([disabled]), .fvc-input-outlined.fvc-input-search.fvc-input-disabled[disabled]:hover:not([disabled]), .fvc-input-outlined.fvc-input-search:has(.fvc-input-disabled[disabled]) {\n background-color: var(--input-outlined-disabled-bg-color);\n border-color: var(--input-outlined-disabled-border-color);\n color: var(--input-outlined-disabled-text-color);\n}\n\n.fvc-input-outlined.fvc-input-disabled .fvc-input-group-addon, .fvc-input-outlined.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-outlined.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-outlined:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search.fvc-input-disabled .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-outlined.fvc-input-search:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-outlined-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-outlined.fvc-input-disabled .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-outlined:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search.fvc-input-disabled .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-outlined.fvc-input-search:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-outlined-disabled-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined.fvc-input-disabled .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-outlined:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search.fvc-input-disabled .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-outlined.fvc-input-search:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-outlined-disabled-border-color);\n background-color: var(--input-outlined-addon-bg-color);\n}\n\n.fvc-input-outlined.fvc-input-textarea, .fvc-input-outlined > textarea.fvc-input, .fvc-input-outlined.fvc-input-search.fvc-input-textarea, .fvc-input-outlined.fvc-input-search > textarea.fvc-input {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-outlined-text-color);\n}\n\n.fvc-input-outlined.fvc-input-textarea::placeholder, .fvc-input-outlined.fvc-input-textarea::-webkit-input-placeholder, .fvc-input-outlined.fvc-input-textarea:-moz-placeholder, .fvc-input-outlined.fvc-input-textarea:-ms-input-placeholder, .fvc-input-outlined > textarea.fvc-input::placeholder, .fvc-input-outlined > textarea.fvc-input::-webkit-input-placeholder, .fvc-input-outlined > textarea.fvc-input:-moz-placeholder, .fvc-input-outlined > textarea.fvc-input:-ms-input-placeholder, .fvc-input-outlined.fvc-input-search.fvc-input-textarea::placeholder, .fvc-input-outlined.fvc-input-search.fvc-input-textarea::-webkit-input-placeholder, .fvc-input-outlined.fvc-input-search.fvc-input-textarea:-moz-placeholder, .fvc-input-outlined.fvc-input-search.fvc-input-textarea:-ms-input-placeholder, .fvc-input-outlined.fvc-input-search > textarea.fvc-input::placeholder, .fvc-input-outlined.fvc-input-search > textarea.fvc-input::-webkit-input-placeholder, .fvc-input-outlined.fvc-input-search > textarea.fvc-input:-moz-placeholder, .fvc-input-outlined.fvc-input-search > textarea.fvc-input:-ms-input-placeholder {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-outlined-placeholder-color);\n}\n\n.fvc-input {\n /* ERROR */\n}\n\n.fvc-input-error, .fvc-input-error .fvc-input, .fvc-input-error.fvc-input-search, .fvc-input-error .fvc-input-affix-wrapper {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-error-text-color);\n}\n\n.fvc-input-error::placeholder, .fvc-input-error::-webkit-input-placeholder, .fvc-input-error:-moz-placeholder, .fvc-input-error:-ms-input-placeholder, .fvc-input-error .fvc-input::placeholder, .fvc-input-error .fvc-input::-webkit-input-placeholder, .fvc-input-error .fvc-input:-moz-placeholder, .fvc-input-error .fvc-input:-ms-input-placeholder, .fvc-input-error.fvc-input-search::placeholder, .fvc-input-error.fvc-input-search::-webkit-input-placeholder, .fvc-input-error.fvc-input-search:-moz-placeholder, .fvc-input-error.fvc-input-search:-ms-input-placeholder, .fvc-input-error .fvc-input-affix-wrapper::placeholder, .fvc-input-error .fvc-input-affix-wrapper::-webkit-input-placeholder, .fvc-input-error .fvc-input-affix-wrapper:-moz-placeholder, .fvc-input-error .fvc-input-affix-wrapper:-ms-input-placeholder {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-error-placeholder-color);\n}\n\n.fvc-input-error, .fvc-input-error .fvc-input, .fvc-input-error.fvc-input-search, .fvc-input-error .fvc-input-affix-wrapper {\n background-color: var(--input-error-bg-color);\n border-color: var(--input-error-border-color);\n}\n\n.fvc-input-error .fvc-input-group-addon, .fvc-input-error .fvc-input .fvc-input-group-addon, .fvc-input-error.fvc-input-search .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-error-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-error .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-error-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-error-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error:hover, .fvc-input-error .fvc-input:hover, .fvc-input-error.fvc-input-search:hover, .fvc-input-error .fvc-input-affix-wrapper:hover {\n background-color: var(--input-error-hover-bg-color);\n border-color: var(--input-error-hover-border-color);\n}\n\n.fvc-input-error:hover .fvc-input-group-addon, .fvc-input-error .fvc-input:hover .fvc-input-group-addon, .fvc-input-error.fvc-input-search:hover .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper:hover .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-error-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-error:hover .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input:hover .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search:hover .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper:hover .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-error-hover-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error:hover .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input:hover .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search:hover .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper:hover .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-error-hover-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error:focus, .fvc-input-error:focus-visible, .fvc-input-error:focus-within, .fvc-input-error .fvc-input:focus, .fvc-input-error .fvc-input:focus-visible, .fvc-input-error .fvc-input:focus-within, .fvc-input-error.fvc-input-search:focus, .fvc-input-error.fvc-input-search:focus-visible, .fvc-input-error.fvc-input-search:focus-within, .fvc-input-error .fvc-input-affix-wrapper:focus, .fvc-input-error .fvc-input-affix-wrapper:focus-visible, .fvc-input-error .fvc-input-affix-wrapper:focus-within {\n background-color: var(--input-error-bg-color);\n border-color: var(--input-error-focus-border-color);\n outline: none;\n box-shadow: none;\n}\n\n.fvc-input-error:focus .fvc-input-group-addon, .fvc-input-error:focus-visible .fvc-input-group-addon, .fvc-input-error:focus-within .fvc-input-group-addon, .fvc-input-error .fvc-input:focus .fvc-input-group-addon, .fvc-input-error .fvc-input:focus-visible .fvc-input-group-addon, .fvc-input-error .fvc-input:focus-within .fvc-input-group-addon, .fvc-input-error.fvc-input-search:focus .fvc-input-group-addon, .fvc-input-error.fvc-input-search:focus-visible .fvc-input-group-addon, .fvc-input-error.fvc-input-search:focus-within .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper:focus .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper:focus-visible .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper:focus-within .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-error-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-error:focus .fvc-input-group-addon:first-child, .fvc-input-error:focus-visible .fvc-input-group-addon:first-child, .fvc-input-error:focus-within .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input:focus .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input:focus-visible .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input:focus-within .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search:focus .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search:focus-visible .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search:focus-within .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper:focus .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper:focus-visible .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper:focus-within .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-error-focus-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error:focus .fvc-input-group-addon:last-child, .fvc-input-error:focus-visible .fvc-input-group-addon:last-child, .fvc-input-error:focus-within .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input:focus .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input:focus-visible .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input:focus-within .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search:focus .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search:focus-visible .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search:focus-within .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper:focus .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper:focus-visible .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper:focus-within .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-error-focus-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error[data-valid=true], .fvc-input-error:has(input[data-valid=true]), .fvc-input-error .fvc-input[data-valid=true], .fvc-input-error .fvc-input:has(input[data-valid=true]), .fvc-input-error.fvc-input-search[data-valid=true], .fvc-input-error.fvc-input-search:has(input[data-valid=true]), .fvc-input-error .fvc-input-affix-wrapper[data-valid=true], .fvc-input-error .fvc-input-affix-wrapper:has(input[data-valid=true]) {\n background-color: var(--input-error-valid-bg-color);\n border-color: var(--input-error-valid-border-color);\n}\n\n.fvc-input-error[data-valid=true] .fvc-input-group-addon, .fvc-input-error:has(input[data-valid=true]) .fvc-input-group-addon, .fvc-input-error .fvc-input[data-valid=true] .fvc-input-group-addon, .fvc-input-error .fvc-input:has(input[data-valid=true]) .fvc-input-group-addon, .fvc-input-error.fvc-input-search[data-valid=true] .fvc-input-group-addon, .fvc-input-error.fvc-input-search:has(input[data-valid=true]) .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper[data-valid=true] .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper:has(input[data-valid=true]) .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-error-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-error[data-valid=true] .fvc-input-group-addon:first-child, .fvc-input-error:has(input[data-valid=true]) .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input[data-valid=true] .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input:has(input[data-valid=true]) .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search[data-valid=true] .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search:has(input[data-valid=true]) .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper[data-valid=true] .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper:has(input[data-valid=true]) .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-error-valid-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error[data-valid=true] .fvc-input-group-addon:last-child, .fvc-input-error:has(input[data-valid=true]) .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input[data-valid=true] .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input:has(input[data-valid=true]) .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search[data-valid=true] .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search:has(input[data-valid=true]) .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper[data-valid=true] .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper:has(input[data-valid=true]) .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-error-valid-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error.fvc-input-disabled, .fvc-input-error.fvc-input-disabled:hover:not([disabled]), .fvc-input-error.fvc-input-disabled[disabled]:hover:not([disabled]), .fvc-input-error:has(.fvc-input-disabled[disabled]), .fvc-input-error .fvc-input.fvc-input-disabled, .fvc-input-error .fvc-input.fvc-input-disabled:hover:not([disabled]), .fvc-input-error .fvc-input.fvc-input-disabled[disabled]:hover:not([disabled]), .fvc-input-error .fvc-input:has(.fvc-input-disabled[disabled]), .fvc-input-error.fvc-input-search.fvc-input-disabled, .fvc-input-error.fvc-input-search.fvc-input-disabled:hover:not([disabled]), .fvc-input-error.fvc-input-search.fvc-input-disabled[disabled]:hover:not([disabled]), .fvc-input-error.fvc-input-search:has(.fvc-input-disabled[disabled]), .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled:hover:not([disabled]), .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled[disabled]:hover:not([disabled]), .fvc-input-error .fvc-input-affix-wrapper:has(.fvc-input-disabled[disabled]) {\n background-color: var(--input-error-disabled-bg-color);\n border-color: var(--input-error-disabled-border-color);\n color: var(--input-error-disabled-text-color);\n}\n\n.fvc-input-error.fvc-input-disabled .fvc-input-group-addon, .fvc-input-error.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-error.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-error:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon, .fvc-input-error .fvc-input.fvc-input-disabled .fvc-input-group-addon, .fvc-input-error .fvc-input.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-error .fvc-input.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-error .fvc-input:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon, .fvc-input-error.fvc-input-search.fvc-input-disabled .fvc-input-group-addon, .fvc-input-error.fvc-input-search.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-error.fvc-input-search.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-error.fvc-input-search:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon, .fvc-input-error .fvc-input-affix-wrapper:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--input-addon-min-width);\n width: auto;\n height: 100%;\n border: none;\n border-radius: 0;\n background-color: var(--input-error-addon-bg-color);\n line-height: var(--input-md-size-addon-lh);\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-error.fvc-input-disabled .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-error:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input.fvc-input-disabled .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search.fvc-input-disabled .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-error.fvc-input-search:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:first-child, .fvc-input-error .fvc-input-affix-wrapper:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:first-child {\n border-right: var(--input-border-width) solid var(--input-error-disabled-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error.fvc-input-disabled .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-error:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input.fvc-input-disabled .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search.fvc-input-disabled .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-error.fvc-input-search:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper.fvc-input-disabled[disabled]:hover:not([disabled]) .fvc-input-group-addon:last-child, .fvc-input-error .fvc-input-affix-wrapper:has(.fvc-input-disabled[disabled]) .fvc-input-group-addon:last-child {\n border-left: var(--input-border-width) solid var(--input-error-disabled-border-color);\n background-color: var(--input-error-addon-bg-color);\n}\n\n.fvc-input-error-text, .fvc-input-error .fvc-input-text, .fvc-input-error.fvc-input-search-text, .fvc-input-error .fvc-input-affix-wrapper-text {\n display: flex;\n align-items: center;\n width: 100%;\n margin-top: var(--input-description-spacing);\n gap: var(--input-description-spacing);\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-description-error-color);\n}\n\n.fvc-input {\n /* EMPTY */\n}\n\n.fvc-input-empty .fvc-input-clear-icon {\n display: none;\n}\n\n.fvc-input {\n /* CONTROLS */\n}\n\n.fvc-input-no-controls .fvc-input::-webkit-outer-spin-button, .fvc-input-no-controls .fvc-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.fvc-input-no-controls .fvc-input {\n -moz-appearance: textfield;\n}\n\n.fvc-input {\n /* LABEL */\n}\n\n.fvc-input-label {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-outlined-label-color);\n font-weight: var(--input-md-size-label-fw);\n margin-bottom: var(--input-md-size-label-spacing);\n display: flex;\n width: 100%;\n gap: 2px;\n}\n\n.fvc-input-root:has(.fvc-input-outlined) .fvc-input-label {\n color: var(--input-outlined-label-color);\n}\n\n.fvc-input-root:has(.fvc-input-error) .fvc-input-label {\n color: var(--input-error-label-color);\n}\n\n.fvc-input-label-asterisk {\n color: var(--input-asterisk-color);\n}\n\n.fvc-input {\n /* AFFIX WRAPPER */\n}\n\n.fvc-input-affix-wrapper {\n height: var(--input-md-size-height);\n border-radius: var(--input-md-size-border-radius);\n padding: var(--input-md-size-spacing);\n display: flex;\n align-items: center;\n}\n\n.fvc-input-affix-wrapper .fvc-input {\n height: var(--input-md-size-affix-height);\n /* PREFIX AND SUFFIX */\n}\n\n.fvc-input-affix-wrapper .fvc-input-prefix, .fvc-input-affix-wrapper .fvc-input-suffix {\n font-family: var(--input-font-family);\n font-weight: var(--input-md-size-fw);\n font-size: var(--input-md-size-fz);\n line-height: var(--input-md-size-lh);\n letter-spacing: 0;\n color: var(--input-addon-text-color);\n}\n\n.fvc-input-affix-wrapper .fvc-input-prefix {\n height: 100%;\n line-height: var(--input-md-size-affix-height);\n margin-inline-end: var(--input-md-size-affix-spacing);\n}\n\n.fvc-input-affix-wrapper .fvc-input-suffix {\n margin-inline-start: var(--input-md-size-affix-spacing);\n}\n\n.fvc-input-affix-wrapper.fvc-input-textarea-affix-wrapper {\n height: auto;\n}\n\n.fvc-input-affix-wrapper.fvc-input-textarea-affix-wrapper .fvc-input {\n height: auto;\n}\n\n.fvc-input {\n /* STICKY SUFFIX */\n}\n\n.fvc-input-suffix-sticky {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n\n.fvc-input-suffix-sticky .fvc-input-affix-wrapper {\n position: relative;\n}\n\n.fvc-input-suffix-sticky:not(.fvc-input-with-prefix).fvc-input-empty > .fvc-input-suffix {\n margin-inline-start: 0;\n}\n\n.fvc-input-suffix-sticky-suffix {\n display: flex;\n align-items: center;\n}\n\n.fvc-input-suffix-sticky-wrapper {\n display: flex;\n align-items: center;\n}\n\n.fvc-input-suffix-sticky-content {\n visibility: hidden;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.fvc-input-suffix-sticky .fvc-input-suffix {\n position: absolute;\n display: flex;\n align-items: center;\n height: 100%;\n top: 50%;\n transform: translateY(-50%);\n z-index: 999;\n}\n\n.fvc-input {\n /* GROUP */\n}\n\n.fvc-input-group {\n display: flex;\n align-items: center;\n height: 100%;\n /* GROUP WRAPPER */\n}\n\n.fvc-input-group-wrapper {\n height: var(--input-md-size-height);\n border-radius: var(--input-md-size-border-radius);\n padding: var(--input-md-size-spacing);\n padding: 0;\n overflow: hidden;\n}\n\n.fvc-input-group-wrapper .fvc-input {\n height: var(--input-md-size-height);\n border-radius: var(--input-md-size-border-radius);\n padding: var(--input-md-size-spacing);\n border: none;\n}\n\n.fvc-input-group-wrapper {\n /* AFFIX WRAPPER */\n}\n\n.fvc-input-group-wrapper .fvc-input-affix-wrapper {\n border: none;\n}\n\n.fvc-input-group-wrapper .fvc-input-affix-wrapper:has(+ .fvc-input-group-addon) {\n padding-right: var(--input-md-size-affix-spacing);\n}\n\n.fvc-input {\n /* SEARCH */\n}\n\n.fvc-input-search > .fvc-input-group > .fvc-input-group-addon:last-child {\n inset-inline-start: 0;\n padding-left: var(--input-md-size-addon-spacing);\n padding-right: var(--input-md-size-addon-spacing);\n}\n\n.fvc-input-search > .fvc-input-group > .fvc-input-group-addon:last-child .fvc-input-button {\n border: none;\n outline: none;\n background-color: transparent;\n box-shadow: none;\n}\n\n.fvc-input-search > .fvc-input-group > .fvc-input-group-addon:last-child .fvc-input-button > div {\n display: none;\n}\n\n.fvc-input {\n /* ROOT */\n}\n\n.fvc-input-root {\n width: 100%;\n display: flex;\n flex-direction: column;\n}");const m="fvc-input",w=`${m}-root`,x=`${m}-suffix-sticky`,z={clearIcon:r.createElement(d.Clear,{width:16,height:16,color:"var(--blue-gray-600)","aria-label":"input-clear-icon"})};function y(n,i){const d=t((t,d)=>{var{allowClear:a,className:p,controls:c=!0,defaultValue:f,error:s,label:g,name:y,onChange:k,placeholder:E,prefix:O,suffix:N,suffixType:j="fixed",testId:S,textTransform:C,value:P,variant:A="outlined",withAsterisk:I=!1}=t,R=function(n,i){var r={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&i.indexOf(t)<0&&(r[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(n);o<t.length;o++)i.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(n,t[o])&&(r[t[o]]=n[t[o]])}return r}(t,["allowClear","className","controls","defaultValue","error","label","name","onChange","placeholder","prefix","suffix","suffixType","testId","textTransform","value","variant","withAsterisk"]);const[$,T]=o(f),F=void 0!==P,V=F?P:$,U=e(n=>{const{value:i}=n.target,r=C?u(i,C):i;F||T(r),null==k||k(Object.assign(Object.assign({},n),{target:Object.assign(Object.assign({},n.target),{value:r})}))},[F,k,C]),X="sticky"===j&&!!N,L=v(p,`${m}-${A}`,{[`${m}-error`]:!!s,[`${m}-empty`]:!V,[`${m}-with-prefix`]:!!O,[`${m}-no-controls`]:!c,[`${x}`]:X}),B=a?z:void 0;return r.createElement("div",{className:w},g&&r.createElement(h,{label:g,name:y,withAsterisk:I}),r.createElement(n,Object.assign({},R,i,{variant:A,prefixCls:m,className:L,required:!0,name:y,value:V,onChange:U,prefix:O,suffix:N?r.createElement(b,{suffix:N,prefix:O,inputValue:V,isSticky:X}):void 0,allowClear:B,placeholder:X?void 0:E,"data-testid":S,"data-valid":!!V,ref:d})),"string"==typeof s&&r.createElement(l,{error:s}))});return d.displayName=n.displayName,d}const k=y(n);k.Textarea=y(n.TextArea,{rootClassName:`${m}-textarea`}),k.Search=y(n.Search,{inputPrefixCls:m,rootClassName:`${m}-search`}),k.Password=y(n.Password,{inputPrefixCls:m,rootClassName:`${m}-password`}),k.Masked=y(i,{rootClassName:`${m}-masked`});export{k as Input};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
export declare const Input: ({ allowClear, className, defaultValue, error, label, name, onChange, placeholder, prefix, suffix, suffixType, testId, textTransform, value: externalValue, variant, withAsterisk, ...rest }: InputProps) => React.JSX.Element;
|
|
1
|
+
import { InputComponent } from './types';
|
|
2
|
+
import './styles/Input.scss';
|
|
3
|
+
export declare const Input: InputComponent;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InputSuffixProps } from '../types/Input.types';
|
|
3
|
-
export declare const InputSuffix: ({ prefix, suffix, isSticky, inputValue, }: InputSuffixProps) => string | number |
|
|
3
|
+
export declare const InputSuffix: ({ prefix, suffix, isSticky, inputValue, }: InputSuffixProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
@@ -1,23 +1,32 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { type InputProps as DefaultInputProps, Input as DefaultInput } from 'antd';
|
|
2
|
+
import { MaskedInputProps } from 'antd-mask-input/build/main/lib/MaskedInput';
|
|
3
|
+
import { ComponentProps, ForwardRefExoticComponent, ReactNode } from 'react';
|
|
4
|
+
export type GenericInputProps<T> = Omit<T, 'status'> & {
|
|
5
|
+
allowClear?: boolean;
|
|
6
|
+
controls?: boolean;
|
|
5
7
|
error?: string | boolean;
|
|
6
8
|
label?: ReactNode;
|
|
7
|
-
withAsterisk?: boolean;
|
|
8
|
-
variant?: 'outlined';
|
|
9
|
-
allowClear?: boolean;
|
|
10
|
-
textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'integer';
|
|
11
|
-
}
|
|
12
|
-
interface StickySuffixProps extends BaseInputProps {
|
|
13
|
-
suffixType?: 'sticky';
|
|
14
|
-
suffix?: string;
|
|
15
|
-
}
|
|
16
|
-
interface FixedSuffixProps extends BaseInputProps {
|
|
17
|
-
suffixType?: 'fixed';
|
|
18
9
|
suffix?: ReactNode;
|
|
19
|
-
|
|
20
|
-
|
|
10
|
+
suffixType?: 'sticky' | 'fixed';
|
|
11
|
+
testId?: string;
|
|
12
|
+
textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'integer';
|
|
13
|
+
variant?: 'outlined';
|
|
14
|
+
withAsterisk?: boolean;
|
|
15
|
+
};
|
|
16
|
+
export type InputProps = GenericInputProps<DefaultInputProps>;
|
|
17
|
+
export type SearchProps = GenericInputProps<ComponentProps<typeof DefaultInput.Search>>;
|
|
18
|
+
export type TextareaProps = Omit<GenericInputProps<ComponentProps<typeof DefaultInput.TextArea>>, 'suffix' | 'suffixType' | 'controls'>;
|
|
19
|
+
export type PasswordProps = GenericInputProps<ComponentProps<typeof DefaultInput.Password>>;
|
|
20
|
+
export type MaskedProps = GenericInputProps<Partial<MaskedInputProps>>;
|
|
21
|
+
export type InputComponentProps = InputProps & SearchProps & TextareaProps & PasswordProps & MaskedProps;
|
|
22
|
+
type OriginInput = ForwardRefExoticComponent<InputProps>;
|
|
23
|
+
export type InputComponent = OriginInput & {
|
|
24
|
+
Search: ForwardRefExoticComponent<SearchProps>;
|
|
25
|
+
Textarea: ForwardRefExoticComponent<TextareaProps>;
|
|
26
|
+
Password: ForwardRefExoticComponent<PasswordProps>;
|
|
27
|
+
Masked: ForwardRefExoticComponent<MaskedProps>;
|
|
28
|
+
};
|
|
29
|
+
export type ComponentType = typeof DefaultInput | typeof DefaultInput.Search | typeof DefaultInput.TextArea | typeof DefaultInput.Password;
|
|
21
30
|
export type InputErrorProps = {
|
|
22
31
|
error: InputProps['error'];
|
|
23
32
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fvc/input",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next-77277478bcfbaaf8f2357b39eb29a3f07d9495d9",
|
|
4
4
|
"main": "./dist/lib/index.js",
|
|
5
5
|
"types": "./dist/lib/input/src/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -18,16 +18,19 @@
|
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"scripts": {
|
|
21
|
-
"build": "
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"
|
|
25
|
-
"
|
|
21
|
+
"build": "rollup -c ./rollup.config.mjs",
|
|
22
|
+
"clean": "rm -rf dist && rm -rf .rollup.cache",
|
|
23
|
+
"lint": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\"",
|
|
24
|
+
"lint:fix": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\" --fix",
|
|
25
|
+
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
|
|
26
|
+
"type-check": "tsc --noEmit",
|
|
27
|
+
"test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
|
|
26
28
|
},
|
|
27
29
|
"peerDependencies": {
|
|
28
|
-
"@fvc/icons": "
|
|
29
|
-
"@fvc/utils": "
|
|
30
|
+
"@fvc/icons": "^1.0.0",
|
|
31
|
+
"@fvc/utils": "1.3.0-next-77277478bcfbaaf8f2357b39eb29a3f07d9495d9",
|
|
30
32
|
"react": "^18.0.0",
|
|
31
|
-
"antd": "^5.0.0"
|
|
33
|
+
"antd": "^5.0.0",
|
|
34
|
+
"antd-mask-input": "^2.0.7"
|
|
32
35
|
}
|
|
33
36
|
}
|