@tipp/ui 2.3.16 → 2.3.18

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

@@ -557,6 +557,50 @@ var CircleChatIcon = React13.forwardRef(
 );
 CircleChatIcon.displayName = "CircleChatIcon";
 
+// src/icons/circle-file.tsx
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CircleFileIcon = React14.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "svg",
+      __spreadProps(__spreadValues({
+        fill: "none",
+        height: "16",
+        viewBox: "0 0 16 16",
+        width: "16",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, props), {
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { fill: color, height: "16", rx: "8", width: "16" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "rect",
+            {
+              fill: "white",
+              fillOpacity: "0.01",
+              height: "12",
+              transform: "translate(2 2)",
+              width: "12"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "path",
+            {
+              clipRule: "evenodd",
+              d: "M4.39998 4.00005C4.39998 3.77914 4.57906 3.60005 4.79998 3.60005H9.26861C9.37469 3.60005 9.47643 3.64219 9.55145 3.71721L11.4829 5.64858C11.5578 5.72359 11.6 5.82534 11.6 5.93142V12C11.6 12.2209 11.4209 12.4 11.2 12.4H4.79998C4.57906 12.4 4.39998 12.2209 4.39998 12V4.00005ZM4.79998 2.80005C4.13723 2.80005 3.59998 3.3373 3.59998 4.00005V12C3.59998 12.6628 4.13723 13.2 4.79998 13.2H11.2C11.8627 13.2 12.4 12.6628 12.4 12V5.93142C12.4 5.61316 12.2736 5.30794 12.0485 5.08289L10.1171 3.15152C9.89209 2.92648 9.58686 2.80005 9.26861 2.80005H4.79998ZM5.59998 5.20005C5.37906 5.20005 5.19998 5.37914 5.19998 5.60005C5.19998 5.82096 5.37906 6.00005 5.59998 6.00005H7.99998C8.22089 6.00005 8.39998 5.82096 8.39998 5.60005C8.39998 5.37914 8.22089 5.20005 7.99998 5.20005H5.59998ZM5.59998 7.60005C5.37906 7.60005 5.19998 7.77914 5.19998 8.00005C5.19998 8.22096 5.37906 8.40005 5.59998 8.40005H10.4C10.6209 8.40005 10.8 8.22096 10.8 8.00005C10.8 7.77914 10.6209 7.60005 10.4 7.60005H5.59998ZM5.59998 10C5.37906 10 5.19998 10.1792 5.19998 10.4C5.19998 10.6209 5.37906 10.8 5.59998 10.8H10.4C10.6209 10.8 10.8 10.6209 10.8 10.4C10.8 10.1792 10.6209 10 10.4 10H5.59998Z",
+              fill: "white",
+              fillRule: "evenodd"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+CircleFileIcon.displayName = "CircleFileIcon";
+
 // src/atoms/icon-button.tsx
 var import_react = require("react");
 var import_clsx = require("clsx");
@@ -594,7 +638,7 @@ var convertSize = (size) => {
 };
 
 // src/atoms/icon-button.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var IconButton = (0, import_react.forwardRef)(
   (props, ref) => {
     const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
@@ -608,7 +652,7 @@ var IconButton = (0, import_react.forwardRef)(
     const className = (0, import_react.useMemo)(() => {
       return (0, import_clsx.clsx)(props.className, { transparent: variant === "transparent" });
     }, [props.className, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_themes2.IconButton,
       __spreadProps(__spreadValues({
         style,
@@ -647,7 +691,7 @@ var mapWithResponsive = (args) => {
 };
 
 // src/atoms/typo.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var Typo = (0, import_react2.forwardRef)(
   (props, ref) => {
     const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
@@ -669,13 +713,13 @@ var Typo = (0, import_react2.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
   }
 );
 Typo.displayName = "Typo";
 
 // src/atoms/pagination.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Pagination(props) {
   const { onChange, count = 0, siblingCount = 2 } = props;
   const [page, setPage] = (0, import_react3.useState)(() => props.page || props.defaultPage || 1);
@@ -736,19 +780,19 @@ function Pagination(props) {
     size: "large",
     style: { borderRadius: "50%" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes.Flex, { align: "center", className: "tipp-pagination", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes.Flex, { align: "center", className: "tipp-pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       IconButton,
       __spreadProps(__spreadValues({
         disabled: !doublePrev,
         onClick: onClickDoublePrev
       }, moveButtonProps), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes.Flex, { gap: "1", children: visibleItems.map((item) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes.Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "button",
         {
           className: `page-button ${item === page ? "active" : ""}`,
@@ -756,19 +800,19 @@ function Pagination(props) {
             setPage(item);
           },
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Typo, { variant: "body", children: item })
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Typo, { variant: "body", children: item })
         },
         item
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       IconButton,
       __spreadProps(__spreadValues({
         disabled: !doubleNext,
         onClick: onClickDoubleNext
       }, moveButtonProps), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
       })
     )
   ] });
@@ -783,7 +827,7 @@ var import_react5 = require("react");
 
 // src/atoms/collapse.tsx
 var import_react4 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Collapse(props) {
   const { children, closedHeight = "0" } = props;
   const [open, setOpen] = (0, import_react4.useState)(() => {
@@ -798,11 +842,11 @@ function Collapse(props) {
     if (!ref.current) return;
     ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
   }, [closedHeight, open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "tipp-collapse", ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "tipp-collapse", ref, children });
 }
 
 // src/molecules/expand-table/row.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Row(props) {
   const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } = props;
   const [open, setOpen] = (0, import_react5.useState)(false);
@@ -821,8 +865,8 @@ function Row(props) {
     }
     return baseCls.join(" ");
   }, [ExpandComp, props.onRowClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: rowClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: rowClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "button",
       {
         className: "tr",
@@ -835,7 +879,7 @@ function Row(props) {
           var _a, _b, _c;
           const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
           const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
-          return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
             "div",
             {
               className: "td",
@@ -846,7 +890,7 @@ function Row(props) {
               }, (getCellStyle == null ? void 0 : getCellStyle(row.original)) || {}),
               children: [
                 (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
-                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   cell.column.columnDef.meta.OpenBtn,
                   {
                     data: row.original,
@@ -862,12 +906,12 @@ 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}`);
 }
 
 // src/molecules/expand-table/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var sortButtonColorMapper = {
   card: {
     selected: "var(--iris-10)",
@@ -937,7 +981,7 @@ function ExpandTable(props) {
   const helpCompRender = (0, import_react6.useCallback)(
     (rowLength) => {
       if (isLoading) {
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           import_themes.Flex,
           {
             align: "center",
@@ -945,12 +989,12 @@ function ExpandTable(props) {
             justify: "center",
             p: "5",
             width: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes4.Spinner, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes4.Spinner, {})
           }
         );
       }
       if (rowLength === 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes.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");
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes.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");
       }
       return null;
     },
@@ -960,9 +1004,9 @@ function ExpandTable(props) {
     if (!data) return 0;
     return Math.ceil(data.length / pageSize);
   }, [data, pageSize]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `expand-table-wrapper ${variant}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "expand-table", style: tableStyle, 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-wrapper ${variant}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
         {
           className: "tr",
@@ -973,36 +1017,36 @@ function ExpandTable(props) {
             const sortedState = header.column.getIsSorted();
             const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
             if (sortable) {
-              return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                 "button",
                 {
                   onClick: header.column.getToggleSortingHandler(),
                   style: { cursor: "pointer" },
                   type: "button",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
                       header.column.columnDef.header,
                       header.getContext()
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                       import_themes.Flex,
                       {
                         direction: "column",
                         style: { marginLeft: "var(--space-2)" },
                         children: [
-                          sortedState === false && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          sortedState === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                             TriangleArrowDownIcon,
                             {
                               color: sortButtonColorMapper[variant].unselected
                             }
                           ),
-                          sortedState === "asc" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          sortedState === "asc" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                             TriangleArrowUpIcon,
                             {
                               color: sortButtonColorMapper[variant].selected
                             }
                           ),
-                          sortedState === "desc" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                          sortedState === "desc" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                             TriangleArrowDownIcon,
                             {
                               color: sortButtonColorMapper[variant].selected
@@ -1015,7 +1059,7 @@ function ExpandTable(props) {
                 }
               ) }, header.id);
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
               header.column.columnDef.header,
               header.getContext()
             ) }) }, header.id);
@@ -1023,8 +1067,8 @@ function ExpandTable(props) {
         },
         headerGroup.id
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes5.ScrollArea, { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes5.ScrollArea, { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           Row,
           {
             ExpandComp,
@@ -1039,7 +1083,7 @@ function ExpandTable(props) {
         );
       }) })
     ] }),
-    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes.Flex, { justify: "end", pt: "4", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes.Flex, { justify: "end", pt: "4", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Pagination,
       {
         count: pageCount,