@woobee/ui 0.2.3 → 0.3.0

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.
Files changed (5) hide show
  1. package/dist/index.js +52 -53
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +52 -53
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -55,15 +55,15 @@ function Button({
55
55
  "border bg-brown-500 border-transparent text-white": variant === "primary" && !darkMode,
56
56
  "dark:bg-primary-500 dark:hover:bg-primary-600 dark:text-black": variant === "primary" && !darkMode,
57
57
  "border bg-primary-500 hover:bg-primary-600 border-transparent text-black": variant === "primary" && !!darkMode,
58
- "text-gray-700 bg-white border border-gray-300 hover:text-gray-500": variant === "secondary" && !darkMode,
58
+ "text-content-primary bg-white border border-gray-300 hover:text-content-secondary": variant === "secondary" && !darkMode,
59
59
  "text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "secondary" && !!darkMode,
60
- "!rounded-md text-left w-full text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 hover:text-gray-500": variant === "form-input" && !darkMode,
60
+ "!rounded-md text-left w-full text-content-primary bg-white border border-gray-200 hover:bg-gray-50 hover:text-content-secondary": variant === "form-input" && !darkMode,
61
61
  "!rounded-md text-left w-full text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "form-input" && !!darkMode,
62
- "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
62
+ "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-content-primary dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
63
63
  "hover:text-brown-500 !shadow-none": variant === "flat" && !darkMode,
64
- "dark:text-charcoal-100 dark:hover:text-primary-500": variant === "flat" && !darkMode,
64
+ "dark:text-content-primary dark:hover:text-primary-500": variant === "flat" && !darkMode,
65
65
  "text-charcoal-100 hover:text-primary-500 !shadow-none": variant === "flat" && !!darkMode,
66
- "!text-gray-300 hover:!text-gray-400": !children && !darkMode,
66
+ "!text-content-disabled hover:!text-content-placeholder": !children && !darkMode,
67
67
  "dark:!text-charcoal-400": !children && !darkMode,
68
68
  "!text-charcoal-400": !children && !!darkMode,
69
69
  ...classNameObject(className)
@@ -95,7 +95,7 @@ function Tag({
95
95
  {
96
96
  className: classNames({
97
97
  "inline-flex items-center rounded font-medium whitespace-nowrap": true,
98
- "bg-cream-200 dark:bg-charcoal-700 text-gray-800 dark:text-gray-200": !color,
98
+ "bg-cream-200 dark:bg-charcoal-700 text-content-title dark:text-content-primary": !color,
99
99
  "text-white": !!color,
100
100
  // medium size
101
101
  "text-sm": size === "medium",
@@ -146,7 +146,7 @@ function TagGroup({
146
146
  children: tag.name
147
147
  },
148
148
  tag.id || tag.name
149
- )) : placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300 dark:text-charcoal-400 text-sm flex items-center", children: placeholder })
149
+ )) : placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-content-disabled dark:text-content-placeholder text-sm flex items-center", children: placeholder })
150
150
  }
151
151
  );
152
152
  }
@@ -172,7 +172,7 @@ function Tabs({
172
172
  className: classNames({
173
173
  "px-3 py-2 transition-colors rounded-lg": true,
174
174
  "bg-white text-brown-500 dark:text-primary-500 dark:bg-charcoal-600": value === option.id,
175
- "hover:text-brown-500 dark:text-charcoal-300 dark:hover:text-primary-500": value !== option.id
175
+ "hover:text-brown-500 dark:text-content-secondary dark:hover:text-primary-500": value !== option.id
176
176
  }),
177
177
  onClick: () => onChange(option.id),
178
178
  children: option.label
@@ -281,7 +281,7 @@ function CheckboxList({
281
281
  };
282
282
  const renderPlaceholder = () => {
283
283
  if (typeof placeholder === "string") {
284
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-charcoal-400", children: placeholder });
284
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-content-secondary dark:text-content-placeholder", children: placeholder });
285
285
  }
286
286
  return placeholder;
287
287
  };
@@ -317,7 +317,7 @@ function CheckboxList({
317
317
  {
318
318
  className: classNames({
319
319
  "text-sm": true,
320
- "text-gray-900 dark:text-gray-100": !checked,
320
+ "text-content-title dark:text-content-primary": !checked,
321
321
  "dark:text-primary-400": checked
322
322
  }),
323
323
  children: label
@@ -639,16 +639,15 @@ function Modal({
639
639
  }
640
640
  if (!mounted) return null;
641
641
  return reactDom.createPortal(
642
- /* @__PURE__ */ jsxRuntime.jsx(Transition, { show: open, onExited, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-x-0 text-sm bottom-0 z-[1300] px-0 bg-opacity-30 lg:px-6 lg:inset-0 lg:flex lg:items-center lg:justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
642
+ /* @__PURE__ */ jsxRuntime.jsx(Transition, { show: open, onExited, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-x-0 text-sm bottom-0 z-[1300] px-0 bg-opacity-30 md:px-6 md:inset-0 md:flex md:items-center md:justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
643
643
  "div",
644
644
  {
645
645
  className: classNames({
646
646
  "max-h-[100dvh] overflow-y-auto sm:w-full": true,
647
- "lg:max-w-2xl": !size,
648
- "lg:max-w-md": size === "small",
649
- "lg:max-w-3xl": size === "medium",
650
- "lg:max-w-6xl": size === "large",
651
- "h-[100dvh] lg:h-auto lg:max-w-3xl": size === "full"
647
+ "md:max-w-2xl": !size || size === "medium",
648
+ "md:max-w-md": size === "small",
649
+ "md:max-w-4xl": size === "large",
650
+ "h-[100dvh] md:h-auto md:max-w-3xl": size === "full"
652
651
  }),
653
652
  children: [
654
653
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -700,7 +699,7 @@ function Modal({
700
699
  }),
701
700
  children: [
702
701
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
703
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "my-0 text-base font-semibold leading-tight text-gray-900 dark:text-white", children: title }),
702
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "my-0 text-base font-semibold leading-tight text-content-title ", children: title }),
704
703
  !!description && description.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary-700", children: description })
705
704
  ] }),
706
705
  /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "flat", compact: true, onClick: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }) })
@@ -817,7 +816,7 @@ function ConfirmationBox({
817
816
  disabled,
818
817
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-4", children: [
819
818
  iconSvg && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full ${iconContainerClass}`, children: iconSvg }),
820
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 font-medium", children: description }) })
819
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 pt-1.5", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-content-secondary font-medium", children: description }) })
821
820
  ] })
822
821
  }
823
822
  );
@@ -917,7 +916,7 @@ function Drawer({
917
916
  "div",
918
917
  {
919
918
  "aria-label": "Close",
920
- className: "-mr-3 text-primary-700 dark:text-white hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
919
+ className: "-mr-3 text-primary-700 dark:text-content-title hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
921
920
  onClick: handleClose,
922
921
  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
923
922
  }
@@ -998,7 +997,7 @@ function InlinePrompt({
998
997
  className: classNames({
999
998
  "inline-flex justify-center w-full rounded-md bg-transparent font-medium focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 transition ease-in-out duration-150 cursor-pointer": true,
1000
999
  "leading-5 px-4 py-2": !condensed,
1001
- "text-gray-700 hover:text-gray-500 active:text-gray-800 text-md": !className.includes("text-"),
1000
+ "text-content-primary hover:text-content-secondary active:text-content-title text-md": !className.includes("text-"),
1002
1001
  ...classNameObject(className)
1003
1002
  }),
1004
1003
  "aria-haspopup": "true",
@@ -1077,9 +1076,9 @@ function Breadcrumb({
1077
1076
  "a",
1078
1077
  {
1079
1078
  onClick: clickBack,
1080
- className: "flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out cursor-pointer",
1079
+ className: "flex items-center text-sm leading-5 font-medium text-content-secondary hover:text-content-primary transition duration-150 ease-in-out cursor-pointer",
1081
1080
  children: [
1082
- /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
1081
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-content-placeholder", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
1083
1082
  "path",
1084
1083
  {
1085
1084
  fillRule: "evenodd",
@@ -1092,8 +1091,8 @@ function Breadcrumb({
1092
1091
  }
1093
1092
  ) }),
1094
1093
  /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "hidden sm:flex items-center text-sm leading-5 font-medium", children: links && links.length > 0 && links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex", children: [
1095
- /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: link.href, className: "text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out", children: link.name }),
1096
- index !== links.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
1094
+ /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: link.href, className: "text-content-secondary hover:text-content-primary transition duration-150 ease-in-out", children: link.name }),
1095
+ index !== links.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-content-placeholder", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
1097
1096
  "path",
1098
1097
  {
1099
1098
  fillRule: "evenodd",
@@ -1199,10 +1198,10 @@ function ButtonItem({
1199
1198
  "div",
1200
1199
  {
1201
1200
  className: classNames({
1202
- "p-3 rounded-xl mx-auto text-charcoal-700/70 dark:text-charcoal-50/50 flex justify-center cursor-pointer": true,
1201
+ "p-3 rounded-xl mx-auto text-content-primary/70 dark:text-content-title/50 flex justify-center cursor-pointer": true,
1203
1202
  "w-full": direction === "vertical",
1204
1203
  "w-full overflow-hidden": direction === "horizontal",
1205
- "!text-charcoal-700 dark:!text-primary-500 bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
1204
+ "!text-content-primary dark:!text-primary-500 bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
1206
1205
  ...classNameObject(className)
1207
1206
  }),
1208
1207
  children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1427,7 +1426,7 @@ function Th({ condensed, className, children, sticky, ...opts }) {
1427
1426
  className: classNames({
1428
1427
  ...classNameObject(className),
1429
1428
  "sticky z-10 top-0": !!sticky,
1430
- "border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider": true,
1429
+ "border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-content-secondary uppercase tracking-wider": true,
1431
1430
  "px-6": !condensed,
1432
1431
  "py-4": !condensed && (!className || !className.includes("py-")),
1433
1432
  "px-2.5": !!condensed,
@@ -1556,7 +1555,7 @@ var Input = React18.forwardRef((props, ref) => {
1556
1555
  id,
1557
1556
  className: classNames({
1558
1557
  ...classNameObject(className),
1559
- "px-3 group form-input placeholder-gray-300 dark:placeholder-charcoal-400 focus:outline-none block transition ease-in-out duration-150 text-black dark:text-charcoal-100 dark:bg-charcoal-800 shadow-sm focus:dark:text-primary-500 focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
1558
+ "px-3 group form-input placeholder-gray-300 dark:placeholder-charcoal-400 focus:outline-none block transition ease-in-out duration-150 text-black dark:text-content-primary dark:bg-charcoal-800 shadow-sm focus:dark:text-primary-500 focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
1560
1559
  "!text-white !border-charcoal-400 !placeholder-charcoal-400 focus:!text-primary-500 focus:!border-primary-500 focus:!ring-primary-500": !!darkMode,
1561
1560
  "h-11": !className || !className.includes("h-"),
1562
1561
  "text-sm": type !== "tel",
@@ -1621,7 +1620,7 @@ var Input = React18.forwardRef((props, ref) => {
1621
1620
  className: classNames({
1622
1621
  "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none focus:outline-none active:outline-none": true,
1623
1622
  "!text-white": !!darkMode,
1624
- "text-gray-600": !focused,
1623
+ "text-content-secondary": !focused,
1625
1624
  "!text-primary-500": focused
1626
1625
  }),
1627
1626
  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1636,7 +1635,7 @@ var Input = React18.forwardRef((props, ref) => {
1636
1635
  )
1637
1636
  ] }),
1638
1637
  error && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1639
- info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
1638
+ info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
1640
1639
  ] });
1641
1640
  });
1642
1641
  Input.displayName = "Input";
@@ -1656,8 +1655,8 @@ function Label({
1656
1655
  {
1657
1656
  htmlFor,
1658
1657
  className: classNames({
1659
- "block text-sm font-medium mb-1.5 text-black dark:text-white": true,
1660
- "text-black dark:text-white/80": !error,
1658
+ "block text-sm font-medium mb-1.5 text-black dark:text-content-title": true,
1659
+ "text-black dark:text-content-title/80": !error,
1661
1660
  "text-red-600": error,
1662
1661
  ...classNameObject(className)
1663
1662
  }),
@@ -1714,7 +1713,7 @@ var Select = React18.forwardRef((props, ref) => {
1714
1713
  ) }),
1715
1714
  loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex relative w-6 loading" }),
1716
1715
  error && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1717
- info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
1716
+ info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
1718
1717
  ] });
1719
1718
  });
1720
1719
  Select.displayName = "Select";
@@ -1786,7 +1785,7 @@ var Textarea = React18.forwardRef((props, ref) => {
1786
1785
  placeholder,
1787
1786
  className: classNames({
1788
1787
  ...classNameObject(className),
1789
- "form-input border block w-full placeholder-gray-300 dark:placeholder-white/50 dark:focus:placeholder-charcoal-400 text-sm transition ease-in-out duration-150 px-3 py-2 border-gray-200 dark:border-charcoal-700 text-black dark:text-charcoal-100 dark:bg-charcoal-800 rounded-lg": true,
1788
+ "form-input border block w-full placeholder-gray-300 dark:placeholder-white/50 dark:focus:placeholder-charcoal-400 text-sm transition ease-in-out duration-150 px-3 py-2 border-gray-200 dark:border-charcoal-700 text-black dark:text-content-primary dark:bg-charcoal-800 rounded-lg": true,
1790
1789
  "focus:ring-white dark:focus:ring-1 dark:focus:border-primary-600 dark:focus:ring-primary-500": !error,
1791
1790
  "focus:outline-none focus:ring-0 focus:ring-offset-0 dark:focus:border-primary-500": true,
1792
1791
  "border-red-300 text-red-900 placeholder-red-300 dark:placeholder-red-600 focus:border-red-300 focus:shadow-outline-red": error
@@ -1810,7 +1809,7 @@ var Textarea = React18.forwardRef((props, ref) => {
1810
1809
  ) }) })
1811
1810
  ] }),
1812
1811
  error && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1813
- info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
1812
+ info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
1814
1813
  ] });
1815
1814
  });
1816
1815
  Textarea.displayName = "Textarea";
@@ -1922,8 +1921,8 @@ function NoData({ className }) {
1922
1921
  }
1923
1922
  ),
1924
1923
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[90%] flex flex-col text-center", children: [
1925
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-6 font-medium text-gray-900 mt-3 dark:text-white/50", children: "It's empty." }),
1926
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4 text-gray-700 dark:text-white/60", children: "Nothing to do for now." })
1924
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-6 font-medium text-content-title mt-3 /50", children: "It's empty." }),
1925
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4 text-content-primary dark:text-content-title/60", children: "Nothing to do for now." })
1927
1926
  ] })
1928
1927
  ] });
1929
1928
  }
@@ -2066,7 +2065,7 @@ function useThemeContext() {
2066
2065
  }
2067
2066
  function ThemeToggle() {
2068
2067
  const { theme, handleToggleTheme } = useThemeContext();
2069
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-charcoal-700 dark:text-white z-30 flex space-x-1.5 items-center", children: [
2068
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-content-primary dark:text-content-title z-30 flex space-x-1.5 items-center", children: [
2070
2069
  /* @__PURE__ */ jsxRuntime.jsx(
2071
2070
  "div",
2072
2071
  {
@@ -2181,7 +2180,7 @@ function PopoverCard({
2181
2180
  !!description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 opacity-70", children: description }),
2182
2181
  actions && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5 w-full", children: actions.filter((action) => (action.items || []).length > 0).map((action, actionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2183
2182
  actionIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-px bg-gray-100 dark:bg-charcoal-800 mb-3" }),
2184
- action.section && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-gray-500 dark:text-white dark:hover", children: action.section }),
2183
+ action.section && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-content-secondary dark:text-content-title dark:hover", children: action.section }),
2185
2184
  /* @__PURE__ */ jsxRuntime.jsx(
2186
2185
  "div",
2187
2186
  {
@@ -2191,7 +2190,7 @@ function PopoverCard({
2191
2190
  children: (action.items || []).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
2192
2191
  "div",
2193
2192
  {
2194
- className: "text-sm sm:text-base px-3 py-1.5 text-charcoal-700 dark:text-charcoal-300 hover:text-gray-900 hover:bg-gray-200 hover:dark:text-charcoal-200 hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
2193
+ className: "text-sm sm:text-base px-3 py-1.5 text-content-primary dark:text-content-secondary hover:text-content-title hover:bg-gray-200 hover:dark:text-content-disabled hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
2195
2194
  onClick: () => handleMenuClick(item.action || item.onClick),
2196
2195
  children: item.label
2197
2196
  },
@@ -2240,24 +2239,24 @@ function PopoverCard({
2240
2239
  }),
2241
2240
  children: [
2242
2241
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
2243
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Menu" }),
2242
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-content-title ", children: "Menu" }),
2244
2243
  /* @__PURE__ */ jsxRuntime.jsx(
2245
2244
  "div",
2246
2245
  {
2247
2246
  onClick: handleCloseMenu,
2248
- className: "p-1 -mr-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
2247
+ className: "p-1 -mr-1 text-content-secondary hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
2249
2248
  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
2250
2249
  }
2251
2250
  )
2252
2251
  ] }),
2253
2252
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-6 max-h-[70vh] overflow-y-auto", children: [
2254
- !!description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm text-gray-500 dark:text-gray-400", children: description }),
2253
+ !!description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm text-content-secondary ", children: description }),
2255
2254
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: actions && actions.filter((action) => (action.items || []).length > 0).map((action, actionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2256
- action.section && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium uppercase text-gray-500 dark:text-gray-400 mb-2", children: action.section }),
2255
+ action.section && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium uppercase text-content-secondary mb-2", children: action.section }),
2257
2256
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: (action.items || []).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
2258
2257
  "div",
2259
2258
  {
2260
- className: "py-1.5 px-2 -mx-2 flex items-center text-base text-gray-900 dark:text-gray-200 active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
2259
+ className: "py-1.5 px-2 -mx-2 flex items-center text-base text-content-title dark:text-content-primary active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
2261
2260
  onClick: () => handleMenuClick(item.action || item.onClick),
2262
2261
  children: item.label
2263
2262
  },
@@ -2987,7 +2986,7 @@ function ExcelTable({
2987
2986
  "th",
2988
2987
  {
2989
2988
  className: classNames({
2990
- "border-b border-r border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 px-3 py-2 text-xs font-semibold text-gray-500": true,
2989
+ "border-b border-r border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 px-3 py-2 text-xs font-semibold text-content-secondary": true,
2991
2990
  "w-auto": !col.width,
2992
2991
  [col.width || ""]: !!col.width,
2993
2992
  "text-left": !col.align,
@@ -3022,7 +3021,7 @@ function ExcelTable({
3022
3021
  "data-row": rowIdx,
3023
3022
  "data-col": colIdx,
3024
3023
  placeholder: typeof placeholder === "function" ? placeholder(rowIdx) : placeholder,
3025
- className: "excel-table-textarea w-full min-h-[38px] px-3 py-2 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-gray-900 dark:text-white placeholder-gray-400 resize-none overflow-hidden leading-normal block",
3024
+ className: "excel-table-textarea w-full min-h-[38px] px-3 py-2 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-content-title placeholder-gray-400 resize-none overflow-hidden leading-normal block",
3026
3025
  style: { height: "auto" }
3027
3026
  }
3028
3027
  ) : col.type === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[38px]", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3048,7 +3047,7 @@ function ExcelTable({
3048
3047
  "data-row": rowIdx,
3049
3048
  "data-col": colIdx,
3050
3049
  className: classNames({
3051
- "w-full h-full min-h-[38px] px-3 py-1 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-gray-900 dark:text-white": true,
3050
+ "w-full h-full min-h-[38px] px-3 py-1 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-content-title ": true,
3052
3051
  "text-left": col.align !== "center" && col.align !== "right",
3053
3052
  "text-center": col.align === "center",
3054
3053
  "text-right": col.align === "right"
@@ -3068,7 +3067,7 @@ function ExcelTable({
3068
3067
  "data-row": rowIdx,
3069
3068
  "data-col": columns.length,
3070
3069
  tabIndex: 0,
3071
- className: "cursor-pointer text-gray-300 hover:text-red-500 w-full h-[38px] flex items-center justify-center transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
3070
+ className: "cursor-pointer text-content-disabled hover:text-red-500 w-full h-[38px] flex items-center justify-center transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
3072
3071
  children: "\xD7"
3073
3072
  }
3074
3073
  ) })
@@ -3080,7 +3079,7 @@ function ExcelTable({
3080
3079
  onClick: onRowAdd,
3081
3080
  onKeyDown: (e) => handleCellNavigation(e, data.length, 0),
3082
3081
  tabIndex: 0,
3083
- className: "w-full cursor-pointer text-left px-3 py-2 text-gray-400 text-xs font-medium hover:text-primary-500 hover:bg-gray-50 dark:hover:bg-charcoal-800 transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
3082
+ className: "w-full cursor-pointer text-left px-3 py-2 text-content-placeholder text-xs font-medium hover:text-primary-500 hover:bg-gray-50 dark:hover:bg-charcoal-800 transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
3084
3083
  children: addRowLabel
3085
3084
  }
3086
3085
  ) }) })
@@ -3277,7 +3276,7 @@ function Coverflow({ images = [], onClose }) {
3277
3276
  ),
3278
3277
  (img.imageTitle || img.imageDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/90 via-black/50 to-transparent text-white text-center pointer-events-none", children: [
3279
3278
  img.imageTitle && /* @__PURE__ */ jsxRuntime.jsx(H3, { className: "!text-base mb-1", children: img.imageTitle }),
3280
- img.imageDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-charcoal-200 max-w-2xl mx-auto", children: img.imageDescription })
3279
+ img.imageDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-content-disabled max-w-2xl mx-auto", children: img.imageDescription })
3281
3280
  ] })
3282
3281
  ] })
3283
3282
  },
@@ -3433,9 +3432,9 @@ function DataTable({
3433
3432
  "table",
3434
3433
  {
3435
3434
  className: classNames({
3436
- "w-full text-sm dark:text-charcoal-100 rounded-xl border-separate border-spacing-0": true,
3435
+ "w-full text-sm dark:text-content-primary rounded-xl border-separate border-spacing-0": true,
3437
3436
  "text-charcoal-100": !!darkMode,
3438
- "text-charcoal-500": !darkMode
3437
+ "text-content-secondary": !darkMode
3439
3438
  }),
3440
3439
  children: [
3441
3440
  /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [