@tipp/ui 1.1.23 → 1.2.0

package/dist/molecules/index.cjs

@@ -63,22 +63,85 @@ __export(molecules_exports, {
   DotNavigation: () => DotNavigation,
   ExpandTable: () => ExpandTable,
   Navigation: () => Navigation,
+  Stepper: () => Stepper,
+  TagSelector: () => TagSelector,
   createColumnHelper: () => import_react_table2.createColumnHelper
 });
 module.exports = __toCommonJS(molecules_exports);
 
 // src/molecules/expand-table/index.tsx
 var import_react_table2 = require("@tanstack/react-table");
-var import_react6 = require("react");
+var import_react9 = require("react");
 
-// src/atoms/button.tsx
+// src/atoms/avatar.tsx
 var import_themes = require("@radix-ui/themes");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = (0, import_react.forwardRef)(
+var Avatar = (0, import_react.forwardRef)(
   (props, ref) => {
-    const _a = props, { size, style } = _a, restProps = __objRest(_a, ["size", "style"]);
+    const _a = props, { children, size, variant = "soft" } = _a, rest = __objRest(_a, ["children", "size", "variant"]);
     const radixSize = (0, import_react.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "1";
+        case "medium":
+          return "2";
+        case "large":
+          return "3";
+        case "full":
+          return "4";
+        default:
+          return size;
+      }
+    }, [size]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Avatar, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, variant, children }));
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/atoms/badge.tsx
+var import_themes2 = require("@radix-ui/themes");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Badge = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size = "small", color = "accent" } = _a, rest = __objRest(_a, ["size", "color"]);
+    const radixSize = (0, import_react2.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "1";
+        case "large":
+          return "3";
+        default:
+          return "1";
+      }
+    }, [size]);
+    const radixColor = (0, import_react2.useMemo)(() => {
+      switch (color) {
+        case "error":
+          return "red";
+        case "neutral":
+          return "gray";
+        case "success":
+          return "green";
+        case "accent":
+        default:
+          return void 0;
+      }
+    }, [color]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Badge, __spreadProps(__spreadValues({}, rest), { color: radixColor, ref, size: radixSize }));
+  }
+);
+Badge.displayName = "Badge";
+
+// src/atoms/button.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Button = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
+    const radixSize = (0, import_react3.useMemo)(() => {
       switch (size) {
         case "small":
           return "1";
@@ -91,19 +154,28 @@ var Button = (0, import_react.forwardRef)(
           return "2";
       }
     }, [size]);
-    const mergedStyle = (0, import_react.useMemo)(() => {
-      if (size !== "largest")
-        return style;
-      return __spreadValues({
-        borderRadius: "var(--radius-4)",
-        padding: "var(--space-5)",
-        fontSize: "var(--font-size-4)"
-      }, style);
-    }, [size, style]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_themes.Button,
+    const mergedStyle = (0, import_react3.useMemo)(() => {
+      const baseStyle = {
+        background: variant === "transparent" ? "transparent" : void 0
+      };
+      if (size === "largest")
+        return __spreadValues(__spreadProps(__spreadValues({}, baseStyle), {
+          borderRadius: "var(--radius-4)",
+          padding: "var(--space-5)",
+          fontSize: "var(--font-size-4)"
+        }), style);
+      return __spreadValues(__spreadValues({}, baseStyle), style);
+    }, [size, style, variant]);
+    const radixVariant = (0, import_react3.useMemo)(() => {
+      if (variant === "transparent")
+        return "ghost";
+      return variant;
+    }, [variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_themes3.Button,
       __spreadProps(__spreadValues({
-        style: mergedStyle
+        style: mergedStyle,
+        variant: radixVariant
       }, restProps), {
         ref,
         size: radixSize
@@ -114,16 +186,19 @@ var Button = (0, import_react.forwardRef)(
 Button.displayName = "Button";
 
 // src/atoms/flex.tsx
-var import_themes2 = require("@radix-ui/themes");
+var import_themes4 = require("@radix-ui/themes");
+
+// src/atoms/grid.tsx
+var import_themes5 = require("@radix-ui/themes");
 
 // src/atoms/heading.tsx
-var import_themes3 = require("@radix-ui/themes");
-var import_react2 = require("react");
-var import_themes4 = require("@radix-ui/themes");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_themes6 = require("@radix-ui/themes");
+var import_react4 = require("react");
+var import_themes7 = require("@radix-ui/themes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Heading2(props) {
   const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
-  const radixSize = (0, import_react2.useMemo)(() => {
+  const radixSize = (0, import_react4.useMemo)(() => {
     switch (variant) {
       case "subtitle1":
         return "4";
@@ -137,20 +212,26 @@ function Heading2(props) {
         return size;
     }
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes6.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
 }
 
 // src/atoms/icon-button.tsx
-var import_themes5 = require("@radix-ui/themes");
+var import_themes8 = require("@radix-ui/themes");
+
+// src/atoms/popover.tsx
+var import_themes9 = require("@radix-ui/themes");
+
+// src/atoms/scroll-area.tsx
+var import_themes10 = require("@radix-ui/themes");
 
 // src/atoms/typo.tsx
-var import_themes6 = require("@radix-ui/themes");
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Typo = (0, import_react3.forwardRef)(
+var import_themes11 = require("@radix-ui/themes");
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Typo = (0, import_react5.forwardRef)(
   (props, ref) => {
     const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
-    const radixSize = (0, import_react3.useMemo)(() => {
+    const radixSize = (0, import_react5.useMemo)(() => {
       if (size !== void 0)
         return size;
       switch (variant) {
@@ -163,43 +244,76 @@ var Typo = (0, import_react3.forwardRef)(
           return "2";
       }
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes6.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes11.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
   }
 );
 Typo.displayName = "Typo";
 
 // src/atoms/collapse.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Collapse(props) {
   const { children, closedHeight = "0" } = props;
-  const [open, setOpen] = (0, import_react4.useState)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(() => {
     return props.open || props.defaultOpen || false;
   });
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (props.open === void 0)
       return;
     setOpen(props.open);
   }, [props.open]);
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const ref = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!ref.current)
       return;
     ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
   }, [closedHeight, open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "collapse", ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "collapse", ref, children });
 }
 
 // src/icon.ts
 var import_react_icons = require("@radix-ui/react-icons");
 
+// src/atoms/auto-sizing-input.tsx
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AutoSizingInput = (0, import_react7.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { value: _value, onChangeValue, onChange } = _b, rest = __objRest(_b, ["value", "onChangeValue", "onChange"]);
+    const [value, setValue] = (0, import_react7.useState)(_value);
+    const [width, setWidth] = (0, import_react7.useState)(0);
+    const span = (0, import_react7.useRef)(null);
+    (0, import_react7.useEffect)(() => {
+      span.current && setWidth(span.current.offsetWidth);
+    }, [value]);
+    const changeHandler = (0, import_react7.useCallback)(
+      (evt) => {
+        onChange == null ? void 0 : onChange(evt);
+        setValue(evt.target.value);
+      },
+      [onChange]
+    );
+    (0, import_react7.useEffect)(() => {
+      setValue(_value || "");
+    }, [_value]);
+    (0, import_react7.useEffect)(() => {
+      onChangeValue == null ? void 0 : onChangeValue(value || "");
+    }, [value, onChangeValue]);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "auto-sizing-input wrapper", style: { width: width + 24 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", __spreadValues({ onChange: changeHandler, ref, value }, rest)),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", ref: span, children: value })
+    ] });
+  }
+);
+AutoSizingInput.displayName = "AutoSizingInput";
+
 // src/icons/down.tsx
-var React4 = __toESM(require("react"), 1);
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var TriangleArrowDownIcon = React4.forwardRef(
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var TriangleArrowDownIcon = React5.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -209,7 +323,7 @@ var TriangleArrowDownIcon = React4.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.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",
@@ -223,12 +337,12 @@ var TriangleArrowDownIcon = React4.forwardRef(
 TriangleArrowDownIcon.displayName = "ArrowDownIcon";
 
 // src/icons/up.tsx
-var React5 = __toESM(require("react"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var TriangleArrowUpIcon = React5.forwardRef(
+var React6 = __toESM(require("react"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var TriangleArrowUpIcon = React6.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -238,7 +352,7 @@ var TriangleArrowUpIcon = React5.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.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",
@@ -253,17 +367,17 @@ TriangleArrowUpIcon.displayName = "ArrowUpIcon";
 
 // src/molecules/expand-table/row.tsx
 var import_react_table = require("@tanstack/react-table");
-var import_react5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Row(props) {
   const { row, ExpandComp, gridColTemp } = props;
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const onClickRow = (0, import_react5.useCallback)(() => {
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const onClickRow = (0, import_react8.useCallback)(() => {
     var _a;
     (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
     setOpen((prev) => !prev);
   }, [props, row.original]);
-  const rowClassName = (0, import_react5.useMemo)(() => {
+  const rowClassName = (0, import_react8.useMemo)(() => {
     const baseCls = ["tr-wrapper"];
     if (ExpandComp) {
       baseCls.push("expandable");
@@ -273,8 +387,8 @@ function Row(props) {
     }
     return baseCls.join(" ");
   }, [ExpandComp, props.onRowClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: rowClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: rowClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         className: "tr",
@@ -285,7 +399,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_runtime7.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "div",
             {
               className: "td",
@@ -296,7 +410,7 @@ function Row(props) {
               },
               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_runtime7.jsx)(
+                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   cell.column.columnDef.meta.OpenBtn,
                   {
                     data: row.original,
@@ -312,16 +426,16 @@ function Row(props) {
       },
       `tr_${row.id}`
     ),
-    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ExpandComp, { row }) }) }) : null
+    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ExpandComp, { row }) }) }) : null
   ] }, `tr-wrapper_${row.id}`);
 }
 
 // src/molecules/expand-table/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function ExpandTable(props) {
   const { data, columns, ExpandComp, placeholder, onRowClick, tableStyle } = props;
   const defaultAlign = "left";
-  const [sorting, setSorting] = (0, import_react6.useState)([]);
+  const [sorting, setSorting] = (0, import_react9.useState)([]);
   const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
     data: data || [],
     columns,
@@ -332,7 +446,7 @@ function ExpandTable(props) {
     },
     onSortingChange: setSorting
   });
-  const gridColTemp = (0, import_react6.useMemo)(() => {
+  const gridColTemp = (0, import_react9.useMemo)(() => {
     return columns.map((col) => {
       var _a;
       if ((_a = col.meta) == null ? void 0 : _a.autoSize)
@@ -341,8 +455,8 @@ function ExpandTable(props) {
     }).join(" ");
   }, [columns]);
   const rowModels = getRowModel();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         className: "tr",
@@ -352,30 +466,30 @@ function ExpandTable(props) {
           const sortable = header.column.getCanSort();
           const sortedState = header.column.getIsSorted();
           const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "button",
             {
               onClick: header.column.getToggleSortingHandler(),
               style: sortable ? { cursor: "pointer" } : void 0,
               type: "button",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
                   header.column.columnDef.header,
                   header.getContext()
                 ) }),
-                sortable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-                  import_themes2.Flex,
+                sortable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                  import_themes4.Flex,
                   {
                     direction: "column",
                     style: { marginLeft: "var(--space-2)" },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         TriangleArrowUpIcon,
                         {
                           color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         TriangleArrowDownIcon,
                         {
                           color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
@@ -391,10 +505,10 @@ function ExpandTable(props) {
       },
       headerGroup.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "tbody", children: [
-      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes2.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime11.jsxs)("div", { className: "tbody", children: [
+      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes4.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Row,
           {
             ExpandComp,
@@ -411,15 +525,15 @@ function ExpandTable(props) {
 }
 
 // src/molecules/navigation.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Navigation({
   items,
   fontColor,
   backgroundColor,
   activeKey
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_themes2.Flex,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_themes4.Flex,
     {
       direction: "column",
       gap: "4",
@@ -430,13 +544,13 @@ function Navigation({
       },
       children: items == null ? void 0 : items.map((item) => {
         const { key, title, icon, itemRender, onClick, children } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_themes2.Flex, { direction: "column", onClick, children: [
-          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_themes2.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes4.Flex, { direction: "column", onClick, children: [
+          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes4.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
             icon,
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Typo, { variant: "subtitle", children: title })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Typo, { variant: "subtitle", children: title })
           ] }),
           children == null ? void 0 : children.map((menu) => {
-            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               Button,
               {
                 className: `tipp-navigation-button ${activeKey === menu.key ? "active" : ""}`,
@@ -460,18 +574,18 @@ function Navigation({
 }
 
 // src/molecules/date-picker/index.tsx
-var import_react7 = require("react");
+var import_react10 = require("react");
 var RDP = __toESM(require("react-datepicker"), 1);
 var import_react_datepicker = require("react-datepicker");
 var import_locale = require("date-fns/locale");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 (0, import_react_datepicker.registerLocale)("ko", import_locale.ko);
 (0, import_react_datepicker.setDefaultLocale)("ko");
 var ReactDatePicker = RDP.default.default || RDP.default || RDP;
-var DatePicker = (0, import_react7.forwardRef)(
+var DatePicker = (0, import_react10.forwardRef)(
   (props, ref) => {
     const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ReactDatePicker,
       __spreadProps(__spreadValues({
         dateFormat: "YYYY/MM/dd",
@@ -501,51 +615,51 @@ var renderCustomHeader = (props) => {
   } = props;
   const year = date.getFullYear();
   const month = date.getMonth();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_themes2.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_themes5.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes4.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_themes8.IconButton,
       {
         disabled: prevMonthButtonDisabled,
         onClick: decreaseMonth,
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons.ChevronLeftIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.ChevronLeftIcon, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_themes2.Flex, { gap: "3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes4.Flex, { gap: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
         year,
         "\uB144"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
         month + 1,
         "\uC6D4"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_themes5.IconButton,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_themes8.IconButton,
       {
         disabled: nextMonthButtonDisabled,
         onClick: increaseMonth,
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_icons.ChevronRightIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.ChevronRightIcon, {})
       }
     )
   ] });
 };
 
 // src/molecules/dot-navigation.tsx
-var import_react8 = require("react");
+var import_react11 = require("react");
 var import_react_icons2 = require("@radix-ui/react-icons");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DotNavigation(props) {
   const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
-  const [currentDot, setCurrentDot] = (0, import_react8.useState)(
+  const [currentDot, setCurrentDot] = (0, import_react11.useState)(
     () => {
       var _a;
       return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
     }
   );
-  const onClickDot = (0, import_react8.useCallback)(
+  const onClickDot = (0, import_react11.useCallback)(
     (i) => {
       if (onClick) {
         onClick(i);
@@ -555,17 +669,17 @@ function DotNavigation(props) {
     },
     [onClick]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
   }, [currentDot, onChangeDotIndex]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (typeof dotIndex === "undefined")
       return;
     setCurrentDot(dotIndex);
   }, [dotIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes2.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes4.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
     const isSelected = currentDot === index;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react_icons2.DotFilledIcon,
       {
         height: "24px",
@@ -582,12 +696,428 @@ function DotNavigation(props) {
     );
   }) : null });
 }
+
+// src/molecules/stepper.tsx
+var import_react12 = require("react");
+var import_themes12 = require("@radix-ui/themes");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var StepContext = (0, import_react12.createContext)({
+  active: false,
+  completed: false,
+  index: 0
+});
+function Root(props) {
+  const {
+    activeStep = 0,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    direction = "vertical"
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_themes4.Flex,
+    {
+      gap: "3",
+      style: {
+        width,
+        minWidth,
+        maxWidth
+      },
+      children: import_react12.Children.map(children, (child, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          StepContext.Provider,
+          {
+            value: {
+              active: index === activeStep,
+              completed: index < activeStep,
+              index,
+              direction
+            },
+            children: child
+          }
+        );
+      })
+    }
+  );
+}
+function Step(props) {
+  const { Icon, children } = props;
+  const {
+    active,
+    completed,
+    index,
+    direction = "vertical"
+  } = (0, import_react12.useContext)(StepContext);
+  const connector = index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_themes12.Separator,
+    {
+      style: {
+        width: `calc(100% - 40px)`,
+        position: "absolute",
+        top: 16,
+        right: `calc(50% + 26px)`
+      }
+    }
+  ) : null;
+  const InnerStep = (0, import_react12.useMemo)(() => {
+    if (active) {
+      return ActiveStep;
+    }
+    if (completed) {
+      return CompleteStep;
+    }
+    return IncompleteStep;
+  }, [completed, active]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    import_themes4.Flex,
+    {
+      align: "center",
+      direction: direction === "horizontal" ? "row" : "column",
+      gap: "4",
+      position: "relative",
+      style: { flex: 1 },
+      children: [
+        connector,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InnerStep, { Icon, children })
+      ]
+    }
+  );
+}
+function CompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active } = (0, import_react12.useContext)(StepContext);
+  const background = "var(--accent-a4)";
+  const border = "1px solid var(--accent-7)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    Icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { active, completed }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_icons.CheckIcon, { fill: color, height: 16, width: 16 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          border,
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { align: "center", children })
+  ] });
+}
+function IncompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = (0, import_react12.useContext)(StepContext);
+  const background = "var(--gray-5)";
+  const color = "var(--gray-a11)";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    Icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { active, completed }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { style: { color }, children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { align: "center", style: { color }, children })
+  ] });
+}
+function ActiveStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = (0, import_react12.useContext)(StepContext);
+  const background = "var(--accent-10)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    Icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { active, completed }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { style: { color }, weight: "bold", children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: { background }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { align: "center", weight: "bold", children })
+  ] });
+}
+var Stepper = {
+  Root,
+  Step
+};
+
+// src/molecules/tag-selector.tsx
+var import_react13 = require("react");
+var import_react_icons3 = require("@radix-ui/react-icons");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var OPTION_HEIGHT = 32;
+var DefaultDropdownContainer = (props) => {
+  return props.children;
+};
+function TagSelector(props) {
+  const {
+    options = [],
+    tagRender,
+    placeholder,
+    maxCount = 0,
+    DropdownContainer = DefaultDropdownContainer
+  } = props;
+  const [selected, setSelected] = (0, import_react13.useState)(props.selected || []);
+  const [value, setValue] = (0, import_react13.useState)("");
+  const [focusIndex, setFocusIndex] = (0, import_react13.useState)(null);
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const [focus, setFocus] = (0, import_react13.useState)(false);
+  const fieldRef = (0, import_react13.useRef)(null);
+  const scrollRef = (0, import_react13.useRef)(null);
+  const closeRef = (0, import_react13.useRef)(0);
+  const onFocus = (0, import_react13.useCallback)(() => {
+    clearTimeout(closeRef.current);
+    setFocus(true);
+    setOpen(true);
+  }, []);
+  const onBlur = (0, import_react13.useCallback)(() => {
+    closeRef.current = setTimeout(() => {
+      setFocus(false);
+      setOpen(false);
+      setTimeout(() => {
+        setValue("");
+      }, 100);
+    }, 100);
+  }, []);
+  const onChangeValue = (0, import_react13.useCallback)(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+  const filteredOptions = (0, import_react13.useMemo)(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+  const selectedItem = (0, import_react13.useMemo)(() => {
+    const result = [];
+    selected.forEach((id) => {
+      const maybeItem = options.find((option) => option.id === id);
+      if (maybeItem)
+        result.push(maybeItem);
+    });
+    return result;
+  }, [options, selected]);
+  const onDelete = (0, import_react13.useCallback)((id) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+  const onSelect = (0, import_react13.useCallback)(
+    (id) => {
+      if (maxCount && selected.length + 1 > maxCount)
+        return;
+      setSelected((prev) => [...prev, id]);
+    },
+    [maxCount, selected]
+  );
+  const toggleItem = (0, import_react13.useCallback)(
+    (id) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+  const setScroll = (0, import_react13.useCallback)((index) => {
+    if (scrollRef.current) {
+      const scrollTop = scrollRef.current.scrollTop;
+      const clientHeight = scrollRef.current.clientHeight;
+      const focusTop = index * OPTION_HEIGHT;
+      if (focusTop < scrollTop) {
+        scrollRef.current.scrollTop = focusTop;
+      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {
+        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;
+      }
+    }
+  }, []);
+  const handleKeyDown = (0, import_react13.useCallback)(
+    (e) => {
+      var _a;
+      const key = e.key;
+      switch (key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "Enter":
+          setValue("");
+          if (focusIndex !== null) {
+            toggleItem((_a = filteredOptions[focusIndex]) == null ? void 0 : _a.id);
+          }
+          break;
+        case "Backspace":
+          if (value.length === 0) {
+            setSelected((prev) => prev.slice(0, -1));
+          }
+          break;
+        case "Escape":
+          setOpen(false);
+          break;
+      }
+    },
+    [
+      focusIndex,
+      value.length,
+      setScroll,
+      options.length,
+      toggleItem,
+      filteredOptions
+    ]
+  );
+  (0, import_react13.useEffect)(() => {
+    setFocusIndex(null);
+  }, [open]);
+  (0, import_react13.useEffect)(() => {
+    setFocusIndex(0);
+  }, [filteredOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes9.Popover.Root, { open: Boolean(filteredOptions.length) && open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes9.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      import_themes5.Grid,
+      {
+        align: "center",
+        className: `tag-selector ${focus ? "focused" : ""}`,
+        columns: "1fr auto",
+        gap: "1",
+        onClick: () => {
+          var _a;
+          return (_a = fieldRef.current) == null ? void 0 : _a.focus();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            import_themes4.Flex,
+            {
+              align: "center",
+              gap: "1",
+              maxWidth: "100%",
+              overflow: "hidden",
+              wrap: "wrap",
+              children: [
+                selectedItem.map((item) => {
+                  return tagRender ? tagRender(item) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Badge, { children: [
+                    item.name,
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      Button,
+                      {
+                        onClick: () => {
+                          onDelete(item.id);
+                        },
+                        variant: "transparent",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons3.Cross1Icon, {})
+                      }
+                    )
+                  ] }, item.id);
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  AutoSizingInput,
+                  {
+                    onBlur,
+                    onChange: onChangeValue,
+                    onFocus,
+                    onKeyDown: handleKeyDown,
+                    placeholder,
+                    ref: fieldRef,
+                    value
+                  }
+                )
+              ]
+            }
+          ),
+          focus ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons3.MagnifyingGlassIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons3.ChevronRightIcon, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_themes9.Popover.Content,
+      {
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          DropdownContainer,
+          {
+            currentItem: filteredOptions[focusIndex || 0],
+            items: filteredOptions,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_themes10.ScrollArea,
+              {
+                ref: scrollRef,
+                scrollbars: "vertical",
+                style: { height: OPTION_HEIGHT * 8 },
+                type: "auto",
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes4.Flex, { direction: "column", children: filteredOptions.map((item, i) => {
+                  const isSelected = Boolean(
+                    selected.find((el) => el === item.id)
+                  );
+                  const isFocus = i === focusIndex;
+                  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    Button,
+                    {
+                      onClick: () => {
+                        var _a;
+                        toggleItem(item.id);
+                        (_a = fieldRef.current) == null ? void 0 : _a.focus();
+                      },
+                      onMouseEnter: () => {
+                        setFocusIndex(i);
+                      },
+                      style: {
+                        width: "100%",
+                        background: isFocus ? "var(--accent-a3)" : void 0,
+                        color: "var(--gray-12)",
+                        fontWeight: 400,
+                        boxShadow: "none"
+                      },
+                      variant: isSelected ? "soft" : "outline",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes4.Flex, { justify: "between", width: "100%", children: [
+                        item.name,
+                        isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.CheckIcon, {}) : null
+                      ] })
+                    },
+                    item.id
+                  );
+                }) })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DatePicker,
   DotNavigation,
   ExpandTable,
   Navigation,
+  Stepper,
+  TagSelector,
   createColumnHelper
 });
 //# sourceMappingURL=index.cjs.map