@tecsinapse/cortex-react 2.3.0-beta.0 → 2.3.0

package/dist/cjs/components/Accordion/Root.js

@@ -10,6 +10,9 @@ const AccordionRoot = ({
   defaultOpen,
   label,
   floating,
+  showDivider,
+  showArrowBorder,
+  arrowPosition,
   onOpen,
   invertedArrow,
   onClose,
@@ -23,6 +26,9 @@ const AccordionRoot = ({
         floating,
         onOpen,
         onClose,
+        showDivider,
+        showArrowBorder,
+        arrowPosition,
         invertedArrow,
         direction
       }

package/dist/cjs/components/Accordion/Trigger.js

@@ -7,7 +7,11 @@ var context = require('./context.js');
 
 const AccordionTrigger = ({
   label,
+  children,
   floating = false,
+  arrowPosition = "left",
+  showDivider = true,
+  showArrowBorder = true,
   /**
    * Only applied to trigger arrow
    */
@@ -18,9 +22,9 @@ const AccordionTrigger = ({
   direction = "horizontal"
 }) => {
   const { open, toggle } = context.useAccordionContext();
-  if (!floating && !label) {
+  if (!floating && !label && !children) {
     throw new Error(
-      "A label must be specified if the trigger is not floating variant"
+      "A label or children must be specified if the trigger is not floating variant"
     );
   }
   const action = () => {
@@ -35,24 +39,40 @@ const AccordionTrigger = ({
     "div",
     {
       className: clsx(
-        "flex justify-between align-center border-content-minimal cursor-pointer",
+        "flex justify-between align-center cursor-pointer",
         { "mr-deca": floating && direction === "horizontal" },
         { "mb-deca": floating && direction === "vertical" },
-        { "border-r flex-col px-mili": direction === "horizontal" },
-        { "border-b py-mili": direction === "vertical" }
+        {
+          "border-r border-secondary-light flex-col px-mili": direction === "horizontal"
+        },
+        {
+          "border-b border-secondary-light py-mili": showDivider && direction === "vertical"
+        }
       ),
       onClick: action,
       children: [
+        !floating && arrowPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: clsx({
+              "-rotate-180 [writing-mode:vertical-lr]": direction === "horizontal"
+            }),
+            children: children ?? label
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: clsx(
-              "rounded-mili border border-content-minimal flex align-center justify-center p-micro",
+              "rounded-mili flex align-center justify-center p-micro",
+              {
+                "absolute -translate-x-micro translate-y-deca bg-white": floating && direction === "horizontal"
+              },
               {
-                "absolute -translate-x-micro translate-y-deca bg-surface-overlay": floating && direction === "horizontal"
+                "absolute -translate-y-micro translate-x-deca bg-white": floating && direction === "vertical"
               },
               {
-                "absolute -translate-y-micro translate-x-deca bg-surface-overlay": floating && direction === "vertical"
+                "border border-secondary-light": showArrowBorder
               },
               className
             ),
@@ -60,7 +80,7 @@ const AccordionTrigger = ({
               lia.LiaAngleRightSolid,
               {
                 className: clsx(
-                  "text-content-low transition-transform duration-200",
+                  "text-secondary-medium transition-transform duration-200",
                   {
                     "rotate-180": invertedArrow ? !open : open
                   }
@@ -70,7 +90,7 @@ const AccordionTrigger = ({
               lia.LiaAngleDownSolid,
               {
                 className: clsx(
-                  "text-content-low transition-transform duration-200",
+                  "text-secondary-medium transition-transform duration-200",
                   {
                     "rotate-180": invertedArrow ? !open : open
                   }
@@ -79,15 +99,15 @@ const AccordionTrigger = ({
             )
           }
         ),
-        !floating ? /* @__PURE__ */ jsxRuntime.jsx(
+        !floating && arrowPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             className: clsx({
               "-rotate-180 [writing-mode:vertical-lr]": direction === "horizontal"
             }),
-            children: label
+            children: children ?? label
           }
-        ) : null
+        )
       ]
     }
   );

package/dist/cjs/components/Autocomplete/GroupedOptions.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var Option = require('./Option.js');
+var useAutocompleteGroupedOptions = require('../../hooks/useAutocompleteGroupedOptions.js');
+var SkeletonOptions = require('../Select/SkeletonOptions.js');
+var context = require('./context.js');
+
+const { groupedTitle, list } = cortexCore.selectVariants();
+const AutocompleteGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { options: _options, isLoading } = useAutocompleteGroupedOptions.useAutocompleteGroupedOptions({
+    options
+  });
+  const context$1 = React.useContext(
+    context.AutocompleteContext
+  );
+  if (!context$1)
+    throw new Error(
+      "AutocompleteGroupedOptions must be used within AutocompleteRoot"
+    );
+  const { keyExtractor } = context$1;
+  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: [..._options ?? []].map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: groupedTitle(), children: groupedLabelExtractor?.(key) }),
+    value.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      Option.AutocompleteOption,
+      {
+        grouped: true,
+        option,
+        onSelect
+      },
+      keyExtractor(option)
+    ))
+  ] }, key)) });
+};
+
+exports.AutocompleteGroupedOptions = AutocompleteGroupedOptions;

package/dist/cjs/components/Autocomplete/Option.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const AutocompleteOption = ({
+  option,
+  onSelect,
+  grouped = false
+}) => {
+  const context$1 = React.useContext(
+    context.AutocompleteContext
+  );
+  if (!context$1)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { setOpen, labelExtractor } = context$1;
+  const handleSelect = React.useCallback(
+    (option2) => {
+      setOpen(false);
+      onSelect?.(option2);
+    },
+    [onSelect, setOpen]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      onClick: () => handleSelect(option),
+      className: cortexCore.option({
+        selected: false,
+        grouped
+      }),
+      role: "option",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: labelExtractor(option) })
+    }
+  );
+};
+
+exports.AutocompleteOption = AutocompleteOption;

package/dist/cjs/components/Autocomplete/Options.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var Option = require('./Option.js');
+var useAutocompleteOptions = require('../../hooks/useAutocompleteOptions.js');
+var SkeletonOptions = require('../Select/SkeletonOptions.js');
+var context = require('./context.js');
+
+const { list } = cortexCore.selectVariants();
+const AutocompleteOptions = ({
+  options,
+  onSelect,
+  children
+}) => {
+  const context$1 = React.useContext(
+    context.AutocompleteContext
+  );
+  if (!context$1)
+    throw new Error("AutocompleteOptions must be used within AutocompleteRoot");
+  const { keyExtractor } = context$1;
+  const { options: _options, isLoading } = useAutocompleteOptions.useAutocompleteOptions({
+    options
+  });
+  return isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonOptions.SkeletonOptions, {}) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "listbox", className: list(), children: children ?? _options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+    Option.AutocompleteOption,
+    {
+      option,
+      onSelect
+    },
+    keyExtractor(option)
+  )) });
+};
+
+exports.AutocompleteOptions = AutocompleteOptions;

package/dist/cjs/components/Autocomplete/Popover.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@floating-ui/react');
+var index = require('../Popover/index.js');
+var context = require('./context.js');
+var clsx = require('clsx');
+
+const AutocompletePopover = ({
+  children,
+  className
+}) => {
+  const context$1 = React.useContext(context.AutocompleteContext);
+  if (!context$1)
+    throw new Error("AutocompletePopover must be used within AutocompleteRoot");
+  const { triggerWidth } = context$1;
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.Popover.Content,
+    {
+      className: clsx(
+        "bg-white shadow-md rounded-md overflow-y-auto max-h-[30vh] outline-none z-9999",
+        className
+      ),
+      style: {
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      initialFocus: -1,
+      children
+    }
+  ) });
+};
+
+exports.AutocompletePopover = AutocompletePopover;

package/dist/cjs/components/Autocomplete/Root.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Popover/index.js');
+var context = require('./context.js');
+
+const AutocompleteRoot = ({
+  keyExtractor,
+  labelExtractor,
+  children
+}) => {
+  const [triggerWidth, setTriggerWidth] = React.useState();
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    context.AutocompleteContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        triggerWidth,
+        setTriggerWidth,
+        keyExtractor,
+        labelExtractor
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        index.Popover.Root,
+        {
+          placement: "bottom-start",
+          controlled: true,
+          isOpen: open,
+          setIsOpen: setOpen,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full", children })
+        }
+      )
+    }
+  );
+};
+
+exports.AutocompleteRoot = AutocompleteRoot;

package/dist/cjs/components/Autocomplete/Trigger.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Popover/index.js');
+var index$1 = require('../Input/index.js');
+var context = require('./context.js');
+
+const AutocompleteTrigger = ({
+  inputValue,
+  onChange,
+  label,
+  disabled,
+  placeholder
+}) => {
+  const context$1 = React.useContext(context.AutocompleteContext);
+  if (!context$1)
+    throw new Error("AutocompleteTrigger must be used within AutocompleteRoot");
+  const { setTriggerWidth, setOpen } = context$1;
+  const triggerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
+  const handleChange = (event) => {
+    onChange(event);
+    if (event.target.value.length > 0) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.Input.Root,
+    {
+      label: label ?? "Selecione uma op\xE7\xE3o",
+      value: inputValue,
+      onChange: handleChange,
+      disabled,
+      placeholder
+    }
+  ) }) });
+};
+
+exports.AutocompleteTrigger = AutocompleteTrigger;

package/dist/cjs/components/Autocomplete/context.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var React = require('react');
+
+const AutocompleteContext = React.createContext(void 0);
+
+exports.AutocompleteContext = AutocompleteContext;

package/dist/cjs/components/Autocomplete/index.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+var Popover = require('./Popover.js');
+var Options = require('./Options.js');
+var Option = require('./Option.js');
+var GroupedOptions = require('./GroupedOptions.js');
+
+const Autocomplete = {
+  Root: Root.AutocompleteRoot,
+  Trigger: Trigger.AutocompleteTrigger,
+  Popover: Popover.AutocompletePopover,
+  Options: Options.AutocompleteOptions,
+  Option: Option.AutocompleteOption,
+  GroupedOptions: GroupedOptions.AutocompleteGroupedOptions
+};
+
+exports.Autocomplete = Autocomplete;

package/dist/cjs/components/Avatar.js

@@ -16,7 +16,7 @@ const Avatar = ({ src, name, className, ...rest }) => {
     {
       ...rest,
       className: clsx(
-        "rounded-pill bg-content-medium h-mega flex items-center justify-center cursor-pointer aspect-square",
+        "rounded-pill bg-secondary-dark h-mega flex items-center justify-center cursor-pointer aspect-square",
         className
       ),
       children: src && !hasError ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -17,7 +17,7 @@ const BreadcrumbItem = ({
       {
         className: clsx(
           "no-underline",
-          isLast ? "text-content-low cursor-default" : "text-content-medium cursor-pointer"
+          isLast ? "text-secondary-medium cursor-default" : "text-secondary-xdark cursor-pointer"
         ),
         children: title
       }

package/dist/cjs/components/Calendar/CalendarGrid.js

@@ -23,7 +23,7 @@ const CalendarGrid = ({ state }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "bg-surface-overlay rounded-micro px-deca py-mili",
+      className: "bg-white rounded-micro px-deca py-mili",
       "data-testid": "calendar-grid",
       children: /* @__PURE__ */ jsxRuntime.jsxs("table", { ...gridProps, className: "border-separate border-spacing-y-nano", children: [
         /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGridHeaderRow.CalendarGridHeaderRow, { weekDays }) }),

package/dist/cjs/components/ColorPicker.js

@@ -6,28 +6,19 @@ var React = require('react');
 
 const Box = React.forwardRef((props, ref) => {
   const { id, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("w-tera h-kilo border overflow-hidden relative", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
     {
-      className: clsx(
-        "w-tera h-kilo border overflow-hidden relative",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ...rest,
-          id,
-          type: "color",
-          className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
-          ref
-        }
-      )
+      ...rest,
+      id,
+      type: "color",
+      className: "bg-transparent cursor-pointer disabled:opacity-50 disabled:cursor-default absolute -top-1.5 -right-1 w-peta h-giga",
+      ref
     }
-  );
+  ) });
 });
 const Face = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-mili p-mili shadow-default bg-default flex flex-row items-center gap-2", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2", children });
 };
 const Label = ({
   children,

package/dist/cjs/components/Kanban.js

@@ -9,7 +9,7 @@ const Root = ({ children, className, ...rest }) => {
     {
       ...rest,
       className: clsx.clsx(
-        "border border-dashed border-content-low rounded-mili bg-content-inverse overflow-hidden",
+        "border border-dashed border-secondary-medium rounded-mili bg-secondary-xlight overflow-hidden",
         className
       ),
       children

package/dist/cjs/components/PhoneInput/Option.js

@@ -10,14 +10,14 @@ const PhoneInputOption = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-content-inverse bg-inherit",
+      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
       onClick: () => {
         handleSelectCountry(country);
       },
       disabled: disableClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: country?.name }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-content-minimal text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-secondary-light text-sm", children: [
           "+",
           country?.dialCode
         ] })

package/dist/cjs/components/PhoneInput/Options.js

@@ -63,6 +63,9 @@ require('react-icons/hi2');
 require('react-icons/fa6');
 require('react-dom');
 require('react-icons/io5');
+require('../Autocomplete/context.js');
+require('../Autocomplete/Options.js');
+require('../Autocomplete/GroupedOptions.js');
 var reactInternationalPhone = require('react-international-phone');
 require('country-flag-icons/react/3x2');
 

package/dist/cjs/components/PhoneInput/Popover.js

@@ -10,7 +10,7 @@ const PhoneInputPopover = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     index.Popover.Content,
     {
-      className: "bg-surface-overlay shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none z-9999",
+      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none z-9999",
       style: {
         width: triggerWidth ? `${triggerWidth}px` : "auto"
       },

package/dist/cjs/components/PhoneInput/Trigger.js

@@ -61,6 +61,9 @@ require('../Tooltip.js');
 require('react-icons/hi2');
 require('react-icons/fa6');
 require('react-dom');
+require('../Autocomplete/context.js');
+require('../Autocomplete/Options.js');
+require('../Autocomplete/GroupedOptions.js');
 require('./Options.js');
 var context = require('./context.js');
 require('react-international-phone');

package/dist/cjs/components/Popover/Content.js

@@ -28,7 +28,7 @@ const PopoverContent = ({
       ref: refs.setFloating,
       ...getFloatingProps(),
       className: clsx(
-        "border border-gray-200 bg-surface-inverse p-0 rounded-md shadow-default z-popover",
+        "border border-gray-200 bg-black p-[0px] rounded-md shadow-default z-popover",
         className
       ),
       style: {

package/dist/cjs/components/ScrollableDigitSelector.js

@@ -46,7 +46,7 @@ const ScrollableDigitSelector = ({
         {
           className: clsx(
             "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
-            value === val && "bg-primary-medium text-white"
+            value === val && "bg-primary-medium text-on-primary"
           ),
           children: formatValue(val)
         }

package/dist/cjs/components/Select/Popover.js

@@ -11,7 +11,7 @@ const SelectPopover = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     index.Popover.Content,
     {
-      className: "bg-surface-overlay max-h-[30vh] overflow-y-auto gap-y-mili flex flex-col p-0",
+      className: "bg-white max-h-[30vh] overflow-y-auto gap-y-mili flex flex-col p-0",
       style: {
         width: triggerWidth ? `${triggerWidth}px` : "auto",
         zIndex: 9999

package/dist/cjs/components/Skeleton.js

@@ -9,7 +9,7 @@ const Skeleton = ({ className, children, ...rest }) => {
     {
       ...rest,
       "data-testid": "skeleton",
-      className: clsx("animate-pulse bg-content-minimal", className),
+      className: clsx("animate-pulse bg-secondary-light", className),
       children
     }
   );

package/dist/cjs/components/Stepper/Root.js

@@ -62,7 +62,7 @@ const Root = ({
     "div",
     {
       className: clsx(
-        "flex w-full space-x-2 bg-surface-overlay p-4 pb-2 rounded-mili",
+        "flex w-full space-x-2 bg-white p-4 pb-2 rounded-mili",
         className
       ),
       children: React.Children.map(children, renderNode)

package/dist/cjs/components/TimePicker/TimePickerInput.js

@@ -62,7 +62,7 @@ const TimePickerInputWithPopover = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       index.Popover.Content,
       {
-        className: "bg-surface-overlay shadow-default border-none p-deca flex flex-col",
+        className: "bg-white shadow-default border-none p-deca flex flex-col",
         initialFocus: -1,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           TimePickerSelector.TimePickerSelector,

package/dist/cjs/components/TimePicker/TimePickerSelector.js

@@ -105,7 +105,7 @@ const TimePickerSelector = ({
                 {
                   className: clsx(
                     dayPeriodStyle,
-                    !isPM && "bg-primary-medium text-white"
+                    !isPM && "bg-primary-medium text-on-primary"
                   ),
                   children: "AM"
                 }
@@ -122,7 +122,7 @@ const TimePickerSelector = ({
                 {
                   className: clsx(
                     dayPeriodStyle,
-                    isPM && "bg-primary-medium text-white"
+                    isPM && "bg-primary-medium text-on-primary"
                   ),
                   children: "PM"
                 }

package/dist/cjs/components/Uploader/Dropzone.js

@@ -19,7 +19,7 @@ const Dropzone = ({
     {
       ...getRootProps(),
       className: clsx(
-        "bg-surface-overlay w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili overflow-auto h-[18rem]",
+        "bg-white w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili overflow-auto h-[18rem]",
         {
           "border-success-medium bg-gray-100": isDragActive
         }
@@ -27,7 +27,7 @@ const Dropzone = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center text-center items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               hi2.HiOutlineCloudArrowUp,
               {
@@ -38,7 +38,7 @@ const Dropzone = ({
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold", "data-testid": "select-dropzone", children: selectFileText })
           ] }),
           hasButton ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-centi", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-content-low", children: dropText }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-secondary-medium", children: dropText }),
             isFileLimitReached ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { text: "Voc\xEA s\xF3 pode selecionar um \xFAnico arquivo.", children: /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {

package/dist/cjs/components/Uploader/Files.js

@@ -8,9 +8,9 @@ const Files = ({
   onDelete,
   uploadProgressText = "Upload(s) in progress"
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface-overlay w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-white", children: `${files.length}` }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-deca h-deca bg-primary-medium rounded-full text-micro text-on-primary", children: `${files.length}` }),
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })
     ] }),
     files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(Upload.File, { file, index, onDelete }, file.uid))