@consumidor-positivo/aurora 0.0.87 → 0.0.89

package/dist/components/Checkbox/index.es.js

@@ -3,7 +3,7 @@ import $dbSRa$react__default, { useState, useEffect } from "react";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import "../Icon/index.es.js";
 import { IconCheck } from "../icons/IconCheck/index.es.js";
-import { F as Field } from "../../index-DfksciAR.js";
+import { F as Field } from "../../index-ZE6zszxw.js";
 import { m as COLOR_NEUTRAL_00 } from "../../tokens-DEqeZ57l.js";
 import { Conditional } from "../Conditional/index.es.js";
 import { Text } from "../Text/index.es.js";

package/dist/components/Group/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
-import { F as Field } from "../../index-DfksciAR.js";
+import { F as Field } from "../../index-ZE6zszxw.js";
 import { Conditional } from "../Conditional/index.es.js";
 import { Text } from "../Text/index.es.js";
 import $dbSRa$react__default, { useState } from "react";

package/dist/components/InputField/index.es.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { F as Field } from "../../index-DfksciAR.js";
+import { F as Field } from "../../index-ZE6zszxw.js";
 const InputField = ({
-  optional,
+  showOptionalLabel,
   requiredInput,
   success,
   error,
   errorMessage,
+  helpMessage,
   label,
   id,
   disabled,
@@ -30,8 +31,8 @@ const InputField = ({
           {
             text: label,
             id,
+            showOptionalLabel,
             required: requiredInput,
-            optional,
             success,
             error,
             disabled
@@ -47,7 +48,7 @@ const InputField = ({
             ...props
           }
         ) }),
-        /* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: !!error, message: errorMessage })
+        /* @__PURE__ */ jsx(Field.Message, { hasError: !!error, errorMessage, helpMessage })
       ]
     }
   );

package/dist/components/InputField/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/InputField/index.tsx"],"sourcesContent":["import Field from '../Field'\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  optional?: boolean\n  requiredInput?: boolean\n  success?: boolean\n  error?: boolean\n  errorMessage?: string\n  rightSlot?: React.ReactNode\n  label?: string\n  inputStyle?: React.CSSProperties\n  inputRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const InputField = ({\n  optional,\n  requiredInput,\n  success,\n  error,\n  errorMessage,\n  label,\n  id,\n  disabled,\n  style,\n  className,\n  inputStyle,\n  rightSlot,\n  inputRef,\n  ...props\n}: InputProps) => {\n\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        id={id}\n        required={requiredInput}\n        optional={optional}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <Field.InputHolder rightSideSlot={rightSlot}>\n        <Field.Input\n          id={id}\n          inputRef={inputRef}\n          disabled={disabled}\n          style={inputStyle}\n          {...props}\n        />\n      </Field.InputHolder>\n      <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;AAcO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AAGd,SAAA;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACC,oBAAA,MAAM,aAAN,EAAkB,eAAe,WAChC,UAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACN,GAAG;AAAA,UAAA;AAAA,QAAA,GAER;AAAA,QACA,oBAAC,MAAM,cAAN,EAAmB,UAAU,CAAC,CAAC,OAAO,SAAS,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpE;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/InputField/index.tsx"],"sourcesContent":["import Field from '../Field'\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  showOptionalLabel?: boolean\n  requiredInput?: boolean\n  success?: boolean\n  error?: boolean\n  errorMessage?: string\n  helpMessage?: string\n  rightSlot?: React.ReactNode\n  label?: string\n  inputStyle?: React.CSSProperties\n  inputRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const InputField = ({\n  showOptionalLabel,\n  requiredInput,\n  success,\n  error,\n  errorMessage,\n  helpMessage,\n  label,\n  id,\n  disabled,\n  style,\n  className,\n  inputStyle,\n  rightSlot,\n  inputRef,\n  ...props\n}: InputProps) => {\n\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        id={id}\n        showOptionalLabel={showOptionalLabel}\n        required={requiredInput}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <Field.InputHolder rightSideSlot={rightSlot}>\n        <Field.Input\n          id={id}\n          inputRef={inputRef}\n          disabled={disabled}\n          style={inputStyle}\n          {...props}\n        />\n      </Field.InputHolder>\n      <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;AAeO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AAGd,SAAA;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACC,oBAAA,MAAM,aAAN,EAAkB,eAAe,WAChC,UAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACN,GAAG;AAAA,UAAA;AAAA,QAAA,GAER;AAAA,QACA,oBAAC,MAAM,SAAN,EAAc,UAAU,CAAC,CAAC,OAAO,cAA4B,aAA0B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9F;"}

package/dist/components/Label/index.es.js

@@ -9,14 +9,13 @@ const FieldLabel = ({
   id,
   text,
   required,
-  optional,
   success,
   error,
-  disabled
+  disabled,
+  showOptionalLabel = true
 }) => {
   if (!text) return null;
   const states = [
-    { state: "optional", value: !!optional, icon: /* @__PURE__ */ jsx("span", { children: "(Opcional)" }) },
     {
       state: "success",
       value: !!success,
@@ -38,7 +37,8 @@ const FieldLabel = ({
     /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "au-field__header-label", children: [
       text,
       " ",
-      required && /* @__PURE__ */ jsx("strong", { className: "au-field__header-label--required", children: "*" })
+      showOptionalLabel && !required && /* @__PURE__ */ jsx("span", { className: "au-field__header-label--optional", children: "(Opcional)" }),
+      !showOptionalLabel && required && /* @__PURE__ */ jsx("strong", { className: "au-field__header-label--required", children: "*" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "au-field__header-icon", children: currentState == null ? void 0 : currentState.icon })
   ] });

package/dist/components/Label/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Field/Label/index.tsx"],"sourcesContent":["import { IconAlertOctagon, IconCheck, IconSlash } from '@components/icons'\nimport {\n  COLOR_ERROR_50,\n  COLOR_NEUTRAL_40,\n  COLOR_SUCCESS_50,\n} from '@core/tokens'\n\ntype FieldLabelProps = {\n  id?: string\n  text?: string\n  required?: boolean\n  optional?: boolean\n  success?: boolean\n  error?: boolean\n  disabled?: boolean\n}\n\nexport const FieldLabel = ({\n  id,\n  text,\n  required,\n  optional,\n  success,\n  error,\n  disabled,\n}: FieldLabelProps) => {\n  if (!text) return null\n\n  const states = [\n    { state: 'optional', value: !!optional, icon: <span>(Opcional)</span> },\n    {\n      state: 'success',\n      value: !!success,\n      icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n    },\n    {\n      state: 'error',\n      value: !!error,\n      icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n    },\n    {\n      state: 'disabled',\n      value: !!disabled,\n      icon: <IconSlash rawColor={COLOR_NEUTRAL_40} />,\n    },\n  ]\n\n  const currentState = states.find(({ value }) => !!value)\n\n  return (\n    <div className=\"au-field__header\">\n      <label htmlFor={id} className=\"au-field__header-label\">\n        {text}{' '}\n        {required && (\n          <strong className=\"au-field__header-label--required\">*</strong>\n        )}\n      </label>\n      <div className=\"au-field__header-icon\">{currentState?.icon}</div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACjB,MAAA,CAAC,KAAa,QAAA;AAElB,QAAM,SAAS;AAAA,IACb,EAAE,OAAO,YAAY,OAAO,CAAC,CAAC,UAAU,MAAM,oBAAC,QAAK,EAAA,UAAA,aAAU,CAAA,EAAQ;AAAA,IACtE;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,kBAAiB,EAAA,UAAU,eAAgB,CAAA;AAAA,IACpD;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,EAAA;AAGI,QAAA,eAAe,OAAO,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,KAAK;AAGrD,SAAA,qBAAC,OAAI,EAAA,WAAU,oBACb,UAAA;AAAA,IAAA,qBAAC,SAAM,EAAA,SAAS,IAAI,WAAU,0BAC3B,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MACN,YACC,oBAAC,UAAO,EAAA,WAAU,oCAAmC,UAAC,KAAA;AAAA,IAAA,GAE1D;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,yBAAyB,uDAAc,MAAK;AAAA,EAC7D,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Field/Label/index.tsx"],"sourcesContent":["import { IconAlertOctagon, IconCheck, IconSlash } from '@components/icons'\nimport {\n  COLOR_ERROR_50,\n  COLOR_NEUTRAL_40,\n  COLOR_SUCCESS_50,\n} from '@core/tokens'\n\ntype FieldLabelProps = {\n  id?: string\n  text?: string\n  required?: boolean\n  success?: boolean\n  error?: boolean\n  disabled?: boolean\n  showOptionalLabel?: boolean\n}\n\nexport const FieldLabel = ({\n  id,\n  text,\n  required,\n  success,\n  error,\n  disabled,\n  showOptionalLabel = true,\n}: FieldLabelProps) => {\n  if (!text) return null\n\n  const states = [\n    {\n      state: 'success',\n      value: !!success,\n      icon: <IconCheck rawColor={COLOR_SUCCESS_50} />,\n    },\n    {\n      state: 'error',\n      value: !!error,\n      icon: <IconAlertOctagon rawColor={COLOR_ERROR_50} />,\n    },\n    {\n      state: 'disabled',\n      value: !!disabled,\n      icon: <IconSlash rawColor={COLOR_NEUTRAL_40} />,\n    },\n  ]\n\n  const currentState = states.find(({ value }) => !!value)\n\n  return (\n    <div className=\"au-field__header\">\n      <label htmlFor={id} className=\"au-field__header-label\">\n        {text}{' '}\n        {showOptionalLabel && !required && (\n          <span className=\"au-field__header-label--optional\">(Opcional)</span>\n        )}\n        {!showOptionalLabel && required && (\n          <strong className=\"au-field__header-label--required\">*</strong>\n        )}\n      </label>\n      <div className=\"au-field__header-icon\">{currentState?.icon}</div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACtB,MAAuB;AACjB,MAAA,CAAC,KAAa,QAAA;AAElB,QAAM,SAAS;AAAA,IACb;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,kBAAiB,EAAA,UAAU,eAAgB,CAAA;AAAA,IACpD;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO,CAAC,CAAC;AAAA,MACT,MAAM,oBAAC,WAAU,EAAA,UAAU,iBAAkB,CAAA;AAAA,IAC/C;AAAA,EAAA;AAGI,QAAA,eAAe,OAAO,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,KAAK;AAGrD,SAAA,qBAAC,OAAI,EAAA,WAAU,oBACb,UAAA;AAAA,IAAA,qBAAC,SAAM,EAAA,SAAS,IAAI,WAAU,0BAC3B,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MACN,qBAAqB,CAAC,gCACpB,QAAK,EAAA,WAAU,oCAAmC,UAAU,cAAA;AAAA,MAE9D,CAAC,qBAAqB,gCACpB,UAAO,EAAA,WAAU,oCAAmC,UAAC,KAAA;AAAA,IAAA,GAE1D;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,yBAAyB,uDAAc,MAAK;AAAA,EAC7D,EAAA,CAAA;AAEJ;"}

package/dist/components/Message/index.es.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+const FieldMessage = ({ hasError, errorMessage, helpMessage }) => {
+  if (hasError && errorMessage) {
+    return /* @__PURE__ */ jsx("p", { className: "au-field__message au-field__message--error", children: errorMessage });
+  }
+  if (helpMessage) {
+    return /* @__PURE__ */ jsx("p", { className: "au-field__message", children: helpMessage });
+  }
+  return null;
+};
+export {
+  FieldMessage
+};
+//# sourceMappingURL=index.es.js.map

package/dist/components/Message/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Field/Message/index.tsx"],"sourcesContent":["type FieldMessageProps = {\n  hasError?: boolean\n  errorMessage?: string\n  helpMessage?: string\n}\n\nexport const FieldMessage = ({ hasError, errorMessage, helpMessage }: FieldMessageProps) => {\n  if (hasError && errorMessage) {\n    return <p className=\"au-field__message au-field__message--error\">{errorMessage}</p>\n  }\n\n  if (helpMessage) {\n    return <p className=\"au-field__message\">{helpMessage}</p>\n  }\n\n  return null\n}\n"],"names":[],"mappings":";AAMO,MAAM,eAAe,CAAC,EAAE,UAAU,cAAc,kBAAqC;AAC1F,MAAI,YAAY,cAAc;AAC5B,WAAQ,oBAAA,KAAA,EAAE,WAAU,8CAA8C,UAAa,aAAA,CAAA;AAAA,EACjF;AAEA,MAAI,aAAa;AACf,WAAQ,oBAAA,KAAA,EAAE,WAAU,qBAAqB,UAAY,YAAA,CAAA;AAAA,EACvD;AAEO,SAAA;AACT;"}

package/dist/components/PasswordField/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { F as Field } from "../../index-DfksciAR.js";
+import { F as Field } from "../../index-ZE6zszxw.js";
 import { useState } from "react";
 import './styles.css';const usePasswordField = () => {
   const [showPassword, setShowPassword] = useState(false);
@@ -15,7 +15,7 @@ import './styles.css';const usePasswordField = () => {
   };
 };
 const PasswordField = ({
-  optional,
+  showOptionalLabel,
   requiredInput,
   success,
   error,
@@ -44,7 +44,7 @@ const PasswordField = ({
             text: label,
             id,
             required: requiredInput,
-            optional,
+            showOptionalLabel,
             success,
             error,
             disabled

package/dist/components/PasswordField/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/PasswordField/hook.tsx","../../../lib/components/form/PasswordField/index.tsx"],"sourcesContent":["import { useState } from 'react'\n\nexport const usePasswordField = () => {\n  const [showPassword, setShowPassword] = useState<boolean>(false)\n  const fieldType = showPassword ? 'text' : 'password'\n  const textButton = showPassword ? 'ocultar' : 'mostrar'\n\n  function changeVisibility() {\n    setShowPassword((prevState) => !prevState)\n  }\n\n  return {\n    fieldType,\n    textButton,\n    changeVisibility,\n  }\n}\n","import Field from '../Field'\nimport { usePasswordField } from './hook'\nimport './styles.scss'\n\ntype PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  type?: 'password'\n  optional?: boolean\n  requiredInput?: boolean\n  success?: boolean\n  error?: boolean\n  errorMessage?: string\n  label?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const PasswordField = ({\n  optional,\n  requiredInput,\n  success,\n  error,\n  errorMessage,\n  label,\n  inputRef,\n  id,\n  disabled,\n  style,\n  className,\n  ...props\n}: PasswordFieldProps) => {\n  const { fieldType, textButton, changeVisibility } = usePasswordField()\n\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        id={id}\n        required={requiredInput}\n        optional={optional}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <div className=\"au-password-field__container\">\n        <Field.Input\n          customclass=\"au-password-field__input\"\n          type={fieldType}\n          id={id}\n          inputRef={inputRef}\n          disabled={disabled}\n          {...props}\n        />\n        <button\n          className=\"au-password-field__btn\"\n          onClick={changeVisibility}\n          disabled={disabled}>\n          {textButton}\n        </button>\n      </div>\n      <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AACzD,QAAA,YAAY,eAAe,SAAS;AACpC,QAAA,aAAa,eAAe,YAAY;AAE9C,WAAS,mBAAmB;AACV,oBAAA,CAAC,cAAc,CAAC,SAAS;AAAA,EAC3C;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;ACDO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,WAAW,YAAY,qBAAqB,iBAAiB;AAGnE,SAAA;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,qBAAC,OAAI,EAAA,WAAU,gCACb,UAAA;AAAA,UAAA;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACC,aAAY;AAAA,cACZ,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cACT;AAAA,cACC,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,MAAM,cAAN,EAAmB,UAAU,CAAC,CAAC,OAAO,SAAS,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpE;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/PasswordField/hook.tsx","../../../lib/components/form/PasswordField/index.tsx"],"sourcesContent":["import { useState } from 'react'\n\nexport const usePasswordField = () => {\n  const [showPassword, setShowPassword] = useState<boolean>(false)\n  const fieldType = showPassword ? 'text' : 'password'\n  const textButton = showPassword ? 'ocultar' : 'mostrar'\n\n  function changeVisibility() {\n    setShowPassword((prevState) => !prevState)\n  }\n\n  return {\n    fieldType,\n    textButton,\n    changeVisibility,\n  }\n}\n","import Field from '../Field'\nimport { usePasswordField } from './hook'\nimport './styles.scss'\n\ntype PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  type?: 'password'\n  showOptionalLabel?: boolean\n  requiredInput?: boolean\n  success?: boolean\n  error?: boolean\n  errorMessage?: string\n  label?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n}\n\nexport const PasswordField = ({\n  showOptionalLabel,\n  requiredInput,\n  success,\n  error,\n  errorMessage,\n  label,\n  inputRef,\n  id,\n  disabled,\n  style,\n  className,\n  ...props\n}: PasswordFieldProps) => {\n  const { fieldType, textButton, changeVisibility } = usePasswordField()\n\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        id={id}\n        required={requiredInput}\n        showOptionalLabel={showOptionalLabel}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <div className=\"au-password-field__container\">\n        <Field.Input\n          customclass=\"au-password-field__input\"\n          type={fieldType}\n          id={id}\n          inputRef={inputRef}\n          disabled={disabled}\n          {...props}\n        />\n        <button\n          className=\"au-password-field__btn\"\n          onClick={changeVisibility}\n          disabled={disabled}>\n          {textButton}\n        </button>\n      </div>\n      <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AACzD,QAAA,YAAY,eAAe,SAAS;AACpC,QAAA,aAAa,eAAe,YAAY;AAE9C,WAAS,mBAAmB;AACV,oBAAA,CAAC,cAAc,CAAC,SAAS;AAAA,EAC3C;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;ACDO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,EAAE,WAAW,YAAY,qBAAqB,iBAAiB;AAGnE,SAAA;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA,qBAAC,OAAI,EAAA,WAAU,gCACb,UAAA;AAAA,UAAA;AAAA,YAAC,MAAM;AAAA,YAAN;AAAA,cACC,aAAY;AAAA,cACZ,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS;AAAA,cACT;AAAA,cACC,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,MAAM,cAAN,EAAmB,UAAU,CAAC,CAAC,OAAO,SAAS,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpE;"}

package/dist/components/SelectField/index.es.js

@@ -4,7 +4,7 @@ import "../Icon/index.es.js";
 import { IconCheck } from "../icons/IconCheck/index.es.js";
 import { IconChevronDown } from "../icons/IconChevronDown/index.es.js";
 import { IconSlash } from "../icons/IconSlash/index.es.js";
-import { F as Field } from "../../index-DfksciAR.js";
+import { F as Field } from "../../index-ZE6zszxw.js";
 import { useState, useRef, useEffect } from "react";
 import './styles.css';const useSelectField = (options, initialValue, onChange, disabled, register, autocomplete = false) => {
   var _a;
@@ -182,9 +182,10 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, d
 const SelectField = ({
   label,
   options,
-  optional,
+  showOptionalLabel,
   error,
   errorMessage,
+  helpMessage,
   disabled,
   required,
   value,
@@ -233,7 +234,7 @@ const SelectField = ({
           Field.Label,
           {
             text: label,
-            optional,
+            showOptionalLabel,
             required,
             error,
             disabled
@@ -292,7 +293,7 @@ const SelectField = ({
                   role: "option",
                   "aria-selected": option.value === selectedOption.value,
                   "aria-disabled": option.disabled,
-                  onClick: () => selectOption(option.value, option.disabled),
+                  onPointerUp: () => selectOption(option.value, option.disabled),
                   onMouseEnter: () => setActiveOptionIndex(index),
                   children: [
                     option.label,
@@ -317,7 +318,7 @@ const SelectField = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: !!error, message: errorMessage })
+        /* @__PURE__ */ jsx(Field.Message, { hasError: !!error, errorMessage, helpMessage })
       ]
     }
   );

package/dist/components/SelectField/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\nimport { OptionProps } from './types'\n\nexport const useSelectField = (\n  options: OptionProps[],\n  initialValue?: string,\n  onChange?: (value: string) => void,\n  disabled?: boolean,\n  register?: (instance: HTMLSelectElement | null) => void,\n  autocomplete: boolean = false,\n) => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n  const [selectedOption, setSelectedOption] = useState<OptionProps>({\n    value: initialValue || '',\n    label: initialValue\n      ? options.find((option) => option.value === initialValue)?.label || ''\n      : '',\n  })\n  const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n    null,\n  )\n  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number>(0)\n  const selectRef = useRef<HTMLDivElement>(null)\n  const selectElementRef = useRef<HTMLSelectElement>(null)\n  const [searchValue, setSearchValue] = useState<string>('')\n  const activeOptionRef = useRef<HTMLLIElement | null>(null)\n\n  const filteredOptions = autocomplete\n    ? options.filter((option) =>\n        option.label.toLowerCase().includes(searchValue.toLowerCase()),\n      )\n    : options\n\n  useEffect(() => {\n    if (initialValue) {\n      const option = options.find((option) => option.value === initialValue)\n      if (option) {\n        setSelectedOption({ value: option.value, label: option.label })\n      }\n    }\n  }, [initialValue, options])\n\n  useEffect(() => {\n    if (register && selectElementRef.current) {\n      register(selectElementRef.current)\n    }\n  }, [register])\n\n  useEffect(() => {\n    if (activeOptionRef.current) {\n      activeOptionRef.current.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      })\n    }\n  }, [activeOptionIndex])\n\n  useEffect(() => {\n    const handleClickOutside = (event: PointerEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setIsDropdownOpen(false)\n      }\n    }\n\n    if (isDropdownOpen) {\n      document.addEventListener('pointerup', handleClickOutside)\n    } else {\n      document.removeEventListener('pointerup', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('pointerup', handleClickOutside)\n    }\n  }, [isDropdownOpen])\n\n  const toggleDropdown = () => {\n    if (!isDropdownOpen && selectRef.current) {\n      const { bottom } = selectRef.current.getBoundingClientRect()\n      let totalPadding = 0\n      let parentElement: HTMLElement | null = selectRef.current.parentElement\n\n      while (parentElement) {\n        const parentPaddingBottom = parseFloat(\n          window.getComputedStyle(parentElement).paddingBottom || '0',\n        )\n        totalPadding += parentPaddingBottom\n        parentElement = parentElement.parentElement\n      }\n\n      const availableSpaceBelow = window.innerHeight - bottom - totalPadding\n      const minDropdownHeight = 212\n      const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight)\n\n      setDropdownMaxHeight(calculatedHeight)\n    }\n\n    setIsDropdownOpen((prev) => {\n      if (!prev) {\n        const selectedIndex = options.findIndex(\n          (option) => option.value === selectedOption.value,\n        )\n        setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null)\n      }\n      return !prev\n    })\n  }\n\n  const _findNextAvailableIndex = (\n    currentIndex: number,\n    direction: 'down' | 'up',\n  ) => {\n    const step = direction === 'down' ? 1 : -1\n    let nextIndex =\n      (currentIndex + step + filteredOptions.length) % filteredOptions.length\n\n    while (filteredOptions[nextIndex]?.disabled) {\n      nextIndex =\n        (nextIndex + step + filteredOptions.length) % filteredOptions.length\n    }\n\n    return nextIndex\n  }\n\n  const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return\n\n    const _actions: Record<string, () => void> = {\n      Enter: () => {\n        if (!isDropdownOpen) {\n          toggleDropdown()\n          return\n        }\n        if (\n          activeOptionIndex !== null &&\n          !filteredOptions[activeOptionIndex].disabled\n        ) {\n          e.preventDefault()\n          selectOption(\n            filteredOptions[activeOptionIndex].value,\n            filteredOptions[activeOptionIndex].disabled,\n          )\n        }\n      },\n      ArrowDown: () => {\n        e.preventDefault()\n        setActiveOptionIndex((prev) =>\n          _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n        )\n        if (!isDropdownOpen) toggleDropdown()\n      },\n      ArrowUp: () => {\n        e.preventDefault()\n        setActiveOptionIndex((prev) =>\n          _findNextAvailableIndex(\n            prev !== null ? prev : filteredOptions.length,\n            'up',\n          ),\n        )\n        if (!isDropdownOpen) toggleDropdown()\n      },\n      Escape: () => {\n        setIsDropdownOpen(false)\n      },\n    }\n\n    if (_actions[e.key]) {\n      _actions[e.key]()\n    }\n  }\n\n  const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n    if (optionDisabled) return\n\n    const option = options.find((option) => option.value === optionValue)\n    if (option) {\n      setSelectedOption({ value: option.value, label: option.label })\n    }\n\n    setActiveOptionIndex(null)\n    setIsDropdownOpen(false)\n    setSearchValue('')\n    if (onChange) {\n      onChange(optionValue)\n    }\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value\n    setSearchValue(value)\n\n    if (value === '') {\n      setSelectedOption({ value: '', label: '' })\n    }\n\n    if (!isDropdownOpen) {\n      setIsDropdownOpen(true)\n    }\n  }\n\n  return {\n    isDropdownOpen,\n    selectRef,\n    activeOptionRef,\n    selectElementRef,\n    toggleDropdown,\n    selectOption,\n    onKeyDownDropdown,\n    setActiveOptionIndex,\n    activeOptionIndex,\n    filteredOptions,\n    searchValue,\n    setSearchValue,\n    handleInputChange,\n    dropdownMaxHeight,\n    selectedOption,\n    setSelectedOption,\n  }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconSlash, IconCheck } from '@components/icons'\nimport Field from '../Field'\nimport { SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n  label,\n  options,\n  optional,\n  error,\n  errorMessage,\n  disabled,\n  required,\n  value,\n  onChange,\n  style,\n  className,\n  placeholder,\n  name,\n  register,\n  onBlur,\n  autocomplete = false,\n  EmptyText = 'Nada encontrado',\n}: SelectFieldProps) => {\n  const {\n    isDropdownOpen,\n    selectRef,\n    selectElementRef,\n    activeOptionRef,\n    toggleDropdown,\n    selectOption,\n    onKeyDownDropdown,\n    setActiveOptionIndex,\n    activeOptionIndex,\n    filteredOptions,\n    searchValue,\n    selectedOption,\n    handleInputChange,\n    dropdownMaxHeight,\n  } = useSelectField(options, value, onChange, disabled, register, autocomplete)\n\n  const dropdownClasses = classNames('au-field__select', {\n    'au-field__select--disabled': disabled,\n    'au-field__select--open': isDropdownOpen,\n    'au-field__select--required': required,\n    'au-field__select--error': error,\n    [className!]: className,\n  })\n\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        optional={optional}\n        required={required}\n        error={error}\n        disabled={disabled}\n      />\n      <div className={dropdownClasses}>\n        <div\n          className=\"au-field__select-wrapper\"\n          onClick={toggleDropdown}\n          onKeyDown={onKeyDownDropdown}\n          tabIndex={disabled ? -1 : 0}\n          ref={selectRef}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={isDropdownOpen}\n          aria-labelledby=\"select-label\"\n          aria-activedescendant={\n            activeOptionIndex !== null && filteredOptions[activeOptionIndex]\n              ? filteredOptions[activeOptionIndex].value\n              : undefined\n          }\n          onBlur={onBlur}>\n          <input\n            className=\"au-field__select-input\"\n            value={searchValue || selectedOption.label}\n            placeholder={placeholder || 'Selecionar...'}\n            onChange={handleInputChange}\n            readOnly={!autocomplete}\n            disabled={disabled}\n          />\n          <div className=\"au-field__select-icon\">\n            <IconChevronDown />\n          </div>\n        </div>\n        <ul\n          className={classNames('au-field__select-options', {\n            'au-field__select-options--open': isDropdownOpen,\n          })}\n          role=\"listbox\"\n          aria-live=\"polite\"\n          tabIndex={-1}\n          style={{ maxHeight: `${dropdownMaxHeight}px`, overflowY: 'auto' }}>\n          {filteredOptions.length === 0 ? (\n            <li className=\"au-field__select-option au-field__select-option--empty\">\n              {EmptyText}\n            </li>\n          ) : (\n            filteredOptions.map((option, index) => (\n              <li\n                key={index}\n                className={classNames('au-field__select-option', {\n                  'au-field__select-option--highlighted':\n                    activeOptionIndex === index,\n                  'au-field__select-option--selected':\n                    option.value === selectedOption.value,\n                  'au-field__select-option--disabled': option.disabled,\n                })}\n                ref={activeOptionIndex === index ? activeOptionRef : null}\n                role=\"option\"\n                aria-selected={option.value === selectedOption.value}\n                aria-disabled={option.disabled}\n                onClick={() => selectOption(option.value, option.disabled)}\n                onMouseEnter={() => setActiveOptionIndex(index)}>\n                {option.label}\n                {option.disabled ? (\n                  <IconSlash />\n                ) : option.value === selectedOption.value ? (\n                  <IconCheck />\n                ) : null}\n              </li>\n            ))\n          )}\n        </ul>\n\n        <select\n          hidden\n          disabled={disabled}\n          value={selectedOption.value}\n          onChange={(e) => selectOption(e.target.value)}\n          ref={selectElementRef}\n          name={name}\n          onBlur={onBlur}>\n          {options.map((option, index) => (\n            <option key={index} value={option.value}>\n              {option.label}\n            </option>\n          ))}\n        </select>\n      </div>\n      <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n    </Field.Root>\n  )\n}\n"],"names":["option","_a"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/SelectField/hook.ts","../../../lib/components/form/SelectField/index.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react'\nimport { OptionProps } from './types'\n\nexport const useSelectField = (\n  options: OptionProps[],\n  initialValue?: string,\n  onChange?: (value: string) => void,\n  disabled?: boolean,\n  register?: (instance: HTMLSelectElement | null) => void,\n  autocomplete: boolean = false,\n) => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false)\n  const [selectedOption, setSelectedOption] = useState<OptionProps>({\n    value: initialValue || '',\n    label: initialValue\n      ? options.find((option) => option.value === initialValue)?.label || ''\n      : '',\n  })\n  const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(\n    null,\n  )\n  const [dropdownMaxHeight, setDropdownMaxHeight] = useState<number>(0)\n  const selectRef = useRef<HTMLDivElement>(null)\n  const selectElementRef = useRef<HTMLSelectElement>(null)\n  const [searchValue, setSearchValue] = useState<string>('')\n  const activeOptionRef = useRef<HTMLLIElement | null>(null)\n\n  const filteredOptions = autocomplete\n    ? options.filter((option) =>\n        option.label.toLowerCase().includes(searchValue.toLowerCase()),\n      )\n    : options\n\n  useEffect(() => {\n    if (initialValue) {\n      const option = options.find((option) => option.value === initialValue)\n      if (option) {\n        setSelectedOption({ value: option.value, label: option.label })\n      }\n    }\n  }, [initialValue, options])\n\n  useEffect(() => {\n    if (register && selectElementRef.current) {\n      register(selectElementRef.current)\n    }\n  }, [register])\n\n  useEffect(() => {\n    if (activeOptionRef.current) {\n      activeOptionRef.current.scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      })\n    }\n  }, [activeOptionIndex])\n\n  useEffect(() => {\n    const handleClickOutside = (event: PointerEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setIsDropdownOpen(false)\n      }\n    }\n\n    if (isDropdownOpen) {\n      document.addEventListener('pointerup', handleClickOutside)\n    } else {\n      document.removeEventListener('pointerup', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('pointerup', handleClickOutside)\n    }\n  }, [isDropdownOpen])\n\n  const toggleDropdown = () => {\n    if (!isDropdownOpen && selectRef.current) {\n      const { bottom } = selectRef.current.getBoundingClientRect()\n      let totalPadding = 0\n      let parentElement: HTMLElement | null = selectRef.current.parentElement\n\n      while (parentElement) {\n        const parentPaddingBottom = parseFloat(\n          window.getComputedStyle(parentElement).paddingBottom || '0',\n        )\n        totalPadding += parentPaddingBottom\n        parentElement = parentElement.parentElement\n      }\n\n      const availableSpaceBelow = window.innerHeight - bottom - totalPadding\n      const minDropdownHeight = 212\n      const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight)\n\n      setDropdownMaxHeight(calculatedHeight)\n    }\n\n    setIsDropdownOpen((prev) => {\n      if (!prev) {\n        const selectedIndex = options.findIndex(\n          (option) => option.value === selectedOption.value,\n        )\n        setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null)\n      }\n      return !prev\n    })\n  }\n\n  const _findNextAvailableIndex = (\n    currentIndex: number,\n    direction: 'down' | 'up',\n  ) => {\n    const step = direction === 'down' ? 1 : -1\n    let nextIndex =\n      (currentIndex + step + filteredOptions.length) % filteredOptions.length\n\n    while (filteredOptions[nextIndex]?.disabled) {\n      nextIndex =\n        (nextIndex + step + filteredOptions.length) % filteredOptions.length\n    }\n\n    return nextIndex\n  }\n\n  const onKeyDownDropdown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return\n\n    const _actions: Record<string, () => void> = {\n      Enter: () => {\n        if (!isDropdownOpen) {\n          toggleDropdown()\n          return\n        }\n        if (\n          activeOptionIndex !== null &&\n          !filteredOptions[activeOptionIndex].disabled\n        ) {\n          e.preventDefault()\n          selectOption(\n            filteredOptions[activeOptionIndex].value,\n            filteredOptions[activeOptionIndex].disabled,\n          )\n        }\n      },\n      ArrowDown: () => {\n        e.preventDefault()\n        setActiveOptionIndex((prev) =>\n          _findNextAvailableIndex(prev !== null ? prev : -1, 'down'),\n        )\n        if (!isDropdownOpen) toggleDropdown()\n      },\n      ArrowUp: () => {\n        e.preventDefault()\n        setActiveOptionIndex((prev) =>\n          _findNextAvailableIndex(\n            prev !== null ? prev : filteredOptions.length,\n            'up',\n          ),\n        )\n        if (!isDropdownOpen) toggleDropdown()\n      },\n      Escape: () => {\n        setIsDropdownOpen(false)\n      },\n    }\n\n    if (_actions[e.key]) {\n      _actions[e.key]()\n    }\n  }\n\n  const selectOption = (optionValue: string, optionDisabled?: boolean) => {\n    if (optionDisabled) return\n\n    const option = options.find((option) => option.value === optionValue)\n    if (option) {\n      setSelectedOption({ value: option.value, label: option.label })\n    }\n\n    setActiveOptionIndex(null)\n    setIsDropdownOpen(false)\n    setSearchValue('')\n    if (onChange) {\n      onChange(optionValue)\n    }\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value\n    setSearchValue(value)\n\n    if (value === '') {\n      setSelectedOption({ value: '', label: '' })\n    }\n\n    if (!isDropdownOpen) {\n      setIsDropdownOpen(true)\n    }\n  }\n\n  return {\n    isDropdownOpen,\n    selectRef,\n    activeOptionRef,\n    selectElementRef,\n    toggleDropdown,\n    selectOption,\n    onKeyDownDropdown,\n    setActiveOptionIndex,\n    activeOptionIndex,\n    filteredOptions,\n    searchValue,\n    setSearchValue,\n    handleInputChange,\n    dropdownMaxHeight,\n    selectedOption,\n    setSelectedOption,\n  }\n}\n","import classNames from 'classnames'\nimport { IconChevronDown, IconSlash, IconCheck } from '@components/icons'\nimport Field from '../Field'\nimport { SelectFieldProps } from './types'\nimport { useSelectField } from './hook'\nimport './styles.scss'\n\nexport const SelectField = ({\n  label,\n  options,\n  showOptionalLabel,\n  error,\n  errorMessage,\n  helpMessage,\n  disabled,\n  required,\n  value,\n  onChange,\n  style,\n  className,\n  placeholder,\n  name,\n  register,\n  onBlur,\n  autocomplete = false,\n  EmptyText = 'Nada encontrado',\n}: SelectFieldProps) => {\n  const {\n    isDropdownOpen,\n    selectRef,\n    selectElementRef,\n    activeOptionRef,\n    toggleDropdown,\n    selectOption,\n    onKeyDownDropdown,\n    setActiveOptionIndex,\n    activeOptionIndex,\n    filteredOptions,\n    searchValue,\n    selectedOption,\n    handleInputChange,\n    dropdownMaxHeight,\n  } = useSelectField(options, value, onChange, disabled, register, autocomplete)\n\n  const dropdownClasses = classNames('au-field__select', {\n    'au-field__select--disabled': disabled,\n    'au-field__select--open': isDropdownOpen,\n    'au-field__select--required': required,\n    'au-field__select--error': error,\n    [className!]: className,\n  })\n\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        showOptionalLabel={showOptionalLabel}\n        required={required}\n        error={error}\n        disabled={disabled}\n      />\n      <div className={dropdownClasses}>\n        <div\n          className=\"au-field__select-wrapper\"\n          onClick={toggleDropdown}\n          onKeyDown={onKeyDownDropdown}\n          tabIndex={disabled ? -1 : 0}\n          ref={selectRef}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={isDropdownOpen}\n          aria-labelledby=\"select-label\"\n          aria-activedescendant={\n            activeOptionIndex !== null && filteredOptions[activeOptionIndex]\n              ? filteredOptions[activeOptionIndex].value\n              : undefined\n          }\n          onBlur={onBlur}>\n          <input\n            className=\"au-field__select-input\"\n            value={searchValue || selectedOption.label}\n            placeholder={placeholder || 'Selecionar...'}\n            onChange={handleInputChange}\n            readOnly={!autocomplete}\n            disabled={disabled}\n          />\n          <div className=\"au-field__select-icon\">\n            <IconChevronDown />\n          </div>\n        </div>\n        <ul\n          className={classNames('au-field__select-options', {\n            'au-field__select-options--open': isDropdownOpen,\n          })}\n          role=\"listbox\"\n          aria-live=\"polite\"\n          tabIndex={-1}\n          style={{ maxHeight: `${dropdownMaxHeight}px`, overflowY: 'auto' }}>\n          {filteredOptions.length === 0 ? (\n            <li className=\"au-field__select-option au-field__select-option--empty\">\n              {EmptyText}\n            </li>\n          ) : (\n            filteredOptions.map((option, index) => (\n              <li\n                key={index}\n                className={classNames('au-field__select-option', {\n                  'au-field__select-option--highlighted':\n                    activeOptionIndex === index,\n                  'au-field__select-option--selected':\n                    option.value === selectedOption.value,\n                  'au-field__select-option--disabled': option.disabled,\n                })}\n                ref={activeOptionIndex === index ? activeOptionRef : null}\n                role=\"option\"\n                aria-selected={option.value === selectedOption.value}\n                aria-disabled={option.disabled}\n                onPointerUp={() => selectOption(option.value, option.disabled)}\n                onMouseEnter={() => setActiveOptionIndex(index)}>\n                {option.label}\n                {option.disabled ? (\n                  <IconSlash />\n                ) : option.value === selectedOption.value ? (\n                  <IconCheck />\n                ) : null}\n              </li>\n            ))\n          )}\n        </ul>\n\n        <select\n          hidden\n          disabled={disabled}\n          value={selectedOption.value}\n          onChange={(e) => selectOption(e.target.value)}\n          ref={selectElementRef}\n          name={name}\n          onBlur={onBlur}>\n          {options.map((option, index) => (\n            <option key={index} value={option.value}>\n              {option.label}\n            </option>\n          ))}\n        </select>\n      </div>\n      <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n      \n      \n    </Field.Root>\n  )\n}\n"],"names":["option","_a"],"mappings":"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"}

package/dist/components/TextareaField/index.es.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { F as Field } from "../../index-DfksciAR.js";
+import { F as Field } from "../../index-ZE6zszxw.js";
 const TextAreaField = ({
-  optional,
+  showOptionalLabel,
   required,
   success,
   error,
   errorMessage,
+  helpMessage,
   label,
   id,
   disabled,
@@ -32,7 +33,7 @@ const TextAreaField = ({
             text: label,
             id,
             required,
-            optional,
+            showOptionalLabel,
             success,
             error,
             disabled
@@ -50,7 +51,7 @@ const TextAreaField = ({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: !!error, message: errorMessage })
+        /* @__PURE__ */ jsx(Field.Message, { hasError: !!error, errorMessage, helpMessage })
       ]
     }
   );

package/dist/components/TextareaField/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TextareaField/index.tsx"],"sourcesContent":["import Field from '../Field'\n\nexport type TextAreaProps =\n  React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    optional?: boolean\n    success?: boolean\n    error?: boolean\n    errorMessage?: string\n    label?: string\n    textAreaStyle?: React.CSSProperties\n    textareaRef?: React.RefObject<HTMLTextAreaElement>\n    horizontalResize?: boolean\n  }\n\nexport const TextAreaField = ({\n  optional,\n  required,\n  success,\n  error,\n  errorMessage,\n  label,\n  id,\n  disabled,\n  style,\n  className,\n  textAreaStyle,\n  textareaRef,\n  maxLength,\n  horizontalResize,\n  ...props\n}: TextAreaProps) => {\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        id={id}\n        required={required}\n        optional={optional}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <Field.TextArea\n        id={id}\n        textareaRef={textareaRef}\n        disabled={disabled}\n        style={textAreaStyle}\n        maxLength={maxLength}\n        horizontalResize={horizontalResize}\n        {...props}\n      />\n      <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;AAcO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqB;AAEjB,SAAA;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QACA,oBAAC,MAAM,cAAN,EAAmB,UAAU,CAAC,CAAC,OAAO,SAAS,cAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpE;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TextareaField/index.tsx"],"sourcesContent":["import Field from '../Field'\n\nexport type TextAreaProps =\n  React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    showOptionalLabel?: boolean\n    success?: boolean\n    error?: boolean\n    errorMessage?: string\n    helpMessage?: string\n    label?: string\n    textAreaStyle?: React.CSSProperties\n    textareaRef?: React.RefObject<HTMLTextAreaElement>\n    horizontalResize?: boolean\n  }\n\nexport const TextAreaField = ({\n  showOptionalLabel,\n  required,\n  success,\n  error,\n  errorMessage,\n  helpMessage,\n  label,\n  id,\n  disabled,\n  style,\n  className,\n  textAreaStyle,\n  textareaRef,\n  maxLength,\n  horizontalResize,\n  ...props\n}: TextAreaProps) => {\n  return (\n    <Field.Root\n      style={style}\n      customclass={className}\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        id={id}\n        required={required}\n        showOptionalLabel={showOptionalLabel}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <Field.TextArea\n        id={id}\n        textareaRef={textareaRef}\n        disabled={disabled}\n        style={textAreaStyle}\n        maxLength={maxLength}\n        horizontalResize={horizontalResize}\n        {...props}\n      />\n      <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":";;AAeO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqB;AAEjB,SAAA;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAA;AAAA,QAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QACA,oBAAC,MAAM,SAAN,EAAc,UAAU,CAAC,CAAC,OAAO,cAA4B,aAA0B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9F;"}

package/dist/components/TokenField/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { F as Field } from "../../index-DfksciAR.js";
+import { F as Field } from "../../index-ZE6zszxw.js";
 import { useRef, useState, useEffect } from "react";
 import './styles.css';function inputtedValueIsValid(value) {
   const numberValue = Number(value);
@@ -135,6 +135,8 @@ const TokenField = ({
   success,
   error,
   errorMessage,
+  helpMessage,
+  showOptionalLabel,
   size = 6,
   type,
   style,
@@ -163,6 +165,7 @@ const TokenField = ({
           Field.Label,
           {
             text: label,
+            showOptionalLabel,
             success,
             error,
             disabled
@@ -181,7 +184,7 @@ const TokenField = ({
             "data-token-i": i
           }
         ) }, `token-digit-${i}`)) }),
-        /* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: error, message: errorMessage })
+        /* @__PURE__ */ jsx(Field.Message, { hasError: !!error, errorMessage, helpMessage })
       ]
     }
   );

package/dist/components/TokenField/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TokenField/hook.tsx","../../../lib/components/form/TokenField/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from 'react'\n\ntype UseTokenInputProps = {\n  size: number\n  onComplete?: (token: string) => void\n  onChange?: (value: string) => void\n  onChangeTimer?: (time: number) => void\n  timer?: number | null\n}\n\nfunction inputtedValueIsValid(value: unknown) {\n  const numberValue = Number(value)\n  const isNaN = Number.isNaN(numberValue)\n  return !isNaN\n}\n\nexport const useTokenField = ({\n  size,\n  onComplete,\n  onChange,\n  onChangeTimer,\n  timer = null,\n}: UseTokenInputProps) => {\n  const rootElementRef = useRef<HTMLDivElement | null>(null)\n  const [tokenMap, setTokenMap] = useState(_getDefaultTokens())\n  const [timerTime, setTimerTime] = useState<number | null>(timer)\n\n  useEffect(_handleValueEvents, [tokenMap])\n  useEffect(_handleStartTimer, [timer])\n  useEffect(_handleTimerUpdate, [timerTime])\n\n  function _handleValueEvents() {\n    const tokenValueArray =\n      Object.keys(tokenMap).map((key) => tokenMap[key]) || []\n    const stringField = tokenValueArray.join('')\n    const isTokenValid = stringField.length === size\n    if (onChange) onChange(stringField)\n\n    if (!!isTokenValid && !!onComplete) {\n      onComplete(stringField)\n    }\n  }\n\n  function _handleStartTimer() {\n    let interval: NodeJS.Timeout\n\n    if (timer) {\n      interval = setInterval(() => {\n        setTimerTime((currentTime) => {\n          if (!currentTime) return null\n          const reachedTheLimit = currentTime === 0\n          if (reachedTheLimit) {\n            return timer\n          } else {\n            return currentTime - 1\n          }\n        })\n      }, 1000)\n\n      if (interval) {\n        return () => clearInterval(interval)\n      }\n    }\n  }\n\n  function _handleTimerUpdate() {\n    if (onChangeTimer && timerTime) onChangeTimer(timerTime)\n\n    if (timerTime === 0) {\n      setTokenMap(_getDefaultTokens())\n      _resetFocus()\n    }\n  }\n\n  function _getDefaultTokens() {\n    return [...Array(size)].reduce((acc, _, i) => ({ ...acc, [i]: '' }), {})\n  }\n\n  function _goToNextInput(i: number) {\n    const nextItem = rootElementRef?.current?.querySelector<HTMLInputElement>(\n      `[data-token-i='${i + 1}']`,\n    )\n    if (nextItem) nextItem.focus()\n  }\n\n  function _resetFocus() {\n    const firstItem =\n      rootElementRef.current?.querySelector<HTMLInputElement>(\n        `[data-token-i='0']`,\n      )\n    firstItem?.focus()\n  }\n\n  function onKeyUpHandler(e: React.KeyboardEvent<HTMLInputElement>, i: number) {\n    const hasBackspacePressed = e.which === 8 || e.key === 'Backspace'\n    if (hasBackspacePressed) {\n      const previousItem =\n        rootElementRef?.current?.querySelector<HTMLInputElement>(\n          `[data-token-i='${i - 1}']`,\n        )\n      const currentItem =\n        rootElementRef?.current?.querySelector<HTMLInputElement>(\n          `[data-token-i='${i}']`,\n        )\n\n      setTokenMap({ ...tokenMap, [i]: '' })\n      if (!!previousItem && !currentItem?.value) previousItem.focus()\n    }\n  }\n\n  function onChangeNumber(e: React.ChangeEvent<HTMLInputElement>, i: number) {\n    e.preventDefault()\n    let value = e?.target?.value\n    const isNumberValid = inputtedValueIsValid(value)\n    const isEmpty = value === ''\n\n    if (isNumberValid) {\n      let firstEmptyIndex = Object.keys(tokenMap).findIndex(\n        (index) => tokenMap[index] === '',\n      )\n\n      if (value.length > 1) {\n        firstEmptyIndex = firstEmptyIndex - 1\n        value = value[value.length - 1]\n      }\n\n      if (firstEmptyIndex < 0) {\n        if (value) {\n          setTokenMap({ ...tokenMap, [i]: value })\n        }\n\n        return\n      }\n\n      setTokenMap({ ...tokenMap, [firstEmptyIndex]: value })\n      if (!isEmpty) _goToNextInput(firstEmptyIndex)\n    }\n  }\n\n  function onPasteNumber(e: React.ClipboardEvent<HTMLInputElement>) {\n    e.preventDefault()\n    const value = e.clipboardData.getData('Text')\n    const isNumberValid = inputtedValueIsValid(value)\n\n    if (isNumberValid) {\n      const arrValue = value.split('').slice(0, size)\n      setTokenMap({ ..._getDefaultTokens(), ...arrValue })\n\n      _goToNextInput(arrValue.length - 1)\n    } else {\n      setTokenMap(_getDefaultTokens())\n    }\n  }\n\n  return {\n    onKeyUpHandler,\n    onChangeNumber,\n    onPasteNumber,\n    tokenMap,\n    rootElementRef,\n  }\n}\n","import Field from '../Field'\nimport { useTokenField } from './hook'\nimport './styles.scss'\n\ntype TokenFieldProps = {\n  label?: string\n  disabled?: boolean\n  success?: boolean\n  error?: boolean\n  errorMessage?: string\n  size?: number\n  type?: 'number' | 'password' | 'text'\n  style?: React.CSSProperties\n  timer?: number\n  onChangeTimer?: () => void\n  onComplete?: (value: string) => void\n  onChange?: (value: string) => void\n}\n\nexport const TokenField = ({\n  label,\n  disabled,\n  success,\n  error,\n  errorMessage,\n  size = 6,\n  type,\n  style,\n  timer,\n  onChangeTimer,\n  onComplete,\n  onChange,\n}: TokenFieldProps) => {\n  const {\n    tokenMap,\n    rootElementRef,\n    onChangeNumber,\n    onKeyUpHandler,\n    onPasteNumber,\n  } = useTokenField({ size, onComplete, onChange, onChangeTimer, timer })\n\n  return (\n    <Field.Root\n      style={style}\n      customclass=\"au-token-field\"\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <div ref={rootElementRef} className=\"au-token-field__container\">\n        {[...Object.values(tokenMap)].map((_, i) => (\n          <div key={`token-digit-${i}`}>\n            <Field.Input\n              customclass=\"au-token-field__input\"\n              type={type || 'number'}\n              value={tokenMap[i]}\n              disabled={disabled}\n              onChange={(e) => onChangeNumber(e, i)}\n              onKeyUp={(e) => onKeyUpHandler(e, i)}\n              onPaste={(e) => onPasteNumber(e)}\n              data-token-i={i}\n            />\n          </div>\n        ))}\n      </div>\n      <Field.ErrorMessage hasError={error} message={errorMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/TokenField/hook.tsx","../../../lib/components/form/TokenField/index.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from 'react'\n\ntype UseTokenInputProps = {\n  size: number\n  onComplete?: (token: string) => void\n  onChange?: (value: string) => void\n  onChangeTimer?: (time: number) => void\n  timer?: number | null\n}\n\nfunction inputtedValueIsValid(value: unknown) {\n  const numberValue = Number(value)\n  const isNaN = Number.isNaN(numberValue)\n  return !isNaN\n}\n\nexport const useTokenField = ({\n  size,\n  onComplete,\n  onChange,\n  onChangeTimer,\n  timer = null,\n}: UseTokenInputProps) => {\n  const rootElementRef = useRef<HTMLDivElement | null>(null)\n  const [tokenMap, setTokenMap] = useState(_getDefaultTokens())\n  const [timerTime, setTimerTime] = useState<number | null>(timer)\n\n  useEffect(_handleValueEvents, [tokenMap])\n  useEffect(_handleStartTimer, [timer])\n  useEffect(_handleTimerUpdate, [timerTime])\n\n  function _handleValueEvents() {\n    const tokenValueArray =\n      Object.keys(tokenMap).map((key) => tokenMap[key]) || []\n    const stringField = tokenValueArray.join('')\n    const isTokenValid = stringField.length === size\n    if (onChange) onChange(stringField)\n\n    if (!!isTokenValid && !!onComplete) {\n      onComplete(stringField)\n    }\n  }\n\n  function _handleStartTimer() {\n    let interval: NodeJS.Timeout\n\n    if (timer) {\n      interval = setInterval(() => {\n        setTimerTime((currentTime) => {\n          if (!currentTime) return null\n          const reachedTheLimit = currentTime === 0\n          if (reachedTheLimit) {\n            return timer\n          } else {\n            return currentTime - 1\n          }\n        })\n      }, 1000)\n\n      if (interval) {\n        return () => clearInterval(interval)\n      }\n    }\n  }\n\n  function _handleTimerUpdate() {\n    if (onChangeTimer && timerTime) onChangeTimer(timerTime)\n\n    if (timerTime === 0) {\n      setTokenMap(_getDefaultTokens())\n      _resetFocus()\n    }\n  }\n\n  function _getDefaultTokens() {\n    return [...Array(size)].reduce((acc, _, i) => ({ ...acc, [i]: '' }), {})\n  }\n\n  function _goToNextInput(i: number) {\n    const nextItem = rootElementRef?.current?.querySelector<HTMLInputElement>(\n      `[data-token-i='${i + 1}']`,\n    )\n    if (nextItem) nextItem.focus()\n  }\n\n  function _resetFocus() {\n    const firstItem =\n      rootElementRef.current?.querySelector<HTMLInputElement>(\n        `[data-token-i='0']`,\n      )\n    firstItem?.focus()\n  }\n\n  function onKeyUpHandler(e: React.KeyboardEvent<HTMLInputElement>, i: number) {\n    const hasBackspacePressed = e.which === 8 || e.key === 'Backspace'\n    if (hasBackspacePressed) {\n      const previousItem =\n        rootElementRef?.current?.querySelector<HTMLInputElement>(\n          `[data-token-i='${i - 1}']`,\n        )\n      const currentItem =\n        rootElementRef?.current?.querySelector<HTMLInputElement>(\n          `[data-token-i='${i}']`,\n        )\n\n      setTokenMap({ ...tokenMap, [i]: '' })\n      if (!!previousItem && !currentItem?.value) previousItem.focus()\n    }\n  }\n\n  function onChangeNumber(e: React.ChangeEvent<HTMLInputElement>, i: number) {\n    e.preventDefault()\n    let value = e?.target?.value\n    const isNumberValid = inputtedValueIsValid(value)\n    const isEmpty = value === ''\n\n    if (isNumberValid) {\n      let firstEmptyIndex = Object.keys(tokenMap).findIndex(\n        (index) => tokenMap[index] === '',\n      )\n\n      if (value.length > 1) {\n        firstEmptyIndex = firstEmptyIndex - 1\n        value = value[value.length - 1]\n      }\n\n      if (firstEmptyIndex < 0) {\n        if (value) {\n          setTokenMap({ ...tokenMap, [i]: value })\n        }\n\n        return\n      }\n\n      setTokenMap({ ...tokenMap, [firstEmptyIndex]: value })\n      if (!isEmpty) _goToNextInput(firstEmptyIndex)\n    }\n  }\n\n  function onPasteNumber(e: React.ClipboardEvent<HTMLInputElement>) {\n    e.preventDefault()\n    const value = e.clipboardData.getData('Text')\n    const isNumberValid = inputtedValueIsValid(value)\n\n    if (isNumberValid) {\n      const arrValue = value.split('').slice(0, size)\n      setTokenMap({ ..._getDefaultTokens(), ...arrValue })\n\n      _goToNextInput(arrValue.length - 1)\n    } else {\n      setTokenMap(_getDefaultTokens())\n    }\n  }\n\n  return {\n    onKeyUpHandler,\n    onChangeNumber,\n    onPasteNumber,\n    tokenMap,\n    rootElementRef,\n  }\n}\n","import Field from '../Field'\nimport { useTokenField } from './hook'\nimport './styles.scss'\n\ntype TokenFieldProps = {\n  label?: string\n  disabled?: boolean\n  success?: boolean\n  error?: boolean\n  errorMessage?: string\n  helpMessage?: string\n  showOptionalLabel?: boolean\n  size?: number\n  type?: 'number' | 'password' | 'text'\n  style?: React.CSSProperties\n  timer?: number\n  onChangeTimer?: () => void\n  onComplete?: (value: string) => void\n  onChange?: (value: string) => void\n}\n\nexport const TokenField = ({\n  label,\n  disabled,\n  success,\n  error,\n  errorMessage,\n  helpMessage,\n  showOptionalLabel,\n  size = 6,\n  type,\n  style,\n  timer,\n  onChangeTimer,\n  onComplete,\n  onChange,\n}: TokenFieldProps) => {\n  const {\n    tokenMap,\n    rootElementRef,\n    onChangeNumber,\n    onKeyUpHandler,\n    onPasteNumber,\n  } = useTokenField({ size, onComplete, onChange, onChangeTimer, timer })\n\n  return (\n    <Field.Root\n      style={style}\n      customclass=\"au-token-field\"\n      success={success}\n      error={error}\n      disabled={disabled}>\n      <Field.Label\n        text={label}\n        showOptionalLabel={showOptionalLabel}\n        success={success}\n        error={error}\n        disabled={disabled}\n      />\n      <div ref={rootElementRef} className=\"au-token-field__container\">\n        {[...Object.values(tokenMap)].map((_, i) => (\n          <div key={`token-digit-${i}`}>\n            <Field.Input\n              customclass=\"au-token-field__input\"\n              type={type || 'number'}\n              value={tokenMap[i]}\n              disabled={disabled}\n              onChange={(e) => onChangeNumber(e, i)}\n              onKeyUp={(e) => onKeyUpHandler(e, i)}\n              onPaste={(e) => onPasteNumber(e)}\n              data-token-i={i}\n            />\n          </div>\n        ))}\n      </div>\n      <Field.Message hasError={!!error} errorMessage={errorMessage} helpMessage={helpMessage} />\n    </Field.Root>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/form/Field/Label/index.d.ts

@@ -2,10 +2,10 @@ type FieldLabelProps = {
     id?: string;
     text?: string;
     required?: boolean;
-    optional?: boolean;
     success?: boolean;
     error?: boolean;
     disabled?: boolean;
+    showOptionalLabel?: boolean;
 };
-export declare const FieldLabel: ({ id, text, required, optional, success, error, disabled, }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FieldLabel: ({ id, text, required, success, error, disabled, showOptionalLabel, }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/form/Field/Message/index.d.ts

@@ -0,0 +1,7 @@
+type FieldMessageProps = {
+    hasError?: boolean;
+    errorMessage?: string;
+    helpMessage?: string;
+};
+export declare const FieldMessage: ({ hasError, errorMessage, helpMessage }: FieldMessageProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/form/Field/index.d.ts

@@ -16,19 +16,24 @@ declare const _default: {
         children?: import('react').ReactNode;
         rightSideSlot?: import('react').ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ id, text, required, optional, success, error, disabled, }: {
+    Label: ({ id, text, required, success, error, disabled, showOptionalLabel, }: {
         id?: string | undefined;
         text?: string | undefined;
         required?: boolean | undefined;
-        optional?: boolean | undefined;
         success?: boolean | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
+        showOptionalLabel?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element | null;
     ErrorMessage: ({ hasError, message }: {
         hasError?: boolean | undefined;
         message?: string | undefined;
     }) => import("react/jsx-runtime").JSX.Element | null;
+    Message: ({ hasError, errorMessage, helpMessage }: {
+        hasError?: boolean | undefined;
+        errorMessage?: string | undefined;
+        helpMessage?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element | null;
     TextArea: ({ textareaRef, customClass, horizontalResize, maxLength, ...props }: import('react').TextareaHTMLAttributes<HTMLTextAreaElement> & {
         textareaRef?: import('react').RefObject<HTMLTextAreaElement> | undefined;
         customClass?: string | undefined;

package/dist/components/form/InputField/index.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    optional?: boolean;
+    showOptionalLabel?: boolean;
     requiredInput?: boolean;
     success?: boolean;
     error?: boolean;
     errorMessage?: string;
+    helpMessage?: string;
     rightSlot?: React.ReactNode;
     label?: string;
     inputStyle?: React.CSSProperties;
     inputRef?: React.RefObject<HTMLInputElement>;
 };
-export declare const InputField: ({ optional, requiredInput, success, error, errorMessage, label, id, disabled, style, className, inputStyle, rightSlot, inputRef, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputField: ({ showOptionalLabel, requiredInput, success, error, errorMessage, helpMessage, label, id, disabled, style, className, inputStyle, rightSlot, inputRef, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/PasswordField/index.d.ts

@@ -1,7 +1,7 @@
 
 type PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     type?: 'password';
-    optional?: boolean;
+    showOptionalLabel?: boolean;
     requiredInput?: boolean;
     success?: boolean;
     error?: boolean;
@@ -9,5 +9,5 @@ type PasswordFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     inputRef?: React.RefObject<HTMLInputElement>;
 };
-export declare const PasswordField: ({ optional, requiredInput, success, error, errorMessage, label, inputRef, id, disabled, style, className, ...props }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PasswordField: ({ showOptionalLabel, requiredInput, success, error, errorMessage, label, inputRef, id, disabled, style, className, ...props }: PasswordFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/form/SelectField/index.d.ts

@@ -1,3 +1,3 @@
 import { SelectFieldProps } from './types';
 
-export declare const SelectField: ({ label, options, optional, error, errorMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, autocomplete, EmptyText, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectField: ({ label, options, showOptionalLabel, error, errorMessage, helpMessage, disabled, required, value, onChange, style, className, placeholder, name, register, onBlur, autocomplete, EmptyText, }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/SelectField/types.d.ts

@@ -7,11 +7,12 @@ export type OptionProps = {
 export type SelectFieldProps = React.HTMLAttributes<HTMLDivElement> & {
     label?: string;
     options: OptionProps[];
-    optional?: boolean;
+    showOptionalLabel?: boolean;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
     errorMessage?: string;
+    helpMessage?: string;
     placeholder?: string;
     value?: string;
     onChange?: (value: string) => void;

package/dist/components/form/TextareaField/index.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    optional?: boolean;
+    showOptionalLabel?: boolean;
     success?: boolean;
     error?: boolean;
     errorMessage?: string;
+    helpMessage?: string;
     label?: string;
     textAreaStyle?: React.CSSProperties;
     textareaRef?: React.RefObject<HTMLTextAreaElement>;
     horizontalResize?: boolean;
 };
-export declare const TextAreaField: ({ optional, required, success, error, errorMessage, label, id, disabled, style, className, textAreaStyle, textareaRef, maxLength, horizontalResize, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAreaField: ({ showOptionalLabel, required, success, error, errorMessage, helpMessage, label, id, disabled, style, className, textAreaStyle, textareaRef, maxLength, horizontalResize, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/TokenField/index.d.ts

@@ -5,6 +5,8 @@ type TokenFieldProps = {
     success?: boolean;
     error?: boolean;
     errorMessage?: string;
+    helpMessage?: string;
+    showOptionalLabel?: boolean;
     size?: number;
     type?: 'number' | 'password' | 'text';
     style?: React.CSSProperties;
@@ -13,5 +15,5 @@ type TokenFieldProps = {
     onComplete?: (value: string) => void;
     onChange?: (value: string) => void;
 };
-export declare const TokenField: ({ label, disabled, success, error, errorMessage, size, type, style, timer, onChangeTimer, onComplete, onChange, }: TokenFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TokenField: ({ label, disabled, success, error, errorMessage, helpMessage, showOptionalLabel, size, type, style, timer, onChangeTimer, onComplete, onChange, }: TokenFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/index/styles.css

@@ -1 +1 @@
-.au-field{cursor:pointer;border-radius:8px}.au-field__input-holder{position:relative;height:56px}.au-field__input{height:56px}.au-field__textarea{padding:10px;box-sizing:border-box;resize:vertical;border:none;outline:none;width:100%;height:100%;min-width:100%}.au-field__textarea--horizontal-resize{resize:both}.au-field__textarea-container{position:relative;display:inline-block;min-width:100%}.au-field__input,.au-field__textarea{background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-family:inherit;font-size:16px;line-height:22px;padding:16px;width:100%}.au-field__input:hover,.au-field__textarea:hover{border:1px solid #16181d}.au-field__input:focus,.au-field__textarea:focus{border-color:#0048db;outline:1px solid #0048db}.au-field__char-counter{text-align:right;color:#454a54}.au-field:focus-within:not(.au-field--error) .au-field__header-label{color:#0048db}.au-field__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}.au-field__header-label{color:#454a54;cursor:pointer;font-size:14px;font-weight:600}.au-field__header-label--required{color:#991717}.au-field__header-icon span{font-size:14px;color:#454a54}.au-field__right-slot{position:absolute;right:16px;top:50%;transform:translateY(-50%)}.au-field__error-message{color:#991717;font-size:16px;font-weight:400;line-height:24px;padding-top:8px}.au-field--disabled{cursor:not-allowed}.au-field--disabled .au-field__input,.au-field--disabled .au-field__textarea{background-color:#e2e4e9;border-color:#5e6573;color:#5e6573;cursor:not-allowed}.au-field--disabled .au-field__header-label{color:#5e6573;cursor:not-allowed}.au-field--error .au-field__input,.au-field--error .au-field__textarea{background-color:#f5eff0;border-color:#991717}.au-field--error .au-field__input:focus,.au-field--error .au-field__textarea:focus{border-color:#0048db}.au-field--error .au-field__header-label{color:#991717}.au-field--success .au-field__input,.au-field--success .au-field__textarea{animation:inputSuccess 2s forwards}.au-field--success .au-field__header-label{animation:labelSuccess 2s forwards}.au-field--success .au-field__header-icon .au-icon{animation:iconSucess 2s forwards}@keyframes inputSuccess{0%,70%{background-color:#f0fcf5;border-color:#10593b}}@keyframes labelSuccess{0%,70%{color:#10593b}}@keyframes iconSucess{0%,70%{opacity:1}to{opacity:0}}
+.au-field{cursor:pointer;border-radius:8px}.au-field__input-holder{position:relative;height:56px}.au-field__input{height:56px}.au-field__textarea{padding:10px;box-sizing:border-box;resize:vertical;border:none;outline:none;width:100%;height:100%;min-width:100%}.au-field__textarea--horizontal-resize{resize:both}.au-field__textarea-container{position:relative;display:inline-block;min-width:100%}.au-field__input,.au-field__textarea{background-color:#fff;border:1px solid #454a54;border-radius:8px;box-sizing:border-box;font-family:inherit;font-size:16px;line-height:22px;padding:16px;width:100%}.au-field__input:hover,.au-field__textarea:hover{border:1px solid #16181d}.au-field__input:focus,.au-field__textarea:focus{border-color:#0048db;outline:1px solid #0048db}.au-field__char-counter{text-align:right;color:#454a54}.au-field:focus-within:not(.au-field--error) .au-field__header-label{color:#0048db}.au-field__header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}.au-field__header-label{color:#454a54;cursor:pointer;font-size:14px;font-weight:600}.au-field__header-label--required{color:#991717}.au-field__header-label--optional{color:#454a54;font-weight:400}.au-field__header-icon span{font-size:14px;color:#454a54}.au-field__right-slot{position:absolute;right:16px;top:50%;transform:translateY(-50%)}.au-field__message{font-size:14px;font-weight:400;line-height:22px;padding-top:8px;color:#454a54}.au-field__message--error{color:#991717}.au-field--disabled{cursor:not-allowed}.au-field--disabled .au-field__input,.au-field--disabled .au-field__textarea{background-color:#e2e4e9;border-color:#5e6573;color:#5e6573;cursor:not-allowed}.au-field--disabled .au-field__header-label{color:#5e6573;cursor:not-allowed}.au-field--error .au-field__input,.au-field--error .au-field__textarea{background-color:#f5eff0;border-color:#991717}.au-field--error .au-field__input:focus,.au-field--error .au-field__textarea:focus{border-color:#0048db}.au-field--error .au-field__header-label{color:#991717}.au-field--success .au-field__input,.au-field--success .au-field__textarea{animation:inputSuccess 2s forwards}.au-field--success .au-field__header-label{animation:labelSuccess 2s forwards}.au-field--success .au-field__header-icon .au-icon{animation:iconSucess 2s forwards}@keyframes inputSuccess{0%,70%{background-color:#f0fcf5;border-color:#10593b}}@keyframes labelSuccess{0%,70%{color:#10593b}}@keyframes iconSucess{0%,70%{opacity:1}to{opacity:0}}

package/dist/{index-DfksciAR.js → index-ZE6zszxw.js}

@@ -1,4 +1,5 @@
 import { FieldErrorMessage } from "./components/ErrorMessage/index.es.js";
+import { FieldMessage } from "./components/Message/index.es.js";
 import { FieldInput } from "./components/Input/index.es.js";
 import { FieldInputHolder } from "./components/InputHolder/index.es.js";
 import { FieldLabel } from "./components/Label/index.es.js";
@@ -10,9 +11,10 @@ import './components/index/styles.css';const Field = {
   InputHolder: FieldInputHolder,
   Label: FieldLabel,
   ErrorMessage: FieldErrorMessage,
+  Message: FieldMessage,
   TextArea: FieldTextArea
 };
 export {
   Field as F
 };
-//# sourceMappingURL=index-DfksciAR.js.map
+//# sourceMappingURL=index-ZE6zszxw.js.map

package/dist/index-ZE6zszxw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-ZE6zszxw.js","sources":["../lib/components/form/Field/index.tsx"],"sourcesContent":["import { FieldErrorMessage } from './ErrorMessage'\nimport { FieldMessage } from './Message'\nimport { FieldInput } from './Input'\nimport { FieldInputHolder } from './InputHolder'\nimport { FieldLabel } from './Label'\nimport { FieldRoot } from './Root'\nimport { FieldTextArea } from './TextArea'\nimport './styles.scss'\n\nexport default {\n    Root: FieldRoot,\n    Input: FieldInput,\n    InputHolder: FieldInputHolder,\n    Label: FieldLabel,\n    ErrorMessage: FieldErrorMessage,\n    Message: FieldMessage,\n    TextArea: FieldTextArea,\n}"],"names":[],"mappings":";;;;;;;AASA,MAAe,QAAA;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAAA,EACd,SAAS;AAAA,EACT,UAAU;AACd;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@consumidor-positivo/aurora",
   "private": false,
-  "version": "0.0.87",
+  "version": "0.0.89",
   "type": "module",
   "main": "./dist/main.es.js",
   "modules": "./dist/main.es.js",

package/dist/index-DfksciAR.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-DfksciAR.js","sources":["../lib/components/form/Field/index.tsx"],"sourcesContent":["import { FieldErrorMessage } from './ErrorMessage'\nimport { FieldInput } from './Input'\nimport { FieldInputHolder } from './InputHolder'\nimport { FieldLabel } from './Label'\nimport { FieldRoot } from './Root'\nimport { FieldTextArea } from './TextArea'\nimport './styles.scss'\n\nexport default {\n    Root: FieldRoot,\n    Input: FieldInput,\n    InputHolder: FieldInputHolder,\n    Label: FieldLabel,\n    ErrorMessage: FieldErrorMessage,\n    TextArea: FieldTextArea,\n}"],"names":[],"mappings":";;;;;;AAQA,MAAe,QAAA;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AACd;"}