@gustavo-valsechi/client 1.4.357 → 1.4.359

package/dist/src/components/types/form/index.js

@@ -93,7 +93,10 @@ function Form(props) {
     const values = getValues();
     if (!Object.keys(defaultValues).length) {
       const modalContainer = document.getElementById("modal-context-container");
-      import_lodash.default.forEach(props.inputs, (data) => defaultValues[data.name] = "");
+      import_lodash.default.forEach(props.inputs, (data) => {
+        if (import_lodash.default.isArray(data)) return import_lodash.default.forEach(data, (input) => defaultValues[input.name] = "");
+        defaultValues[data.name] = "";
+      });
       setTimeout(() => reset({ ...defaultValues, ...values }, { keepErrors: false }), ((_a = modalContainer == null ? void 0 : modalContainer.contains) == null ? void 0 : _a.call(modalContainer, formRef.current)) ? 300 : 0);
       return;
     }
@@ -115,7 +118,7 @@ function Form(props) {
     reset(defaultValues, { keepErrors: false });
   }, [props.defaultValues, props.inputs, props.clearWhen]);
   const component = (data) => {
-    var _a;
+    var _a, _b, _c, _d;
     let inputType = "";
     inputType = import_lodash.default.upperFirst(import_lodash.default.camelCase(data.type));
     inputType = import_lodash.default.includes(inputType, "Input") ? inputType : `Input${inputType}`;
@@ -132,7 +135,8 @@ function Form(props) {
         setValue,
         getValues,
         setError,
-        watch
+        watch,
+        optional: !!((_d = (_c = (_b = data.validation) == null ? void 0 : _b.safeParse) == null ? void 0 : _c.call(_b, void 0)) == null ? void 0 : _d.success)
       }
     );
   };
@@ -142,12 +146,24 @@ function Form(props) {
     await props.onSubmit(data);
     setSubmitting(false);
   };
+  const setFlexWidth = (inputs, input) => {
+    if (import_lodash.default.some(inputs, (data) => !data.maxLength)) return 1;
+    const minLength = import_lodash.default.min(import_lodash.default.map(inputs, (data) => data.maxLength));
+    return input.maxLength / minLength;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { ref: formRef, onSubmit: handleSubmit(onSubmit), children: [
     import_lodash.default.map(
       props.inputs,
       (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: import_lodash.default.isArray(data) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-content", children: import_lodash.default.map(
         data,
-        (input, index2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-input", children: component(input) }, index2)
+        (input, index2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styles.FormInput,
+          {
+            flex: setFlexWidth(data, input),
+            children: component(input)
+          },
+          index2
+        )
       ) }) : component(data) }, index)
     ),
     import_lodash.default.isArray(props.buttons) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-buttons", children: import_lodash.default.map(

package/dist/src/components/types/form/index.mjs

@@ -2,7 +2,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
-import { Container } from "./styles";
+import { Container, FormInput } from "./styles";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -59,7 +59,10 @@ function Form(props) {
     const values = getValues();
     if (!Object.keys(defaultValues).length) {
       const modalContainer = document.getElementById("modal-context-container");
-      _.forEach(props.inputs, (data) => defaultValues[data.name] = "");
+      _.forEach(props.inputs, (data) => {
+        if (_.isArray(data)) return _.forEach(data, (input) => defaultValues[input.name] = "");
+        defaultValues[data.name] = "";
+      });
       setTimeout(() => reset({ ...defaultValues, ...values }, { keepErrors: false }), ((_a = modalContainer == null ? void 0 : modalContainer.contains) == null ? void 0 : _a.call(modalContainer, formRef.current)) ? 300 : 0);
       return;
     }
@@ -81,7 +84,7 @@ function Form(props) {
     reset(defaultValues, { keepErrors: false });
   }, [props.defaultValues, props.inputs, props.clearWhen]);
   const component = (data) => {
-    var _a;
+    var _a, _b, _c, _d;
     let inputType = "";
     inputType = _.upperFirst(_.camelCase(data.type));
     inputType = _.includes(inputType, "Input") ? inputType : `Input${inputType}`;
@@ -98,7 +101,8 @@ function Form(props) {
         setValue,
         getValues,
         setError,
-        watch
+        watch,
+        optional: !!((_d = (_c = (_b = data.validation) == null ? void 0 : _b.safeParse) == null ? void 0 : _c.call(_b, void 0)) == null ? void 0 : _d.success)
       }
     );
   };
@@ -108,12 +112,24 @@ function Form(props) {
     await props.onSubmit(data);
     setSubmitting(false);
   };
+  const setFlexWidth = (inputs, input) => {
+    if (_.some(inputs, (data) => !data.maxLength)) return 1;
+    const minLength = _.min(_.map(inputs, (data) => data.maxLength));
+    return input.maxLength / minLength;
+  };
   return /* @__PURE__ */ jsxs(Container, { ref: formRef, onSubmit: handleSubmit(onSubmit), children: [
     _.map(
       props.inputs,
       (data, index) => /* @__PURE__ */ jsx(React.Fragment, { children: _.isArray(data) ? /* @__PURE__ */ jsx("div", { className: "form-content", children: _.map(
         data,
-        (input, index2) => /* @__PURE__ */ jsx("div", { className: "form-input", children: component(input) }, index2)
+        (input, index2) => /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            flex: setFlexWidth(data, input),
+            children: component(input)
+          },
+          index2
+        )
       ) }) : component(data) }, index)
     ),
     _.isArray(props.buttons) && /* @__PURE__ */ jsx("div", { className: "form-buttons", children: _.map(

package/dist/src/components/types/form/styles.d.ts

@@ -1 +1,2 @@
 export declare const Container: any;
+export declare const FormInput: any;

package/dist/src/components/types/form/styles.js

@@ -30,7 +30,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  Container: () => Container
+  Container: () => Container,
+  FormInput: () => FormInput
 });
 module.exports = __toCommonJS(styles_exports);
 var import_styled_components = __toESM(require("styled-components"));
@@ -45,10 +46,6 @@ const Container = import_styled_components.default.form`
         display: flex;
         gap: .5rem;
         flex-wrap: wrap;
-        
-        .form-input {
-            flex: 1 1 10rem;
-        }
     }
 
     .form-buttons {
@@ -61,7 +58,11 @@ const Container = import_styled_components.default.form`
         }
     }
 `;
+const FormInput = import_styled_components.default.div`
+    flex: ${({ flex }) => flex} 1 8rem;
+`;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Container
+  Container,
+  FormInput
 });

package/dist/src/components/types/form/styles.mjs

@@ -12,10 +12,6 @@ const Container = styled.form`
         display: flex;
         gap: .5rem;
         flex-wrap: wrap;
-        
-        .form-input {
-            flex: 1 1 10rem;
-        }
     }
 
     .form-buttons {
@@ -28,6 +24,10 @@ const Container = styled.form`
         }
     }
 `;
+const FormInput = styled.div`
+    flex: ${({ flex }) => flex} 1 8rem;
+`;
 export {
-  Container
+  Container,
+  FormInput
 };

package/dist/src/components/types/form/types/select/index.js

@@ -41,6 +41,8 @@ var import_error = require("../error");
 var import_contexts = require("../../../../../contexts");
 var import_lodash = __toESM(require("lodash"));
 var import_options = __toESM(require("./options"));
+var import_option = __toESM(require("./options/option"));
+var import_utils = __toESM(require("@gustavo-valsechi/utils"));
 function InputSelect(props) {
   var _a, _b;
   const containerRef = (0, import_react.useRef)(null);
@@ -50,7 +52,7 @@ function InputSelect(props) {
   const [filter, setFilter] = (0, import_react.useState)("");
   const register = (props.register || ((name) => ({})))(props.name || "");
   const inputValue = ((_a = props.watch) == null ? void 0 : _a.call(props, props.name)) || "";
-  const value = ((_b = props.options) == null ? void 0 : _b[inputValue]) || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-label-value-placeholder", children: "selecione" });
+  const inputLabel = (0, import_option.default)({ content: (_b = props.options) == null ? void 0 : _b[inputValue] }) || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-label-value-placeholder", children: "selecione" });
   (0, import_react.useEffect)(() => {
     var _a2;
     if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
@@ -81,13 +83,13 @@ function InputSelect(props) {
     if (register.onFocus) register.onFocus(event);
   };
   const onChange = (event) => {
-    const value2 = event.target.value || "";
-    setFilter(value2);
-    if (props.onFilter) props.onFilter(value2);
+    const value = event.target.value || "";
+    setFilter(value);
+    if (props.onFilter) props.onFilter(value);
     if (register.onChange) register.onChange(event);
     const optionsElement = document.getElementById(`input[${props.name}-options]`);
     if (!optionsElement) return;
-    optionsElement.setAttribute("value", value2);
+    optionsElement.setAttribute("value", value);
   };
   const onClick = (event) => {
     inputRef.current.focus();
@@ -115,7 +117,7 @@ function InputSelect(props) {
                   type: "text",
                   maxLength: props.maxLength || 255,
                   value: focus ? filter : inputValue,
-                  placeholder: import_lodash.default.isString(value) ? value : (value == null ? void 0 : value.textContent) || "",
+                  placeholder: import_lodash.default.isString(inputLabel) ? inputLabel : import_utils.default.format.textIntoElement(inputLabel) || "",
                   ...register,
                   ref: inputRef,
                   onBlur,
@@ -128,9 +130,9 @@ function InputSelect(props) {
                 "div",
                 {
                   className: "input-label-value",
-                  "data-string": import_lodash.default.isString(value),
+                  "data-string": import_lodash.default.isString(inputLabel),
                   onClick: () => inputRef.current.click(),
-                  children: value
+                  children: inputLabel
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(

package/dist/src/components/types/form/types/select/index.mjs

@@ -7,7 +7,9 @@ import { InputLabel } from "../label";
 import { InputError } from "../error";
 import { useTarget } from "../../../../../contexts";
 import _ from "lodash";
-import InputSelectOption from "./options";
+import InputSelectOptions from "./options";
+import InputSelectOption from "./options/option";
+import Utils from "@gustavo-valsechi/utils";
 function InputSelect(props) {
   var _a, _b;
   const containerRef = useRef(null);
@@ -17,14 +19,14 @@ function InputSelect(props) {
   const [filter, setFilter] = useState("");
   const register = (props.register || ((name) => ({})))(props.name || "");
   const inputValue = ((_a = props.watch) == null ? void 0 : _a.call(props, props.name)) || "";
-  const value = ((_b = props.options) == null ? void 0 : _b[inputValue]) || /* @__PURE__ */ jsx("div", { className: "input-label-value-placeholder", children: "selecione" });
+  const inputLabel = InputSelectOption({ content: (_b = props.options) == null ? void 0 : _b[inputValue] }) || /* @__PURE__ */ jsx("div", { className: "input-label-value-placeholder", children: "selecione" });
   useEffect(() => {
     var _a2;
     if (!(inputRef == null ? void 0 : inputRef.current) || !(containerRef == null ? void 0 : containerRef.current)) return;
     target.save({
       ref: inputRef,
       component: /* @__PURE__ */ jsx(
-        InputSelectOption,
+        InputSelectOptions,
         {
           ...props,
           inputRef,
@@ -48,13 +50,13 @@ function InputSelect(props) {
     if (register.onFocus) register.onFocus(event);
   };
   const onChange = (event) => {
-    const value2 = event.target.value || "";
-    setFilter(value2);
-    if (props.onFilter) props.onFilter(value2);
+    const value = event.target.value || "";
+    setFilter(value);
+    if (props.onFilter) props.onFilter(value);
     if (register.onChange) register.onChange(event);
     const optionsElement = document.getElementById(`input[${props.name}-options]`);
     if (!optionsElement) return;
-    optionsElement.setAttribute("value", value2);
+    optionsElement.setAttribute("value", value);
   };
   const onClick = (event) => {
     inputRef.current.focus();
@@ -82,7 +84,7 @@ function InputSelect(props) {
                   type: "text",
                   maxLength: props.maxLength || 255,
                   value: focus ? filter : inputValue,
-                  placeholder: _.isString(value) ? value : (value == null ? void 0 : value.textContent) || "",
+                  placeholder: _.isString(inputLabel) ? inputLabel : Utils.format.textIntoElement(inputLabel) || "",
                   ...register,
                   ref: inputRef,
                   onBlur,
@@ -95,9 +97,9 @@ function InputSelect(props) {
                 "div",
                 {
                   className: "input-label-value",
-                  "data-string": _.isString(value),
+                  "data-string": _.isString(inputLabel),
                   onClick: () => inputRef.current.click(),
-                  children: value
+                  children: inputLabel
                 }
               ),
               /* @__PURE__ */ jsxs(

package/dist/src/components/types/form/types/select/options/index.d.ts

@@ -1,5 +1,5 @@
 import { IInputSelect } from "../../../../../../interfaces";
-export default function InputSelectOption(props: IInputSelect & {
+export default function InputSelectOptions(props: IInputSelect & {
     inputRef: any;
     width: number;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/types/form/types/select/options/index.js

@@ -30,7 +30,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var options_exports = {};
 __export(options_exports, {
-  default: () => InputSelectOption
+  default: () => InputSelectOptions
 });
 module.exports = __toCommonJS(options_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -39,7 +39,8 @@ var import_styles = require("./styles");
 var import_contexts = require("../../../../../../contexts");
 var import_utils = __toESM(require("@gustavo-valsechi/utils"));
 var import_lodash = __toESM(require("lodash"));
-function InputSelectOption(props) {
+var import_option = __toESM(require("./option"));
+function InputSelectOptions(props) {
   const theme = (0, import_contexts.useTheme)();
   const target = (0, import_contexts.useTarget)();
   const [options, setOptions] = (0, import_react.useState)(props.options);
@@ -54,7 +55,8 @@ function InputSelectOption(props) {
           const filtredValues = import_lodash.default.filter(props.options, (value) => {
             const normalize = (text2) => import_lodash.default.deburr(text2 == null ? void 0 : text2.toLowerCase());
             if (import_lodash.default.isString(value)) return import_lodash.default.includes(normalize(value), normalize(filter));
-            const text = import_utils.default.format.textIntoElement(value);
+            const text = import_utils.default.format.textIntoElement((0, import_option.default)({ content: value }));
+            console.log(text);
             return import_lodash.default.includes(normalize(text), normalize(filter));
           });
           const filtredOptions = {};
@@ -119,16 +121,16 @@ function InputSelectOption(props) {
                 className: "input-option-content-mask",
                 children: !Object.keys(options || {}).length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "input-option empty", children: "Nenhuma op\xE7\xE3o encontrada" }) : import_lodash.default.map(
                   options,
-                  (value, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  (data, value) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     "div",
                     {
                       className: "input-option",
-                      onClick: () => onSelect(key),
-                      "data-string": import_lodash.default.isString(value),
-                      "data-selected": key === props.value,
-                      children: value || ""
+                      onClick: () => onSelect(value),
+                      "data-string": import_lodash.default.isString(data),
+                      "data-selected": value === props.value,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_option.default, { content: data })
                     },
-                    key
+                    value
                   )
                 )
               }

package/dist/src/components/types/form/types/select/options/index.mjs

@@ -6,7 +6,8 @@ import { Container } from "./styles";
 import { useTarget, useTheme } from "../../../../../../contexts";
 import Utils from "@gustavo-valsechi/utils";
 import _ from "lodash";
-function InputSelectOption(props) {
+import InputSelectOption from "./option";
+function InputSelectOptions(props) {
   const theme = useTheme();
   const target = useTarget();
   const [options, setOptions] = useState(props.options);
@@ -21,7 +22,8 @@ function InputSelectOption(props) {
           const filtredValues = _.filter(props.options, (value) => {
             const normalize = (text2) => _.deburr(text2 == null ? void 0 : text2.toLowerCase());
             if (_.isString(value)) return _.includes(normalize(value), normalize(filter));
-            const text = Utils.format.textIntoElement(value);
+            const text = Utils.format.textIntoElement(InputSelectOption({ content: value }));
+            console.log(text);
             return _.includes(normalize(text), normalize(filter));
           });
           const filtredOptions = {};
@@ -86,16 +88,16 @@ function InputSelectOption(props) {
                 className: "input-option-content-mask",
                 children: !Object.keys(options || {}).length ? /* @__PURE__ */ jsx("div", { className: "input-option empty", children: "Nenhuma op\xE7\xE3o encontrada" }) : _.map(
                   options,
-                  (value, key) => /* @__PURE__ */ jsx(
+                  (data, value) => /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: "input-option",
-                      onClick: () => onSelect(key),
-                      "data-string": _.isString(value),
-                      "data-selected": key === props.value,
-                      children: value || ""
+                      onClick: () => onSelect(value),
+                      "data-string": _.isString(data),
+                      "data-selected": value === props.value,
+                      children: /* @__PURE__ */ jsx(InputSelectOption, { content: data })
                     },
-                    key
+                    value
                   )
                 )
               }
@@ -107,5 +109,5 @@ function InputSelectOption(props) {
   );
 }
 export {
-  InputSelectOption as default
+  InputSelectOptions as default
 };

package/dist/src/components/types/form/types/select/options/option/index.d.ts

@@ -0,0 +1,3 @@
+export default function InputSelectOption(props: {
+    content: any;
+}): import("react/jsx-runtime").JSX.Element | "";

package/dist/src/components/types/form/types/select/options/option/index.js

@@ -0,0 +1,52 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var option_exports = {};
+__export(option_exports, {
+  default: () => InputSelectOption
+});
+module.exports = __toCommonJS(option_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_styles = require("./styles");
+var import_lodash = __toESM(require("lodash"));
+function InputSelectOption(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  if (import_lodash.default.isArray(props.content)) return "";
+  if (!!((_a = props.content) == null ? void 0 : _a.icon) || !!((_b = props.content) == null ? void 0 : _b.flag)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { color: (_c = props.content) == null ? void 0 : _c.color, flag: (_d = props.content) == null ? void 0 : _d.flag, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "select-option-identifier", children: [
+        !!((_e = props.content) == null ? void 0 : _e.icon) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { "aria-hidden": true, className: (_f = props.content) == null ? void 0 : _f.icon }),
+        !!((_g = props.content) == null ? void 0 : _g.flag) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "select-option-flag" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: (_h = props.content) == null ? void 0 : _h.label })
+    ] });
+  }
+  return props.content || "";
+}

package/dist/src/components/types/form/types/select/options/option/index.mjs

@@ -0,0 +1,22 @@
+"use client";
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Container } from "./styles";
+import _ from "lodash";
+function InputSelectOption(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  if (_.isArray(props.content)) return "";
+  if (!!((_a = props.content) == null ? void 0 : _a.icon) || !!((_b = props.content) == null ? void 0 : _b.flag)) {
+    return /* @__PURE__ */ jsxs(Container, { color: (_c = props.content) == null ? void 0 : _c.color, flag: (_d = props.content) == null ? void 0 : _d.flag, children: [
+      /* @__PURE__ */ jsxs("div", { className: "select-option-identifier", children: [
+        !!((_e = props.content) == null ? void 0 : _e.icon) && /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: (_f = props.content) == null ? void 0 : _f.icon }),
+        !!((_g = props.content) == null ? void 0 : _g.flag) && /* @__PURE__ */ jsx("div", { className: "select-option-flag" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: (_h = props.content) == null ? void 0 : _h.label })
+    ] });
+  }
+  return props.content || "";
+}
+export {
+  InputSelectOption as default
+};

package/dist/src/components/types/form/types/select/options/option/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: any;

package/dist/src/components/types/form/types/select/options/option/styles.js

@@ -0,0 +1,76 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  Container: () => Container
+});
+module.exports = __toCommonJS(styles_exports);
+var import_styled_components = __toESM(require("styled-components"));
+const Container = import_styled_components.default.div`
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    margin-left: -0.5rem;
+
+    .select-option-identifier {
+        width: 1.3rem;
+        height: 1.3rem;
+        border-radius: 5px;
+        background: ${(props) => props.theme.t05};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+            font-size: .7rem;
+            color: ${(props) => props.theme[props.color || ""] || props.theme.t6};
+        }
+
+        .select-option-flag {
+            width: .8rem;
+            height: .8rem;
+            background-image: url(${(props) => props.flag});
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+    }
+
+    span {
+        font-size: .75rem;
+        font-weight: 500;
+        color: ${(props) => props.theme[props.color || ""] || props.theme.t6};
+    }
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Container
+});

package/dist/src/components/types/form/types/select/options/option/styles.mjs

@@ -0,0 +1,42 @@
+"use client";
+"use client";
+import styled from "styled-components";
+const Container = styled.div`
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    margin-left: -0.5rem;
+
+    .select-option-identifier {
+        width: 1.3rem;
+        height: 1.3rem;
+        border-radius: 5px;
+        background: ${(props) => props.theme.t05};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+            font-size: .7rem;
+            color: ${(props) => props.theme[props.color || ""] || props.theme.t6};
+        }
+
+        .select-option-flag {
+            width: .8rem;
+            height: .8rem;
+            background-image: url(${(props) => props.flag});
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+    }
+
+    span {
+        font-size: .75rem;
+        font-weight: 500;
+        color: ${(props) => props.theme[props.color || ""] || props.theme.t6};
+    }
+`;
+export {
+  Container
+};

package/dist/src/interfaces/components/form/index.d.ts

@@ -17,7 +17,7 @@ export interface IForm {
     formRef?: any;
     onSubmit: (values: any, actions?: any) => void;
     clearWhen?: boolean;
-    inputs: Array<IFormInput>;
+    inputs: Array<IFormInput | Array<IFormInput>>;
     buttons?: Array<IButton>;
 }
 export interface IInputBase {
@@ -29,6 +29,7 @@ export interface IInputBase {
     error?: string;
     disabled?: boolean;
     optional?: boolean;
+    maxLength?: number;
     register?: UseFormRegister<any>;
     validation?: z.ZodTypeAny;
     watch?: (...args: any[]) => string;

package/dist/src/interfaces/components/form/select/index.d.ts

@@ -7,5 +7,4 @@ export interface IInputSelect extends IInputBase {
     } & {
         length?: never;
     };
-    maxLength?: number;
 }

package/dist/src/interfaces/components/form/text/index.d.ts

@@ -2,5 +2,4 @@ import { IInputBase } from "../index";
 export interface IInputText extends IInputBase {
     type: "text" | "password" | undefined;
     mask?: (value: string) => void;
-    maxLength?: number;
 }

package/dist/src/interfaces/components/form/textarea/index.d.ts

@@ -2,6 +2,5 @@ import { IInputBase } from "../index";
 export interface IInputTextarea extends IInputBase {
     type: "textarea";
     mask?: (value: string) => void;
-    maxLength?: number;
     rows?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gustavo-valsechi/client",
-  "version": "1.4.357",
+  "version": "1.4.359",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -28,7 +28,7 @@
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@gustavo-valsechi/server": "1.0.13",
-    "@gustavo-valsechi/utils": "1.0.17",
+    "@gustavo-valsechi/utils": "1.0.19",
     "@hookform/resolvers": "5.2.2",
     "@mui/material": "7.3.7",
     "@mui/x-date-pickers": "8.24.0",