@x-plat/design-system 0.4.6 → 0.5.0

package/dist/components/DatePicker/index.js

@@ -369,6 +369,31 @@ var PasswordInput = React2.forwardRef(
 );
 PasswordInput.displayName = "PasswordInput";
 
+// src/tokens/hooks/useClickOutside.ts
+import React3 from "react";
+var useClickOutside = (refs, handler, enabled = true) => {
+  React3.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
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 
@@ -794,10 +819,10 @@ import { jsx as jsx134, jsxs as jsxs78 } from "react/jsx-runtime";
 // src/tokens/svg/file/BookIcon.tsx
 import { jsx as jsx135 } from "react/jsx-runtime";
 
-// src/tokens/svg/file/BookOpenIcon.tsx
+// src/tokens/svg/file/BookmarkIcon.tsx
 import { jsx as jsx136 } from "react/jsx-runtime";
 
-// src/tokens/svg/file/BookmarkIcon.tsx
+// src/tokens/svg/file/BookOpenIcon.tsx
 import { jsx as jsx137 } from "react/jsx-runtime";
 
 // src/tokens/svg/file/ClipboardIcon.tsx
@@ -1238,10 +1263,10 @@ import { jsx as jsx282, jsxs as jsxs179 } from "react/jsx-runtime";
 // src/tokens/svg/user/UserPlusIcon.tsx
 import { jsx as jsx283, jsxs as jsxs180 } from "react/jsx-runtime";
 
-// src/tokens/svg/user/UserXIcon.tsx
+// src/tokens/svg/user/UsersIcon.tsx
 import { jsx as jsx284, jsxs as jsxs181 } from "react/jsx-runtime";
 
-// src/tokens/svg/user/UsersIcon.tsx
+// src/tokens/svg/user/UserXIcon.tsx
 import { jsx as jsx285, jsxs as jsxs182 } from "react/jsx-runtime";
 
 // src/tokens/svg/weather/CloudDrizzleIcon.tsx
@@ -1280,37 +1305,12 @@ import { jsx as jsx296, jsxs as jsxs189 } from "react/jsx-runtime";
 // src/tokens/svg/weather/WindIcon.tsx
 import { jsx as jsx297, jsxs as jsxs190 } from "react/jsx-runtime";
 
-// src/tokens/hooks/useClickOutside.ts
-import React3 from "react";
-var useClickOutside = (refs, handler, enabled = true) => {
-  React3.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
 import React5 from "react";
 
 // src/components/Calendar/useCalendar.ts
 import React4 from "react";
-function useCalendar(initialYear, initialMonth) {
+var useCalendar = (initialYear, initialMonth) => {
   const today = /* @__PURE__ */ new Date();
   const [year, setYear] = React4.useState(initialYear ?? today.getFullYear());
   const [month, setMonth] = React4.useState(initialMonth ?? today.getMonth());
@@ -1389,16 +1389,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"]
@@ -1445,7 +1445,6 @@ var SingleDatePicker = (props) => {
   const {
     value,
     onChange,
-    color = "xplat-blue-500",
     minDate,
     maxDate,
     highlightDates = [],
@@ -1514,7 +1513,6 @@ var SingleDatePicker = (props) => {
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "single"),
-      style: { "--datepicker-active-color": `var(--${color})` },
       children: [
         /* @__PURE__ */ jsxs191("div", { className: "datepicker-header", children: [
           /* @__PURE__ */ jsx298("button", { className: "datepicker-nav", onClick: handlePrev, type: "button", children: /* @__PURE__ */ jsx298(ChevronLeftIcon_default, {}) }),
@@ -1638,15 +1636,13 @@ var Button = (props) => {
     children,
     type = "primary",
     size = "md",
-    color = "xplat-black",
     disabled,
     ...rest
   } = props;
-  const colorClass = color;
   return /* @__PURE__ */ jsx300(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size, colorClass),
+      className: clsx_default("lib-xplat-button", type, size),
       disabled,
       ...rest,
       children
@@ -1710,7 +1706,6 @@ var RangePicker = (props) => {
     startDate,
     endDate,
     onChange,
-    color = "xplat-blue-500",
     minDate,
     maxDate,
     locale = "ko"
@@ -1818,9 +1813,6 @@ var RangePicker = (props) => {
     "div",
     {
       className: clsx_default("lib-xplat-datepicker", "range"),
-      style: {
-        "--datepicker-active-color": `var(--${color})`
-      },
       children: [
         /* @__PURE__ */ jsxs193("div", { className: "datepicker-range-tabs", children: [
           /* @__PURE__ */ jsx302(
@@ -1897,12 +1889,11 @@ var PopupPicker = (props) => {
           Button_default,
           {
             type: "secondary",
-            color: "xplat-neutral-400",
             onClick: handleClose,
             children: locale === "ko" ? "\uCDE8\uC18C" : "Cancel"
           }
         ),
-        /* @__PURE__ */ jsx303(Button_default, { type: "primary", color: "xplat-blue-500", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
+        /* @__PURE__ */ jsx303(Button_default, { type: "primary", onClick: handleClose, children: locale === "ko" ? "\uC801\uC6A9" : "Apply" })
       ] })
     ] }) })
   ] });

package/dist/components/Divider/index.css

@@ -6,10 +6,10 @@
 .lib-xplat-divider.horizontal {
   width: 100%;
   height: 1px;
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-border-default);
 }
 .lib-xplat-divider.vertical {
   width: 1px;
   align-self: stretch;
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-border-default);
 }

package/dist/components/Drawer/index.css

@@ -16,7 +16,7 @@
   position: fixed;
   top: 0;
   height: 100%;
-  background: var(--xplat-white);
+  background: var(--semantic-surface-neutral-default);
   box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
@@ -42,13 +42,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--xplat-neutral-200);
+  padding: var(--spacing-space-4) var(--spacing-space-5);
+  border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-drawer .drawer-title {
   font-size: 16px;
   font-weight: 600;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-drawer .close-btn {
   background: none;
@@ -56,15 +56,15 @@
   cursor: pointer;
   font-size: 22px;
   line-height: 1;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-icon-strong);
   padding: 0;
   transition: color 0.2s;
 }
 .lib-xplat-drawer .close-btn:hover {
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-drawer .drawer-body {
   flex: 1;
-  padding: 1.25rem;
+  padding: var(--spacing-space-5);
   overflow-y: auto;
 }

package/dist/components/Dropdown/index.css

@@ -10,11 +10,11 @@
   position: absolute;
   z-index: 100;
   min-width: 160px;
-  background: var(--xplat-white);
-  border: 1px solid var(--xplat-neutral-200);
-  border-radius: 0.5rem;
+  background: var(--semantic-surface-neutral-default);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  padding: 4px 0;
+  padding: var(--spacing-space-1) 0;
   opacity: 0;
   transform: translateY(-4px);
   transition: opacity 0.15s ease, transform 0.15s ease;
@@ -30,25 +30,25 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 0.5rem 0.875rem;
+  padding: var(--spacing-space-2) 14px;
   border: none;
   background: none;
   font-size: 14px;
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
   cursor: pointer;
   text-align: left;
   transition: background-color 0.15s;
 }
 .lib-xplat-dropdown .dropdown-item:hover:not(:disabled) {
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-dropdown .dropdown-item.danger {
-  color: var(--xplat-red-600);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-dropdown .dropdown-item.danger:hover:not(:disabled) {
-  background-color: var(--xplat-red-50);
+  background-color: var(--semantic-surface-error-subtle);
 }
 .lib-xplat-dropdown .dropdown-item:disabled {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }

package/dist/components/EmptyState/index.css

@@ -4,29 +4,28 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 3rem 1.5rem;
+  padding: var(--spacing-space-11) var(--spacing-space-6);
   text-align: center;
 }
 .lib-xplat-empty-state .empty-icon {
-  color: var(--xplat-neutral-300);
-  margin-bottom: 1rem;
+  color: var(--semantic-icon-disabled);
+  margin-bottom: var(--spacing-space-4);
 }
 .lib-xplat-empty-state .empty-icon svg {
-  width: 48px;
-  height: 48px;
+  font-size: 48px;
 }
 .lib-xplat-empty-state .empty-title {
   font-size: 15px;
   font-weight: 500;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   margin: 0;
 }
 .lib-xplat-empty-state .empty-description {
   font-size: 13px;
-  color: var(--xplat-neutral-400);
-  margin: 0.375rem 0 0;
+  color: var(--semantic-text-muted);
+  margin: var(--spacing-space-2) 0 0;
   max-width: 320px;
 }
 .lib-xplat-empty-state .empty-action {
-  margin-top: 1.25rem;
+  margin-top: var(--spacing-space-5);
 }

package/dist/components/FileUpload/index.cjs

@@ -445,10 +445,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
@@ -904,10 +904,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

package/dist/components/FileUpload/index.css

@@ -4,39 +4,38 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2rem 1.5rem;
-  border: 2px dashed var(--xplat-neutral-300);
-  border-radius: 0.5rem;
+  padding: var(--spacing-space-8) var(--spacing-space-6);
+  border: 2px dashed var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   cursor: pointer;
   transition: border-color 0.2s, background-color 0.2s;
 }
 .lib-xplat-file-upload:hover {
-  border-color: var(--xplat-blue-400);
-  background-color: var(--xplat-blue-50);
+  border-color: var(--semantic-surface-brand-strong);
+  background-color: var(--semantic-surface-brand-subtle);
 }
 .lib-xplat-file-upload.drag-over {
-  border-color: var(--xplat-blue-500);
-  background-color: var(--xplat-blue-50);
+  border-color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-brand-subtle);
 }
 .lib-xplat-file-upload input[type=file] {
   display: none;
 }
 .lib-xplat-file-upload .upload-icon {
-  color: var(--xplat-neutral-400);
-  margin-bottom: 0.75rem;
+  color: var(--semantic-icon-subtle);
+  margin-bottom: var(--spacing-space-3);
 }
 .lib-xplat-file-upload .upload-icon svg {
-  width: 32px;
-  height: 32px;
+  font-size: 32px;
 }
 .lib-xplat-file-upload .upload-label {
   font-size: 14px;
   font-weight: 500;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   margin: 0;
 }
 .lib-xplat-file-upload .upload-description {
   font-size: 12px;
-  color: var(--xplat-neutral-400);
-  margin: 0.25rem 0 0;
+  color: var(--semantic-text-muted);
+  margin: var(--spacing-space-1) 0 0;
 }

package/dist/components/FileUpload/index.js

@@ -409,10 +409,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
@@ -868,10 +868,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

package/dist/components/HtmlTypeWriter/index.cjs

@@ -55,16 +55,16 @@ var voidTags = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
-function decodeHtmlEntities(str) {
+var decodeHtmlEntities = (str) => {
   return str.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#39;/g, "'").replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code))).replace(
     /&#x([0-9a-fA-F]+);/g,
     (_, code) => String.fromCharCode(parseInt(code, 16))
   );
-}
-function buildRangeMap(root) {
+};
+var buildRangeMap = (root) => {
   const rangeMap = /* @__PURE__ */ new WeakMap();
   let index = 0;
-  function assign(node) {
+  const assign = (node) => {
     if (node.nodeType === Node.TEXT_NODE) {
       const len = (node.textContent || "").length;
       rangeMap.set(node, { start: index, end: index + len });
@@ -85,11 +85,11 @@ function buildRangeMap(root) {
       return;
     }
     rangeMap.set(node, { start: index, end: index });
-  }
+  };
   Array.from(root.childNodes).forEach(assign);
   return { rangeMap, totalLength: index };
-}
-function convertNodeToReactWithRange(node, typedLen, rangeMap) {
+};
+var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
   const range = rangeMap.get(node);
   if (!range) return null;
   if (range.start >= typedLen) return null;
@@ -110,14 +110,14 @@ function convertNodeToReactWithRange(node, typedLen, rangeMap) {
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
   return import_react.default.createElement(tag, props, ...children);
-}
-function htmlToReactProgressive(root, typedLen, rangeMap) {
+};
+var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
     return node == null ? null : import_react.default.createElement(import_react.default.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
-}
+};
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

package/dist/components/HtmlTypeWriter/index.css

@@ -17,7 +17,7 @@
   font-size: 20px;
 }
 .lib-xplat-htmlTypewriter hr {
-  color: var(--xplat-neutral-200);
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  color: var(--semantic-border-default);
+  margin-top: var(--spacing-space-4);
+  margin-bottom: var(--spacing-space-4);
 }

package/dist/components/HtmlTypeWriter/index.js

@@ -19,16 +19,16 @@ var voidTags = /* @__PURE__ */ new Set([
   "track",
   "wbr"
 ]);
-function decodeHtmlEntities(str) {
+var decodeHtmlEntities = (str) => {
   return str.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#x27;/g, "'").replace(/&#39;/g, "'").replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code))).replace(
     /&#x([0-9a-fA-F]+);/g,
     (_, code) => String.fromCharCode(parseInt(code, 16))
   );
-}
-function buildRangeMap(root) {
+};
+var buildRangeMap = (root) => {
   const rangeMap = /* @__PURE__ */ new WeakMap();
   let index = 0;
-  function assign(node) {
+  const assign = (node) => {
     if (node.nodeType === Node.TEXT_NODE) {
       const len = (node.textContent || "").length;
       rangeMap.set(node, { start: index, end: index + len });
@@ -49,11 +49,11 @@ function buildRangeMap(root) {
       return;
     }
     rangeMap.set(node, { start: index, end: index });
-  }
+  };
   Array.from(root.childNodes).forEach(assign);
   return { rangeMap, totalLength: index };
-}
-function convertNodeToReactWithRange(node, typedLen, rangeMap) {
+};
+var convertNodeToReactWithRange = (node, typedLen, rangeMap) => {
   const range = rangeMap.get(node);
   if (!range) return null;
   if (range.start >= typedLen) return null;
@@ -74,14 +74,14 @@ function convertNodeToReactWithRange(node, typedLen, rangeMap) {
   }
   const children = Array.from(element.childNodes).map((child) => convertNodeToReactWithRange(child, typedLen, rangeMap)).filter((n) => n != null);
   return React.createElement(tag, props, ...children);
-}
-function htmlToReactProgressive(root, typedLen, rangeMap) {
+};
+var htmlToReactProgressive = (root, typedLen, rangeMap) => {
   const nodes = Array.from(root.childNodes).map((child, idx) => {
     const node = convertNodeToReactWithRange(child, typedLen, rangeMap);
     return node == null ? null : React.createElement(React.Fragment, { key: idx }, node);
   }).filter(Boolean);
   return nodes.length === 0 ? null : nodes;
-}
+};
 
 // src/components/HtmlTypeWriter/HtmlTypeWriter.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/components/ImageSelector/index.cjs

@@ -481,10 +481,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
@@ -971,10 +971,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

package/dist/components/ImageSelector/index.css

@@ -6,19 +6,19 @@
   height: 100%;
   flex-direction: column;
   position: relative;
-  background-color: var(--xplat-white);
-  border-radius: 0.25rem;
+  background-color: var(--semantic-surface-neutral-default);
+  border-radius: var(--spacing-radius-sm);
   overflow: hidden;
-  padding: 0.75rem;
+  padding: var(--spacing-space-3);
 }
 .lib-xplat-imageselector > input {
   display: none;
 }
 .lib-xplat-imageselector.none-value {
-  border: 1px dashed var(--xplat-neutral-500);
+  border: 1px dashed var(--semantic-border-strong);
 }
 .lib-xplat-imageselector:hover {
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-imageselector:hover > .action-bar {
   opacity: 1;
@@ -47,18 +47,18 @@
   cursor: pointer;
 }
 .lib-xplat-imageselector > .content .skeleton > .icon-wrapper {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-subtle);
 }
 .lib-xplat-imageselector > .content .skeleton > .label {
-  margin-top: 0.25rem;
-  font-size: 0.875rem;
-  color: var(--xplat-neutral-400);
+  margin-top: var(--spacing-space-1);
+  font-size: 14px;
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .icon-wrapper {
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-icon-strong);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .label {
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-subtle);
 }
 .lib-xplat-imageselector > .action-bar {
   position: absolute;
@@ -68,15 +68,15 @@
   display: flex;
   gap: 0.5em;
   font-size: 24px;
-  background-color: var(--xplat-neutral-900);
-  padding: 0.25rem 0.75rem;
+  background-color: var(--semantic-surface-neutral-strong);
+  padding: var(--spacing-space-1) var(--spacing-space-3);
   align-items: center;
   opacity: 0;
   pointer-events: none;
-  border-radius: 4px;
+  border-radius: var(--spacing-radius-sm);
 }
 .lib-xplat-imageselector > .action-bar > .icon-wrapper {
-  color: var(--xplat-white);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-imageselector .icon-wrapper {
   display: flex;