@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.mjs CHANGED
@@ -49,11 +49,11 @@ function Button({
49
49
  "border bg-brown-500 border-transparent text-white": variant === "primary" && !darkMode,
50
50
  "dark:bg-primary-500 dark:hover:bg-primary-600 dark:text-black": variant === "primary" && !darkMode,
51
51
  "border bg-primary-500 hover:bg-primary-600 border-transparent text-black": variant === "primary" && !!darkMode,
52
- "text-content-primary bg-white border border-gray-300 hover:text-content-secondary": variant === "secondary" && !darkMode,
53
- "text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "secondary" && !!darkMode,
54
- "!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,
55
- "!rounded-md text-left w-full text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "form-input" && !!darkMode,
56
- "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-content-primary dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
52
+ "text-content-primary bg-white border border-line-secondary hover:text-content-secondary": variant === "secondary" && !darkMode,
53
+ "text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-line-secondary": variant === "secondary" && !!darkMode,
54
+ "!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,
55
+ "!rounded-md text-left w-full text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-line-secondary": variant === "form-input" && !!darkMode,
56
+ "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-content-primary": (variant === "secondary" || variant === "form-input") && !darkMode,
57
57
  "hover:text-brown-500 !shadow-none": variant === "flat" && !darkMode,
58
58
  "dark:text-content-primary dark:hover:text-primary-500": variant === "flat" && !darkMode,
59
59
  "text-charcoal-100 hover:text-primary-500 !shadow-none": variant === "flat" && !!darkMode,
@@ -245,7 +245,7 @@ function Loading({
245
245
  className: classNames({
246
246
  [spinClassName]: true,
247
247
  [spinSizeClassName]: true,
248
- "relative border-8 border-gray-500 rounded-full animate-spin": true
248
+ "relative border-8 border-line-secondary rounded-full animate-spin": true
249
249
  }),
250
250
  children: /* @__PURE__ */ 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" })
251
251
  }
@@ -279,7 +279,7 @@ function CheckboxList({
279
279
  }
280
280
  return placeholder;
281
281
  };
282
- return /* @__PURE__ */ 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__ */ jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-gray-100 dark:divide-charcoal-700", children: loading && !hasLoadedRef.current ? /* @__PURE__ */ jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsx(Fragment, { children: items.length > 0 ? items.map((item, index) => {
282
+ return /* @__PURE__ */ jsx("div", { className: "w-full border border-line-secondary rounded-lg shadow-sm bg-white dark:bg-charcoal-800 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-y-auto divide-y divide-line-secondary", children: loading && !hasLoadedRef.current ? /* @__PURE__ */ jsx("div", { className: "p-4 flex items-center justify-center min-h-36", children: /* @__PURE__ */ jsx(Loading, { spinSizeClassName: "w-6 h-6", className: "inline-block" }) }) : /* @__PURE__ */ jsx(Fragment, { children: items.length > 0 ? items.map((item, index) => {
283
283
  const finalKey = getFinalKey(item, index);
284
284
  const label = typeof itemLabel === "function" ? itemLabel(item) : item[itemLabel];
285
285
  const checked = typeof isChecked === "function" ? isChecked(item, selected) : selected.some(
@@ -300,8 +300,8 @@ function CheckboxList({
300
300
  {
301
301
  className: classNames({
302
302
  "w-5 h-5 rounded border flex items-center justify-center transition-colors cursor-pointer": true,
303
- "border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-700": !checked,
304
- "border-brown-500 bg-brown-500 dark:bg-primary-500 dark:border-primary-500 text-content-primary-button": checked
303
+ "border-line-secondary bg-white dark:bg-charcoal-700": !checked,
304
+ "border-line-focus bg-brown-500 dark:bg-primary-500 text-content-primary-button": checked
305
305
  }),
306
306
  children: checked && /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ 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" }) })
307
307
  }
@@ -525,8 +525,8 @@ function ModalFooter({
525
525
  "div",
526
526
  {
527
527
  className: classNames({
528
- "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,
529
- "!bg-charcoal-700 !border-t-charcoal-600": !!darkMode
528
+ "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,
529
+ "!bg-charcoal-700": !!darkMode
530
530
  }),
531
531
  children: footer
532
532
  }
@@ -689,7 +689,7 @@ function Modal({
689
689
  {
690
690
  className: classNames({
691
691
  "flex items-center justify-between px-3 pt-3 pb-2 space-x-2 sm:px-5 sm:pt-6 sm:pb-3": true,
692
- "sm:border-b sm:border-gray-200 dark:sm:border-charcoal-700 sm:shadow-sm": !!sidebar
692
+ "sm:border-b sm:border-line-secondary sm:shadow-sm": !!sidebar
693
693
  }),
694
694
  children: [
695
695
  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
@@ -707,7 +707,7 @@ function Modal({
707
707
  className: classNames({
708
708
  "pb-3 max-h-full overflow-y-auto": true,
709
709
  "h-[100dvh] lg:h-auto": fullscreen || size === "full",
710
- "sm:pt-4 sm:relative border-b border-gray-200 dark:border-charcoal-700": !!sidebar,
710
+ "sm:pt-4 sm:relative border-b border-line-secondary": !!sidebar,
711
711
  "sm:pr-80": !!sidebar && sidebarPosition === "right",
712
712
  "sm:pl-80": !!sidebar && sidebarPosition === "left"
713
713
  }),
@@ -717,9 +717,9 @@ function Modal({
717
717
  {
718
718
  className: classNames({
719
719
  "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,
720
- "sm:right-0 sm:border-l sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "right",
721
- "sm:left-0 sm:border-r sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "left",
722
- "pb-6 mb-6 border-b border-gray-200 dark:border-charcoal-700 sm:border-b-0 sm:pb-0 sm:mb-0": true
720
+ "sm:right-0 sm:border-l sm:border-line-secondary": sidebarPosition === "right",
721
+ "sm:left-0 sm:border-r sm:border-line-secondary": sidebarPosition === "left",
722
+ "pb-6 mb-6 border-b border-line-secondary sm:border-b-0 sm:pb-0 sm:mb-0": true
723
723
  }),
724
724
  children: sidebar
725
725
  }
@@ -730,9 +730,9 @@ function Modal({
730
730
  {
731
731
  className: classNames({
732
732
  "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,
733
- "sm:right-0 sm:border-l sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "right",
734
- "sm:left-0 sm:border-r sm:border-gray-200 dark:sm:border-charcoal-700": sidebarPosition === "left",
735
- "pt-6 mt-6 border-t border-gray-200 dark:border-charcoal-700 sm:border-t-0 sm:mt-0": true
733
+ "sm:right-0 sm:border-l sm:border-line-secondary": sidebarPosition === "right",
734
+ "sm:left-0 sm:border-r sm:border-line-secondary": sidebarPosition === "left",
735
+ "pt-6 mt-6 border-t border-line-secondary sm:border-t-0 sm:mt-0": true
736
736
  }),
737
737
  children: sidebar
738
738
  }
@@ -888,7 +888,7 @@ function Drawer({
888
888
  "bg-primary-100 dark:bg-primary-900": !theme && (!level || level === "base" || level === "extra-wide" || level === "full"),
889
889
  "bg-primary-200 dark:bg-primary-900": !theme && level === "middle",
890
890
  "bg-primary-300 dark:bg-primary-900": !theme && level === "top",
891
- "bg-primary-50 dark:bg-primary-900 border-b border-primary-100": !theme && level === "ceil",
891
+ "bg-primary-50 dark:bg-primary-900 border-b border-line-primary": !theme && level === "ceil",
892
892
  "bg-white": theme === "WHITE",
893
893
  "bg-black": theme === "BLACK",
894
894
  "bg-red-500": theme === "RED",
@@ -921,7 +921,7 @@ function Drawer({
921
921
  }
922
922
  ),
923
923
  /* @__PURE__ */ jsx("div", { className: "py-3 flex-1 flex flex-col justify-between overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6", children }) }),
924
- !!footer && /* @__PURE__ */ 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 })
924
+ !!footer && /* @__PURE__ */ jsx("div", { className: "sm:border-t sm:border-line-secondary py-2.5 sm:py-4 px-4 sm:px-6", children: footer })
925
925
  ] })
926
926
  }
927
927
  )
@@ -1013,7 +1013,7 @@ function InlinePrompt({
1013
1013
  "div",
1014
1014
  {
1015
1015
  ref: nodeWindow,
1016
- className: "absolute top-0 left-0 min-w-full border border-gray-200 rounded-md bg-gray-50 flex justify-center z-20",
1016
+ className: "absolute top-0 left-0 min-w-full border border-line-secondary rounded-md bg-gray-50 flex justify-center z-20",
1017
1017
  children: [
1018
1018
  /* @__PURE__ */ jsxs("a", { onClick: handleConfirm, className: "inline-flex items-center cursor-pointer m-1 text-sm text-green-500", children: [
1019
1019
  /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: "text-green-500 w-6 h-6", children: /* @__PURE__ */ jsx(
@@ -1118,7 +1118,7 @@ function TabItemComponent({
1118
1118
  href: item.link,
1119
1119
  className: classNames({
1120
1120
  "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,
1121
- "border-primary-500 text-primary-500 focus:border-primary-500 focus:text-primary-500": isActive,
1121
+ "border-line-focus text-primary-500 focus:border-line-focus focus:text-primary-500": isActive,
1122
1122
  "text-cool-gray-500 hover:text-cool-gray-700 focus:text-cool-gray-700 border-transparent hover:border-transparent focus:border-transparent": !isActive
1123
1123
  }),
1124
1124
  onClick: handleTabSelect,
@@ -1149,7 +1149,7 @@ function Tab({
1149
1149
  setSelected(item && item.id || null);
1150
1150
  }
1151
1151
  return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex w-full items-stretch pb-1 sm:pb-2", children: [
1152
- /* @__PURE__ */ jsx("nav", { className: "border-cool-gray-200 -mb-px flex w-full items-end border-b", children: items.map((item) => /* @__PURE__ */ jsx(
1152
+ /* @__PURE__ */ jsx("nav", { className: "border-line-secondary -mb-px flex w-full items-end border-b", children: items.map((item) => /* @__PURE__ */ jsx(
1153
1153
  TabItemComponent,
1154
1154
  {
1155
1155
  item,
@@ -1161,7 +1161,7 @@ function Tab({
1161
1161
  },
1162
1162
  item.id
1163
1163
  )) }),
1164
- rightContent && /* @__PURE__ */ jsx("nav", { className: "border-cool-gray-200 -mb-px flex flex flex-shrink-0 items-center border-b px-4", children: rightContent })
1164
+ rightContent && /* @__PURE__ */ jsx("nav", { className: "border-line-secondary -mb-px flex flex flex-shrink-0 items-center border-b px-4", children: rightContent })
1165
1165
  ] });
1166
1166
  }
1167
1167
  function DefaultLink3({ href, children }) {
@@ -1195,7 +1195,7 @@ function ButtonItem({
1195
1195
  "p-3 rounded-xl mx-auto flex justify-center cursor-pointer": true,
1196
1196
  "w-full": direction === "vertical",
1197
1197
  "w-full overflow-hidden": direction === "horizontal",
1198
- "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,
1198
+ "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,
1199
1199
  ...classNameObject(className)
1200
1200
  }),
1201
1201
  children: /* @__PURE__ */ jsxs(
@@ -1403,7 +1403,7 @@ function Table({ children, className }) {
1403
1403
  "flex flex-col relative": true,
1404
1404
  "sm:px-0 lg:px-8": !className || !className.includes("px-")
1405
1405
  }),
1406
- children: /* @__PURE__ */ 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__ */ jsx("div", { className: "align-middle inline-block min-w-full shadow overflow-hidden rounded-lg border-b border-t border-gray-200", children: /* @__PURE__ */ jsx("table", { className: "min-w-full", children }) }) })
1406
+ children: /* @__PURE__ */ 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__ */ jsx("div", { className: "align-middle inline-block min-w-full shadow overflow-hidden rounded-lg border-b border-t border-line-secondary", children: /* @__PURE__ */ jsx("table", { className: "min-w-full", children }) }) })
1407
1407
  }
1408
1408
  );
1409
1409
  }
@@ -1420,7 +1420,7 @@ function Th({ condensed, className, children, sticky, ...opts }) {
1420
1420
  className: classNames({
1421
1421
  ...classNameObject(className),
1422
1422
  "sticky z-10 top-0": !!sticky,
1423
- "border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-content-secondary uppercase tracking-wider": true,
1423
+ "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,
1424
1424
  "px-6": !condensed,
1425
1425
  "py-4": !condensed && (!className || !className.includes("py-")),
1426
1426
  "px-2.5": !!condensed,
@@ -1432,7 +1432,7 @@ function Th({ condensed, className, children, sticky, ...opts }) {
1432
1432
  );
1433
1433
  }
1434
1434
  function Tbody({ children }) {
1435
- return /* @__PURE__ */ jsx("tbody", { className: "bg-white", children });
1435
+ return /* @__PURE__ */ jsx("tbody", { className: "bg-white dark:bg-black", children });
1436
1436
  }
1437
1437
  function Td({ className, align, colSpan, condensed, narrow, children }) {
1438
1438
  return /* @__PURE__ */ jsx(
@@ -1442,7 +1442,7 @@ function Td({ className, align, colSpan, condensed, narrow, children }) {
1442
1442
  colSpan,
1443
1443
  className: classNames({
1444
1444
  ...classNameObject(className),
1445
- "whitespace-no-wrap border-b border-gray-200": true,
1445
+ "whitespace-no-wrap border-b border-line-secondary": true,
1446
1446
  "px-6": !condensed && !narrow,
1447
1447
  "py-4": !condensed && !narrow && (!className || !className.includes("py-")),
1448
1448
  "px-2": !!condensed,
@@ -1549,18 +1549,18 @@ var Input = forwardRef((props, ref) => {
1549
1549
  id,
1550
1550
  className: classNames({
1551
1551
  ...classNameObject(className),
1552
- "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,
1553
- "!text-white !border-charcoal-400 !placeholder-charcoal-400 focus:!text-primary-500 focus:!border-primary-500 focus:!ring-primary-500": !!darkMode,
1552
+ "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,
1553
+ "!text-white !border-line-secondary !placeholder-content-placeholder focus:!text-primary-500 focus:!border-line-focus focus:!ring-focus": !!darkMode,
1554
1554
  "h-11": !className || !className.includes("h-"),
1555
1555
  "text-sm": type !== "tel",
1556
1556
  "text-lg": type === "tel",
1557
1557
  "rounded-lg": type !== "radio",
1558
1558
  "rounded-full": type === "radio",
1559
- "border border-gray-200 dark:border-charcoal-700 shadow-sm text-black": !noBorder && !readOnly && type !== "radio",
1560
- "border border-opacity-20 bg-gray-100 cursor-not-allowed": readOnly,
1559
+ "border border-line-secondary shadow-sm text-black": !noBorder && !readOnly && type !== "radio",
1560
+ "border border-line-disabled bg-gray-100 dark:!bg-charcoal-700 cursor-not-allowed": readOnly,
1561
1561
  "border-transparent": !!noBorder,
1562
- "border-red-300 text-red-900 placeholder-red-100 focus:placeholder-red-100 focus:border-red-500 focus:ring-red-300": error,
1563
- "focus:ring-primary-500": !error && type !== "radio",
1562
+ "!border-line-error !text-red-500 !placeholder-red-500 focus:!placeholder-red-500 focus:border-line-error focus:ring-red-300": error,
1563
+ "focus:ring-focus": !error && type !== "radio",
1564
1564
  "focus:ring-transparent": type === "radio",
1565
1565
  "w-full": type !== "radio" && (!className || className.includes("w-full") || !className.includes("w-")),
1566
1566
  "sm:leading-normal": !className || !className.includes("leading-"),
@@ -1688,7 +1688,7 @@ var Select = forwardRef((props, ref) => {
1688
1688
  value
1689
1689
  } = props;
1690
1690
  return /* @__PURE__ */ jsxs(Fragment, { children: [
1691
- !loading && /* @__PURE__ */ jsx("div", { className: "rounded-md shadow-sm border border-gray-200", children: /* @__PURE__ */ jsx(
1691
+ !loading && /* @__PURE__ */ jsx("div", { className: "rounded-md shadow-sm border border-line-secondary", children: /* @__PURE__ */ jsx(
1692
1692
  "select",
1693
1693
  {
1694
1694
  id,
@@ -1696,7 +1696,7 @@ var Select = forwardRef((props, ref) => {
1696
1696
  className: classNames({
1697
1697
  ...classNameObject(className),
1698
1698
  ...classNameObject(
1699
- `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" : ""}`
1699
+ `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" : ""}`
1700
1700
  )
1701
1701
  }),
1702
1702
  ref,
@@ -1737,9 +1737,9 @@ var SelectInput = forwardRef((props, ref) => {
1737
1737
  value: selectedValue || "",
1738
1738
  disabled: readOnly,
1739
1739
  className: classNames({
1740
- "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,
1740
+ "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,
1741
1741
  "cursor-not-allowed border bg-gray-100": readOnly,
1742
- "border-red-300 text-red-900 placeholder-red-100 focus:placeholder-red-100 focus:border-red-500 focus:ring-red-300": error
1742
+ "border-line-error text-red-900 placeholder-red-100 focus:placeholder-red-100 focus:border-line-error focus:ring-red-300": error
1743
1743
  }),
1744
1744
  children: [
1745
1745
  /* @__PURE__ */ jsx("option", { value: "", children: placeholder }, ""),
@@ -1780,10 +1780,10 @@ var Textarea = forwardRef((props, ref) => {
1780
1780
  placeholder,
1781
1781
  className: classNames({
1782
1782
  ...classNameObject(className),
1783
- "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,
1784
- "focus:ring-white dark:focus:ring-1 dark:focus:border-primary-600 dark:focus:ring-primary-500": !error,
1785
- "focus:outline-none focus:ring-0 focus:ring-offset-0 dark:focus:border-primary-500": true,
1786
- "border-red-300 text-red-900 placeholder-red-300 dark:placeholder-red-600 focus:border-red-300 focus:shadow-outline-red": error
1783
+ "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,
1784
+ "focus:border-line-focus focus:ring-focus": !error,
1785
+ "focus:outline-none": true,
1786
+ "border-line-error text-red-900 placeholder-red-300 focus:border-line-error focus:ring-red-300": error
1787
1787
  }),
1788
1788
  name,
1789
1789
  ref,
@@ -1863,7 +1863,7 @@ function TagInput({
1863
1863
  onChange(newTags);
1864
1864
  }
1865
1865
  }
1866
- return /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full flex-wrap px-2 pt-2 pb-1 border border-gray-300 rounded-md", children: [
1866
+ return /* @__PURE__ */ 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: [
1867
1867
  tags.map((tag, index) => /* @__PURE__ */ jsxs(
1868
1868
  "span",
1869
1869
  {
@@ -2166,7 +2166,7 @@ function PopoverCard({
2166
2166
  "div",
2167
2167
  {
2168
2168
  className: classNames({
2169
- "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,
2169
+ "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,
2170
2170
  "pointer-events-none opacity-0": !show,
2171
2171
  "opacity-100": show
2172
2172
  }),
@@ -2201,7 +2201,7 @@ function PopoverCard({
2201
2201
  "div",
2202
2202
  {
2203
2203
  className: classNames({
2204
- "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,
2204
+ "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,
2205
2205
  "border-t border-l": !stickyTop,
2206
2206
  "border-b border-r": stickyTop,
2207
2207
  "pointer-events-none opacity-0": !show,
@@ -2975,13 +2975,13 @@ function ExcelTable({
2975
2975
  });
2976
2976
  onChange && onChange(newData);
2977
2977
  };
2978
- return /* @__PURE__ */ jsx("div", { className: "border border-gray-200 dark:border-charcoal-600 rounded-sm overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse bg-white dark:bg-charcoal-900", children: [
2978
+ return /* @__PURE__ */ jsx("div", { className: "border border-line-secondary rounded-sm overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse bg-white dark:bg-charcoal-900", children: [
2979
2979
  /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
2980
2980
  columns.map((col, idx) => /* @__PURE__ */ jsx(
2981
2981
  "th",
2982
2982
  {
2983
2983
  className: classNames({
2984
- "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,
2984
+ "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,
2985
2985
  "w-auto": !col.width,
2986
2986
  [col.width || ""]: !!col.width,
2987
2987
  "text-left": !col.align,
@@ -2992,14 +2992,14 @@ function ExcelTable({
2992
2992
  },
2993
2993
  col.id || idx
2994
2994
  )),
2995
- /* @__PURE__ */ jsx("th", { className: "border-b border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 w-8" })
2995
+ /* @__PURE__ */ jsx("th", { className: "border-b border-line-secondary bg-gray-50 dark:bg-charcoal-800 w-8" })
2996
2996
  ] }) }),
2997
2997
  /* @__PURE__ */ jsxs("tbody", { children: [
2998
2998
  data.map((row, rowIdx) => /* @__PURE__ */ jsxs("tr", { className: "group", children: [
2999
2999
  columns.map((col, colIdx) => /* @__PURE__ */ jsx(
3000
3000
  "td",
3001
3001
  {
3002
- className: "border-b border-r border-gray-200 dark:border-charcoal-600 p-0 relative align-top h-auto",
3002
+ className: "border-b border-r border-line-secondary p-0 relative align-top h-auto",
3003
3003
  children: col.type === "textarea" ? /* @__PURE__ */ jsx(
3004
3004
  "textarea",
3005
3005
  {
@@ -3053,7 +3053,7 @@ function ExcelTable({
3053
3053
  },
3054
3054
  col.id || colIdx
3055
3055
  )),
3056
- /* @__PURE__ */ jsx("td", { className: "border-b border-gray-200 dark:border-charcoal-600 p-0 text-center align-top h-auto", children: /* @__PURE__ */ jsx(
3056
+ /* @__PURE__ */ jsx("td", { className: "border-b border-line-secondary p-0 text-center align-top h-auto", children: /* @__PURE__ */ jsx(
3057
3057
  "div",
3058
3058
  {
3059
3059
  onClick: () => onRowDelete && onRowDelete(rowIdx),
@@ -3300,7 +3300,7 @@ function Coverflow({ images = [], onClose }) {
3300
3300
  onClick: () => scrollToIndex(idx),
3301
3301
  className: classNames({
3302
3302
  "relative w-14 h-14 flex-shrink-0 rounded-md overflow-hidden border transition-all duration-300 snap-center cursor-pointer": true,
3303
- "border-primary-500 opacity-100": visualIndex === idx,
3303
+ "border-line-focus opacity-100": visualIndex === idx,
3304
3304
  "border-transparent opacity-40 hover:opacity-80": visualIndex !== idx
3305
3305
  }),
3306
3306
  children: /* @__PURE__ */ jsx(
@@ -3490,9 +3490,9 @@ function DataTable({
3490
3490
  {
3491
3491
  colSpan: (descriptions || []).length === 0 ? 1 : 2,
3492
3492
  className: classNames({
3493
- "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 font-semibold uppercase": true,
3493
+ "border-t py-2.5 px-2 sm:px-3 font-semibold uppercase": true,
3494
3494
  "border-charcoal-500": !!darkMode,
3495
- "border-gray-100 bg-gray-50": !darkMode
3495
+ "border-line-secondary bg-gray-50": !darkMode
3496
3496
  }),
3497
3497
  children: "Total"
3498
3498
  }
@@ -3503,9 +3503,9 @@ function DataTable({
3503
3503
  "td",
3504
3504
  {
3505
3505
  className: classNames({
3506
- "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 text-center font-semibold": true,
3506
+ "border-t py-2.5 px-2 sm:px-3 text-center font-semibold": true,
3507
3507
  "bg-gray-50": !colors && !darkMode,
3508
- "border-gray-100": !darkMode,
3508
+ "border-line-secondary": !darkMode,
3509
3509
  "border-charcoal-500": !!darkMode
3510
3510
  }),
3511
3511
  style: colors && colors[dataIndex] ? {
@@ -3526,9 +3526,9 @@ function DataTable({
3526
3526
  "td",
3527
3527
  {
3528
3528
  className: classNames({
3529
- "border-t dark:border-charcoal-500 py-2.5 px-2 sm:px-3 text-center font-semibold": true,
3529
+ "border-t py-2.5 px-2 sm:px-3 text-center font-semibold": true,
3530
3530
  "bg-gray-50": !colors && !darkMode,
3531
- "border-gray-100": !darkMode,
3531
+ "border-line-secondary": !darkMode,
3532
3532
  "border-charcoal-500": !!darkMode
3533
3533
  }),
3534
3534
  style: colors && colors[dataIndex] ? {