@tipp/ui 1.5.0 → 1.5.2

package/dist/molecules/index.cjs

@@ -220,16 +220,10 @@ Button.displayName = "Button";
 // src/atoms/code.tsx
 var import_themes6 = require("@radix-ui/themes");
 
-// src/atoms/flex.tsx
-var import_themes7 = require("@radix-ui/themes");
-
-// src/atoms/grid.tsx
-var import_themes8 = require("@radix-ui/themes");
-
 // src/atoms/heading.tsx
-var import_themes9 = require("@radix-ui/themes");
+var import_themes7 = require("@radix-ui/themes");
 var import_react4 = require("react");
-var import_themes10 = require("@radix-ui/themes");
+var import_themes8 = 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"]);
@@ -249,10 +243,16 @@ function Heading2(props) {
         return size;
     }
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes9.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes7.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
 }
 
 // src/atoms/icon-button.tsx
+var import_themes9 = require("@radix-ui/themes");
+
+// src/atoms/flex.tsx
+var import_themes10 = require("@radix-ui/themes");
+
+// src/atoms/grid.tsx
 var import_themes11 = require("@radix-ui/themes");
 
 // src/atoms/kbd.tsx
@@ -462,9 +462,9 @@ function Pagination(props) {
     size: "3",
     style: { borderRadius: "50%" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_themes7.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_themes10.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_themes11.IconButton,
+      import_themes9.IconButton,
       __spreadProps(__spreadValues({
         disabled: !doublePrev,
         onClick: onClickDoublePrev
@@ -472,8 +472,8 @@ function Pagination(props) {
         children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes11.IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes7.Flex, { gap: "1", children: visibleItems.map((item) => {
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes10.Flex, { gap: "1", children: visibleItems.map((item) => {
       return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
@@ -487,9 +487,9 @@ function Pagination(props) {
         item
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes11.IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_themes11.IconButton,
+      import_themes9.IconButton,
       __spreadProps(__spreadValues({
         disabled: !doubleNext,
         onClick: onClickDoubleNext
@@ -714,7 +714,7 @@ function ExpandTable(props) {
     (rowLength) => {
       if (isLoading) {
         return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_themes7.Flex,
+          import_themes10.Flex,
           {
             align: "center",
             height: "100%",
@@ -726,7 +726,7 @@ function ExpandTable(props) {
         );
       }
       if (rowLength === 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes7.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes10.Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
       }
       return null;
     },
@@ -760,7 +760,7 @@ function ExpandTable(props) {
                   header.getContext()
                 ) }),
                 sortable ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-                  import_themes7.Flex,
+                  import_themes10.Flex,
                   {
                     direction: "column",
                     style: { marginLeft: "var(--space-2)" },
@@ -802,7 +802,7 @@ function ExpandTable(props) {
         `row_${row.id}`
       );
     }) }),
-    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes7.Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    showPagination ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes10.Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       Pagination,
       {
         count: pageCount,
@@ -823,7 +823,7 @@ function Navigation({
   activeKey
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_themes7.Flex,
+    import_themes10.Flex,
     {
       direction: "column",
       gap: "4",
@@ -834,8 +834,8 @@ function Navigation({
       },
       children: items == null ? void 0 : items.map((item) => {
         const { key, title, icon, itemRender, onClick, children } = item;
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_themes7.Flex, { direction: "column", onClick, children: [
-          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_themes7.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_themes10.Flex, { direction: "column", onClick, children: [
+          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_themes10.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
             icon,
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { variant: "subtitle", children: title })
           ] }),
@@ -876,7 +876,7 @@ var DatePicker = (0, import_react13.forwardRef)(
   (props, ref) => {
     const _a = props, { fullWidth } = _a, rest = __objRest(_a, ["fullWidth"]);
     const fullWidthClassName = fullWidth ? "full-width" : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes7.Flex, { p: "0", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes10.Flex, { p: "0", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ReactDatePicker,
       __spreadProps(__spreadValues({
         dateFormat: "YYYY/MM/dd",
@@ -907,9 +907,9 @@ var renderCustomHeader = (props) => {
   } = props;
   const year = date ? date.getFullYear() : "-";
   const month = date ? date.getMonth() + 1 : "-";
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes7.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes10.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_themes11.IconButton,
+      import_themes9.IconButton,
       {
         disabled: prevMonthButtonDisabled,
         onClick: decreaseMonth,
@@ -918,7 +918,7 @@ var renderCustomHeader = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.ChevronLeftIcon, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes7.Flex, { gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes10.Flex, { gap: "3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Heading2, { variant: "heading4", weight: "regular", children: [
         year,
         "\uB144"
@@ -929,7 +929,7 @@ var renderCustomHeader = (props) => {
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_themes11.IconButton,
+      import_themes9.IconButton,
       {
         disabled: nextMonthButtonDisabled,
         onClick: increaseMonth,
@@ -971,7 +971,7 @@ function DotNavigation(props) {
       return;
     setCurrentDot(dotIndex);
   }, [dotIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes7.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes10.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
     const isSelected = currentDot === index;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_react_icons2.DotFilledIcon,
@@ -1010,7 +1010,7 @@ function Root2(props) {
     direction = "vertical"
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_themes7.Flex,
+    import_themes10.Flex,
     {
       gap: "3",
       style: {
@@ -1064,7 +1064,7 @@ function Step(props) {
     return IncompleteStep;
   }, [completed, active]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-    import_themes7.Flex,
+    import_themes10.Flex,
     {
       align: "center",
       direction: direction === "horizontal" ? "row" : "column",
@@ -1331,12 +1331,12 @@ function TagSelector(props) {
   const focusClassName = focus ? " focused" : "";
   const readOnlyClassName = readOnly ? " read-only" : "";
   const errorClassName = error ? " error" : "";
-  const readonlyContent = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes7.Flex, { gap: "1", children: selectedItem.map((item) => {
+  const readonlyContent = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes10.Flex, { gap: "1", children: selectedItem.map((item) => {
     return tagRender ? tagRender(item) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Badge, { size: badgeSize, children: item.name }, item.id);
   }) });
   const editContent = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-      import_themes7.Flex,
+      import_themes10.Flex,
       {
         align: "center",
         gap: "1",
@@ -1378,7 +1378,7 @@ function TagSelector(props) {
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_themes15.Popover.Root, { open: Boolean(filteredOptions.length) && open, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes15.Popover.Trigger, { style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_themes8.Grid,
+      import_themes11.Grid,
       {
         align: "center",
         className: `tag-selector ${size} ${focusClassName}${readOnlyClassName}${errorClassName}`,
@@ -1409,7 +1409,7 @@ function TagSelector(props) {
                 scrollbars: "vertical",
                 style: { height: OPTION_HEIGHT * 8 },
                 type: "auto",
-                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes7.Flex, { direction: "column", children: filteredOptions.map((item, i) => {
+                children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes10.Flex, { direction: "column", children: filteredOptions.map((item, i) => {
                   const isSelected = Boolean(
                     selected.find((el) => el === item.id)
                   );
@@ -1434,7 +1434,7 @@ function TagSelector(props) {
                         boxShadow: "none"
                       },
                       variant: isSelected ? "soft" : "outline",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_themes7.Flex, { justify: "between", width: "100%", children: [
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_themes10.Flex, { justify: "between", width: "100%", children: [
                         item.name,
                         isSelected ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_icons.CheckIcon, {}) : null
                       ] })
@@ -1478,7 +1478,7 @@ function LearningPost(props) {
       scaling: "110%",
       style: {},
       children: html ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-        import_themes8.Grid,
+        import_themes11.Grid,
         {
           columns: { initial: "1", md: "130px 1fr 130px" },
           gap: { initial: "2", md: "5" },
@@ -1491,7 +1491,7 @@ function LearningPost(props) {
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", {}),
             /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-              import_themes7.Flex,
+              import_themes10.Flex,
               {
                 align: "center",
                 direction: "column",
@@ -1500,9 +1500,9 @@ function LearningPost(props) {
                 overflow: "hidden",
                 width: "100%",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_themes8.Grid, { align: "start", columns: { initial: "1", sm: "2" }, gap: "2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_themes11.Grid, { align: "start", columns: { initial: "1", sm: "2" }, gap: "2", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-                      import_themes8.Grid,
+                      import_themes11.Grid,
                       {
                         gap: "3",
                         mb: { initial: "4", sm: "0" },
@@ -1521,7 +1521,7 @@ function LearningPost(props) {
                             }
                           ),
                           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Typo, { children: metaDescription }),
-                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes7.Flex, { gap: "1", wrap: "wrap", children: tags == null ? void 0 : tags.map((el) => {
+                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_themes10.Flex, { gap: "1", wrap: "wrap", children: tags == null ? void 0 : tags.map((el) => {
                             var _a;
                             if ((_a = el.name) == null ? void 0 : _a.startsWith("filter"))
                               return;
@@ -1557,7 +1557,7 @@ function LearningPost(props) {
           ]
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-        import_themes7.Flex,
+        import_themes10.Flex,
         {
           align: "center",
           direction: "column",
@@ -1603,7 +1603,7 @@ function CodeSize3(props) {
   );
 }
 function ForceRefresh() {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_themes7.Flex, { direction: "column", gap: "2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_themes10.Flex, { direction: "column", gap: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Typo, { children: [
       "1. \uD06C\uB86C \uBE0C\uB77C\uC6B0\uC800 \uC624\uB978\uCABD \uC0C1\uB2E8\uC758",
       " ",
@@ -1622,7 +1622,7 @@ function ForceRefresh() {
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CodeSize3, { children: "\uAC1C\uBC1C\uC790 \uB3C4\uAD6C" }),
       " \uBA54\uB274\uB97C \uC120\uD0DD\uD569\uB2C8\uB2E4. (\uB610\uB294 \uC544\uB798\uC758 \uB2E8\uCD95\uD0A4\uB97C \uC0AC\uC6A9 \uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.)"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_themes7.Flex, { direction: "column", gap: "3", p: "0", pl: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_themes10.Flex, { direction: "column", gap: "3", p: "0", pl: "3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Typo, { children: [
         "a. \uC708\uB3C4\uC6B0 \uB2E8\uCD95\uD0A4: ",
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_themes12.Kbd, { children: "F12" })
@@ -1674,7 +1674,7 @@ function DatePickerButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_themes4.Box, { p: "0", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     DatePicker,
     __spreadProps(__spreadValues({
-      customInput: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, __spreadProps(__spreadValues({ type: "button" }, buttonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes7.Flex, { align: "center", gap: "3", justify: "between", width: "100%", children: [
+      customInput: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, __spreadProps(__spreadValues({ type: "button" }, buttonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_themes10.Flex, { align: "center", gap: "3", justify: "between", width: "100%", children: [
         rest.selected ? selectFormat(rest.selected) : placeholder,
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_icons.CalendarIcon, {})
       ] }) })),
@@ -1711,7 +1711,7 @@ function TimeSelect(_a) {
     return getTimeOptions();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Select.Root, __spreadProps(__spreadValues({ value }, rest), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes7.Flex, { direction: "column", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Trigger, { placeholder: "-        ", style: { minWidth: "100px" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_themes10.Flex, { direction: "column", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Trigger, { placeholder: "-        ", style: { minWidth: "100px" } }) }),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Content, { children: timeOptions.map((time) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Select.Item, { value: time, children: time }, time)) })
   ] }));
 }
@@ -1754,7 +1754,7 @@ function Item(_a) {
     "justify",
     "RadioWrapper"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes17.RadioCards.Item, __spreadProps(__spreadValues({}, itemRest), { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes7.Flex, { align: "center", justify: justify || "between", width: "100%", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_themes17.RadioCards.Item, __spreadProps(__spreadValues({}, itemRest), { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_themes10.Flex, { align: "center", justify: justify || "between", width: "100%", children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       import_themes16.Radio,