moru-krds-react 0.1.0

package/dist/data-table/index.d.ts

@@ -0,0 +1,94 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type KrdsTone } from '../lib/krds';
+/**
+ * 데이터 표 — 킷 `krds-table-wrap` + `tbl data` 위에 정렬·고정 헤더·빈 상태를 얹은 것.
+ *
+ * 열을 `columns` 로 넘겨 목록을 그린다. 표를 손으로 짤 때는 `ui/table` 의 조각을 쓴다.
+ * `caption` 은 **화면에 보이지 않는 보조기기 설명**이다 — 보이는 제목은 `heading` 이다.
+ * 정렬 버튼은 `onSortChange` 를 주었을 때만 그려지고, 행 강조는 `rowTone` 으로만 준다
+ * (`<tr>` 배경은 킷 셀 배경에 덮인다). 빈 셀에는 `-` 가 자동으로 들어간다.
+ *
+ * @example
+ * <DataTable
+ *   caption="공지사항 목록 표로 번호, 제목, 작성자, 등록일 순으로 구성되어 있다."
+ *   heading="공지사항"
+ *   columns={[
+ *     { key: 'title', header: '제목', cell: (r) => r.title, sortable: true },
+ *     { key: 'hit', header: '조회', cell: (r) => r.hit, numeric: true },
+ *   ]}
+ *   rows={rows}
+ *   rowKey={(r) => r.id}
+ *   sort={sort}
+ *   onSortChange={setSort}
+ * />
+ *
+ * 자세히: docs/krds/09-부품-노트.md#데이터표
+ */
+/** 정렬 방향. */
+export type SortDirection = 'asc' | 'desc';
+/** 지금 어느 열을 어느 방향으로 정렬하고 있는가. */
+export type SortState = {
+    /** 열의 `sortKey`(없으면 `key`). */
+    key: string;
+    direction: SortDirection;
+};
+export type DataColumn<T> = {
+    /** React key 이자 기본 정렬 키. */
+    key: string;
+    /** 열 제목. `<th scope="col">` 안에 들어간다. */
+    header: ReactNode;
+    /** 한 칸의 내용. */
+    cell: (row: T, index: number) => ReactNode;
+    /** `cell` 이 빈 값을 돌려줬을 때 넣을 것. 기본 `-`. 정말 비우려면 `null` 을 준다. */
+    empty?: ReactNode;
+    /** 양적 데이터(개수·퍼센트·용량). 오른쪽 정렬 + 자릿수 고정. 날짜·전화번호에는 주지 마라. */
+    numeric?: boolean;
+    /** `<colgroup><col style="width:…">` 로 나간다. */
+    width?: number | string;
+    /** 이 열로 정렬할 수 있는가. `onSortChange` 가 없으면 무시한다. */
+    sortable?: boolean;
+    /** 정렬 키를 열 `key` 와 다르게 둘 때(예: 화면은 `author`, 질의는 `author_name`). */
+    sortKey?: string;
+    /** 이 열을 행 머리글(`<th scope="row">`)로 낸다. 표 단위 `rowHeader` 보다 우선한다. */
+    rowHeader?: boolean;
+    /** 열 제목 칸에만 더할 클래스. */
+    headerClassName?: string;
+    /** 이 열의 데이터 칸에 더할 클래스. */
+    cellClassName?: string;
+};
+export type DataTableProps<T> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    /** 보조기기가 읽을 표 설명. 화면에는 보이지 않는다 — 열 이름을 모두 담아 한 문장으로 적는다. */
+    caption: string;
+    /** 화면에 보이는 제목. 표 바깥에 그린다. */
+    heading?: ReactNode;
+    /** 제목을 어떤 태그로 낼지. 문서 목차에 넣으려면 `h2`~`h5` 를 준다. */
+    headingAs?: 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'div';
+    columns: DataColumn<T>[];
+    rows: T[];
+    rowKey: (row: T, index: number) => string | number;
+    /** 행이 하나도 없을 때 표 안에 그릴 것. 셀 하나가 빈 것은 `column.empty` 가 맡는다. */
+    empty?: ReactNode;
+    /** 첫 열을 행 머리글(`<th scope="row">`)로 낸다. 행마다 이름이 있는 표에 쓴다. */
+    rowHeader?: boolean;
+    /** 행 강조색. 「편집 중」·「실패」처럼 뜻이 있는 강조에만 쓴다. 셀마다 칠한다. */
+    rowTone?: (row: T, index: number) => KrdsTone | undefined;
+    /** `<tr>` 에 더할 클래스. 배경색은 여기 주지 마라 — 킷 셀 배경에 덮인다(`rowTone` 을 쓴다). */
+    rowClassName?: (row: T, index: number) => string | undefined;
+    /** 지금 정렬 상태. `null`/생략이면 정렬 안 함. */
+    sort?: SortState | null;
+    /**
+     * 정렬 헤더를 눌렀을 때. **이 콜백이 있어야 정렬 버튼이 그려진다.**
+     * 정렬 뒤에는 `rows` 만 갈아 끼운다 — 표를 통째로 다시 마운트하면 초점이 날아간다.
+     */
+    onSortChange?: (next: SortState) => void;
+    /** 열 제목 줄을 위에 붙박는다. `maxHeight` 와 같이 줘야 표 안에서 스크롤된다. */
+    stickyHeader?: boolean;
+    /** 표 영역 최대 높이. 주면 세로 스크롤이 생긴다. */
+    maxHeight?: number | string;
+    /** 좁은 화면에서 셀을 줄바꿈하지 않고 가로로 스크롤(킷 `mob-scroll`). 기본 참. */
+    mobileScroll?: boolean;
+    /** 넓은 화면에서도 가로 스크롤(킷 `scroll`). `maxHeight` 와 같이 쓰면 무시한다. */
+    horizontalScroll?: boolean;
+};
+export declare function DataTable<T>({ caption, heading, headingAs: Heading, columns, rows, rowKey, empty, rowHeader, rowTone, rowClassName, sort, onSortChange, stickyHeader, maxHeight, mobileScroll, horizontalScroll, className, ...rest }: DataTableProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data-table/index.tsx"],"names":[],"mappings":"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"}

package/dist/data-table/index.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../lib/krds.js";
+const ROW_TONE = {
+  primary: "bg-primary-surface",
+  secondary: "bg-secondary-surface",
+  gray: "bg-surface-subtler",
+  point: "bg-point-surface",
+  danger: "bg-danger-surface",
+  warning: "bg-warning-surface",
+  success: "bg-success-surface",
+  information: "bg-information-surface"
+};
+function isBlank(value) {
+  if (value === null || value === void 0 || value === "") return true;
+  return Array.isArray(value) && value.length === 0;
+}
+function withPlaceholder(value, empty) {
+  if (!isBlank(value)) return value;
+  return empty === void 0 ? "-" : empty;
+}
+function sortHint(direction) {
+  if (direction === "asc") return "\uC624\uB984\uCC28\uC21C \uC815\uB82C\uB428, \uB204\uB974\uBA74 \uB0B4\uB9BC\uCC28\uC21C \uC815\uB82C";
+  if (direction === "desc") return "\uB0B4\uB9BC\uCC28\uC21C \uC815\uB82C\uB428, \uB204\uB974\uBA74 \uC624\uB984\uCC28\uC21C \uC815\uB82C";
+  return "\uC815\uB82C \uC548 \uD568, \uB204\uB974\uBA74 \uC624\uB984\uCC28\uC21C \uC815\uB82C";
+}
+function DataTable({
+  caption,
+  heading,
+  headingAs: Heading = "div",
+  columns,
+  rows,
+  rowKey,
+  empty = "\uC790\uB8CC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  rowHeader = false,
+  rowTone,
+  rowClassName,
+  sort,
+  onSortChange,
+  stickyHeader = false,
+  maxHeight,
+  mobileScroll = true,
+  horizontalScroll = false,
+  className,
+  ...rest
+}) {
+  const hasWidth = columns.some((c) => c.width !== void 0);
+  const scrolls = maxHeight !== void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cx("flex flex-col gap-2", className), ...rest, children: [
+    heading != null && /* @__PURE__ */ jsx(Heading, { className: "text-heading-xxs font-bold text-fg-bolder", children: heading }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          "krds-table-wrap",
+          mobileScroll && "mob-scroll",
+          // 킷 `.scroll` 은 overflow-y 를 hidden 으로 잠근다 — 세로 스크롤과 같이 쓸 수 없다.
+          horizontalScroll && !scrolls && "scroll",
+          scrolls && "overflow-auto"
+        ),
+        style: scrolls ? { maxHeight } : void 0,
+        children: /* @__PURE__ */ jsxs("table", { className: "tbl col data", style: (horizontalScroll || mobileScroll) && !hasWidth ? { tableLayout: "auto" } : void 0, children: [
+          /* @__PURE__ */ jsx("caption", { children: caption }),
+          hasWidth && /* @__PURE__ */ jsx("colgroup", { children: columns.map((col) => /* @__PURE__ */ jsx("col", { style: col.width !== void 0 ? { width: col.width } : void 0 }, col.key)) }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => {
+            const key = col.sortKey ?? col.key;
+            const direction = sort && sort.key === key ? sort.direction : void 0;
+            const active = direction !== void 0;
+            const canSort = col.sortable === true && onSortChange !== void 0;
+            return /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                "aria-sort": canSort ? active ? direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+                className: cx(
+                  col.numeric && "text-right",
+                  // 킷 thead 배경(`--krds-table--data-thead-surface`)이 불투명이라 그대로 붙박아도 비치지 않는다.
+                  stickyHeader && "sticky top-0 z-10",
+                  col.headerClassName
+                ) || void 0,
+                children: canSort ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: cx(
+                      "inline-flex items-center gap-1 text-left",
+                      col.numeric && "w-full justify-end"
+                    ),
+                    onClick: () => onSortChange?.({ key, direction: direction === "asc" ? "desc" : "asc" }),
+                    children: [
+                      col.header,
+                      /* @__PURE__ */ jsx(
+                        "i",
+                        {
+                          className: cx(
+                            "svg-icon ico-angle size-4 shrink-0 bg-fg-bolder",
+                            direction === "asc" && "up",
+                            !active && "opacity-40"
+                          ),
+                          "aria-hidden": "true"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: sortHint(direction) })
+                    ]
+                  }
+                ) : col.header
+              },
+              col.key
+            );
+          }) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "py-10 text-center text-fg-subtle", children: empty }) }) : rows.map((row, i) => {
+            const tone = rowTone?.(row, i);
+            const toneClass = tone && ROW_TONE[tone];
+            return /* @__PURE__ */ jsx("tr", { className: rowClassName?.(row, i), children: columns.map((col, j) => {
+              const asRowHeader = col.rowHeader ?? (rowHeader && j === 0);
+              const cellClass = cx(col.numeric && "text-right tabular-nums", toneClass, col.cellClassName) || void 0;
+              const content = withPlaceholder(col.cell(row, i), col.empty);
+              return asRowHeader ? /* @__PURE__ */ jsx("th", { scope: "row", className: cx("font-bold", cellClass), children: content }, col.key) : /* @__PURE__ */ jsx("td", { className: cellClass, children: content }, col.key);
+            }) }, rowKey(row, i));
+          }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  DataTable
+};
+//# sourceMappingURL=index.js.map

package/dist/data-table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data-table/index.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cx, type KrdsTone } from '../lib/krds';\n\n/**\n * 데이터 표 — 킷 `krds-table-wrap` + `tbl data` 위에 정렬·고정 헤더·빈 상태를 얹은 것.\n *\n * 열을 `columns` 로 넘겨 목록을 그린다. 표를 손으로 짤 때는 `ui/table` 의 조각을 쓴다.\n * `caption` 은 **화면에 보이지 않는 보조기기 설명**이다 — 보이는 제목은 `heading` 이다.\n * 정렬 버튼은 `onSortChange` 를 주었을 때만 그려지고, 행 강조는 `rowTone` 으로만 준다\n * (`<tr>` 배경은 킷 셀 배경에 덮인다). 빈 셀에는 `-` 가 자동으로 들어간다.\n *\n * @example\n * <DataTable\n *   caption=\"공지사항 목록 표로 번호, 제목, 작성자, 등록일 순으로 구성되어 있다.\"\n *   heading=\"공지사항\"\n *   columns={[\n *     { key: 'title', header: '제목', cell: (r) => r.title, sortable: true },\n *     { key: 'hit', header: '조회', cell: (r) => r.hit, numeric: true },\n *   ]}\n *   rows={rows}\n *   rowKey={(r) => r.id}\n *   sort={sort}\n *   onSortChange={setSort}\n * />\n *\n * 자세히: docs/krds/09-부품-노트.md#데이터표\n */\n\n/** 정렬 방향. */\nexport type SortDirection = 'asc' | 'desc';\n\n/** 지금 어느 열을 어느 방향으로 정렬하고 있는가. */\nexport type SortState = {\n  /** 열의 `sortKey`(없으면 `key`). */\n  key: string;\n  direction: SortDirection;\n};\n\nexport type DataColumn<T> = {\n  /** React key 이자 기본 정렬 키. */\n  key: string;\n  /** 열 제목. `<th scope=\"col\">` 안에 들어간다. */\n  header: ReactNode;\n  /** 한 칸의 내용. */\n  cell: (row: T, index: number) => ReactNode;\n  /** `cell` 이 빈 값을 돌려줬을 때 넣을 것. 기본 `-`. 정말 비우려면 `null` 을 준다. */\n  empty?: ReactNode;\n  /** 양적 데이터(개수·퍼센트·용량). 오른쪽 정렬 + 자릿수 고정. 날짜·전화번호에는 주지 마라. */\n  numeric?: boolean;\n  /** `<colgroup><col style=\"width:…\">` 로 나간다. */\n  width?: number | string;\n  /** 이 열로 정렬할 수 있는가. `onSortChange` 가 없으면 무시한다. */\n  sortable?: boolean;\n  /** 정렬 키를 열 `key` 와 다르게 둘 때(예: 화면은 `author`, 질의는 `author_name`). */\n  sortKey?: string;\n  /** 이 열을 행 머리글(`<th scope=\"row\">`)로 낸다. 표 단위 `rowHeader` 보다 우선한다. */\n  rowHeader?: boolean;\n  /** 열 제목 칸에만 더할 클래스. */\n  headerClassName?: string;\n  /** 이 열의 데이터 칸에 더할 클래스. */\n  cellClassName?: string;\n};\n\nexport type DataTableProps<T> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** 보조기기가 읽을 표 설명. 화면에는 보이지 않는다 — 열 이름을 모두 담아 한 문장으로 적는다. */\n  caption: string;\n  /** 화면에 보이는 제목. 표 바깥에 그린다. */\n  heading?: ReactNode;\n  /** 제목을 어떤 태그로 낼지. 문서 목차에 넣으려면 `h2`~`h5` 를 준다. */\n  headingAs?: 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'div';\n  columns: DataColumn<T>[];\n  rows: T[];\n  rowKey: (row: T, index: number) => string | number;\n  /** 행이 하나도 없을 때 표 안에 그릴 것. 셀 하나가 빈 것은 `column.empty` 가 맡는다. */\n  empty?: ReactNode;\n  /** 첫 열을 행 머리글(`<th scope=\"row\">`)로 낸다. 행마다 이름이 있는 표에 쓴다. */\n  rowHeader?: boolean;\n  /** 행 강조색. 「편집 중」·「실패」처럼 뜻이 있는 강조에만 쓴다. 셀마다 칠한다. */\n  rowTone?: (row: T, index: number) => KrdsTone | undefined;\n  /** `<tr>` 에 더할 클래스. 배경색은 여기 주지 마라 — 킷 셀 배경에 덮인다(`rowTone` 을 쓴다). */\n  rowClassName?: (row: T, index: number) => string | undefined;\n  /** 지금 정렬 상태. `null`/생략이면 정렬 안 함. */\n  sort?: SortState | null;\n  /**\n   * 정렬 헤더를 눌렀을 때. **이 콜백이 있어야 정렬 버튼이 그려진다.**\n   * 정렬 뒤에는 `rows` 만 갈아 끼운다 — 표를 통째로 다시 마운트하면 초점이 날아간다.\n   */\n  onSortChange?: (next: SortState) => void;\n  /** 열 제목 줄을 위에 붙박는다. `maxHeight` 와 같이 줘야 표 안에서 스크롤된다. */\n  stickyHeader?: boolean;\n  /** 표 영역 최대 높이. 주면 세로 스크롤이 생긴다. */\n  maxHeight?: number | string;\n  /** 좁은 화면에서 셀을 줄바꿈하지 않고 가로로 스크롤(킷 `mob-scroll`). 기본 참. */\n  mobileScroll?: boolean;\n  /** 넓은 화면에서도 가로 스크롤(킷 `scroll`). `maxHeight` 와 같이 쓰면 무시한다. */\n  horizontalScroll?: boolean;\n};\n\n/** 행 강조색 → 유틸리티. 넓은 면이라 `surface` 축이고, gray 만 짝이 없어 중립 면 토큰을 쓴다. */\nconst ROW_TONE: Record<KrdsTone, string> = {\n  primary: 'bg-primary-surface',\n  secondary: 'bg-secondary-surface',\n  gray: 'bg-surface-subtler',\n  point: 'bg-point-surface',\n  danger: 'bg-danger-surface',\n  warning: 'bg-warning-surface',\n  success: 'bg-success-surface',\n  information: 'bg-information-surface',\n};\n\n/** `-` 로 바꿔야 하는 빈 값인가. `0` 과 `false` 는 값이다. `ui/table` 의 `Td` 와 같은 판정이다. */\nfunction isBlank(value: ReactNode): boolean {\n  if (value === null || value === undefined || value === '') return true;\n  return Array.isArray(value) && value.length === 0;\n}\n\n/** 빈 셀의 대시 플레이스홀더. `empty` 를 `null` 로 주면 정말 비운다. */\nfunction withPlaceholder(value: ReactNode, empty: ReactNode): ReactNode {\n  if (!isBlank(value)) return value;\n  return empty === undefined ? '-' : empty;\n}\n\n/** 정렬 버튼이 스크린리더에 읽어 줄 현재 상태와 다음 동작. */\nfunction sortHint(direction: SortDirection | undefined): string {\n  if (direction === 'asc') return '오름차순 정렬됨, 누르면 내림차순 정렬';\n  if (direction === 'desc') return '내림차순 정렬됨, 누르면 오름차순 정렬';\n  return '정렬 안 함, 누르면 오름차순 정렬';\n}\n\nexport function DataTable<T>({\n  caption,\n  heading,\n  headingAs: Heading = 'div',\n  columns,\n  rows,\n  rowKey,\n  empty = '자료가 없습니다.',\n  rowHeader = false,\n  rowTone,\n  rowClassName,\n  sort,\n  onSortChange,\n  stickyHeader = false,\n  maxHeight,\n  mobileScroll = true,\n  horizontalScroll = false,\n  className,\n  ...rest\n}: DataTableProps<T>) {\n  const hasWidth = columns.some((c) => c.width !== undefined);\n  const scrolls = maxHeight !== undefined;\n\n  return (\n    <div className={cx('flex flex-col gap-2', className)} {...rest}>\n      {heading != null && (\n        <Heading className=\"text-heading-xxs font-bold text-fg-bolder\">{heading}</Heading>\n      )}\n\n      <div\n        className={cx(\n          'krds-table-wrap',\n          mobileScroll && 'mob-scroll',\n          // 킷 `.scroll` 은 overflow-y 를 hidden 으로 잠근다 — 세로 스크롤과 같이 쓸 수 없다.\n          horizontalScroll && !scrolls && 'scroll',\n          scrolls && 'overflow-auto',\n        )}\n        style={scrolls ? { maxHeight } : undefined}\n      >\n        {/* 가로로 스크롤되는 표는 열 폭을 내용에 맞춘다.\n            킷이 `table{table-layout:fixed}` 를 전역으로 못 박아 두어, 폭을 안 주면 열이 전부 같은 너비로 쪼개진다.\n            그 상태에서 `whitespace-nowrap` 을 준 칸(날짜·조작 단추)은 잘리지 않고 **옆 칸 위로 흘러넘쳐** 글자가 겹쳤다\n            (관리자 콘텐츠 목록에서 게시일 141px 이 108px 칸을 넘어 출력기간과 포개졌다).\n            스크롤 상자 안에서는 표가 넓어져도 되므로 `auto` 가 맞다(`mob-scroll` 도 데스크톱에서 overflow-x:auto 다 — 실측).\n            스크롤이 아예 없는 표만 `fixed` 로 둔다 — 거기서는 한 열이 길어지면 나머지를 밀어내므로 균등 분배가 낫다.\n            폭을 손으로 준 표(`hasWidth`)도 건드리지 않는다. */}\n        <table className=\"tbl col data\" style={(horizontalScroll || mobileScroll) && !hasWidth ? { tableLayout: 'auto' } : undefined}>\n          {/* 킷이 !important 로 숨긴다 — 보조기기 전용이다. 보이는 제목은 위 `heading`. */}\n          <caption>{caption}</caption>\n\n          {hasWidth && (\n            <colgroup>\n              {columns.map((col) => (\n                <col key={col.key} style={col.width !== undefined ? { width: col.width } : undefined} />\n              ))}\n            </colgroup>\n          )}\n\n          <thead>\n            <tr>\n              {columns.map((col) => {\n                const key = col.sortKey ?? col.key;\n                const direction = sort && sort.key === key ? sort.direction : undefined;\n                const active = direction !== undefined;\n                const canSort = col.sortable === true && onSortChange !== undefined;\n\n                return (\n                  <th\n                    key={col.key}\n                    scope=\"col\"\n                    // 정렬 가능한 열은 정렬 중이 아니어도 `none` 을 달아야 「정렬할 수 있는 열」임이 전달된다.\n                    aria-sort={\n                      canSort ? (active ? (direction === 'asc' ? 'ascending' : 'descending') : 'none') : undefined\n                    }\n                    className={\n                      cx(\n                        col.numeric && 'text-right',\n                        // 킷 thead 배경(`--krds-table--data-thead-surface`)이 불투명이라 그대로 붙박아도 비치지 않는다.\n                        stickyHeader && 'sticky top-0 z-10',\n                        col.headerClassName,\n                      ) || undefined\n                    }\n                  >\n                    {canSort ? (\n                      <button\n                        type=\"button\"\n                        // 킷이 button 을 `font:inherit;color:inherit;background:transparent` 로 되돌려 주므로\n                        // 열 제목의 굵기·크기·색을 그대로 물려받는다. 배치만 잡으면 된다.\n                        className={cx(\n                          'inline-flex items-center gap-1 text-left',\n                          col.numeric && 'w-full justify-end',\n                        )}\n                        onClick={() =>\n                          onSortChange?.({ key, direction: direction === 'asc' ? 'desc' : 'asc' })\n                        }\n                      >\n                        {col.header}\n                        {/* size-4(16px) = KRDS `--krds-icon--size-small`. 킷 기본값 large(24px)는 15px 제목에 너무 크다. */}\n                        <i\n                          className={cx(\n                            'svg-icon ico-angle size-4 shrink-0 bg-fg-bolder',\n                            direction === 'asc' && 'up',\n                            !active && 'opacity-40',\n                          )}\n                          aria-hidden=\"true\"\n                        />\n                        <span className=\"sr-only\">{sortHint(direction)}</span>\n                      </button>\n                    ) : (\n                      col.header\n                    )}\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n\n          <tbody>\n            {rows.length === 0 ? (\n              <tr>\n                {/* KRDS 에 빈 상태 부품이 없다 — 유틸리티로 그린다. py-10 = KRDS padding 40. */}\n                <td colSpan={columns.length} className=\"py-10 text-center text-fg-subtle\">\n                  {empty}\n                </td>\n              </tr>\n            ) : (\n              rows.map((row, i) => {\n                const tone = rowTone?.(row, i);\n                const toneClass = tone && ROW_TONE[tone];\n\n                return (\n                  <tr key={rowKey(row, i)} className={rowClassName?.(row, i)}>\n                    {columns.map((col, j) => {\n                      const asRowHeader = col.rowHeader ?? (rowHeader && j === 0);\n                      const cellClass =\n                        cx(col.numeric && 'text-right tabular-nums', toneClass, col.cellClassName) || undefined;\n                      // 빈 셀에는 대시(-) — `Td` 와 같은 규칙이다(함정 ⑤).\n                      const content = withPlaceholder(col.cell(row, i), col.empty);\n\n                      // 킷은 tbody 의 th 도 regular 로 그린다 — 행 머리글은 굵게 되돌린다.\n                      return asRowHeader ? (\n                        <th key={col.key} scope=\"row\" className={cx('font-bold', cellClass)}>\n                          {content}\n                        </th>\n                      ) : (\n                        <td key={col.key} className={cellClass}>\n                          {content}\n                        </td>\n                      );\n                    })}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/disclosure/index.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+/**
+ * 디스클로저(더 보기/접기) — KRDS `krds-disclosure`.
+ *
+ * 한 덩이의 **부가** 안내를 접었다 편다. 기본은 접힌 상태이고 한 섹션에 하나만 둔다.
+ * 여러 덩이를 목록으로 접었다 펴려면 `Accordion`, 내용을 갈아 끼우려면 `Tab` 이다.
+ * 오류 문구·중요한 정보·입력칸은 넣지 마라 — 접힌 안쪽은 보이지 않은 채 제출된다.
+ * 꺾쇠 아이콘은 킷이 그리므로 `<i class="svg-icon">` 를 따로 넣지 않는다.
+ *
+ * @example
+ * <Disclosure label="신청 서비스안내">
+ *   <TextList marker="dash">
+ *     <TextListItem>하나의 아이디로 여러 전자정부 서비스를 이용할 수 있습니다.</TextListItem>
+ *   </TextList>
+ * </Disclosure>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#상세보기
+ */
+export type DisclosureProps = ComponentPropsWithRef<'div'> & {
+    /** 버튼에 보이는 글. 펼칠 내용을 유추할 수 있는 제목이어야 한다. */
+    label: ReactNode;
+    /** 처음부터 펼쳐 둘까. 기본 false 가 규격이다 — 되도록 바꾸지 마라. */
+    defaultOpen?: boolean;
+    /** 바깥에서 여닫기를 쥘 때. 주면 통제 모드가 되고 내부 상태는 쓰지 않는다. */
+    open?: boolean;
+    /** 사용자가 버튼을 눌러 상태가 바뀔 때. 통제 모드에서는 이걸 받아 직접 `open` 을 옮긴다. */
+    onOpenChange?: (open: boolean) => void;
+    /** 버튼(`btn-conts-expand`)에 덧붙일 클래스. */
+    buttonClassName?: string;
+    /** 안쪽 내용 상자(`expand-in`)에 덧붙일 클래스. */
+    contentClassName?: string;
+    children?: ReactNode;
+};
+export declare function Disclosure({ label, defaultOpen, open: openProp, onOpenChange, buttonClassName, contentClassName, className, children, ...rest }: DisclosureProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/disclosure/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/disclosure/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpF;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC3D,2CAA2C;IAC3C,KAAK,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4DAA4D;IAC5D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,+BAqCjB"}

package/dist/disclosure/index.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cx } from "../lib/krds.js";
+function Disclosure({
+  label,
+  defaultOpen = false,
+  open: openProp,
+  onOpenChange,
+  buttonClassName,
+  contentClassName,
+  className,
+  children,
+  ...rest
+}) {
+  const [selfOpen, setSelfOpen] = useState(defaultOpen);
+  const controlled = openProp !== void 0;
+  const open = controlled ? openProp : selfOpen;
+  const reactId = useId();
+  const contentId = `disclosure-${reactId}`;
+  function toggle() {
+    const next = !open;
+    if (!controlled) setSelfOpen(next);
+    onOpenChange?.(next);
+  }
+  return (
+    // `conts-expand-area` 는 킷 CSS 에 규칙이 없지만 마크업 샘플과 맞추려고 남긴다.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx("krds-disclosure", "conts-expand-area", open && "active", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx("btn-conts-expand", buttonClassName),
+              "aria-expanded": open,
+              "aria-controls": contentId,
+              onClick: toggle,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "expand-wrap", id: contentId, inert: !open, children: /* @__PURE__ */ jsx("div", { className: cx("expand-in", contentClassName), children }) })
+        ]
+      }
+    )
+  );
+}
+export {
+  Disclosure
+};
+//# sourceMappingURL=index.js.map

package/dist/disclosure/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/disclosure/index.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport { cx } from '../lib/krds';\n\n/**\n * 디스클로저(더 보기/접기) — KRDS `krds-disclosure`.\n *\n * 한 덩이의 **부가** 안내를 접었다 편다. 기본은 접힌 상태이고 한 섹션에 하나만 둔다.\n * 여러 덩이를 목록으로 접었다 펴려면 `Accordion`, 내용을 갈아 끼우려면 `Tab` 이다.\n * 오류 문구·중요한 정보·입력칸은 넣지 마라 — 접힌 안쪽은 보이지 않은 채 제출된다.\n * 꺾쇠 아이콘은 킷이 그리므로 `<i class=\"svg-icon\">` 를 따로 넣지 않는다.\n *\n * @example\n * <Disclosure label=\"신청 서비스안내\">\n *   <TextList marker=\"dash\">\n *     <TextListItem>하나의 아이디로 여러 전자정부 서비스를 이용할 수 있습니다.</TextListItem>\n *   </TextList>\n * </Disclosure>\n *\n * 자세히: docs/krds/09-부품-노트.md#상세보기\n */\n\nexport type DisclosureProps = ComponentPropsWithRef<'div'> & {\n  /** 버튼에 보이는 글. 펼칠 내용을 유추할 수 있는 제목이어야 한다. */\n  label: ReactNode;\n  /** 처음부터 펼쳐 둘까. 기본 false 가 규격이다 — 되도록 바꾸지 마라. */\n  defaultOpen?: boolean;\n  /** 바깥에서 여닫기를 쥘 때. 주면 통제 모드가 되고 내부 상태는 쓰지 않는다. */\n  open?: boolean;\n  /** 사용자가 버튼을 눌러 상태가 바뀔 때. 통제 모드에서는 이걸 받아 직접 `open` 을 옮긴다. */\n  onOpenChange?: (open: boolean) => void;\n  /** 버튼(`btn-conts-expand`)에 덧붙일 클래스. */\n  buttonClassName?: string;\n  /** 안쪽 내용 상자(`expand-in`)에 덧붙일 클래스. */\n  contentClassName?: string;\n  children?: ReactNode;\n};\n\nexport function Disclosure({\n  label,\n  defaultOpen = false,\n  open: openProp,\n  onOpenChange,\n  buttonClassName,\n  contentClassName,\n  className,\n  children,\n  ...rest\n}: DisclosureProps) {\n  const [selfOpen, setSelfOpen] = useState(defaultOpen);\n  // 통제/비통제 겸용. `open` 을 준 쪽이 이긴다.\n  const controlled = openProp !== undefined;\n  const open = controlled ? openProp : selfOpen;\n\n  // 킷 JS 는 `disclosure-<난수>` 를 만들어 붙인다. React 는 useId 로 서버·클라이언트가 같은 값을 낸다.\n  const reactId = useId();\n  const contentId = `disclosure-${reactId}`;\n\n  function toggle() {\n    const next = !open;\n    if (!controlled) setSelfOpen(next);\n    onOpenChange?.(next);\n  }\n\n  return (\n    // `conts-expand-area` 는 킷 CSS 에 규칙이 없지만 마크업 샘플과 맞추려고 남긴다.\n    <div\n      className={cx('krds-disclosure', 'conts-expand-area', open && 'active', className)}\n      {...rest}\n    >\n      <button\n        type=\"button\"\n        className={cx('btn-conts-expand', buttonClassName)}\n        aria-expanded={open}\n        aria-controls={contentId}\n        onClick={toggle}\n      >\n        {label}\n      </button>\n      {/* 접힌 동안 `inert` — 킷 JS 와 같다. 초점·클릭·보조기술을 한 번에 막는다. */}\n      <div className=\"expand-wrap\" id={contentId} inert={!open}>\n        <div className={cx('expand-in', contentClassName)}>{children}</div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAmEI,SAIE,KAJF;AAjEJ,SAAS,OAAO,gBAA4D;AAC5E,SAAS,UAAU;AAoCZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,WAAW;AAEpD,QAAM,aAAa,aAAa;AAChC,QAAM,OAAO,aAAa,WAAW;AAGrC,QAAM,UAAU,MAAM;AACtB,QAAM,YAAY,cAAc,OAAO;AAEvC,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,WAAY,aAAY,IAAI;AACjC,mBAAe,IAAI;AAAA,EACrB;AAEA;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,mBAAmB,qBAAqB,QAAQ,UAAU,SAAS;AAAA,QAChF,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW,GAAG,oBAAoB,eAAe;AAAA,cACjD,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,SAAS;AAAA,cAER;AAAA;AAAA,UACH;AAAA,UAEA,oBAAC,SAAI,WAAU,eAAc,IAAI,WAAW,OAAO,CAAC,MAClD,8BAAC,SAAI,WAAW,GAAG,aAAa,gBAAgB,GAAI,UAAS,GAC/D;AAAA;AAAA;AAAA,IACF;AAAA;AAEJ;","names":[]}

package/dist/drawer/index.d.ts

@@ -0,0 +1,106 @@
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode } from 'react';
+/**
+ * 서랍(측면 패널) — KRDS 에 없다. 모양은 KRDS 토큰, 동작은 `Modal` 과 같은 보충 부품이다.
+ *
+ * 목록 옆에서 필터·상세를 여는 자리. 폭은 `size` 3단에서 고른다(픽셀을 넘기지 마라).
+ * 확정·취소는 `Drawer.Footer` 에 두고 제출이 가장 오른쪽이다.
+ * 뒤 화면을 계속 쓸 수 있어야 하면 `modal={false}` — 이때는 초점을 가두지 않는다.
+ * 화면 한복판에 띄우는 대화상자는 `ui/modal` 이다.
+ *
+ * @example
+ * <Drawer.Root open={open} onClose={close} side="right" size="small">
+ *   <Drawer.Header extra={<Drawer.Close />}>검색 조건</Drawer.Header>
+ *   <Drawer.Body>…필터 폼…</Drawer.Body>
+ *   <Drawer.Footer split>
+ *     <Button variant="text" onClick={reset}>초기화</Button>
+ *     <Button variant="primary" onClick={apply}>적용</Button>
+ *   </Drawer.Footer>
+ * </Drawer.Root>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#서랍
+ */
+/** 어느 쪽에서 나오는가. 아래에서 올라오는 것은 킷의 바텀시트(`ui/modal` 의 `type`) 자리다. */
+export type DrawerSide = 'left' | 'right';
+/** 폭 3단 — 400 / 560 / 760px. 킷 모달과 같은 눈금이다. */
+export type DrawerSize = 'small' | 'medium' | 'large';
+export type DrawerRootProps = ComponentPropsWithRef<'div'> & {
+    /** 열림 여부. 상태는 화면 쪽이 쥔다. */
+    open: boolean;
+    /** 닫아 달라는 요청 — Esc·딤 클릭·`Drawer.Close` 에서 온다. */
+    onClose: () => void;
+    /** 나오는 방향. 기본 오른쪽. */
+    side?: DrawerSide;
+    /** 기본 small(400px). 3단에서 고른다. */
+    size?: DrawerSize;
+    /** 딤을 깔고 초점을 가두는가. 기본 true — false 면 뒤 화면을 계속 쓸 수 있다. */
+    modal?: boolean;
+    /** Esc 로 닫을 수 있는가. */
+    dismissible?: boolean;
+    /** 딤을 눌렀을 때 닫는가. 기본 true — 값을 잃으면 곤란한 서랍에서는 꺼라. */
+    closeOnBackdrop?: boolean;
+    /** 열릴 때 첫 초점. 기본 `panel`(보조기술이 이름부터 읽는다) · `first` 는 첫 초점 요소로 보낸다. */
+    initialFocus?: 'panel' | 'first';
+    /** 포털 대상. 기본 `document.body`. */
+    container?: Element | null;
+    /** 패널(흰 면)에 붙일 클래스. 바깥틀은 `className` 이 받는다. */
+    panelClassName?: string;
+    /** 패널에 붙일 인라인 style. 폭을 3단 밖으로 바꿔야 할 때. */
+    panelStyle?: CSSProperties;
+    children?: ReactNode;
+};
+/**
+ * 서랍 바깥틀. 포털 · 초점 가둠 · Esc · 스크롤 잠금 · 초점 복귀를 여기서 한다.
+ *
+ * `Drawer.Header` 를 두면 `aria-labelledby` 가 자동으로 붙는다. 헤더 없이 쓸 거면
+ * `aria-label` 을 직접 넘겨라 — 대화상자에는 반드시 이름이 있어야 한다.
+ */
+export declare function DrawerRoot({ open, onClose, side, size, modal, dismissible, closeOnBackdrop, initialFocus, container, panelClassName, panelStyle, className, style, children, onKeyDown, onMouseDown, ...rest }: DrawerRootProps): import("react").ReactPortal | null;
+export type DrawerHeaderProps = ComponentPropsWithRef<'div'> & {
+    /** 제목 태그 단계. 기본 h2 — 화면의 제목 위계에 맞춘다. */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** 제목을 눈에서만 감춘다. 이름 자체는 남는다. */
+    hideTitle?: boolean;
+    /** 제목 요소에 붙일 클래스. */
+    titleClassName?: string;
+    /** 제목 오른쪽 자리. 닫기 버튼(`Drawer.Close`)을 여기에 둔다. */
+    extra?: ReactNode;
+};
+/**
+ * 제목 줄. 이 부품을 두면 서랍의 접근 가능한 이름이 자동으로 이어진다.
+ *
+ * @example
+ * <Drawer.Header extra={<Drawer.Close />}>검색 조건</Drawer.Header>
+ */
+export declare function DrawerHeader({ level, hideTitle, titleClassName, extra, className, children, ...rest }: DrawerHeaderProps): import("react").JSX.Element;
+/** 본문. 스크롤이 생기면 `tabindex="0"` 을 붙여 키보드로도 굴릴 수 있게 한다. */
+export declare function DrawerBody({ className, children, ref, ...rest }: ComponentPropsWithRef<'div'>): import("react").JSX.Element;
+export type DrawerFooterProps = ComponentPropsWithRef<'div'> & {
+    /** 좌우로 갈라 놓는다. 왼쪽에 보조 액션, 오른쪽에 확정 액션을 둘 때. */
+    split?: boolean;
+};
+/**
+ * 푸터 — 확정·취소 액션 자리. 제출(primary)이 가장 오른쪽이다.
+ * `split` 을 주면 왼쪽 보조 액션과 오른쪽 확정 액션으로 갈라 놓는다.
+ */
+export declare function DrawerFooter({ split, className, children, ...rest }: DrawerFooterProps): import("react").JSX.Element;
+export type DrawerCloseProps = Omit<ComponentPropsWithRef<'button'>, 'children'> & {
+    /** 스크린리더가 읽을 이름. 아이콘만 있는 버튼이라 반드시 있어야 한다. */
+    label?: string;
+};
+/**
+ * 닫기 버튼 — 킷 `krds-btn small icon` + `ico-popup-close`.
+ * **모달과 달리 `Drawer.Header` 의 `extra` 에 넣는다.**
+ *
+ * @example
+ * <Drawer.Header extra={<Drawer.Close />}>필터</Drawer.Header>
+ */
+export declare function DrawerClose({ label, className, onClick, type, ...rest }: DrawerCloseProps): import("react").JSX.Element;
+/** 합성용 묶음. `Root` · `Header` · `Body` · `Footer` · `Close`. */
+export declare const Drawer: {
+    Root: typeof DrawerRoot;
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+    Close: typeof DrawerClose;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAGlB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,kEAAkE;AAClE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,+CAA+C;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AA2EtD,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC3D,2BAA2B;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,iDAAiD;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACjC,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,IAAc,EACd,IAAc,EACd,KAAY,EACZ,WAAkB,EAClB,eAAsB,EACtB,YAAsB,EACtB,SAAS,EACT,cAAc,EACd,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,GAAG,IAAI,EACR,EAAE,eAAe,sCAwLjB;AAED,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC7D,wCAAwC;IACxC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAS,EACT,SAAS,EACT,cAAc,EACd,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,+BA8BnB;AAED,yDAAyD;AACzD,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,CAAC,KAAK,CAAC,+BA+B7F;AAED,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC7D,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,+BAatF;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACjF,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAY,EACZ,SAAS,EACT,OAAO,EACP,IAAe,EACf,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAkBlB;AAED,+DAA+D;AAC/D,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}