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

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

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useRef, useEffect } from 'react';
+import { Popover } from '../Popover/index.js';
+import { Input } from '../Input/index.js';
+import { AutocompleteContext } from './context.js';
+
+const AutocompleteTrigger = ({
+  inputValue,
+  onChange,
+  label,
+  disabled,
+  placeholder
+}) => {
+  const context = useContext(AutocompleteContext);
+  if (!context)
+    throw new Error("AutocompleteTrigger must be used within AutocompleteRoot");
+  const { setTriggerWidth, setOpen } = context;
+  const triggerRef = useRef(null);
+  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__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx("div", { ref: triggerRef, children: /* @__PURE__ */ jsx(
+    Input.Root,
+    {
+      label: label ?? "Selecione uma op\xE7\xE3o",
+      value: inputValue,
+      onChange: handleChange,
+      disabled,
+      placeholder
+    }
+  ) }) });
+};
+
+export { AutocompleteTrigger };

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

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AutocompleteContext = createContext(void 0);
+
+export { AutocompleteContext };

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

@@ -0,0 +1,17 @@
+import { AutocompleteRoot } from './Root.js';
+import { AutocompleteTrigger } from './Trigger.js';
+import { AutocompletePopover } from './Popover.js';
+import { AutocompleteOptions } from './Options.js';
+import { AutocompleteOption } from './Option.js';
+import { AutocompleteGroupedOptions } from './GroupedOptions.js';
+
+const Autocomplete = {
+  Root: AutocompleteRoot,
+  Trigger: AutocompleteTrigger,
+  Popover: AutocompletePopover,
+  Options: AutocompleteOptions,
+  Option: AutocompleteOption,
+  GroupedOptions: AutocompleteGroupedOptions
+};
+
+export { Autocomplete };

package/dist/esm/components/Avatar.js

@@ -14,7 +14,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__ */ jsx(

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

@@ -15,7 +15,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/esm/components/Calendar/CalendarGrid.js

@@ -21,7 +21,7 @@ const CalendarGrid = ({ state }) => {
   return /* @__PURE__ */ 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__ */ jsxs("table", { ...gridProps, className: "border-separate border-spacing-y-nano", children: [
         /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx(CalendarGridHeaderRow, { weekDays }) }),

package/dist/esm/components/ColorPicker.js

@@ -4,28 +4,19 @@ import { forwardRef } from 'react';
 
 const Box = forwardRef((props, ref) => {
   const { id, className, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx("div", { className: clsx("w-tera h-kilo border overflow-hidden relative", className), children: /* @__PURE__ */ jsx(
+    "input",
     {
-      className: clsx(
-        "w-tera h-kilo border overflow-hidden relative",
-        className
-      ),
-      children: /* @__PURE__ */ 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__ */ jsx("div", { className: "rounded-mili p-mili shadow-default bg-default flex flex-row items-center gap-2", children });
+  return /* @__PURE__ */ jsx("div", { className: "rounded-mili p-mili shadow-default bg-white flex flex-row items-center gap-2", children });
 };
 const Label = ({
   children,

package/dist/esm/components/Kanban.js

@@ -7,7 +7,7 @@ const Root = ({ children, className, ...rest }) => {
     {
       ...rest,
       className: 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/esm/components/PhoneInput/Option.js

@@ -8,14 +8,14 @@ const PhoneInputOption = ({
   return /* @__PURE__ */ 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__ */ jsx("span", { children: country?.name }),
-        /* @__PURE__ */ jsxs("span", { className: "text-content-minimal text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-secondary-light text-sm", children: [
           "+",
           country?.dialCode
         ] })

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

@@ -61,6 +61,9 @@ import 'react-icons/hi2';
 import 'react-icons/fa6';
 import 'react-dom';
 import 'react-icons/io5';
+import '../Autocomplete/context.js';
+import '../Autocomplete/Options.js';
+import '../Autocomplete/GroupedOptions.js';
 import { defaultCountries, parseCountry } from 'react-international-phone';
 import 'country-flag-icons/react/3x2';
 

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

@@ -8,7 +8,7 @@ const PhoneInputPopover = ({ children }) => {
   return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
     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/esm/components/PhoneInput/Trigger.js

@@ -59,6 +59,9 @@ import '../Tooltip.js';
 import 'react-icons/hi2';
 import 'react-icons/fa6';
 import 'react-dom';
+import '../Autocomplete/context.js';
+import '../Autocomplete/Options.js';
+import '../Autocomplete/GroupedOptions.js';
 import './Options.js';
 import { usePhoneContext } from './context.js';
 import 'react-international-phone';

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

@@ -26,7 +26,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/esm/components/ScrollableDigitSelector.js

@@ -44,7 +44,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/esm/components/Select/Popover.js

@@ -9,7 +9,7 @@ const SelectPopover = ({ children }) => {
   return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
     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/esm/components/Skeleton.js

@@ -7,7 +7,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/esm/components/Stepper/Root.js

@@ -60,7 +60,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/esm/components/TimePicker/TimePickerInput.js

@@ -60,7 +60,7 @@ const TimePickerInputWithPopover = (props) => {
     /* @__PURE__ */ jsx(
       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__ */ jsx(
           TimePickerSelector,

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

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

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

@@ -17,7 +17,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
         }
@@ -25,7 +25,7 @@ const Dropzone = ({
       children: [
         /* @__PURE__ */ jsx("input", { ...getInputProps() }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center text-center items-center", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx(
               HiOutlineCloudArrowUp,
               {
@@ -36,7 +36,7 @@ const Dropzone = ({
             /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", "data-testid": "select-dropzone", children: selectFileText })
           ] }),
           hasButton ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-centi", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-content-low", children: dropText }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-medium", children: dropText }),
             isFileLimitReached ? /* @__PURE__ */ jsx(Tooltip, { text: "Voc\xEA s\xF3 pode selecionar um \xFAnico arquivo.", children: /* @__PURE__ */ jsx(
               "button",
               {

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

@@ -6,9 +6,9 @@ const Files = ({
   onDelete,
   uploadProgressText = "Upload(s) in progress"
 }) => {
-  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "bg-white w-full border-2 p-deca flex flex-col overflow-y-auto rounded-mili h-[18rem]", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex gap-mili items-center mb-deca", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx("h2", { className: "text-md font-semibold", "data-testid": "upload-progress", children: uploadProgressText })
     ] }),
     files.map((file, index) => /* @__PURE__ */ jsx(File, { file, index, onDelete }, file.uid))

package/dist/esm/components/Uploader/Manager.js

@@ -13,7 +13,7 @@ const Manager = ({
   files,
   onDelete,
   uploadProgressText = "Upload(s) in progress",
-  uploadSuccessText = "Upload(s) completed",
+  uploadResultText = "Upload(s) completed",
   onClose
 }) => {
   const {
@@ -45,7 +45,7 @@ const Manager = ({
                 children: min ? /* @__PURE__ */ jsx(IoChevronUp, {}) : /* @__PURE__ */ jsx(IoChevronDown, {})
               }
             ),
-            /* @__PURE__ */ jsx("h3", { "data-testid": "upload-progress", className: "font-bold text-h4", children: isLoading ? uploadProgressText : uploadSuccessText }),
+            /* @__PURE__ */ jsx("h3", { "data-testid": "upload-progress", children: isLoading ? uploadProgressText : uploadResultText }),
             /* @__PURE__ */ jsx(
               Button,
               {

package/dist/esm/components/Uploader/Modal.js

@@ -16,7 +16,7 @@ const Modal = ({
       {
         open,
         onClose,
-        className: "flex flex-col bg-surface-base rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto text-default",
+        className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
             /* @__PURE__ */ jsx("h2", { className: "text-deca font-semibold ml-tera flex-1 text-center", children: title }),

package/dist/esm/components/Uploader/Upload.js

@@ -103,8 +103,8 @@ const Folder = ({ name, subItems }) => {
   );
   const intent = useMemo(() => {
     if (loading) return "info";
-    if ((subItems ?? []).some((item) => item.status === "error") && (subItems ?? []).some((item) => item.status === "success")) {
-      return "warning";
+    if ((subItems ?? []).some((item) => item.status === "error")) {
+      return "error";
     }
     return "success";
   }, [subItems]);

package/dist/esm/hooks/useAutocompleteGroupedOptions.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+const useAutocompleteGroupedOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = useState();
+  const [isLoading, setIsLoading] = useState();
+  const [error, setError] = useState();
+  const initData = async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+export { useAutocompleteGroupedOptions };

package/dist/esm/hooks/useAutocompleteOptions.js

@@ -0,0 +1,33 @@
+import { useState, useCallback, useEffect } from 'react';
+
+const useAutocompleteOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = useState();
+  const [isLoading, setIsLoading] = useState();
+  const [error, setError] = useState();
+  const initData = useCallback(async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+export { useAutocompleteOptions };

package/dist/esm/hooks/useFileUpload.js

@@ -28,7 +28,7 @@ const useFileUpload = ({
   noClick = false,
   ignoreRejections = false,
   uploadProgressText,
-  uploadSuccessText
+  uploadResultText
 }) => {
   const {
     showManager,
@@ -98,10 +98,10 @@ const useFileUpload = ({
         onClose: closeManager,
         onDelete: handleRemoveFile,
         uploadProgressText,
-        uploadSuccessText
+        uploadResultText
       });
     }
-  }, [handleRemoveFile, closeManager]);
+  }, [handleRemoveFile, closeManager, uploadResultText]);
   const addMimeTypes = (key, acc) => {
     AcceptSpecificMap[key].forEach((mimeType) => {
       acc[mimeType] = [];

package/dist/esm/index.js

@@ -42,6 +42,7 @@ export { TimeFieldInput } from './components/TimePicker/TimeFieldInput.js';
 export { Toggle } from './components/Toggle.js';
 export { Tooltip } from './components/Tooltip.js';
 export { Uploader } from './components/Uploader/index.js';
+export { Autocomplete } from './components/Autocomplete/index.js';
 export { PhoneInput } from './components/PhoneInput/index.js';
 export { useCalendar } from './hooks/useCalendar.js';
 export { useCalendarCell } from './hooks/useCalendarCell.js';

package/dist/esm/provider/ManagerContext.js

@@ -64,6 +64,9 @@ import '../components/Tooltip.js';
 import 'react-icons/hi2';
 import 'react-icons/fa6';
 import 'react-dom';
+import '../components/Autocomplete/context.js';
+import '../components/Autocomplete/Options.js';
+import '../components/Autocomplete/GroupedOptions.js';
 import '../components/PhoneInput/Options.js';
 import '../components/PhoneInput/context.js';
 import 'react-international-phone';

package/dist/esm/styles/calendar-cell.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 const calendarCell = tv({
   slots: {
-    cell: "text-center rounded-mili hover:bg-primary-light",
+    cell: "text-center rounded-mili text-black hover:bg-primary-light",
     button: "flex aspect-square items-center justify-center"
   },
   variants: {
@@ -13,17 +13,17 @@ const calendarCell = tv({
     },
     isSelected: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium text-white hover:bg-primary-medium"
+        cell: "bg-primary-medium border-2 border-primary-medium text-on-primary hover:bg-primary-medium"
       }
     },
     isSelectionStart: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-white"
+        cell: "bg-primary-medium border-2 border-primary-medium rounded-r-none text-on-primary"
       }
     },
     isSelectionEnd: {
       true: {
-        cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-white"
+        cell: "bg-primary-medium border-2 border-primary-medium rounded-l-none text-on-primary"
       }
     },
     inRange: {
@@ -33,7 +33,7 @@ const calendarCell = tv({
     },
     isDisabled: {
       true: {
-        cell: "text-content-minimal cursor-default  hover:bg-surface-overlay",
+        cell: "text-secondary-light cursor-default  hover:bg-white-500",
         button: "cursor-default"
       }
     }

package/dist/esm/styles/date-picker-input-base.js

@@ -7,7 +7,7 @@ const datePickerInputBase = tv({
   variants: {
     disabled: {
       true: {
-        icon: "text-content-minimal cursor-default"
+        icon: "text-secondary-light cursor-default"
       }
     }
   }

package/dist/esm/styles/date-segment.js

@@ -2,12 +2,12 @@ import { tv } from 'tailwind-variants';
 
 const dateSegment = tv({
   slots: {
-    base: "focus:outline-none focus:bg-content-minimal"
+    base: "focus:outline-none focus:bg-secondary-light"
   },
   variants: {
     disabled: {
       true: {
-        base: "text-content-minimal"
+        base: "text-secondary-light"
       }
     }
   }

package/dist/esm/styles/groupButton.js

@@ -2,12 +2,12 @@ import { tv } from 'tailwind-variants';
 
 const groupButton = tv({
   slots: {
-    button: "border-[1px] border-content-low px-centi py-mili items-center flex text-sub font-bold",
-    inactive: "bg-surface-overlay text-content-low disabled:bg-content-minimal",
+    button: "border-[1px] border-secondary-medium px-centi py-mili items-center flex text-sub font-bold",
+    inactive: "bg-white text-secondary-medium disabled:bg-secondary-light",
     firstButton: "first:rounded-l-mili first:border-r-0",
     lastButton: "last:rounded-r-mili last:border-l-0",
     container: "flex flex-row h-[2rem]",
-    active: "text-white bg-content-low"
+    active: "text-white bg-secondary-medium"
   }
 });
 

package/dist/esm/styles/menubar.js

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 
 const menubar = tv({
   slots: {
-    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-surface-overlay z-header sm:justify-start",
+    header: "relative w-screen px-kilo py-deca flex flex-row md:justify-between bg-white z-header sm:justify-start",
     left: "flex items-center w-fit",
     right: "flex items-center gap-x-deca hidden sm:flex",
-    dropdown: "w-full bg-surface-overlay flex-1 shadow-default z-popover px-[8vw] absolute"
+    dropdown: "w-full bg-white flex-1 shadow-default z-popover px-[8vw] absolute"
   },
   variants: {
     show: {
@@ -19,7 +19,7 @@ const menubar = tv({
 const mostUsed = tv({
   slots: {
     container: "mb-kilo",
-    label: "font-bold mb-centi text-default",
+    label: "font-bold mb-centi",
     containerList: "gap-x-kilo flex flex-row"
   }
 });
@@ -27,26 +27,26 @@ const mostUsedItem = tv({
   slots: {
     container: "flex-1 py-mili",
     title: "text-primary-medium font-bold text-base",
-    category: "text-content-low text-label"
+    category: "text-secondary-medium text-label"
   }
 });
 const item = tv({
   slots: {
-    container: "flex flex-row gap-x-deca items-center text-content-medium hover:cursor-pointer text-base",
+    container: "flex flex-row gap-x-deca items-center text-secondary-dark hover:cursor-pointer text-base",
     textBehavior: "hover:text-primary-medium",
     icon: "text-primary-medium hover:cursor-pointer"
   }
 });
 const category = tv({
   slots: {
-    text: "mb-mili font-bold text-default",
-    hr: "mb-mili border-0 h-px bg-content-high",
+    text: "mb-mili font-bold",
+    hr: "mb-mili border-0 h-px bg-secondary-light",
     container: "flex flex-col gap-y-mili"
   }
 });
 const subItem = tv({
   slots: {
-    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-content-medium hover:text-primary-medium cursor-pointer"
+    container: "pl-deca text-sub border-l-[1px] border-primary-medium text-secondary-dark hover:text-primary-medium cursor-pointer"
   }
 });
 const animate = tv({

package/dist/esm/styles/progressBar.js

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 const ProgressVariants = tv({
   slots: {
     container: "relative",
-    bar: "h-1.5 w-full overflow-hidden bg-content-inverse",
+    bar: "h-1.5 w-full overflow-hidden bg-secondary-xlight",
     progress: "w-full h-full rounded-mili"
   },
   variants: {

package/dist/esm/styles/stepNodeVariants.js

@@ -28,8 +28,8 @@ const StepNodeVariants = tv({
         content: "font-bold"
       },
       false: {
-        content: "text-content-low",
-        separator: "bg-content-minimal"
+        content: "text-secondary-medium",
+        separator: "bg-secondary-light"
       }
     },
     selected: {

package/dist/esm/styles/time-field-input.js

@@ -7,7 +7,7 @@ const timePickerInputBase = tv({
   variants: {
     disabled: {
       true: {
-        icon: "text-content-minimal cursor-default"
+        icon: "text-secondary-light cursor-default"
       }
     }
   }