@woobee/ui 0.2.4 → 0.3.1

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 (7) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +56 -55
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +56 -55
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -366,6 +366,7 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
366
366
 
367
367
  interface LabelProps {
368
368
  className?: string;
369
+ active?: boolean;
369
370
  error?: boolean;
370
371
  htmlFor?: string;
371
372
  info?: string;
@@ -375,7 +376,7 @@ interface LabelProps {
375
376
  };
376
377
  children?: ReactNode;
377
378
  }
378
- declare function Label({ className, error, htmlFor, info, mandatory, opts, children, }: LabelProps): React.JSX.Element;
379
+ declare function Label({ className, active, error, htmlFor, info, mandatory, opts, children, }: LabelProps): React.JSX.Element;
379
380
 
380
381
  interface SelectProps {
381
382
  id?: string;
package/dist/index.d.ts CHANGED
@@ -366,6 +366,7 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
366
366
 
367
367
  interface LabelProps {
368
368
  className?: string;
369
+ active?: boolean;
369
370
  error?: boolean;
370
371
  htmlFor?: string;
371
372
  info?: string;
@@ -375,7 +376,7 @@ interface LabelProps {
375
376
  };
376
377
  children?: ReactNode;
377
378
  }
378
- declare function Label({ className, error, htmlFor, info, mandatory, opts, children, }: LabelProps): React.JSX.Element;
379
+ declare function Label({ className, active, error, htmlFor, info, mandatory, opts, children, }: LabelProps): React.JSX.Element;
379
380
 
380
381
  interface SelectProps {
381
382
  id?: string;
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": !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-placeholder text-sm flex items-center", children: placeholder })
150
150
  }
151
151
  );
152
152
  }
@@ -171,8 +171,8 @@ function Tabs({
171
171
  {
172
172
  className: classNames({
173
173
  "px-3 py-2 transition-colors rounded-lg": true,
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
174
+ "bg-white text-content-link dark:bg-charcoal-600": value === option.id,
175
+ "text-content-secondary": 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-placeholder", children: placeholder });
285
285
  }
286
286
  return placeholder;
287
287
  };
@@ -307,7 +307,7 @@ function CheckboxList({
307
307
  className: classNames({
308
308
  "w-5 h-5 rounded border flex items-center justify-center transition-colors cursor-pointer": true,
309
309
  "border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-700": !checked,
310
- "border-brown-500 bg-brown-500 dark:bg-primary-500 dark:border-primary-500 dark:text-black text-white": checked
310
+ "border-brown-500 bg-brown-500 dark:bg-primary-500 dark:border-primary-500 text-content-primary-button": checked
311
311
  }),
312
312
  children: checked && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" }) })
313
313
  }
@@ -317,8 +317,8 @@ function CheckboxList({
317
317
  {
318
318
  className: classNames({
319
319
  "text-sm": true,
320
- "text-gray-900 dark:text-gray-100": !checked,
321
- "dark:text-primary-400": checked
320
+ "text-content-secondary": !checked,
321
+ "text-content-title": checked
322
322
  }),
323
323
  children: label
324
324
  }
@@ -699,7 +699,7 @@ function Modal({
699
699
  }),
700
700
  children: [
701
701
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
702
- /* @__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 }),
703
703
  !!description && description.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary-700", children: description })
704
704
  ] }),
705
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" }) }) })
@@ -816,7 +816,7 @@ function ConfirmationBox({
816
816
  disabled,
817
817
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-4", children: [
818
818
  iconSvg && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full ${iconContainerClass}`, children: iconSvg }),
819
- /* @__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 }) })
820
820
  ] })
821
821
  }
822
822
  );
@@ -916,7 +916,7 @@ function Drawer({
916
916
  "div",
917
917
  {
918
918
  "aria-label": "Close",
919
- 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-content-title hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
920
920
  onClick: handleClose,
921
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" }) })
922
922
  }
@@ -997,7 +997,7 @@ function InlinePrompt({
997
997
  className: classNames({
998
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,
999
999
  "leading-5 px-4 py-2": !condensed,
1000
- "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-"),
1001
1001
  ...classNameObject(className)
1002
1002
  }),
1003
1003
  "aria-haspopup": "true",
@@ -1076,9 +1076,9 @@ function Breadcrumb({
1076
1076
  "a",
1077
1077
  {
1078
1078
  onClick: clickBack,
1079
- 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",
1080
1080
  children: [
1081
- /* @__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(
1082
1082
  "path",
1083
1083
  {
1084
1084
  fillRule: "evenodd",
@@ -1091,8 +1091,8 @@ function Breadcrumb({
1091
1091
  }
1092
1092
  ) }),
1093
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: [
1094
- /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: link.href, className: "text-gray-500 hover:text-gray-700 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-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(
1096
1096
  "path",
1097
1097
  {
1098
1098
  fillRule: "evenodd",
@@ -1198,10 +1198,10 @@ function ButtonItem({
1198
1198
  "div",
1199
1199
  {
1200
1200
  className: classNames({
1201
- "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 flex justify-center cursor-pointer": true,
1202
1202
  "w-full": direction === "vertical",
1203
1203
  "w-full overflow-hidden": direction === "horizontal",
1204
- "!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-link 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,
1205
1205
  ...classNameObject(className)
1206
1206
  }),
1207
1207
  children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1324,7 +1324,7 @@ function H1({ className, children }) {
1324
1324
  "h1",
1325
1325
  {
1326
1326
  className: classNames({
1327
- "text-lg sm:text-xl font-title text-primary-500 font-semibold": true,
1327
+ "text-lg sm:text-3xl font-title font-semibold": true,
1328
1328
  ...classNameObject(className)
1329
1329
  }),
1330
1330
  children
@@ -1426,7 +1426,7 @@ function Th({ condensed, className, children, sticky, ...opts }) {
1426
1426
  className: classNames({
1427
1427
  ...classNameObject(className),
1428
1428
  "sticky z-10 top-0": !!sticky,
1429
- "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,
1430
1430
  "px-6": !condensed,
1431
1431
  "py-4": !condensed && (!className || !className.includes("py-")),
1432
1432
  "px-2.5": !!condensed,
@@ -1555,7 +1555,7 @@ var Input = React18.forwardRef((props, ref) => {
1555
1555
  id,
1556
1556
  className: classNames({
1557
1557
  ...classNameObject(className),
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-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
+ "text-content-primary px-3 group form-input placeholder-gray-300 dark:placeholder-charcoal-400 focus:outline-none block transition ease-in-out duration-150 dark:bg-charcoal-800 shadow-sm focus:dark:text-content-link focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
1559
1559
  "!text-white !border-charcoal-400 !placeholder-charcoal-400 focus:!text-primary-500 focus:!border-primary-500 focus:!ring-primary-500": !!darkMode,
1560
1560
  "h-11": !className || !className.includes("h-"),
1561
1561
  "text-sm": type !== "tel",
@@ -1571,7 +1571,7 @@ var Input = React18.forwardRef((props, ref) => {
1571
1571
  "w-full": type !== "radio" && (!className || className.includes("w-full") || !className.includes("w-")),
1572
1572
  "sm:leading-normal": !className || !className.includes("leading-"),
1573
1573
  "cursor-pointer": type === "checkbox" || type === "button",
1574
- "text-black h-4 w-4": type === "radio",
1574
+ "h-4 w-4": type === "radio",
1575
1575
  "pr-10": type === "search"
1576
1576
  }),
1577
1577
  ...type === "button" ? { value: label } : {},
@@ -1620,7 +1620,7 @@ var Input = React18.forwardRef((props, ref) => {
1620
1620
  className: classNames({
1621
1621
  "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none focus:outline-none active:outline-none": true,
1622
1622
  "!text-white": !!darkMode,
1623
- "text-gray-600": !focused,
1623
+ "text-content-secondary": !focused,
1624
1624
  "!text-primary-500": focused
1625
1625
  }),
1626
1626
  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1635,13 +1635,14 @@ var Input = React18.forwardRef((props, ref) => {
1635
1635
  )
1636
1636
  ] }),
1637
1637
  error && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1638
- 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 })
1639
1639
  ] });
1640
1640
  });
1641
1641
  Input.displayName = "Input";
1642
1642
  var Input_default = Input;
1643
1643
  function Label({
1644
1644
  className,
1645
+ active = false,
1645
1646
  error = false,
1646
1647
  htmlFor,
1647
1648
  info,
@@ -1655,8 +1656,8 @@ function Label({
1655
1656
  {
1656
1657
  htmlFor,
1657
1658
  className: classNames({
1658
- "block text-sm font-medium mb-1.5 text-black dark:text-white": true,
1659
- "text-black dark:text-white/80": !error,
1659
+ "block text-sm font-medium mb-1.5": true,
1660
+ "text-content-link": active,
1660
1661
  "text-red-600": error,
1661
1662
  ...classNameObject(className)
1662
1663
  }),
@@ -1670,7 +1671,7 @@ function Label({
1670
1671
  "span",
1671
1672
  {
1672
1673
  className: classNames({
1673
- "text-sm leading-5 text-black mb-1.5": true,
1674
+ "text-sm leading-5 mb-1.5": true,
1674
1675
  "text-red-600": error
1675
1676
  }),
1676
1677
  children: info
@@ -1713,7 +1714,7 @@ var Select = React18.forwardRef((props, ref) => {
1713
1714
  ) }),
1714
1715
  loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex relative w-6 loading" }),
1715
1716
  error && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1716
- info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
1717
+ info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
1717
1718
  ] });
1718
1719
  });
1719
1720
  Select.displayName = "Select";
@@ -1785,7 +1786,7 @@ var Textarea = React18.forwardRef((props, ref) => {
1785
1786
  placeholder,
1786
1787
  className: classNames({
1787
1788
  ...classNameObject(className),
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-charcoal-100 dark:bg-charcoal-800 rounded-lg": true,
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 dark:bg-charcoal-800 rounded-lg": true,
1789
1790
  "focus:ring-white dark:focus:ring-1 dark:focus:border-primary-600 dark:focus:ring-primary-500": !error,
1790
1791
  "focus:outline-none focus:ring-0 focus:ring-offset-0 dark:focus:border-primary-500": true,
1791
1792
  "border-red-300 text-red-900 placeholder-red-300 dark:placeholder-red-600 focus:border-red-300 focus:shadow-outline-red": error
@@ -1809,7 +1810,7 @@ var Textarea = React18.forwardRef((props, ref) => {
1809
1810
  ) }) })
1810
1811
  ] }),
1811
1812
  error && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1812
- info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
1813
+ info != null && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
1813
1814
  ] });
1814
1815
  });
1815
1816
  Textarea.displayName = "Textarea";
@@ -1921,8 +1922,8 @@ function NoData({ className }) {
1921
1922
  }
1922
1923
  ),
1923
1924
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[90%] flex flex-col text-center", children: [
1924
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-6 font-medium text-gray-900 mt-3 dark:text-white/50", children: "It's empty." }),
1925
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4 text-gray-700 dark:text-white/60", children: "Nothing to do for now." })
1925
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-6 font-medium text-content-title mt-3 /50", children: "It's empty." }),
1926
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4", children: "Nothing to do for now." })
1926
1927
  ] })
1927
1928
  ] });
1928
1929
  }
@@ -2065,7 +2066,7 @@ function useThemeContext() {
2065
2066
  }
2066
2067
  function ThemeToggle() {
2067
2068
  const { theme, handleToggleTheme } = useThemeContext();
2068
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-charcoal-700 dark:text-white z-30 flex space-x-1.5 items-center", children: [
2069
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-content-primary z-30 flex space-x-1.5 items-center", children: [
2069
2070
  /* @__PURE__ */ jsxRuntime.jsx(
2070
2071
  "div",
2071
2072
  {
@@ -2180,7 +2181,7 @@ function PopoverCard({
2180
2181
  !!description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1 opacity-70", children: description }),
2181
2182
  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: [
2182
2183
  actionIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-px bg-gray-100 dark:bg-charcoal-800 mb-3" }),
2183
- 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 }),
2184
+ action.section && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-content-secondary dark:hover", children: action.section }),
2184
2185
  /* @__PURE__ */ jsxRuntime.jsx(
2185
2186
  "div",
2186
2187
  {
@@ -2190,7 +2191,7 @@ function PopoverCard({
2190
2191
  children: (action.items || []).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
2191
2192
  "div",
2192
2193
  {
2193
- 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",
2194
+ className: "text-sm sm:text-base px-3 py-1.5 text-content-primary hover:text-content-title hover:bg-gray-200 hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
2194
2195
  onClick: () => handleMenuClick(item.action || item.onClick),
2195
2196
  children: item.label
2196
2197
  },
@@ -2239,24 +2240,24 @@ function PopoverCard({
2239
2240
  }),
2240
2241
  children: [
2241
2242
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
2242
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Menu" }),
2243
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-content-title ", children: "Menu" }),
2243
2244
  /* @__PURE__ */ jsxRuntime.jsx(
2244
2245
  "div",
2245
2246
  {
2246
2247
  onClick: handleCloseMenu,
2247
- className: "p-1 -mr-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
2248
+ className: "p-1 -mr-1 text-content-secondary hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
2248
2249
  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" }) })
2249
2250
  }
2250
2251
  )
2251
2252
  ] }),
2252
2253
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-6 max-h-[70vh] overflow-y-auto", children: [
2253
- !!description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm text-gray-500 dark:text-gray-400", children: description }),
2254
+ !!description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm text-content-secondary ", children: description }),
2254
2255
  /* @__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: [
2255
- action.section && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium uppercase text-gray-500 dark:text-gray-400 mb-2", children: action.section }),
2256
+ action.section && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium uppercase text-content-secondary mb-2", children: action.section }),
2256
2257
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: (action.items || []).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
2257
2258
  "div",
2258
2259
  {
2259
- 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",
2260
+ className: "py-1.5 px-2 -mx-2 flex items-center text-base text-content-title active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
2260
2261
  onClick: () => handleMenuClick(item.action || item.onClick),
2261
2262
  children: item.label
2262
2263
  },
@@ -2986,7 +2987,7 @@ function ExcelTable({
2986
2987
  "th",
2987
2988
  {
2988
2989
  className: classNames({
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-gray-500": true,
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-content-secondary": true,
2990
2991
  "w-auto": !col.width,
2991
2992
  [col.width || ""]: !!col.width,
2992
2993
  "text-left": !col.align,
@@ -3021,7 +3022,7 @@ function ExcelTable({
3021
3022
  "data-row": rowIdx,
3022
3023
  "data-col": colIdx,
3023
3024
  placeholder: typeof placeholder === "function" ? placeholder(rowIdx) : placeholder,
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-gray-900 dark:text-white placeholder-gray-400 resize-none overflow-hidden leading-normal block",
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-content-title placeholder-gray-400 resize-none overflow-hidden leading-normal block",
3025
3026
  style: { height: "auto" }
3026
3027
  }
3027
3028
  ) : col.type === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[38px]", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3047,7 +3048,7 @@ function ExcelTable({
3047
3048
  "data-row": rowIdx,
3048
3049
  "data-col": colIdx,
3049
3050
  className: classNames({
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-gray-900 dark:text-white": true,
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-content-title ": true,
3051
3052
  "text-left": col.align !== "center" && col.align !== "right",
3052
3053
  "text-center": col.align === "center",
3053
3054
  "text-right": col.align === "right"
@@ -3067,7 +3068,7 @@ function ExcelTable({
3067
3068
  "data-row": rowIdx,
3068
3069
  "data-col": columns.length,
3069
3070
  tabIndex: 0,
3070
- 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",
3071
+ 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",
3071
3072
  children: "\xD7"
3072
3073
  }
3073
3074
  ) })
@@ -3079,7 +3080,7 @@ function ExcelTable({
3079
3080
  onClick: onRowAdd,
3080
3081
  onKeyDown: (e) => handleCellNavigation(e, data.length, 0),
3081
3082
  tabIndex: 0,
3082
- 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",
3083
+ 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",
3083
3084
  children: addRowLabel
3084
3085
  }
3085
3086
  ) }) })
@@ -3276,7 +3277,7 @@ function Coverflow({ images = [], onClose }) {
3276
3277
  ),
3277
3278
  (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: [
3278
3279
  img.imageTitle && /* @__PURE__ */ jsxRuntime.jsx(H3, { className: "!text-base mb-1", children: img.imageTitle }),
3279
- img.imageDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-charcoal-200 max-w-2xl mx-auto", children: img.imageDescription })
3280
+ img.imageDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-content-disabled max-w-2xl mx-auto", children: img.imageDescription })
3280
3281
  ] })
3281
3282
  ] })
3282
3283
  },
@@ -3432,9 +3433,9 @@ function DataTable({
3432
3433
  "table",
3433
3434
  {
3434
3435
  className: classNames({
3435
- "w-full text-sm dark:text-charcoal-100 rounded-xl border-separate border-spacing-0": true,
3436
+ "w-full text-sm rounded-xl border-separate border-spacing-0": true,
3436
3437
  "text-charcoal-100": !!darkMode,
3437
- "text-charcoal-500": !darkMode
3438
+ "text-content-secondary": !darkMode
3438
3439
  }),
3439
3440
  children: [
3440
3441
  /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
@@ -3691,7 +3692,7 @@ function DataGridHeader({ sort, onClick, opts, children }) {
3691
3692
  "!text-right": align === "right",
3692
3693
  "whitespace-nowrap": !!noWrap,
3693
3694
  "sticky top-0 z-10 dark:bg-charcoal-800": !!stickyHeader,
3694
- "bg-cream-50": !darkMode,
3695
+ "bg-white dark:bg-charcoal-800": !darkMode,
3695
3696
  "bg-charcoal-800": !!darkMode
3696
3697
  }),
3697
3698
  onClick,
@@ -3714,7 +3715,7 @@ function DataGridHeader({ sort, onClick, opts, children }) {
3714
3715
  "!text-left": align === "left",
3715
3716
  "whitespace-nowrap": !!noWrap,
3716
3717
  "sticky top-0 z-10 dark:bg-charcoal-800": !!stickyHeader,
3717
- "bg-cream-50": !darkMode,
3718
+ "bg-white dark:bg-charcoal-800": !darkMode,
3718
3719
  "bg-charcoal-800": !!darkMode
3719
3720
  }),
3720
3721
  children