nexaas-ui-components 1.0.21 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -14,10 +14,12 @@ var lodashNamespace = require('lodash');
14
14
  var InputMask = require('react-input-mask');
15
15
  var ReactModalNamespace = require('react-modal');
16
16
  var reactTooltip = require('react-tooltip');
17
- var reactSelect = require('react-select');
17
+ var Select = require('react-select');
18
18
  var AsyncSelect = require('react-select/async');
19
19
  var reactTable = require('@tanstack/react-table');
20
20
  var matchSorterUtils = require('@tanstack/match-sorter-utils');
21
+ var Fuse = require('fuse.js');
22
+ var reactPapaparse = require('react-papaparse');
21
23
 
22
24
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
23
25
 
@@ -45,7 +47,9 @@ var IntlCurrencyInputRaw__default = /*#__PURE__*/_interopDefault(IntlCurrencyInp
45
47
  var lodashNamespace__namespace = /*#__PURE__*/_interopNamespace(lodashNamespace);
46
48
  var InputMask__default = /*#__PURE__*/_interopDefault(InputMask);
47
49
  var ReactModalNamespace__namespace = /*#__PURE__*/_interopNamespace(ReactModalNamespace);
50
+ var Select__default = /*#__PURE__*/_interopDefault(Select);
48
51
  var AsyncSelect__default = /*#__PURE__*/_interopDefault(AsyncSelect);
52
+ var Fuse__default = /*#__PURE__*/_interopDefault(Fuse);
49
53
 
50
54
  // src/components/Button.tsx
51
55
  var SpinnerIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -96,7 +100,7 @@ var variants = {
96
100
  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"
97
101
  },
98
102
  icon: {
99
- 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"
103
+ 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"
100
104
  },
101
105
  outline: {
102
106
  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"
@@ -232,7 +236,7 @@ var Button = ({
232
236
  };
233
237
  var sizes2 = {
234
238
  xxs: {
235
- text: "min-h-[14px] max-h-[40px]"
239
+ text: "min-h-[14px] max-h-[40px] text-[14px] gap-[4px]"
236
240
  },
237
241
  xs: {
238
242
  text: "h-[36px]"
@@ -2503,7 +2507,7 @@ var ModalDialog = ({
2503
2507
  description,
2504
2508
  children
2505
2509
  }) => {
2506
- const customStyles3 = {
2510
+ const customStyles6 = {
2507
2511
  content: {
2508
2512
  top: "50%",
2509
2513
  left: "50%",
@@ -2534,10 +2538,10 @@ var ModalDialog = ({
2534
2538
  ariaHideApp: false,
2535
2539
  isOpen: open,
2536
2540
  onRequestClose: onClose,
2537
- style: customStyles3,
2541
+ style: customStyles6,
2538
2542
  contentLabel: "Example Modal",
2539
2543
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx9__default.default(sizes3[size]), children: [
2540
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-2 border-b border-b-neutral-200 flex items-center justify-between", children: [
2544
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pb-[6px] border-b border-b-neutral-200 flex items-center justify-between", children: [
2541
2545
  /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-[24px] font-bold flex items-center gap-2", children: [
2542
2546
  alertType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx9__default.default([alertTypes[alertType]], "text-[30px]"), children: icon }),
2543
2547
  title
@@ -2565,7 +2569,7 @@ var ModalDialog = ({
2565
2569
  }
2566
2570
  },
2567
2571
  variant: "secondary",
2568
- size: "sm",
2572
+ size: "md",
2569
2573
  children: "Cancelar"
2570
2574
  }
2571
2575
  ),
@@ -2743,7 +2747,7 @@ var SelectField = ({
2743
2747
  small = false
2744
2748
  }) => {
2745
2749
  var _a;
2746
- const { Option, DropdownIndicator, ClearIndicator, SingleValue } = reactSelect.components;
2750
+ const { Option, DropdownIndicator, ClearIndicator, SingleValue } = Select.components;
2747
2751
  const selectRef = React4.useRef(null);
2748
2752
  const [inputValue, setInputValue] = React4.useState("");
2749
2753
  const [loading, setLoading] = React4.useState(false);
@@ -2985,7 +2989,7 @@ var SelectField = ({
2985
2989
  );
2986
2990
  };
2987
2991
  var ValueContainer = ({ children, ...props }) => {
2988
- return /* @__PURE__ */ jsxRuntime.jsx(reactSelect.components.ValueContainer, { ...props, children });
2992
+ return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
2989
2993
  };
2990
2994
 
2991
2995
  // src/components/SelectFieldBip/SelectFieldBip.styles.tsx
@@ -3133,14 +3137,14 @@ var SelectFieldBip = ({
3133
3137
  onErrorBip,
3134
3138
  clearAfterSelect = true,
3135
3139
  messages = {
3136
- searching: "Searching...",
3137
- debounce: `Type at least {debounce} characters`,
3138
- emptyMessage: "No options found",
3139
- loading: "Loading..."
3140
+ searching: "Buscando...",
3141
+ debounce: `Digite pelo menos {debounce} caracteres`,
3142
+ emptyMessage: "Nenhuma op\xE7\xE3o encontrada",
3143
+ loading: "Carregando..."
3140
3144
  }
3141
3145
  }) => {
3142
3146
  var _a;
3143
- const { Option, SingleValue } = reactSelect.components;
3147
+ const { Option, SingleValue } = Select.components;
3144
3148
  const selectRef = React4.useRef(null);
3145
3149
  const [inputValue, setInputValue] = React4.useState("");
3146
3150
  const [loading, setLoading] = React4.useState(false);
@@ -3222,15 +3226,15 @@ var SelectFieldBip = ({
3222
3226
  }
3223
3227
  );
3224
3228
  } else if (debounce2 && inputValue.length < debounce2) {
3225
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-dark-blue-300", children: messages.debounce.replace("{debounce}", String(debounce2)) });
3229
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "var(--label)" }, className: "p-2 text-[14px]", children: messages.debounce.replace("{debounce}", String(debounce2)) });
3226
3230
  }
3227
3231
  };
3228
3232
  const NoOptionsMessage = (props) => {
3229
3233
  var _a2;
3230
3234
  if (inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && inputValue.length < debounce2) {
3231
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-dark-blue-300", children: messages.debounce.replace("{debounce}", String(debounce2)) });
3235
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-[14px]", style: { color: "var(--label)" }, children: messages.debounce.replace("{debounce}", String(debounce2)) });
3232
3236
  } else if (inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
3233
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-dark-blue-300", children: messages.emptyMessage });
3237
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-[14px]", style: { color: "var(--label)" }, children: messages.emptyMessage });
3234
3238
  }
3235
3239
  };
3236
3240
  const DropdownIndicatorCustom = (props) => {
@@ -3372,7 +3376,7 @@ var SelectFieldBip = ({
3372
3376
  );
3373
3377
  };
3374
3378
  var ValueContainer2 = ({ children, ...props }) => {
3375
- return /* @__PURE__ */ jsxRuntime.jsx(reactSelect.components.ValueContainer, { ...props, children });
3379
+ return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
3376
3380
  };
3377
3381
  var Radio = ({
3378
3382
  disabled,
@@ -4608,6 +4612,1616 @@ var EditableText = ({
4608
4612
  }
4609
4613
  );
4610
4614
  };
4615
+ var EditableTextSelect = ({
4616
+ control,
4617
+ name,
4618
+ emptyLabel,
4619
+ options,
4620
+ optionStyle,
4621
+ valueStyle,
4622
+ showInputSeach,
4623
+ onChangeValue
4624
+ }) => {
4625
+ const [showModal, setShowModal] = React4.useState(false);
4626
+ const [optionsList, setOptionsList] = React4.useState(() => options);
4627
+ const [inputSearch, setInputSearch] = React4.useState("");
4628
+ const optionsFuse = {
4629
+ includeScore: false,
4630
+ keys: ["name"]
4631
+ };
4632
+ const fuse = new Fuse__default.default(optionsList, optionsFuse);
4633
+ const filter = () => {
4634
+ var _a;
4635
+ let results = [...options];
4636
+ if (inputSearch) {
4637
+ results = (_a = fuse.search(inputSearch)) == null ? void 0 : _a.map((result) => result.item);
4638
+ }
4639
+ setOptionsList(results);
4640
+ };
4641
+ React4.useEffect(() => {
4642
+ setOptionsList(() => options);
4643
+ }, [options]);
4644
+ React4.useEffect(() => {
4645
+ filter();
4646
+ }, [inputSearch]);
4647
+ return /* @__PURE__ */ jsxRuntime.jsx(
4648
+ reactHookForm.Controller,
4649
+ {
4650
+ control,
4651
+ name,
4652
+ render: ({ field }) => {
4653
+ var _a;
4654
+ return /* @__PURE__ */ jsxRuntime.jsxs(react.Menu, { children: [
4655
+ /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Button, { children: /* @__PURE__ */ jsxRuntime.jsxs(
4656
+ "div",
4657
+ {
4658
+ className: "group flex gap-[5px] cursor-pointer z-[500] items-center",
4659
+ onClick: () => setShowModal(!showModal),
4660
+ children: [
4661
+ field.value ? valueStyle ? valueStyle(field.value) : (_a = field == null ? void 0 : field.value) == null ? void 0 : _a.name : /* @__PURE__ */ jsxRuntime.jsx(
4662
+ "label",
4663
+ {
4664
+ className: clsx9__default.default(
4665
+ {
4666
+ ["text-label"]: !field.value,
4667
+ ["text-paragraph"]: field.value
4668
+ },
4669
+ "text-p-md group-hover:underline group-hover:underline-offset-[3px] cursor-pointer decoration-blue-500"
4670
+ ),
4671
+ children: emptyLabel ? emptyLabel : "N\xE3o informado"
4672
+ }
4673
+ ),
4674
+ /* @__PURE__ */ jsxRuntime.jsx(
4675
+ "i",
4676
+ {
4677
+ style: { fontSize: "16px" },
4678
+ className: "uil uil-pen text-sm text-blue-500"
4679
+ }
4680
+ )
4681
+ ]
4682
+ }
4683
+ ) }),
4684
+ /* @__PURE__ */ jsxRuntime.jsx(react.Menu.Items, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[294px] p-2 bg-white border border-neutral-300 absolute z-[500] rounded-lg", children: [
4685
+ showInputSeach && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
4686
+ InputSmall,
4687
+ {
4688
+ icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search" }),
4689
+ onChange: (e) => setInputSearch(e),
4690
+ value: inputSearch,
4691
+ placeholder: "Pesquisar",
4692
+ clearField: true,
4693
+ onKeyDown: (e) => {
4694
+ if (e.key == " " || e.code == "Space") {
4695
+ e.stopPropagation();
4696
+ }
4697
+ }
4698
+ }
4699
+ ) }),
4700
+ optionsList == null ? void 0 : optionsList.map((opt) => {
4701
+ var _a2;
4702
+ const selected = (opt == null ? void 0 : opt.id) === ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.id);
4703
+ return /* @__PURE__ */ jsxRuntime.jsx(
4704
+ react.Menu.Item,
4705
+ {
4706
+ onClick: () => {
4707
+ field.onChange(opt);
4708
+ if (onChangeValue) {
4709
+ onChangeValue(opt);
4710
+ }
4711
+ },
4712
+ as: "button",
4713
+ className: clsx9__default.default(
4714
+ "p-3 mb-1 rounded-lg items-center flex whitespace-nowrap no-underline w-full",
4715
+ {
4716
+ "bg-blue-500 hover:bg-blue-500 hover:text-[#FFFFFF] text-[#FFFFFF]": selected
4717
+ },
4718
+ {
4719
+ "hover:bg-neutral-100 text-paragraph": !selected
4720
+ },
4721
+ {
4722
+ "cursor-pointer": !opt.disabled
4723
+ }
4724
+ ),
4725
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 w-full items-center whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full justify-between items-center", children: [
4726
+ optionStyle ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: optionStyle(opt) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
4727
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: opt == null ? void 0 : opt.title }),
4728
+ /* @__PURE__ */ jsxRuntime.jsx(
4729
+ "span",
4730
+ {
4731
+ className: clsx9__default.default({
4732
+ "text-label": opt.disabled
4733
+ }),
4734
+ children: opt.name
4735
+ }
4736
+ ),
4737
+ opt == null ? void 0 : opt.description
4738
+ ] }),
4739
+ /* @__PURE__ */ jsxRuntime.jsx(
4740
+ "span",
4741
+ {
4742
+ className: clsx9__default.default(
4743
+ "group-hover:text-[#fff] ",
4744
+ {
4745
+ "text-[#fff]": selected
4746
+ },
4747
+ {
4748
+ "text-blue-500": !selected
4749
+ }
4750
+ ),
4751
+ children: selected && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-check" })
4752
+ }
4753
+ )
4754
+ ] }) })
4755
+ }
4756
+ );
4757
+ })
4758
+ ] }) })
4759
+ ] });
4760
+ }
4761
+ }
4762
+ );
4763
+ };
4764
+ function ImagePreview({ open, setOpen, previewImage }) {
4765
+ return /* @__PURE__ */ jsxRuntime.jsx(react.Transition.Root, { show: open, as: React4.Fragment, children: /* @__PURE__ */ jsxRuntime.jsxs(
4766
+ react.Dialog,
4767
+ {
4768
+ as: "div",
4769
+ className: "relative z-[999]",
4770
+ onClose: () => setOpen(false),
4771
+ children: [
4772
+ /* @__PURE__ */ jsxRuntime.jsx(
4773
+ react.Transition.Child,
4774
+ {
4775
+ as: React4.Fragment,
4776
+ enter: "ease-out duration-300",
4777
+ enterFrom: "opacity-0",
4778
+ enterTo: "opacity-100",
4779
+ leave: "ease-in duration-200",
4780
+ leaveFrom: "opacity-100",
4781
+ leaveTo: "opacity-0",
4782
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" })
4783
+ }
4784
+ ),
4785
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-10 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
4786
+ react.Transition.Child,
4787
+ {
4788
+ as: React4.Fragment,
4789
+ enter: "ease-out duration-300",
4790
+ enterFrom: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
4791
+ enterTo: "opacity-100 translate-y-0 sm:scale-100",
4792
+ leave: "ease-in duration-200",
4793
+ leaveFrom: "opacity-100 translate-y-0 sm:scale-100",
4794
+ leaveTo: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
4795
+ children: /* @__PURE__ */ jsxRuntime.jsx(react.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full flex-1", children: [
4796
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-2", children: [
4797
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-t-sm font-bold", children: "Pr\xE9via da imagem" }),
4798
+ /* @__PURE__ */ jsxRuntime.jsx(
4799
+ "i",
4800
+ {
4801
+ className: "uil uil-times text-[28px] cursor-pointer",
4802
+ onClick: () => setOpen(false)
4803
+ }
4804
+ )
4805
+ ] }),
4806
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-neutral-200 mb-4" }),
4807
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 h-full items-center justify-center rounded-lg w-full ", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: previewImage, alt: "previewImage" }) })
4808
+ ] }) })
4809
+ }
4810
+ ) }) })
4811
+ ]
4812
+ }
4813
+ ) });
4814
+ }
4815
+ var FileStatus = ({
4816
+ name,
4817
+ isLoading,
4818
+ size,
4819
+ onRemove,
4820
+ isImage,
4821
+ image
4822
+ }) => {
4823
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isImage ? /* @__PURE__ */ jsxRuntime.jsx(
4824
+ ImageFile,
4825
+ {
4826
+ isLoading,
4827
+ name,
4828
+ size,
4829
+ onRemove,
4830
+ image
4831
+ }
4832
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
4833
+ File,
4834
+ {
4835
+ isLoading,
4836
+ name,
4837
+ size,
4838
+ onRemove,
4839
+ image
4840
+ }
4841
+ ) });
4842
+ };
4843
+ var ImageFile = ({ isLoading, name, size, onRemove, image }) => {
4844
+ const [imagePreviewModal, setImagePreviewModal] = React4.useState(false);
4845
+ const [previewImage, setPreviewImage] = React4.useState();
4846
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group h-[130px] w-[130px] flex justify-between border border-neutral-300 rounded-[8px]", children: !isLoading && image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full relative", children: [
4847
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden group-hover:block absolute top-3 left-3", children: [
4848
+ /* @__PURE__ */ jsxRuntime.jsx(
4849
+ Button,
4850
+ {
4851
+ className: "w-[32px] h-[32px]",
4852
+ variant: "iconSecondary",
4853
+ onClick: (evt) => {
4854
+ setImagePreviewModal(true);
4855
+ let newPreviewImage = new window.Image();
4856
+ newPreviewImage.src = image;
4857
+ setPreviewImage(newPreviewImage);
4858
+ },
4859
+ size: "xs",
4860
+ icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-search-plus text-[22px]" })
4861
+ }
4862
+ ),
4863
+ /* @__PURE__ */ jsxRuntime.jsx(
4864
+ ImagePreview,
4865
+ {
4866
+ open: imagePreviewModal,
4867
+ setOpen: setImagePreviewModal,
4868
+ previewImage
4869
+ }
4870
+ )
4871
+ ] }),
4872
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block absolute top-3 right-3", children: /* @__PURE__ */ jsxRuntime.jsx(
4873
+ Button,
4874
+ {
4875
+ className: "w-[32px] h-[32px]",
4876
+ variant: "iconSecondary",
4877
+ onClick: onRemove,
4878
+ size: "xs",
4879
+ icon: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-xl" })
4880
+ }
4881
+ ) }),
4882
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full group-hover:bg-[#16203499]/60 z-10", children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: "relative -z-10", src: image, alt: "tumbnails" }) })
4883
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col justify-between p-[10px]", children: [
4884
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col ", children: [
4885
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex self-end", children: /* @__PURE__ */ jsxRuntime.jsx(
4886
+ "i",
4887
+ {
4888
+ onClick: onRemove,
4889
+ className: "uil uil-times text-[28px] cursor-pointer"
4890
+ }
4891
+ ) }),
4892
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex self-center items-center justify-center w-12 h-12 bg-blue-500 rounded-full animate-spin", children: /* @__PURE__ */ jsxRuntime.jsx(
4893
+ "img",
4894
+ {
4895
+ src: `/spinner-white.svg`,
4896
+ alt: "circle",
4897
+ width: 30,
4898
+ height: 30
4899
+ }
4900
+ ) })
4901
+ ] }),
4902
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
4903
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-sm", children: name }),
4904
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xxs text-label", children: [
4905
+ size.to,
4906
+ " KB"
4907
+ ] })
4908
+ ] })
4909
+ ] }) });
4910
+ };
4911
+ var File = ({ isLoading, name, size, onRemove, image }) => {
4912
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full md:w-[410px] flex items-center justify-between px-3 py-2 border border-neutral-300 rounded-[4px]", children: [
4913
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-x-2 items-center", children: [
4914
+ isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { width: 19, height: 19, className: "animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-success-500 flex", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-check-circle text-[23px]" }) }),
4915
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
4916
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-x-1", children: [
4917
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-label self-end flex", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-file text-xs" }) }),
4918
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-p-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
4919
+ "a",
4920
+ {
4921
+ href: image,
4922
+ download: name,
4923
+ className: "text-blue-500 hover:text-blue-500 hover:underline active:text-blue-600 active:underline active:underline-offset-4",
4924
+ children: name
4925
+ }
4926
+ ) })
4927
+ ] }),
4928
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xxs text-label", children: [
4929
+ size ? size.toLocaleString("en-US", {
4930
+ style: "decimal"
4931
+ // Other options: 'currency', 'percent', etc.
4932
+ }) : null,
4933
+ " ",
4934
+ "KB"
4935
+ ] })
4936
+ ] })
4937
+ ] }),
4938
+ /* @__PURE__ */ jsxRuntime.jsx(
4939
+ "i",
4940
+ {
4941
+ onClick: onRemove,
4942
+ className: "uil uil-times text-[24px] text-neutral-600 cursor-pointer"
4943
+ }
4944
+ )
4945
+ ] });
4946
+ };
4947
+
4948
+ // src/components/FileUpload/FileUploadReducer.tsx
4949
+ var initialState = {
4950
+ files: []
4951
+ };
4952
+ function reducer(state, action) {
4953
+ var _a, _b;
4954
+ switch (action.type) {
4955
+ case "UPLOAD_START":
4956
+ return {
4957
+ files: [
4958
+ ...state == null ? void 0 : state.files,
4959
+ {
4960
+ name: action.payload.file.name,
4961
+ size: action.payload.file.size,
4962
+ image: action.payload.file,
4963
+ type: action.payload.file.type,
4964
+ loading: true
4965
+ }
4966
+ ]
4967
+ };
4968
+ case "UPLOAD_END":
4969
+ return {
4970
+ files: (_a = state == null ? void 0 : state.files) == null ? void 0 : _a.map((file) => {
4971
+ if (file.name === action.payload.name) {
4972
+ return {
4973
+ ...file,
4974
+ image: action.payload.result,
4975
+ loading: false
4976
+ };
4977
+ }
4978
+ return file;
4979
+ })
4980
+ };
4981
+ case "REMOVE_FILE":
4982
+ return {
4983
+ files: (_b = state == null ? void 0 : state.files) == null ? void 0 : _b.filter(
4984
+ (file) => file.name !== action.payload.name
4985
+ )
4986
+ };
4987
+ default:
4988
+ return state;
4989
+ }
4990
+ }
4991
+ var IconFile = (props) => /* @__PURE__ */ jsxRuntime.jsx(
4992
+ "svg",
4993
+ {
4994
+ width: "24",
4995
+ height: "30",
4996
+ viewBox: "0 0 24 30",
4997
+ ...props,
4998
+ fill: "none",
4999
+ xmlns: "http://www.w3.org/2000/svg",
5000
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5001
+ "path",
5002
+ {
5003
+ 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",
5004
+ fill: "#009EDB"
5005
+ }
5006
+ )
5007
+ }
5008
+ );
5009
+ var IconCheck = (props) => /* @__PURE__ */ jsxRuntime.jsx(
5010
+ "svg",
5011
+ {
5012
+ width: "22",
5013
+ height: "16",
5014
+ viewBox: "0 0 22 16",
5015
+ fill: "none",
5016
+ xmlns: "http://www.w3.org/2000/svg",
5017
+ ...props,
5018
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5019
+ "path",
5020
+ {
5021
+ 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",
5022
+ fill: "#009EDB"
5023
+ }
5024
+ )
5025
+ }
5026
+ );
5027
+ var IconFileUpload = (props) => /* @__PURE__ */ jsxRuntime.jsx(
5028
+ "svg",
5029
+ {
5030
+ width: "30",
5031
+ height: "30",
5032
+ viewBox: "0 0 30 30",
5033
+ fill: "none",
5034
+ xmlns: "http://www.w3.org/2000/svg",
5035
+ ...props,
5036
+ children: /* @__PURE__ */ jsxRuntime.jsx(
5037
+ "path",
5038
+ {
5039
+ 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",
5040
+ fill: "white"
5041
+ }
5042
+ )
5043
+ }
5044
+ );
5045
+ var FileUpload = ({
5046
+ icon = "file",
5047
+ multiple = false,
5048
+ direction = "vertical",
5049
+ isImage = false,
5050
+ setFiles,
5051
+ supportedFormats,
5052
+ validationFunction,
5053
+ files,
5054
+ error,
5055
+ name,
5056
+ limitMessage
5057
+ }) => {
5058
+ var _a;
5059
+ const [state, dispatch] = React4.useReducer(reducer, initialState);
5060
+ const [dragging, setDragging] = React4.useState(false);
5061
+ const [loading, setLoading] = React4.useState(false);
5062
+ const { readString } = reactPapaparse.usePapaParse();
5063
+ const fieldValidationMessages = [error == null ? void 0 : error.message];
5064
+ const hasError = {
5065
+ hasError: fieldValidationMessages.some((item) => item !== void 0)
5066
+ };
5067
+ React4.useEffect(() => {
5068
+ var _a2;
5069
+ if ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.some((file) => file.loading === true)) {
5070
+ setLoading(true);
5071
+ } else {
5072
+ setLoading(false);
5073
+ }
5074
+ }, [state == null ? void 0 : state.files]);
5075
+ React4.useEffect(() => {
5076
+ if (!files || files.length == 0) {
5077
+ state.files = [];
5078
+ }
5079
+ }, [files]);
5080
+ React4.useEffect(() => {
5081
+ var _a2;
5082
+ if (!multiple && ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.length) === 0 || multiple) {
5083
+ window.addEventListener("dragover", handleDragOver);
5084
+ window.addEventListener("drop", handleDrop);
5085
+ window.addEventListener("dragleave", handleDragLeave);
5086
+ }
5087
+ return () => {
5088
+ window.removeEventListener("dragover", handleDragOver);
5089
+ window.removeEventListener("drop", handleDrop);
5090
+ window.removeEventListener("dragleave", handleDragLeave);
5091
+ };
5092
+ }, [multiple, state.files]);
5093
+ const handleDragOver = (event) => {
5094
+ var _a2;
5095
+ event.preventDefault();
5096
+ event.stopPropagation();
5097
+ if (!multiple && ((_a2 = state.files) == null ? void 0 : _a2.length) === 1) {
5098
+ setDragging(false);
5099
+ } else {
5100
+ setDragging(true);
5101
+ }
5102
+ };
5103
+ const handleDrop = (event) => {
5104
+ var _a2, _b, _c;
5105
+ event.preventDefault();
5106
+ event.stopPropagation();
5107
+ setDragging(false);
5108
+ let files2 = [...(_a2 = event == null ? void 0 : event.dataTransfer) == null ? void 0 : _a2.files];
5109
+ if (!multiple && (files2 == null ? void 0 : files2.length) === 1 || multiple && (files2 == null ? void 0 : files2.length) > 0) {
5110
+ const existingFiles = (_b = state == null ? void 0 : state.files) == null ? void 0 : _b.map((f) => f.name);
5111
+ files2 = files2.filter((f) => !(existingFiles == null ? void 0 : existingFiles.includes(f.name)));
5112
+ files2.forEach((file) => {
5113
+ const reader = new FileReader();
5114
+ reader.addEventListener("loadstart", () => {
5115
+ dispatch({
5116
+ type: "UPLOAD_START",
5117
+ payload: { file }
5118
+ });
5119
+ });
5120
+ reader.addEventListener("load", () => {
5121
+ if (!validationFunction) {
5122
+ dispatch({
5123
+ type: "UPLOAD_END",
5124
+ payload: {
5125
+ name: file.name,
5126
+ result: reader.result
5127
+ }
5128
+ });
5129
+ setFiles && setFiles(file);
5130
+ }
5131
+ if (validationFunction(file)) {
5132
+ setTimeout(() => {
5133
+ dispatch({
5134
+ type: "UPLOAD_END",
5135
+ payload: {
5136
+ name: file.name,
5137
+ result: reader.result
5138
+ }
5139
+ });
5140
+ }, 1e3);
5141
+ setFiles && setFiles(file);
5142
+ } else {
5143
+ dispatch({
5144
+ type: "REMOVE_FILE",
5145
+ payload: {
5146
+ name: file.name
5147
+ }
5148
+ });
5149
+ }
5150
+ });
5151
+ reader.readAsDataURL(file);
5152
+ });
5153
+ (_c = event == null ? void 0 : event.dataTransfer) == null ? void 0 : _c.clearData();
5154
+ }
5155
+ };
5156
+ const handleDragLeave = (event) => {
5157
+ if (event.screenX === 0 && event.screenY === 0) {
5158
+ setDragging(false);
5159
+ }
5160
+ event.stopPropagation();
5161
+ event.preventDefault();
5162
+ };
5163
+ const onChangeFile = (e) => {
5164
+ const files2 = Object.values(e.target.files);
5165
+ e.target.value = null;
5166
+ files2.forEach((file) => {
5167
+ const reader = new FileReader();
5168
+ reader.addEventListener("loadstart", () => {
5169
+ dispatch({
5170
+ type: "UPLOAD_START",
5171
+ payload: { file }
5172
+ });
5173
+ });
5174
+ reader.addEventListener("load", () => {
5175
+ setTimeout(() => {
5176
+ readString(String(file), {
5177
+ delimiter: ",",
5178
+ worker: true,
5179
+ complete: (results) => {
5180
+ if (!validationFunction) {
5181
+ dispatch({
5182
+ type: "UPLOAD_END",
5183
+ payload: {
5184
+ name: file.name,
5185
+ result: reader.result
5186
+ }
5187
+ });
5188
+ setFiles && setFiles(file);
5189
+ } else if (validationFunction(file)) {
5190
+ dispatch({
5191
+ type: "UPLOAD_END",
5192
+ payload: {
5193
+ name: file.name,
5194
+ result: reader.result
5195
+ }
5196
+ });
5197
+ setFiles && setFiles(file);
5198
+ } else {
5199
+ dispatch({
5200
+ type: "REMOVE_FILE",
5201
+ payload: {
5202
+ name: file.name
5203
+ }
5204
+ });
5205
+ }
5206
+ }
5207
+ });
5208
+ }, 1e3);
5209
+ });
5210
+ reader.readAsDataURL(file);
5211
+ });
5212
+ };
5213
+ const renderContent = () => {
5214
+ var _a2;
5215
+ if (loading) {
5216
+ return /* @__PURE__ */ jsxRuntime.jsx(LoadingContent, {});
5217
+ } else if (dragging) {
5218
+ return /* @__PURE__ */ jsxRuntime.jsx(DraggingContent, {});
5219
+ } else if (!multiple && ((_a2 = state == null ? void 0 : state.files) == null ? void 0 : _a2.length) > 0) {
5220
+ return /* @__PURE__ */ jsxRuntime.jsx(BlockedContent, {});
5221
+ }
5222
+ return /* @__PURE__ */ jsxRuntime.jsx(
5223
+ DefaultContent,
5224
+ {
5225
+ icon,
5226
+ formats: supportedFormats == null ? void 0 : supportedFormats.join(", ").replace(/\./g, "").toUpperCase(),
5227
+ limitMessage
5228
+ }
5229
+ );
5230
+ };
5231
+ const removeFile = (name2) => {
5232
+ dispatch({
5233
+ type: "REMOVE_FILE",
5234
+ payload: {
5235
+ name: name2
5236
+ }
5237
+ });
5238
+ setFiles && setFiles(null);
5239
+ };
5240
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
5241
+ "div",
5242
+ {
5243
+ className: clsx9__default.default(
5244
+ "flex gap-1 w-full rounded-lg items-center justify-center",
5245
+ {
5246
+ "flex-col gap-1": direction === "vertical"
5247
+ }
5248
+ ),
5249
+ children: [
5250
+ /* @__PURE__ */ jsxRuntime.jsx(
5251
+ "input",
5252
+ {
5253
+ id: "file-upload",
5254
+ name: "file-upload",
5255
+ type: "file",
5256
+ accept: supportedFormats == null ? void 0 : supportedFormats.join(","),
5257
+ multiple,
5258
+ className: "sr-only",
5259
+ onChange: onChangeFile
5260
+ }
5261
+ ),
5262
+ renderContent(),
5263
+ /* @__PURE__ */ jsxRuntime.jsx(
5264
+ "div",
5265
+ {
5266
+ className: clsx9__default.default(
5267
+ {
5268
+ "flex flex-col w-full gap-y-[6px]": direction === "vertical" && !isImage
5269
+ },
5270
+ {
5271
+ "flex flex-col gap-y-[6px] w-full": direction === "horizontal" && !isImage
5272
+ },
5273
+ {
5274
+ "flex gap-[6px]": direction === "vertical" && isImage
5275
+ },
5276
+ {
5277
+ "flex gap-[6px]": direction === "horizontal" && !isImage
5278
+ }
5279
+ ),
5280
+ children: (_a = state == null ? void 0 : state.files) == null ? void 0 : _a.map((file) => /* @__PURE__ */ jsxRuntime.jsx(
5281
+ FileStatus,
5282
+ {
5283
+ name: file == null ? void 0 : file.name,
5284
+ onRemove: () => removeFile(file == null ? void 0 : file.name),
5285
+ isLoading: file.loading,
5286
+ size: file.size,
5287
+ isImage: file.image && isImage,
5288
+ image: file.image
5289
+ },
5290
+ file.name
5291
+ ))
5292
+ }
5293
+ ),
5294
+ hasError && fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
5295
+ "div",
5296
+ {
5297
+ className: "text-dangerous-500 text-xs -mt-[6px]",
5298
+ role: "alert",
5299
+ "aria-label": message,
5300
+ children: message
5301
+ },
5302
+ index
5303
+ ))
5304
+ ]
5305
+ }
5306
+ ) });
5307
+ };
5308
+ var DefaultContent = ({ formats, icon, limitMessage }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full md:w-[410px] h-full flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col text-center items-center", children: [
5309
+ /* @__PURE__ */ jsxRuntime.jsx(
5310
+ "div",
5311
+ {
5312
+ className: "flex items-center justify-center w-14 h-14 mb-2 bg-blue-100 rounded-full",
5313
+ children: icon === "file" ? /* @__PURE__ */ jsxRuntime.jsx(IconFile, {}) : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-image-plus text-[28px] text-blue-500" })
5314
+ }
5315
+ ),
5316
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-base", children: icon === "file" ? "Arraste o arquivo e solte aqui" : "Arraste as imagens e solte aqui" }),
5317
+ /* @__PURE__ */ jsxRuntime.jsx(
5318
+ "label",
5319
+ {
5320
+ htmlFor: "file-upload",
5321
+ className: "relative leading-none cursor-pointer text-sm bg-white focus-within:outline-none",
5322
+ children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
5323
+ "ou\xA0",
5324
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-blue-500", children: "selecione do seu computador" })
5325
+ ] })
5326
+ }
5327
+ ),
5328
+ /* @__PURE__ */ jsxRuntime.jsxs("small", { className: "text-label text-xxs leading-5", children: [
5329
+ "Formatos: ",
5330
+ formats,
5331
+ " | ",
5332
+ limitMessage ? limitMessage : "At\xE9 25 MB"
5333
+ ] })
5334
+ ] }) });
5335
+ var BlockedContent = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full md:w-[410px] h-full flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col text-center items-center justify-center", children: [
5336
+ /* @__PURE__ */ jsxRuntime.jsx(
5337
+ "div",
5338
+ {
5339
+ className: "flex items-center justify-center w-14 h-14 mb-1 bg-blue-100 rounded-full",
5340
+ children: /* @__PURE__ */ jsxRuntime.jsx(IconCheck, {})
5341
+ }
5342
+ ),
5343
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-base mt-1", children: "Arquivo carregado!" })
5344
+ ] }) });
5345
+ var DraggingContent = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full md:w-[410px] h-[152px] bg-blue-100 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col p-4 custom-border justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col h-full text-center items-center justify-center", children: [
5346
+ /* @__PURE__ */ jsxRuntime.jsx(
5347
+ "div",
5348
+ {
5349
+ className: "flex items-center justify-center w-14 h-14 mb-2 bg-blue-500 rounded-full",
5350
+ children: /* @__PURE__ */ jsxRuntime.jsx(IconFileUpload, {})
5351
+ }
5352
+ ),
5353
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-base text-blue-500", children: "Solte aqui para carregar o arquivo" })
5354
+ ] }) }) });
5355
+ var LoadingContent = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-blue-100 flex flex-col p-4 custom-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col text-center items-center justify-center", children: [
5356
+ /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "animate-spin" }),
5357
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-bold text-base text-blue-500", children: "Carregando arquivo..." })
5358
+ ] }) });
5359
+ function InfoIcon({
5360
+ content,
5361
+ id = "info-id"
5362
+ }) {
5363
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5364
+ "div",
5365
+ {
5366
+ "data-tooltip-id": id,
5367
+ "data-tooltip-html": content,
5368
+ "data-tooltip-place": "top",
5369
+ children: [
5370
+ /* @__PURE__ */ jsxRuntime.jsx(Popover3, { id }),
5371
+ /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-info-circle text-p-lg text-neutral-400" })
5372
+ ]
5373
+ }
5374
+ );
5375
+ }
5376
+
5377
+ // src/components/MultiSelect/MultiSelect.styles.tsx
5378
+ var customStyles3 = {
5379
+ indicatorSeparator: (provided, { hasValue }) => {
5380
+ return {
5381
+ ...provided,
5382
+ marginTop: "-6px",
5383
+ backgroundColor: hasValue ? "var(--input)" : "transparent"
5384
+ };
5385
+ },
5386
+ input: (provided, state) => ({
5387
+ ...provided,
5388
+ outline: "none",
5389
+ paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
5390
+ }),
5391
+ clearIndicator: (provided) => ({
5392
+ ...provided,
5393
+ color: "var(--label)",
5394
+ marginTop: "-6px",
5395
+ ":hover": {
5396
+ color: "var(--label)"
5397
+ }
5398
+ }),
5399
+ dropdownIndicator: (provided, state) => ({
5400
+ ...provided,
5401
+ color: "var(--paragraph)",
5402
+ display: state.selectProps.isTargeted ? "none" : "flex",
5403
+ paddingRight: "12px",
5404
+ marginTop: "-6px",
5405
+ ":hover": {
5406
+ color: "var(--paragraph)"
5407
+ }
5408
+ }),
5409
+ menu: (provided) => ({
5410
+ ...provided,
5411
+ marginTop: "4px",
5412
+ border: "1px solid var(--neutral-300)",
5413
+ boxShadow: "none",
5414
+ borderRadius: "8px",
5415
+ padding: "0px 8px",
5416
+ zIndex: 70,
5417
+ background: "white"
5418
+ }),
5419
+ singleValue: (base, state) => ({
5420
+ ...base,
5421
+ color: state.data.value === "active" ? "#0EAF86" : "black",
5422
+ display: "flex"
5423
+ }),
5424
+ control: (provided, state) => ({
5425
+ ...provided,
5426
+ cursor: "pointer",
5427
+ border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
5428
+ boxShadow: "none",
5429
+ outline: "none",
5430
+ borderRadius: "0.5rem",
5431
+ paddingLeft: "0px",
5432
+ placeholder: " ",
5433
+ minHeight: "46px",
5434
+ alignItems: "end",
5435
+ paddingTop: "8px",
5436
+ ":hover": {
5437
+ border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
5438
+ }
5439
+ }),
5440
+ multiValue: (provided) => ({
5441
+ ...provided,
5442
+ borderRadius: "20px",
5443
+ backgroundColor: "var(--neutral-100)",
5444
+ padding: "0px"
5445
+ }),
5446
+ multiValueLabel: (provided) => ({
5447
+ ...provided,
5448
+ color: "var(--paragraph)",
5449
+ paddingTop: "2px",
5450
+ lineHeight: "16px"
5451
+ }),
5452
+ multiValueRemove: (provided) => ({
5453
+ ...provided,
5454
+ color: "var(--neutral-400)",
5455
+ paddingRight: "6px",
5456
+ paddingLeft: "0px",
5457
+ ":hover": {
5458
+ color: "var(--dangerous-500)"
5459
+ }
5460
+ }),
5461
+ option: (provided, state) => {
5462
+ let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
5463
+ if (state.isDisabled) {
5464
+ color = "rgba(0,0,0,0.30)";
5465
+ }
5466
+ return {
5467
+ ...provided,
5468
+ height: "44px",
5469
+ cursor: "pointer",
5470
+ borderRadius: "8px",
5471
+ margin: "4px 0px",
5472
+ backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
5473
+ color,
5474
+ fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
5475
+ "&:hover": {
5476
+ backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : "var(--neutral-200)"
5477
+ },
5478
+ "&:active": {
5479
+ backgroundColor: "var(--blue-500)",
5480
+ color: "white",
5481
+ fontWeight: 700
5482
+ },
5483
+ "&:active svg": {
5484
+ color: "white",
5485
+ fontWeight: 700
5486
+ },
5487
+ " svg": {
5488
+ color: "white"
5489
+ }
5490
+ };
5491
+ },
5492
+ container: (provided) => ({
5493
+ ...provided,
5494
+ border: "none",
5495
+ outline: "none",
5496
+ boxShadow: "none",
5497
+ padding: "none",
5498
+ margin: "none"
5499
+ })
5500
+ };
5501
+ var MultiSelect = ({
5502
+ name,
5503
+ options,
5504
+ label = "",
5505
+ error,
5506
+ defaultValue,
5507
+ control,
5508
+ isSearchable = false,
5509
+ required,
5510
+ disabled
5511
+ }) => {
5512
+ const fieldValidationMessages = [error == null ? void 0 : error.message];
5513
+ const hasError = {
5514
+ hasError: fieldValidationMessages.some((item) => item !== void 0)
5515
+ };
5516
+ return /* @__PURE__ */ jsxRuntime.jsx(
5517
+ reactHookForm.Controller,
5518
+ {
5519
+ name,
5520
+ control,
5521
+ defaultValue,
5522
+ render: ({ field }) => {
5523
+ const { DropdownIndicator, Option } = Select.components;
5524
+ const DropdownIndicatorCustom = (props) => {
5525
+ return /* @__PURE__ */ jsxRuntime.jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[20px]" }) });
5526
+ };
5527
+ const IconOption = (props) => {
5528
+ return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
5529
+ "div",
5530
+ {
5531
+ style: {
5532
+ display: "flex",
5533
+ alignItems: "center",
5534
+ justifyContent: "space-between",
5535
+ height: "100%"
5536
+ },
5537
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
5538
+ }
5539
+ ) });
5540
+ };
5541
+ const NoOptionsMessage = () => {
5542
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-neutral-300", children: "Nenhum dado encontrado" });
5543
+ };
5544
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full", id: "multiselect", children: [
5545
+ /* @__PURE__ */ jsxRuntime.jsx(
5546
+ Select__default.default,
5547
+ {
5548
+ ...field,
5549
+ ...hasError,
5550
+ isDisabled: disabled,
5551
+ name: field.name,
5552
+ ref: field.ref,
5553
+ styles: customStyles3,
5554
+ placeholder: " ",
5555
+ isSearchable,
5556
+ options,
5557
+ isMulti: true,
5558
+ tabSelectsValue: true,
5559
+ components: {
5560
+ ValueContainer: ValueContainer3,
5561
+ Option: IconOption,
5562
+ NoOptionsMessage,
5563
+ DropdownIndicator: DropdownIndicatorCustom
5564
+ },
5565
+ isOptionDisabled: (option) => option.blocked,
5566
+ hideSelectedOptions: false,
5567
+ closeMenuOnSelect: false
5568
+ }
5569
+ ),
5570
+ /* @__PURE__ */ jsxRuntime.jsxs(
5571
+ "span",
5572
+ {
5573
+ className: clsx9__default.default("text-label text-sm left-2.5", {
5574
+ [" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
5575
+ ["text-dangerous-500"]: hasError.hasError
5576
+ }),
5577
+ children: [
5578
+ label,
5579
+ required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
5580
+ ]
5581
+ }
5582
+ ),
5583
+ fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
5584
+ "div",
5585
+ {
5586
+ className: "text-dangerous-500 text-xs -mt-[5px]",
5587
+ role: "alert",
5588
+ "aria-label": message,
5589
+ children: message
5590
+ },
5591
+ index
5592
+ ))
5593
+ ] });
5594
+ }
5595
+ }
5596
+ );
5597
+ };
5598
+ var ValueContainer3 = ({ children, ...props }) => {
5599
+ return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
5600
+ };
5601
+
5602
+ // src/components/InputTag/InputTag.styles.tsx
5603
+ var customStyles4 = {
5604
+ input: (provided) => ({
5605
+ ...provided,
5606
+ outline: "none",
5607
+ height: "100%"
5608
+ }),
5609
+ indicatorSeparator: (provided) => ({
5610
+ ...provided,
5611
+ backgroundColor: "transparent"
5612
+ }),
5613
+ clearIndicator: (provided) => ({
5614
+ ...provided,
5615
+ color: "var(--label)",
5616
+ ":hover": {
5617
+ color: "var(--label)"
5618
+ }
5619
+ }),
5620
+ dropdownIndicator: (provided) => ({
5621
+ ...provided,
5622
+ display: "none"
5623
+ }),
5624
+ menu: (provided) => ({
5625
+ ...provided,
5626
+ marginTop: "4px",
5627
+ border: "1px solid var(--neutral-300)",
5628
+ boxShadow: "none",
5629
+ borderRadius: "8px",
5630
+ padding: "0px 8px",
5631
+ zIndex: 30,
5632
+ background: "white"
5633
+ }),
5634
+ control: (provided, state) => {
5635
+ return {
5636
+ ...provided,
5637
+ cursor: "pointer",
5638
+ paddingTop: state.selectProps.hasLabel ? "18px" : "0px",
5639
+ border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.isFocused ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
5640
+ boxShadow: "none",
5641
+ outline: "none",
5642
+ borderRadius: "0.5rem",
5643
+ // height: "52px",
5644
+ // paddingLeft: '8px',
5645
+ placeholder: state.selectProps.hasLabel ? " " : state.selectProps.placeholder,
5646
+ alignItems: state.selectProps.hasLabel ? "end" : "center",
5647
+ ":hover": {
5648
+ border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.isFocused ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
5649
+ // height: "52px",
5650
+ },
5651
+ ":focus-within": {
5652
+ // height: "52px",
5653
+ }
5654
+ };
5655
+ },
5656
+ multiValue: (provided) => ({
5657
+ ...provided,
5658
+ borderRadius: "20px",
5659
+ backgroundColor: "var(--neutral-100)",
5660
+ padding: "0px 6px"
5661
+ }),
5662
+ multiValueLabel: (provided) => ({
5663
+ ...provided,
5664
+ color: "var(--paragraph)"
5665
+ }),
5666
+ multiValueRemove: (provided) => ({
5667
+ ...provided,
5668
+ color: "var(--neutral-400)",
5669
+ ":hover": {
5670
+ color: "var(--dangerous-500)"
5671
+ }
5672
+ }),
5673
+ container: (provided) => ({
5674
+ ...provided,
5675
+ border: "none",
5676
+ outline: "none",
5677
+ boxShadow: "none",
5678
+ padding: "none",
5679
+ margin: "none"
5680
+ })
5681
+ };
5682
+ var InputTag = ({
5683
+ name,
5684
+ label = "",
5685
+ error,
5686
+ defaultValue,
5687
+ control,
5688
+ required,
5689
+ placeholder,
5690
+ blockSpaces = false
5691
+ }) => {
5692
+ const [inputValue, setInputValue] = React4.useState("");
5693
+ const fieldValidationMessages = [error == null ? void 0 : error.message];
5694
+ const hasError = {
5695
+ hasError: fieldValidationMessages.some((item) => item !== void 0)
5696
+ };
5697
+ const removeSpaces = (value) => {
5698
+ return value == null ? void 0 : value.replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
5699
+ };
5700
+ return /* @__PURE__ */ jsxRuntime.jsx(
5701
+ reactHookForm.Controller,
5702
+ {
5703
+ name,
5704
+ control,
5705
+ defaultValue,
5706
+ render: ({ field }) => {
5707
+ const handleKeyDown = (event) => {
5708
+ if (!inputValue || ((field == null ? void 0 : field.value) || []).find((item) => (item == null ? void 0 : item.value) === inputValue))
5709
+ return;
5710
+ switch (event.key) {
5711
+ case "Enter":
5712
+ case "Tab":
5713
+ field.onChange([
5714
+ ...(field == null ? void 0 : field.value) || [],
5715
+ {
5716
+ label: blockSpaces ? removeSpaces(inputValue) : inputValue,
5717
+ value: blockSpaces ? removeSpaces(inputValue) : inputValue
5718
+ }
5719
+ ]);
5720
+ setInputValue("");
5721
+ event.preventDefault();
5722
+ }
5723
+ };
5724
+ const hasLabel = {
5725
+ hasLabel: (label == null ? void 0 : label.length) > 0
5726
+ };
5727
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5728
+ "div",
5729
+ {
5730
+ className: `relative ${label ? "with-label" : ""}`,
5731
+ id: "inputtag",
5732
+ children: [
5733
+ /* @__PURE__ */ jsxRuntime.jsx(
5734
+ Select__default.default,
5735
+ {
5736
+ ...hasError,
5737
+ ...hasLabel,
5738
+ ...{ placeholder },
5739
+ ...field,
5740
+ styles: customStyles4,
5741
+ menuIsOpen: false,
5742
+ placeholder: hasLabel.hasLabel ? " " : placeholder,
5743
+ isMulti: true,
5744
+ tabSelectsValue: true,
5745
+ onKeyDown: handleKeyDown,
5746
+ isClearable: false,
5747
+ inputValue,
5748
+ onInputChange: (newValue) => setInputValue(newValue),
5749
+ isOptionDisabled: (option) => option.blocked
5750
+ }
5751
+ ),
5752
+ /* @__PURE__ */ jsxRuntime.jsxs(
5753
+ "span",
5754
+ {
5755
+ className: clsx9__default.default("text-label text-sm left-2.5", {
5756
+ [" scale-75 -translate-y-3 "]: field.value && field.value.length > 0,
5757
+ ["text-dangerous-500"]: hasError.hasError
5758
+ }),
5759
+ children: [
5760
+ label,
5761
+ required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
5762
+ ]
5763
+ }
5764
+ ),
5765
+ fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
5766
+ "div",
5767
+ {
5768
+ className: "text-dangerous-500 text-xs mt-[2px]",
5769
+ role: "alert",
5770
+ "aria-label": message,
5771
+ children: message
5772
+ },
5773
+ index
5774
+ ))
5775
+ ]
5776
+ }
5777
+ );
5778
+ }
5779
+ }
5780
+ );
5781
+ };
5782
+ var ValueContainer4 = ({ children, ...props }) => {
5783
+ return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
5784
+ };
5785
+ InputTag.displayName = "InputTag";
5786
+
5787
+ // src/components/MultiSelectBottom/MultiSelectBottom.styles.tsx
5788
+ var customStyles5 = {
5789
+ indicatorSeparator: (provided, { hasValue }) => {
5790
+ return {
5791
+ ...provided,
5792
+ display: "none"
5793
+ };
5794
+ },
5795
+ input: (provided, state) => ({
5796
+ ...provided,
5797
+ outline: "none",
5798
+ paddingLeft: state.selectProps.hasIcon ? "2.5rem" : "0px"
5799
+ }),
5800
+ clearIndicator: (provided) => ({
5801
+ ...provided,
5802
+ display: "none"
5803
+ }),
5804
+ dropdownIndicator: (provided, state) => ({
5805
+ ...provided,
5806
+ color: "var(--paragraph)",
5807
+ display: state.selectProps.isTargeted ? "none" : "flex",
5808
+ paddingRight: "12px",
5809
+ ":hover": {
5810
+ color: "var(--paragraph)"
5811
+ }
5812
+ }),
5813
+ menu: (provided) => ({
5814
+ ...provided,
5815
+ marginTop: "4px",
5816
+ border: "1px solid var(--neutral-300)",
5817
+ boxShadow: "none",
5818
+ borderRadius: "8px",
5819
+ padding: "0px 8px",
5820
+ zIndex: 70,
5821
+ background: "white"
5822
+ }),
5823
+ singleValue: (base, state) => ({
5824
+ ...base,
5825
+ color: state.data.value === "active" ? "#0EAF86" : "black",
5826
+ display: "flex"
5827
+ }),
5828
+ control: (provided, state) => ({
5829
+ ...provided,
5830
+ cursor: "pointer",
5831
+ border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)",
5832
+ boxShadow: "none",
5833
+ outline: "none",
5834
+ borderRadius: "0.5rem",
5835
+ paddingLeft: "8px",
5836
+ placeholder: " ",
5837
+ height: "46px",
5838
+ alignItems: "end",
5839
+ ":hover": {
5840
+ border: state.selectProps.hasError ? "1px solid var(--dangerous-500)" : state.menuIsOpen ? "1px solid var(--blue-500)" : "1px solid var(--neutral-300)"
5841
+ }
5842
+ }),
5843
+ multiValue: (provided) => ({
5844
+ ...provided,
5845
+ borderRadius: "20px",
5846
+ backgroundColor: "var(--neutral-100)",
5847
+ padding: "0px 0px",
5848
+ display: "none"
5849
+ }),
5850
+ multiValueLabel: (provided) => ({
5851
+ ...provided,
5852
+ color: "var(--paragraph)",
5853
+ paddingTop: "6px"
5854
+ }),
5855
+ multiValueRemove: (provided) => ({
5856
+ ...provided,
5857
+ paddingRight: "6px",
5858
+ paddingLeft: "0px",
5859
+ color: "var(--neutral-400)",
5860
+ ":hover": {
5861
+ color: "var(--dangerous-500)"
5862
+ }
5863
+ }),
5864
+ option: (provided, state) => {
5865
+ let color = state.isSelected && !state.selectProps.isTargeted ? "white" : "var(--paragraph)";
5866
+ if (state.isDisabled) {
5867
+ color = "rgba(0,0,0,0.30)";
5868
+ }
5869
+ return {
5870
+ ...provided,
5871
+ height: "44px",
5872
+ cursor: "pointer",
5873
+ borderRadius: "8px",
5874
+ margin: "4px 0px",
5875
+ backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : state.isFocused ? "var(--neutral-200)" : "white",
5876
+ color,
5877
+ fontWeight: state.isSelected && !state.selectProps.isTargeted ? 700 : 400,
5878
+ "&:hover": {
5879
+ backgroundColor: state.isSelected && !state.selectProps.isTargeted ? "var(--blue-500)" : "var(--neutral-200)"
5880
+ },
5881
+ "&:active": {
5882
+ backgroundColor: "var(--blue-500)",
5883
+ color: "white",
5884
+ fontWeight: 700
5885
+ },
5886
+ "&:active svg": {
5887
+ color: "white",
5888
+ fontWeight: 700
5889
+ },
5890
+ " svg": {
5891
+ color: "white"
5892
+ }
5893
+ };
5894
+ },
5895
+ container: (provided) => ({
5896
+ ...provided,
5897
+ border: "none",
5898
+ outline: "none",
5899
+ boxShadow: "none",
5900
+ padding: "none",
5901
+ margin: "none"
5902
+ }),
5903
+ valueContainer: (provided) => ({
5904
+ ...provided,
5905
+ padding: "2px 0px"
5906
+ })
5907
+ };
5908
+ var MultiSelectBottom = ({
5909
+ name,
5910
+ options,
5911
+ label = "",
5912
+ error,
5913
+ defaultValue,
5914
+ control,
5915
+ isSearchable = false,
5916
+ required,
5917
+ disabled,
5918
+ emptyMessage,
5919
+ filterOptions,
5920
+ debounce: debounce2 = 0
5921
+ }) => {
5922
+ const [loading, setLoading] = React4.useState(false);
5923
+ const [optionsList, setOptionsList] = React4.useState(() => options || []);
5924
+ const fieldValidationMessages = [error == null ? void 0 : error.message];
5925
+ const hasError = {
5926
+ hasError: fieldValidationMessages.some((item) => item !== void 0)
5927
+ };
5928
+ ({
5929
+ hasLabel: (label == null ? void 0 : label.length) > 0
5930
+ });
5931
+ const loadOptions = (inputValue) => {
5932
+ setLoading(true);
5933
+ if (isSearchable && filterOptions) {
5934
+ if (!debounce2 || debounce2 && inputValue.length >= debounce2) {
5935
+ const result = filterOptions(inputValue);
5936
+ setLoading(false);
5937
+ return result;
5938
+ }
5939
+ } else {
5940
+ setOptionsList(options);
5941
+ }
5942
+ };
5943
+ return /* @__PURE__ */ jsxRuntime.jsx(
5944
+ reactHookForm.Controller,
5945
+ {
5946
+ name,
5947
+ control,
5948
+ defaultValue,
5949
+ render: ({ field }) => {
5950
+ var _a, _b;
5951
+ const { DropdownIndicator, Option } = Select.components;
5952
+ const DropdownIndicatorCustom = (props) => {
5953
+ return /* @__PURE__ */ jsxRuntime.jsx(DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-down text-[20px]" }) });
5954
+ };
5955
+ const NoOptionsMessage = (props) => {
5956
+ var _a2;
5957
+ if (props.selectProps.inputValue.length == 0 && debounce2 > 0 || debounce2 > 0 && props.selectProps.inputValue.length < debounce2) {
5958
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-neutral-300", children: [
5959
+ "Digite ",
5960
+ debounce2,
5961
+ " ou mais caracteres para pesquisar"
5962
+ ] });
5963
+ } else if (props.selectProps.inputValue.length > 0 && ((_a2 = props == null ? void 0 : props.options) == null ? void 0 : _a2.length) == 0) {
5964
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-neutral-300", children: "Nenhum dado encontrado" });
5965
+ }
5966
+ };
5967
+ const IconOption = (props) => {
5968
+ return /* @__PURE__ */ jsxRuntime.jsx(Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
5969
+ "div",
5970
+ {
5971
+ style: {
5972
+ display: "flex",
5973
+ alignItems: "center",
5974
+ justifyContent: "space-between",
5975
+ height: "100%"
5976
+ },
5977
+ children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx9__default.default("text-p-md focus:text-white"), children: props.data.label })
5978
+ }
5979
+ ) });
5980
+ };
5981
+ const LoadingMessage = (props) => {
5982
+ if (!debounce2 || debounce2 && props.selectProps.inputValue.length >= debounce2) {
5983
+ return /* @__PURE__ */ jsxRuntime.jsxs(
5984
+ "div",
5985
+ {
5986
+ ...props.innerProps,
5987
+ className: "flex items-center gap-[6px] p-2",
5988
+ children: [
5989
+ /* @__PURE__ */ jsxRuntime.jsx(
5990
+ "img",
5991
+ {
5992
+ className: "animate-spin ",
5993
+ src: "/spinner.svg",
5994
+ alt: "circle",
5995
+ width: 16,
5996
+ height: 16
5997
+ }
5998
+ ),
5999
+ "Buscando..."
6000
+ ]
6001
+ }
6002
+ );
6003
+ } else if (debounce2 && props.selectProps.inputValue.length < debounce2) {
6004
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 text-neutral-300", children: [
6005
+ "Digite ",
6006
+ debounce2,
6007
+ " ou mais caracteres para pesquisar"
6008
+ ] });
6009
+ }
6010
+ };
6011
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full", id: "multiselectbottom", children: [
6012
+ /* @__PURE__ */ jsxRuntime.jsx(
6013
+ AsyncSelect__default.default,
6014
+ {
6015
+ ...field,
6016
+ ...hasError,
6017
+ isDisabled: disabled,
6018
+ name: field.name,
6019
+ ref: field.ref,
6020
+ styles: customStyles5,
6021
+ placeholder: " ",
6022
+ isSearchable,
6023
+ options: optionsList,
6024
+ isMulti: true,
6025
+ defaultOptions: debounce2 > 0 ? false : options ? optionsList : true,
6026
+ loadOptions,
6027
+ tabSelectsValue: true,
6028
+ components: {
6029
+ ValueContainer: ValueContainer5,
6030
+ Option: IconOption,
6031
+ NoOptionsMessage,
6032
+ LoadingMessage,
6033
+ DropdownIndicator: DropdownIndicatorCustom
6034
+ },
6035
+ isOptionDisabled: (option) => option.blocked,
6036
+ hideSelectedOptions: false,
6037
+ closeMenuOnSelect: false,
6038
+ backspaceRemovesValue: false
6039
+ }
6040
+ ),
6041
+ /* @__PURE__ */ jsxRuntime.jsxs(
6042
+ "span",
6043
+ {
6044
+ className: clsx9__default.default("text-label text-sm left-2.5", {
6045
+ ["text-dangerous-500"]: hasError.hasError
6046
+ }),
6047
+ children: [
6048
+ label,
6049
+ required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
6050
+ ]
6051
+ }
6052
+ ),
6053
+ fieldValidationMessages == null ? void 0 : fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
6054
+ "div",
6055
+ {
6056
+ className: "text-dangerous-500 text-xs mt-[3px]",
6057
+ role: "alert",
6058
+ "aria-label": message,
6059
+ children: message
6060
+ },
6061
+ index
6062
+ )),
6063
+ /* @__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: [
6064
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: item.label }),
6065
+ /* @__PURE__ */ jsxRuntime.jsx(
6066
+ "button",
6067
+ {
6068
+ type: "button",
6069
+ onClick: () => {
6070
+ const copy = [...field.value];
6071
+ const index = copy.findIndex(
6072
+ (opt) => opt.value == item.value
6073
+ );
6074
+ copy.splice(index, 1);
6075
+ field.onChange(copy);
6076
+ },
6077
+ children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-times text-sm text-neutral-400" })
6078
+ }
6079
+ )
6080
+ ] })) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-md text-label pt-2 pl-2", children: emptyMessage || "Nenhuma op\xE7\xE3o selecionada" }) })
6081
+ ] });
6082
+ }
6083
+ }
6084
+ );
6085
+ };
6086
+ var ValueContainer5 = ({ children, ...props }) => {
6087
+ return /* @__PURE__ */ jsxRuntime.jsx(Select.components.ValueContainer, { ...props, children });
6088
+ };
6089
+ MultiSelectBottom.displayName = "MultiSelectBottom";
6090
+ function PageBox(props) {
6091
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5 px-4 border border-neutral-200 rounded-lg", children: [
6092
+ (props == null ? void 0 : props.title) && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-t-xs font-bold text-title mb-4", children: props.title }),
6093
+ props == null ? void 0 : props.children
6094
+ ] });
6095
+ }
6096
+ var PageHeader = ({
6097
+ title,
6098
+ breadcrumbs,
6099
+ children,
6100
+ description
6101
+ }) => {
6102
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row place-content-between font-sans pb-4 w-full", children: [
6103
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
6104
+ /* @__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(
6105
+ "a",
6106
+ {
6107
+ href: breadcrumb.link,
6108
+ className: "hover:no-underline hover:text-paragraph",
6109
+ children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cursor-pointer flex items-center", children: [
6110
+ index > 0 && /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-right" }),
6111
+ breadcrumb.name
6112
+ ] })
6113
+ }
6114
+ ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
6115
+ /* @__PURE__ */ jsxRuntime.jsx("i", { className: "uil uil-angle-right" }),
6116
+ /* @__PURE__ */ jsxRuntime.jsx(
6117
+ "span",
6118
+ {
6119
+ className: index === breadcrumbs.length - 1 ? "text-paragraph" : "",
6120
+ children: breadcrumb.name
6121
+ }
6122
+ )
6123
+ ] }) }, index)) }),
6124
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
6125
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-t-md text-title font-bold mb-1", children: title }),
6126
+ description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-p-lg text-label", children: description })
6127
+ ] })
6128
+ ] }),
6129
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 md:justify-end flex-1 mt-2 md:mt-0", children })
6130
+ ] });
6131
+ };
6132
+ var variants4 = {
6133
+ primary: {
6134
+ bar: "bg-gradient-to-b from-blue-start to-blue-end",
6135
+ text: "text-blue-500"
6136
+ },
6137
+ success: {
6138
+ bar: "bg-gradient-to-b from-success-start to-success-end",
6139
+ text: "text-success-500"
6140
+ },
6141
+ danger: {
6142
+ bar: "bg-gradient-to-b from-danger-start to-danger-end",
6143
+ text: "text-dangerous-600"
6144
+ },
6145
+ info: {
6146
+ bar: "bg-gradient-to-b from-blue-start to-blue-end",
6147
+ text: "text-blue-500"
6148
+ }
6149
+ };
6150
+ var ProgressBar = ({
6151
+ percentage,
6152
+ variant = "primary",
6153
+ status
6154
+ }) => {
6155
+ const [barPercentage, setBarPercentage] = React4.useState(() => fixPercentage());
6156
+ function fixPercentage() {
6157
+ if (percentage > 100) {
6158
+ return 100;
6159
+ } else {
6160
+ return percentage;
6161
+ }
6162
+ }
6163
+ React4.useEffect(() => {
6164
+ setBarPercentage(fixPercentage());
6165
+ }, [percentage]);
6166
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-[2px] min-w-[170px]", children: [
6167
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full p-[1px] border border-neutral-300 rounded-[15px]", children: /* @__PURE__ */ jsxRuntime.jsx(
6168
+ "div",
6169
+ {
6170
+ className: clsx9__default.default(variants4[variant].bar, "h-[14px] rounded-[15px]"),
6171
+ style: { width: `${barPercentage}%` }
6172
+ }
6173
+ ) }),
6174
+ status && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx9__default.default(variants4[variant].text, "text-blue-500 text-xs"), children: [
6175
+ status,
6176
+ percentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold", children: [
6177
+ "\xA0- ",
6178
+ percentage,
6179
+ " %"
6180
+ ] })
6181
+ ] })
6182
+ ] });
6183
+ };
6184
+ function SimpleTab({ tabs, onClick }) {
6185
+ const [currentTab, setCurrentTab] = React4.useState(0);
6186
+ function isCurrentTab(index) {
6187
+ return index === currentTab;
6188
+ }
6189
+ 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: [
6190
+ /* @__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(
6191
+ "nav",
6192
+ {
6193
+ className: clsx9__default.default(
6194
+ 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",
6195
+ "group cursor-pointer flex items-center border-b-2 py-1 px-4 text-base"
6196
+ ),
6197
+ "aria-current": isCurrentTab(index) ? "page" : void 0,
6198
+ onClick: () => {
6199
+ setCurrentTab(index);
6200
+ if (onClick) {
6201
+ onClick(tabs[index]);
6202
+ }
6203
+ },
6204
+ children: [
6205
+ /* @__PURE__ */ jsxRuntime.jsx(
6206
+ "div",
6207
+ {
6208
+ id: "tab-icon",
6209
+ className: clsx9__default.default(
6210
+ isCurrentTab(index) ? "text-rose-700 group-hover:text-rose-800" : "text-label group-hover:text-paragraph",
6211
+ { "-ml-0.5 mr-2": tab.icon }
6212
+ ),
6213
+ "aria-hidden": "true",
6214
+ children: tab.icon
6215
+ }
6216
+ ),
6217
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: tab.label })
6218
+ ]
6219
+ },
6220
+ tab.key
6221
+ )) }) }),
6222
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex-1 flex flex-col", children: tabs[currentTab].children })
6223
+ ] }) });
6224
+ }
4611
6225
 
4612
6226
  exports.Accordion = Accordion;
4613
6227
  exports.Badge = Badge;
@@ -4621,23 +6235,33 @@ exports.DataTablePagination = DataTablePagination;
4621
6235
  exports.DatePickerInput = DatePickerInput;
4622
6236
  exports.EditableButton = EditableButton;
4623
6237
  exports.EditableText = EditableText;
6238
+ exports.EditableTextSelect = EditableTextSelect;
6239
+ exports.FileUpload = FileUpload;
4624
6240
  exports.FilterCalendar = FilterCalendar;
4625
6241
  exports.FilterOptions = FilterOptions;
6242
+ exports.InfoIcon = InfoIcon;
4626
6243
  exports.Input = Input;
4627
6244
  exports.InputMoney = InputMoney;
4628
6245
  exports.InputNumber = InputNumber;
4629
6246
  exports.InputPercentage = InputPercentage;
6247
+ exports.InputTag = InputTag;
4630
6248
  exports.Item = Item;
4631
6249
  exports.Logo = Logo;
4632
6250
  exports.MaskedInput = MaskedInput;
4633
6251
  exports.Menu = Menu;
4634
6252
  exports.ModalDialog = ModalDialog;
6253
+ exports.MultiSelect = MultiSelect;
6254
+ exports.MultiSelectBottom = MultiSelectBottom;
6255
+ exports.PageBox = PageBox;
6256
+ exports.PageHeader = PageHeader;
4635
6257
  exports.PaginationSelect = PaginationSelect;
4636
6258
  exports.Popover = Popover3;
6259
+ exports.ProgressBar = ProgressBar;
4637
6260
  exports.Radio = Radio;
4638
6261
  exports.RocketIcon = RocketIcon;
4639
6262
  exports.SelectField = SelectField;
4640
6263
  exports.SelectFieldBip = SelectFieldBip;
6264
+ exports.SimpleTab = SimpleTab;
4641
6265
  exports.SpinnerIcon = SpinnerIcon;
4642
6266
  exports.Table = Table;
4643
6267
  exports.TableBody = TableBody;
@@ -4648,7 +6272,7 @@ exports.TableHead = TableHead;
4648
6272
  exports.TableHeader = TableHeader;
4649
6273
  exports.TableRow = TableRow;
4650
6274
  exports.Toggle = Toggle;
4651
- exports.ValueContainer = ValueContainer;
6275
+ exports.ValueContainer = ValueContainer4;
4652
6276
  exports.sizes = sizes2;
4653
6277
  //# sourceMappingURL=index.cjs.map
4654
6278
  //# sourceMappingURL=index.cjs.map