@websolutespa/bom-mixer-ui 1.2.2 → 1.3.0

package/dist/esm/fields/field-collection.js

@@ -1,6 +1,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FormGroup, FormArray } from '@websolutespa/bom-mixer-forms';
 import { useLabel } from '@websolutespa/bom-mixer-hooks';
+import { useMemo } from 'react';
+import styled from 'styled-components';
 import '../components/accordion/accordion.js';
 import '../components/accordion/accordion-base.js';
 import '../components/badge/badge.js';
@@ -50,71 +52,78 @@ import '../components/tabs/tabs.js';
 import '../components/text/text.js';
 import '../components/tooltip/tooltip.js';
 import '../components/transition/transition.js';
-import 'react';
-import 'styled-components';
 import '../components/css.js';
 import { FIELDS } from './fields.js';
 
-function FieldCollection(props) {
+const StyledGrid = styled(Grid)`
+  flex-direction: column;
+  align-items: flex-start;
+`;
+function FieldCollection(_ref) {
+  let {
+    collection,
+    fields,
+    uid
+  } = _ref;
   const label = useLabel();
-  let uid = props.uid || 0;
-  const controls = props.collection instanceof FormGroup ? Object.keys(props.collection.controls).map(key => {
-    return {
-      key,
-      control: props.collection.controls[key]
-    };
-  }) : props.collection.controls.map((control, i) => {
-    return {
-      key: i,
-      control
-    };
-  });
+  const controls = useMemo(() => {
+    return collection instanceof FormGroup ? Object.keys(collection.controls).map(key => {
+      return {
+        key,
+        control: collection.controls[key]
+      };
+    }) : collection.controls.map((control, i) => {
+      return {
+        key: i,
+        control
+      };
+    });
+  }, [collection]);
+  const customFields = useMemo(() => {
+    return Object.assign(Object.assign({}, FIELDS), fields);
+  }, [fields]);
+  let uniqueId = uid || 0;
   function resolveField(item) {
     const {
       control,
       key
     } = item;
-    ++uid;
+    ++uniqueId;
     if (control instanceof FormGroup || control instanceof FormArray) {
       return jsx(FieldCollection, {
         collection: control,
-        uid: uid
-      }, getFieldUID(uid, control.name));
+        fields: fields,
+        uid: uniqueId
+      }, getFieldUID(uniqueId, control.name));
     } else {
-      if (control.schema in FIELDS) {
-        return FIELDS[control.schema](control, uid);
+      if (control.schema in customFields) {
+        return customFields[control.schema](control, uniqueId);
       } else {
-        return FIELDS.text(control, uid);
+        return customFields.text(control, uniqueId);
       }
     }
   }
   return jsxs(Fragment, {
-    children: [props.collection.label && jsx(Grid, {
+    children: [collection.label && jsx(Grid, {
       xs: 12,
       children: jsx(Divider, {
-        children: label(props.collection.label)
+        children: label(collection.label)
       })
-    }, getFieldUID(++uid, props.collection.name)), controls.length > 0 && controls.map(item => {
+    }, getFieldUID(++uniqueId, collection.name)), controls.length > 0 && controls.map(item => {
       const control = item.control;
       if (!control) {
         return;
       }
-      if (control instanceof FormGroup || control instanceof FormArray || control.state.hidden) {
-        // console.log(control);
-        if (control.state.hidden) {
-          return;
-        }
+      if (control.state.hidden) {
+        return;
+      } else if (control instanceof FormGroup || control instanceof FormArray) {
         return resolveField(item);
       } else {
-        return jsx(Grid, {
+        return jsx(StyledGrid, {
           xs: 12,
           sm: ['checkbox', 'accept'].includes(control.schema) ? 12 : 6,
-          style: {
-            flexDirection: 'column',
-            alignItems: 'flex-start'
-          },
           children: resolveField(item)
-        }, getFieldUID(++uid, item.key));
+        }, getFieldUID(++uniqueId, item.key));
       }
     })]
   });

package/dist/esm/fields/field-collection.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-collection.js","sources":["../../../src/fields/field-collection.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { FormArray, FormGroup } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { Divider, Grid } from '../components';\nimport { FIELDS } from './fields';\nexport function FieldCollection(props) {\n    const label = useLabel();\n    let uid = props.uid || 0;\n    const controls = (props.collection instanceof FormGroup) ?\n        Object.keys(props.collection.controls).map(key => {\n            return { key, control: props.collection.controls[key] };\n        }) :\n        props.collection.controls.map((control, i) => {\n            return { key: i, control };\n        });\n    function resolveField(item) {\n        const { control, key } = item;\n        ++uid;\n        if (control instanceof FormGroup || control instanceof FormArray) {\n            return _jsx(FieldCollection, { collection: control, uid: uid }, getFieldUID(uid, control.name));\n        }\n        else {\n            if (control.schema in FIELDS) {\n                return FIELDS[control.schema](control, uid);\n            }\n            else {\n                return FIELDS.text(control, uid);\n            }\n        }\n    }\n    return (_jsxs(_Fragment, { children: [props.collection.label &&\n                _jsx(Grid, { xs: 12, children: _jsx(Divider, { children: label(props.collection.label) }) }, getFieldUID(++uid, props.collection.name)), controls.length > 0 && controls.map(item => {\n                const control = item.control;\n                if (!control) {\n                    return;\n                }\n                if (control instanceof FormGroup || control instanceof FormArray || control.state.hidden) {\n                    // console.log(control);\n                    if (control.state.hidden) {\n                        return;\n                    }\n                    return resolveField(item);\n                }\n                else {\n                    return _jsx(Grid, { xs: 12, sm: ['checkbox', 'accept'].includes(control.schema) ? 12 : 6, style: { flexDirection: 'column', alignItems: 'flex-start' }, children: resolveField(item) }, getFieldUID(++uid, item.key));\n                }\n            })] }));\n}\nfunction getFieldUID(uid, key = 'none') {\n    const fieldUID = `${++uid}-${key}`;\n    return fieldUID;\n}\n//# sourceMappingURL=field-collection.js.map"],"names":["FieldCollection","props","label","useLabel","uid","controls","collection","FormGroup","Object","keys","map","key","control","i","resolveField","item","FormArray","_jsx","getFieldUID","name","schema","FIELDS","text","_jsxs","_Fragment","children","Grid","xs","Divider","length","state","hidden","sm","includes","style","flexDirection","alignItems","fieldUID"],"mappings":"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"}
+{"version":3,"file":"field-collection.js","sources":["../../../src/fields/field-collection.tsx"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { FormArray, FormGroup } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { useMemo } from 'react';\nimport styled from 'styled-components';\nimport { Divider, Grid } from '../components';\nimport { FIELDS } from './fields';\nconst StyledGrid = styled(Grid) `\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n`;\nexport function FieldCollection({ collection, fields, uid }) {\n    const label = useLabel();\n    const controls = useMemo(() => {\n        return (collection instanceof FormGroup) ?\n            Object.keys(collection.controls).map(key => {\n                return { key, control: collection.controls[key] };\n            }) :\n            collection.controls.map((control, i) => {\n                return { key: i, control };\n            });\n    }, [collection]);\n    const customFields = useMemo(() => {\n        return Object.assign(Object.assign({}, FIELDS), fields);\n    }, [fields]);\n    let uniqueId = uid || 0;\n    function resolveField(item) {\n        const { control, key } = item;\n        ++uniqueId;\n        if (control instanceof FormGroup || control instanceof FormArray) {\n            return _jsx(FieldCollection, { collection: control, fields: fields, uid: uniqueId }, getFieldUID(uniqueId, control.name));\n        }\n        else {\n            if (control.schema in customFields) {\n                return customFields[control.schema](control, uniqueId);\n            }\n            else {\n                return customFields.text(control, uniqueId);\n            }\n        }\n    }\n    return (_jsxs(_Fragment, { children: [collection.label &&\n                _jsx(Grid, { xs: 12, children: _jsx(Divider, { children: label(collection.label) }) }, getFieldUID(++uniqueId, collection.name)), controls.length > 0 && controls.map(item => {\n                const control = item.control;\n                if (!control) {\n                    return;\n                }\n                if (control.state.hidden) {\n                    return;\n                }\n                else if (control instanceof FormGroup || control instanceof FormArray) {\n                    return resolveField(item);\n                }\n                else {\n                    return _jsx(StyledGrid, { xs: 12, sm: ['checkbox', 'accept'].includes(control.schema) ? 12 : 6, children: resolveField(item) }, getFieldUID(++uniqueId, item.key));\n                }\n            })] }));\n}\nfunction getFieldUID(uid, key = 'none') {\n    const fieldUID = `${++uid}-${key}`;\n    return fieldUID;\n}\n//# sourceMappingURL=field-collection.js.map"],"names":["StyledGrid","styled","Grid","FieldCollection","_ref","collection","fields","uid","label","useLabel","controls","useMemo","FormGroup","Object","keys","map","key","control","i","customFields","assign","FIELDS","uniqueId","resolveField","item","FormArray","_jsx","getFieldUID","name","schema","text","_jsxs","_Fragment","children","xs","Divider","length","state","hidden","sm","includes","fieldUID"],"mappings":"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"}

package/dist/esm/fields/field-error.variants.js

@@ -1,13 +1,14 @@
 import { css } from 'styled-components';
 
 const CssFieldErrorDefault = css`
-  margin: 0.5em 0;
-  padding: 0.2em 0.5em;
-  font-size: var(--font-paragraph50-size, --form-font-size, 1rem);
-  font-weight: 500;
-  border: 1px solid var(--form-border-color-error);
-  background: var(--form-background-color-error);
-  color: var(--form-color-error);
+  margin: var(--form-error-margin, 0.5em 0);
+  padding: var(--form-error-padding, 0.2em 0.4em);
+  font-size: var(--form-error-font-size, 0.9rem);
+  font-weight: var(--form-error-font-weight, 500);
+  line-height: var(--form-error-line-height, 1.2);
+  border: var(--form-error-border, none);
+  background: var(--form-error-background-color, transparent);
+  color: var(--form-error-color, transparent);
 `;
 const fieldErrorVariants = {
   default: CssFieldErrorDefault

package/dist/esm/fields/field-error.variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-error.variants.js","sources":["../../../src/fields/field-error.variants.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssFieldErrorDefault = css `\r\n  margin: 0.5em 0;\r\n  padding: 0.2em 0.5em;\r\n  font-size: var(--font-paragraph50-size, --form-font-size, 1rem);\r\n  font-weight: 500;\r\n  border: 1px solid var(--form-border-color-error);\r\n  background: var(--form-background-color-error);\r\n  color: var(--form-color-error);\r\n`;\nexport const fieldErrorVariants = {\n    default: CssFieldErrorDefault,\n};\n//# sourceMappingURL=field-error.variants.js.map"],"names":["CssFieldErrorDefault","css","fieldErrorVariants","default"],"mappings":";;AACO,MAAMA,oBAAoB,GAAGC,GAAK,CAAA;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AACM,MAAMC,kBAAkB,GAAG;AAC9BC,EAAAA,OAAO,EAAEH,oBAAAA;AACb;;;;"}
+{"version":3,"file":"field-error.variants.js","sources":["../../../src/fields/field-error.variants.ts"],"sourcesContent":["import { css } from 'styled-components';\nexport const CssFieldErrorDefault = css `\r\n  margin: var(--form-error-margin, 0.5em 0);\r\n  padding: var(--form-error-padding, 0.2em 0.4em);\r\n  font-size: var(--form-error-font-size, 0.9rem);\r\n  font-weight: var(--form-error-font-weight, 500);\r\n  line-height: var(--form-error-line-height, 1.2);\r\n  border: var(--form-error-border, none);\r\n  background: var(--form-error-background-color, transparent);\r\n  color: var(--form-error-color, transparent);\r\n`;\nexport const fieldErrorVariants = {\n    default: CssFieldErrorDefault,\n};\n//# sourceMappingURL=field-error.variants.js.map"],"names":["CssFieldErrorDefault","css","fieldErrorVariants","default"],"mappings":";;AACO,MAAMA,oBAAoB,GAAGC,GAAK,CAAA;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AACM,MAAMC,kBAAkB,GAAG;AAC9BC,EAAAA,OAAO,EAAEH,oBAAAA;AACb;;;;"}

package/dist/esm/fields/field-password.js

@@ -42,14 +42,18 @@ import '../forms/textarea/textarea.variants.js';
 import '../forms/utils/utils.js';
 import { FieldError } from './field-error.js';
 
-function FieldPassword(props) {
+function FieldPassword(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
   const label = useLabel();
-  const uniqueName = `${props.control.name}-${props.uid}`;
-  const [state, setValue, setTouched] = useControl(props.control);
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = useControl(control);
   const onChange = event => {
     // console.log('FieldPassword', event.target.value);
     setValue(event.target.value);
-    // props.control.value = event.target.value;
+    // control.value = event.target.value;
   };
 
   const [focus, setFocus] = useState(false);
@@ -68,13 +72,15 @@ function FieldPassword(props) {
     type: "hidden",
     value: state.value || ''
   }) : jsxs(Field, {
+    state: state,
     children: [jsx(Label, {
-      children: props.control.label && label(props.control.label)
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
     }), jsx(Input, {
       id: uniqueName,
       name: uniqueName,
       type: type,
-      placeholder: label(props.control.placeholder || props.control.label || ''),
+      placeholder: label(control.placeholder || control.label || ''),
       value: state.value || '',
       onChange: onChange,
       onBlur: onBlur,

package/dist/esm/fields/field-password.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-password.js","sources":["../../../src/fields/field-password.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useControl } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { IconEye } from '@websolutespa/bom-mixer-icons';\nimport { useState } from 'react';\nimport { Field, Input, Label } from '../forms';\nimport { FieldError } from './field-error';\nexport function FieldPassword(props) {\n    const label = useLabel();\n    const uniqueName = `${props.control.name}-${props.uid}`;\n    const [state, setValue, setTouched] = useControl(props.control);\n    const onChange = (event) => {\n        // console.log('FieldPassword', event.target.value);\n        setValue(event.target.value);\n        // props.control.value = event.target.value;\n    };\n    const [focus, setFocus] = useState(false);\n    const [type, setType] = useState('password');\n    const onBlur = (_) => {\n        setTouched();\n        setFocus(false);\n    };\n    const onFocus = (_) => {\n        setFocus(true);\n    };\n    const onToggle = () => {\n        setType(type === 'password' ? 'text' : 'password');\n    };\n    return (state.flags.hidden ? (_jsx(\"input\", { type: \"hidden\", value: state.value || '' })) : (_jsxs(Field, { children: [_jsx(Label, { children: props.control.label && label(props.control.label) }), _jsx(Input, { id: uniqueName, name: uniqueName, type: type, placeholder: label(props.control.placeholder || props.control.label || ''), value: state.value || '', onChange: onChange, onBlur: onBlur, onFocus: onFocus, disabled: state.flags.disabled, readOnly: state.flags.readonly, width: \"100%\", after: _jsx(IconEye, { color: type === 'password' ? 'var(--color-neutral-400)' : 'var(--color-primary-500)', onClick: () => onToggle() }) }), _jsx(FieldError, { state: state })] })));\n}\n//# sourceMappingURL=field-password.js.map"],"names":["FieldPassword","props","label","useLabel","uniqueName","control","name","uid","state","setValue","setTouched","useControl","onChange","event","target","value","focus","setFocus","useState","type","setType","onBlur","_","onFocus","onToggle","flags","hidden","_jsx","_jsxs","Field","children","Label","Input","id","placeholder","disabled","readOnly","readonly","width","after","IconEye","color","onClick","FieldError"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,SAASA,aAAaA,CAACC,KAAK,EAAE;AACjC,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;AACxB,EAAA,MAAMC,UAAU,GAAI,CAAEH,EAAAA,KAAK,CAACI,OAAO,CAACC,IAAK,CAAGL,CAAAA,EAAAA,KAAK,CAACM,GAAI,CAAC,CAAA,CAAA;AACvD,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,CAAC,GAAGC,UAAU,CAACV,KAAK,CAACI,OAAO,CAAC,CAAA;EAC/D,MAAMO,QAAQ,GAAIC,KAAK,IAAK;AACxB;AACAJ,IAAAA,QAAQ,CAACI,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAA;AAC5B;GACH,CAAA;;EACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzC,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGF,QAAQ,CAAC,UAAU,CAAC,CAAA;EAC5C,MAAMG,MAAM,GAAIC,CAAC,IAAK;AAClBZ,IAAAA,UAAU,EAAE,CAAA;IACZO,QAAQ,CAAC,KAAK,CAAC,CAAA;GAClB,CAAA;EACD,MAAMM,OAAO,GAAID,CAAC,IAAK;IACnBL,QAAQ,CAAC,IAAI,CAAC,CAAA;GACjB,CAAA;EACD,MAAMO,QAAQ,GAAGA,MAAM;IACnBJ,OAAO,CAACD,IAAI,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;GACrD,CAAA;EACD,OAAQX,KAAK,CAACiB,KAAK,CAACC,MAAM,GAAIC,GAAI,CAAC,OAAO,EAAE;AAAER,IAAAA,IAAI,EAAE,QAAQ;AAAEJ,IAAAA,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,EAAA;AAAG,GAAC,CAAC,GAAKa,IAAK,CAACC,KAAK,EAAE;AAAEC,IAAAA,QAAQ,EAAE,CAACH,GAAI,CAACI,KAAK,EAAE;AAAED,MAAAA,QAAQ,EAAE7B,KAAK,CAACI,OAAO,CAACH,KAAK,IAAIA,KAAK,CAACD,KAAK,CAACI,OAAO,CAACH,KAAK,CAAA;AAAE,KAAC,CAAC,EAAEyB,GAAI,CAACK,KAAK,EAAE;AAAEC,MAAAA,EAAE,EAAE7B,UAAU;AAAEE,MAAAA,IAAI,EAAEF,UAAU;AAAEe,MAAAA,IAAI,EAAEA,IAAI;AAAEe,MAAAA,WAAW,EAAEhC,KAAK,CAACD,KAAK,CAACI,OAAO,CAAC6B,WAAW,IAAIjC,KAAK,CAACI,OAAO,CAACH,KAAK,IAAI,EAAE,CAAC;AAAEa,MAAAA,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,EAAE;AAAEH,MAAAA,QAAQ,EAAEA,QAAQ;AAAES,MAAAA,MAAM,EAAEA,MAAM;AAAEE,MAAAA,OAAO,EAAEA,OAAO;AAAEY,MAAAA,QAAQ,EAAE3B,KAAK,CAACiB,KAAK,CAACU,QAAQ;AAAEC,MAAAA,QAAQ,EAAE5B,KAAK,CAACiB,KAAK,CAACY,QAAQ;AAAEC,MAAAA,KAAK,EAAE,MAAM;AAAEC,MAAAA,KAAK,EAAEZ,GAAI,CAACa,OAAO,EAAE;AAAEC,QAAAA,KAAK,EAAEtB,IAAI,KAAK,UAAU,GAAG,0BAA0B,GAAG,0BAA0B;AAAEuB,QAAAA,OAAO,EAAEA,MAAMlB,QAAQ,EAAC;OAAG,CAAA;AAAE,KAAC,CAAC,EAAEG,GAAI,CAACgB,UAAU,EAAE;AAAEnC,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAC,CAAE,CAAA;AACtqB;;;;"}
+{"version":3,"file":"field-password.js","sources":["../../../src/fields/field-password.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useControl } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { IconEye } from '@websolutespa/bom-mixer-icons';\nimport { useState } from 'react';\nimport { Field, Input, Label } from '../forms';\nimport { FieldError } from './field-error';\nexport function FieldPassword({ control, uid = 0 }) {\n    const label = useLabel();\n    const uniqueName = `${control.name}-${uid}`;\n    const [state, setValue, setTouched] = useControl(control);\n    const onChange = (event) => {\n        // console.log('FieldPassword', event.target.value);\n        setValue(event.target.value);\n        // control.value = event.target.value;\n    };\n    const [focus, setFocus] = useState(false);\n    const [type, setType] = useState('password');\n    const onBlur = (_) => {\n        setTouched();\n        setFocus(false);\n    };\n    const onFocus = (_) => {\n        setFocus(true);\n    };\n    const onToggle = () => {\n        setType(type === 'password' ? 'text' : 'password');\n    };\n    return (state.flags.hidden ? (_jsx(\"input\", { type: \"hidden\", value: state.value || '' })) : (_jsxs(Field, { state: state, children: [_jsx(Label, { htmlFor: uniqueName, children: control.label && label(control.label) }), _jsx(Input, { id: uniqueName, name: uniqueName, type: type, placeholder: label(control.placeholder || control.label || ''), value: state.value || '', onChange: onChange, onBlur: onBlur, onFocus: onFocus, disabled: state.flags.disabled, readOnly: state.flags.readonly, width: \"100%\", after: _jsx(IconEye, { color: type === 'password' ? 'var(--color-neutral-400)' : 'var(--color-primary-500)', onClick: () => onToggle() }) }), _jsx(FieldError, { state: state })] })));\n}\n//# sourceMappingURL=field-password.js.map"],"names":["FieldPassword","_ref","control","uid","label","useLabel","uniqueName","name","state","setValue","setTouched","useControl","onChange","event","target","value","focus","setFocus","useState","type","setType","onBlur","_","onFocus","onToggle","flags","hidden","_jsx","_jsxs","Field","children","Label","htmlFor","Input","id","placeholder","disabled","readOnly","readonly","width","after","IconEye","color","onClick","FieldError"],"mappings":"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"}

package/dist/esm/fields/field-select.js

@@ -41,12 +41,16 @@ import '../forms/textarea/textarea.variants.js';
 import '../forms/utils/utils.js';
 import { FieldError } from './field-error.js';
 
-function FieldSelect(props) {
+function FieldSelect(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
   const label = useLabel();
-  const uniqueName = `${props.control.name}-${props.uid}`;
-  const [state, setValue, setTouched] = useControl(props.control);
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = useControl(control);
   const onChange = value => {
-    const valueOrValues = stringToValue(value, props.control.options, props.control.optionsExtra);
+    const valueOrValues = stringToValue(value, control.options, control.optionsExtra);
     setValue(valueOrValues);
   };
   const [focus, setFocus] = useState(false);
@@ -61,18 +65,21 @@ function FieldSelect(props) {
     type: "hidden",
     value: valueToString(state.value)
   }) : jsxs(Field, {
-    children: [props.control.label && jsx(Label, {
-      children: label(props.control.label)
+    state: state,
+    children: [jsx(Label, {
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
     }), jsx(CustomSelect, {
       id: uniqueName,
-      placeholder: label(props.control.placeholder || props.control.label || ''),
+      name: uniqueName,
+      placeholder: label(control.placeholder || control.label || ''),
       value: valueToString(state.value),
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
       disabled: state.flags.disabled || state.flags.readonly,
       width: "100%",
-      children: props.control.options && props.control.options.map((option, i) => jsx(CustomSelect.Option, {
+      children: control.options && control.options.map((option, i) => jsx(CustomSelect.Option, {
         value: option.id.toString(),
         children: option.name
       }, i))

package/dist/esm/fields/field-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-select.js","sources":["../../../src/fields/field-select.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { stringToValue, useControl, valueToString } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { useState } from 'react';\nimport { CustomSelect, Field, Label } from '../forms';\nimport { FieldError } from './field-error';\nexport function FieldSelect(props) {\n    const label = useLabel();\n    const uniqueName = `${props.control.name}-${props.uid}`;\n    const [state, setValue, setTouched] = useControl(props.control);\n    const onChange = (value) => {\n        const valueOrValues = stringToValue(value, props.control.options, props.control.optionsExtra);\n        setValue(valueOrValues);\n    };\n    const [focus, setFocus] = useState(false);\n    const onBlur = (_) => {\n        setTouched();\n        setFocus(false);\n    };\n    const onFocus = (_) => {\n        setFocus(true);\n    };\n    return (state.flags.hidden ? (_jsx(\"input\", { type: \"hidden\", value: valueToString(state.value) })) : (_jsxs(Field, { children: [props.control.label &&\n                _jsx(Label, { children: label(props.control.label) }), _jsx(CustomSelect, { id: uniqueName, placeholder: label(props.control.placeholder || props.control.label || ''), value: valueToString(state.value), onChange: onChange, onBlur: onBlur, onFocus: onFocus, disabled: state.flags.disabled || state.flags.readonly, width: \"100%\", children: props.control.options && props.control.options.map((option, i) => (_jsx(CustomSelect.Option, { value: option.id.toString(), children: option.name }, i))) }), _jsx(FieldError, { state: state })] })));\n}\n//# sourceMappingURL=field-select.js.map"],"names":["FieldSelect","props","label","useLabel","uniqueName","control","name","uid","state","setValue","setTouched","useControl","onChange","value","valueOrValues","stringToValue","options","optionsExtra","focus","setFocus","useState","onBlur","_","onFocus","flags","hidden","_jsx","type","valueToString","_jsxs","Field","children","Label","CustomSelect","id","placeholder","disabled","readonly","width","map","option","i","Option","toString","FieldError"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,SAASA,WAAWA,CAACC,KAAK,EAAE;AAC/B,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;AACxB,EAAA,MAAMC,UAAU,GAAI,CAAEH,EAAAA,KAAK,CAACI,OAAO,CAACC,IAAK,CAAGL,CAAAA,EAAAA,KAAK,CAACM,GAAI,CAAC,CAAA,CAAA;AACvD,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,CAAC,GAAGC,UAAU,CAACV,KAAK,CAACI,OAAO,CAAC,CAAA;EAC/D,MAAMO,QAAQ,GAAIC,KAAK,IAAK;AACxB,IAAA,MAAMC,aAAa,GAAGC,aAAa,CAACF,KAAK,EAAEZ,KAAK,CAACI,OAAO,CAACW,OAAO,EAAEf,KAAK,CAACI,OAAO,CAACY,YAAY,CAAC,CAAA;IAC7FR,QAAQ,CAACK,aAAa,CAAC,CAAA;GAC1B,CAAA;EACD,MAAM,CAACI,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzC,MAAMC,MAAM,GAAIC,CAAC,IAAK;AAClBZ,IAAAA,UAAU,EAAE,CAAA;IACZS,QAAQ,CAAC,KAAK,CAAC,CAAA;GAClB,CAAA;EACD,MAAMI,OAAO,GAAID,CAAC,IAAK;IACnBH,QAAQ,CAAC,IAAI,CAAC,CAAA;GACjB,CAAA;EACD,OAAQX,KAAK,CAACgB,KAAK,CAACC,MAAM,GAAIC,GAAI,CAAC,OAAO,EAAE;AAAEC,IAAAA,IAAI,EAAE,QAAQ;AAAEd,IAAAA,KAAK,EAAEe,aAAa,CAACpB,KAAK,CAACK,KAAK,CAAA;AAAE,GAAC,CAAC,GAAKgB,IAAK,CAACC,KAAK,EAAE;IAAEC,QAAQ,EAAE,CAAC9B,KAAK,CAACI,OAAO,CAACH,KAAK,IACxIwB,GAAI,CAACM,KAAK,EAAE;AAAED,MAAAA,QAAQ,EAAE7B,KAAK,CAACD,KAAK,CAACI,OAAO,CAACH,KAAK,CAAA;AAAE,KAAC,CAAC,EAAEwB,GAAI,CAACO,YAAY,EAAE;AAAEC,MAAAA,EAAE,EAAE9B,UAAU;AAAE+B,MAAAA,WAAW,EAAEjC,KAAK,CAACD,KAAK,CAACI,OAAO,CAAC8B,WAAW,IAAIlC,KAAK,CAACI,OAAO,CAACH,KAAK,IAAI,EAAE,CAAC;AAAEW,MAAAA,KAAK,EAAEe,aAAa,CAACpB,KAAK,CAACK,KAAK,CAAC;AAAED,MAAAA,QAAQ,EAAEA,QAAQ;AAAES,MAAAA,MAAM,EAAEA,MAAM;AAAEE,MAAAA,OAAO,EAAEA,OAAO;MAAEa,QAAQ,EAAE5B,KAAK,CAACgB,KAAK,CAACY,QAAQ,IAAI5B,KAAK,CAACgB,KAAK,CAACa,QAAQ;AAAEC,MAAAA,KAAK,EAAE,MAAM;MAAEP,QAAQ,EAAE9B,KAAK,CAACI,OAAO,CAACW,OAAO,IAAIf,KAAK,CAACI,OAAO,CAACW,OAAO,CAACuB,GAAG,CAAC,CAACC,MAAM,EAAEC,CAAC,KAAMf,GAAI,CAACO,YAAY,CAACS,MAAM,EAAE;AAAE7B,QAAAA,KAAK,EAAE2B,MAAM,CAACN,EAAE,CAACS,QAAQ,EAAE;QAAEZ,QAAQ,EAAES,MAAM,CAAClC,IAAAA;OAAM,EAAEmC,CAAC,CAAE,CAAA;AAAE,KAAC,CAAC,EAAEf,GAAI,CAACkB,UAAU,EAAE;AAAEpC,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAC,CAAE,CAAA;AACviB;;;;"}
+{"version":3,"file":"field-select.js","sources":["../../../src/fields/field-select.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { stringToValue, useControl, valueToString } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { useState } from 'react';\nimport { CustomSelect, Field, Label } from '../forms';\nimport { FieldError } from './field-error';\nexport function FieldSelect({ control, uid = 0 }) {\n    const label = useLabel();\n    const uniqueName = `${control.name}-${uid}`;\n    const [state, setValue, setTouched] = useControl(control);\n    const onChange = (value) => {\n        const valueOrValues = stringToValue(value, control.options, control.optionsExtra);\n        setValue(valueOrValues);\n    };\n    const [focus, setFocus] = useState(false);\n    const onBlur = (_) => {\n        setTouched();\n        setFocus(false);\n    };\n    const onFocus = (_) => {\n        setFocus(true);\n    };\n    return (state.flags.hidden ? (_jsx(\"input\", { type: \"hidden\", value: valueToString(state.value) })) : (_jsxs(Field, { state: state, children: [_jsx(Label, { htmlFor: uniqueName, children: control.label && label(control.label) }), _jsx(CustomSelect, { id: uniqueName, name: uniqueName, placeholder: label(control.placeholder || control.label || ''), value: valueToString(state.value), onChange: onChange, onBlur: onBlur, onFocus: onFocus, disabled: state.flags.disabled || state.flags.readonly, width: \"100%\", children: control.options && control.options.map((option, i) => (_jsx(CustomSelect.Option, { value: option.id.toString(), children: option.name }, i))) }), _jsx(FieldError, { state: state })] })));\n}\n//# sourceMappingURL=field-select.js.map"],"names":["FieldSelect","_ref","control","uid","label","useLabel","uniqueName","name","state","setValue","setTouched","useControl","onChange","value","valueOrValues","stringToValue","options","optionsExtra","focus","setFocus","useState","onBlur","_","onFocus","flags","hidden","_jsx","type","valueToString","_jsxs","Field","children","Label","htmlFor","CustomSelect","id","placeholder","disabled","readonly","width","map","option","i","Option","toString","FieldError"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,SAASA,WAAWA,CAAAC,IAAA,EAAuB;EAAA,IAAtB;IAAEC,OAAO;AAAEC,IAAAA,GAAG,GAAG,CAAA;AAAE,GAAC,GAAAF,IAAA,CAAA;AAC5C,EAAA,MAAMG,KAAK,GAAGC,QAAQ,EAAE,CAAA;EACxB,MAAMC,UAAU,GAAI,CAAEJ,EAAAA,OAAO,CAACK,IAAK,CAAA,CAAA,EAAGJ,GAAI,CAAC,CAAA,CAAA;EAC3C,MAAM,CAACK,KAAK,EAAEC,QAAQ,EAAEC,UAAU,CAAC,GAAGC,UAAU,CAACT,OAAO,CAAC,CAAA;EACzD,MAAMU,QAAQ,GAAIC,KAAK,IAAK;AACxB,IAAA,MAAMC,aAAa,GAAGC,aAAa,CAACF,KAAK,EAAEX,OAAO,CAACc,OAAO,EAAEd,OAAO,CAACe,YAAY,CAAC,CAAA;IACjFR,QAAQ,CAACK,aAAa,CAAC,CAAA;GAC1B,CAAA;EACD,MAAM,CAACI,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzC,MAAMC,MAAM,GAAIC,CAAC,IAAK;AAClBZ,IAAAA,UAAU,EAAE,CAAA;IACZS,QAAQ,CAAC,KAAK,CAAC,CAAA;GAClB,CAAA;EACD,MAAMI,OAAO,GAAID,CAAC,IAAK;IACnBH,QAAQ,CAAC,IAAI,CAAC,CAAA;GACjB,CAAA;EACD,OAAQX,KAAK,CAACgB,KAAK,CAACC,MAAM,GAAIC,GAAI,CAAC,OAAO,EAAE;AAAEC,IAAAA,IAAI,EAAE,QAAQ;AAAEd,IAAAA,KAAK,EAAEe,aAAa,CAACpB,KAAK,CAACK,KAAK,CAAA;AAAE,GAAC,CAAC,GAAKgB,IAAK,CAACC,KAAK,EAAE;AAAEtB,IAAAA,KAAK,EAAEA,KAAK;AAAEuB,IAAAA,QAAQ,EAAE,CAACL,GAAI,CAACM,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAE3B,UAAU;MAAEyB,QAAQ,EAAE7B,OAAO,CAACE,KAAK,IAAIA,KAAK,CAACF,OAAO,CAACE,KAAK,CAAA;AAAE,KAAC,CAAC,EAAEsB,GAAI,CAACQ,YAAY,EAAE;AAAEC,MAAAA,EAAE,EAAE7B,UAAU;AAAEC,MAAAA,IAAI,EAAED,UAAU;AAAE8B,MAAAA,WAAW,EAAEhC,KAAK,CAACF,OAAO,CAACkC,WAAW,IAAIlC,OAAO,CAACE,KAAK,IAAI,EAAE,CAAC;AAAES,MAAAA,KAAK,EAAEe,aAAa,CAACpB,KAAK,CAACK,KAAK,CAAC;AAAED,MAAAA,QAAQ,EAAEA,QAAQ;AAAES,MAAAA,MAAM,EAAEA,MAAM;AAAEE,MAAAA,OAAO,EAAEA,OAAO;MAAEc,QAAQ,EAAE7B,KAAK,CAACgB,KAAK,CAACa,QAAQ,IAAI7B,KAAK,CAACgB,KAAK,CAACc,QAAQ;AAAEC,MAAAA,KAAK,EAAE,MAAM;MAAER,QAAQ,EAAE7B,OAAO,CAACc,OAAO,IAAId,OAAO,CAACc,OAAO,CAACwB,GAAG,CAAC,CAACC,MAAM,EAAEC,CAAC,KAAMhB,GAAI,CAACQ,YAAY,CAACS,MAAM,EAAE;AAAE9B,QAAAA,KAAK,EAAE4B,MAAM,CAACN,EAAE,CAACS,QAAQ,EAAE;QAAEb,QAAQ,EAAEU,MAAM,CAAClC,IAAAA;OAAM,EAAEmC,CAAC,CAAE,CAAA;AAAE,KAAC,CAAC,EAAEhB,GAAI,CAACmB,UAAU,EAAE;AAAErC,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAC,CAAE,CAAA;AACpsB;;;;"}

package/dist/esm/fields/field-text.js

@@ -41,14 +41,20 @@ import '../forms/textarea/textarea.variants.js';
 import '../forms/utils/utils.js';
 import { FieldError } from './field-error.js';
 
-function FieldText(props) {
+function FieldText(_ref) {
+  let {
+    control,
+    uid = 0,
+    before,
+    after
+  } = _ref;
   const label = useLabel();
-  const uniqueName = `${props.control.name}-${props.uid}`;
-  const [state, setValue, setTouched] = useControl(props.control);
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = useControl(control);
   const onChange = event => {
     // console.log('FieldText', event.target.value);
     setValue(event.target.value);
-    // props.control.value = event.target.value;
+    // control.value = event.target.value;
   };
 
   const [focus, setFocus] = useState(false);
@@ -63,20 +69,22 @@ function FieldText(props) {
     type: "hidden",
     value: state.value || ''
   }) : jsxs(Field, {
+    state: state,
     children: [jsx(Label, {
-      children: props.control.label && label(props.control.label)
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
     }), jsx(Input, {
       id: uniqueName,
       name: uniqueName,
-      placeholder: label(props.control.placeholder || props.control.label || ''),
+      placeholder: label(control.placeholder || control.label || ''),
       value: state.value || '',
       onChange: onChange,
       onBlur: onBlur,
       onFocus: onFocus,
       disabled: state.flags.disabled,
       readOnly: state.flags.readonly,
-      before: props.before,
-      after: props.after,
+      before: before,
+      after: after,
       width: "100%"
     }), jsx(FieldError, {
       state: state

package/dist/esm/fields/field-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-text.js","sources":["../../../src/fields/field-text.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useControl } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { useState } from 'react';\nimport { Field, Input, Label } from '../forms';\nimport { FieldError } from './field-error';\nexport function FieldText(props) {\n    const label = useLabel();\n    const uniqueName = `${props.control.name}-${props.uid}`;\n    const [state, setValue, setTouched] = useControl(props.control);\n    const onChange = (event) => {\n        // console.log('FieldText', event.target.value);\n        setValue(event.target.value);\n        // props.control.value = event.target.value;\n    };\n    const [focus, setFocus] = useState(false);\n    const onBlur = (_) => {\n        setTouched();\n        setFocus(false);\n    };\n    const onFocus = (_) => {\n        setFocus(true);\n    };\n    return (state.flags.hidden ? (_jsx(\"input\", { type: \"hidden\", value: state.value || '' })) : (_jsxs(Field, { children: [_jsx(Label, { children: props.control.label && label(props.control.label) }), _jsx(Input, { id: uniqueName, name: uniqueName, placeholder: label(props.control.placeholder || props.control.label || ''), value: state.value || '', onChange: onChange, onBlur: onBlur, onFocus: onFocus, disabled: state.flags.disabled, readOnly: state.flags.readonly, before: props.before, after: props.after, width: \"100%\" }), _jsx(FieldError, { state: state })] })));\n}\n//# sourceMappingURL=field-text.js.map"],"names":["FieldText","props","label","useLabel","uniqueName","control","name","uid","state","setValue","setTouched","useControl","onChange","event","target","value","focus","setFocus","useState","onBlur","_","onFocus","flags","hidden","_jsx","type","_jsxs","Field","children","Label","Input","id","placeholder","disabled","readOnly","readonly","before","after","width","FieldError"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,SAASA,SAASA,CAACC,KAAK,EAAE;AAC7B,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;AACxB,EAAA,MAAMC,UAAU,GAAI,CAAEH,EAAAA,KAAK,CAACI,OAAO,CAACC,IAAK,CAAGL,CAAAA,EAAAA,KAAK,CAACM,GAAI,CAAC,CAAA,CAAA;AACvD,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,CAAC,GAAGC,UAAU,CAACV,KAAK,CAACI,OAAO,CAAC,CAAA;EAC/D,MAAMO,QAAQ,GAAIC,KAAK,IAAK;AACxB;AACAJ,IAAAA,QAAQ,CAACI,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAA;AAC5B;GACH,CAAA;;EACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzC,MAAMC,MAAM,GAAIC,CAAC,IAAK;AAClBV,IAAAA,UAAU,EAAE,CAAA;IACZO,QAAQ,CAAC,KAAK,CAAC,CAAA;GAClB,CAAA;EACD,MAAMI,OAAO,GAAID,CAAC,IAAK;IACnBH,QAAQ,CAAC,IAAI,CAAC,CAAA;GACjB,CAAA;EACD,OAAQT,KAAK,CAACc,KAAK,CAACC,MAAM,GAAIC,GAAI,CAAC,OAAO,EAAE;AAAEC,IAAAA,IAAI,EAAE,QAAQ;AAAEV,IAAAA,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,EAAA;AAAG,GAAC,CAAC,GAAKW,IAAK,CAACC,KAAK,EAAE;AAAEC,IAAAA,QAAQ,EAAE,CAACJ,GAAI,CAACK,KAAK,EAAE;AAAED,MAAAA,QAAQ,EAAE3B,KAAK,CAACI,OAAO,CAACH,KAAK,IAAIA,KAAK,CAACD,KAAK,CAACI,OAAO,CAACH,KAAK,CAAA;AAAE,KAAC,CAAC,EAAEsB,GAAI,CAACM,KAAK,EAAE;AAAEC,MAAAA,EAAE,EAAE3B,UAAU;AAAEE,MAAAA,IAAI,EAAEF,UAAU;AAAE4B,MAAAA,WAAW,EAAE9B,KAAK,CAACD,KAAK,CAACI,OAAO,CAAC2B,WAAW,IAAI/B,KAAK,CAACI,OAAO,CAACH,KAAK,IAAI,EAAE,CAAC;AAAEa,MAAAA,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,EAAE;AAAEH,MAAAA,QAAQ,EAAEA,QAAQ;AAAEO,MAAAA,MAAM,EAAEA,MAAM;AAAEE,MAAAA,OAAO,EAAEA,OAAO;AAAEY,MAAAA,QAAQ,EAAEzB,KAAK,CAACc,KAAK,CAACW,QAAQ;AAAEC,MAAAA,QAAQ,EAAE1B,KAAK,CAACc,KAAK,CAACa,QAAQ;MAAEC,MAAM,EAAEnC,KAAK,CAACmC,MAAM;MAAEC,KAAK,EAAEpC,KAAK,CAACoC,KAAK;AAAEC,MAAAA,KAAK,EAAE,MAAA;AAAO,KAAC,CAAC,EAAEd,GAAI,CAACe,UAAU,EAAE;AAAE/B,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAC,CAAE,CAAA;AACzjB;;;;"}
+{"version":3,"file":"field-text.js","sources":["../../../src/fields/field-text.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useControl } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { useState } from 'react';\nimport { Field, Input, Label } from '../forms';\nimport { FieldError } from './field-error';\nexport function FieldText({ control, uid = 0, before, after }) {\n    const label = useLabel();\n    const uniqueName = `${control.name}-${uid}`;\n    const [state, setValue, setTouched] = useControl(control);\n    const onChange = (event) => {\n        // console.log('FieldText', event.target.value);\n        setValue(event.target.value);\n        // control.value = event.target.value;\n    };\n    const [focus, setFocus] = useState(false);\n    const onBlur = (_) => {\n        setTouched();\n        setFocus(false);\n    };\n    const onFocus = (_) => {\n        setFocus(true);\n    };\n    return (state.flags.hidden ? (_jsx(\"input\", { type: \"hidden\", value: state.value || '' })) : (_jsxs(Field, { state: state, children: [_jsx(Label, { htmlFor: uniqueName, children: control.label && label(control.label) }), _jsx(Input, { id: uniqueName, name: uniqueName, placeholder: label(control.placeholder || control.label || ''), value: state.value || '', onChange: onChange, onBlur: onBlur, onFocus: onFocus, disabled: state.flags.disabled, readOnly: state.flags.readonly, before: before, after: after, width: \"100%\" }), _jsx(FieldError, { state: state })] })));\n}\n//# sourceMappingURL=field-text.js.map"],"names":["FieldText","_ref","control","uid","before","after","label","useLabel","uniqueName","name","state","setValue","setTouched","useControl","onChange","event","target","value","focus","setFocus","useState","onBlur","_","onFocus","flags","hidden","_jsx","type","_jsxs","Field","children","Label","htmlFor","Input","id","placeholder","disabled","readOnly","readonly","width","FieldError"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,SAASA,SAASA,CAAAC,IAAA,EAAsC;EAAA,IAArC;IAAEC,OAAO;AAAEC,IAAAA,GAAG,GAAG,CAAC;IAAEC,MAAM;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAJ,IAAA,CAAA;AACzD,EAAA,MAAMK,KAAK,GAAGC,QAAQ,EAAE,CAAA;EACxB,MAAMC,UAAU,GAAI,CAAEN,EAAAA,OAAO,CAACO,IAAK,CAAA,CAAA,EAAGN,GAAI,CAAC,CAAA,CAAA;EAC3C,MAAM,CAACO,KAAK,EAAEC,QAAQ,EAAEC,UAAU,CAAC,GAAGC,UAAU,CAACX,OAAO,CAAC,CAAA;EACzD,MAAMY,QAAQ,GAAIC,KAAK,IAAK;AACxB;AACAJ,IAAAA,QAAQ,CAACI,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAA;AAC5B;GACH,CAAA;;EACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzC,MAAMC,MAAM,GAAIC,CAAC,IAAK;AAClBV,IAAAA,UAAU,EAAE,CAAA;IACZO,QAAQ,CAAC,KAAK,CAAC,CAAA;GAClB,CAAA;EACD,MAAMI,OAAO,GAAID,CAAC,IAAK;IACnBH,QAAQ,CAAC,IAAI,CAAC,CAAA;GACjB,CAAA;EACD,OAAQT,KAAK,CAACc,KAAK,CAACC,MAAM,GAAIC,GAAI,CAAC,OAAO,EAAE;AAAEC,IAAAA,IAAI,EAAE,QAAQ;AAAEV,IAAAA,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,EAAA;AAAG,GAAC,CAAC,GAAKW,IAAK,CAACC,KAAK,EAAE;AAAEnB,IAAAA,KAAK,EAAEA,KAAK;AAAEoB,IAAAA,QAAQ,EAAE,CAACJ,GAAI,CAACK,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAExB,UAAU;MAAEsB,QAAQ,EAAE5B,OAAO,CAACI,KAAK,IAAIA,KAAK,CAACJ,OAAO,CAACI,KAAK,CAAA;AAAE,KAAC,CAAC,EAAEoB,GAAI,CAACO,KAAK,EAAE;AAAEC,MAAAA,EAAE,EAAE1B,UAAU;AAAEC,MAAAA,IAAI,EAAED,UAAU;AAAE2B,MAAAA,WAAW,EAAE7B,KAAK,CAACJ,OAAO,CAACiC,WAAW,IAAIjC,OAAO,CAACI,KAAK,IAAI,EAAE,CAAC;AAAEW,MAAAA,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,EAAE;AAAEH,MAAAA,QAAQ,EAAEA,QAAQ;AAAEO,MAAAA,MAAM,EAAEA,MAAM;AAAEE,MAAAA,OAAO,EAAEA,OAAO;AAAEa,MAAAA,QAAQ,EAAE1B,KAAK,CAACc,KAAK,CAACY,QAAQ;AAAEC,MAAAA,QAAQ,EAAE3B,KAAK,CAACc,KAAK,CAACc,QAAQ;AAAElC,MAAAA,MAAM,EAAEA,MAAM;AAAEC,MAAAA,KAAK,EAAEA,KAAK;AAAEkC,MAAAA,KAAK,EAAE,MAAA;AAAO,KAAC,CAAC,EAAEb,GAAI,CAACc,UAAU,EAAE;AAAE9B,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAC,CAAE,CAAA;AACxjB;;;;"}

package/dist/esm/fields/field-textarea.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useControl } from '@websolutespa/bom-mixer-forms';
+import { useLabel } from '@websolutespa/bom-mixer-hooks';
+import { useState } from 'react';
+import '../forms/autocomplete/autocomplete.js';
+import '../forms/autocomplete/autocomplete.variants.js';
+import '../forms/checkbox/checkbox.js';
+import '../forms/checkbox/checkbox.variants.js';
+import '../forms/custom-select/custom-select.js';
+import { Field } from '../forms/field/field.js';
+import '../forms/field/field.variants.js';
+import '../forms/form-error/form-error.js';
+import '../forms/form-error/form-error.variants.js';
+import '../forms/form-tester/form-tester.js';
+import '../forms/form-tester/form-tester.variants.js';
+import '../forms/form-tester/useFormTester.js';
+import '../forms/form/form.js';
+import '../forms/input-group/input-group.js';
+import '../forms/input/input.js';
+import '../forms/input/input.variants.js';
+import { Label } from '../forms/label/label.js';
+import '../forms/label/label.variants.js';
+import '../forms/radio-card/radio-card.js';
+import '../forms/radio-card/radio-card-base.js';
+import '../forms/radio-card/radio-card.variants.js';
+import '../forms/radio-color/radio-color.js';
+import '../forms/radio-color/radio-color-base.js';
+import '../forms/radio-color/radio-color.variants.js';
+import '../forms/radio-option/radio-option.js';
+import '../forms/radio-option/radio-option-base.js';
+import '../forms/radio-option/radio-option.variants.js';
+import '../forms/radio/radio.js';
+import '../forms/radio/radio-base.js';
+import '../forms/radio/radio.variants.js';
+import '../forms/rating/rating.js';
+import '../forms/rating/rating.variants.js';
+import '../forms/select/select.js';
+import '../forms/select/select.variants.js';
+import { TextArea } from '../forms/textarea/textarea.js';
+import '../forms/textarea/textarea.variants.js';
+import '../forms/utils/utils.js';
+import { FieldError } from './field-error.js';
+
+function FieldTextArea(_ref) {
+  let {
+    control,
+    uid = 0
+  } = _ref;
+  const label = useLabel();
+  const uniqueName = `${control.name}-${uid}`;
+  const [state, setValue, setTouched] = useControl(control);
+  const onChange = event => {
+    // console.log('FieldTextArea', event.target.value);
+    setValue(event.target.value);
+    // control.value = event.target.value;
+  };
+
+  const [focus, setFocus] = useState(false);
+  const onBlur = _ => {
+    setTouched();
+    setFocus(false);
+  };
+  const onFocus = _ => {
+    setFocus(true);
+  };
+  return state.flags.hidden ? jsx("input", {
+    type: "hidden",
+    value: state.value || ''
+  }) : jsxs(Field, {
+    state: state,
+    children: [jsx(Label, {
+      htmlFor: uniqueName,
+      children: control.label && label(control.label)
+    }), jsx(TextArea, {
+      id: uniqueName,
+      name: uniqueName,
+      placeholder: label(control.placeholder || control.label || ''),
+      value: state.value || '',
+      onChange: onChange,
+      onBlur: onBlur,
+      onFocus: onFocus,
+      disabled: state.flags.disabled,
+      readOnly: state.flags.readonly,
+      width: "100%"
+    }), jsx(FieldError, {
+      state: state
+    })]
+  });
+}
+
+export { FieldTextArea };
+//# sourceMappingURL=field-textarea.js.map

package/dist/esm/fields/field-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-textarea.js","sources":["../../../src/fields/field-textarea.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useControl } from '@websolutespa/bom-mixer-forms';\nimport { useLabel } from '@websolutespa/bom-mixer-hooks';\nimport { useState } from 'react';\nimport { Field, Label, TextArea } from '../forms';\nimport { FieldError } from './field-error';\nexport function FieldTextArea({ control, uid = 0 }) {\n    const label = useLabel();\n    const uniqueName = `${control.name}-${uid}`;\n    const [state, setValue, setTouched] = useControl(control);\n    const onChange = (event) => {\n        // console.log('FieldTextArea', event.target.value);\n        setValue(event.target.value);\n        // control.value = event.target.value;\n    };\n    const [focus, setFocus] = useState(false);\n    const onBlur = (_) => {\n        setTouched();\n        setFocus(false);\n    };\n    const onFocus = (_) => {\n        setFocus(true);\n    };\n    return (state.flags.hidden ? (_jsx(\"input\", { type: \"hidden\", value: state.value || '' })) : (_jsxs(Field, { state: state, children: [_jsx(Label, { htmlFor: uniqueName, children: control.label && label(control.label) }), _jsx(TextArea, { id: uniqueName, name: uniqueName, placeholder: label(control.placeholder || control.label || ''), value: state.value || '', onChange: onChange, onBlur: onBlur, onFocus: onFocus, disabled: state.flags.disabled, readOnly: state.flags.readonly, width: \"100%\" }), _jsx(FieldError, { state: state })] })));\n}\n//# sourceMappingURL=field-textarea.js.map"],"names":["FieldTextArea","_ref","control","uid","label","useLabel","uniqueName","name","state","setValue","setTouched","useControl","onChange","event","target","value","focus","setFocus","useState","onBlur","_","onFocus","flags","hidden","_jsx","type","_jsxs","Field","children","Label","htmlFor","TextArea","id","placeholder","disabled","readOnly","readonly","width","FieldError"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,SAASA,aAAaA,CAAAC,IAAA,EAAuB;EAAA,IAAtB;IAAEC,OAAO;AAAEC,IAAAA,GAAG,GAAG,CAAA;AAAE,GAAC,GAAAF,IAAA,CAAA;AAC9C,EAAA,MAAMG,KAAK,GAAGC,QAAQ,EAAE,CAAA;EACxB,MAAMC,UAAU,GAAI,CAAEJ,EAAAA,OAAO,CAACK,IAAK,CAAA,CAAA,EAAGJ,GAAI,CAAC,CAAA,CAAA;EAC3C,MAAM,CAACK,KAAK,EAAEC,QAAQ,EAAEC,UAAU,CAAC,GAAGC,UAAU,CAACT,OAAO,CAAC,CAAA;EACzD,MAAMU,QAAQ,GAAIC,KAAK,IAAK;AACxB;AACAJ,IAAAA,QAAQ,CAACI,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAA;AAC5B;GACH,CAAA;;EACD,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACzC,MAAMC,MAAM,GAAIC,CAAC,IAAK;AAClBV,IAAAA,UAAU,EAAE,CAAA;IACZO,QAAQ,CAAC,KAAK,CAAC,CAAA;GAClB,CAAA;EACD,MAAMI,OAAO,GAAID,CAAC,IAAK;IACnBH,QAAQ,CAAC,IAAI,CAAC,CAAA;GACjB,CAAA;EACD,OAAQT,KAAK,CAACc,KAAK,CAACC,MAAM,GAAIC,GAAI,CAAC,OAAO,EAAE;AAAEC,IAAAA,IAAI,EAAE,QAAQ;AAAEV,IAAAA,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,EAAA;AAAG,GAAC,CAAC,GAAKW,IAAK,CAACC,KAAK,EAAE;AAAEnB,IAAAA,KAAK,EAAEA,KAAK;AAAEoB,IAAAA,QAAQ,EAAE,CAACJ,GAAI,CAACK,KAAK,EAAE;AAAEC,MAAAA,OAAO,EAAExB,UAAU;MAAEsB,QAAQ,EAAE1B,OAAO,CAACE,KAAK,IAAIA,KAAK,CAACF,OAAO,CAACE,KAAK,CAAA;AAAE,KAAC,CAAC,EAAEoB,GAAI,CAACO,QAAQ,EAAE;AAAEC,MAAAA,EAAE,EAAE1B,UAAU;AAAEC,MAAAA,IAAI,EAAED,UAAU;AAAE2B,MAAAA,WAAW,EAAE7B,KAAK,CAACF,OAAO,CAAC+B,WAAW,IAAI/B,OAAO,CAACE,KAAK,IAAI,EAAE,CAAC;AAAEW,MAAAA,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,EAAE;AAAEH,MAAAA,QAAQ,EAAEA,QAAQ;AAAEO,MAAAA,MAAM,EAAEA,MAAM;AAAEE,MAAAA,OAAO,EAAEA,OAAO;AAAEa,MAAAA,QAAQ,EAAE1B,KAAK,CAACc,KAAK,CAACY,QAAQ;AAAEC,MAAAA,QAAQ,EAAE3B,KAAK,CAACc,KAAK,CAACc,QAAQ;AAAEC,MAAAA,KAAK,EAAE,MAAA;AAAO,KAAC,CAAC,EAAEb,GAAI,CAACc,UAAU,EAAE;AAAE9B,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAC,CAAE,CAAA;AAC7hB;;;;"}

package/dist/esm/fields/fields.js

@@ -6,6 +6,7 @@ import { FieldCheckbox } from './field-checkbox.js';
 import { FieldPassword } from './field-password.js';
 import { FieldSelect } from './field-select.js';
 import { FieldText } from './field-text.js';
+import { FieldTextArea } from './field-textarea.js';
 
 /*
   * Here we define the types of form fields.
@@ -15,6 +16,10 @@ const FIELDS = {
     control: control,
     uid: uid
   }, uid),
+  textarea: (control, uid) => jsx(FieldTextArea, {
+    control: control,
+    uid: uid
+  }, uid),
   password: (control, uid) => jsx(FieldPassword, {
     control: control,
     uid: uid

package/dist/esm/fields/fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"fields.js","sources":["../../../src/fields/fields.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { FieldAccept } from './field-accept';\nimport { FieldAutocomplete } from './field-autocomplete';\nimport { FieldCard } from './field-card';\nimport { FieldCheckbox } from './field-checkbox';\nimport { FieldPassword } from './field-password';\nimport { FieldSelect } from './field-select';\nimport { FieldText } from './field-text';\n/*\n  * Here we define the types of form fields.\n*/\nexport const FIELDS = {\n    text: (control, uid) => _jsx(FieldText, { control: control, uid: uid }, uid),\n    password: (control, uid) => _jsx(FieldPassword, { control: control, uid: uid }, uid),\n    select: (control, uid) => _jsx(FieldSelect, { control: control, uid: uid }, uid),\n    autocomplete: (control, uid) => _jsx(FieldAutocomplete, { control: control, uid: uid }, uid),\n    checkbox: (control, uid) => _jsx(FieldCheckbox, { control: control, uid: uid }, uid),\n    radio: (control, uid) => _jsx(FieldCheckbox, { control: control, uid: uid }, uid),\n    accept: (control, uid) => _jsx(FieldAccept, { control: control, uid: uid }, uid),\n    card: (control, uid) => _jsx(FieldCard, { control: control, uid: uid }, uid),\n};\n//# sourceMappingURL=fields.js.map"],"names":["FIELDS","text","control","uid","_jsx","FieldText","password","FieldPassword","select","FieldSelect","autocomplete","FieldAutocomplete","checkbox","FieldCheckbox","radio","accept","FieldAccept","card","FieldCard"],"mappings":";;;;;;;;;AAQA;AACA;AACA;AACO,MAAMA,MAAM,GAAG;EAClBC,IAAI,EAAEA,CAACC,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACC,SAAS,EAAE;AAAEH,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EAC5EG,QAAQ,EAAEA,CAACJ,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACG,aAAa,EAAE;AAAEL,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EACpFK,MAAM,EAAEA,CAACN,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACK,WAAW,EAAE;AAAEP,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EAChFO,YAAY,EAAEA,CAACR,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACO,iBAAiB,EAAE;AAAET,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EAC5FS,QAAQ,EAAEA,CAACV,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACS,aAAa,EAAE;AAAEX,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EACpFW,KAAK,EAAEA,CAACZ,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACS,aAAa,EAAE;AAAEX,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EACjFY,MAAM,EAAEA,CAACb,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACY,WAAW,EAAE;AAAEd,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EAChFc,IAAI,EAAEA,CAACf,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACc,SAAS,EAAE;AAAEhB,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAC,EAAEA,GAAG,CAAA;AAC/E;;;;"}
+{"version":3,"file":"fields.js","sources":["../../../src/fields/fields.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { FieldAccept } from './field-accept';\nimport { FieldAutocomplete } from './field-autocomplete';\nimport { FieldCard } from './field-card';\nimport { FieldCheckbox } from './field-checkbox';\nimport { FieldPassword } from './field-password';\nimport { FieldSelect } from './field-select';\nimport { FieldText } from './field-text';\nimport { FieldTextArea } from './field-textarea';\n/*\n  * Here we define the types of form fields.\n*/\nexport const FIELDS = {\n    text: (control, uid) => _jsx(FieldText, { control: control, uid: uid }, uid),\n    textarea: (control, uid) => _jsx(FieldTextArea, { control: control, uid: uid }, uid),\n    password: (control, uid) => _jsx(FieldPassword, { control: control, uid: uid }, uid),\n    select: (control, uid) => _jsx(FieldSelect, { control: control, uid: uid }, uid),\n    autocomplete: (control, uid) => _jsx(FieldAutocomplete, { control: control, uid: uid }, uid),\n    checkbox: (control, uid) => _jsx(FieldCheckbox, { control: control, uid: uid }, uid),\n    radio: (control, uid) => _jsx(FieldCheckbox, { control: control, uid: uid }, uid),\n    accept: (control, uid) => _jsx(FieldAccept, { control: control, uid: uid }, uid),\n    card: (control, uid) => _jsx(FieldCard, { control: control, uid: uid }, uid),\n};\n//# sourceMappingURL=fields.js.map"],"names":["FIELDS","text","control","uid","_jsx","FieldText","textarea","FieldTextArea","password","FieldPassword","select","FieldSelect","autocomplete","FieldAutocomplete","checkbox","FieldCheckbox","radio","accept","FieldAccept","card","FieldCard"],"mappings":";;;;;;;;;;AASA;AACA;AACA;AACO,MAAMA,MAAM,GAAG;EAClBC,IAAI,EAAEA,CAACC,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACC,SAAS,EAAE;AAAEH,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EAC5EG,QAAQ,EAAEA,CAACJ,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACG,aAAa,EAAE;AAAEL,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EACpFK,QAAQ,EAAEA,CAACN,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACK,aAAa,EAAE;AAAEP,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EACpFO,MAAM,EAAEA,CAACR,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACO,WAAW,EAAE;AAAET,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EAChFS,YAAY,EAAEA,CAACV,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACS,iBAAiB,EAAE;AAAEX,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EAC5FW,QAAQ,EAAEA,CAACZ,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACW,aAAa,EAAE;AAAEb,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EACpFa,KAAK,EAAEA,CAACd,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACW,aAAa,EAAE;AAAEb,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EACjFc,MAAM,EAAEA,CAACf,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACc,WAAW,EAAE;AAAEhB,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;GAAK,EAAEA,GAAG,CAAC;EAChFgB,IAAI,EAAEA,CAACjB,OAAO,EAAEC,GAAG,KAAKC,GAAI,CAACgB,SAAS,EAAE;AAAElB,IAAAA,OAAO,EAAEA,OAAO;AAAEC,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAC,EAAEA,GAAG,CAAA;AAC/E;;;;"}

package/dist/esm/forms/autocomplete/autocomplete.js

@@ -12,9 +12,10 @@ import { autocompleteHighligth } from './autocomplete-highlight.js';
 const StyledAutocompleteItem = styled.div`
   display: block;
   width: 100%;
-  padding: var(--form-padding);
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
+  padding: var(--form-control-padding);
+  font-size: var(--form-control-font-size);
+  font-weight: var(--form-control-font-weight);
+  line-height: var(--form-control-line-height);
   color: inherit;
   background-color: transparent;
   border-color: var(--color-neutral-200);
@@ -59,8 +60,8 @@ const StyledAutocompleteContainer = styled.div`
   &>.button {
     line-height: inherit;
     font-size: inherit;
-    padding-top: var(--form-padding);
-    padding-bottom: var(--form-padding);
+    padding-top: var(--form-control-padding);
+    padding-bottom: var(--form-control-padding);
     margin: -2px;
   }
 
@@ -81,16 +82,17 @@ const StyledAutocompleteContainer = styled.div`
 const StyledAutocomplete = styled.div`
   display: block;
   appearance: none;
-  padding: var(--form-padding);
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
+  padding: var(--form-control-padding);
+  font-size: var(--form-control-font-size);
+  font-weight: var(--form-control-font-weight);
+  line-height: var(--form-control-line-height);
   color: inherit;
   background-color: transparent;
   border: none;
   outline: none;
 
   &:not(:first-child) {
-    padding-left: calc(var(--form-padding) * 0.5);
+    padding-left: calc(var(--form-control-padding) * 0.5);
   }
 
   ${props => getCssResponsive(props)}
@@ -105,9 +107,11 @@ const Autocomplete = /*#__PURE__*/forwardRef((_a, ref) => {
       onFocus,
       onBlur,
       onDropdownVisibleChange = () => {},
-      onAutocomplete
+      onAutocomplete,
+      id,
+      name
     } = _a,
-    props = __rest(_a, ["className", "initialValue", "before", "after", "source", "onFocus", "onBlur", "onDropdownVisibleChange", "onAutocomplete"]);
+    props = __rest(_a, ["className", "initialValue", "before", "after", "source", "onFocus", "onBlur", "onDropdownVisibleChange", "onAutocomplete", "id", "name"]);
   const innerRef = useRef(null);
   const dropdownRef = useRef(null);
   useImperativeHandle(ref, () => innerRef.current);
@@ -191,6 +195,8 @@ const Autocomplete = /*#__PURE__*/forwardRef((_a, ref) => {
           ref: innerRef,
           as: "input",
           type: "text",
+          id: id,
+          name: name,
           onFocus: onFocus_,
           onBlur: onBlur_,
           onChange: onChange_