@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Alert/index.cjs

@@ -43,11 +43,11 @@ var clsx_default = clsx;
 // src/components/Alert/Alert.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Alert = (props) => {
-  const { type = "info", children, onClose, className } = props;
+  const { type = "info", children, onClose } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: clsx_default("lib-xplat-alert", type, className),
+      className: clsx_default("lib-xplat-alert", type),
       role: "alert",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "content", children }),

package/dist/components/Alert/index.css

@@ -3,8 +3,8 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  border-radius: var(--spacing-radius-md);
   font-size: 14px;
   line-height: 1.5;
   border: 1px solid;
@@ -18,7 +18,7 @@
   cursor: pointer;
   font-size: 18px;
   line-height: 1;
-  margin-left: 0.5rem;
+  margin-left: var(--spacing-space-2);
   padding: 0;
   opacity: 0.6;
   transition: opacity 0.2s;
@@ -27,34 +27,34 @@
   opacity: 1;
 }
 .lib-xplat-alert.info {
-  background-color: var(--xplat-lightblue-50);
-  border-color: var(--xplat-lightblue-200);
-  color: var(--xplat-lightblue-700);
+  background-color: var(--semantic-surface-info-subtle);
+  border-color: var(--semantic-border-info);
+  color: var(--semantic-text-info);
 }
 .lib-xplat-alert.info .close-btn {
-  color: var(--xplat-lightblue-700);
+  color: var(--semantic-text-info);
 }
 .lib-xplat-alert.success {
-  background-color: var(--xplat-green-50);
-  border-color: var(--xplat-green-200);
-  color: var(--xplat-green-700);
+  background-color: var(--semantic-surface-success-subtle);
+  border-color: var(--semantic-border-success);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-alert.success .close-btn {
-  color: var(--xplat-green-700);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-alert.warning {
-  background-color: var(--xplat-yellow-50);
-  border-color: var(--xplat-yellow-200);
-  color: var(--xplat-yellow-700);
+  background-color: var(--semantic-surface-warning-subtle);
+  border-color: var(--semantic-border-warning);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-alert.warning .close-btn {
-  color: var(--xplat-yellow-700);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-alert.error {
-  background-color: var(--xplat-red-50);
-  border-color: var(--xplat-red-200);
-  color: var(--xplat-red-700);
+  background-color: var(--semantic-surface-error-subtle);
+  border-color: var(--semantic-border-error);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-alert.error .close-btn {
-  color: var(--xplat-red-700);
+  color: var(--semantic-text-error);
 }

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

@@ -5,7 +5,6 @@ interface AlertProps {
     type?: AlertType;
     children: React.ReactNode;
     onClose?: () => void;
-    className?: string;
 }
 declare const Alert: React.FC<AlertProps>;
 

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

@@ -5,7 +5,6 @@ interface AlertProps {
     type?: AlertType;
     children: React.ReactNode;
     onClose?: () => void;
-    className?: string;
 }
 declare const Alert: React.FC<AlertProps>;
 

package/dist/components/Alert/index.js

@@ -17,11 +17,11 @@ var clsx_default = clsx;
 // src/components/Alert/Alert.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Alert = (props) => {
-  const { type = "info", children, onClose, className } = props;
+  const { type = "info", children, onClose } = props;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx_default("lib-xplat-alert", type, className),
+      className: clsx_default("lib-xplat-alert", type),
       role: "alert",
       children: [
         /* @__PURE__ */ jsx("div", { className: "content", children }),

package/dist/components/Avatar/index.cjs

@@ -42,18 +42,23 @@ var clsx_default = clsx;
 
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var CATEGORICAL_COUNT = 8;
+var getColorIndex = (name) => {
+  if (!name) return 1;
+  const code = name.charCodeAt(0) || 0;
+  return code % CATEGORICAL_COUNT + 1;
+};
 var Avatar = (props) => {
   const {
     src,
     alt,
     name,
-    size = "md",
-    color = "xplat-blue-500",
-    className
+    size = "md"
   } = props;
-  const colorClass = color;
-  const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-avatar", size, className), children: src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
+  const fullInitials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
+  const initials = size === "sm" ? fullInitials.slice(0, 1) : fullInitials;
+  const catIndex = getColorIndex(name || "");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };
 Avatar.displayName = "Avatar";
 var Avatar_default = Avatar;

package/dist/components/Avatar/index.css

@@ -9,18 +9,18 @@
   user-select: none;
 }
 .lib-xplat-avatar.sm {
-  width: 32px;
-  height: 32px;
-  font-size: 12px;
+  width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
+  font-size: 11px;
 }
 .lib-xplat-avatar.md {
-  width: 40px;
-  height: 40px;
+  width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 14px;
 }
 .lib-xplat-avatar.lg {
-  width: 56px;
-  height: 56px;
+  width: var(--spacing-control-height-lg);
+  height: var(--spacing-control-height-lg);
   font-size: 18px;
 }
 .lib-xplat-avatar img {
@@ -34,13 +34,43 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--xplat-white);
   font-weight: 600;
+  background-color: var(--semantic-surface-neutral-subtle);
+  color: var(--semantic-text-muted);
+}
+.lib-xplat-avatar .fallback.cat-1 {
+  background-color: var(--semantic-categorical-1-bg);
+  color: var(--semantic-categorical-1-text);
+}
+.lib-xplat-avatar .fallback.cat-2 {
+  background-color: var(--semantic-categorical-2-bg);
+  color: var(--semantic-categorical-2-text);
+}
+.lib-xplat-avatar .fallback.cat-3 {
+  background-color: var(--semantic-categorical-3-bg);
+  color: var(--semantic-categorical-3-text);
+}
+.lib-xplat-avatar .fallback.cat-4 {
+  background-color: var(--semantic-categorical-4-bg);
+  color: var(--semantic-categorical-4-text);
+}
+.lib-xplat-avatar .fallback.cat-5 {
+  background-color: var(--semantic-categorical-5-bg);
+  color: var(--semantic-categorical-5-text);
+}
+.lib-xplat-avatar .fallback.cat-6 {
+  background-color: var(--semantic-categorical-6-bg);
+  color: var(--semantic-categorical-6-text);
+}
+.lib-xplat-avatar .fallback.cat-7 {
+  background-color: var(--semantic-categorical-7-bg);
+  color: var(--semantic-categorical-7-text);
+}
+.lib-xplat-avatar .fallback.cat-8 {
+  background-color: var(--semantic-categorical-8-bg);
+  color: var(--semantic-categorical-8-text);
 }
 .lib-xplat-avatar .fallback svg {
   width: 60%;
   height: 60%;
 }
-.lib-xplat-avatar .fallback {
-  background-color: var(--ds-color);
-}

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

@@ -1,13 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
 type AvatarSize = "sm" | "md" | "lg";
-interface AvatarProps extends ColorProps {
+interface AvatarProps {
     src?: string;
     alt?: string;
     name?: string;
     size?: AvatarSize;
-    className?: string;
 }
 declare const Avatar: {
     (props: AvatarProps): react_jsx_runtime.JSX.Element;

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

@@ -1,13 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
 type AvatarSize = "sm" | "md" | "lg";
-interface AvatarProps extends ColorProps {
+interface AvatarProps {
     src?: string;
     alt?: string;
     name?: string;
     size?: AvatarSize;
-    className?: string;
 }
 declare const Avatar: {
     (props: AvatarProps): react_jsx_runtime.JSX.Element;

package/dist/components/Avatar/index.js

@@ -16,18 +16,23 @@ var clsx_default = clsx;
 
 // src/components/Avatar/Avatar.tsx
 import { jsx } from "react/jsx-runtime";
+var CATEGORICAL_COUNT = 8;
+var getColorIndex = (name) => {
+  if (!name) return 1;
+  const code = name.charCodeAt(0) || 0;
+  return code % CATEGORICAL_COUNT + 1;
+};
 var Avatar = (props) => {
   const {
     src,
     alt,
     name,
-    size = "md",
-    color = "xplat-blue-500",
-    className
+    size = "md"
   } = props;
-  const colorClass = color;
-  const initials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
-  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-avatar", size, className), children: src ? /* @__PURE__ */ jsx("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx("div", { className: clsx_default("fallback", colorClass), children: initials || /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
+  const fullInitials = name ? name.split(" ").map((s) => s[0]).join("").slice(0, 2).toUpperCase() : "";
+  const initials = size === "sm" ? fullInitials.slice(0, 1) : fullInitials;
+  const catIndex = getColorIndex(name || "");
+  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-avatar", size), children: src ? /* @__PURE__ */ jsx("img", { src, alt: alt || name || "avatar" }) : /* @__PURE__ */ jsx("div", { className: clsx_default("fallback", `cat-${catIndex}`), children: initials || /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) }) }) });
 };
 Avatar.displayName = "Avatar";
 var Avatar_default = Avatar;

package/dist/components/Badge/index.cjs

@@ -45,19 +45,17 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Badge = (props) => {
   const {
     children,
+    type = "error",
     count,
     maxCount = 99,
     dot = false,
-    size = "md",
-    color = "xplat-red-500",
-    className
+    size = "md"
   } = props;
-  const colorClass = color;
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-badge", size, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
   ] });
 };
 Badge.displayName = "Badge";

package/dist/components/Badge/index.css

@@ -4,24 +4,24 @@
   display: inline-flex;
 }
 .lib-xplat-badge.sm .badge-indicator {
-  min-width: 14px;
-  height: 14px;
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
   font-size: 9px;
-  padding: 0 3px;
+  padding: 0 var(--spacing-space-1);
 }
 .lib-xplat-badge.sm .badge-indicator.dot {
-  min-width: 6px;
-  height: 6px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-badge.lg .badge-indicator {
-  min-width: 22px;
-  height: 22px;
+  min-width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
   font-size: 13px;
-  padding: 0 6px;
+  padding: 0 var(--spacing-space-2);
 }
 .lib-xplat-badge.lg .badge-indicator.dot {
-  min-width: 10px;
-  height: 10px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-badge .badge-indicator {
   position: absolute;
@@ -31,21 +31,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 10rem;
-  color: var(--xplat-white);
+  border-radius: var(--spacing-radius-full);
+  color: var(--semantic-text-inverse);
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
+  padding: 0 var(--spacing-space-1);
   box-sizing: border-box;
 }
 .lib-xplat-badge .badge-indicator.dot {
-  min-width: 8px;
-  height: 8px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
   padding: 0;
 }
-.lib-xplat-badge .badge-indicator {
-  background-color: var(--ds-color);
+.lib-xplat-badge .badge-indicator.error {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-badge .badge-indicator.success {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-badge .badge-indicator.warning {
+  background-color: var(--semantic-surface-warning-default);
+  color: var(--semantic-text-strong);
+}
+.lib-xplat-badge .badge-indicator.info {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-badge .badge-indicator.brand {
+  background-color: var(--semantic-surface-brand-default);
 }

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

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.cjs';
 
+type BadgeType = "error" | "success" | "warning" | "info" | "brand";
 type BadgeSize = "sm" | "md" | "lg";
-interface BadgeProps extends ColorProps {
+interface BadgeProps {
     children: React.ReactNode;
+    type?: BadgeType;
     count?: number;
     maxCount?: number;
     dot?: boolean;
     size?: BadgeSize;
-    className?: string;
 }
 declare const Badge: {
     (props: BadgeProps): react_jsx_runtime.JSX.Element;

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

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { a as ColorProps } from '../../colors-CY4JXVHj.js';
 
+type BadgeType = "error" | "success" | "warning" | "info" | "brand";
 type BadgeSize = "sm" | "md" | "lg";
-interface BadgeProps extends ColorProps {
+interface BadgeProps {
     children: React.ReactNode;
+    type?: BadgeType;
     count?: number;
     maxCount?: number;
     dot?: boolean;
     size?: BadgeSize;
-    className?: string;
 }
 declare const Badge: {
     (props: BadgeProps): react_jsx_runtime.JSX.Element;

package/dist/components/Badge/index.js

@@ -19,19 +19,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Badge = (props) => {
   const {
     children,
+    type = "error",
     count,
     maxCount = 99,
     dot = false,
-    size = "md",
-    color = "xplat-red-500",
-    className
+    size = "md"
   } = props;
-  const colorClass = color;
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-badge", size, className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", colorClass, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
   ] });
 };
 Badge.displayName = "Badge";

package/dist/components/Breadcrumb/index.cjs

@@ -24,27 +24,11 @@ __export(Breadcrumb_exports, {
 });
 module.exports = __toCommonJS(Breadcrumb_exports);
 
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/components/Breadcrumb/Breadcrumb.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Breadcrumb = (props) => {
-  const { items, separator = "/", className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: clsx_default("lib-xplat-breadcrumb", className), "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { children: items.map((item, index) => {
+  const { items, separator = "/" } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "lib-xplat-breadcrumb", "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
       isLast ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "link", onClick: item.onClick, children: item.label }),

package/dist/components/Breadcrumb/index.css

@@ -5,17 +5,17 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: 4px;
+  gap: var(--spacing-space-1);
   flex-wrap: wrap;
 }
 .lib-xplat-breadcrumb li {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-space-1);
   font-size: 14px;
 }
 .lib-xplat-breadcrumb .link {
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   text-decoration: none;
   background: none;
   border: none;
@@ -25,13 +25,13 @@
   transition: color 0.2s;
 }
 .lib-xplat-breadcrumb .link:hover {
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-breadcrumb .current {
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   font-weight: 500;
 }
 .lib-xplat-breadcrumb .separator {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-subtle);
   user-select: none;
 }

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

@@ -8,7 +8,6 @@ interface BreadcrumbItem {
 interface BreadcrumbProps {
     items: BreadcrumbItem[];
     separator?: React.ReactNode;
-    className?: string;
 }
 declare const Breadcrumb: React.FC<BreadcrumbProps>;
 

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

@@ -8,7 +8,6 @@ interface BreadcrumbItem {
 interface BreadcrumbProps {
     items: BreadcrumbItem[];
     separator?: React.ReactNode;
-    className?: string;
 }
 declare const Breadcrumb: React.FC<BreadcrumbProps>;
 

package/dist/components/Breadcrumb/index.js

@@ -1,24 +1,8 @@
-// ../../node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/components/Breadcrumb/Breadcrumb.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var Breadcrumb = (props) => {
-  const { items, separator = "/", className } = props;
-  return /* @__PURE__ */ jsx("nav", { className: clsx_default("lib-xplat-breadcrumb", className), "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ jsx("ol", { children: items.map((item, index) => {
+  const { items, separator = "/" } = props;
+  return /* @__PURE__ */ jsx("nav", { className: "lib-xplat-breadcrumb", "aria-label": "\uACBD\uB85C", children: /* @__PURE__ */ jsx("ol", { children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { children: [
       isLast ? /* @__PURE__ */ jsx("span", { className: "current", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx("a", { href: item.href, className: "link", children: item.label }) : /* @__PURE__ */ jsx("button", { className: "link", onClick: item.onClick, children: item.label }),

package/dist/components/Button/index.cjs

@@ -47,16 +47,13 @@ var Button = (props) => {
     children,
     type = "primary",
     size = "md",
-    color = "xplat-black",
     disabled,
-    className,
     ...rest
   } = props;
-  const colorClass = color;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: clsx_default("lib-xplat-button", type, size, colorClass, className),
+      className: clsx_default("lib-xplat-button", type, size),
       disabled,
       ...rest,
       children