nexaas-ui-components 1.0.22 → 1.0.23

package/dist/index.cjs

@@ -14,7 +14,7 @@ var lodashNamespace = require('lodash');
 var InputMask = require('react-input-mask');
 var ReactModalNamespace = require('react-modal');
 var reactTooltip = require('react-tooltip');
-var reactSelect = require('react-select');
+var Select = require('react-select');
 var AsyncSelect = require('react-select/async');
 var reactTable = require('@tanstack/react-table');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
@@ -47,6 +47,7 @@ var IntlCurrencyInputRaw__default = /*#__PURE__*/_interopDefault(IntlCurrencyInp
 var lodashNamespace__namespace = /*#__PURE__*/_interopNamespace(lodashNamespace);
 var InputMask__default = /*#__PURE__*/_interopDefault(InputMask);
 var ReactModalNamespace__namespace = /*#__PURE__*/_interopNamespace(ReactModalNamespace);
+var Select__default = /*#__PURE__*/_interopDefault(Select);
 var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
 var Fuse__default = /*#__PURE__*/_interopDefault(Fuse);
 
@@ -2506,7 +2507,7 @@ var ModalDialog = ({
   description,
   children
 }) => {
-  const customStyles3 = {
+  const customStyles6 = {
     content: {
       top: "50%",
       left: "50%",
@@ -2537,10 +2538,10 @@ var ModalDialog = ({
         ariaHideApp: false,
         isOpen: open,
         onRequestClose: onClose,
-        style: customStyles3,
+        style: customStyles6,
         contentLabel: "Example Modal",
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(sizes3[size]), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-2 border-b border-b-neutral-200 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[6px] border-b border-b-neutral-200 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
               alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
               title
@@ -2568,7 +2569,7 @@ var ModalDialog = ({
                     }
                   },
                   variant: "secondary",
-                  size: "sm",
+                  size: "md",
                   children: "Cancelar"
                 }
               ),
@@ -2746,7 +2747,7 @@ var SelectField = ({
   small = false
 }) => {
   var _a;
-  const { Option, DropdownIndicator, ClearIndicator, SingleValue } = reactSelect.components;
+  const { Option, DropdownIndicator, ClearIndicator, SingleValue } = Select.components;
   const selectRef = React4.useRef(null);
   const [inputValue, setInputValue] = React4.useState("");
   const [loading, setLoading] = React4.useState(false);
@@ -2988,7 +2989,7 @@ var SelectField = ({
   );
 };
 var ValueContainer = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactSelect.components.ValueContainer, { ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
 };
 
 // src/components/SelectFieldBip/SelectFieldBip.styles.tsx
@@ -3136,14 +3137,14 @@ var SelectFieldBip = ({
   onErrorBip,
   clearAfterSelect = true,
   messages = {
-    searching: "Searching...",
-    debounce: `Type at least {debounce} characters`,
-    emptyMessage: "No options found",
-    loading: "Loading..."
+    searching: "Buscando...",
+    debounce: `Digite pelo menos {debounce} caracteres`,
+    emptyMessage: "Nenhuma op\xE7\xE3o encontrada",
+    loading: "Carregando..."
   }
 }) => {
   var _a;
-  const { Option, SingleValue } = reactSelect.components;
+  const { Option, SingleValue } = Select.components;
   const selectRef = React4.useRef(null);
   const [inputValue, setInputValue] = React4.useState("");
   const [loading, setLoading] = React4.useState(false);
@@ -3375,7 +3376,7 @@ var SelectFieldBip = ({
   );
 };
 var ValueContainer2 = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactSelect.components.ValueContainer, { ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
 };
 var Radio = ({
   disabled,
@@ -5373,6 +5374,855 @@ function InfoIcon({
   );
 }
 
+// src/components/MultiSelect/MultiSelect.styles.tsx
+var customStyles3 = {
+  indicatorSeparator: (provided, { hasValue }) => {
+    return {
+      ...provided,
+      marginTop: "-6px",
+      backgroundColor: hasValue ? "var(--input)" : "transparent"
+    };
+  },
+  input: (provided, state) => ({
+    ...provided,
+    outline: "none",
+    paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
+  }),
+  clearIndicator: (provided) => ({
+    ...provided,
+    color: "var(--label)",
+    marginTop: "-6px",
+    ":hover": {
+      color: "var(--label)"
+    }
+  }),
+  dropdownIndicator: (provided, state) => ({
+    ...provided,
+    color: "var(--paragraph)",
+    display: state.selectProps.isTargeted ? "none" : "flex",
+    paddingRight: "12px",
+    marginTop: "-6px",
+    ":hover": {
+      color: "var(--paragraph)"
+    }
+  }),
+  menu: (provided) => ({
+    ...provided,
+    marginTop: "4px",
+    border: "1px solid var(--neutral-300)",
+    boxShadow: "none",
+    borderRadius: "8px",
+    padding: "0px 8px",
+    zIndex: 70,
+    background: "white"
+  }),
+  singleValue: (base, state) => ({
+    ...base,
+    color: state.data.value === "active" ? "#0EAF86" : "black",
+    display: "flex"
+  }),
+  control: (provided, state) => ({
+    ...provided,
+    cursor: "pointer",
+    border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
+    boxShadow: "none",
+    outline: "none",
+    borderRadius: "0.5rem",
+    paddingLeft: "0px",
+    placeholder: " ",
+    minHeight: "46px",
+    alignItems: "end",
+    paddingTop: "8px",
+    ":hover": {
+      border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
+    }
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    borderRadius: "20px",
+    backgroundColor: "var(--neutral-100)",
+    padding: "0px"
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: "var(--paragraph)",
+    paddingTop: "2px",
+    lineHeight: "16px"
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: "var(--neutral-400)",
+    paddingRight: "6px",
+    paddingLeft: "0px",
+    ":hover": {
+      color: "var(--dangerous-500)"
+    }
+  }),
+  option: (provided, state) => {
+    let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
+    if (state.isDisabled) {
+      color = "rgba(0,0,0,0.30)";
+    }
+    return {
+      ...provided,
+      height: "44px",
+      cursor: "pointer",
+      borderRadius: "8px",
+      margin: "4px 0px",
+      backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
+      color,
+      fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
+      "&:hover": {
+        backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : "var(--neutral-200)"
+      },
+      "&:active": {
+        backgroundColor: "var(--blue-500)",
+        color: "white",
+        fontWeight: 700
+      },
+      "&:active svg": {
+        color: "white",
+        fontWeight: 700
+      },
+      " svg": {
+        color: "white"
+      }
+    };
+  },
+  container: (provided) => ({
+    ...provided,
+    border: "none",
+    outline: "none",
+    boxShadow: "none",
+    padding: "none",
+    margin: "none"
+  })
+};
+var MultiSelect = ({
+  name,
+  options,
+  label = "",
+  error,
+  defaultValue,
+  control,
+  isSearchable = false,
+  required,
+  disabled
+}) => {
+  const fieldValidationMessages = [error == null ? void 0 : error.message];
+  const hasError = {
+    hasError: fieldValidationMessages.some((item) => item !== void 0)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        const { DropdownIndicator, Option } = Select.components;
+        const DropdownIndicatorCustom = (props) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[20px]" }) });
+        };
+        const IconOption = (props) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                height: "100%"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
+            }
+          ) });
+        };
+        const NoOptionsMessage = () => {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-neutral-300", children: "Nenhum dado encontrado" });
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full", id: "multiselect", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Select__default.default,
+            {
+              ...field,
+              ...hasError,
+              isDisabled: disabled,
+              name: field.name,
+              ref: field.ref,
+              styles: customStyles3,
+              placeholder: " ",
+              isSearchable,
+              options,
+              isMulti: true,
+              tabSelectsValue: true,
+              components: {
+                ValueContainer: ValueContainer3,
+                Option: IconOption,
+                NoOptionsMessage,
+                DropdownIndicator: DropdownIndicatorCustom
+              },
+              isOptionDisabled: (option) => option.blocked,
+              hideSelectedOptions: false,
+              closeMenuOnSelect: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: clsx9__default.default("text-label text-sm left-2.5", {
+                [" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
+                ["text-dangerous-500"]: hasError.hasError
+              }),
+              children: [
+                label,
+                required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
+              ]
+            }
+          ),
+          fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-dangerous-500 text-xs -mt-[5px]",
+              role: "alert",
+              "aria-label": message,
+              children: message
+            },
+            index
+          ))
+        ] });
+      }
+    }
+  );
+};
+var ValueContainer3 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
+};
+
+// src/components/InputTag/InputTag.styles.tsx
+var customStyles4 = {
+  input: (provided) => ({
+    ...provided,
+    outline: "none",
+    height: "100%"
+  }),
+  indicatorSeparator: (provided) => ({
+    ...provided,
+    backgroundColor: "transparent"
+  }),
+  clearIndicator: (provided) => ({
+    ...provided,
+    color: "var(--label)",
+    ":hover": {
+      color: "var(--label)"
+    }
+  }),
+  dropdownIndicator: (provided) => ({
+    ...provided,
+    display: "none"
+  }),
+  menu: (provided) => ({
+    ...provided,
+    marginTop: "4px",
+    border: "1px solid var(--neutral-300)",
+    boxShadow: "none",
+    borderRadius: "8px",
+    padding: "0px 8px",
+    zIndex: 30,
+    background: "white"
+  }),
+  control: (provided, state) => {
+    return {
+      ...provided,
+      cursor: "pointer",
+      paddingTop: state.selectProps.hasLabel ? "18px" : "0px",
+      border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.isFocused ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
+      boxShadow: "none",
+      outline: "none",
+      borderRadius: "0.5rem",
+      // height: "52px",
+      // paddingLeft: '8px',
+      placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
+      alignItems: state.selectProps.hasLabel ? "end" : "center",
+      ":hover": {
+        border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.isFocused ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
+        // height: "52px",
+      },
+      ":focus-within": {
+        // height: "52px",
+      }
+    };
+  },
+  multiValue: (provided) => ({
+    ...provided,
+    borderRadius: "20px",
+    backgroundColor: "var(--neutral-100)",
+    padding: "0px 6px"
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: "var(--paragraph)"
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    color: "var(--neutral-400)",
+    ":hover": {
+      color: "var(--dangerous-500)"
+    }
+  }),
+  container: (provided) => ({
+    ...provided,
+    border: "none",
+    outline: "none",
+    boxShadow: "none",
+    padding: "none",
+    margin: "none"
+  })
+};
+var InputTag = ({
+  name,
+  label = "",
+  error,
+  defaultValue,
+  control,
+  required,
+  placeholder,
+  blockSpaces = false
+}) => {
+  const [inputValue, setInputValue] = React4.useState("");
+  const fieldValidationMessages = [error == null ? void 0 : error.message];
+  const hasError = {
+    hasError: fieldValidationMessages.some((item) => item !== void 0)
+  };
+  const removeSpaces = (value) => {
+    return value == null ? void 0 : value.replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        const handleKeyDown = (event) => {
+          if (!inputValue || ((field == null ? void 0 : field.value) || []).find((item) => (item == null ? void 0 : item.value) === inputValue))
+            return;
+          switch (event.key) {
+            case "Enter":
+            case "Tab":
+              field.onChange([
+                ...(field == null ? void 0 : field.value) || [],
+                {
+                  label: blockSpaces ? removeSpaces(inputValue) : inputValue,
+                  value: blockSpaces ? removeSpaces(inputValue) : inputValue
+                }
+              ]);
+              setInputValue("");
+              event.preventDefault();
+          }
+        };
+        const hasLabel = {
+          hasLabel: (label == null ? void 0 : label.length) > 0
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `relative ${label ? "with-label" : ""}`,
+            id: "inputtag",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Select__default.default,
+                {
+                  ...hasError,
+                  ...hasLabel,
+                  ...{ placeholder },
+                  ...field,
+                  styles: customStyles4,
+                  menuIsOpen: false,
+                  placeholder: hasLabel.hasLabel ? " " : placeholder,
+                  isMulti: true,
+                  tabSelectsValue: true,
+                  onKeyDown: handleKeyDown,
+                  isClearable: false,
+                  inputValue,
+                  onInputChange: (newValue) => setInputValue(newValue),
+                  isOptionDisabled: (option) => option.blocked
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: clsx9__default.default("text-label text-sm left-2.5", {
+                    [" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
+                    ["text-dangerous-500"]: hasError.hasError
+                  }),
+                  children: [
+                    label,
+                    required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
+                  ]
+                }
+              ),
+              fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "text-dangerous-500 text-xs mt-[2px]",
+                  role: "alert",
+                  "aria-label": message,
+                  children: message
+                },
+                index
+              ))
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var ValueContainer4 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
+};
+InputTag.displayName = "InputTag";
+
+// src/components/MultiSelectBottom/MultiSelectBottom.styles.tsx
+var customStyles5 = {
+  indicatorSeparator: (provided, { hasValue }) => {
+    return {
+      ...provided,
+      display: "none"
+    };
+  },
+  input: (provided, state) => ({
+    ...provided,
+    outline: "none",
+    paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
+  }),
+  clearIndicator: (provided) => ({
+    ...provided,
+    display: "none"
+  }),
+  dropdownIndicator: (provided, state) => ({
+    ...provided,
+    color: "var(--paragraph)",
+    display: state.selectProps.isTargeted ? "none" : "flex",
+    paddingRight: "12px",
+    ":hover": {
+      color: "var(--paragraph)"
+    }
+  }),
+  menu: (provided) => ({
+    ...provided,
+    marginTop: "4px",
+    border: "1px solid var(--neutral-300)",
+    boxShadow: "none",
+    borderRadius: "8px",
+    padding: "0px 8px",
+    zIndex: 70,
+    background: "white"
+  }),
+  singleValue: (base, state) => ({
+    ...base,
+    color: state.data.value === "active" ? "#0EAF86" : "black",
+    display: "flex"
+  }),
+  control: (provided, state) => ({
+    ...provided,
+    cursor: "pointer",
+    border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
+    boxShadow: "none",
+    outline: "none",
+    borderRadius: "0.5rem",
+    paddingLeft: "8px",
+    placeholder: " ",
+    height: "46px",
+    alignItems: "end",
+    ":hover": {
+      border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
+    }
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    borderRadius: "20px",
+    backgroundColor: "var(--neutral-100)",
+    padding: "0px 0px",
+    display: "none"
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: "var(--paragraph)",
+    paddingTop: "6px"
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    paddingRight: "6px",
+    paddingLeft: "0px",
+    color: "var(--neutral-400)",
+    ":hover": {
+      color: "var(--dangerous-500)"
+    }
+  }),
+  option: (provided, state) => {
+    let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
+    if (state.isDisabled) {
+      color = "rgba(0,0,0,0.30)";
+    }
+    return {
+      ...provided,
+      height: "44px",
+      cursor: "pointer",
+      borderRadius: "8px",
+      margin: "4px 0px",
+      backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
+      color,
+      fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
+      "&:hover": {
+        backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : "var(--neutral-200)"
+      },
+      "&:active": {
+        backgroundColor: "var(--blue-500)",
+        color: "white",
+        fontWeight: 700
+      },
+      "&:active svg": {
+        color: "white",
+        fontWeight: 700
+      },
+      " svg": {
+        color: "white"
+      }
+    };
+  },
+  container: (provided) => ({
+    ...provided,
+    border: "none",
+    outline: "none",
+    boxShadow: "none",
+    padding: "none",
+    margin: "none"
+  }),
+  valueContainer: (provided) => ({
+    ...provided,
+    padding: "2px 0px"
+  })
+};
+var MultiSelectBottom = ({
+  name,
+  options,
+  label = "",
+  error,
+  defaultValue,
+  control,
+  isSearchable = false,
+  required,
+  disabled,
+  emptyMessage,
+  filterOptions,
+  debounce: debounce2 = 0
+}) => {
+  const [loading, setLoading] = React4.useState(false);
+  const [optionsList, setOptionsList] = React4.useState(() => options || []);
+  const fieldValidationMessages = [error == null ? void 0 : error.message];
+  const hasError = {
+    hasError: fieldValidationMessages.some((item) => item !== void 0)
+  };
+  ({
+    hasLabel: (label == null ? void 0 : label.length) > 0
+  });
+  const loadOptions = (inputValue) => {
+    setLoading(true);
+    if (isSearchable && filterOptions) {
+      if (!debounce2 || debounce2 && inputValue.length >= debounce2) {
+        const result = filterOptions(inputValue);
+        setLoading(false);
+        return result;
+      }
+    } else {
+      setOptionsList(options);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        var _a, _b;
+        const { DropdownIndicator, Option } = Select.components;
+        const DropdownIndicatorCustom = (props) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[20px]" }) });
+        };
+        const NoOptionsMessage = (props) => {
+          var _a2;
+          if (props.selectProps.inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && props.selectProps.inputValue.length < debounce2) {
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-neutral-300", children: [
+              "Digite ",
+              debounce2,
+              " ou mais caracteres para pesquisar"
+            ] });
+          } else if (props.selectProps.inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-neutral-300", children: "Nenhum dado encontrado" });
+          }
+        };
+        const IconOption = (props) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                height: "100%"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
+            }
+          ) });
+        };
+        const LoadingMessage = (props) => {
+          if (!debounce2 || debounce2 && props.selectProps.inputValue.length >= debounce2) {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ...props.innerProps,
+                className: "flex items-center gap-[6px] p-2",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      className: "animate-spin ",
+                      src: "/spinner.svg",
+                      alt: "circle",
+                      width: 16,
+                      height: 16
+                    }
+                  ),
+                  "Buscando..."
+                ]
+              }
+            );
+          } else if (debounce2 && props.selectProps.inputValue.length < debounce2) {
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-neutral-300", children: [
+              "Digite ",
+              debounce2,
+              " ou mais caracteres para pesquisar"
+            ] });
+          }
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full", id: "multiselectbottom", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AsyncSelect__default.default,
+            {
+              ...field,
+              ...hasError,
+              isDisabled: disabled,
+              name: field.name,
+              ref: field.ref,
+              styles: customStyles5,
+              placeholder: " ",
+              isSearchable,
+              options: optionsList,
+              isMulti: true,
+              defaultOptions: debounce2 > 0 ? false : options ? optionsList : true,
+              loadOptions,
+              tabSelectsValue: true,
+              components: {
+                ValueContainer: ValueContainer5,
+                Option: IconOption,
+                NoOptionsMessage,
+                LoadingMessage,
+                DropdownIndicator: DropdownIndicatorCustom
+              },
+              isOptionDisabled: (option) => option.blocked,
+              hideSelectedOptions: false,
+              closeMenuOnSelect: false,
+              backspaceRemovesValue: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: clsx9__default.default("text-label text-sm left-2.5", {
+                ["text-dangerous-500"]: hasError.hasError
+              }),
+              children: [
+                label,
+                required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
+              ]
+            }
+          ),
+          fieldValidationMessages == null ? void 0 : fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-dangerous-500 text-xs mt-[3px]",
+              role: "alert",
+              "aria-label": message,
+              children: message
+            },
+            index
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-x-2 gap-y-1 flex-wrap", children: ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 ? (_b = field == null ? void 0 : field.value) == null ? void 0 : _b.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-p-sm bg-neutral-100 rounded-[20px] py-2 px-3 flex items-center justify-between mt-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  const copy = [...field.value];
+                  const index = copy.findIndex(
+                    (opt) => opt.value == item.value
+                  );
+                  copy.splice(index, 1);
+                  field.onChange(copy);
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-sm text-neutral-400" })
+              }
+            )
+          ] })) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-md text-label pt-2 pl-2", children: emptyMessage || "Nenhuma op\xE7\xE3o selecionada" }) })
+        ] });
+      }
+    }
+  );
+};
+var ValueContainer5 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
+};
+MultiSelectBottom.displayName = "MultiSelectBottom";
+function PageBox(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5 px-4 border border-neutral-200 rounded-lg", children: [
+    (props == null ? void 0 : props.title) && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-t-xs font-bold text-title mb-4", children: props.title }),
+    props == null ? void 0 : props.children
+  ] });
+}
+var PageHeader = ({
+  title,
+  breadcrumbs,
+  children,
+  description
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row place-content-between font-sans pb-4 w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center text-p-lg text-label", children: breadcrumbs && breadcrumbs.map((breadcrumb, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: breadcrumb.link ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: breadcrumb.link,
+          className: "hover:no-underline hover:text-paragraph",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cursor-pointer flex items-center", children: [
+            index > 0 && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-right" }),
+            breadcrumb.name
+          ] })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-right" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: index === breadcrumbs.length - 1 ? "text-paragraph" : "",
+            children: breadcrumb.name
+          }
+        )
+      ] }) }, index)) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-t-md text-title font-bold mb-1", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-lg text-label", children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 md:justify-end flex-1 mt-2 md:mt-0", children })
+  ] });
+};
+var variants4 = {
+  primary: {
+    bar: "bg-gradient-to-b from-blue-start to-blue-end",
+    text: "text-blue-500"
+  },
+  success: {
+    bar: "bg-gradient-to-b from-success-start to-success-end",
+    text: "text-success-500"
+  },
+  danger: {
+    bar: "bg-gradient-to-b from-danger-start to-danger-end",
+    text: "text-dangerous-600"
+  },
+  info: {
+    bar: "bg-gradient-to-b from-blue-start to-blue-end",
+    text: "text-blue-500"
+  }
+};
+var ProgressBar = ({
+  percentage,
+  variant = "primary",
+  status
+}) => {
+  const [barPercentage, setBarPercentage] = React4.useState(() => fixPercentage());
+  function fixPercentage() {
+    if (percentage > 100) {
+      return 100;
+    } else {
+      return percentage;
+    }
+  }
+  React4.useEffect(() => {
+    setBarPercentage(fixPercentage());
+  }, [percentage]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-[2px] min-w-[170px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full p-[1px] border border-neutral-300 rounded-[15px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx9__default.default(variants4[variant].bar, "h-[14px] rounded-[15px]"),
+        style: { width: `${barPercentage}%` }
+      }
+    ) }),
+    status && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx9__default.default(variants4[variant].text, "text-blue-500 text-xs"), children: [
+      status,
+      percentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
+        "\xA0- ",
+        percentage,
+        " %"
+      ] })
+    ] })
+  ] });
+};
+function SimpleTab({ tabs, onClick }) {
+  const [currentTab, setCurrentTab] = React4.useState(0);
+  function isCurrentTab(index) {
+    return index === currentTab;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full flex-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-neutral-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mb-px flex", "aria-label": "Tabs", children: tabs.filter((item) => !item.hidden).map((tab, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        className: clsx9__default.default(
+          isCurrentTab(index) ? "border-rose-700 text-rose-700 font-bold hover:border-rose-800 hover:text-rose-800 hover:font-bold" : "border-transparent text-label hover:text-paragraph",
+          "group cursor-pointer flex items-center border-b-2 py-1 px-4 text-base"
+        ),
+        "aria-current": isCurrentTab(index) ? "page" : void 0,
+        onClick: () => {
+          setCurrentTab(index);
+          if (onClick) {
+            onClick(tabs[index]);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: "tab-icon",
+              className: clsx9__default.default(
+                isCurrentTab(index) ? "text-rose-700 group-hover:text-rose-800" : "text-label group-hover:text-paragraph",
+                { "-ml-0.5 mr-2": tab.icon }
+              ),
+              "aria-hidden": "true",
+              children: tab.icon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: tab.label })
+        ]
+      },
+      tab.key
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex-1 flex flex-col", children: tabs[currentTab].children })
+  ] }) });
+}
+
 exports.Accordion = Accordion;
 exports.Badge = Badge;
 exports.Button = Button;
@@ -5394,17 +6244,24 @@ exports.Input = Input;
 exports.InputMoney = InputMoney;
 exports.InputNumber = InputNumber;
 exports.InputPercentage = InputPercentage;
+exports.InputTag = InputTag;
 exports.Item = Item;
 exports.Logo = Logo;
 exports.MaskedInput = MaskedInput;
 exports.Menu = Menu;
 exports.ModalDialog = ModalDialog;
+exports.MultiSelect = MultiSelect;
+exports.MultiSelectBottom = MultiSelectBottom;
+exports.PageBox = PageBox;
+exports.PageHeader = PageHeader;
 exports.PaginationSelect = PaginationSelect;
 exports.Popover = Popover3;
+exports.ProgressBar = ProgressBar;
 exports.Radio = Radio;
 exports.RocketIcon = RocketIcon;
 exports.SelectField = SelectField;
 exports.SelectFieldBip = SelectFieldBip;
+exports.SimpleTab = SimpleTab;
 exports.SpinnerIcon = SpinnerIcon;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -5415,7 +6272,7 @@ exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
 exports.Toggle = Toggle;
-exports.ValueContainer = ValueContainer;
+exports.ValueContainer = ValueContainer4;
 exports.sizes = sizes2;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map