@x-plat/design-system 0.4.6 → 0.5.1

package/dist/components/ImageSelector/index.js

@@ -445,10 +445,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
@@ -935,10 +935,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/Input/index.css

@@ -2,42 +2,53 @@
 .lib-xplat-input-wrap {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
 }
 .lib-xplat-input-wrap .lib-xplat-input {
   display: flex;
   align-items: center;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 0.5rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   overflow: hidden;
-  background-color: var(--xplat-white);
-  padding-right: 0.5rem;
+  background-color: var(--semantic-surface-neutral-default);
+  padding-right: var(--spacing-space-2);
   width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-input-wrap .lib-xplat-input:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
-  height: 2rem;
-  font-size: 0.875rem;
+  height: var(--spacing-control-height-sm);
+  font-size: 14px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.md {
-  height: 2.5rem;
-  font-size: 1rem;
+  height: var(--spacing-control-height-md);
+  font-size: 16px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.lg {
-  height: 3rem;
-  font-size: 1.125rem;
+  height: var(--spacing-control-height-lg);
+  font-size: 18px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.disabled {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;
 }
 .lib-xplat-input-wrap .lib-xplat-input > input {
   border: none;
   outline: none;
   flex: 1;
-  padding-left: 1rem;
-  padding-right: 0.5rem;
+  padding-left: var(--spacing-space-4);
+  padding-right: var(--spacing-space-2);
   width: 100%;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
 }
 .lib-xplat-input-wrap .lib-xplat-input > input :disabled {
   cursor: not-allowed;
@@ -47,8 +58,8 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--xplat-neutral-400);
-  padding-right: 0.5rem;
+  color: var(--semantic-icon-subtle);
+  padding-right: var(--spacing-space-2);
 }
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper {
   font: 500;
@@ -58,28 +69,28 @@
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap {
   display: flex;
-  gap: 0.5rem;
-  margin-left: 0.25rem;
+  gap: var(--spacing-space-2);
+  margin-left: var(--spacing-space-1);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
   display: flex;
-  gap: 0.25rem;
-  font-size: 0.75rem;
+  gap: var(--spacing-space-1);
+  font-size: 12px;
   align-items: center;
   user-select: none;
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-subtle);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
-  color: var(--xplat-green-600);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.warning {
-  color: var(--xplat-yellow-600);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.error {
-  color: var(--xplat-red-600);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
-  font-size: 1rem;
+  font-size: 16px;
 }

package/dist/components/Modal/index.css

@@ -3,11 +3,12 @@
   z-index: 11;
 }
 .lib-xplat-modal.modal-box {
-  border-radius: 12px;
+  border-radius: var(--spacing-radius-lg);
   background-color: #fff;
-  padding: 24px;
-  max-width: calc(100vw - 2rem);
-  max-height: calc(100vh - 2rem);
+  padding: var(--spacing-space-6);
+  min-width: min-content;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
   overflow: visible;
   transform: scale(0.9);
   opacity: 0;

package/dist/components/Pagination/index.cjs

@@ -429,10 +429,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
@@ -888,10 +888,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
@@ -948,7 +948,7 @@ var clsx_default = clsx;
 
 // src/components/Pagination/Pagination.tsx
 var import_jsx_runtime295 = require("react/jsx-runtime");
-function getPageRange(current, totalPages, siblingCount) {
+var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
     return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -972,7 +972,7 @@ function getPageRange(current, totalPages, siblingCount) {
     (_, i) => leftSibling + i
   );
   return [1, "...", ...middleRange, "...", totalPages];
-}
+};
 var Pagination = (props) => {
   const {
     current,
@@ -981,9 +981,8 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size = "md",
-    color = "xplat-blue-500"
+    type = "brand"
   } = props;
-  const colorClass = color;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -991,7 +990,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
       "button",
       {
@@ -1006,7 +1005,7 @@ var Pagination = (props) => {
       (page, i) => page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
         "button",
         {
-          className: clsx_default("page-btn", colorClass, { active: page === current }),
+          className: clsx_default("page-btn", { active: page === current }),
           onClick: () => handleClick(page),
           "aria-current": page === current ? "page" : void 0,
           children: page

package/dist/components/Pagination/index.css

@@ -2,74 +2,85 @@
 .lib-xplat-pagination {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-space-1);
 }
 .lib-xplat-pagination.sm .dots {
-  width: 24px;
-  height: 24px;
+  width: var(--spacing-control-height-xs);
+  height: var(--spacing-control-height-xs);
   font-size: 12px;
 }
 .lib-xplat-pagination.sm .page-btn {
-  min-width: 24px;
-  height: 24px;
+  min-width: var(--spacing-control-height-xs);
+  height: var(--spacing-control-height-xs);
   font-size: 12px;
 }
 .lib-xplat-pagination.sm .page-btn svg {
-  width: 14px;
-  height: 14px;
+  font-size: 14px;
 }
 .lib-xplat-pagination.lg .dots {
-  width: 40px;
-  height: 40px;
+  width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 16px;
 }
 .lib-xplat-pagination.lg .page-btn {
-  min-width: 40px;
-  height: 40px;
+  min-width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 16px;
 }
 .lib-xplat-pagination.lg .page-btn svg {
-  width: 20px;
-  height: 20px;
+  font-size: 20px;
 }
 .lib-xplat-pagination .dots {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
   font-size: 14px;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   user-select: none;
 }
 .lib-xplat-pagination .page-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 32px;
-  height: 32px;
-  padding: 0 6px;
+  min-width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
+  padding: 0 var(--spacing-space-2);
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   background: none;
   font-size: 14px;
   cursor: pointer;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-pagination .page-btn:hover:not(:disabled):not(.active) {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-pagination .page-btn:disabled {
   cursor: not-allowed;
   opacity: 0.4;
 }
 .lib-xplat-pagination .page-btn.active {
-  color: var(--xplat-white);
+  color: var(--semantic-text-inverse);
   font-weight: 600;
-  background-color: var(--ds-color);
+}
+.lib-xplat-pagination.brand .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-pagination.success .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-pagination.error .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-pagination.warning .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-pagination.info .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-pagination .page-btn svg {
-  width: 16px;
-  height: 16px;
+  font-size: 16px;
 }

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

@@ -1,14 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type PaginationSize = "sm" | "md" | "lg";
-interface PaginationProps extends ColorProps {
+type PaginationType = "brand" | "success" | "error" | "warning" | "info";
+interface PaginationProps {
     current: number;
     total: number;
     pageSize?: number;
     siblingCount?: number;
     onChange?: (page: number) => void;
     size?: PaginationSize;
+    type?: PaginationType;
 }
 declare const Pagination: {
     (props: PaginationProps): react_jsx_runtime.JSX.Element;

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

@@ -1,14 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type PaginationSize = "sm" | "md" | "lg";
-interface PaginationProps extends ColorProps {
+type PaginationType = "brand" | "success" | "error" | "warning" | "info";
+interface PaginationProps {
     current: number;
     total: number;
     pageSize?: number;
     siblingCount?: number;
     onChange?: (page: number) => void;
     size?: PaginationSize;
+    type?: PaginationType;
 }
 declare const Pagination: {
     (props: PaginationProps): react_jsx_runtime.JSX.Element;

package/dist/components/Pagination/index.js

@@ -403,10 +403,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
@@ -862,10 +862,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
@@ -922,7 +922,7 @@ var clsx_default = clsx;
 
 // src/components/Pagination/Pagination.tsx
 import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
-function getPageRange(current, totalPages, siblingCount) {
+var getPageRange = (current, totalPages, siblingCount) => {
   const totalNumbers = siblingCount * 2 + 5;
   if (totalPages <= totalNumbers) {
     return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -946,7 +946,7 @@ function getPageRange(current, totalPages, siblingCount) {
     (_, i) => leftSibling + i
   );
   return [1, "...", ...middleRange, "...", totalPages];
-}
+};
 var Pagination = (props) => {
   const {
     current,
@@ -955,9 +955,8 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size = "md",
-    color = "xplat-blue-500"
+    type = "brand"
   } = props;
-  const colorClass = color;
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -965,7 +964,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ jsxs189("nav", { className: clsx_default("lib-xplat-pagination", size), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ jsxs189("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ jsx295(
       "button",
       {
@@ -980,7 +979,7 @@ var Pagination = (props) => {
       (page, i) => page === "..." ? /* @__PURE__ */ jsx295("span", { className: "dots", children: "..." }, `dots-${i}`) : /* @__PURE__ */ jsx295(
         "button",
         {
-          className: clsx_default("page-btn", colorClass, { active: page === current }),
+          className: clsx_default("page-btn", { active: page === current }),
           onClick: () => handleClick(page),
           "aria-current": page === current ? "page" : void 0,
           children: page

package/dist/components/PopOver/index.css

@@ -11,7 +11,7 @@
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
   background: white;
-  border-radius: 0.5rem;
+  border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 10;
   opacity: 0;
@@ -19,11 +19,11 @@
 }
 .lib-xplat-pop-over > .content-wrap.top {
   transform-origin: bottom;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--spacing-space-2);
 }
 .lib-xplat-pop-over > .content-wrap.bottom {
   transform-origin: top;
-  margin-top: 0.5rem;
+  margin-top: var(--spacing-space-2);
 }
 .lib-xplat-pop-over > .content-wrap.visible {
   opacity: 1;

package/dist/components/Progress/index.cjs

@@ -47,12 +47,11 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    showLabel = false,
-    color = "xplat-blue-500"
+    type = "brand",
+    showLabel = false
   } = props;
-  const colorClass = color;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -64,7 +63,7 @@ var Progress = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            className: clsx_default("bar", colorClass),
+            className: "bar",
             style: { width: `${percentage}%` }
           }
         )

package/dist/components/Progress/index.css

@@ -2,34 +2,48 @@
 .lib-xplat-progress {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-space-2);
   width: 100%;
 }
 .lib-xplat-progress .track {
   flex: 1;
-  background-color: var(--xplat-neutral-200);
-  border-radius: 10rem;
+  background-color: var(--semantic-surface-neutral-disabled);
+  border-radius: var(--spacing-radius-full);
   overflow: hidden;
 }
 .lib-xplat-progress.sm .track {
-  height: 4px;
+  height: var(--spacing-space-1);
 }
 .lib-xplat-progress.md .track {
-  height: 8px;
+  height: var(--spacing-space-2);
 }
 .lib-xplat-progress.lg .track {
-  height: 12px;
+  height: var(--spacing-space-3);
 }
 .lib-xplat-progress .bar {
   height: 100%;
-  border-radius: 10rem;
+  border-radius: var(--spacing-radius-full);
   transition: width 0.3s ease;
-  background-color: var(--ds-color);
+}
+.lib-xplat-progress.brand .bar {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-progress.success .bar {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-progress.error .bar {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-progress.warning .bar {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-progress.info .bar {
+  background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-progress .label {
   font-size: 12px;
   font-weight: 500;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   min-width: 36px;
   text-align: right;
 }

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

@@ -1,11 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type ProgressSize = "sm" | "md" | "lg";
-interface ProgressProps extends ColorProps {
+type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+interface ProgressProps {
     value: number;
     max?: number;
     size?: ProgressSize;
+    type?: ProgressType;
     showLabel?: boolean;
 }
 declare const Progress: {

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

@@ -1,11 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type ProgressSize = "sm" | "md" | "lg";
-interface ProgressProps extends ColorProps {
+type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+interface ProgressProps {
     value: number;
     max?: number;
     size?: ProgressSize;
+    type?: ProgressType;
     showLabel?: boolean;
 }
 declare const Progress: {

package/dist/components/Progress/index.js

@@ -21,12 +21,11 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    showLabel = false,
-    color = "xplat-blue-500"
+    type = "brand",
+    showLabel = false
   } = props;
-  const colorClass = color;
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -38,7 +37,7 @@ var Progress = (props) => {
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: clsx_default("bar", colorClass),
+            className: "bar",
             style: { width: `${percentage}%` }
           }
         )

package/dist/components/Radio/index.cjs

@@ -67,8 +67,8 @@ var Radio = (props) => {
   const {
     label,
     value,
-    color = "xplat-blue-500",
     size: sizeProp,
+    type = "brand",
     ...rest
   } = props;
   const context = useRadioGroupContext();
@@ -80,13 +80,13 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "label",
     {
       className: clsx_default(
         "lib-xplat-radio",
         size,
+        type,
         localChecked ? "checked" : void 0
       ),
       children: [
@@ -96,8 +96,7 @@ var Radio = (props) => {
           {
             className: clsx_default(
               "circle",
-              localChecked ? "checked" : void 0,
-              colorClass
+              localChecked ? "checked" : void 0
             ),
             children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "inner-circle" })
           }