@x-plat/design-system 0.4.6 → 0.5.0

package/dist/components/Radio/index.css

@@ -2,7 +2,7 @@
 .lib-xplat-radio {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
   user-select: none;
   cursor: pointer;
 }
@@ -10,57 +10,89 @@
   display: none;
 }
 .lib-xplat-radio.sm > .circle {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
   border-width: 1.5px;
 }
 .lib-xplat-radio.sm > .circle > .inner-circle {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-radio.sm > span {
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 .lib-xplat-radio.md > .circle {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--spacing-space-5);
+  height: var(--spacing-space-5);
 }
 .lib-xplat-radio.lg > .circle {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-radio.lg > .circle > .inner-circle {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-radio.lg > span {
-  font-size: 1.125rem;
+  font-size: 18px;
 }
 .lib-xplat-radio > .circle {
-  border: 2px solid var(--xplat-neutral-400);
+  border: 2px solid var(--semantic-border-strong);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-default);
   transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
-.lib-xplat-radio:hover .lib-xplat-radio > .circle:not(.checked) {
-  border-color: var(--xplat-neutral-600);
-  background-color: var(--xplat-neutral-100);
+.lib-xplat-radio > .circle > .inner-circle {
+  width: var(--spacing-space-3);
+  height: var(--spacing-space-3);
+  background-color: var(--semantic-surface-neutral-default);
+  border-radius: 50%;
 }
-.lib-xplat-radio > .circle.checked {
-  background-color: var(--ds-color);
-  border-color: var(--ds-color);
+.lib-xplat-radio:hover > .circle:not(.checked) {
+  border-color: var(--semantic-icon-strong);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
-.lib-xplat-radio > .circle.checked:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 15%);
-  border-color: color-mix(in srgb, var(--ds-color), black 15%);
+.lib-xplat-radio.brand > .circle.checked {
+  background-color: var(--semantic-surface-brand-default);
+  border-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-radio > .circle > .inner-circle {
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: white;
-  border-radius: 50%;
+.lib-xplat-radio.success > .circle.checked {
+  background-color: var(--semantic-surface-success-default);
+  border-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-radio.error > .circle.checked {
+  background-color: var(--semantic-surface-error-default);
+  border-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-radio.warning > .circle.checked {
+  background-color: var(--semantic-surface-warning-default);
+  border-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-radio.info > .circle.checked {
+  background-color: var(--semantic-surface-info-default);
+  border-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-radio:hover.brand > .circle.checked {
+  background-color: var(--semantic-surface-brand-strong);
+  border-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-radio:hover.success > .circle.checked {
+  background-color: var(--semantic-surface-success-strong);
+  border-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-radio:hover.error > .circle.checked {
+  background-color: var(--semantic-surface-error-strong);
+  border-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-radio:hover.warning > .circle.checked {
+  background-color: var(--semantic-surface-warning-strong);
+  border-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-radio:hover.info > .circle.checked {
+  background-color: var(--semantic-surface-info-strong);
+  border-color: var(--semantic-surface-info-strong);
 }

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

@@ -1,10 +1,10 @@
 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 from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-interface RadioProps extends Omit<InputAttributes, "size" | "className">, ColorProps {
+type RadioType = "brand" | "success" | "error" | "warning" | "info";
+interface RadioProps extends Omit<InputAttributes, "size" | "className"> {
     label?: string;
     /**
      * 단일 사용시 name 필수 작성
@@ -12,6 +12,7 @@ interface RadioProps extends Omit<InputAttributes, "size" | "className">, ColorP
     name?: string;
     value: string | number;
     size?: RadioSize;
+    type?: RadioType;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value

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

@@ -1,10 +1,10 @@
 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 from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-interface RadioProps extends Omit<InputAttributes, "size" | "className">, ColorProps {
+type RadioType = "brand" | "success" | "error" | "warning" | "info";
+interface RadioProps extends Omit<InputAttributes, "size" | "className"> {
     label?: string;
     /**
      * 단일 사용시 name 필수 작성
@@ -12,6 +12,7 @@ interface RadioProps extends Omit<InputAttributes, "size" | "className">, ColorP
     name?: string;
     value: string | number;
     size?: RadioSize;
+    type?: RadioType;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value

package/dist/components/Radio/index.js

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

package/dist/components/Select/index.cjs

@@ -500,10 +500,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
@@ -959,10 +959,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/Select/index.css

@@ -8,27 +8,27 @@
   z-index: 1;
 }
 .lib-xplat-select.sm .select-trigger {
-  min-height: 32px;
-  padding: 4px 10px;
-  font-size: 0.75rem;
+  min-height: var(--spacing-control-height-sm);
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  font-size: 12px;
 }
 .lib-xplat-select.md .select-trigger {
-  min-height: 40px;
-  padding: 8px 12px;
-  font-size: 0.875rem;
+  min-height: var(--spacing-control-height-md);
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: 14px;
 }
 .lib-xplat-select.lg .select-trigger {
-  min-height: 48px;
-  padding: 10px 14px;
-  font-size: 1rem;
+  min-height: var(--spacing-control-height-lg);
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-size: 16px;
 }
 .lib-xplat-select.sm .select-content .select-item {
-  padding: 6px 10px;
-  font-size: 0.75rem;
+  padding: var(--spacing-space-2) var(--spacing-space-2);
+  font-size: 12px;
 }
 .lib-xplat-select.lg .select-content .select-item {
-  padding: 10px 14px;
-  font-size: 1rem;
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-size: 16px;
 }
 .lib-xplat-select .select-trigger {
   cursor: pointer;
@@ -37,34 +37,41 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 8px;
-  background-color: #fff;
-  color: var(--xplat-neutral-900);
+  gap: var(--spacing-space-2);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
+  transition: border-color 0.15s;
+}
+.lib-xplat-select .select-trigger:hover:not(.disabled) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-select .select-trigger:active:not(.disabled) {
+  border-color: var(--semantic-interaction-focus-ring);
 }
 .lib-xplat-select .select-trigger:focus-visible {
-  outline: 2px solid var(--xplat-blue-500);
+  outline: 2px solid var(--semantic-interaction-focus-ring);
   outline-offset: 2px;
 }
 .lib-xplat-select .select-trigger.disabled {
   cursor: not-allowed;
   pointer-events: none;
-  background-color: var(--xplat-neutral-100);
-  border-color: var(--xplat-neutral-300);
-  color: var(--xplat-neutral-400);
+  background-color: var(--semantic-surface-neutral-disabled);
+  border-color: var(--semantic-border-default);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-select .select-trigger.disabled .select-trigger-icon {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-disabled);
 }
 .lib-xplat-select .select-trigger.error:not(.disabled) {
-  border-color: var(--xplat-red-500);
+  border-color: var(--semantic-border-error);
 }
 .lib-xplat-select .select-trigger.error:not(.disabled):focus-visible {
-  outline-color: var(--xplat-red-500);
+  outline-color: var(--semantic-border-error);
 }
 .lib-xplat-select .select-trigger .select-trigger-value {
   flex: 1;
@@ -75,31 +82,30 @@
   white-space: nowrap;
 }
 .lib-xplat-select .select-trigger .select-trigger-value.placeholder {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-select .select-trigger .select-trigger-icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-icon-subtle);
   transition: transform 0.2s ease;
 }
 .lib-xplat-select .select-trigger .select-trigger-icon.open {
   transform: rotate(180deg);
 }
 .lib-xplat-select .select-trigger .select-trigger-icon svg {
-  width: 20px;
-  height: 20px;
+  font-size: 20px;
 }
 .lib-xplat-select .select-content {
   position: absolute;
   left: 0;
   right: 0;
   width: 100%;
-  padding: 4px 0;
-  border-radius: 8px;
-  background-color: #fff;
+  padding: var(--spacing-space-1) 0;
+  border-radius: var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-default);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   cursor: default;
   max-height: 220px;
@@ -109,7 +115,7 @@
 }
 .lib-xplat-select .select-content.bottom {
   top: 100%;
-  margin-top: 4px;
+  margin-top: var(--spacing-space-1);
   margin-bottom: 0;
   transform: translateY(-8px);
 }
@@ -125,7 +131,7 @@
 }
 .lib-xplat-select .select-content.top {
   bottom: 100%;
-  margin-bottom: 4px;
+  margin-bottom: var(--spacing-space-1);
   margin-top: 0;
   transform: translateY(8px);
 }
@@ -138,19 +144,19 @@
   transform: translateY(8px);
 }
 .lib-xplat-select .select-item {
-  padding: 8px 12px;
-  font-size: 0.875rem;
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: 14px;
   cursor: pointer;
   transition: background-color 0.15s ease;
   outline: none;
 }
 .lib-xplat-select .select-item:hover:not(.disabled) {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-select .select-item:focus-visible:not(.disabled) {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-select .select-item.disabled {
   cursor: not-allowed;
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
 }

package/dist/components/Select/index.js

@@ -463,10 +463,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
@@ -922,10 +922,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/Skeleton/index.css

@@ -1,18 +1,18 @@
 /* src/components/Skeleton/skeleton.scss */
 .lib-xplat-skeleton {
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
   animation: lib-xplat-skeleton-pulse 1.5s ease-in-out infinite;
 }
 .lib-xplat-skeleton.text {
   width: 100%;
   height: 1em;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
 }
 .lib-xplat-skeleton.circular {
   border-radius: 50%;
 }
 .lib-xplat-skeleton.rectangular {
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
 }
 @keyframes lib-xplat-skeleton-pulse {
   0% {

package/dist/components/Spinner/index.cjs

@@ -45,13 +45,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Spinner = (props) => {
   const {
     size = "md",
-    color = "xplat-blue-500"
+    type = "brand"
   } = props;
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      className: clsx_default("lib-xplat-spinner", size, colorClass),
+      className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [

package/dist/components/Spinner/index.css

@@ -5,16 +5,16 @@
   justify-content: center;
 }
 .lib-xplat-spinner.sm {
-  width: 16px;
-  height: 16px;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-spinner.md {
-  width: 24px;
-  height: 24px;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-spinner.lg {
-  width: 36px;
-  height: 36px;
+  width: var(--spacing-space-9);
+  height: var(--spacing-space-9);
 }
 .lib-xplat-spinner svg {
   width: 100%;
@@ -22,12 +22,26 @@
   animation: lib-xplat-spin 0.8s linear infinite;
 }
 .lib-xplat-spinner .track {
-  stroke: var(--xplat-neutral-200);
+  stroke: var(--semantic-border-default);
 }
 .lib-xplat-spinner .indicator {
   stroke-dasharray: 42;
   stroke-dashoffset: 28;
-  stroke: var(--ds-color);
+}
+.lib-xplat-spinner.brand .indicator {
+  stroke: var(--semantic-surface-brand-default);
+}
+.lib-xplat-spinner.success .indicator {
+  stroke: var(--semantic-surface-success-default);
+}
+.lib-xplat-spinner.error .indicator {
+  stroke: var(--semantic-surface-error-default);
+}
+.lib-xplat-spinner.warning .indicator {
+  stroke: var(--semantic-surface-warning-default);
+}
+.lib-xplat-spinner.info .indicator {
+  stroke: var(--semantic-surface-info-default);
 }
 @keyframes lib-xplat-spin {
   from {

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

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type SpinnerSize = "sm" | "md" | "lg";
-interface SpinnerProps extends ColorProps {
+type SpinnerType = "brand" | "success" | "error" | "warning" | "info";
+interface SpinnerProps {
     size?: SpinnerSize;
+    type?: SpinnerType;
 }
 declare const Spinner: {
     (props: SpinnerProps): react_jsx_runtime.JSX.Element;

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

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type SpinnerSize = "sm" | "md" | "lg";
-interface SpinnerProps extends ColorProps {
+type SpinnerType = "brand" | "success" | "error" | "warning" | "info";
+interface SpinnerProps {
     size?: SpinnerSize;
+    type?: SpinnerType;
 }
 declare const Spinner: {
     (props: SpinnerProps): react_jsx_runtime.JSX.Element;

package/dist/components/Spinner/index.js

@@ -19,13 +19,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Spinner = (props) => {
   const {
     size = "md",
-    color = "xplat-blue-500"
+    type = "brand"
   } = props;
-  const colorClass = color;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx_default("lib-xplat-spinner", size, colorClass),
+      className: clsx_default("lib-xplat-spinner", size, type),
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911",
       children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [

package/dist/components/Steps/index.cjs

@@ -405,10 +405,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 +882,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
@@ -946,15 +946,14 @@ var Steps = (props) => {
   const {
     items,
     current,
-    color = "xplat-blue-500"
+    type = "brand"
   } = props;
-  const colorClass = color;
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "lib-xplat-steps", children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: clsx_default("lib-xplat-steps", type), children: items.map((item, index) => {
     const status = index < current ? "completed" : index === current ? "active" : "pending";
     return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: clsx_default("step-item", status), children: [
       /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "step-indicator", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: clsx_default("step-circle", colorClass), children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { children: index + 1 }) }),
-        index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: clsx_default("step-line", colorClass) })
+        /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "step-circle", children: status === "completed" ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(CheckIcon_default, {}) : /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { children: index + 1 }) }),
+        index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("div", { className: "step-line" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "step-content", children: [
         /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "step-title", children: item.title }),