@tipp/ui 2.3.38 → 2.3.40

package/dist/molecules/dynamic-form-editor.js

@@ -29,7 +29,8 @@ import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-JU7GB6R2.js";
-import "../chunk-VD7AQ7HK.js";
+import "../chunk-JVXATVAC.js";
+import "../chunk-B3VSXNTH.js";
 import "../chunk-ZQE7SP6P.js";
 import "../chunk-R6ARPREO.js";
 import "../chunk-2O45FRFQ.js";

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

@@ -601,6 +601,67 @@ var CircleFileIcon = React14.forwardRef(
 );
 CircleFileIcon.displayName = "CircleFileIcon";
 
+// src/icons/headset.tsx
+var React15 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var HeadsetIcon = React15.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(
+            "path",
+            {
+              d: "M3.25 6C3.25 3.75 5.5 2 8 2C10.5 2 12.75 3.75 12.75 6",
+              stroke: color,
+              strokeLinecap: "round",
+              strokeWidth: "1.2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "path",
+            {
+              d: "M4.75 6H3.25A1.5 1.5 0 0 0 1.75 7.5V10.75A1.5 1.5 0 0 0 3.25 12.25H4.75Z",
+              stroke: color,
+              strokeLinejoin: "round",
+              strokeWidth: "1.2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "path",
+            {
+              d: "M11.25 6H12.75A1.5 1.5 0 0 1 14.25 7.5V10.75A1.5 1.5 0 0 1 12.75 12.25H11.25Z",
+              stroke: color,
+              strokeLinejoin: "round",
+              strokeWidth: "1.2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "path",
+            {
+              d: "M4 12.25V13.25C4 13.94 4.56 14.5 5.25 14.5H8",
+              stroke: color,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: "1.2"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+HeadsetIcon.displayName = "HeadsetIcon";
+
 // src/atoms/icon-button.tsx
 var import_react = require("react");
 var import_clsx = require("clsx");
@@ -638,7 +699,7 @@ var convertSize = (size) => {
 };
 
 // src/atoms/icon-button.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = 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"]);
@@ -652,7 +713,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_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_themes2.IconButton,
       __spreadProps(__spreadValues({
         style,
@@ -691,7 +752,7 @@ var mapWithResponsive = (args) => {
 };
 
 // src/atoms/typo.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = 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"]);
@@ -713,13 +774,13 @@ var Typo = (0, import_react2.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
   }
 );
 Typo.displayName = "Typo";
 
 // src/atoms/pagination.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Pagination(props) {
   const { onChange, count = 0, siblingCount = 2 } = props;
   const isControlled = props.page !== void 0;
@@ -783,19 +844,19 @@ function Pagination(props) {
     size: "large",
     style: { borderRadius: "50%" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_themes.Flex, { align: "center", className: "tipp-pagination", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes.Flex, { align: "center", className: "tipp-pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       IconButton,
       __spreadProps(__spreadValues({
         disabled: !doublePrev,
         onClick: onClickDoublePrev
       }, moveButtonProps), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
       })
     ),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes.Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           className: `page-button ${item === page ? "active" : ""}`,
@@ -803,19 +864,19 @@ function Pagination(props) {
             goToPage(item);
           },
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Typo, { variant: "body", children: item })
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typo, { variant: "body", children: item })
         },
         item
       );
     }) }),
-    /* @__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)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       IconButton,
       __spreadProps(__spreadValues({
         disabled: !doubleNext,
         onClick: onClickDoubleNext
       }, moveButtonProps), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
       })
     )
   ] });
@@ -830,7 +891,7 @@ var import_react5 = require("react");
 
 // src/atoms/collapse.tsx
 var import_react4 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Collapse(props) {
   const { children, closedHeight = "0" } = props;
   const [open, setOpen] = (0, import_react4.useState)(() => {
@@ -845,11 +906,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_runtime18.jsx)("div", { className: "tipp-collapse", ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "tipp-collapse", ref, children });
 }
 
 // src/molecules/expand-table/row.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Row(props) {
   const { row, ExpandComp, gridTemplateColumns, getRowStyle, getCellStyle } = props;
   const [open, setOpen] = (0, import_react5.useState)(false);
@@ -868,8 +929,8 @@ function Row(props) {
     }
     return baseCls.join(" ");
   }, [ExpandComp, props.onRowClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: rowClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: rowClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "button",
       {
         className: "tr",
@@ -882,7 +943,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_runtime19.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "div",
             {
               className: "td",
@@ -893,7 +954,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_runtime19.jsx)(
+                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   cell.column.columnDef.meta.OpenBtn,
                   {
                     data: row.original,
@@ -909,12 +970,12 @@ function Row(props) {
       },
       `tr_${row.id}`
     ),
-    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
+    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ExpandComp, { row }) }) }) : null
   ] }, `tr-wrapper_${row.id}`);
 }
 
 // src/molecules/expand-table/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var sortButtonColorMapper = {
   card: {
     selected: "var(--iris-10)",
@@ -994,7 +1055,7 @@ function ExpandTable(props) {
   const helpCompRender = (0, import_react6.useCallback)(
     (rowLength) => {
       if (isLoading) {
-        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           import_themes.Flex,
           {
             align: "center",
@@ -1002,12 +1063,12 @@ function ExpandTable(props) {
             justify: "center",
             p: "5",
             width: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes4.Spinner, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes4.Spinner, {})
           }
         );
       }
       if (rowLength === 0) {
-        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 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
       }
       return null;
     },
@@ -1017,9 +1078,9 @@ function ExpandTable(props) {
     if (!data) return 0;
     return Math.ceil(data.length / pageSize);
   }, [data, pageSize]);
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `expand-table-wrapper ${variant}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "div",
         {
           className: "tr",
@@ -1030,36 +1091,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_runtime20.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                 "button",
                 {
                   onClick: header.column.getToggleSortingHandler(),
                   style: { cursor: "pointer" },
                   type: "button",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
                       header.column.columnDef.header,
                       header.getContext()
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                       import_themes.Flex,
                       {
                         direction: "column",
                         style: { marginLeft: "var(--space-2)" },
                         children: [
-                          sortedState === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                          sortedState === false && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                             TriangleArrowDownIcon,
                             {
                               color: sortButtonColorMapper[variant].unselected
                             }
                           ),
-                          sortedState === "asc" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                          sortedState === "asc" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                             TriangleArrowUpIcon,
                             {
                               color: sortButtonColorMapper[variant].selected
                             }
                           ),
-                          sortedState === "desc" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                          sortedState === "desc" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                             TriangleArrowDownIcon,
                             {
                               color: sortButtonColorMapper[variant].selected
@@ -1072,7 +1133,7 @@ function ExpandTable(props) {
                 }
               ) }, header.id);
             }
-            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)(
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { as: "div", variant: "body", children: (0, import_react_table2.flexRender)(
               header.column.columnDef.header,
               header.getContext()
             ) }) }, header.id);
@@ -1080,8 +1141,8 @@ function ExpandTable(props) {
         },
         headerGroup.id
       )) }),
-      /* @__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)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes5.ScrollArea, { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           Row,
           {
             ExpandComp,
@@ -1096,7 +1157,7 @@ function ExpandTable(props) {
         );
       }) })
     ] }),
-    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_themes.Flex, { justify: "end", pt: "4", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes.Flex, { justify: "end", pt: "4", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Pagination,
       {
         count: pageCount,