@tipp/ui 1.0.24 → 1.0.26

package/dist/index.d.cts

@@ -13,16 +13,18 @@ export { FieldErrorWrapper, FieldErrorWrapperProps } from './atoms/field-error-w
 export { EllipsisTooltip, EllipsisTooltipProps } from './atoms/ellipsis-tooltip.cjs';
 export { Content, Drawer, Root, Trigger } from './atoms/drawer.cjs';
 export { ToastContainer } from './atoms/toast.cjs';
+export { Form } from './atoms/form.cjs';
 export { ExpandTable, ExpandTableProps } from './molecules/expand-table/index.cjs';
 export { Navigation, NavigationProps } from './molecules/navigation.cjs';
 export { DatePicker, DatePickerProps } from './molecules/date-picker/index.cjs';
 export { ThemeProvider } from './theme/theme-provider.cjs';
 import * as index_js from '@radix-ui/themes/dist/cjs/props/index.js';
 export { index_js as uiProps };
-export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
+export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, TrashIcon } from '@radix-ui/react-icons';
 export { toast } from 'react-toastify';
 export { ExpandComp, OnRowClick } from './molecules/expand-table/row.cjs';
 export { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import 'react';
 import '@radix-ui/react-dialog';
+import '@radix-ui/react-form';
 import 'react-datepicker';

package/dist/index.d.ts

@@ -13,16 +13,18 @@ export { FieldErrorWrapper, FieldErrorWrapperProps } from './atoms/field-error-w
 export { EllipsisTooltip, EllipsisTooltipProps } from './atoms/ellipsis-tooltip.js';
 export { Content, Drawer, Root, Trigger } from './atoms/drawer.js';
 export { ToastContainer } from './atoms/toast.js';
+export { Form } from './atoms/form.js';
 export { ExpandTable, ExpandTableProps } from './molecules/expand-table/index.js';
 export { Navigation, NavigationProps } from './molecules/navigation.js';
 export { DatePicker, DatePickerProps } from './molecules/date-picker/index.js';
 export { ThemeProvider } from './theme/theme-provider.js';
 import * as index_js from '@radix-ui/themes/dist/cjs/props/index.js';
 export { index_js as uiProps };
-export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, GearIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
+export { BarChartIcon, BookmarkFilledIcon, BookmarkIcon, ChatBubbleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, TrashIcon } from '@radix-ui/react-icons';
 export { toast } from 'react-toastify';
 export { ExpandComp, OnRowClick } from './molecules/expand-table/row.js';
 export { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import 'react';
 import '@radix-ui/react-dialog';
+import '@radix-ui/react-form';
 import 'react-datepicker';

package/dist/index.js

@@ -5,20 +5,35 @@ import {
   uiProps
 } from "./chunk-NVKNDAIN.js";
 import "./chunk-KHHXN3CH.js";
+import {
+  Navigation
+} from "./chunk-IBR5PQVX.js";
 import {
   DatePicker
-} from "./chunk-YL5VWNBV.js";
+} from "./chunk-HUS5VLHS.js";
 import {
   ExpandTable,
   createColumnHelper
-} from "./chunk-OCDOKW5S.js";
+} from "./chunk-KT7IAGCF.js";
 import "./chunk-XHNYNSZZ.js";
 import "./chunk-BSTJBBEX.js";
 import "./chunk-NDUKDKGB.js";
+import "./chunk-2ANGYYEV.js";
 import {
-  Navigation
-} from "./chunk-QOY42XM2.js";
-import "./chunk-AGMMAML3.js";
+  TextField
+} from "./chunk-JPIZP2PZ.js";
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  Skeleton
+} from "./chunk-5H3YPCZK.js";
+import {
+  Spinner
+} from "./chunk-FR2GDOU2.js";
+import {
+  Strong
+} from "./chunk-74DX4CU7.js";
 import {
   Switch
 } from "./chunk-OYM4XCHQ.js";
@@ -32,8 +47,17 @@ import {
   TextArea
 } from "./chunk-ILRUXI2E.js";
 import {
-  TextField
-} from "./chunk-JPIZP2PZ.js";
+  Quote
+} from "./chunk-YO3BQW6S.js";
+import {
+  RadioCards
+} from "./chunk-6IVCARWS.js";
+import {
+  RadioGroup
+} from "./chunk-6DJOIRMF.js";
+import {
+  Radio
+} from "./chunk-FPD73OHW.js";
 import {
   ScrollArea
 } from "./chunk-ZKZDVS7G.js";
@@ -47,23 +71,17 @@ import {
   Select
 } from "./chunk-355MU6BH.js";
 import {
-  Separator
-} from "./chunk-HYITAA4J.js";
-import {
-  Skeleton
-} from "./chunk-5H3YPCZK.js";
-import {
-  Spinner
-} from "./chunk-FR2GDOU2.js";
+  Inset
+} from "./chunk-XQOL7UBI.js";
 import {
-  Strong
-} from "./chunk-74DX4CU7.js";
+  Kbd
+} from "./chunk-TULWX7D6.js";
 import {
   Link
 } from "./chunk-XQOZWYUA.js";
 import {
   Pagination
-} from "./chunk-3R2IB6WJ.js";
+} from "./chunk-QGBUYEQN.js";
 import {
   Popover
 } from "./chunk-5AVBYDPB.js";
@@ -71,17 +89,26 @@ import {
   Progress
 } from "./chunk-365QMK4D.js";
 import {
-  Quote
-} from "./chunk-YO3BQW6S.js";
+  EllipsisTooltip
+} from "./chunk-4IKPNQV5.js";
 import {
-  RadioCards
-} from "./chunk-6IVCARWS.js";
+  Tooltip
+} from "./chunk-ACVANQJ4.js";
 import {
-  RadioGroup
-} from "./chunk-6DJOIRMF.js";
+  Em
+} from "./chunk-2DZ2Y3JI.js";
 import {
-  Radio
-} from "./chunk-FPD73OHW.js";
+  FieldErrorWrapper
+} from "./chunk-CNQ7RNNY.js";
+import {
+  Typo
+} from "./chunk-O3XTRD7R.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Form
+} from "./chunk-2CVXGGI5.js";
 import {
   Grid
 } from "./chunk-EGEQY3KT.js";
@@ -92,11 +119,14 @@ import {
   HoverCard
 } from "./chunk-O3T3TM3V.js";
 import {
-  Inset
-} from "./chunk-XQOL7UBI.js";
+  Checkbox
+} from "./chunk-JEHDCZQU.js";
 import {
-  Kbd
-} from "./chunk-TULWX7D6.js";
+  Code
+} from "./chunk-OHMOP5PV.js";
+import {
+  Collapse
+} from "./chunk-KGLIAFTI.js";
 import {
   Container
 } from "./chunk-Q37G2GS6.js";
@@ -126,23 +156,14 @@ import {
   DropdownMenu
 } from "./chunk-YTZSKMX3.js";
 import {
-  EllipsisTooltip
-} from "./chunk-4IKPNQV5.js";
-import {
-  Tooltip
-} from "./chunk-ACVANQJ4.js";
-import {
-  Em
-} from "./chunk-2DZ2Y3JI.js";
-import {
-  FieldErrorWrapper
-} from "./chunk-CHHLIPDN.js";
+  Badge
+} from "./chunk-ALOPZ54P.js";
 import {
-  Flex
-} from "./chunk-25HMMI7R.js";
+  Blockquote
+} from "./chunk-YGL6SWKN.js";
 import {
-  Typo
-} from "./chunk-O3XTRD7R.js";
+  Box
+} from "./chunk-4Y5BEXVN.js";
 import {
   Button
 } from "./chunk-AQX7DQLI.js";
@@ -158,15 +179,6 @@ import {
 import {
   CheckboxGroup
 } from "./chunk-IQEEPHOY.js";
-import {
-  Checkbox
-} from "./chunk-JEHDCZQU.js";
-import {
-  Code
-} from "./chunk-OHMOP5PV.js";
-import {
-  Collapse
-} from "./chunk-KGLIAFTI.js";
 import {
   BarChartIcon,
   BookmarkFilledIcon,
@@ -202,15 +214,6 @@ import {
 import {
   Avatar
 } from "./chunk-CZEGRZBK.js";
-import {
-  Badge
-} from "./chunk-ALOPZ54P.js";
-import {
-  Blockquote
-} from "./chunk-YGL6SWKN.js";
-import {
-  Box
-} from "./chunk-4Y5BEXVN.js";
 import "./chunk-N552FDTV.js";
 export {
   AlertDialog,
@@ -254,6 +257,7 @@ export {
   FieldErrorWrapper,
   FileIcon,
   Flex,
+  Form,
   GearIcon,
   Grid,
   Heading,

package/dist/molecules/date-picker/index.js

@@ -1,9 +1,9 @@
 import {
   DatePicker
-} from "../../chunk-YL5VWNBV.js";
+} from "../../chunk-HUS5VLHS.js";
+import "../../chunk-25HMMI7R.js";
 import "../../chunk-HLOY6BIP.js";
 import "../../chunk-O3DNDMV3.js";
-import "../../chunk-25HMMI7R.js";
 import "../../chunk-4UZQXJQO.js";
 import "../../chunk-N552FDTV.js";
 export {

package/dist/molecules/expand-table/index.cjs

@@ -64,7 +64,7 @@ __export(expand_table_exports, {
 });
 module.exports = __toCommonJS(expand_table_exports);
 var import_react_table2 = require("@tanstack/react-table");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/atoms/alert-dialog.tsx
 var import_themes = require("@radix-ui/themes");
@@ -406,13 +406,74 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 // src/atoms/drawer.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 
+// src/atoms/form.tsx
+var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
+var import_react12 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Root4 = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RadixForm.Root,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormRoot ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Root4.displayName = "FORM_ROOT";
+var Field2 = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RadixForm.Field,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormField ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Field2.displayName = "FORM_FIELD";
+var Label2 = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RadixForm.Label,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormLabel ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Label2.displayName = "FORM_Label";
+var Message2 = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      RadixForm.Message,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `FormMessage ${className || ""}`,
+        ref,
+        children
+      })
+    );
+  }
+);
+Message2.displayName = "FORM_Message";
+
 // src/icons/down.tsx
 var React7 = __toESM(require("react"), 1);
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TriangleArrowDownIcon = React7.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -422,7 +483,7 @@ var TriangleArrowDownIcon = React7.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z",
@@ -437,11 +498,11 @@ TriangleArrowDownIcon.displayName = "ArrowDownIcon";
 
 // src/icons/up.tsx
 var React8 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var TriangleArrowUpIcon = React8.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -451,7 +512,7 @@ var TriangleArrowUpIcon = React8.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "path",
           {
             d: "M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z",
@@ -466,22 +527,22 @@ TriangleArrowUpIcon.displayName = "ArrowUpIcon";
 
 // src/molecules/expand-table/row.tsx
 var import_react_table = require("@tanstack/react-table");
-var import_react12 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Row(props) {
   const { row, ExpandComp, gridColTemp } = props;
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  const onClickRow = (0, import_react12.useCallback)(() => {
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const onClickRow = (0, import_react13.useCallback)(() => {
     var _a;
     (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
     setOpen((prev) => !prev);
   }, [props, row.original]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: `tr-wrapper ${ExpandComp ? "expandable" : ""}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "button",
           {
             className: "tr",
@@ -491,7 +552,7 @@ function Row(props) {
             children: row.getVisibleCells().map((cell) => {
               var _a, _b;
               const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
-              return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 "div",
                 {
                   className: "td",
@@ -501,7 +562,7 @@ function Row(props) {
                   },
                   children: [
                     (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-                    ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                       cell.column.columnDef.meta.OpenBtn,
                       {
                         data: row.original,
@@ -517,7 +578,7 @@ function Row(props) {
           },
           `tr_${row.id}`
         ),
-        ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ExpandComp, { row }) }) }) : null
+        ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ExpandComp, { row }) }) }) : null
       ]
     },
     `tr-wrapper_${row.id}`
@@ -525,10 +586,10 @@ function Row(props) {
 }
 
 // src/molecules/expand-table/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ExpandTable(props) {
   const { data, columns, ExpandComp, placeholder, onRowClick } = props;
-  const [sorting, setSorting] = (0, import_react13.useState)([]);
+  const [sorting, setSorting] = (0, import_react14.useState)([]);
   const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
     data: data || [],
     columns,
@@ -539,7 +600,7 @@ function ExpandTable(props) {
     },
     onSortingChange: setSorting
   });
-  const gridColTemp = (0, import_react13.useMemo)(() => {
+  const gridColTemp = (0, import_react14.useMemo)(() => {
     return columns.map((col) => {
       var _a;
       if ((_a = col.meta) == null ? void 0 : _a.autoSize)
@@ -548,8 +609,8 @@ function ExpandTable(props) {
     }).join(" ");
   }, [columns]);
   const rowModels = getRowModel();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "expand-table", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "expand-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
         className: "tr",
@@ -557,30 +618,30 @@ function ExpandTable(props) {
         children: headerGroup.headers.map((header) => {
           const sortable = header.column.getCanSort();
           const sortedState = header.column.getIsSorted();
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "th", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "button",
             {
               onClick: header.column.getToggleSortingHandler(),
               style: sortable ? { cursor: "pointer" } : void 0,
               type: "button",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
                   header.column.columnDef.header,
                   header.getContext()
                 ) }),
-                sortable ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                sortable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                   import_themes19.Flex,
                   {
                     direction: "column",
                     style: { marginLeft: "var(--space-2)" },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         TriangleArrowUpIcon,
                         {
                           color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         TriangleArrowDownIcon,
                         {
                           color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
@@ -596,10 +657,10 @@ function ExpandTable(props) {
       },
       headerGroup.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "tbody", children: [
-      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "tbody", children: [
+      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
       rowModels.rows.map((row) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Row,
           {
             ExpandComp,