@tipp/ui 1.2.21 → 1.3.0

package/dist/index.d.cts

@@ -25,7 +25,8 @@ export { DatePicker, DatePickerProps } from './molecules/date-picker/index.cjs';
 export { DotNavigation, DotNavigationProps } from './molecules/dot-navigation.cjs';
 export { Stepper } from './molecules/stepper.cjs';
 export { TagSelector, TagSelectorProps } from './molecules/tag-selector.cjs';
-export { ThemeProvider } from './theme/theme-provider.cjs';
+export { LearningPost, LearningPostProps } from './molecules/learning-post.cjs';
+export { ThemeProvider, ThemeProviderProps } from './theme/theme-provider.cjs';
 import * as index_js from '@radix-ui/themes/dist/cjs/props/index.js';
 export { index_js as uiProps };
 export { ArchiveIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCopyIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, RowsIcon, Share1Icon, TrashIcon } from '@radix-ui/react-icons';

package/dist/index.d.ts

@@ -25,7 +25,8 @@ export { DatePicker, DatePickerProps } from './molecules/date-picker/index.js';
 export { DotNavigation, DotNavigationProps } from './molecules/dot-navigation.js';
 export { Stepper } from './molecules/stepper.js';
 export { TagSelector, TagSelectorProps } from './molecules/tag-selector.js';
-export { ThemeProvider } from './theme/theme-provider.js';
+export { LearningPost, LearningPostProps } from './molecules/learning-post.js';
+export { ThemeProvider, ThemeProviderProps } from './theme/theme-provider.js';
 import * as index_js from '@radix-ui/themes/dist/cjs/props/index.js';
 export { index_js as uiProps };
 export { ArchiveIcon, BackpackIcon, BarChartIcon, BookmarkFilledIcon, BookmarkIcon, CalendarIcon, ChatBubbleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCopyIcon, ClipboardIcon, Cross1Icon, DotsHorizontalIcon, DotsVerticalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, ExclamationTriangleIcon, ExitIcon, FileIcon, GearIcon, GlobeIcon, InfoCircledIcon, Link2Icon, MagnifyingGlassIcon, MixerHorizontalIcon, Pencil1Icon, PersonIcon, PlusIcon, RowsIcon, Share1Icon, TrashIcon } from '@radix-ui/react-icons';

package/dist/index.js

@@ -8,7 +8,10 @@ import {
 import {
   scrollTo
 } from "./chunk-ZXQZRIRS.js";
-import "./chunk-O4ZYERRL.js";
+import {
+  useThemeContext
+} from "./chunk-MMGP4GEQ.js";
+import "./chunk-6ZAP2Q6K.js";
 import {
   DatePicker
 } from "./chunk-2QDLO3YM.js";
@@ -20,6 +23,12 @@ import "./chunk-X5FVSTHW.js";
 import {
   DotNavigation
 } from "./chunk-EDTEVEJW.js";
+import {
+  LearningPost
+} from "./chunk-FIIIEJLL.js";
+import {
+  ThemeProvider
+} from "./chunk-BVNXAZ4W.js";
 import {
   Navigation
 } from "./chunk-PPO64OK7.js";
@@ -29,12 +38,6 @@ import {
 import {
   TagSelector
 } from "./chunk-NUEMI3QO.js";
-import {
-  ThemeProvider
-} from "./chunk-BVBX6IJ3.js";
-import {
-  useThemeContext
-} from "./chunk-MMGP4GEQ.js";
 import "./chunk-BSTJBBEX.js";
 import "./chunk-NDUKDKGB.js";
 import "./chunk-76JGDATZ.js";
@@ -314,6 +317,7 @@ export {
   InfoCircledIcon,
   Inset,
   Kbd,
+  LearningPost,
   Link,
   Link2Icon,
   MagnifyingGlassIcon,

package/dist/molecules/index.cjs

@@ -62,6 +62,7 @@ __export(molecules_exports, {
   DatePicker: () => DatePicker,
   DotNavigation: () => DotNavigation,
   ExpandTable: () => ExpandTable,
+  LearningPost: () => LearningPost,
   Navigation: () => Navigation,
   Stepper: () => Stepper,
   TagSelector: () => TagSelector,
@@ -73,8 +74,11 @@ module.exports = __toCommonJS(molecules_exports);
 var import_react_table2 = require("@tanstack/react-table");
 var import_react9 = require("react");
 
-// src/atoms/avatar.tsx
+// src/atoms/aspect-ratio.tsx
 var import_themes = require("@radix-ui/themes");
+
+// src/atoms/avatar.tsx
+var import_themes2 = require("@radix-ui/themes");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Avatar = (0, import_react.forwardRef)(
@@ -94,13 +98,13 @@ var Avatar = (0, import_react.forwardRef)(
           return size;
       }
     }, [size]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Avatar, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, variant, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes2.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_themes3 = require("@radix-ui/themes");
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Badge = (0, import_react2.forwardRef)(
@@ -131,13 +135,16 @@ var Badge = (0, import_react2.forwardRef)(
           return void 0;
       }
     }, [color]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes2.Badge, __spreadProps(__spreadValues({}, rest), { color: radixColor, ref, size: radixSize }));
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Badge, __spreadProps(__spreadValues({}, rest), { color: radixColor, ref, size: radixSize }));
   }
 );
 Badge.displayName = "Badge";
 
+// src/atoms/box.tsx
+var import_themes4 = require("@radix-ui/themes");
+
 // src/atoms/button.tsx
-var import_themes3 = require("@radix-ui/themes");
+var import_themes5 = require("@radix-ui/themes");
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Button = (0, import_react3.forwardRef)(
@@ -168,7 +175,7 @@ var Button = (0, import_react3.forwardRef)(
       return variant;
     }, [variant]);
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_themes3.Button,
+      import_themes5.Button,
       __spreadProps(__spreadValues({
         style: mergedStyle,
         variant: radixVariant
@@ -182,15 +189,15 @@ var Button = (0, import_react3.forwardRef)(
 Button.displayName = "Button";
 
 // src/atoms/flex.tsx
-var import_themes4 = require("@radix-ui/themes");
+var import_themes6 = require("@radix-ui/themes");
 
 // src/atoms/grid.tsx
-var import_themes5 = require("@radix-ui/themes");
+var import_themes7 = require("@radix-ui/themes");
 
 // src/atoms/heading.tsx
-var import_themes6 = require("@radix-ui/themes");
+var import_themes8 = require("@radix-ui/themes");
 var import_react4 = require("react");
-var import_themes7 = require("@radix-ui/themes");
+var import_themes9 = 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"]);
@@ -210,20 +217,20 @@ function Heading2(props) {
         return size;
     }
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes6.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes8.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
 }
 
 // src/atoms/icon-button.tsx
-var import_themes8 = require("@radix-ui/themes");
+var import_themes10 = require("@radix-ui/themes");
 
 // src/atoms/popover.tsx
-var import_themes9 = require("@radix-ui/themes");
+var import_themes11 = require("@radix-ui/themes");
 
 // src/atoms/scroll-area.tsx
-var import_themes10 = require("@radix-ui/themes");
+var import_themes12 = require("@radix-ui/themes");
 
 // src/atoms/typo.tsx
-var import_themes11 = require("@radix-ui/themes");
+var import_themes13 = require("@radix-ui/themes");
 var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var Typo = (0, import_react5.forwardRef)(
@@ -242,7 +249,7 @@ var Typo = (0, import_react5.forwardRef)(
           return "2";
       }
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes11.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_themes13.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
   }
 );
 Typo.displayName = "Typo";
@@ -476,7 +483,7 @@ function ExpandTable(props) {
                   header.getContext()
                 ) }),
                 sortable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                  import_themes4.Flex,
+                  import_themes6.Flex,
                   {
                     direction: "column",
                     style: { marginLeft: "var(--space-2)" },
@@ -504,7 +511,7 @@ function ExpandTable(props) {
       headerGroup.id
     )) }),
     /* @__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.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "tr", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes6.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_runtime11.jsx)(
           Row,
@@ -531,7 +538,7 @@ function Navigation({
   activeKey
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_themes4.Flex,
+    import_themes6.Flex,
     {
       direction: "column",
       gap: "4",
@@ -542,8 +549,8 @@ function Navigation({
       },
       children: items == null ? void 0 : items.map((item) => {
         const { key, title, icon, itemRender, onClick, children } = item;
-        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: [
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes6.Flex, { direction: "column", onClick, children: [
+          itemRender ? itemRender(item) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_themes6.Flex, { align: "center", gap: "3", height: "36px", pl: "4", pr: "4", children: [
             icon,
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Typo, { variant: "subtitle", children: title })
           ] }),
@@ -613,9 +620,9 @@ var renderCustomHeader = (props) => {
   } = props;
   const year = date.getFullYear();
   const month = date.getMonth();
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes4.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes6.Flex, { align: "center", justify: "between", pb: "2", pl: "2", pr: "2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_themes8.IconButton,
+      import_themes10.IconButton,
       {
         disabled: prevMonthButtonDisabled,
         onClick: decreaseMonth,
@@ -623,7 +630,7 @@ var renderCustomHeader = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.ChevronLeftIcon, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes4.Flex, { gap: "3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes6.Flex, { gap: "3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Heading2, { variant: "heading4", weight: "regular", children: [
         year,
         "\uB144"
@@ -634,7 +641,7 @@ var renderCustomHeader = (props) => {
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_themes8.IconButton,
+      import_themes10.IconButton,
       {
         disabled: nextMonthButtonDisabled,
         onClick: increaseMonth,
@@ -675,7 +682,7 @@ function DotNavigation(props) {
       return;
     setCurrentDot(dotIndex);
   }, [dotIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes4.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes6.Flex, { children: dotCount ? Array.from({ length: dotCount }, (_, i) => i).map((_, index) => {
     const isSelected = currentDot === index;
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react_icons2.DotFilledIcon,
@@ -697,7 +704,7 @@ function DotNavigation(props) {
 
 // src/molecules/stepper.tsx
 var import_react12 = require("react");
-var import_themes12 = require("@radix-ui/themes");
+var import_themes14 = require("@radix-ui/themes");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var StepContext = (0, import_react12.createContext)({
   active: false,
@@ -714,7 +721,7 @@ function Root(props) {
     direction = "vertical"
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_themes4.Flex,
+    import_themes6.Flex,
     {
       gap: "3",
       style: {
@@ -748,7 +755,7 @@ function Step(props) {
     direction = "vertical"
   } = (0, import_react12.useContext)(StepContext);
   const connector = index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_themes12.Separator,
+    import_themes14.Separator,
     {
       style: {
         width: `calc(100% - 40px)`,
@@ -768,7 +775,7 @@ function Step(props) {
     return IncompleteStep;
   }, [completed, active]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-    import_themes4.Flex,
+    import_themes6.Flex,
     {
       align: "center",
       direction: direction === "horizontal" ? "row" : "column",
@@ -1030,9 +1037,9 @@ function TagSelector(props) {
         return "body";
     }
   }, [size]);
-  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,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes11.Popover.Root, { open: Boolean(filteredOptions.length) && open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes11.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      import_themes7.Grid,
       {
         align: "center",
         className: `tag-selector ${focus ? "focused" : ""} ${size}`,
@@ -1044,7 +1051,7 @@ function TagSelector(props) {
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-            import_themes4.Flex,
+            import_themes6.Flex,
             {
               align: "center",
               gap: "1",
@@ -1087,7 +1094,7 @@ function TagSelector(props) {
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_themes9.Popover.Content,
+      import_themes11.Popover.Content,
       {
         onOpenAutoFocus: (e) => {
           e.preventDefault();
@@ -1098,13 +1105,13 @@ function TagSelector(props) {
             currentItem: filteredOptions[focusIndex || 0],
             items: filteredOptions,
             children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              import_themes10.ScrollArea,
+              import_themes12.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) => {
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes6.Flex, { direction: "column", children: filteredOptions.map((item, i) => {
                   const isSelected = Boolean(
                     selected.find((el) => el === item.id)
                   );
@@ -1128,7 +1135,7 @@ function TagSelector(props) {
                         boxShadow: "none"
                       },
                       variant: isSelected ? "soft" : "outline",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes4.Flex, { justify: "between", width: "100%", children: [
+                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes6.Flex, { justify: "between", width: "100%", children: [
                         item.name,
                         isSelected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_icons.CheckIcon, {}) : null
                       ] })
@@ -1144,11 +1151,147 @@ function TagSelector(props) {
     )
   ] });
 }
+
+// src/theme/theme-provider.tsx
+var import_themes15 = require("@radix-ui/themes");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ThemeProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes15.Theme, __spreadValues({ accentColor: "iris", radius: "medium" }, props));
+}
+
+// src/molecules/learning-post.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function LearningPost(props) {
+  const {
+    defaultThemeProps,
+    html,
+    tags,
+    title,
+    metaDescription,
+    imageComp,
+    onPageBack,
+    children
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    ThemeProvider,
+    __spreadProps(__spreadValues({}, defaultThemeProps), {
+      accentColor: "iris",
+      scaling: "110%",
+      style: {},
+      children: html ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        import_themes7.Grid,
+        {
+          columns: { initial: "1", md: "130px 1fr 130px" },
+          gap: { initial: "2", md: "5" },
+          height: "100%",
+          justify: "center",
+          pb: "160px",
+          position: "relative",
+          px: "4",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              import_themes6.Flex,
+              {
+                align: "center",
+                direction: "column",
+                maxWidth: "880px",
+                mt: { initial: "3", md: "8" },
+                overflow: "hidden",
+                width: "100%",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_themes7.Grid, { align: "start", columns: { initial: "1", sm: "2" }, gap: "2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                      import_themes7.Grid,
+                      {
+                        gap: "3",
+                        mb: { initial: "4", sm: "0" },
+                        style: { alignSelf: "flex-start" },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            Heading2,
+                            {
+                              style: {
+                                fontSize: "2.4rem",
+                                lineHeight: 1.25,
+                                wordBreak: "keep-all"
+                              },
+                              variant: "heading1",
+                              children: title
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Typo, { children: metaDescription }),
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes6.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;
+                            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Badge, { size: "large", variant: "solid", children: el.name }, el.id);
+                          }) })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      import_themes.AspectRatio,
+                      {
+                        ratio: 5 / 3,
+                        style: {
+                          overflow: "hidden",
+                          borderRadius: "var(--radius-4)",
+                          objectFit: "cover"
+                        },
+                        children: imageComp
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes4.Box, { mt: "5", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    "div",
+                    {
+                      className: "gh-content",
+                      dangerouslySetInnerHTML: { __html: html }
+                    }
+                  ) })
+                ]
+              }
+            ),
+            children
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        import_themes6.Flex,
+        {
+          align: "center",
+          direction: "column",
+          gap: "6",
+          height: "100%",
+          justify: "center",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Heading2, { variant: "heading1", children: "\uCF58\uD150\uCE20\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Heading2,
+              {
+                align: "center",
+                color: "gray",
+                variant: "heading4",
+                weight: "regular",
+                children: `\uC694\uCCAD\uD558\uC2E0 \uCF58\uD150\uCE20\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.
+        \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.`
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { onClick: onPageBack, size: "large", children: "\uB4A4\uB85C\uAC00\uAE30" })
+          ]
+        }
+      )
+    })
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DatePicker,
   DotNavigation,
   ExpandTable,
+  LearningPost,
   Navigation,
   Stepper,
   TagSelector,