@consumidor-positivo/aurora 0.0.61 → 0.0.63

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

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "../../index-CweZ_OcN.js";
-import "../../index-CvHQPF4S.js";
+import "../../index-DhUJjrgP.js";
 import "../Button/index.es.js";
 import "../PortalHolder/index.es.js";
-import { a } from "../../index-DYVmC1NO.js";
+import { a } from "../../index-lcJ0CoDo.js";
 export {
   a as DatepickerCalendar
 };

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

@@ -3,8 +3,8 @@ import "../../index-CweZ_OcN.js";
 import "../Icon/index.es.js";
 import "../icons/IconChevronLeft/index.es.js";
 import "../icons/IconChevronRight/index.es.js";
-import "../../index-CLq9qZyb.js";
-import { C } from "../../index-CvHQPF4S.js";
+import "../../index-BnnDZOqb.js";
+import { C } from "../../index-DhUJjrgP.js";
 export {
   C as CalendarHeader
 };

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

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 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-sLk4K3iM.js";
 import { k as COLOR_NEUTRAL_00 } from "../../tokens-TYOJv1j5.js";
-import Field from "../Field/index.es.js";
 import './styles.css';const CheckboxField = ({
   label,
   error,

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

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { B as BREAKPOINT_MD, g as COLOR_NEUTRAL_40 } from "../../tokens-TYOJv1j5.js";
 import "../../index-CweZ_OcN.js";
 import "../Icon/index.es.js";
 import { IconCalendar } from "../icons/IconCalendar/index.es.js";
 import { InputField } from "../InputField/index.es.js";
-import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-DYVmC1NO.js";
+import { g as getDefaultDate, D as DDMMYYYY, a as DatepickerCalendar, A as AUCalendarDate } from "../../index-lcJ0CoDo.js";
 import { useRef, useState, useEffect } from "react";
-import { u as useOutsideClick } from "../../index-CLq9qZyb.js";
+import { u as useOutsideClick } from "../../index-BnnDZOqb.js";
+import { B as BREAKPOINT_MD, g as COLOR_NEUTRAL_40 } from "../../tokens-TYOJv1j5.js";
 import './styles.css';function useDatepicker({
   value,
   defaultValue = "empty",

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

@@ -1,92 +1,35 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
-import "../Icon/index.es.js";
-import { IconAlertCircle } from "../icons/IconAlertCircle/index.es.js";
-import { IconCheck } from "../icons/IconCheck/index.es.js";
-import { IconSlash } from "../icons/IconSlash/index.es.js";
-import { H as COLOR_SUCCESS_50, O as COLOR_ERROR_50, g as COLOR_NEUTRAL_40 } from "../../tokens-TYOJv1j5.js";
-import './styles.css';const FieldErrorMessage = ({ hasError, message }) => {
-  if (!hasError || !message) return null;
-  return /* @__PURE__ */ jsx("p", { className: "au-field__error-message", children: message });
-};
-const FieldInput = ({
-  inputRef,
-  customclass,
-  ...props
-}) => {
-  const inputClasses = classNames("au-field__input", customclass);
-  return /* @__PURE__ */ jsx("input", { className: inputClasses, ref: inputRef, ...props });
-};
-const FieldInputHolder = ({
-  children,
-  rightSideSlot
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "au-field__input-holder", children: [
-    children,
-    rightSideSlot && /* @__PURE__ */ jsx("div", { className: "au-field__right-slot", children: rightSideSlot })
-  ] });
-};
-const FieldLabel = ({
-  id,
-  text,
-  required,
-  optional,
-  success,
+import './styles.css';const RadioField = ({
+  type = "radio",
+  direction = "left",
+  label,
   error,
-  disabled
-}) => {
-  if (!text) return null;
-  const states = [
-    { state: "optional", value: !!optional, icon: /* @__PURE__ */ jsx("span", { children: "(Opcional)" }) },
-    {
-      state: "success",
-      value: !!success,
-      icon: /* @__PURE__ */ jsx(IconCheck, { rawColor: COLOR_SUCCESS_50 })
-    },
-    {
-      state: "error",
-      value: !!error,
-      icon: /* @__PURE__ */ jsx(IconAlertCircle, { rawColor: COLOR_ERROR_50 })
-    },
-    {
-      state: "disabled",
-      value: !!disabled,
-      icon: /* @__PURE__ */ jsx(IconSlash, { rawColor: COLOR_NEUTRAL_40 })
-    }
-  ];
-  const currentState = states.find(({ value }) => !!value);
-  return /* @__PURE__ */ jsxs("div", { className: "au-field__header", children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "au-field__header-label", children: [
-      text,
-      " ",
-      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 })
-  ] });
-};
-const FieldRoot = ({
-  children,
+  id,
   disabled,
-  success,
-  error,
-  style,
-  customclass
+  ...props
 }) => {
-  const inputClasses = classNames("au-field", customclass, {
-    "au-field--disabled": !!disabled,
-    "au-field--success": !!success,
-    "au-field--error": !!error
+  const radioClasses = classNames("au-radio-field", {
+    "au-radio-field--left-direction": direction === "left",
+    "au-radio-field--right-direction": direction === "right",
+    "au-radio-field--disabled": !!disabled,
+    "au-radio-field--error": !!error
   });
-  return /* @__PURE__ */ jsx("div", { className: inputClasses, style, children });
-};
-const Field = {
-  Root: FieldRoot,
-  Input: FieldInput,
-  InputHolder: FieldInputHolder,
-  Label: FieldLabel,
-  ErrorMessage: FieldErrorMessage
+  return /* @__PURE__ */ jsxs("div", { className: radioClasses, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "au-radio-field__input",
+        type,
+        id,
+        disabled,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { className: "au-radio-field__label", htmlFor: id, children: label })
+  ] });
 };
 export {
-  Field as default
+  RadioField
 };
 //# sourceMappingURL=index.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Field/ErrorMessage.tsx","../../../lib/components/form/Field/Input.tsx","../../../lib/components/form/Field/InputHolder.tsx","../../../lib/components/form/Field/Label.tsx","../../../lib/components/form/Field/Root.tsx","../../../lib/components/form/Field/index.tsx"],"sourcesContent":["type ErrorMessageProps = {\n  hasError?: boolean\n  message?: string\n}\n\nexport const FieldErrorMessage = ({ hasError, message }: ErrorMessageProps) => {\n  if (!hasError || !message) return null\n\n  return <p className=\"au-field__error-message\">{message}</p>\n}\n","import classNames from 'classnames'\n\ntype FieldInputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n  inputRef?: React.RefObject<HTMLInputElement>\n  customclass?: string\n}\n\nexport const FieldInput = ({\n  inputRef,\n  customclass,\n  ...props\n}: FieldInputProps) => {\n  const inputClasses = classNames('au-field__input', customclass)\n\n  return <input className={inputClasses} ref={inputRef} {...props} />\n}\n","import React from 'react'\n\ntype FieldInputHolderProps = {\n  children?: React.ReactNode\n  rightSideSlot?: React.ReactNode\n}\n\nexport const FieldInputHolder = ({\n  children,\n  rightSideSlot,\n}: FieldInputHolderProps) => {\n  return (\n    <div className=\"au-field__input-holder\">\n      {children}\n      {rightSideSlot && (\n        <div className=\"au-field__right-slot\">{rightSideSlot}</div>\n      )}\n    </div>\n  )\n}\n","import { IconAlertCircle, 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: <IconAlertCircle 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","import classNames from 'classnames'\n\ntype FieldRootProps = {\n  children: React.ReactNode\n  disabled?: boolean\n  success?: boolean\n  error?: boolean\n  style?: React.CSSProperties\n  customclass?: string\n}\n\nexport const FieldRoot = ({\n  children,\n  disabled,\n  success,\n  error,\n  style,\n  customclass,\n}: FieldRootProps) => {\n  const inputClasses = classNames('au-field', customclass, {\n    'au-field--disabled': !!disabled,\n    'au-field--success': !!success,\n    'au-field--error': !!error,\n  })\n\n  return (\n    <div className={inputClasses} style={style}>\n      {children}\n    </div>\n  )\n}\n","import { FieldErrorMessage } from './ErrorMessage'\nimport { FieldInput } from './Input'\nimport { FieldInputHolder } from './InputHolder'\nimport { FieldLabel } from './Label'\nimport { FieldRoot } from './Root'\nimport './styles.scss'\n\nexport default {\n    Root: FieldRoot,\n    Input: FieldInput,\n    InputHolder: FieldInputHolder,\n    Label: FieldLabel,\n    ErrorMessage: FieldErrorMessage,\n}"],"names":[],"mappings":";;;;;;;AAKO,MAAM,oBAAoB,CAAC,EAAE,UAAU,cAAiC;AAC7E,MAAI,CAAC,YAAY,CAAC,QAAgB,QAAA;AAElC,SAAQ,oBAAA,KAAA,EAAE,WAAU,2BAA2B,UAAQ,QAAA,CAAA;AACzD;ACFO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuB;AACf,QAAA,eAAe,WAAW,mBAAmB,WAAW;AAE9D,6BAAQ,SAAM,EAAA,WAAW,cAAc,KAAK,UAAW,GAAG,MAAO,CAAA;AACnE;ACRO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF,MAA6B;AAEzB,SAAA,qBAAC,OAAI,EAAA,WAAU,0BACZ,UAAA;AAAA,IAAA;AAAA,IACA,iBACC,oBAAC,OAAI,EAAA,WAAU,wBAAwB,UAAc,eAAA;AAAA,EAEzD,EAAA,CAAA;AAEJ;ACFO,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,iBAAgB,EAAA,UAAU,eAAgB,CAAA;AAAA,IACnD;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;ACjDO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACd,QAAA,eAAe,WAAW,YAAY,aAAa;AAAA,IACvD,sBAAsB,CAAC,CAAC;AAAA,IACxB,qBAAqB,CAAC,CAAC;AAAA,IACvB,mBAAmB,CAAC,CAAC;AAAA,EAAA,CACtB;AAED,SACG,oBAAA,OAAA,EAAI,WAAW,cAAc,OAC3B,SACH,CAAA;AAEJ;ACvBA,MAAe,QAAA;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAClB;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Radio/Field/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { RadioFieldProps } from '../types'\nimport './styles.scss'\n\nexport const RadioField = ({\n  type = 'radio',\n  direction = 'left',\n  label,\n  error,\n  id,\n  disabled,\n  ...props\n}: RadioFieldProps) => {\n  const radioClasses = classNames('au-radio-field', {\n    'au-radio-field--left-direction': direction === 'left',\n    'au-radio-field--right-direction': direction === 'right',\n    'au-radio-field--disabled': !!disabled,\n    'au-radio-field--error': !!error,\n  })\n  \n  return (\n    <div className={radioClasses}>\n      <input\n        className=\"au-radio-field__input\"\n        type={type}\n        id={id}\n        disabled={disabled}\n        {...props}\n      />\n      <label className=\"au-radio-field__label\" htmlFor={id}>\n        {label}\n      </label>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;AAIO,MAAM,aAAa,CAAC;AAAA,EACzB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuB;AACf,QAAA,eAAe,WAAW,kBAAkB;AAAA,IAChD,kCAAkC,cAAc;AAAA,IAChD,mCAAmC,cAAc;AAAA,IACjD,4BAA4B,CAAC,CAAC;AAAA,IAC9B,yBAAyB,CAAC,CAAC;AAAA,EAAA,CAC5B;AAGC,SAAA,qBAAC,OAAI,EAAA,WAAW,cACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,wBACC,SAAM,EAAA,WAAU,yBAAwB,SAAS,IAC/C,UACH,OAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/components/Field/styles.css

@@ -1 +1 @@
-.au-field{cursor:pointer;border-radius:8px}.au-field__input-holder{position:relative;height:56px}.au-field__input{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;height:56px;width:100%}.au-field__input:hover{border:1px solid #16181d}.au-field__input:focus{border-color:#0048db;outline:1px solid #0048db}.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{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{background-color:#f5eff0;border-color:#991717}.au-field--error .au-field__input:focus{border-color:#0048db}.au-field--error .au-field__header-label{color:#991717}.au-field--success .au-field__input{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-radio-field{cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content}.au-radio-field--left-direction{flex-direction:row}.au-radio-field--right-direction{flex-direction:row-reverse}.au-radio-field__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%;cursor:pointer;position:relative;height:24px;width:24px}.au-radio-field__input:after,.au-radio-field__input:before{content:"";border-radius:50%;position:absolute}.au-radio-field__input:after{background-color:#454a54;content:"";height:10px;width:10px;left:7px;top:7px;transform:scale(0);transform-origin:center;transition:transform .2s}.au-radio-field__input:before{content:"";border:2px solid #454a54;height:24px;width:24px}.au-radio-field__input:checked:before{border-color:#0048db;background-color:#0048db;transition:all .2s ease}.au-radio-field__input:checked:after{background-color:#fff;transform:scale(1)}.au-radio-field__input:focus{box-shadow:0 0 0 1px #fff,0 0 0 3px #0048db}.au-radio-field__input:hover:not(:focus){background-color:#f2f5fc;outline:2px solid #F2F5FC}.au-radio-field__label{color:#454a54;font-size:16px;line-height:24px}.au-radio-field--disabled,.au-radio-field--disabled .au-radio-field__input{cursor:not-allowed}.au-radio-field--disabled .au-radio-field__input:before{border-color:#c4c9d4}.au-radio-field--disabled .au-radio-field__input:checked:before{background-color:#c4c9d4}.au-radio-field--disabled .au-radio-field__label{cursor:not-allowed;color:#c4c9d4}.au-radio-field--error .au-radio-field__input:before{border:2px solid #991717}.au-radio-field--error .au-radio-field__input:checked:before{border-color:#0048db}

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

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { F as Field } from "../../index-sLk4K3iM.js";
+import { Conditional } from "../Conditional/index.es.js";
+import { Text } from "../Text/index.es.js";
+import $dbSRa$react__default, { useState } from "react";
+import { RadioField } from "../Field/index.es.js";
+import './styles.css';const RadioGroup = ({
+  name = "",
+  defaultValue,
+  orientation = "vertical",
+  label,
+  error,
+  errorMessage,
+  children,
+  onChange,
+  onFocus
+}) => {
+  const groupClass = classNames("au-radio-group", {
+    "au-radio-group--horizontal": orientation === "horizontal"
+  });
+  const getSafeName = (name2) => {
+    return name2 ? name2 : `au-radio-group-${Math.random()}`;
+  };
+  const [safeName] = useState(getSafeName(name));
+  const childrenWithProps = $dbSRa$react__default.Children.map(children, (child) => {
+    if ($dbSRa$react__default.isValidElement(child)) {
+      const childProps = child.props;
+      return /* @__PURE__ */ jsx(
+        RadioField,
+        {
+          name: safeName,
+          error,
+          defaultChecked: defaultValue === childProps.value,
+          onChange,
+          onFocus,
+          ...child.props
+        }
+      );
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxs("div", { className: groupClass, children: [
+    /* @__PURE__ */ jsx(
+      Conditional,
+      {
+        condition: !!label,
+        renderIf: /* @__PURE__ */ jsx(Text, { variant: "body-medium", weight: "semibold", children: label })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "au-radio-group__fields", children: childrenWithProps }),
+    /* @__PURE__ */ jsx(Field.ErrorMessage, { hasError: !!error, message: errorMessage })
+  ] });
+};
+export {
+  RadioGroup
+};
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Radio/Group/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport './styles.scss'\nimport Field from '@components/form/Field'\nimport { Conditional } from '@components/misc'\nimport { Text } from '@components/Text'\nimport React, { useState } from 'react'\nimport { RadioField } from '../Field'\nimport { RadioFieldProps, RadioGroupProps } from '../types'\n\nexport const RadioGroup = ({\n  name = '',\n  defaultValue,\n  orientation = 'vertical',\n  label,\n  error,\n  errorMessage,\n  children,\n  onChange,\n  onFocus,\n}: RadioGroupProps) => {\n  const groupClass = classNames('au-radio-group', {\n    'au-radio-group--horizontal': orientation === 'horizontal',\n  })\n\n  const getSafeName = (name: string): string => {\n    return name ? name : `au-radio-group-${Math.random()}`\n  }\n\n  const [safeName] = useState(getSafeName(name))\n\n  const childrenWithProps = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      const childProps = child.props as RadioFieldProps\n\n      return (\n        <RadioField\n          name={safeName}\n          error={error}\n          defaultChecked={defaultValue === childProps.value}\n          onChange={onChange}\n          onFocus={onFocus}\n          {...child.props}\n        />\n      )\n    }\n    return child\n  })\n\n  return (\n    <div className={groupClass}>\n      <Conditional\n        condition={!!label}\n        renderIf={\n          <Text variant=\"body-medium\" weight=\"semibold\">\n            {label}\n          </Text>\n        }\n      />\n      <div className=\"au-radio-group__fields\">{childrenWithProps}</div>\n      <Field.ErrorMessage hasError={!!error} message={errorMessage} />\n    </div>\n  )\n}\n"],"names":["name","React"],"mappings":";;;;;;;AASO,MAAM,aAAa,CAAC;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACf,QAAA,aAAa,WAAW,kBAAkB;AAAA,IAC9C,8BAA8B,gBAAgB;AAAA,EAAA,CAC/C;AAEK,QAAA,cAAc,CAACA,UAAyB;AAC5C,WAAOA,QAAOA,QAAO,kBAAkB,KAAK,OAAQ,CAAA;AAAA,EAAA;AAGtD,QAAM,CAAC,QAAQ,IAAI,SAAS,YAAY,IAAI,CAAC;AAE7C,QAAM,oBAAoBC,sBAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAC5D,QAAAA,sBAAM,eAAe,KAAK,GAAG;AAC/B,YAAM,aAAa,MAAM;AAGvB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN;AAAA,UACA,gBAAgB,iBAAiB,WAAW;AAAA,UAC5C;AAAA,UACA;AAAA,UACC,GAAG,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAGhB;AACO,WAAA;AAAA,EAAA,CACR;AAGC,SAAA,qBAAC,OAAI,EAAA,WAAW,YACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,CAAC,CAAC;AAAA,QACb,UACG,oBAAA,MAAA,EAAK,SAAQ,eAAc,QAAO,YAChC,UACH,OAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,0BAA0B,UAAkB,mBAAA;AAAA,IAC3D,oBAAC,MAAM,cAAN,EAAmB,UAAU,CAAC,CAAC,OAAO,SAAS,cAAc;AAAA,EAChE,EAAA,CAAA;AAEJ;"}

package/dist/components/Group/styles.css

@@ -0,0 +1 @@
+.au-radio-group,.au-radio-group__fields{display:flex;flex-direction:column;gap:16px}.au-radio-group--horizontal .au-radio-group__fields{flex-direction:row}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import Field from "../Field/index.es.js";
+import { F as Field } from "../../index-sLk4K3iM.js";
 const InputField = ({
   optional,
   requiredInput,

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import Field from "../Field/index.es.js";
+import { F as Field } from "../../index-sLk4K3iM.js";
 import { useState } from "react";
 import './styles.css';const usePasswordField = () => {
   const [showPassword, setShowPassword] = useState(false);

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

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { a as above } from "../../screen-DfYo7XQ_.js";
-import { B as BREAKPOINT_MD } from "../../tokens-TYOJv1j5.js";
 import { Portal } from "../Portal/index.es.js";
+import { B as BREAKPOINT_MD } from "../../tokens-TYOJv1j5.js";
 const PortalHolder = ({ withPortal, children }) => {
   const shouldUsePortal = !above(BREAKPOINT_MD) && withPortal;
   if (shouldUsePortal) return /* @__PURE__ */ jsx(Portal, { children });

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

@@ -0,0 +1,14 @@
+import { RadioField } from "../Field/index.es.js";
+import { RadioGroup } from "../Group/index.es.js";
+const components = {
+  Field: RadioField,
+  Group: RadioGroup
+};
+Object.keys(components).forEach((key) => {
+  const component = components[key];
+  component.displayName = `Radio.${key}`;
+});
+export {
+  components as Radio
+};
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/form/Radio/index.tsx"],"sourcesContent":["import { RadioField } from './Field'\nimport { RadioGroup } from './Group'\nimport { RadioFieldProps, RadioGroupProps } from './types'\n\ntype Components = {\n  Field: React.FC<RadioFieldProps>\n  Group: React.FC<RadioGroupProps>\n}\n\nconst components: Components = {\n  Field: RadioField,\n  Group: RadioGroup,\n}\n\nObject.keys(components).forEach((key) => {\n  const component = components[key as keyof Components]\n  component.displayName = `Radio.${key}`\n})\n\nexport { components as Radio }\n"],"names":[],"mappings":";;AASA,MAAM,aAAyB;AAAA,EAC7B,OAAO;AAAA,EACP,OAAO;AACT;AAEA,OAAO,KAAK,UAAU,EAAE,QAAQ,CAAC,QAAQ;AACjC,QAAA,YAAY,WAAW,GAAuB;AAC1C,YAAA,cAAc,SAAS,GAAG;AACtC,CAAC;"}

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

@@ -4,7 +4,7 @@ import "../Icon/index.es.js";
 import "../icons/IconChevronDown/index.es.js";
 import "../icons/IconChevronLeft/index.es.js";
 import "../icons/IconX/index.es.js";
-import { S } from "../../index-CLq9qZyb.js";
+import { S } from "../../index-BnnDZOqb.js";
 export {
   S as Segment
 };

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

@@ -4,47 +4,80 @@ 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 Field from "../Field/index.es.js";
+import { F as Field } from "../../index-sLk4K3iM.js";
 import { useState, useRef, useEffect } from "react";
-import './styles.css';const useSelectField = (options, initialValue, onChange, disabled, register) => {
+import './styles.css';const useSelectField = (options, initialValue, onChange, disabled, register, autocomplete = false) => {
+  var _a;
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [currentValue, setCurrentValue] = useState(initialValue || "");
+  const [selectedOption, setSelectedOption] = useState({
+    value: initialValue || "",
+    label: initialValue ? ((_a = options.find((option) => option.value === initialValue)) == null ? void 0 : _a.label) || "" : ""
+  });
   const [activeOptionIndex, setActiveOptionIndex] = useState(
     null
   );
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState(0);
   const selectRef = useRef(null);
   const selectElementRef = useRef(null);
+  const [searchValue, setSearchValue] = useState("");
+  const activeOptionRef = useRef(null);
+  const filteredOptions = autocomplete ? options.filter(
+    (option) => option.label.toLowerCase().includes(searchValue.toLowerCase())
+  ) : options;
   useEffect(() => {
     if (initialValue) {
-      setCurrentValue(initialValue);
+      const option = options.find((option2) => option2.value === initialValue);
+      if (option) {
+        setSelectedOption({ value: option.value, label: option.label });
+      }
     }
-  }, [initialValue]);
+  }, [initialValue, options]);
   useEffect(() => {
     if (register && selectElementRef.current) {
       register(selectElementRef.current);
     }
   }, [register]);
-  const toggleDropdown = () => {
-    setIsDropdownOpen((prev) => !prev);
-    setActiveOptionIndex(null);
-    if (selectRef.current) {
-      selectRef.current.focus();
+  useEffect(() => {
+    if (activeOptionRef.current) {
+      activeOptionRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
     }
-  };
-  const selectOption = (optionValue, optionDisabled) => {
-    if (optionDisabled) return;
-    setCurrentValue(optionValue);
-    setIsDropdownOpen(false);
-    if (onChange) {
-      onChange(optionValue);
+  }, [activeOptionIndex]);
+  const toggleDropdown = () => {
+    if (!isDropdownOpen && selectRef.current) {
+      const { bottom } = selectRef.current.getBoundingClientRect();
+      let totalPadding = 0;
+      let parentElement = selectRef.current.parentElement;
+      while (parentElement) {
+        const parentPaddingBottom = parseFloat(
+          window.getComputedStyle(parentElement).paddingBottom || "0"
+        );
+        totalPadding += parentPaddingBottom;
+        parentElement = parentElement.parentElement;
+      }
+      const availableSpaceBelow = window.innerHeight - bottom - totalPadding;
+      const minDropdownHeight = 150;
+      const calculatedHeight = Math.max(availableSpaceBelow, minDropdownHeight);
+      setDropdownMaxHeight(calculatedHeight);
     }
+    setIsDropdownOpen((prev) => {
+      if (!prev) {
+        const selectedIndex = options.findIndex(
+          (option) => option.value === selectedOption.value
+        );
+        setActiveOptionIndex(selectedIndex !== -1 ? selectedIndex : null);
+      }
+      return !prev;
+    });
   };
   const _findNextAvailableIndex = (currentIndex, direction) => {
-    var _a;
+    var _a2;
     const step = direction === "down" ? 1 : -1;
-    let nextIndex = (currentIndex + step + options.length) % options.length;
-    while ((_a = options[nextIndex]) == null ? void 0 : _a.disabled) {
-      nextIndex = (nextIndex + step + options.length) % options.length;
+    let nextIndex = (currentIndex + step + filteredOptions.length) % filteredOptions.length;
+    while ((_a2 = filteredOptions[nextIndex]) == null ? void 0 : _a2.disabled) {
+      nextIndex = (nextIndex + step + filteredOptions.length) % filteredOptions.length;
     }
     return nextIndex;
   };
@@ -56,11 +89,11 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, d
           toggleDropdown();
           return;
         }
-        if (activeOptionIndex !== null && !options[activeOptionIndex].disabled) {
+        if (activeOptionIndex !== null && !filteredOptions[activeOptionIndex].disabled) {
           e.preventDefault();
           selectOption(
-            options[activeOptionIndex].value,
-            options[activeOptionIndex].disabled
+            filteredOptions[activeOptionIndex].value,
+            filteredOptions[activeOptionIndex].disabled
           );
         }
       },
@@ -74,7 +107,10 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, d
       ArrowUp: () => {
         e.preventDefault();
         setActiveOptionIndex(
-          (prev) => _findNextAvailableIndex(prev !== null ? prev : options.length, "up")
+          (prev) => _findNextAvailableIndex(
+            prev !== null ? prev : filteredOptions.length,
+            "up"
+          )
         );
         if (!isDropdownOpen) toggleDropdown();
       },
@@ -86,16 +122,46 @@ import './styles.css';const useSelectField = (options, initialValue, onChange, d
       _actions[e.key]();
     }
   };
+  const selectOption = (optionValue, optionDisabled) => {
+    if (optionDisabled) return;
+    const option = options.find((option2) => option2.value === optionValue);
+    if (option) {
+      setSelectedOption({ value: option.value, label: option.label });
+    }
+    setActiveOptionIndex(null);
+    setIsDropdownOpen(false);
+    setSearchValue("");
+    if (onChange) {
+      onChange(optionValue);
+    }
+  };
+  const handleInputChange = (e) => {
+    const value = e.target.value;
+    setSearchValue(value);
+    if (value === "") {
+      setSelectedOption({ value: "", label: "" });
+    }
+    if (!isDropdownOpen) {
+      setIsDropdownOpen(true);
+    }
+  };
   return {
     isDropdownOpen,
-    currentValue,
     selectRef,
+    activeOptionRef,
     selectElementRef,
     toggleDropdown,
     selectOption,
     onKeyDownDropdown,
     setActiveOptionIndex,
-    activeOptionIndex
+    activeOptionIndex,
+    filteredOptions,
+    searchValue,
+    setSearchValue,
+    handleInputChange,
+    dropdownMaxHeight,
+    selectedOption,
+    setSelectedOption
   };
 };
 const SelectField = ({
@@ -113,20 +179,26 @@ const SelectField = ({
   placeholder,
   name,
   register,
-  onBlur
+  onBlur,
+  autocomplete = false,
+  EmptyText = "Nada encontrado"
 }) => {
-  var _a;
   const {
     isDropdownOpen,
-    currentValue,
     selectRef,
     selectElementRef,
+    activeOptionRef,
     toggleDropdown,
     selectOption,
     onKeyDownDropdown,
     setActiveOptionIndex,
-    activeOptionIndex
-  } = useSelectField(options, value, onChange, disabled, register);
+    activeOptionIndex,
+    filteredOptions,
+    searchValue,
+    selectedOption,
+    handleInputChange,
+    dropdownMaxHeight
+  } = useSelectField(options, value, onChange, disabled, register, autocomplete);
   const dropdownClasses = classNames("au-field__select", {
     "au-field__select--disabled": disabled,
     "au-field__select--open": isDropdownOpen,
@@ -165,10 +237,20 @@ const SelectField = ({
               "aria-haspopup": "listbox",
               "aria-expanded": isDropdownOpen,
               "aria-labelledby": "select-label",
-              "aria-activedescendant": activeOptionIndex !== null ? options[activeOptionIndex].value : void 0,
+              "aria-activedescendant": activeOptionIndex !== null && filteredOptions[activeOptionIndex] ? filteredOptions[activeOptionIndex].value : void 0,
               onBlur,
               children: [
-                /* @__PURE__ */ jsx("div", { className: "au-field__select-display", children: ((_a = options.find((option) => option.value === currentValue)) == null ? void 0 : _a.label) || placeholder || "Selecionar..." }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: "au-field__select-input",
+                    value: searchValue || selectedOption.label,
+                    placeholder: placeholder || "Selecionar...",
+                    onChange: handleInputChange,
+                    readOnly: !autocomplete,
+                    disabled
+                  }
+                ),
                 /* @__PURE__ */ jsx("div", { className: "au-field__select-icon", children: /* @__PURE__ */ jsx(IconChevronDown, {}) })
               ]
             }
@@ -182,22 +264,24 @@ const SelectField = ({
               role: "listbox",
               "aria-live": "polite",
               tabIndex: -1,
-              children: options.map((option, index) => /* @__PURE__ */ jsxs(
+              style: { maxHeight: `${dropdownMaxHeight}px`, overflowY: "auto" },
+              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("li", { className: "au-field__select-option au-field__select-option--empty", children: EmptyText }) : filteredOptions.map((option, index) => /* @__PURE__ */ jsxs(
                 "li",
                 {
                   className: classNames("au-field__select-option", {
                     "au-field__select-option--highlighted": activeOptionIndex === index,
-                    "au-field__select-option--selected": option.value === currentValue,
+                    "au-field__select-option--selected": option.value === selectedOption.value,
                     "au-field__select-option--disabled": option.disabled
                   }),
+                  ref: activeOptionIndex === index ? activeOptionRef : null,
                   role: "option",
-                  "aria-selected": option.value === currentValue,
+                  "aria-selected": option.value === selectedOption.value,
                   "aria-disabled": option.disabled,
                   onClick: () => selectOption(option.value, option.disabled),
                   onMouseEnter: () => setActiveOptionIndex(index),
                   children: [
                     option.label,
-                    option.disabled ? /* @__PURE__ */ jsx(IconSlash, {}) : option.value === currentValue ? /* @__PURE__ */ jsx(IconCheck, {}) : null
+                    option.disabled ? /* @__PURE__ */ jsx(IconSlash, {}) : option.value === selectedOption.value ? /* @__PURE__ */ jsx(IconCheck, {}) : null
                   ]
                 },
                 option.value
@@ -209,7 +293,7 @@ const SelectField = ({
             {
               hidden: true,
               disabled,
-              value: currentValue,
+              value: selectedOption.value,
               onChange: (e) => selectOption(e.target.value),
               ref: selectElementRef,
               name,