@tipp/ui 1.1.22 → 1.2.0

package/dist/index.cjs

@@ -60,7 +60,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AlertDialog: () => import_themes.AlertDialog,
+  ArchiveIcon: () => import_react_icons2.ArchiveIcon,
   AspectRatio: () => import_themes2.AspectRatio,
+  AutoSizingInput: () => AutoSizingInput,
   Avatar: () => Avatar,
   BackpackIcon: () => import_react_icons2.BackpackIcon,
   Badge: () => Badge,
@@ -74,6 +76,7 @@ __export(src_exports, {
   Callout: () => import_themes8.Callout,
   Card: () => Card,
   ChatBubbleIcon: () => import_react_icons2.ChatBubbleIcon,
+  CheckIcon: () => import_react_icons2.CheckIcon,
   Checkbox: () => Checkbox,
   CheckboxCards: () => import_themes11.CheckboxCards,
   CheckboxGroup: () => CheckboxGroup,
@@ -140,10 +143,12 @@ __export(src_exports, {
   Separator: () => import_themes39.Separator,
   Skeleton: () => import_themes40.Skeleton,
   Spinner: () => import_themes49.Spinner,
+  Stepper: () => Stepper,
   Strong: () => import_themes41.Strong,
   Switch: () => import_themes42.Switch,
   TabNav: () => import_themes43.TabNav,
   Tabs: () => import_themes44.Tabs,
+  TagSelector: () => TagSelector,
   TextArea: () => import_themes45.TextArea,
   TextField: () => import_themes47.TextField,
   ThemeProvider: () => ThemeProvider,
@@ -157,7 +162,7 @@ __export(src_exports, {
   scrollTo: () => scrollTo,
   toast: () => import_react_toastify2.toast,
   uiProps: () => uiProps,
-  useThemeContext: () => import_themes51.useThemeContext
+  useThemeContext: () => import_themes52.useThemeContext
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -240,7 +245,7 @@ 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 } = _a, restProps = __objRest(_a, ["size", "style"]);
+    const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
     const radixSize = (0, import_react3.useMemo)(() => {
       switch (size) {
         case "small":
@@ -255,18 +260,27 @@ var Button = (0, import_react3.forwardRef)(
       }
     }, [size]);
     const mergedStyle = (0, import_react3.useMemo)(() => {
-      if (size !== "largest")
-        return style;
-      return __spreadValues({
-        borderRadius: "var(--radius-4)",
-        padding: "var(--space-5)",
-        fontSize: "var(--font-size-4)"
-      }, style);
-    }, [size, style]);
+      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_themes7.Button,
       __spreadProps(__spreadValues({
-        style: mergedStyle
+        style: mergedStyle,
+        variant: radixVariant
       }, restProps), {
         ref,
         size: radixSize
@@ -974,17 +988,50 @@ var Form = {
   Submit: RadixForm.Submit
 };
 
+// src/atoms/auto-sizing-input.tsx
+var import_react18 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var AutoSizingInput = (0, import_react18.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { value: _value, onChangeValue, onChange } = _b, rest = __objRest(_b, ["value", "onChangeValue", "onChange"]);
+    const [value, setValue] = (0, import_react18.useState)(_value);
+    const [width, setWidth] = (0, import_react18.useState)(0);
+    const span = (0, import_react18.useRef)(null);
+    (0, import_react18.useEffect)(() => {
+      span.current && setWidth(span.current.offsetWidth);
+    }, [value]);
+    const changeHandler = (0, import_react18.useCallback)(
+      (evt) => {
+        onChange == null ? void 0 : onChange(evt);
+        setValue(evt.target.value);
+      },
+      [onChange]
+    );
+    (0, import_react18.useEffect)(() => {
+      setValue(_value || "");
+    }, [_value]);
+    (0, import_react18.useEffect)(() => {
+      onChangeValue == null ? void 0 : onChangeValue(value || "");
+    }, [value, onChangeValue]);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "auto-sizing-input wrapper", style: { width: width + 24 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", __spreadValues({ onChange: changeHandler, ref, value }, rest)),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { "aria-hidden": "true", ref: span, children: value })
+    ] });
+  }
+);
+AutoSizingInput.displayName = "AutoSizingInput";
+
 // src/molecules/expand-table/index.tsx
 var import_react_table2 = require("@tanstack/react-table");
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/icons/down.tsx
-var React8 = __toESM(require("react"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var TriangleArrowDownIcon = React8.forwardRef(
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var TriangleArrowDownIcon = React9.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -994,7 +1041,7 @@ var TriangleArrowDownIcon = React8.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.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",
@@ -1008,12 +1055,12 @@ var TriangleArrowDownIcon = React8.forwardRef(
 TriangleArrowDownIcon.displayName = "ArrowDownIcon";
 
 // src/icons/up.tsx
-var React9 = __toESM(require("react"), 1);
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var TriangleArrowUpIcon = React9.forwardRef(
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var TriangleArrowUpIcon = React10.forwardRef(
   (_a, forwardedRef) => {
     var _b = _a, { color = "currentColor" } = _b, props = __objRest(_b, ["color"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "svg",
       __spreadProps(__spreadValues({
         fill: "none",
@@ -1023,7 +1070,7 @@ var TriangleArrowUpIcon = React9.forwardRef(
         xmlns: "http://www.w3.org/2000/svg"
       }, props), {
         ref: forwardedRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.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",
@@ -1038,17 +1085,17 @@ TriangleArrowUpIcon.displayName = "ArrowUpIcon";
 
 // src/molecules/expand-table/row.tsx
 var import_react_table = require("@tanstack/react-table");
-var import_react18 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Row(props) {
   const { row, ExpandComp, gridColTemp } = props;
-  const [open, setOpen] = (0, import_react18.useState)(false);
-  const onClickRow = (0, import_react18.useCallback)(() => {
+  const [open, setOpen] = (0, import_react19.useState)(false);
+  const onClickRow = (0, import_react19.useCallback)(() => {
     var _a;
     (_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
     setOpen((prev) => !prev);
   }, [props, row.original]);
-  const rowClassName = (0, import_react18.useMemo)(() => {
+  const rowClassName = (0, import_react19.useMemo)(() => {
     const baseCls = ["tr-wrapper"];
     if (ExpandComp) {
       baseCls.push("expandable");
@@ -1058,8 +1105,8 @@ function Row(props) {
     }
     return baseCls.join(" ");
   }, [ExpandComp, props.onRowClick]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: rowClassName, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: rowClassName, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "button",
       {
         className: "tr",
@@ -1070,7 +1117,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_runtime23.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
               className: "td",
@@ -1081,7 +1128,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_runtime23.jsx)(
+                ((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   cell.column.columnDef.meta.OpenBtn,
                   {
                     data: row.original,
@@ -1097,16 +1144,16 @@ function Row(props) {
       },
       `tr_${row.id}`
     ),
-    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExpandComp, { row }) }) }) : null
+    ExpandComp ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ExpandComp, { row }) }) }) : null
   ] }, `tr-wrapper_${row.id}`);
 }
 
 // src/molecules/expand-table/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ExpandTable(props) {
   const { data, columns, ExpandComp, placeholder, onRowClick, tableStyle } = props;
   const defaultAlign = "left";
-  const [sorting, setSorting] = (0, import_react19.useState)([]);
+  const [sorting, setSorting] = (0, import_react20.useState)([]);
   const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
     data: data || [],
     columns,
@@ -1117,7 +1164,7 @@ function ExpandTable(props) {
     },
     onSortingChange: setSorting
   });
-  const gridColTemp = (0, import_react19.useMemo)(() => {
+  const gridColTemp = (0, import_react20.useMemo)(() => {
     return columns.map((col) => {
       var _a;
       if ((_a = col.meta) == null ? void 0 : _a.autoSize)
@@ -1126,8 +1173,8 @@ function ExpandTable(props) {
     }).join(" ");
   }, [columns]);
   const rowModels = getRowModel();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "expand-table", style: tableStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         className: "tr",
@@ -1137,30 +1184,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_runtime24.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "button",
             {
               onClick: header.column.getToggleSortingHandler(),
               style: sortable ? { cursor: "pointer" } : void 0,
               type: "button",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "body", children: (0, import_react_table2.flexRender)(
                   header.column.columnDef.header,
                   header.getContext()
                 ) }),
-                sortable ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                sortable ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                   import_themes19.Flex,
                   {
                     direction: "column",
                     style: { marginLeft: "var(--space-2)" },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                         TriangleArrowUpIcon,
                         {
                           color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                         TriangleArrowDownIcon,
                         {
                           color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
@@ -1176,10 +1223,10 @@ function ExpandTable(props) {
       },
       headerGroup.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "tbody", children: [
-      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime25.jsxs)("div", { className: "tbody", children: [
+      rowModels.rows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes19.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime24.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Row,
           {
             ExpandComp,
@@ -1196,14 +1243,14 @@ function ExpandTable(props) {
 }
 
 // src/molecules/navigation.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Navigation({
   items,
   fontColor,
   backgroundColor,
   activeKey
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_themes19.Flex,
     {
       direction: "column",
@@ -1215,13 +1262,13 @@ function Navigation({
       },
       children: items == null ? void 0 : items.map((item) => {
         const { key, title, icon, itemRender, onClick, children } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes19.Flex, { direction: "column", onClick, children: [
-          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes19.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.Flex, { direction: "column", onClick, children: [
+          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
             icon,
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Typo, { variant: "subtitle", children: title })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Typo, { variant: "subtitle", children: title })
           ] }),
           children == null ? void 0 : children.map((menu) => {
-            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            return menu.itemRender ? menu.itemRender(menu) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               Button,
               {
                 className: `tipp-navigation-button ${activeKey === menu.key ? "active" : ""}`,
@@ -1245,23 +1292,23 @@ function Navigation({
 }
 
 // src/molecules/date-picker/index.tsx
-var import_react20 = require("react");
+var import_react21 = 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_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = 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_react20.forwardRef)(
+var DatePicker = (0, import_react21.forwardRef)(
   (props, ref) => {
     const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       ReactDatePicker,
       __spreadProps(__spreadValues({
-        dateFormat: "yyyy/MM/dd",
+        dateFormat: "YYYY/MM/dd",
         nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
-        placeholderText: "yyyy/mm/dd",
+        placeholderText: "YYYY/mm/dd",
         previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
         ref,
         renderCustomHeader,
@@ -1286,51 +1333,51 @@ var renderCustomHeader = (props) => {
   } = props;
   const year = date.getFullYear();
   const month = date.getMonth();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes19.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_themes24.IconButton,
       {
         disabled: prevMonthButtonDisabled,
         onClick: decreaseMonth,
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons2.ChevronLeftIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_icons2.ChevronLeftIcon, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.Flex, { gap: "3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes19.Flex, { gap: "3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
         year,
         "\uB144"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Heading2, { variant: "subtitle1", weight: "regular", children: [
         month + 1,
         "\uC6D4"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_themes24.IconButton,
       {
         disabled: nextMonthButtonDisabled,
         onClick: increaseMonth,
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_icons2.ChevronRightIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_icons2.ChevronRightIcon, {})
       }
     )
   ] });
 };
 
 // src/molecules/dot-navigation.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_icons4 = require("@radix-ui/react-icons");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function DotNavigation(props) {
   const { dotCount, onClick, dotIndex, defaultDotIndex, onChangeDotIndex } = props;
-  const [currentDot, setCurrentDot] = (0, import_react21.useState)(
+  const [currentDot, setCurrentDot] = (0, import_react22.useState)(
     () => {
       var _a;
       return (_a = defaultDotIndex != null ? defaultDotIndex : dotIndex) != null ? _a : 0;
     }
   );
-  const onClickDot = (0, import_react21.useCallback)(
+  const onClickDot = (0, import_react22.useCallback)(
     (i) => {
       if (onClick) {
         onClick(i);
@@ -1340,17 +1387,17 @@ function DotNavigation(props) {
     },
     [onClick]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     onChangeDotIndex == null ? void 0 : onChangeDotIndex(currentDot);
   }, [currentDot, onChangeDotIndex]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (typeof dotIndex === "undefined")
       return;
     setCurrentDot(dotIndex);
   }, [dotIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes19.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_themes19.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
     const isSelected = currentDot === index;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_react_icons4.DotFilledIcon,
       {
         height: "24px",
@@ -1368,29 +1415,443 @@ function DotNavigation(props) {
   }) : null });
 }
 
-// src/theme/use-theme.tsx
+// src/molecules/stepper.tsx
+var import_react23 = require("react");
 var import_themes51 = require("@radix-ui/themes");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var StepContext = (0, import_react23.createContext)({
+  active: false,
+  completed: false,
+  index: 0
+});
+function Root7(props) {
+  const {
+    activeStep = 0,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    direction = "vertical"
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_themes19.Flex,
+    {
+      gap: "3",
+      style: {
+        width,
+        minWidth,
+        maxWidth
+      },
+      children: import_react23.Children.map(children, (child, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime29.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_react23.useContext)(StepContext);
+  const connector = index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_themes51.Separator,
+    {
+      style: {
+        width: `calc(100% - 40px)`,
+        position: "absolute",
+        top: 16,
+        right: `calc(50% + 26px)`
+      }
+    }
+  ) : null;
+  const InnerStep = (0, import_react23.useMemo)(() => {
+    if (active) {
+      return ActiveStep;
+    }
+    if (completed) {
+      return CompleteStep;
+    }
+    return IncompleteStep;
+  }, [completed, active]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_themes19.Flex,
+    {
+      align: "center",
+      direction: direction === "horizontal" ? "row" : "column",
+      gap: "4",
+      position: "relative",
+      style: { flex: 1 },
+      children: [
+        connector,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(InnerStep, { Icon, children })
+      ]
+    }
+  );
+}
+function CompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active } = (0, import_react23.useContext)(StepContext);
+  const background = "var(--accent-a4)";
+  const border = "1px solid var(--accent-7)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    Icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { active, completed }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_icons2.CheckIcon, { fill: color, height: 16, width: 16 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          border,
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, { align: "center", children })
+  ] });
+}
+function IncompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = (0, import_react23.useContext)(StepContext);
+  const background = "var(--gray-5)";
+  const color = "var(--gray-a11)";
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    Icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { active, completed }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, { style: { color }, children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, { align: "center", style: { color }, children })
+  ] });
+}
+function ActiveStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = (0, import_react23.useContext)(StepContext);
+  const background = "var(--accent-10)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    Icon ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { active, completed }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, { style: { color }, weight: "bold", children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: { background }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Typo, { align: "center", weight: "bold", children })
+  ] });
+}
+var Stepper = {
+  Root: Root7,
+  Step
+};
+
+// src/molecules/tag-selector.tsx
+var import_react24 = require("react");
+var import_react_icons5 = require("@radix-ui/react-icons");
+var import_jsx_runtime30 = 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_react24.useState)(props.selected || []);
+  const [value, setValue] = (0, import_react24.useState)("");
+  const [focusIndex, setFocusIndex] = (0, import_react24.useState)(null);
+  const [open, setOpen] = (0, import_react24.useState)(false);
+  const [focus, setFocus] = (0, import_react24.useState)(false);
+  const fieldRef = (0, import_react24.useRef)(null);
+  const scrollRef = (0, import_react24.useRef)(null);
+  const closeRef = (0, import_react24.useRef)(0);
+  const onFocus = (0, import_react24.useCallback)(() => {
+    clearTimeout(closeRef.current);
+    setFocus(true);
+    setOpen(true);
+  }, []);
+  const onBlur = (0, import_react24.useCallback)(() => {
+    closeRef.current = setTimeout(() => {
+      setFocus(false);
+      setOpen(false);
+      setTimeout(() => {
+        setValue("");
+      }, 100);
+    }, 100);
+  }, []);
+  const onChangeValue = (0, import_react24.useCallback)(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+  const filteredOptions = (0, import_react24.useMemo)(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+  const selectedItem = (0, import_react24.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_react24.useCallback)((id) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+  const onSelect = (0, import_react24.useCallback)(
+    (id) => {
+      if (maxCount && selected.length + 1 > maxCount)
+        return;
+      setSelected((prev) => [...prev, id]);
+    },
+    [maxCount, selected]
+  );
+  const toggleItem = (0, import_react24.useCallback)(
+    (id) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+  const setScroll = (0, import_react24.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_react24.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_react24.useEffect)(() => {
+    setFocusIndex(null);
+  }, [open]);
+  (0, import_react24.useEffect)(() => {
+    setFocusIndex(0);
+  }, [filteredOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_themes29.Popover.Root, { open: Boolean(filteredOptions.length) && open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes29.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      import_themes20.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_runtime30.jsxs)(
+            import_themes19.Flex,
+            {
+              align: "center",
+              gap: "1",
+              maxWidth: "100%",
+              overflow: "hidden",
+              wrap: "wrap",
+              children: [
+                selectedItem.map((item) => {
+                  return tagRender ? tagRender(item) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Badge, { children: [
+                    item.name,
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      Button,
+                      {
+                        onClick: () => {
+                          onDelete(item.id);
+                        },
+                        variant: "transparent",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons5.Cross1Icon, {})
+                      }
+                    )
+                  ] }, item.id);
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                  AutoSizingInput,
+                  {
+                    onBlur,
+                    onChange: onChangeValue,
+                    onFocus,
+                    onKeyDown: handleKeyDown,
+                    placeholder,
+                    ref: fieldRef,
+                    value
+                  }
+                )
+              ]
+            }
+          ),
+          focus ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons5.MagnifyingGlassIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons5.ChevronRightIcon, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_themes29.Popover.Content,
+      {
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          DropdownContainer,
+          {
+            currentItem: filteredOptions[focusIndex || 0],
+            items: filteredOptions,
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              import_themes35.ScrollArea,
+              {
+                ref: scrollRef,
+                scrollbars: "vertical",
+                style: { height: OPTION_HEIGHT * 8 },
+                type: "auto",
+                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_themes19.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_runtime30.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_runtime30.jsxs)(import_themes19.Flex, { justify: "between", width: "100%", children: [
+                        item.name,
+                        isSelected ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_icons2.CheckIcon, {}) : null
+                      ] })
+                    },
+                    item.id
+                  );
+                }) })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/theme/use-theme.tsx
+var import_themes52 = require("@radix-ui/themes");
 
 // src/ui-props/index.ts
 var uiProps = __toESM(require("@radix-ui/themes/dist/cjs/props/index.js"), 1);
 
 // src/charts/horizontal-bar-chart.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function HorizontalBarChart(props) {
   const { total, value, backgroundColor, barColor, height } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: "tipp_horizontal-bar-chart bar-wrapper",
       style: { height, backgroundColor },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           style: {
             width: `${Math.round(value / total * 100)}%`,
             height: "100%"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "bar", style: { backgroundColor: barColor } })
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "bar", style: { backgroundColor: barColor } })
         }
       )
     }
@@ -1588,7 +2049,9 @@ function scrollTo(element, targetPosition, duration) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertDialog,
+  ArchiveIcon,
   AspectRatio,
+  AutoSizingInput,
   Avatar,
   BackpackIcon,
   Badge,
@@ -1602,6 +2065,7 @@ function scrollTo(element, targetPosition, duration) {
   Callout,
   Card,
   ChatBubbleIcon,
+  CheckIcon,
   Checkbox,
   CheckboxCards,
   CheckboxGroup,
@@ -1668,10 +2132,12 @@ function scrollTo(element, targetPosition, duration) {
   Separator,
   Skeleton,
   Spinner,
+  Stepper,
   Strong,
   Switch,
   TabNav,
   Tabs,
+  TagSelector,
   TextArea,
   TextField,
   ThemeProvider,