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

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

@@ -35,7 +35,7 @@ const AccordionTrigger = ({
     "div",
     {
       className: clsx(
-        "flex justify-between align-center border-secondary-light cursor-pointer",
+        "flex justify-between align-center border-content-minimal cursor-pointer",
         { "mr-deca": floating && direction === "horizontal" },
         { "mb-deca": floating && direction === "vertical" },
         { "border-r flex-col px-mili": direction === "horizontal" },
@@ -47,12 +47,12 @@ const AccordionTrigger = ({
           "div",
           {
             className: clsx(
-              "rounded-mili border border-secondary-light flex align-center justify-center p-micro",
+              "rounded-mili border border-content-minimal 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"
               },
               className
             ),
@@ -60,7 +60,7 @@ const AccordionTrigger = ({
               lia.LiaAngleRightSolid,
               {
                 className: clsx(
-                  "text-secondary-medium transition-transform duration-200",
+                  "text-content-low transition-transform duration-200",
                   {
                     "rotate-180": invertedArrow ? !open : open
                   }
@@ -70,7 +70,7 @@ const AccordionTrigger = ({
               lia.LiaAngleDownSolid,
               {
                 className: clsx(
-                  "text-secondary-medium transition-transform duration-200",
+                  "text-content-low transition-transform duration-200",
                   {
                     "rotate-180": invertedArrow ? !open : open
                   }

package/dist/cjs/components/Avatar.js

@@ -16,7 +16,7 @@ const Avatar = ({ src, name, className, ...rest }) => {
     {
       ...rest,
       className: clsx(
-        "rounded-pill bg-secondary-dark h-mega flex items-center justify-center cursor-pointer aspect-square",
+        "rounded-pill bg-content-medium 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-secondary-medium cursor-default" : "text-secondary-xdark cursor-pointer"
+          isLast ? "text-content-low cursor-default" : "text-content-medium 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-white rounded-micro px-deca py-mili",
+      className: "bg-surface-overlay 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,19 +6,28 @@ var React = require('react');
 
 const Box = React.forwardRef((props, ref) => {
   const { id, className, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("w-tera h-kilo border overflow-hidden relative", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      ...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
+      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
+        }
+      )
     }
-  ) });
+  );
 });
 const Face = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-mili p-mili shadow-default bg-default 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-secondary-medium rounded-mili bg-secondary-xlight overflow-hidden",
+        "border border-dashed border-content-low rounded-mili bg-content-inverse overflow-hidden",
         className
       ),
       children

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

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Flags = require('country-flag-icons/react/3x2');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Flags__namespace = /*#__PURE__*/_interopNamespaceDefault(Flags);
+
+const FlagIcon = ({
+  countryCode,
+  className = "w-[25px]",
+  title
+}) => {
+  if (!countryCode) return null;
+  const upperCode = countryCode.toUpperCase();
+  const FlagComponent = Flags__namespace[upperCode];
+  if (!FlagComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FlagComponent,
+    {
+      className,
+      title: title || upperCode,
+      "aria-label": `Flag of ${upperCode}`
+    }
+  );
+};
+
+exports.FlagIcon = FlagIcon;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const PhoneInputOption = ({
+  country,
+  handleSelectCountry,
+  disableClick = false
+}) => {
+  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",
+      onClick: () => {
+        handleSelectCountry(country);
+      },
+      disabled: disableClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: country?.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-content-minimal text-sm", children: [
+          "+",
+          country?.dialCode
+        ] })
+      ]
+    }
+  );
+};
+
+exports.PhoneInputOption = PhoneInputOption;

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

@@ -0,0 +1,118 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Divider = require('../Divider.js');
+var context = require('./context.js');
+var Option = require('./Option.js');
+require('clsx');
+require('../Accordion/context.js');
+require('react-icons/lia');
+require('@internationalized/date');
+require('../Badge.js');
+require('react-icons/md');
+require('@tecsinapse/cortex-core');
+require('react-aria');
+require('react-stately');
+require('../../provider/MenubarContext.js');
+require('../../provider/SnackbarProvider.js');
+require('../../provider/CalendarProvider.js');
+require('../../provider/ManagerContext.js');
+require('../Popover/Context.js');
+require('react-dropzone');
+require('uuid');
+require('@floating-ui/react');
+require('currency.js');
+require('../Calendar/CalendarCell.js');
+require('react-icons/fa');
+require('react-icons/io');
+require('embla-carousel-react');
+require('embla-carousel-autoplay');
+require('../ColorPicker.js');
+require('../DatePicker/DateSegment.js');
+require('../DatePicker/DatePickerInputBase.js');
+require('../GroupButton.js');
+var index = require('../Input/index.js');
+require('../Menubar/Left.js');
+require('../../styles/menubar.js');
+require('../Menubar/Right.js');
+require('../Menubar/Dropdown.js');
+require('../Menubar/MostUsed.js');
+require('../Menubar/MostUsedItem.js');
+require('../Menubar/Header.js');
+require('../Menubar/Item.js');
+require('../../provider/CategoriesContext.js');
+require('../Menubar/SubItem.js');
+require('../ProgressBar/Progress.js');
+require('../RadioButton.js');
+require('../Select/GroupedOptions.js');
+require('../Select/context.js');
+require('../Select/MultiGroupedOptions.js');
+require('../Select/MultiOptions.js');
+require('../Select/Options.js');
+require('../Select/Trigger.js');
+require('../../styles/stepNodeVariants.js');
+require('../TextArea/Box.js');
+require('../TextArea/Face.js');
+require('../TextArea/Left.js');
+require('../TextArea/Right.js');
+require('../TextArea/Root.js');
+require('../TimePicker/TimeFieldInput.js');
+require('../Tooltip.js');
+require('react-icons/hi2');
+require('react-icons/fa6');
+require('react-dom');
+require('react-icons/io5');
+var reactInternationalPhone = require('react-international-phone');
+require('country-flag-icons/react/3x2');
+
+const countries = reactInternationalPhone.defaultCountries.map((c) => {
+  return reactInternationalPhone.parseCountry(c);
+});
+const PhoneInputOptions = ({
+  hasSearch = true
+}) => {
+  const { country, setCountry, setIsOpen } = context.usePhoneContext();
+  const [searchText, setSearchText] = React.useState("");
+  const filteredCountries = React.useMemo(() => {
+    return countries.filter(
+      (c) => c.iso2 !== country?.iso2 && (c.name.toLowerCase().includes(searchText.toLowerCase()) || c.dialCode.includes(searchText))
+    );
+  }, [country, searchText]);
+  const handleSelect = (country2) => {
+    setCountry?.(country2.iso2);
+    setIsOpen?.(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col overflow-y-auto", children: [
+    hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
+      index.Input.Search,
+      {
+        onChange: (e) => setSearchText(e.target.value),
+        variants: { className: "mx-deca my-centi outline-none" }
+      }
+    ) : null,
+    country ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Option.PhoneInputOption,
+        {
+          country,
+          handleSelectCountry: handleSelect,
+          disableClick: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, {})
+    ] }) : null,
+    filteredCountries.map((country2) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Option.PhoneInputOption,
+        {
+          country: country2,
+          handleSelectCountry: handleSelect
+        },
+        `${country2.dialCode} ${country2.iso2}`
+      );
+    })
+  ] });
+};
+
+exports.PhoneInputOptions = PhoneInputOptions;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var index = require('../Popover/index.js');
+var context = require('./context.js');
+
+const PhoneInputPopover = ({ children }) => {
+  const { triggerWidth } = context.usePhoneContext();
+  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",
+      style: {
+        width: triggerWidth ? `${triggerWidth}px` : "auto"
+      },
+      children
+    }
+  ) });
+};
+
+exports.PhoneInputPopover = PhoneInputPopover;

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

@@ -0,0 +1,61 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Popover/index.js');
+var clsx = require('clsx');
+var reactInternationalPhone = require('react-international-phone');
+var context = require('./context.js');
+
+const PhoneInputRoot = ({
+  children,
+  className,
+  onChange,
+  ...rest
+}) => {
+  const [triggerWidth, setTriggerWidth] = React.useState();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {
+    country,
+    handlePhoneValueChange,
+    inputRef,
+    inputValue,
+    phone,
+    setCountry
+  } = reactInternationalPhone.usePhoneInput({
+    countries: reactInternationalPhone.defaultCountries,
+    onChange: ({ phone: phone2, ...rest2 }) => {
+      onChange?.(phone2, { ...rest2 });
+    },
+    ...rest
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.Popover.Root,
+    {
+      placement: "bottom-start",
+      controlled: true,
+      isOpen,
+      setIsOpen,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        context.PhoneInputContext.Provider,
+        {
+          value: {
+            triggerWidth,
+            setTriggerWidth,
+            isOpen,
+            setIsOpen,
+            country,
+            setCountry,
+            handlePhoneValueChange,
+            inputValue,
+            phone,
+            inputRef
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("relative w-full h-full", className), children })
+        }
+      )
+    }
+  );
+};
+
+exports.PhoneInputRoot = PhoneInputRoot;

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

@@ -0,0 +1,112 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var io5 = require('react-icons/io5');
+require('clsx');
+var React = require('react');
+require('../Accordion/context.js');
+require('react-icons/lia');
+require('@internationalized/date');
+require('../Badge.js');
+require('react-icons/md');
+require('@tecsinapse/cortex-core');
+require('react-aria');
+require('react-stately');
+require('../../provider/MenubarContext.js');
+require('../../provider/SnackbarProvider.js');
+require('../../provider/CalendarProvider.js');
+require('../../provider/ManagerContext.js');
+require('../Popover/Context.js');
+require('react-dropzone');
+require('uuid');
+require('@floating-ui/react');
+require('currency.js');
+require('../Calendar/CalendarCell.js');
+require('react-icons/fa');
+require('react-icons/io');
+require('embla-carousel-react');
+require('embla-carousel-autoplay');
+require('../ColorPicker.js');
+require('../DatePicker/DateSegment.js');
+var index = require('../Popover/index.js');
+require('../DatePicker/DatePickerInputBase.js');
+require('../GroupButton.js');
+var index$1 = require('../Input/index.js');
+require('../Menubar/Left.js');
+require('../../styles/menubar.js');
+require('../Menubar/Right.js');
+require('../Menubar/Dropdown.js');
+require('../Menubar/MostUsed.js');
+require('../Menubar/MostUsedItem.js');
+require('../Menubar/Header.js');
+require('../Menubar/Item.js');
+require('../../provider/CategoriesContext.js');
+require('../Menubar/SubItem.js');
+require('../ProgressBar/Progress.js');
+require('../RadioButton.js');
+require('../Select/GroupedOptions.js');
+require('../Select/context.js');
+require('../Select/MultiGroupedOptions.js');
+require('../Select/MultiOptions.js');
+require('../Select/Options.js');
+require('../Select/Trigger.js');
+require('../../styles/stepNodeVariants.js');
+require('../TextArea/Box.js');
+require('../TextArea/Face.js');
+require('../TextArea/Left.js');
+require('../TextArea/Right.js');
+require('../TextArea/Root.js');
+require('../TimePicker/TimeFieldInput.js');
+require('../Tooltip.js');
+require('react-icons/hi2');
+require('react-icons/fa6');
+require('react-dom');
+require('./Options.js');
+var context = require('./context.js');
+require('react-international-phone');
+var FlagIcon = require('./FlagIcon.js');
+
+const PhoneInputTrigger = ({
+  disabled = false,
+  label,
+  ...rest
+}) => {
+  const {
+    setIsOpen,
+    setTriggerWidth,
+    country,
+    handlePhoneValueChange,
+    inputValue
+  } = context.usePhoneContext();
+  const triggerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (triggerRef.current && setTriggerWidth) {
+      const width = triggerRef.current.getBoundingClientRect().width;
+      setTriggerWidth(width);
+    }
+  }, [triggerRef.current, setTriggerWidth]);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Popover.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.Input.Face, { ref: triggerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.Input.Box,
+      {
+        value: inputValue,
+        onChange: handlePhoneValueChange,
+        label: label ?? "Insert a phone number",
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.Input.Right, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center gap-1 cursor-pointer w-full",
+        onClick: () => setIsOpen?.(true),
+        children: [
+          country ? /* @__PURE__ */ jsxRuntime.jsx(FlagIcon.FlagIcon, { countryCode: country.iso2, className: "w-[25px]" }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDown, { className: "h-full text-md" })
+        ]
+      }
+    ) })
+  ] }) });
+};
+
+exports.PhoneInputTrigger = PhoneInputTrigger;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+
+const PhoneInputContext = React.createContext(
+  null
+);
+const usePhoneContext = () => {
+  const context = React.useContext(PhoneInputContext);
+  if (!context) {
+    throw new Error(
+      "usePhoneInputContext must be used within a usePhoneInputProvider"
+    );
+  }
+  return context;
+};
+
+exports.PhoneInputContext = PhoneInputContext;
+exports.usePhoneContext = usePhoneContext;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var Option = require('./Option.js');
+var Options = require('./Options.js');
+var Popover = require('./Popover.js');
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+
+const PhoneInput = {
+  Root: Root.PhoneInputRoot,
+  Popover: Popover.PhoneInputPopover,
+  Trigger: Trigger.PhoneInputTrigger,
+  Option: Option.PhoneInputOption,
+  Options: Options.PhoneInputOptions
+};
+
+exports.PhoneInput = PhoneInput;

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

@@ -28,7 +28,7 @@ const PopoverContent = ({
       ref: refs.setFloating,
       ...getFloatingProps(),
       className: clsx(
-        "border border-gray-200 bg-black p-[0px] rounded-md shadow-default z-popover",
+        "border border-gray-200 bg-surface-inverse p-0 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-light"
+            value === val && "bg-primary-medium text-white"
           ),
           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-white max-h-[30vh] overflow-y-auto gap-y-mili flex flex-col p-0",
+      className: "bg-surface-overlay 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-secondary-light", className),
+      className: clsx("animate-pulse bg-content-minimal", 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-white p-4 pb-2 rounded-mili",
+        "flex w-full space-x-2 bg-surface-overlay 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-white shadow-default border-none p-deca flex flex-col",
+        className: "bg-surface-overlay 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-light"
+                    !isPM && "bg-primary-medium text-white"
                   ),
                   children: "AM"
                 }
@@ -122,7 +122,7 @@ const TimePickerSelector = ({
                 {
                   className: clsx(
                     dayPeriodStyle,
-                    isPM && "bg-primary-medium text-light"
+                    isPM && "bg-primary-medium text-white"
                   ),
                   children: "PM"
                 }

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

@@ -19,7 +19,7 @@ const Dropzone = ({
     {
       ...getRootProps(),
       className: clsx(
-        "bg-white w-full border-dashed border-2 p-deca flex flex-col justify-center rounded-mili overflow-auto h-[18rem]",
+        "bg-surface-overlay 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", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", 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-secondary-medium", children: dropText }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-content-low", children: dropText }),
             isFileLimitReached ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { text: "Voc\xEA s\xF3 pode selecionar um \xFAnico arquivo.", children: /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {