@x-plat/design-system 0.7.2 → 0.8.0

package/dist/components/AutoResizeTextArea/index.css

@@ -21,6 +21,8 @@
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
   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-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/Button/index.css

@@ -39,7 +39,8 @@
   font-weight: var(--semantic-typo-label-1-m-weight);
   letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
-.lib-xplat-button:disabled {
+.lib-xplat-button:disabled,
+.lib-xplat-button.disabled {
   cursor: not-allowed;
   background-color: var(--semantic-surface-neutral-disabled) !important;
   border-color: var(--semantic-surface-neutral-disabled) !important;

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

@@ -9,6 +9,12 @@ interface ButtonProps extends Omit<ButtonAttributes, "className"> {
     type?: ButtonType;
     size?: ButtonSize;
 }
+/**
+ * 버튼은 `<button>` 으로만 렌더된다. 누르면 **무언가 일어나는** 자리에 쓴다.
+ *
+ * 이동하는 자리는 버튼이 아니라 링크다. 버튼처럼 보여야 하면 `LinkButton`,
+ * 본문 속 텍스트 링크는 `Link` 를 쓴다.
+ */
 declare const Button: {
     (props: ButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;

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

@@ -9,6 +9,12 @@ interface ButtonProps extends Omit<ButtonAttributes, "className"> {
     type?: ButtonType;
     size?: ButtonSize;
 }
+/**
+ * 버튼은 `<button>` 으로만 렌더된다. 누르면 **무언가 일어나는** 자리에 쓴다.
+ *
+ * 이동하는 자리는 버튼이 아니라 링크다. 버튼처럼 보여야 하면 `LinkButton`,
+ * 본문 속 텍스트 링크는 `Link` 를 쓴다.
+ */
 declare const Button: {
     (props: ButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;

package/dist/components/Chart/index.cjs

@@ -172,9 +172,16 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
+var formatTick = (value, maxVal) => {
+  const step = maxVal / 4;
+  if (!Number.isFinite(step) || step <= 0) return "0";
+  const decimals = step >= 1 ? 0 : Math.min(4, Math.ceil(-Math.log10(step)));
+  const fixed = value.toFixed(decimals);
+  return decimals === 0 ? Number(fixed).toLocaleString("en-US") : fixed;
+};
 var GridLines = import_react.default.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
-  const val = Math.round(maxVal * ratio);
+  const val = formatTick(maxVal * ratio, maxVal);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })

package/dist/components/Chart/index.js

@@ -136,9 +136,16 @@ var useChartTooltip = (enabled) => {
   }, []);
   return { tooltip, show, hide, move, containerRef };
 };
+var formatTick = (value, maxVal) => {
+  const step = maxVal / 4;
+  if (!Number.isFinite(step) || step <= 0) return "0";
+  const decimals = step >= 1 ? 0 : Math.min(4, Math.ceil(-Math.log10(step)));
+  const fixed = value.toFixed(decimals);
+  return decimals === 0 ? Number(fixed).toLocaleString("en-US") : fixed;
+};
 var GridLines = React.memo(({ width, height, chartH, maxVal }) => /* @__PURE__ */ jsx(Fragment, { children: [0, 0.25, 0.5, 0.75, 1].map((ratio) => {
   const y = PADDING.top + (1 - ratio) * chartH;
-  const val = Math.round(maxVal * ratio);
+  const val = formatTick(maxVal * ratio, maxVal);
   return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx("line", { x1: PADDING.left, y1: y, x2: width - PADDING.right, y2: y, className: "chart-grid" }),
     /* @__PURE__ */ jsx("text", { x: PADDING.left - 8, y: y + 4, className: "chart-axis-label", textAnchor: "end", children: val })

package/dist/components/ChatInput/index.css

@@ -99,6 +99,8 @@
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
   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-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -144,6 +146,8 @@
 .lib-xplat-chat-input:focus-within {
   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-chat-input.disabled {
   background-color: var(--semantic-surface-neutral-secondary);

package/dist/components/DatePicker/index.css

@@ -39,7 +39,8 @@
   font-weight: var(--semantic-typo-label-1-m-weight);
   letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
-.lib-xplat-button:disabled {
+.lib-xplat-button:disabled,
+.lib-xplat-button.disabled {
   cursor: not-allowed;
   background-color: var(--semantic-surface-neutral-disabled) !important;
   border-color: var(--semantic-surface-neutral-disabled) !important;
@@ -127,6 +128,8 @@
 .lib-xplat-input-wrap .lib-xplat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/Input/index.css

@@ -21,6 +21,8 @@
 .lib-xplat-input-wrap .lib-xplat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/Link/index.cjs

@@ -0,0 +1,64 @@
+"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/Link/index.ts
+var Link_exports = {};
+__export(Link_exports, {
+  Link: () => Link_default
+});
+module.exports = __toCommonJS(Link_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/Link/Link.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Link = (props) => {
+  const { children, href, underline = "always", target, rel, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      className: clsx_default("lib-xplat-link", `underline-${underline}`),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+Link.displayName = "Link";
+var Link_default = Link;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Link
+});

package/dist/components/Link/index.css

@@ -0,0 +1,25 @@
+/* src/components/Link/link.scss */
+.lib-xplat-link {
+  color: var(--semantic-text-link);
+  cursor: pointer;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  border-radius: var(--spacing-radius-sm);
+  transition: text-decoration-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.lib-xplat-link.underline-always {
+  text-decoration: underline;
+}
+.lib-xplat-link.underline-hover {
+  text-decoration: none;
+}
+.lib-xplat-link.underline-hover:hover {
+  text-decoration: underline;
+}
+.lib-xplat-link.underline-none {
+  text-decoration: none;
+}
+.lib-xplat-link:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type Underline = "always" | "hover" | "none";
+interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "href"> {
+    children: React.ReactNode;
+    href: string;
+    /**
+     * 밑줄 표시 방식. 기본은 `"always"`.
+     *
+     * 본문 속 링크는 색만으로 구분하면 색각 이상이 있는 사용자가 놓친다.
+     * 주변 텍스트와 확실히 구분되는 자리(내비게이션·목록 등)에서만 `"hover"` 나
+     * `"none"` 으로 내린다.
+     */
+    underline?: Underline;
+}
+/**
+ * 본문 속 텍스트 링크. 크기·굵기는 주변 텍스트를 그대로 물려받는다.
+ *
+ * 버튼처럼 보여야 하는 링크는 `LinkButton` 을 쓴다.
+ */
+declare const Link: {
+    (props: LinkProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Link };

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

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type Underline = "always" | "hover" | "none";
+interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "href"> {
+    children: React.ReactNode;
+    href: string;
+    /**
+     * 밑줄 표시 방식. 기본은 `"always"`.
+     *
+     * 본문 속 링크는 색만으로 구분하면 색각 이상이 있는 사용자가 놓친다.
+     * 주변 텍스트와 확실히 구분되는 자리(내비게이션·목록 등)에서만 `"hover"` 나
+     * `"none"` 으로 내린다.
+     */
+    underline?: Underline;
+}
+/**
+ * 본문 속 텍스트 링크. 크기·굵기는 주변 텍스트를 그대로 물려받는다.
+ *
+ * 버튼처럼 보여야 하는 링크는 `LinkButton` 을 쓴다.
+ */
+declare const Link: {
+    (props: LinkProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Link };

package/dist/components/Link/index.js

@@ -0,0 +1,37 @@
+// ../../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/Link/Link.tsx
+import { jsx } from "react/jsx-runtime";
+var Link = (props) => {
+  const { children, href, underline = "always", target, rel, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: clsx_default("lib-xplat-link", `underline-${underline}`),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+Link.displayName = "Link";
+var Link_default = Link;
+export {
+  Link_default as Link
+};

package/dist/components/LinkButton/index.cjs

@@ -0,0 +1,64 @@
+"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/LinkButton/index.ts
+var LinkButton_exports = {};
+__export(LinkButton_exports, {
+  LinkButton: () => LinkButton_default
+});
+module.exports = __toCommonJS(LinkButton_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/LinkButton/LinkButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LinkButton = (props) => {
+  const { children, href, type = "primary", size = "md", target, rel, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      className: clsx_default("lib-xplat-button", type, size),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+LinkButton.displayName = "LinkButton";
+var LinkButton_default = LinkButton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LinkButton
+});

package/dist/components/LinkButton/index.css

@@ -0,0 +1,106 @@
+/* src/components/Button/button.scss */
+.lib-xplat-button {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-space-2);
+  white-space: nowrap;
+  border-radius: var(--spacing-radius-md);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.lib-xplat-button.sm {
+  height: var(--spacing-control-height-sm);
+  padding: 0 var(--spacing-space-3);
+  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-button.md {
+  height: var(--spacing-control-height-md);
+  padding: 0 var(--spacing-space-4);
+  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-button.lg {
+  height: var(--spacing-control-height-lg);
+  padding: 0 var(--spacing-space-6);
+  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-button:disabled,
+.lib-xplat-button.disabled {
+  cursor: not-allowed;
+  background-color: var(--semantic-surface-neutral-disabled) !important;
+  border-color: var(--semantic-surface-neutral-disabled) !important;
+  color: var(--semantic-text-disabled) !important;
+}
+.lib-xplat-button.primary {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-button.primary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-button.primary:active:not(:disabled) {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-button.primary:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-button.secondary {
+  color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border-color: var(--semantic-border-primary);
+}
+.lib-xplat-button.secondary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-secondary);
+}
+.lib-xplat-button.secondary:active:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-tertiary);
+}
+.lib-xplat-button.secondary:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-button.danger {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-button.danger:hover:not(:disabled) {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-button.danger:active:not(:disabled) {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-button.danger:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-button.ghost {
+  color: var(--semantic-text-secondary);
+  background-color: transparent;
+  border-color: transparent;
+}
+.lib-xplat-button.ghost:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-secondary);
+}
+.lib-xplat-button.ghost:active:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-button.ghost:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type LinkButtonType = "primary" | "secondary" | "danger" | "ghost";
+type LinkButtonSize = "sm" | "md" | "lg";
+interface LinkButtonProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "color" | "href"> {
+    children: React.ReactNode;
+    href: string;
+    type?: LinkButtonType;
+    size?: LinkButtonSize;
+}
+/**
+ * 버튼처럼 보이지만 **이동하는** 링크. `<a>` 로 렌더된다.
+ *
+ * 우클릭 메뉴·새 탭으로 열기·링크 미리보기가 동작해야 하는 자리에 쓴다.
+ * `<button>` 으로 만들면 그게 전부 막힌다.
+ *
+ * 누르면 무언가 **일어나는** 자리는 `Button`, 본문 속 텍스트 링크는 `Link` 다.
+ *
+ * `width: 100%` 가 들어 있어 부모를 꽉 채운다. 내용만큼만 차지해야 하면
+ * 감싸는 요소에 `width: fit-content` 를 준다.
+ */
+declare const LinkButton: {
+    (props: LinkButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { LinkButton };

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

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type LinkButtonType = "primary" | "secondary" | "danger" | "ghost";
+type LinkButtonSize = "sm" | "md" | "lg";
+interface LinkButtonProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "color" | "href"> {
+    children: React.ReactNode;
+    href: string;
+    type?: LinkButtonType;
+    size?: LinkButtonSize;
+}
+/**
+ * 버튼처럼 보이지만 **이동하는** 링크. `<a>` 로 렌더된다.
+ *
+ * 우클릭 메뉴·새 탭으로 열기·링크 미리보기가 동작해야 하는 자리에 쓴다.
+ * `<button>` 으로 만들면 그게 전부 막힌다.
+ *
+ * 누르면 무언가 **일어나는** 자리는 `Button`, 본문 속 텍스트 링크는 `Link` 다.
+ *
+ * `width: 100%` 가 들어 있어 부모를 꽉 채운다. 내용만큼만 차지해야 하면
+ * 감싸는 요소에 `width: fit-content` 를 준다.
+ */
+declare const LinkButton: {
+    (props: LinkButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { LinkButton };

package/dist/components/LinkButton/index.js

@@ -0,0 +1,37 @@
+// ../../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/LinkButton/LinkButton.tsx
+import { jsx } from "react/jsx-runtime";
+var LinkButton = (props) => {
+  const { children, href, type = "primary", size = "md", target, rel, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: clsx_default("lib-xplat-button", type, size),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+LinkButton.displayName = "LinkButton";
+var LinkButton_default = LinkButton;
+export {
+  LinkButton_default as LinkButton
+};

package/dist/components/TextArea/index.css

@@ -44,6 +44,8 @@
 .lib-xplat-textarea-wrap .lib-xplat-textarea:focus {
   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-textarea-wrap .lib-xplat-textarea:not(:placeholder-shown):not(:focus) {
   border-color: var(--semantic-border-tertiary);