nexaas-ui-components 1.0.21 → 1.0.23

package/dist/index.js

@@ -1,22 +1,24 @@
 import * as React4 from 'react';
-import React4__default, { forwardRef, useEffect, useState, useRef, useMemo, cloneElement, Fragment as Fragment$1 } from 'react';
+import React4__default, { forwardRef, useEffect, useState, useRef, useMemo, cloneElement, Fragment as Fragment$1, useReducer } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx9, { clsx } from 'clsx';
 import { DateInput3, DateRangePicker3, DatePicker3 } from '@blueprintjs/datetime2';
 import { Controller } from 'react-hook-form';
 import { create } from 'zustand';
 import { parse, format, set, startOfWeek, endOfWeek, startOfMonth, endOfMonth, sub, subYears } from 'date-fns';
-import { Switch, Popover, PopoverButton, PopoverPanel, Listbox, ListboxOptions, Combobox, Transition, Menu as Menu$1, MenuButton, MenuItems, MenuItem, ListboxOption } from '@headlessui/react';
+import { Switch, Popover, PopoverButton, PopoverPanel, Listbox, ListboxOptions, Combobox, Transition, Menu as Menu$1, MenuButton, MenuItems, MenuItem, ListboxOption, Dialog } from '@headlessui/react';
 import { Float } from '@headlessui-float/react';
 import IntlCurrencyInputRaw from 'react-intl-currency-input';
 import * as lodashNamespace from 'lodash';
 import InputMask from 'react-input-mask';
 import * as ReactModalNamespace from 'react-modal';
 import { Tooltip } from 'react-tooltip';
-import { components } from 'react-select';
+import Select, { components } from 'react-select';
 import AsyncSelect from 'react-select/async';
 import { useReactTable, getExpandedRowModel, getFacetedUniqueValues, getFacetedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
+import Fuse from 'fuse.js';
+import { usePapaParse } from 'react-papaparse';
 
 // src/components/Button.tsx
 var SpinnerIcon = (props) => /* @__PURE__ */ jsx(
@@ -67,7 +69,7 @@ var variants = {
     text: "shadow-button bg-surface border-[0.5px] border-neutral-400 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:shadow-none disabled:text-neutral-400 disabled:opacity-50"
   },
   icon: {
-    text: "shadow-button bg-white border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-[#f5f5f5] hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
+    text: "shadow-button gap-1 bg-white border-[0.5px] border-neutral-300 text-neutral-500 hover:bg-[#f5f5f5] hover:text-neutral-600 active:bg-neutral-100 active:text-neutral-600 disabled:text-neutral-400 disabled:border-[0.5px] disabled:border-disabled disabled:bg-white disabled:opacity-50 active:shadow-none"
   },
   outline: {
     text: "shadow-button bg-surface border-[0.5px] border-rose-500 text-rose-500 hover:bg-rose-50 hover:text-rose-600 active:bg-rose-100 active:text-rose-600 disabled:bg-surface disabled:border-[0.5px] disabled:border-rose-700 disabled:opacity-50 active:shadow-none"
@@ -203,7 +205,7 @@ var Button = ({
 };
 var sizes2 = {
   xxs: {
-    text: "min-h-[14px] max-h-[40px]"
+    text: "min-h-[14px] max-h-[40px] text-[14px] gap-[4px]"
   },
   xs: {
     text: "h-[36px]"
@@ -2474,7 +2476,7 @@ var ModalDialog = ({
   description,
   children
 }) => {
-  const customStyles3 = {
+  const customStyles6 = {
     content: {
       top: "50%",
       left: "50%",
@@ -2505,10 +2507,10 @@ var ModalDialog = ({
         ariaHideApp: false,
         isOpen: open,
         onRequestClose: onClose,
-        style: customStyles3,
+        style: customStyles6,
         contentLabel: "Example Modal",
         children: /* @__PURE__ */ jsxs("div", { className: clsx9(sizes3[size]), children: [
-          /* @__PURE__ */ jsxs("div", { className: "pb-2 border-b border-b-neutral-200 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "pb-[6px] border-b border-b-neutral-200 flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
               alertType && /* @__PURE__ */ jsx("div", { className: clsx9([alertTypes[alertType]], "text-[30px]"), children: icon }),
               title
@@ -2536,7 +2538,7 @@ var ModalDialog = ({
                     }
                   },
                   variant: "secondary",
-                  size: "sm",
+                  size: "md",
                   children: "Cancelar"
                 }
               ),
@@ -3104,10 +3106,10 @@ 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;
@@ -3193,15 +3195,15 @@ var SelectFieldBip = ({
               }
             );
           } else if (debounce2 && inputValue.length < debounce2) {
-            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.debounce.replace("{debounce}", String(debounce2)) });
+            return /* @__PURE__ */ jsx("div", { style: { color: "var(--label)" }, className: "p-2 text-[14px]", children: messages.debounce.replace("{debounce}", String(debounce2)) });
           }
         };
         const NoOptionsMessage = (props) => {
           var _a2;
           if (inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && inputValue.length < debounce2) {
-            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.debounce.replace("{debounce}", String(debounce2)) });
+            return /* @__PURE__ */ jsx("div", { className: "p-2 text-[14px]", style: { color: "var(--label)" }, children: messages.debounce.replace("{debounce}", String(debounce2)) });
           } else if (inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
-            return /* @__PURE__ */ jsx("div", { className: "p-2 text-dark-blue-300", children: messages.emptyMessage });
+            return /* @__PURE__ */ jsx("div", { className: "p-2 text-[14px]", style: { color: "var(--label)" }, children: messages.emptyMessage });
           }
         };
         const DropdownIndicatorCustom = (props) => {
@@ -4579,7 +4581,1617 @@ var EditableText = ({
     }
   );
 };
+var EditableTextSelect = ({
+  control,
+  name,
+  emptyLabel,
+  options,
+  optionStyle,
+  valueStyle,
+  showInputSeach,
+  onChangeValue
+}) => {
+  const [showModal, setShowModal] = useState(false);
+  const [optionsList, setOptionsList] = useState(() => options);
+  const [inputSearch, setInputSearch] = useState("");
+  const optionsFuse = {
+    includeScore: false,
+    keys: ["name"]
+  };
+  const fuse = new Fuse(optionsList, optionsFuse);
+  const filter = () => {
+    var _a;
+    let results = [...options];
+    if (inputSearch) {
+      results = (_a = fuse.search(inputSearch)) == null ? void 0 : _a.map((result) => result.item);
+    }
+    setOptionsList(results);
+  };
+  useEffect(() => {
+    setOptionsList(() => options);
+  }, [options]);
+  useEffect(() => {
+    filter();
+  }, [inputSearch]);
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        var _a;
+        return /* @__PURE__ */ jsxs(Menu$1, { children: [
+          /* @__PURE__ */ jsx(Menu$1.Button, { children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "group flex gap-[5px] cursor-pointer z-[500] items-center",
+              onClick: () => setShowModal(!showModal),
+              children: [
+                field.value ? valueStyle ? valueStyle(field.value) : (_a = field == null ? void 0 : field.value) == null ? void 0 : _a.name : /* @__PURE__ */ jsx(
+                  "label",
+                  {
+                    className: clsx9(
+                      {
+                        ["text-label"]: !field.value,
+                        ["text-paragraph"]: field.value
+                      },
+                      "text-p-md group-hover:underline group-hover:underline-offset-[3px] cursor-pointer decoration-blue-500"
+                    ),
+                    children: emptyLabel ? emptyLabel : "N\xE3o informado"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "i",
+                  {
+                    style: { fontSize: "16px" },
+                    className: "uil uil-pen text-sm text-blue-500"
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Menu$1.Items, { children: /* @__PURE__ */ jsxs("div", { className: "w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
+            showInputSeach && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(
+              InputSmall,
+              {
+                icon: /* @__PURE__ */ jsx("i", { className: "uil uil-search" }),
+                onChange: (e) => setInputSearch(e),
+                value: inputSearch,
+                placeholder: "Pesquisar",
+                clearField: true,
+                onKeyDown: (e) => {
+                  if (e.key == " " || e.code == "Space") {
+                    e.stopPropagation();
+                  }
+                }
+              }
+            ) }),
+            optionsList == null ? void 0 : optionsList.map((opt) => {
+              var _a2;
+              const selected = (opt == null ? void 0 : opt.id) === ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.id);
+              return /* @__PURE__ */ jsx(
+                Menu$1.Item,
+                {
+                  onClick: () => {
+                    field.onChange(opt);
+                    if (onChangeValue) {
+                      onChangeValue(opt);
+                    }
+                  },
+                  as: "button",
+                  className: clsx9(
+                    "p-3 mb-1 rounded-lg items-center flex whitespace-nowrap no-underline w-full",
+                    {
+                      "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
+                    },
+                    {
+                      "hover:bg-neutral-100 text-paragraph": !selected
+                    },
+                    {
+                      "cursor-pointer": !opt.disabled
+                    }
+                  ),
+                  children: /* @__PURE__ */ jsx("div", { className: "flex gap-2 w-full items-center whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between items-center", children: [
+                    optionStyle ? /* @__PURE__ */ jsx("div", { children: optionStyle(opt) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-bold", children: opt == null ? void 0 : opt.title }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: clsx9({
+                            "text-label": opt.disabled
+                          }),
+                          children: opt.name
+                        }
+                      ),
+                      opt == null ? void 0 : opt.description
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: clsx9(
+                          "group-hover:text-[#fff] ",
+                          {
+                            "text-[#fff]": selected
+                          },
+                          {
+                            "text-blue-500": !selected
+                          }
+                        ),
+                        children: selected && /* @__PURE__ */ jsx("i", { className: "uil uil-check" })
+                      }
+                    )
+                  ] }) })
+                }
+              );
+            })
+          ] }) })
+        ] });
+      }
+    }
+  );
+};
+function ImagePreview({ open, setOpen, previewImage }) {
+  return /* @__PURE__ */ jsx(Transition.Root, { show: open, as: Fragment$1, children: /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      as: "div",
+      className: "relative z-[999]",
+      onClose: () => setOpen(false),
+      children: [
+        /* @__PURE__ */ jsx(
+          Transition.Child,
+          {
+            as: Fragment$1,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ jsx(
+          Transition.Child,
+          {
+            as: Fragment$1,
+            enter: "ease-out duration-300",
+            enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            enterTo: "opacity-100 translate-y-0 sm:scale-100",
+            leave: "ease-in duration-200",
+            leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
+            leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
+            children: /* @__PURE__ */ jsx(Dialog.Panel, { className: "flex flex-col min-w-[350px] min-h-[250px] relative transform overflow-hidden rounded-lg bg-white p-6 text-left shadow-xl transition-all", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-2", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-t-sm font-bold", children: "Pr\xE9via da imagem" }),
+                /* @__PURE__ */ jsx(
+                  "i",
+                  {
+                    className: "uil uil-times text-[28px] cursor-pointer",
+                    onClick: () => setOpen(false)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "border-b border-neutral-200 mb-4" }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-1 h-full items-center justify-center rounded-lg w-full ", children: /* @__PURE__ */ jsx("img", { src: previewImage, alt: "previewImage" }) })
+            ] }) })
+          }
+        ) }) })
+      ]
+    }
+  ) });
+}
+var FileStatus = ({
+  name,
+  isLoading,
+  size,
+  onRemove,
+  isImage,
+  image
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: isImage ? /* @__PURE__ */ jsx(
+    ImageFile,
+    {
+      isLoading,
+      name,
+      size,
+      onRemove,
+      image
+    }
+  ) : /* @__PURE__ */ jsx(
+    File,
+    {
+      isLoading,
+      name,
+      size,
+      onRemove,
+      image
+    }
+  ) });
+};
+var ImageFile = ({ isLoading, name, size, onRemove, image }) => {
+  const [imagePreviewModal, setImagePreviewModal] = useState(false);
+  const [previewImage, setPreviewImage] = useState();
+  return /* @__PURE__ */ jsx("div", { className: "group h-[130px] w-[130px] flex justify-between border border-neutral-300 rounded-[8px]", children: !isLoading && image ? /* @__PURE__ */ jsxs("div", { className: "w-full h-full relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: "hidden group-hover:block absolute top-3 left-3", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "w-[32px] h-[32px]",
+          variant: "iconSecondary",
+          onClick: (evt) => {
+            setImagePreviewModal(true);
+            let newPreviewImage = new window.Image();
+            newPreviewImage.src = image;
+            setPreviewImage(newPreviewImage);
+          },
+          size: "xs",
+          icon: /* @__PURE__ */ jsx("i", { className: "uil uil-search-plus text-[22px]" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ImagePreview,
+        {
+          open: imagePreviewModal,
+          setOpen: setImagePreviewModal,
+          previewImage
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "block absolute top-3 right-3", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "w-[32px] h-[32px]",
+        variant: "iconSecondary",
+        onClick: onRemove,
+        size: "xs",
+        icon: /* @__PURE__ */ jsx("i", { className: "uil uil-times text-xl" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "w-full h-full group-hover:bg-[#16203499]/60 z-10", children: /* @__PURE__ */ jsx("img", { className: "relative  -z-10", src: image, alt: "tumbnails" }) })
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-between p-[10px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col ", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex self-end", children: /* @__PURE__ */ jsx(
+        "i",
+        {
+          onClick: onRemove,
+          className: "uil uil-times text-[28px] cursor-pointer"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex self-center items-center justify-center w-12 h-12 bg-blue-500 rounded-full animate-spin", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: `/spinner-white.svg`,
+          alt: "circle",
+          width: 30,
+          height: 30
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-p-sm", children: name }),
+      /* @__PURE__ */ jsxs("div", { className: "text-xxs text-label", children: [
+        size.to,
+        " KB"
+      ] })
+    ] })
+  ] }) });
+};
+var File = ({ isLoading, name, size, onRemove, image }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full md:w-[410px] flex items-center justify-between px-3 py-2 border border-neutral-300 rounded-[4px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-x-2 items-center", children: [
+      isLoading ? /* @__PURE__ */ jsx(SpinnerIcon, { width: 19, height: 19, className: "animate-spin" }) : /* @__PURE__ */ jsx("span", { className: "text-success-500 flex", children: /* @__PURE__ */ jsx("i", { className: "uil uil-check-circle text-[23px]" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-label self-end flex", children: /* @__PURE__ */ jsx("i", { className: "uil uil-file text-xs" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-p-sm", children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: image,
+              download: name,
+              className: "text-blue-500 hover:text-blue-500 hover:underline active:text-blue-600 active:underline active:underline-offset-4",
+              children: name
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-xxs text-label", children: [
+          size ? size.toLocaleString("en-US", {
+            style: "decimal"
+            // Other options: 'currency', 'percent', etc.
+          }) : null,
+          " ",
+          "KB"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "i",
+      {
+        onClick: onRemove,
+        className: "uil uil-times text-[24px] text-neutral-600 cursor-pointer"
+      }
+    )
+  ] });
+};
+
+// src/components/FileUpload/FileUploadReducer.tsx
+var initialState = {
+  files: []
+};
+function reducer(state, action) {
+  var _a, _b;
+  switch (action.type) {
+    case "UPLOAD_START":
+      return {
+        files: [
+          ...state == null ? void 0 : state.files,
+          {
+            name: action.payload.file.name,
+            size: action.payload.file.size,
+            image: action.payload.file,
+            type: action.payload.file.type,
+            loading: true
+          }
+        ]
+      };
+    case "UPLOAD_END":
+      return {
+        files: (_a = state == null ? void 0 : state.files) == null ? void 0 : _a.map((file) => {
+          if (file.name === action.payload.name) {
+            return {
+              ...file,
+              image: action.payload.result,
+              loading: false
+            };
+          }
+          return file;
+        })
+      };
+    case "REMOVE_FILE":
+      return {
+        files: (_b = state == null ? void 0 : state.files) == null ? void 0 : _b.filter(
+          (file) => file.name !== action.payload.name
+        )
+      };
+    default:
+      return state;
+  }
+}
+var IconFile = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "30",
+    viewBox: "0 0 24 30",
+    ...props,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M24 10.41C23.9844 10.2722 23.9542 10.1364 23.91 10.005V9.87C23.8379 9.71577 23.7417 9.574 23.625 9.45L14.625 0.45C14.501 0.333324 14.3592 0.237121 14.205 0.165H14.07L13.59 0H4.5C3.30653 0 2.16193 0.474106 1.31802 1.31802C0.474106 2.16193 0 3.30653 0 4.5V25.5C0 26.6935 0.474106 27.8381 1.31802 28.682C2.16193 29.5259 3.30653 30 4.5 30H19.5C20.6935 30 21.8381 29.5259 22.682 28.682C23.5259 27.8381 24 26.6935 24 25.5V10.5C24 10.5 24 10.5 24 10.41ZM15 5.115L18.885 9H15V5.115ZM21 25.5C21 25.8978 20.842 26.2794 20.5607 26.5607C20.2794 26.842 19.8978 27 19.5 27H4.5C4.10218 27 3.72064 26.842 3.43934 26.5607C3.15804 26.2794 3 25.8978 3 25.5V4.5C3 4.10217 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H12V10.5C12 10.8978 12.158 11.2794 12.4393 11.5607C12.7206 11.842 13.1022 12 13.5 12H21V25.5Z",
+        fill: "#009EDB"
+      }
+    )
+  }
+);
+var IconCheck = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "22",
+    height: "16",
+    viewBox: "0 0 22 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M21.065 0.815035C20.9256 0.674443 20.7597 0.562851 20.5769 0.486698C20.3941 0.410545 20.198 0.371338 20 0.371338C19.802 0.371338 19.6059 0.410545 19.4231 0.486698C19.2403 0.562851 19.0744 0.674443 18.935 0.815035L7.76 12.005L3.065 7.29503C2.92022 7.15518 2.74931 7.04521 2.56202 6.9714C2.37474 6.89759 2.17476 6.8614 1.97348 6.86488C1.77221 6.86836 1.5736 6.91145 1.38898 6.99169C1.20436 7.07194 1.03736 7.18775 0.897501 7.33254C0.757643 7.47732 0.647672 7.64823 0.573866 7.83551C0.50006 8.02279 0.463864 8.22278 0.467347 8.42405C0.470829 8.62532 0.513921 8.82394 0.594161 9.00855C0.674401 9.19317 0.790219 9.36018 0.935001 9.50004L6.695 15.26C6.83445 15.4006 7.00035 15.5122 7.18314 15.5884C7.36593 15.6645 7.56198 15.7037 7.76 15.7037C7.95802 15.7037 8.15408 15.6645 8.33687 15.5884C8.51966 15.5122 8.68556 15.4006 8.825 15.26L21.065 3.02004C21.2173 2.87957 21.3388 2.70909 21.4219 2.51935C21.505 2.3296 21.5479 2.12469 21.5479 1.91754C21.5479 1.71038 21.505 1.50548 21.4219 1.31573C21.3388 1.12598 21.2173 0.955499 21.065 0.815035Z",
+        fill: "#009EDB"
+      }
+    )
+  }
+);
+var IconFileUpload = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "30",
+    height: "30",
+    viewBox: "0 0 30 30",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10.0649 8.56503L13.4999 5.11503V19.5C13.4999 19.8979 13.6579 20.2794 13.9392 20.5607C14.2205 20.842 14.6021 21 14.9999 21C15.3977 21 15.7792 20.842 16.0605 20.5607C16.3418 20.2794 16.4999 19.8979 16.4999 19.5V5.11503L19.9349 8.56503C20.0743 8.70562 20.2402 8.81721 20.423 8.89337C20.6058 8.96952 20.8019 9.00873 20.9999 9.00873C21.1979 9.00873 21.394 8.96952 21.5767 8.89337C21.7595 8.81721 21.9254 8.70562 22.0649 8.56503C22.2055 8.42558 22.3171 8.25968 22.3932 8.07689C22.4694 7.8941 22.5086 7.69805 22.5086 7.50003C22.5086 7.30201 22.4694 7.10595 22.3932 6.92316C22.3171 6.74037 22.2055 6.57447 22.0649 6.43503L16.0649 0.435028C15.9222 0.298467 15.754 0.191419 15.5699 0.120028C15.2047 -0.0299994 14.7951 -0.0299994 14.4299 0.120028C14.2457 0.191419 14.0775 0.298467 13.9349 0.435028L7.93488 6.43503C7.79502 6.57489 7.68408 6.74092 7.60839 6.92365C7.5327 7.10639 7.49374 7.30224 7.49374 7.50003C7.49374 7.69782 7.5327 7.89367 7.60839 8.0764C7.68408 8.25914 7.79502 8.42517 7.93488 8.56503C8.07474 8.70489 8.24077 8.81583 8.4235 8.89152C8.60624 8.96721 8.80209 9.00617 8.99988 9.00617C9.19767 9.00617 9.39352 8.96721 9.57625 8.89152C9.75898 8.81583 9.92502 8.70489 10.0649 8.56503ZM28.4999 15C28.1021 15 27.7205 15.1581 27.4392 15.4394C27.1579 15.7207 26.9999 16.1022 26.9999 16.5V25.5C26.9999 25.8979 26.8418 26.2794 26.5605 26.5607C26.2792 26.842 25.8977 27 25.4999 27H4.49988C4.10205 27 3.72052 26.842 3.43922 26.5607C3.15791 26.2794 2.99988 25.8979 2.99988 25.5V16.5C2.99988 16.1022 2.84184 15.7207 2.56054 15.4394C2.27923 15.1581 1.8977 15 1.49988 15C1.10205 15 0.720522 15.1581 0.439218 15.4394C0.157913 15.7207 -0.00012207 16.1022 -0.00012207 16.5V25.5C-0.00012207 26.6935 0.473984 27.8381 1.3179 28.682C2.16181 29.5259 3.3064 30 4.49988 30H25.4999C26.6934 30 27.8379 29.5259 28.6819 28.682C29.5258 27.8381 29.9999 26.6935 29.9999 25.5V16.5C29.9999 16.1022 29.8418 15.7207 29.5605 15.4394C29.2792 15.1581 28.8977 15 28.4999 15Z",
+        fill: "white"
+      }
+    )
+  }
+);
+var FileUpload = ({
+  icon = "file",
+  multiple = false,
+  direction = "vertical",
+  isImage = false,
+  setFiles,
+  supportedFormats,
+  validationFunction,
+  files,
+  error,
+  name,
+  limitMessage
+}) => {
+  var _a;
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const [dragging, setDragging] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { readString } = usePapaParse();
+  const fieldValidationMessages = [error == null ? void 0 : error.message];
+  const hasError = {
+    hasError: fieldValidationMessages.some((item) => item !== void 0)
+  };
+  useEffect(() => {
+    var _a2;
+    if ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.some((file) => file.loading === true)) {
+      setLoading(true);
+    } else {
+      setLoading(false);
+    }
+  }, [state == null ? void 0 : state.files]);
+  useEffect(() => {
+    if (!files || files.length == 0) {
+      state.files = [];
+    }
+  }, [files]);
+  useEffect(() => {
+    var _a2;
+    if (!multiple && ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.length) === 0 || multiple) {
+      window.addEventListener("dragover", handleDragOver);
+      window.addEventListener("drop", handleDrop);
+      window.addEventListener("dragleave", handleDragLeave);
+    }
+    return () => {
+      window.removeEventListener("dragover", handleDragOver);
+      window.removeEventListener("drop", handleDrop);
+      window.removeEventListener("dragleave", handleDragLeave);
+    };
+  }, [multiple, state.files]);
+  const handleDragOver = (event) => {
+    var _a2;
+    event.preventDefault();
+    event.stopPropagation();
+    if (!multiple && ((_a2 = state.files) == null ? void 0 : _a2.length) === 1) {
+      setDragging(false);
+    } else {
+      setDragging(true);
+    }
+  };
+  const handleDrop = (event) => {
+    var _a2, _b, _c;
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(false);
+    let files2 = [...(_a2 = event == null ? void 0 : event.dataTransfer) == null ? void 0 : _a2.files];
+    if (!multiple && (files2 == null ? void 0 : files2.length) === 1 || multiple && (files2 == null ? void 0 : files2.length) > 0) {
+      const existingFiles = (_b = state == null ? void 0 : state.files) == null ? void 0 : _b.map((f) => f.name);
+      files2 = files2.filter((f) => !(existingFiles == null ? void 0 : existingFiles.includes(f.name)));
+      files2.forEach((file) => {
+        const reader = new FileReader();
+        reader.addEventListener("loadstart", () => {
+          dispatch({
+            type: "UPLOAD_START",
+            payload: { file }
+          });
+        });
+        reader.addEventListener("load", () => {
+          if (!validationFunction) {
+            dispatch({
+              type: "UPLOAD_END",
+              payload: {
+                name: file.name,
+                result: reader.result
+              }
+            });
+            setFiles && setFiles(file);
+          }
+          if (validationFunction(file)) {
+            setTimeout(() => {
+              dispatch({
+                type: "UPLOAD_END",
+                payload: {
+                  name: file.name,
+                  result: reader.result
+                }
+              });
+            }, 1e3);
+            setFiles && setFiles(file);
+          } else {
+            dispatch({
+              type: "REMOVE_FILE",
+              payload: {
+                name: file.name
+              }
+            });
+          }
+        });
+        reader.readAsDataURL(file);
+      });
+      (_c = event == null ? void 0 : event.dataTransfer) == null ? void 0 : _c.clearData();
+    }
+  };
+  const handleDragLeave = (event) => {
+    if (event.screenX === 0 && event.screenY === 0) {
+      setDragging(false);
+    }
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  const onChangeFile = (e) => {
+    const files2 = Object.values(e.target.files);
+    e.target.value = null;
+    files2.forEach((file) => {
+      const reader = new FileReader();
+      reader.addEventListener("loadstart", () => {
+        dispatch({
+          type: "UPLOAD_START",
+          payload: { file }
+        });
+      });
+      reader.addEventListener("load", () => {
+        setTimeout(() => {
+          readString(String(file), {
+            delimiter: ",",
+            worker: true,
+            complete: (results) => {
+              if (!validationFunction) {
+                dispatch({
+                  type: "UPLOAD_END",
+                  payload: {
+                    name: file.name,
+                    result: reader.result
+                  }
+                });
+                setFiles && setFiles(file);
+              } else if (validationFunction(file)) {
+                dispatch({
+                  type: "UPLOAD_END",
+                  payload: {
+                    name: file.name,
+                    result: reader.result
+                  }
+                });
+                setFiles && setFiles(file);
+              } else {
+                dispatch({
+                  type: "REMOVE_FILE",
+                  payload: {
+                    name: file.name
+                  }
+                });
+              }
+            }
+          });
+        }, 1e3);
+      });
+      reader.readAsDataURL(file);
+    });
+  };
+  const renderContent = () => {
+    var _a2;
+    if (loading) {
+      return /* @__PURE__ */ jsx(LoadingContent, {});
+    } else if (dragging) {
+      return /* @__PURE__ */ jsx(DraggingContent, {});
+    } else if (!multiple && ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.length) > 0) {
+      return /* @__PURE__ */ jsx(BlockedContent, {});
+    }
+    return /* @__PURE__ */ jsx(
+      DefaultContent,
+      {
+        icon,
+        formats: supportedFormats == null ? void 0 : supportedFormats.join(", ").replace(/\./g, "").toUpperCase(),
+        limitMessage
+      }
+    );
+  };
+  const removeFile = (name2) => {
+    dispatch({
+      type: "REMOVE_FILE",
+      payload: {
+        name: name2
+      }
+    });
+    setFiles && setFiles(null);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx9(
+        "flex gap-1 w-full rounded-lg items-center justify-center",
+        {
+          "flex-col gap-1": direction === "vertical"
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "file-upload",
+            name: "file-upload",
+            type: "file",
+            accept: supportedFormats == null ? void 0 : supportedFormats.join(","),
+            multiple,
+            className: "sr-only",
+            onChange: onChangeFile
+          }
+        ),
+        renderContent(),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx9(
+              {
+                "flex flex-col w-full gap-y-[6px]": direction === "vertical" && !isImage
+              },
+              {
+                "flex flex-col gap-y-[6px] w-full": direction === "horizontal" && !isImage
+              },
+              {
+                "flex gap-[6px]": direction === "vertical" && isImage
+              },
+              {
+                "flex gap-[6px]": direction === "horizontal" && !isImage
+              }
+            ),
+            children: (_a = state == null ? void 0 : state.files) == null ? void 0 : _a.map((file) => /* @__PURE__ */ jsx(
+              FileStatus,
+              {
+                name: file == null ? void 0 : file.name,
+                onRemove: () => removeFile(file == null ? void 0 : file.name),
+                isLoading: file.loading,
+                size: file.size,
+                isImage: file.image && isImage,
+                image: file.image
+              },
+              file.name
+            ))
+          }
+        ),
+        hasError && fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "text-dangerous-500 text-xs -mt-[6px]",
+            role: "alert",
+            "aria-label": message,
+            children: message
+          },
+          index
+        ))
+      ]
+    }
+  ) });
+};
+var DefaultContent = ({ formats, icon, limitMessage }) => /* @__PURE__ */ jsx("div", { className: "w-full md:w-[410px] h-full flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col text-center items-center", children: [
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center justify-center w-14 h-14 mb-2 bg-blue-100 rounded-full",
+      children: icon === "file" ? /* @__PURE__ */ jsx(IconFile, {}) : /* @__PURE__ */ jsx("i", { className: "uil uil-image-plus text-[28px] text-blue-500" })
+    }
+  ),
+  /* @__PURE__ */ jsx("h1", { className: "font-bold text-base", children: icon === "file" ? "Arraste o arquivo e solte aqui" : "Arraste as imagens e solte aqui" }),
+  /* @__PURE__ */ jsx(
+    "label",
+    {
+      htmlFor: "file-upload",
+      className: "relative leading-none cursor-pointer text-sm bg-white focus-within:outline-none",
+      children: /* @__PURE__ */ jsxs("p", { children: [
+        "ou\xA0",
+        /* @__PURE__ */ jsx("span", { className: "text-blue-500", children: "selecione do seu computador" })
+      ] })
+    }
+  ),
+  /* @__PURE__ */ jsxs("small", { className: "text-label text-xxs leading-5", children: [
+    "Formatos: ",
+    formats,
+    " | ",
+    limitMessage ? limitMessage : "At\xE9 25 MB"
+  ] })
+] }) });
+var BlockedContent = () => /* @__PURE__ */ jsx("div", { className: "w-full md:w-[410px] h-full flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col text-center items-center justify-center", children: [
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center justify-center w-14 h-14 mb-1 bg-blue-100 rounded-full",
+      children: /* @__PURE__ */ jsx(IconCheck, {})
+    }
+  ),
+  /* @__PURE__ */ jsx("h1", { className: "font-bold text-base mt-1", children: "Arquivo carregado!" })
+] }) });
+var DraggingContent = () => /* @__PURE__ */ jsx("div", { className: "w-full md:w-[410px] h-[152px] bg-blue-100 rounded-lg", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col p-4 custom-border justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col h-full text-center items-center justify-center", children: [
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center justify-center w-14 h-14 mb-2 bg-blue-500 rounded-full",
+      children: /* @__PURE__ */ jsx(IconFileUpload, {})
+    }
+  ),
+  /* @__PURE__ */ jsx("h1", { className: "font-bold text-base text-blue-500", children: "Solte aqui para carregar o arquivo" })
+] }) }) });
+var LoadingContent = () => /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-blue-100 flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col text-center items-center justify-center", children: [
+  /* @__PURE__ */ jsx(SpinnerIcon, { className: "animate-spin" }),
+  /* @__PURE__ */ jsx("h1", { className: "font-bold text-base text-blue-500", children: "Carregando arquivo..." })
+] }) });
+function InfoIcon({
+  content,
+  id = "info-id"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-tooltip-id": id,
+      "data-tooltip-html": content,
+      "data-tooltip-place": "top",
+      children: [
+        /* @__PURE__ */ jsx(Popover3, { id }),
+        /* @__PURE__ */ jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
+      ]
+    }
+  );
+}
+
+// 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__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        const { DropdownIndicator, Option } = components;
+        const DropdownIndicatorCustom = (props) => {
+          return /* @__PURE__ */ jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx("i", { className: "uil uil-angle-down text-[20px]" }) });
+        };
+        const IconOption = (props) => {
+          return /* @__PURE__ */ jsx(Option, { ...props, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                height: "100%"
+              },
+              children: /* @__PURE__ */ jsx("span", { className: clsx9("text-p-md focus:text-white"), children: props.data.label })
+            }
+          ) });
+        };
+        const NoOptionsMessage = () => {
+          return /* @__PURE__ */ jsx("div", { className: "p-2 text-neutral-300", children: "Nenhum dado encontrado" });
+        };
+        return /* @__PURE__ */ jsxs("div", { className: "relative h-full", id: "multiselect", children: [
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              ...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__ */ jsxs(
+            "span",
+            {
+              className: clsx9("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__ */ jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
+              ]
+            }
+          ),
+          fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-dangerous-500 text-xs -mt-[5px]",
+              role: "alert",
+              "aria-label": message,
+              children: message
+            },
+            index
+          ))
+        ] });
+      }
+    }
+  );
+};
+var ValueContainer3 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(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] = 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__ */ jsx(
+    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__ */ jsxs(
+          "div",
+          {
+            className: `relative ${label ? "with-label" : ""}`,
+            id: "inputtag",
+            children: [
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  ...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__ */ jsxs(
+                "span",
+                {
+                  className: clsx9("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__ */ jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
+                  ]
+                }
+              ),
+              fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-dangerous-500 text-xs mt-[2px]",
+                  role: "alert",
+                  "aria-label": message,
+                  children: message
+                },
+                index
+              ))
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var ValueContainer4 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(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] = useState(false);
+  const [optionsList, setOptionsList] = 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__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      defaultValue,
+      render: ({ field }) => {
+        var _a, _b;
+        const { DropdownIndicator, Option } = components;
+        const DropdownIndicatorCustom = (props) => {
+          return /* @__PURE__ */ jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "p-2 text-neutral-300", children: "Nenhum dado encontrado" });
+          }
+        };
+        const IconOption = (props) => {
+          return /* @__PURE__ */ jsx(Option, { ...props, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                height: "100%"
+              },
+              children: /* @__PURE__ */ jsx("span", { className: clsx9("text-p-md focus:text-white"), children: props.data.label })
+            }
+          ) });
+        };
+        const LoadingMessage = (props) => {
+          if (!debounce2 || debounce2 && props.selectProps.inputValue.length >= debounce2) {
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...props.innerProps,
+                className: "flex items-center gap-[6px] p-2",
+                children: [
+                  /* @__PURE__ */ 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__ */ jsxs("div", { className: "p-2 text-neutral-300", children: [
+              "Digite ",
+              debounce2,
+              " ou mais caracteres para pesquisar"
+            ] });
+          }
+        };
+        return /* @__PURE__ */ jsxs("div", { className: "relative h-full", id: "multiselectbottom", children: [
+          /* @__PURE__ */ jsx(
+            AsyncSelect,
+            {
+              ...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__ */ jsxs(
+            "span",
+            {
+              className: clsx9("text-label text-sm left-2.5", {
+                ["text-dangerous-500"]: hasError.hasError
+              }),
+              children: [
+                label,
+                required && label && /* @__PURE__ */ jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
+              ]
+            }
+          ),
+          fieldValidationMessages == null ? void 0 : fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-dangerous-500 text-xs mt-[3px]",
+              role: "alert",
+              "aria-label": message,
+              children: message
+            },
+            index
+          )),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-p-sm bg-neutral-100 rounded-[20px] py-2 px-3 flex items-center justify-between mt-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: item.label }),
+            /* @__PURE__ */ 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__ */ jsx("i", { className: "uil uil-times text-sm text-neutral-400" })
+              }
+            )
+          ] })) : /* @__PURE__ */ 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__ */ jsx(components.ValueContainer, { ...props, children });
+};
+MultiSelectBottom.displayName = "MultiSelectBottom";
+function PageBox(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "py-5 px-4 border border-neutral-200 rounded-lg", children: [
+    (props == null ? void 0 : props.title) && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col md:flex-row place-content-between font-sans pb-4 w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center text-p-lg text-label", children: breadcrumbs && breadcrumbs.map((breadcrumb, index) => /* @__PURE__ */ jsx("div", { children: breadcrumb.link ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: breadcrumb.link,
+          className: "hover:no-underline hover:text-paragraph",
+          children: /* @__PURE__ */ jsxs("span", { className: "cursor-pointer flex items-center", children: [
+            index > 0 && /* @__PURE__ */ jsx("i", { className: "uil uil-angle-right" }),
+            breadcrumb.name
+          ] })
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx("i", { className: "uil uil-angle-right" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: index === breadcrumbs.length - 1 ? "text-paragraph" : "",
+            children: breadcrumb.name
+          }
+        )
+      ] }) }, index)) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-t-md text-title font-bold mb-1", children: title }),
+        description && /* @__PURE__ */ jsx("span", { className: "text-p-lg text-label", children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ 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] = useState(() => fixPercentage());
+  function fixPercentage() {
+    if (percentage > 100) {
+      return 100;
+    } else {
+      return percentage;
+    }
+  }
+  useEffect(() => {
+    setBarPercentage(fixPercentage());
+  }, [percentage]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-[2px] min-w-[170px]", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full p-[1px] border border-neutral-300 rounded-[15px]", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx9(variants4[variant].bar, "h-[14px] rounded-[15px]"),
+        style: { width: `${barPercentage}%` }
+      }
+    ) }),
+    status && /* @__PURE__ */ jsxs("span", { className: clsx9(variants4[variant].text, "text-blue-500 text-xs"), children: [
+      status,
+      percentage && /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
+        "\xA0- ",
+        percentage,
+        " %"
+      ] })
+    ] })
+  ] });
+};
+function SimpleTab({ tabs, onClick }) {
+  const [currentTab, setCurrentTab] = useState(0);
+  function isCurrentTab(index) {
+    return index === currentTab;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full flex-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-neutral-200", children: /* @__PURE__ */ jsx("div", { className: "-mb-px flex", "aria-label": "Tabs", children: tabs.filter((item) => !item.hidden).map((tab, index) => /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        className: clsx9(
+          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__ */ jsx(
+            "div",
+            {
+              id: "tab-icon",
+              className: clsx9(
+                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__ */ jsx("span", { children: tab.label })
+        ]
+      },
+      tab.key
+    )) }) }),
+    /* @__PURE__ */ jsx("div", { className: "h-full flex-1 flex flex-col", children: tabs[currentTab].children })
+  ] }) });
+}
 
-export { Accordion, Badge, Button, ButtonLink, Calendar, Checkbox, CopyPopover, DataTable, DataTablePagination, DatePickerInput, EditableButton, EditableText, FilterCalendar, FilterOptions, Input, InputMoney, InputNumber, InputPercentage, Item, Logo, MaskedInput, Menu, ModalDialog, PaginationSelect, Popover3 as Popover, Radio, RocketIcon, SelectField, SelectFieldBip, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer, sizes2 as sizes };
+export { Accordion, Badge, Button, ButtonLink, Calendar, Checkbox, CopyPopover, DataTable, DataTablePagination, DatePickerInput, EditableButton, EditableText, EditableTextSelect, FileUpload, FilterCalendar, FilterOptions, InfoIcon, Input, InputMoney, InputNumber, InputPercentage, InputTag, Item, Logo, MaskedInput, Menu, ModalDialog, MultiSelect, MultiSelectBottom, PageBox, PageHeader, PaginationSelect, Popover3 as Popover, ProgressBar, Radio, RocketIcon, SelectField, SelectFieldBip, SimpleTab, SpinnerIcon, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Toggle, ValueContainer4 as ValueContainer, sizes2 as sizes };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map