@x-plat/design-system 0.4.6 → 0.5.1

package/dist/components/CheckBox/index.cjs

@@ -24,6 +24,9 @@ __export(CheckBox_exports, {
 });
 module.exports = __toCommonJS(CheckBox_exports);
 
+// src/tokens/colors.ts
+var import_tokens_core = require("@x-plat/tokens-core");
+
 // src/tokens/svg/action/CopyIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 
@@ -405,10 +408,10 @@ var import_jsx_runtime126 = require("react/jsx-runtime");
 // src/tokens/svg/file/BookIcon.tsx
 var import_jsx_runtime127 = require("react/jsx-runtime");
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 var import_jsx_runtime128 = require("react/jsx-runtime");
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 var import_jsx_runtime129 = require("react/jsx-runtime");
 
 // src/tokens/svg/file/ClipboardIcon.tsx
@@ -882,10 +885,10 @@ var import_jsx_runtime279 = require("react/jsx-runtime");
 // src/tokens/svg/user/UserPlusIcon.tsx
 var import_jsx_runtime280 = require("react/jsx-runtime");
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 var import_jsx_runtime281 = require("react/jsx-runtime");
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx
@@ -924,6 +927,9 @@ var import_jsx_runtime293 = require("react/jsx-runtime");
 // src/tokens/svg/weather/WindIcon.tsx
 var import_jsx_runtime294 = require("react/jsx-runtime");
 
+// src/tokens/index.ts
+var import_tokens_core2 = require("@x-plat/tokens-core");
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -944,23 +950,22 @@ var clsx_default = clsx;
 var import_jsx_runtime295 = require("react/jsx-runtime");
 var CheckBox = (props) => {
   const {
-    color = "xplat-blue-500",
     checked,
     label,
     onChange,
     disabled,
     size = "md",
+    type = "brand",
     ...rest
   } = props;
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = color;
   const uncheckedClasses = `unchecked`;
-  const checkedClasses = `checked ${mainColor}`;
+  const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
     /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
       "input",
       {

package/dist/components/CheckBox/index.css

@@ -2,7 +2,7 @@
 .lib-xplat-checkbox {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
   cursor: pointer;
   user-select: none;
   width: fit-content;
@@ -12,43 +12,30 @@
   pointer-events: none;
 }
 .lib-xplat-checkbox.sm > .checkbox {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-checkbox.md > .checkbox {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--spacing-space-5);
+  height: var(--spacing-space-5);
 }
 .lib-xplat-checkbox.lg > .checkbox {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-checkbox.sm > .label {
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 .lib-xplat-checkbox.lg > .label {
-  font-size: 1.125rem;
+  font-size: 18px;
 }
 .lib-xplat-checkbox > .checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
   transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
-.lib-xplat-checkbox > .checkbox.unchecked {
-  border: 1px solid var(--xplat-neutral-400);
-}
-.lib-xplat-checkbox:hover .lib-xplat-checkbox > .checkbox.unchecked {
-  border-color: var(--xplat-neutral-600);
-  background-color: var(--xplat-neutral-100);
-}
-.lib-xplat-checkbox > .checkbox.checked {
-  background-color: var(--ds-color);
-}
-.lib-xplat-checkbox > .checkbox.checked:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 15%);
-}
 .lib-xplat-checkbox > .checkbox .check-icon {
   display: flex;
   align-items: center;
@@ -61,14 +48,50 @@
   opacity: 1;
   transform: scale(1);
 }
+.lib-xplat-checkbox > .checkbox.unchecked {
+  border: 1px solid var(--semantic-border-strong);
+}
+.lib-xplat-checkbox:hover > .checkbox.unchecked {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-checkbox.brand > .checkbox.checked {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-checkbox.success > .checkbox.checked {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-checkbox.error > .checkbox.checked {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-checkbox.warning > .checkbox.checked {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-checkbox.info > .checkbox.checked {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-checkbox:hover.brand > .checkbox.checked {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-checkbox:hover.success > .checkbox.checked {
+  background-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-checkbox:hover.error > .checkbox.checked {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-checkbox:hover.warning > .checkbox.checked {
+  background-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-checkbox:hover.info > .checkbox.checked {
+  background-color: var(--semantic-surface-info-strong);
+}
 .lib-xplat-checkbox > .checkbox.disabled {
   cursor: not-allowed;
-  background-color: var(--xplat-neutral-400) !important;
-  border-color: var(--xplat-neutral-400) !important;
+  background-color: var(--semantic-surface-neutral-disabled) !important;
+  border-color: var(--semantic-surface-neutral-disabled) !important;
 }
 .lib-xplat-checkbox > .label {
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   font-weight: 400;
   line-height: 1em;
-  padding-top: 0.05rem;
+  padding-top: 1px;
 }

package/dist/components/CheckBox/index.d.cts

@@ -1,13 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";
-interface CheckBoxProps extends Omit<InputAttributes, "size" | "className">, ColorProps {
+type CheckBoxType = "brand" | "success" | "error" | "warning" | "info";
+interface CheckBoxProps extends Omit<InputAttributes, "size" | "className"> {
     label?: string;
     checked?: boolean;
     size?: CheckBoxSize;
+    type?: CheckBoxType;
 }
 declare const CheckBox: {
     (props: CheckBoxProps): react_jsx_runtime.JSX.Element;

package/dist/components/CheckBox/index.d.ts

@@ -1,13 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 import 'react';
 
 type CheckBoxSize = "sm" | "md" | "lg";
-interface CheckBoxProps extends Omit<InputAttributes, "size" | "className">, ColorProps {
+type CheckBoxType = "brand" | "success" | "error" | "warning" | "info";
+interface CheckBoxProps extends Omit<InputAttributes, "size" | "className"> {
     label?: string;
     checked?: boolean;
     size?: CheckBoxSize;
+    type?: CheckBoxType;
 }
 declare const CheckBox: {
     (props: CheckBoxProps): react_jsx_runtime.JSX.Element;

package/dist/components/CheckBox/index.js

@@ -1,3 +1,6 @@
+// src/tokens/colors.ts
+import { primitive, semantic } from "@x-plat/tokens-core";
+
 // src/tokens/svg/action/CopyIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -379,10 +382,10 @@ import { jsx as jsx126, jsxs as jsxs72 } from "react/jsx-runtime";
 // src/tokens/svg/file/BookIcon.tsx
 import { jsx as jsx127 } from "react/jsx-runtime";
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 import { jsx as jsx128 } from "react/jsx-runtime";
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 import { jsx as jsx129 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/ClipboardIcon.tsx
@@ -856,10 +859,10 @@ import { jsx as jsx279, jsxs as jsxs177 } from "react/jsx-runtime";
 // src/tokens/svg/user/UserPlusIcon.tsx
 import { jsx as jsx280, jsxs as jsxs178 } from "react/jsx-runtime";
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 import { jsx as jsx281, jsxs as jsxs179 } from "react/jsx-runtime";
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 import { jsx as jsx282, jsxs as jsxs180 } from "react/jsx-runtime";
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx
@@ -898,6 +901,9 @@ import { jsx as jsx293, jsxs as jsxs187 } from "react/jsx-runtime";
 // src/tokens/svg/weather/WindIcon.tsx
 import { jsx as jsx294, jsxs as jsxs188 } from "react/jsx-runtime";
 
+// src/tokens/index.ts
+import { cssVar } from "@x-plat/tokens-core";
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -918,23 +924,22 @@ var clsx_default = clsx;
 import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
 var CheckBox = (props) => {
   const {
-    color = "xplat-blue-500",
     checked,
     label,
     onChange,
     disabled,
     size = "md",
+    type = "brand",
     ...rest
   } = props;
   const handleChange = (e) => {
     if (onChange) onChange(e);
   };
-  const mainColor = color;
   const uncheckedClasses = `unchecked`;
-  const checkedClasses = `checked ${mainColor}`;
+  const checkedClasses = `checked`;
   const disabledClasses = "disabled";
   const boxClasses = disabled ? disabledClasses : checked ? checkedClasses : uncheckedClasses;
-  return /* @__PURE__ */ jsxs189("label", { className: clsx_default("lib-xplat-checkbox", size), children: [
+  return /* @__PURE__ */ jsxs189("label", { className: clsx_default("lib-xplat-checkbox", size, type), children: [
     /* @__PURE__ */ jsx295(
       "input",
       {

package/dist/components/Chip/index.cjs

@@ -45,12 +45,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Chip = (props) => {
   const {
     children,
-    color = "xplat-black",
     type = "primary",
     size = "md"
   } = props;
-  const colorClass = color;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size, colorClass), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;

package/dist/components/Chip/index.css

@@ -1,39 +1,51 @@
 /* src/components/Chip/chip.scss */
 .lib-xplat-chip {
-  border-radius: 10rem;
+  border-radius: var(--spacing-radius-full);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-chip.sm {
-  padding: 0.0625rem 0.5rem;
+  padding: 1px var(--spacing-space-2);
   font-size: 12px;
 }
 .lib-xplat-chip.md {
-  padding: 0.125rem 0.75rem;
+  padding: 2px var(--spacing-space-3);
   font-size: 14px;
 }
 .lib-xplat-chip.lg {
-  padding: 0.25rem 1rem;
+  padding: var(--spacing-space-1) var(--spacing-space-4);
   font-size: 16px;
 }
-.lib-xplat-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
 .lib-xplat-chip.primary {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
-}
-.lib-xplat-chip.primary:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 12%);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-chip.secondary {
-  background-color: var(--xplat-white);
-  border: 1px solid;
-  color: var(--ds-color);
-  border-color: var(--ds-color);
-}
-.lib-xplat-chip.secondary:hover {
-  background-color: color-mix(in srgb, var(--ds-color) 12%, white);
+  color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-neutral-default);
+  border: 1px solid var(--semantic-border-default);
+}
+.lib-xplat-chip.neutral {
+  color: var(--semantic-text-subtle);
+  background-color: var(--semantic-surface-neutral-subtle);
+  border: 1px solid var(--semantic-border-default);
+}
+.lib-xplat-chip.success {
+  color: var(--semantic-text-success);
+  background-color: var(--semantic-surface-success-subtle);
+}
+.lib-xplat-chip.error {
+  color: var(--semantic-text-error);
+  background-color: var(--semantic-surface-error-subtle);
+}
+.lib-xplat-chip.warning {
+  color: var(--semantic-text-warning);
+  background-color: var(--semantic-surface-warning-subtle);
+}
+.lib-xplat-chip.info {
+  color: var(--semantic-text-info);
+  background-color: var(--semantic-surface-info-subtle);
 }

package/dist/components/Chip/index.d.cts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
-type ChipType = "primary" | "secondary";
+type ChipType = "primary" | "secondary" | "neutral" | "success" | "error" | "warning" | "info";
 type ChipSize = "sm" | "md" | "lg";
-interface ChipProps extends ColorProps {
+interface ChipProps {
     children: React.ReactNode;
     type?: ChipType;
     size?: ChipSize;

package/dist/components/Chip/index.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
-type ChipType = "primary" | "secondary";
+type ChipType = "primary" | "secondary" | "neutral" | "success" | "error" | "warning" | "info";
 type ChipSize = "sm" | "md" | "lg";
-interface ChipProps extends ColorProps {
+interface ChipProps {
     children: React.ReactNode;
     type?: ChipType;
     size?: ChipSize;

package/dist/components/Chip/index.js

@@ -19,12 +19,10 @@ import { jsx } from "react/jsx-runtime";
 var Chip = (props) => {
   const {
     children,
-    color = "xplat-black",
     type = "primary",
     size = "md"
   } = props;
-  const colorClass = color;
-  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-chip", type, size, colorClass), children });
+  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-chip", type, size), children });
 };
 Chip.displayName = "Chip";
 var Chip_default = Chip;

package/dist/components/DatePicker/index.cjs

@@ -408,6 +408,31 @@ var PasswordInput = import_react3.default.forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 
+// src/tokens/hooks/useClickOutside.ts
+var import_react4 = __toESM(require("react"), 1);
+var useClickOutside = (refs, handler, enabled = true) => {
+  import_react4.default.useEffect(() => {
+    if (!enabled) return;
+    const refArray = Array.isArray(refs) ? refs : [refs];
+    const listener = (event) => {
+      const target = event.target;
+      const isInside = refArray.some(
+        (ref) => ref.current && ref.current.contains(target)
+      );
+      if (!isInside) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler, enabled]);
+};
+var useClickOutside_default = useClickOutside;
+
 // src/tokens/svg/action/CopyIcon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 
@@ -833,10 +858,10 @@ var import_jsx_runtime134 = require("react/jsx-runtime");
 // src/tokens/svg/file/BookIcon.tsx
 var import_jsx_runtime135 = require("react/jsx-runtime");
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 var import_jsx_runtime136 = require("react/jsx-runtime");
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 var import_jsx_runtime137 = require("react/jsx-runtime");
 
 // src/tokens/svg/file/ClipboardIcon.tsx
@@ -1277,10 +1302,10 @@ var import_jsx_runtime282 = require("react/jsx-runtime");
 // src/tokens/svg/user/UserPlusIcon.tsx
 var import_jsx_runtime283 = require("react/jsx-runtime");
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 var import_jsx_runtime284 = require("react/jsx-runtime");
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 var import_jsx_runtime285 = require("react/jsx-runtime");
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx
@@ -1319,37 +1344,12 @@ var import_jsx_runtime296 = require("react/jsx-runtime");
 // src/tokens/svg/weather/WindIcon.tsx
 var import_jsx_runtime297 = require("react/jsx-runtime");
 
-// src/tokens/hooks/useClickOutside.ts
-var import_react4 = __toESM(require("react"), 1);
-var useClickOutside = (refs, handler, enabled = true) => {
-  import_react4.default.useEffect(() => {
-    if (!enabled) return;
-    const refArray = Array.isArray(refs) ? refs : [refs];
-    const listener = (event) => {
-      const target = event.target;
-      const isInside = refArray.some(
-        (ref) => ref.current && ref.current.contains(target)
-      );
-      if (!isInside) {
-        handler();
-      }
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [refs, handler, enabled]);
-};
-var useClickOutside_default = useClickOutside;
-
 // src/components/DatePicker/SingleDatePicker/index.tsx
 var import_react6 = __toESM(require("react"), 1);
 
 // src/components/Calendar/useCalendar.ts
 var import_react5 = __toESM(require("react"), 1);
-function useCalendar(initialYear, initialMonth) {
+var useCalendar = (initialYear, initialMonth) => {
   const today = /* @__PURE__ */ new Date();
   const [year, setYear] = import_react5.default.useState(initialYear ?? today.getFullYear());
   const [month, setMonth] = import_react5.default.useState(initialMonth ?? today.getMonth());
@@ -1428,16 +1428,16 @@ function useCalendar(initialYear, initialMonth) {
     setYear,
     setMonth
   };
-}
-function isSameDay(a, b) {
+};
+var isSameDay = (a, b) => {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function isInRange(date, start, end) {
+};
+var isInRange = (date, start, end) => {
   const d = date.getTime();
   const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime();
   const e = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime();
   return d >= s && d <= e;
-}
+};
 var WEEKDAY_LABELS = {
   ko: ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"],
   en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
@@ -1484,7 +1484,6 @@ var SingleDatePicker = (props) => {
   const {
     value,
     onChange,
-    color = "xplat-blue-500",
     minDate,
     maxDate,
     highlightDates = [],
@@ -1553,7 +1552,6 @@ var SingleDatePicker = (props) => {
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
-      style: { "--datepicker-active-color": `var(--${color})` },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: "datepicker-header", children: [
           /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(ChevronLeftIcon_default, {}) }),
@@ -1677,15 +1675,13 @@ var Button = (props) => {
     children,
     type = "primary",
     size = "md",
-    color = "xplat-black",
     disabled,
     ...rest
   } = props;
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size, colorClass),
+      className: clsx_default("lib-xplat-button", type, size),
       disabled,
       ...rest,
       children
@@ -1749,7 +1745,6 @@ var RangePicker = (props) => {
     startDate,
     endDate,
     onChange,
-    color = "xplat-blue-500",
     minDate,
     maxDate,
     locale = "ko"
@@ -1857,9 +1852,6 @@ var RangePicker = (props) => {
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "range"),
-      style: {
-        "--datepicker-active-color": `var(--${color})`
-      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "datepicker-range-tabs", children: [
           /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
@@ -1936,12 +1928,11 @@ var PopupPicker = (props) => {
           Button_default,
           {
             type: "secondary",
-            color: "xplat-neutral-400",
             onClick: handleClose,
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(Button_default, { type: "primary", color: "xplat-blue-500", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+        /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });