@x-plat/design-system 0.7.0 → 0.7.2

package/dist/components/AutoResizeTextArea/index.css

@@ -13,7 +13,7 @@
   overflow: hidden;
   background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/Badge/index.cjs

@@ -20,7 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Badge/index.ts
 var Badge_exports = {};
 __export(Badge_exports, {
-  Badge: () => Badge_default
+  Badge: () => NotificationBadge_default,
+  NotificationBadge: () => NotificationBadge_default,
+  default: () => NotificationBadge_default
 });
 module.exports = __toCommonJS(Badge_exports);
 
@@ -40,9 +42,9 @@ function clsx() {
 }
 var clsx_default = clsx;
 
-// src/components/Badge/Badge.tsx
+// src/components/NotificationBadge/NotificationBadge.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Badge = (props) => {
+var NotificationBadge = (props) => {
   const {
     children,
     type = "error",
@@ -53,14 +55,15 @@ var Badge = (props) => {
   } = 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-badge", size), children: [
+  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 })
   ] });
 };
-Badge.displayName = "Badge";
-var Badge_default = Badge;
+NotificationBadge.displayName = "NotificationBadge";
+var NotificationBadge_default = NotificationBadge;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Badge
+  Badge,
+  NotificationBadge
 });

package/dist/components/Badge/index.css

@@ -1,9 +1,9 @@
-/* src/components/Badge/badge.scss */
-.lib-xplat-badge {
+/* src/components/NotificationBadge/notificationBadge.scss */
+.lib-xplat-notification-badge {
   position: relative;
   display: inline-flex;
 }
-.lib-xplat-badge.sm .badge-indicator {
+.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);
@@ -13,11 +13,11 @@
   letter-spacing: var(--semantic-typo-caption-2-r-ls);
   padding: 0 var(--spacing-space-1);
 }
-.lib-xplat-badge.sm .badge-indicator.dot {
+.lib-xplat-notification-badge.sm .badge-indicator.dot {
   min-width: var(--spacing-space-2);
   height: var(--spacing-space-2);
 }
-.lib-xplat-badge.lg .badge-indicator {
+.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);
@@ -27,11 +27,11 @@
   letter-spacing: var(--semantic-typo-caption-1-r-ls);
   padding: 0 var(--spacing-space-2);
 }
-.lib-xplat-badge.lg .badge-indicator.dot {
+.lib-xplat-notification-badge.lg .badge-indicator.dot {
   min-width: var(--spacing-space-2);
   height: var(--spacing-space-2);
 }
-.lib-xplat-badge .badge-indicator {
+.lib-xplat-notification-badge .badge-indicator {
   position: absolute;
   top: 0;
   right: 0;
@@ -52,24 +52,24 @@
   padding: 0 var(--spacing-space-1);
   box-sizing: border-box;
 }
-.lib-xplat-badge .badge-indicator.dot {
+.lib-xplat-notification-badge .badge-indicator.dot {
   min-width: var(--spacing-space-2);
   height: var(--spacing-space-2);
   padding: 0;
 }
-.lib-xplat-badge .badge-indicator.error {
+.lib-xplat-notification-badge .badge-indicator.error {
   background-color: var(--semantic-surface-error-default);
 }
-.lib-xplat-badge .badge-indicator.success {
+.lib-xplat-notification-badge .badge-indicator.success {
   background-color: var(--semantic-surface-success-default);
 }
-.lib-xplat-badge .badge-indicator.warning {
+.lib-xplat-notification-badge .badge-indicator.warning {
   background-color: var(--semantic-surface-warning-default);
   color: var(--semantic-text-primary);
 }
-.lib-xplat-badge .badge-indicator.info {
+.lib-xplat-notification-badge .badge-indicator.info {
   background-color: var(--semantic-surface-info-default);
 }
-.lib-xplat-badge .badge-indicator.brand {
+.lib-xplat-notification-badge .badge-indicator.brand {
   background-color: var(--semantic-surface-brand-default);
 }

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

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

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

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

package/dist/components/Badge/index.js

@@ -14,9 +14,9 @@ function clsx() {
 }
 var clsx_default = clsx;
 
-// src/components/Badge/Badge.tsx
+// src/components/NotificationBadge/NotificationBadge.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var Badge = (props) => {
+var NotificationBadge = (props) => {
   const {
     children,
     type = "error",
@@ -27,13 +27,15 @@ var Badge = (props) => {
   } = 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-badge", size), children: [
+  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 })
   ] });
 };
-Badge.displayName = "Badge";
-var Badge_default = Badge;
+NotificationBadge.displayName = "NotificationBadge";
+var NotificationBadge_default = NotificationBadge;
 export {
-  Badge_default as Badge
+  NotificationBadge_default as Badge,
+  NotificationBadge_default as NotificationBadge,
+  NotificationBadge_default as default
 };

package/dist/components/ChatInput/index.css

@@ -91,7 +91,7 @@
   overflow: hidden;
   background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -136,7 +136,7 @@
   border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-lg);
   background-color: var(--semantic-surface-neutral-primary);
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/DatePicker/index.css

@@ -119,7 +119,7 @@
   background-color: var(--semantic-surface-neutral-primary);
   padding-right: var(--spacing-space-2);
   width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/Input/index.css

@@ -13,7 +13,7 @@
   background-color: var(--semantic-surface-neutral-primary);
   padding-right: var(--spacing-space-2);
   width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);

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/Select/index.css

@@ -48,7 +48,7 @@
   border-radius: var(--spacing-radius-md);
   background-color: var(--semantic-surface-neutral-primary);
   color: var(--semantic-text-primary);
-  transition: border-color 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-select .select-trigger:hover:not(.disabled) {
   border-color: var(--semantic-border-tertiary);
@@ -57,7 +57,9 @@
   border-color: var(--semantic-interaction-focus-ring);
 }
 .lib-xplat-select .select-trigger:focus-visible {
-  outline: 2px solid var(--semantic-interaction-focus-ring);
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
   outline-offset: 2px;
 }
 .lib-xplat-select .select-trigger.disabled {

package/dist/components/Table/index.cjs

@@ -134,6 +134,7 @@ var TableCell = import_react4.default.memo((props) => {
     width,
     nowrap = false,
     scope = "col",
+    colSpan,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -182,6 +183,7 @@ var TableCell = import_react4.default.memo((props) => {
         nowrap && "nowrap"
       ),
       scope: isHeaderCell ? scope : void 0,
+      colSpan,
       style: {
         ...isSticky ? { left } : null,
         ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null

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

@@ -31,6 +31,8 @@ interface TableCellProps {
     nowrap?: boolean;
     /** th 로 렌더될 때의 scope. 기본 "col" (thead 안에서만 의미가 있다) */
     scope?: "col" | "row";
+    /** 가로로 합칠 칸 수. 합계 행처럼 표 안에서 칸을 합칠 때 쓴다 */
+    colSpan?: number;
     onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
 }
 declare const TableCell: React.NamedExoticComponent<TableCellProps>;

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

@@ -31,6 +31,8 @@ interface TableCellProps {
     nowrap?: boolean;
     /** th 로 렌더될 때의 scope. 기본 "col" (thead 안에서만 의미가 있다) */
     scope?: "col" | "row";
+    /** 가로로 합칠 칸 수. 합계 행처럼 표 안에서 칸을 합칠 때 쓴다 */
+    colSpan?: number;
     onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
 }
 declare const TableCell: React.NamedExoticComponent<TableCellProps>;

package/dist/components/Table/index.js

@@ -94,6 +94,7 @@ var TableCell = React4.memo((props) => {
     width,
     nowrap = false,
     scope = "col",
+    colSpan,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -142,6 +143,7 @@ var TableCell = React4.memo((props) => {
         nowrap && "nowrap"
       ),
       scope: isHeaderCell ? scope : void 0,
+      colSpan,
       style: {
         ...isSticky ? { left } : null,
         ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null

package/dist/components/TextArea/index.css

@@ -12,7 +12,7 @@
   color: var(--semantic-text-secondary);
   font-family: inherit;
   outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea.sm {
   padding: var(--spacing-space-2) var(--spacing-space-3);