@x-plat/design-system 0.6.1 → 0.7.1

package/dist/components/Input/index.css

@@ -27,18 +27,27 @@
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
   height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.md {
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.lg {
   height: var(--spacing-control-height-lg);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-input-wrap .lib-xplat-input.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
@@ -80,8 +89,11 @@
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
   display: flex;
   gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
   line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
   align-items: center;
   user-select: none;
 }

package/dist/components/Modal/index.css

@@ -29,7 +29,7 @@
   align-items: center;
   justify-content: center;
   opacity: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--semantic-interaction-overlay-50);
   transition: opacity 0.2s ease;
 }
 .lib-xplat-modal.dim.enter {

package/dist/components/NotificationBadge/index.cjs

@@ -0,0 +1,68 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/NotificationBadge/index.ts
+var NotificationBadge_exports = {};
+__export(NotificationBadge_exports, {
+  Badge: () => NotificationBadge_default,
+  NotificationBadge: () => NotificationBadge_default
+});
+module.exports = __toCommonJS(NotificationBadge_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/NotificationBadge/NotificationBadge.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var NotificationBadge = (props) => {
+  const {
+    children,
+    type = "error",
+    count,
+    maxCount = 99,
+    dot = false,
+    size = "md"
+  } = props;
+  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-notification-badge", size), children: [
+    children,
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+  ] });
+};
+NotificationBadge.displayName = "NotificationBadge";
+var NotificationBadge_default = NotificationBadge;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  NotificationBadge
+});

package/dist/components/NotificationBadge/index.css

@@ -0,0 +1,75 @@
+/* src/components/NotificationBadge/notificationBadge.scss */
+.lib-xplat-notification-badge {
+  position: relative;
+  display: inline-flex;
+}
+.lib-xplat-notification-badge.sm .badge-indicator {
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  padding: 0 var(--spacing-space-1);
+}
+.lib-xplat-notification-badge.sm .badge-indicator.dot {
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
+}
+.lib-xplat-notification-badge.lg .badge-indicator {
+  min-width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+  padding: 0 var(--spacing-space-2);
+}
+.lib-xplat-notification-badge.lg .badge-indicator.dot {
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
+}
+.lib-xplat-notification-badge .badge-indicator {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--spacing-radius-full);
+  color: var(--semantic-text-inverse);
+  font-family: var(--semantic-typo-caption-2-sb-font);
+  font-size: var(--semantic-typo-caption-2-sb-size);
+  line-height: var(--semantic-typo-caption-2-sb-lh);
+  font-weight: var(--semantic-typo-caption-2-sb-weight);
+  letter-spacing: var(--semantic-typo-caption-2-sb-ls);
+  line-height: 1;
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
+  padding: 0 var(--spacing-space-1);
+  box-sizing: border-box;
+}
+.lib-xplat-notification-badge .badge-indicator.dot {
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
+  padding: 0;
+}
+.lib-xplat-notification-badge .badge-indicator.error {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-notification-badge .badge-indicator.success {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-notification-badge .badge-indicator.warning {
+  background-color: var(--semantic-surface-warning-default);
+  color: var(--semantic-text-primary);
+}
+.lib-xplat-notification-badge .badge-indicator.info {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-notification-badge .badge-indicator.brand {
+  background-color: var(--semantic-surface-brand-default);
+}

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

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type NotificationBadgeType = "error" | "success" | "warning" | "info" | "brand";
+type NotificationBadgeSize = "sm" | "md" | "lg";
+/**
+ * 알림 뱃지 — 다른 요소의 **우상단 모서리에 얹히는** 작은 원.
+ *
+ * 아이콘이나 버튼 위에 읽지 않은 개수나 상태 점을 표시한다.
+ * 뱃지 자체는 `.badge-indicator` 하나이고, `children` 은 그 뱃지가 올라탈 대상이다.
+ *
+ * ```tsx
+ * <NotificationBadge count={3}><BellIcon /></NotificationBadge>
+ * <NotificationBadge dot type="error"><UserIcon /></NotificationBadge>
+ * ```
+ *
+ * 알약 모양 상태 라벨이 필요하면 이 컴포넌트가 아니라 `Chip`(정보 표시) 또는
+ * `Tag`(제거 가능)를 쓴다. `<NotificationBadge>진행중</NotificationBadge>` 처럼
+ * 쓰면 `count`/`dot` 이 없어 뱃지가 렌더되지 않고 글자만 그대로 통과한다.
+ */
+interface NotificationBadgeProps {
+    /**
+     * 뱃지가 올라탈 **대상**. 뱃지에 표시할 내용이 아니다.
+     * 보통 아이콘이나 버튼을 넣는다.
+     */
+    children: React.ReactNode;
+    /**
+     * 표시할 개수. `count` 나 `dot` 중 하나가 없으면 **뱃지가 렌더되지 않는다**
+     * (`type` 을 줘도 아무 일도 일어나지 않는다).
+     * `count={0}` 도 표시하지 않는다 — 읽지 않은 항목이 없으면 숨기는 동작이다.
+     */
+    count?: number;
+    /** 개수 대신 점만 표시한다. `count` 없이 "새 항목 있음" 만 알릴 때 쓴다 */
+    dot?: boolean;
+    /** 뱃지 색. 뱃지가 렌더될 때만 의미가 있다 */
+    type?: NotificationBadgeType;
+    /** `count` 가 이 값을 넘으면 `99+` 처럼 표시한다 */
+    maxCount?: number;
+    /** 뱃지 크기. 대상의 크기가 아니다 */
+    size?: NotificationBadgeSize;
+}
+declare const NotificationBadge: {
+    (props: NotificationBadgeProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { NotificationBadge as Badge, NotificationBadge };

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

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type NotificationBadgeType = "error" | "success" | "warning" | "info" | "brand";
+type NotificationBadgeSize = "sm" | "md" | "lg";
+/**
+ * 알림 뱃지 — 다른 요소의 **우상단 모서리에 얹히는** 작은 원.
+ *
+ * 아이콘이나 버튼 위에 읽지 않은 개수나 상태 점을 표시한다.
+ * 뱃지 자체는 `.badge-indicator` 하나이고, `children` 은 그 뱃지가 올라탈 대상이다.
+ *
+ * ```tsx
+ * <NotificationBadge count={3}><BellIcon /></NotificationBadge>
+ * <NotificationBadge dot type="error"><UserIcon /></NotificationBadge>
+ * ```
+ *
+ * 알약 모양 상태 라벨이 필요하면 이 컴포넌트가 아니라 `Chip`(정보 표시) 또는
+ * `Tag`(제거 가능)를 쓴다. `<NotificationBadge>진행중</NotificationBadge>` 처럼
+ * 쓰면 `count`/`dot` 이 없어 뱃지가 렌더되지 않고 글자만 그대로 통과한다.
+ */
+interface NotificationBadgeProps {
+    /**
+     * 뱃지가 올라탈 **대상**. 뱃지에 표시할 내용이 아니다.
+     * 보통 아이콘이나 버튼을 넣는다.
+     */
+    children: React.ReactNode;
+    /**
+     * 표시할 개수. `count` 나 `dot` 중 하나가 없으면 **뱃지가 렌더되지 않는다**
+     * (`type` 을 줘도 아무 일도 일어나지 않는다).
+     * `count={0}` 도 표시하지 않는다 — 읽지 않은 항목이 없으면 숨기는 동작이다.
+     */
+    count?: number;
+    /** 개수 대신 점만 표시한다. `count` 없이 "새 항목 있음" 만 알릴 때 쓴다 */
+    dot?: boolean;
+    /** 뱃지 색. 뱃지가 렌더될 때만 의미가 있다 */
+    type?: NotificationBadgeType;
+    /** `count` 가 이 값을 넘으면 `99+` 처럼 표시한다 */
+    maxCount?: number;
+    /** 뱃지 크기. 대상의 크기가 아니다 */
+    size?: NotificationBadgeSize;
+}
+declare const NotificationBadge: {
+    (props: NotificationBadgeProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { NotificationBadge as Badge, NotificationBadge };

package/dist/components/NotificationBadge/index.js

@@ -0,0 +1,40 @@
+// ../../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/NotificationBadge/NotificationBadge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotificationBadge = (props) => {
+  const {
+    children,
+    type = "error",
+    count,
+    maxCount = 99,
+    dot = false,
+    size = "md"
+  } = props;
+  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-notification-badge", size), children: [
+    children,
+    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+  ] });
+};
+NotificationBadge.displayName = "NotificationBadge";
+var NotificationBadge_default = NotificationBadge;
+export {
+  NotificationBadge_default as Badge,
+  NotificationBadge_default as NotificationBadge
+};

package/dist/components/Pagination/index.css

@@ -7,12 +7,20 @@
 .lib-xplat-pagination.sm .dots {
   width: var(--spacing-control-height-xs);
   height: var(--spacing-control-height-xs);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-pagination.sm .page-btn {
   min-width: var(--spacing-control-height-xs);
   height: var(--spacing-control-height-xs);
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
 .lib-xplat-pagination.sm .page-btn svg {
   font-size: var(--semantic-typo-caption-1-r-size);
@@ -20,12 +28,20 @@
 .lib-xplat-pagination.lg .dots {
   width: var(--spacing-control-height-md);
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-pagination.lg .page-btn {
   min-width: var(--spacing-control-height-md);
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-pagination.lg .page-btn svg {
   font-size: var(--semantic-typo-heading-1-m-size);
@@ -36,7 +52,11 @@
   justify-content: center;
   width: var(--spacing-control-height-sm);
   height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   color: var(--semantic-text-tertiary);
   user-select: none;
 }
@@ -50,7 +70,11 @@
   border: none;
   border-radius: var(--spacing-radius-md);
   background: none;
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
   cursor: pointer;
   color: var(--semantic-text-secondary);
   transition: background-color 0.2s, color 0.2s;
@@ -64,7 +88,7 @@
 }
 .lib-xplat-pagination .page-btn.active {
   color: var(--semantic-text-inverse);
-  font-weight: 600;
+  font-weight: var(--semantic-typo-caption-1-sb-weight);
 }
 .lib-xplat-pagination .page-btn svg {
   font-size: var(--semantic-typo-label-2-m-size);

package/dist/components/PopOver/index.css

@@ -13,7 +13,7 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
   background: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-md);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--semantic-shadow-md);
   opacity: 0;
   transform: scale(0.8);
 }

package/dist/components/Progress/index.css

@@ -41,8 +41,11 @@
   background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-progress .label {
-  font-size: var(--semantic-typo-caption-2-r-size);
-  font-weight: 500;
+  font-family: var(--semantic-typo-caption-2-m-font);
+  font-size: var(--semantic-typo-caption-2-m-size);
+  line-height: var(--semantic-typo-caption-2-m-lh);
+  font-weight: var(--semantic-typo-caption-2-m-weight);
+  letter-spacing: var(--semantic-typo-caption-2-m-ls);
   color: var(--semantic-text-secondary);
   min-width: 36px;
   text-align: right;

package/dist/components/Radio/index.css

@@ -20,8 +20,11 @@
   height: var(--spacing-space-2);
 }
 .lib-xplat-radio.sm > span {
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-radio.md > .circle {
   width: var(--spacing-space-5);
@@ -29,8 +32,11 @@
   margin-top: calc((var(--semantic-typo-label-2-m-lh) - var(--spacing-space-5)) / 2);
 }
 .lib-xplat-radio.md > span {
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-radio.lg > .circle {
   width: var(--spacing-space-6);
@@ -41,8 +47,11 @@
   height: var(--spacing-space-4);
 }
 .lib-xplat-radio.lg > span {
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-radio > .circle {
   border: 2px solid var(--semantic-border-tertiary);

package/dist/components/Select/index.css

@@ -11,20 +11,29 @@
 .lib-xplat-select.sm .select-trigger {
   height: var(--spacing-control-height-sm);
   padding: 0 var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-select.md .select-trigger {
   height: var(--spacing-control-height-md);
   padding: 0 var(--spacing-space-3);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-select.lg .select-trigger {
   height: var(--spacing-control-height-lg);
   padding: 0 var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-select .select-trigger {
   cursor: pointer;
@@ -101,7 +110,7 @@
   padding: var(--spacing-space-1) 0;
   border-radius: var(--spacing-radius-md);
   background-color: var(--semantic-surface-neutral-primary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--semantic-shadow-md);
   cursor: default;
   max-height: 220px;
   overflow-y: auto;
@@ -132,25 +141,33 @@
 }
 .lib-xplat-select-content.sm .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
   line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-select-content.lg .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
   line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-select-content .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
-  font-weight: var(--semantic-typo-label-1-m-weight);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
   cursor: pointer;
   transition: background-color 0.15s ease;
   outline: none;
 }
 .lib-xplat-select-content .select-item.is-selected {
-  font-weight: var(--semantic-typo-label-1-sb-weight);
+  font-weight: var(--semantic-typo-label-2-sb-weight);
 }
 .lib-xplat-select-content .select-item:hover:not(.disabled) {
   background-color: var(--semantic-surface-neutral-secondary);

package/dist/components/Steps/index.css

@@ -27,8 +27,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--semantic-typo-caption-1-r-size);
-  font-weight: 600;
+  font-family: var(--semantic-typo-caption-1-sb-font);
+  font-size: var(--semantic-typo-caption-1-sb-size);
+  line-height: var(--semantic-typo-caption-1-sb-lh);
+  font-weight: var(--semantic-typo-caption-1-sb-weight);
+  letter-spacing: var(--semantic-typo-caption-1-sb-ls);
   flex-shrink: 0;
   z-index: 1;
   transition: background-color 0.2s, color 0.2s;
@@ -44,12 +47,19 @@
   text-align: center;
 }
 .lib-xplat-steps .step-title {
-  font-size: var(--semantic-typo-caption-1-r-size);
-  font-weight: 500;
+  font-family: var(--semantic-typo-caption-1-m-font);
+  font-size: var(--semantic-typo-caption-1-m-size);
+  line-height: var(--semantic-typo-caption-1-m-lh);
+  font-weight: var(--semantic-typo-caption-1-m-weight);
+  letter-spacing: var(--semantic-typo-caption-1-m-ls);
   color: var(--semantic-text-primary);
 }
 .lib-xplat-steps .step-description {
+  font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
   color: var(--semantic-text-tertiary);
   margin-top: 2px;
 }

package/dist/components/Switch/index.css

@@ -98,6 +98,6 @@
   transform: translateY(-50%);
   background-color: var(--semantic-surface-neutral-primary);
   border-radius: var(--spacing-radius-full);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--semantic-shadow-sm);
   transition: left 0.25s;
 }

package/dist/components/Tab/index.css

@@ -14,15 +14,27 @@
 }
 .lib-xplat-tab.sm {
   height: var(--spacing-control-height-sm);
+  font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
 .lib-xplat-tab.md {
   height: var(--spacing-control-height-md);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
 }
 .lib-xplat-tab.lg {
   height: var(--spacing-control-height-lg);
+  font-family: var(--semantic-typo-label-1-m-font);
   font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
 .lib-xplat-tab.type-default {
   width: 100%;
@@ -60,8 +72,11 @@
   justify-content: center;
   white-space: nowrap;
   padding: 0 var(--spacing-space-3);
+  font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
-  font-weight: 500;
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
   height: 100%;
   background: none;
   border: none;

package/dist/components/Table/index.cjs

@@ -133,6 +133,8 @@ var TableCell = import_react4.default.memo((props) => {
     isSticky = false,
     width,
     nowrap = false,
+    scope = "col",
+    colSpan,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -164,7 +166,8 @@ var TableCell = import_react4.default.memo((props) => {
     }
     return () => observer.disconnect();
   }, [isSticky, registerStickyCell, calculateLeft]);
-  const CellTag = cellRef.current?.tagName === "TH" ? "th" : "td";
+  const isHeaderCell = headContext !== null;
+  const CellTag = isHeaderCell ? "th" : "td";
   const isLastSticky = isSticky && stickyCells[stickyCells.length - 1] === cellRef;
   const enableHover = headContext && headContext.cellHover;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -179,6 +182,8 @@ var TableCell = import_react4.default.memo((props) => {
         enableHover && "cell-hover",
         nowrap && "nowrap"
       ),
+      scope: isHeaderCell ? scope : void 0,
+      colSpan,
       style: {
         ...isSticky ? { left } : null,
         ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null