@woobee/ui 0.3.3 → 0.3.4

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 +59 -59
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +59 -59
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -55,11 +55,11 @@ 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-content-primary bg-white border border-gray-300 hover:text-content-secondary": variant === "secondary" && !darkMode,
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-content-primary bg-white border border-gray-200 hover:bg-gray-50 hover:text-content-secondary": variant === "form-input" && !darkMode,
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-content-primary dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
58
+ "text-content-primary bg-white border border-line-secondary hover:text-content-secondary": variant === "secondary" && !darkMode,
59
+ "text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-line-secondary": variant === "secondary" && !!darkMode,
60
+ "!rounded-md text-left w-full text-content-primary bg-white border border-line-secondary hover:bg-gray-50 hover:text-content-secondary": variant === "form-input" && !darkMode,
61
+ "!rounded-md text-left w-full text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-line-secondary": variant === "form-input" && !!darkMode,
62
+ "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-content-primary": (variant === "secondary" || variant === "form-input") && !darkMode,
63
63
  "hover:text-brown-500 !shadow-none": variant === "flat" && !darkMode,
64
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,
@@ -251,7 +251,7 @@ function Loading({
251
251
  className: classNames({
252
252
  [spinClassName]: true,
253
253
  [spinSizeClassName]: true,
254
- "relative border-8 border-gray-500 rounded-full animate-spin": true
254
+ "relative border-8 border-line-secondary rounded-full animate-spin": true
255
255
  }),
256
256
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-4 -top-4 right-2/4 bottom-2/4 bg-white/50 bg-opacity-75 rounded-full rounded-b-none rounded-r-none" })
257
257
  }
@@ -285,7 +285,7 @@ function CheckboxList({
285
285
  }
286
286
  return placeholder;
287
287
  };
288
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border border-gray-300 dark:border-charcoal-700 rounded-lg shadow-sm bg-white dark:bg-charcoal-800 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-gray-100 dark:divide-charcoal-700", children: loading && !hasLoadedRef.current ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsxRuntime.jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.length > 0 ? items.map((item, index) => {
288
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border border-line-secondary rounded-lg shadow-sm bg-white dark:bg-charcoal-800 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-line-secondary", children: loading && !hasLoadedRef.current ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsxRuntime.jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.length > 0 ? items.map((item, index) => {
289
289
  const finalKey = getFinalKey(item, index);
290
290
  const label = typeof itemLabel === "function" ? itemLabel(item) : item[itemLabel];
291
291
  const checked = typeof isChecked === "function" ? isChecked(item, selected) : selected.some(
@@ -306,8 +306,8 @@ function CheckboxList({
306
306
  {
307
307
  className: classNames({
308
308
  "w-5 h-5 rounded border flex items-center justify-center transition-colors cursor-pointer": true,
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 text-content-primary-button": checked
309
+ "border-line-secondary bg-white dark:bg-charcoal-700": !checked,
310
+ "border-line-focus bg-brown-500 dark:bg-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
  }
@@ -531,8 +531,8 @@ function ModalFooter({
531
531
  "div",
532
532
  {
533
533
  className: classNames({
534
- "px-3 pt-5 pb-4 bg-gray-100 border-t border-gray-300 dark:border-charcoal-700 sm:px-6 sm:pt-3 sm:pb-3 dark:bg-black/40": true,
535
- "!bg-charcoal-700 !border-t-charcoal-600": !!darkMode
534
+ "px-3 pt-5 pb-4 bg-gray-100 border-t border-line-secondary sm:px-6 sm:pt-3 sm:pb-3 dark:bg-black/40": true,
535
+ "!bg-charcoal-700": !!darkMode
536
536
  }),
537
537
  children: footer
538
538
  }
@@ -695,7 +695,7 @@ function Modal({
695
695
  {
696
696
  className: classNames({
697
697
  "flex items-center justify-between px-3 pt-3 pb-2 space-x-2 sm:px-5 sm:pt-6 sm:pb-3": true,
698
- "sm:border-b sm:border-gray-200 dark:sm:border-charcoal-700 sm:shadow-sm": !!sidebar
698
+ "sm:border-b sm:border-line-secondary sm:shadow-sm": !!sidebar
699
699
  }),
700
700
  children: [
701
701
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
@@ -713,7 +713,7 @@ function Modal({
713
713
  className: classNames({
714
714
  "pb-3 max-h-full overflow-y-auto": true,
715
715
  "h-[100dvh] lg:h-auto": fullscreen || size === "full",
716
- "sm:pt-4 sm:relative border-b border-gray-200 dark:border-charcoal-700": !!sidebar,
716
+ "sm:pt-4 sm:relative border-b border-line-secondary": !!sidebar,
717
717
  "sm:pr-80": !!sidebar && sidebarPosition === "right",
718
718
  "sm:pl-80": !!sidebar && sidebarPosition === "left"
719
719
  }),
@@ -723,9 +723,9 @@ function Modal({
723
723
  {
724
724
  className: classNames({
725
725
  "sm:absolute sm:top-0 sm:bottom-0 sm:w-80 sm:max-h-full sm:overflow-y-scroll sm:px-5 sm:py-4": true,
726
- "sm:right-0 sm:border-l sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "right",
727
- "sm:left-0 sm:border-r sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "left",
728
- "pb-6 mb-6 border-b border-gray-200 dark:border-charcoal-700 sm:border-b-0 sm:pb-0 sm:mb-0": true
726
+ "sm:right-0 sm:border-l sm:border-line-secondary": sidebarPosition === "right",
727
+ "sm:left-0 sm:border-r sm:border-line-secondary": sidebarPosition === "left",
728
+ "pb-6 mb-6 border-b border-line-secondary sm:border-b-0 sm:pb-0 sm:mb-0": true
729
729
  }),
730
730
  children: sidebar
731
731
  }
@@ -736,9 +736,9 @@ function Modal({
736
736
  {
737
737
  className: classNames({
738
738
  "sm:absolute sm:top-0 sm:bottom-0 sm:w-80 sm:max-h-full sm:overflow-y-scroll sm:px-5 sm:py-4": true,
739
- "sm:right-0 sm:border-l sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "right",
740
- "sm:left-0 sm:border-r sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "left",
741
- "pt-6 mt-6 border-t border-gray-200 dark:border-charcoal-700 sm:border-t-0 sm:mt-0": true
739
+ "sm:right-0 sm:border-l sm:border-line-secondary": sidebarPosition === "right",
740
+ "sm:left-0 sm:border-r sm:border-line-secondary": sidebarPosition === "left",
741
+ "pt-6 mt-6 border-t border-line-secondary sm:border-t-0 sm:mt-0": true
742
742
  }),
743
743
  children: sidebar
744
744
  }
@@ -894,7 +894,7 @@ function Drawer({
894
894
  "bg-primary-100 dark:bg-primary-900": !theme && (!level || level === "base" || level === "extra-wide" || level === "full"),
895
895
  "bg-primary-200 dark:bg-primary-900": !theme && level === "middle",
896
896
  "bg-primary-300 dark:bg-primary-900": !theme && level === "top",
897
- "bg-primary-50 dark:bg-primary-900 border-b border-primary-100": !theme && level === "ceil",
897
+ "bg-primary-50 dark:bg-primary-900 border-b border-line-primary": !theme && level === "ceil",
898
898
  "bg-white": theme === "WHITE",
899
899
  "bg-black": theme === "BLACK",
900
900
  "bg-red-500": theme === "RED",
@@ -927,7 +927,7 @@ function Drawer({
927
927
  }
928
928
  ),
929
929
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-3 flex-1 flex flex-col justify-between overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-6", children }) }),
930
- !!footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:border-t sm:border-cool-gray-200 sm:dark:border-gray-700 py-2.5 sm:py-4 px-4 sm:px-6", children: footer })
930
+ !!footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:border-t sm:border-line-secondary py-2.5 sm:py-4 px-4 sm:px-6", children: footer })
931
931
  ] })
932
932
  }
933
933
  )
@@ -1019,7 +1019,7 @@ function InlinePrompt({
1019
1019
  "div",
1020
1020
  {
1021
1021
  ref: nodeWindow,
1022
- className: "absolute top-0 left-0 min-w-full border border-gray-200 rounded-md bg-gray-50 flex justify-center z-20",
1022
+ className: "absolute top-0 left-0 min-w-full border border-line-secondary rounded-md bg-gray-50 flex justify-center z-20",
1023
1023
  children: [
1024
1024
  /* @__PURE__ */ jsxRuntime.jsxs("a", { onClick: handleConfirm, className: "inline-flex items-center cursor-pointer m-1 text-sm text-green-500", children: [
1025
1025
  /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "text-green-500 w-6 h-6", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1124,7 +1124,7 @@ function TabItemComponent({
1124
1124
  href: item.link,
1125
1125
  className: classNames({
1126
1126
  "whitespace-no-wrap -mb-px cursor-pointer border-b-2 py-2 px-3 text-center text-sm font-medium leading-5 tracking-tight focus:outline-none sm:px-5 sm:text-base sm:tracking-normal": true,
1127
- "border-primary-500 text-primary-500 focus:border-primary-500 focus:text-primary-500": isActive,
1127
+ "border-line-focus text-primary-500 focus:border-line-focus focus:text-primary-500": isActive,
1128
1128
  "text-cool-gray-500 hover:text-cool-gray-700 focus:text-cool-gray-700 border-transparent hover:border-transparent focus:border-transparent": !isActive
1129
1129
  }),
1130
1130
  onClick: handleTabSelect,
@@ -1155,7 +1155,7 @@ function Tab({
1155
1155
  setSelected(item && item.id || null);
1156
1156
  }
1157
1157
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "no-scrollbar flex w-full items-stretch pb-1 sm:pb-2", children: [
1158
- /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "border-cool-gray-200 -mb-px flex w-full items-end border-b", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
1158
+ /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "border-line-secondary -mb-px flex w-full items-end border-b", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
1159
1159
  TabItemComponent,
1160
1160
  {
1161
1161
  item,
@@ -1167,7 +1167,7 @@ function Tab({
1167
1167
  },
1168
1168
  item.id
1169
1169
  )) }),
1170
- rightContent && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "border-cool-gray-200 -mb-px flex flex flex-shrink-0 items-center border-b px-4", children: rightContent })
1170
+ rightContent && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "border-line-secondary -mb-px flex flex flex-shrink-0 items-center border-b px-4", children: rightContent })
1171
1171
  ] });
1172
1172
  }
1173
1173
  function DefaultLink3({ href, children }) {
@@ -1201,7 +1201,7 @@ function ButtonItem({
1201
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-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,
1204
+ "text-content-link bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-line-primary lg:border-transparent shadow-xs dark:shadow-none": active,
1205
1205
  ...classNameObject(className)
1206
1206
  }),
1207
1207
  children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1409,7 +1409,7 @@ function Table({ children, className }) {
1409
1409
  "flex flex-col relative": true,
1410
1410
  "sm:px-0 lg:px-8": !className || !className.includes("px-")
1411
1411
  }),
1412
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-my-2 py-2 px-0.5 sm:px-0 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "align-middle inline-block min-w-full shadow overflow-hidden rounded-lg border-b border-t border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "min-w-full", children }) }) })
1412
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-my-2 py-2 px-0.5 sm:px-0 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "align-middle inline-block min-w-full shadow overflow-hidden rounded-lg border-b border-t border-line-secondary", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "min-w-full", children }) }) })
1413
1413
  }
1414
1414
  );
1415
1415
  }
@@ -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-content-secondary uppercase tracking-wider": true,
1429
+ "border-b border-line-secondary bg-gray-50 dark:bg-charcoal-800 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,
@@ -1438,7 +1438,7 @@ function Th({ condensed, className, children, sticky, ...opts }) {
1438
1438
  );
1439
1439
  }
1440
1440
  function Tbody({ children }) {
1441
- return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white", children });
1441
+ return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white dark:bg-black", children });
1442
1442
  }
1443
1443
  function Td({ className, align, colSpan, condensed, narrow, children }) {
1444
1444
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1448,7 +1448,7 @@ function Td({ className, align, colSpan, condensed, narrow, children }) {
1448
1448
  colSpan,
1449
1449
  className: classNames({
1450
1450
  ...classNameObject(className),
1451
- "whitespace-no-wrap border-b border-gray-200": true,
1451
+ "whitespace-no-wrap border-b border-line-secondary": true,
1452
1452
  "px-6": !condensed && !narrow,
1453
1453
  "py-4": !condensed && !narrow && (!className || !className.includes("py-")),
1454
1454
  "px-2": !!condensed,
@@ -1555,18 +1555,18 @@ var Input = React18.forwardRef((props, ref) => {
1555
1555
  id,
1556
1556
  className: classNames({
1557
1557
  ...classNameObject(className),
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
- "!text-white !border-charcoal-400 !placeholder-charcoal-400 focus:!text-primary-500 focus:!border-primary-500 focus:!ring-primary-500": !!darkMode,
1558
+ "px-3 group form-input placeholder-content-placeholder focus:outline-none block transition ease-in-out duration-150 dark:bg-charcoal-800 shadow-sm focus:border-line-focus focus:ring-focus": true,
1559
+ "!text-white !border-line-secondary !placeholder-content-placeholder focus:!text-primary-500 focus:!border-line-focus focus:!ring-focus": !!darkMode,
1560
1560
  "h-11": !className || !className.includes("h-"),
1561
1561
  "text-sm": type !== "tel",
1562
1562
  "text-lg": type === "tel",
1563
1563
  "rounded-lg": type !== "radio",
1564
1564
  "rounded-full": type === "radio",
1565
- "border border-gray-200 dark:border-charcoal-700 shadow-sm text-black": !noBorder && !readOnly && type !== "radio",
1566
- "border border-opacity-20 bg-gray-100 cursor-not-allowed": readOnly,
1565
+ "border border-line-secondary shadow-sm text-black": !noBorder && !readOnly && type !== "radio",
1566
+ "border border-line-disabled bg-gray-100 dark:!bg-charcoal-700 cursor-not-allowed": readOnly,
1567
1567
  "border-transparent": !!noBorder,
1568
- "border-red-300 text-red-900 placeholder-red-100 focus:placeholder-red-100 focus:border-red-500 focus:ring-red-300": error,
1569
- "focus:ring-primary-500": !error && type !== "radio",
1568
+ "!border-line-error !text-red-500 !placeholder-red-500 focus:!placeholder-red-500 focus:border-line-error focus:ring-red-300": error,
1569
+ "focus:ring-focus": !error && type !== "radio",
1570
1570
  "focus:ring-transparent": type === "radio",
1571
1571
  "w-full": type !== "radio" && (!className || className.includes("w-full") || !className.includes("w-")),
1572
1572
  "sm:leading-normal": !className || !className.includes("leading-"),
@@ -1694,7 +1694,7 @@ var Select = React18.forwardRef((props, ref) => {
1694
1694
  value
1695
1695
  } = props;
1696
1696
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1697
- !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md shadow-sm border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(
1697
+ !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md shadow-sm border border-line-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(
1698
1698
  "select",
1699
1699
  {
1700
1700
  id,
@@ -1702,7 +1702,7 @@ var Select = React18.forwardRef((props, ref) => {
1702
1702
  className: classNames({
1703
1703
  ...classNameObject(className),
1704
1704
  ...classNameObject(
1705
- `form-select block w-full transition duration-150 ease-in-out ${error ? "border-red-300 text-red-900 placeholder-red-300 focus:border-red-300 focus:shadow-outline-red" : ""}`
1705
+ `form-select block w-full transition duration-150 ease-in-out ${error ? "border-line-error text-red-900 placeholder-red-300 focus:border-line-error focus:shadow-outline-red" : ""}`
1706
1706
  )
1707
1707
  }),
1708
1708
  ref,
@@ -1743,9 +1743,9 @@ var SelectInput = React18.forwardRef((props, ref) => {
1743
1743
  value: selectedValue || "",
1744
1744
  disabled: readOnly,
1745
1745
  className: classNames({
1746
- "form-select block w-full transition duration-150 ease-in-out border border-gray-200 rounded-md shadow-sm text-sm px-3 h-11 text-black": true,
1746
+ "form-select block w-full transition duration-150 ease-in-out border border-line-secondary dark:bg-charcoal-800 rounded-md shadow-sm text-sm px-3 h-11 text-black focus:border-line-focus focus:ring-focus": true,
1747
1747
  "cursor-not-allowed border bg-gray-100": readOnly,
1748
- "border-red-300 text-red-900 placeholder-red-100 focus:placeholder-red-100 focus:border-red-500 focus:ring-red-300": error
1748
+ "border-line-error text-red-900 placeholder-red-100 focus:placeholder-red-100 focus:border-line-error focus:ring-red-300": error
1749
1749
  }),
1750
1750
  children: [
1751
1751
  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }, ""),
@@ -1786,10 +1786,10 @@ var Textarea = React18.forwardRef((props, ref) => {
1786
1786
  placeholder,
1787
1787
  className: classNames({
1788
1788
  ...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 dark:bg-charcoal-800 rounded-lg": true,
1790
- "focus:ring-white dark:focus:ring-1 dark:focus:border-primary-600 dark:focus:ring-primary-500": !error,
1791
- "focus:outline-none focus:ring-0 focus:ring-offset-0 dark:focus:border-primary-500": true,
1792
- "border-red-300 text-red-900 placeholder-red-300 dark:placeholder-red-600 focus:border-red-300 focus:shadow-outline-red": error
1789
+ "form-input border block w-full placeholder-content-placeholder text-sm transition ease-in-out duration-150 px-3 py-2 border-line-secondary dark:bg-charcoal-800 rounded-lg": true,
1790
+ "focus:border-line-focus focus:ring-focus": !error,
1791
+ "focus:outline-none": true,
1792
+ "border-line-error text-red-900 placeholder-red-300 focus:border-line-error focus:ring-red-300": error
1793
1793
  }),
1794
1794
  name,
1795
1795
  ref,
@@ -1869,7 +1869,7 @@ function TagInput({
1869
1869
  onChange(newTags);
1870
1870
  }
1871
1871
  }
1872
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center w-full flex-wrap px-2 pt-2 pb-1 border border-gray-300 rounded-md", children: [
1872
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center w-full flex-wrap px-2 pt-2 pb-1 border border-line-secondary rounded-md dark:bg-charcoal-800", children: [
1873
1873
  tags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1874
1874
  "span",
1875
1875
  {
@@ -2172,7 +2172,7 @@ function PopoverCard({
2172
2172
  "div",
2173
2173
  {
2174
2174
  className: classNames({
2175
- "hidden sm:block fixed text-sm z-[9999] w-52 max-h-64 overflow-y-auto border border-gray-100 bg-white dark:bg-charcoal-800 dark:border-charcoal-700 shadow-md rounded-md pt-3 pb-2": true,
2175
+ "hidden sm:block fixed text-sm z-[9999] w-52 max-h-64 overflow-y-auto border border-line-secondary bg-white dark:bg-charcoal-800 shadow-md rounded-md pt-3 pb-2": true,
2176
2176
  "pointer-events-none opacity-0": !show,
2177
2177
  "opacity-100": show
2178
2178
  }),
@@ -2207,7 +2207,7 @@ function PopoverCard({
2207
2207
  "div",
2208
2208
  {
2209
2209
  className: classNames({
2210
- "hidden sm:block fixed z-[9999] rotate-45 w-4 h-4 overflow-y-auto border-gray-100 bg-white dark:bg-charcoal-700 dark:border-charcoal-800": true,
2210
+ "hidden sm:block fixed z-[9999] rotate-45 w-4 h-4 overflow-y-auto border-line-secondary bg-white dark:bg-charcoal-700": true,
2211
2211
  "border-t border-l": !stickyTop,
2212
2212
  "border-b border-r": stickyTop,
2213
2213
  "pointer-events-none opacity-0": !show,
@@ -2981,13 +2981,13 @@ function ExcelTable({
2981
2981
  });
2982
2982
  onChange && onChange(newData);
2983
2983
  };
2984
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-gray-200 dark:border-charcoal-600 rounded-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse bg-white dark:bg-charcoal-900", children: [
2984
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-line-secondary rounded-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse bg-white dark:bg-charcoal-900", children: [
2985
2985
  /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
2986
2986
  columns.map((col, idx) => /* @__PURE__ */ jsxRuntime.jsx(
2987
2987
  "th",
2988
2988
  {
2989
2989
  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-content-secondary": true,
2990
+ "border-b border-r border-line-secondary bg-gray-50 dark:bg-charcoal-800 px-3 py-2 text-xs font-semibold text-content-secondary": true,
2991
2991
  "w-auto": !col.width,
2992
2992
  [col.width || ""]: !!col.width,
2993
2993
  "text-left": !col.align,
@@ -2998,14 +2998,14 @@ function ExcelTable({
2998
2998
  },
2999
2999
  col.id || idx
3000
3000
  )),
3001
- /* @__PURE__ */ jsxRuntime.jsx("th", { className: "border-b border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 w-8" })
3001
+ /* @__PURE__ */ jsxRuntime.jsx("th", { className: "border-b border-line-secondary bg-gray-50 dark:bg-charcoal-800 w-8" })
3002
3002
  ] }) }),
3003
3003
  /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
3004
3004
  data.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "group", children: [
3005
3005
  columns.map((col, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(
3006
3006
  "td",
3007
3007
  {
3008
- className: "border-b border-r border-gray-200 dark:border-charcoal-600 p-0 relative align-top h-auto",
3008
+ className: "border-b border-r border-line-secondary p-0 relative align-top h-auto",
3009
3009
  children: col.type === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
3010
3010
  "textarea",
3011
3011
  {
@@ -3059,7 +3059,7 @@ function ExcelTable({
3059
3059
  },
3060
3060
  col.id || colIdx
3061
3061
  )),
3062
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border-b border-gray-200 dark:border-charcoal-600 p-0 text-center align-top h-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
3062
+ /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border-b border-line-secondary p-0 text-center align-top h-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
3063
3063
  "div",
3064
3064
  {
3065
3065
  onClick: () => onRowDelete && onRowDelete(rowIdx),
@@ -3306,7 +3306,7 @@ function Coverflow({ images = [], onClose }) {
3306
3306
  onClick: () => scrollToIndex(idx),
3307
3307
  className: classNames({
3308
3308
  "relative w-14 h-14 flex-shrink-0 rounded-md overflow-hidden border transition-all duration-300 snap-center cursor-pointer": true,
3309
- "border-primary-500 opacity-100": visualIndex === idx,
3309
+ "border-line-focus opacity-100": visualIndex === idx,
3310
3310
  "border-transparent opacity-40 hover:opacity-80": visualIndex !== idx
3311
3311
  }),
3312
3312
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3496,9 +3496,9 @@ function DataTable({
3496
3496
  {
3497
3497
  colSpan: (descriptions || []).length === 0 ? 1 : 2,
3498
3498
  className: classNames({
3499
- "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 font-semibold uppercase": true,
3499
+ "border-t py-2.5 px-2 sm:px-3 font-semibold uppercase": true,
3500
3500
  "border-charcoal-500": !!darkMode,
3501
- "border-gray-100 bg-gray-50": !darkMode
3501
+ "border-line-secondary bg-gray-50": !darkMode
3502
3502
  }),
3503
3503
  children: "Total"
3504
3504
  }
@@ -3509,9 +3509,9 @@ function DataTable({
3509
3509
  "td",
3510
3510
  {
3511
3511
  className: classNames({
3512
- "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 text-center font-semibold": true,
3512
+ "border-t py-2.5 px-2 sm:px-3 text-center font-semibold": true,
3513
3513
  "bg-gray-50": !colors && !darkMode,
3514
- "border-gray-100": !darkMode,
3514
+ "border-line-secondary": !darkMode,
3515
3515
  "border-charcoal-500": !!darkMode
3516
3516
  }),
3517
3517
  style: colors && colors[dataIndex] ? {
@@ -3532,9 +3532,9 @@ function DataTable({
3532
3532
  "td",
3533
3533
  {
3534
3534
  className: classNames({
3535
- "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 text-center font-semibold": true,
3535
+ "border-t py-2.5 px-2 sm:px-3 text-center font-semibold": true,
3536
3536
  "bg-gray-50": !colors && !darkMode,
3537
- "border-gray-100": !darkMode,
3537
+ "border-line-secondary": !darkMode,
3538
3538
  "border-charcoal-500": !!darkMode
3539
3539
  }),
3540
3540
  style: colors && colors[dataIndex] ? {