@liner-fe/prism 3.2.1 → 3.2.2

package/lib/index.js

@@ -336,11 +336,59 @@ DefaultButton.displayName = "DefaultButton";
 var Button = forwardRef((props, ref) => /* @__PURE__ */ jsx2(DefaultButton, { ...props, ref }));
 Button.displayName = "Button";
 
+// src/hooks/useToast.ts
+import { atom, useSetAtom } from "jotai";
+
+// src/types/generateRandomId.ts
+var generateRandomId = /* @__PURE__ */ __name(() => Date.now() + Math.random(), "generateRandomId");
+
+// src/hooks/useToast.ts
+import { millisecondsInSecond } from "date-fns/constants";
+var toastAtom = atom([]);
+var useToast = /* @__PURE__ */ __name(() => {
+  const setToasts = useSetAtom(toastAtom);
+  return {
+    open: /* @__PURE__ */ __name((toast) => {
+      const toastId = generateRandomId();
+      const timer = toast.button ? millisecondsInSecond * 5 : millisecondsInSecond + 800;
+      const list = { toastId, timer, ...toast };
+      setToasts((prev) => [...prev, list]);
+      return { toastId };
+    }, "open"),
+    endLoading: /* @__PURE__ */ __name((toastId) => {
+      setToasts((prev) => {
+        return prev.map((list) => {
+          return { ...list, isLoading: list.toastId === toastId ? false : list.isLoading };
+        });
+      });
+    }, "endLoading"),
+    setMessage: /* @__PURE__ */ __name((toastId, message) => {
+      setToasts((prev) => {
+        return prev.map((list) => {
+          return { ...list, message: list.toastId === toastId ? message : list.message };
+        });
+      });
+    }, "setMessage")
+  };
+}, "useToast");
+
 // src/components/Toast/index.tsx
-import { toast as sonnerToast2, Toaster as SonnerToaster } from "sonner";
+import { Toast } from "radix-ui";
 
-// src/components/Toast/ToastContent.tsx
-import { toast as sonnerToast } from "sonner";
+// src/components/Toast/style.module.scss
+var style_module_default3 = {
+  "Icon": "_Icon_5dhgy_25",
+  "TitleText": "_TitleText_5dhgy_31",
+  "ToastViewport": "_ToastViewport_5dhgy_36",
+  "ToastRoot": "_ToastRoot_5dhgy_60",
+  "ToastTitle": "_ToastTitle_5dhgy_76",
+  "slideIn": "_slideIn_5dhgy_1",
+  "hide": "_hide_5dhgy_1",
+  "swipeOut": "_swipeOut_5dhgy_1"
+};
+
+// src/components/Toast/index.tsx
+import { useEffect, useRef, useState } from "react";
 
 // src/components/Typography/Set/Paragraph.tsx
 import clsx2 from "clsx";
@@ -373,133 +421,582 @@ var Paragraph = forwardRef2(
   }
 );
 
-// src/components/Toast/ToastContent.tsx
-import {
-  IconCheckMarkFill,
-  IconCloseFill,
-  IconExclamationmarkFill
-} from "@liner-fe/icon";
-
-// src/components/Toast/style.module.scss
-var style_module_default3 = {
-  "Root": "_Root_1el8w_1",
-  "Icon": "_Icon_1el8w_23",
-  "Content": "_Content_1el8w_32",
-  "Actions": "_Actions_1el8w_44",
-  "Spinner": "_Spinner_1el8w_51",
-  "lds-spinner": "_lds-spinner_1el8w_1"
-};
-
-// src/components/Toast/ToastContent.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var iconMap = {
-  success: { icon: IconCheckMarkFill, props: { type: "function-label-positive" } },
-  error: { icon: IconCloseFill, props: { type: "function-label-negative" } },
-  caution: { icon: IconExclamationmarkFill, props: { type: "function-label-caution" } }
-};
-var SPINNER_SPOKE_COUNT = 12;
-var LoadingSpinner = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx4("div", { className: style_module_default3.Spinner, children: Array.from({ length: SPINNER_SPOKE_COUNT }, (_, i) => /* @__PURE__ */ jsx4("div", {}, i)) }), "LoadingSpinner");
-var isUrgent = /* @__PURE__ */ __name((type) => type === "error" || type === "caution", "isUrgent");
-var ToastContent = /* @__PURE__ */ __name(({ toastId, title, description, type, action }) => {
-  const iconEntry = iconMap[type] ?? null;
-  return /* @__PURE__ */ jsxs3(
-    "div",
+// src/components/Toast/index.tsx
+import { useAtomValue, useSetAtom as useSetAtom2 } from "jotai";
+import Lottie from "lottie-web";
+
+// src/lottie/loading.json
+var loading_default = {
+  v: "5.9.0",
+  fr: 60,
+  ip: 0,
+  op: 60,
+  w: 48,
+  h: 48,
+  nm: "Loading Lottie Outline #FFFFFF",
+  ddd: 0,
+  assets: [],
+  layers: [
     {
-      className: style_module_default3.Root,
-      role: isUrgent(type) ? "alert" : "status",
-      "aria-live": isUrgent(type) ? "assertive" : "polite",
-      "aria-atomic": "true",
-      children: [
-        type === "promise" ? /* @__PURE__ */ jsx4("i", { className: style_module_default3.Icon, children: /* @__PURE__ */ jsx4(LoadingSpinner, {}) }) : iconEntry ? /* @__PURE__ */ jsx4("i", { className: style_module_default3.Icon, children: /* @__PURE__ */ jsx4(iconEntry.icon, { ...iconEntry.props, size: "m" }) }) : null,
-        /* @__PURE__ */ jsxs3("div", { className: style_module_default3.Content, children: [
-          /* @__PURE__ */ jsx4(Paragraph, { type: "normal", weight: "medium", size: 3, color: "inverse-label-static-primary", children: title }),
-          description && /* @__PURE__ */ jsx4(Paragraph, { type: "normal", weight: "regular", size: 4, color: "inverse-label-static-secondary", children: description })
-        ] }),
-        action && /* @__PURE__ */ jsx4("div", { className: style_module_default3.Actions, children: /* @__PURE__ */ jsx4(
-          Button,
-          {
-            level: "static",
-            size: "s",
-            onClick: () => {
-              action.onClick();
-              sonnerToast.dismiss(toastId);
+      ddd: 0,
+      ind: 1,
+      ty: 4,
+      nm: "Point 3",
+      sr: 1,
+      ks: {
+        o: {
+          a: 1,
+          k: [
+            { i: { x: [0.25], y: [1] }, o: { x: [0.5], y: [0] }, t: 0, s: [50] },
+            { i: { x: [0.5], y: [1] }, o: { x: [0.5], y: [0] }, t: 40, s: [100] },
+            { t: 60, s: [50] }
+          ],
+          ix: 11
+        },
+        r: { a: 0, k: 0, ix: 10 },
+        p: { a: 0, k: [40, 24, 0], ix: 2, l: 2 },
+        a: { a: 0, k: [40.25, 40.25, 0], ix: 1, l: 2 },
+        s: {
+          a: 1,
+          k: [
+            {
+              i: { x: [0.25, 0.25, 0.667], y: [1, 1, 1] },
+              o: { x: [0.5, 0.5, 0.333], y: [0, 0, 0] },
+              t: 0,
+              s: [12.5, 12.5, 100]
             },
-            children: action.label
-          }
-        ) })
-      ]
+            {
+              i: { x: [0.5, 0.5, 0.667], y: [1, 1, 1] },
+              o: { x: [0.5, 0.5, 0.333], y: [0, 0, 0] },
+              t: 40,
+              s: [10, 10, 100]
+            },
+            { t: 60, s: [12.5, 12.5, 100] }
+          ],
+          ix: 6,
+          l: 2
+        }
+      },
+      ao: 0,
+      shapes: [
+        {
+          ty: "gr",
+          it: [
+            {
+              ind: 0,
+              ty: "sh",
+              ix: 1,
+              ks: {
+                a: 0,
+                k: {
+                  i: [
+                    [-11.046, 0],
+                    [0, 0],
+                    [0, -11.046],
+                    [0, 0],
+                    [11.046, 0],
+                    [0, 0],
+                    [0, 11.046],
+                    [0, 0]
+                  ],
+                  o: [
+                    [0, 0],
+                    [11.046, 0],
+                    [0, 0],
+                    [0, 11.046],
+                    [0, 0],
+                    [-11.046, 0],
+                    [0, 0],
+                    [0, -11.046]
+                  ],
+                  v: [
+                    [-20, -40],
+                    [20, -40],
+                    [40, -20],
+                    [40, 20],
+                    [20, 40],
+                    [-20, 40],
+                    [-40, 20],
+                    [-40, -20]
+                  ],
+                  c: true
+                },
+                ix: 2
+              },
+              nm: "Path 1",
+              mn: "ADBE Vector Shape - Group",
+              hd: false
+            },
+            {
+              ty: "gr",
+              it: [
+                {
+                  ty: "tr",
+                  p: { a: 0, k: [0, 0], ix: 2 },
+                  a: { a: 0, k: [0, 0], ix: 1 },
+                  s: { a: 0, k: [100, 100], ix: 3 },
+                  r: { a: 0, k: 0, ix: 6 },
+                  o: { a: 0, k: 100, ix: 7 },
+                  sk: { a: 0, k: 0, ix: 4 },
+                  sa: { a: 0, k: 0, ix: 5 },
+                  nm: "Transform"
+                }
+              ],
+              nm: "Group 1",
+              np: 0,
+              cix: 2,
+              bm: 0,
+              ix: 2,
+              mn: "ADBE Vector Group",
+              hd: false
+            },
+            { ty: "mm", mm: 4, nm: "Merge Paths 1", mn: "ADBE Vector Filter - Merge", hd: false },
+            {
+              ty: "fl",
+              c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
+              o: { a: 0, k: 100, ix: 5 },
+              r: 1,
+              bm: 0,
+              nm: "Fill 1",
+              mn: "ADBE Vector Graphic - Fill",
+              hd: false
+            },
+            {
+              ty: "tr",
+              p: { a: 0, k: [40.25, 40.25], ix: 2 },
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              r: { a: 0, k: 0, ix: 6 },
+              o: { a: 0, k: 100, ix: 7 },
+              sk: { a: 0, k: 0, ix: 4 },
+              sa: { a: 0, k: 0, ix: 5 },
+              nm: "Transform"
+            }
+          ],
+          nm: "Group 1",
+          np: 4,
+          cix: 2,
+          bm: 0,
+          ix: 1,
+          mn: "ADBE Vector Group",
+          hd: false
+        }
+      ],
+      ip: 0,
+      op: 60,
+      st: 0,
+      bm: 0
+    },
+    {
+      ddd: 0,
+      ind: 2,
+      ty: 4,
+      nm: "Point 2",
+      sr: 1,
+      ks: {
+        o: {
+          a: 1,
+          k: [
+            { i: { x: [0.466], y: [1] }, o: { x: [0.185], y: [0.563] }, t: 0, s: [85.479] },
+            { i: { x: [0.5], y: [1] }, o: { x: [0.5], y: [0] }, t: 20, s: [100] },
+            { i: { x: [0.666], y: [0.584] }, o: { x: [0.5], y: [0] }, t: 40, s: [50] },
+            { t: 60, s: [85.479] }
+          ],
+          ix: 11
+        },
+        r: { a: 0, k: 0, ix: 10 },
+        p: { a: 0, k: [24, 24, 0], ix: 2, l: 2 },
+        a: { a: 0, k: [40.25, 40.25, 0], ix: 1, l: 2 },
+        s: {
+          a: 1,
+          k: [
+            {
+              i: { x: [0.569, 0.569, 0.674], y: [1, 1, 1] },
+              o: { x: [0.248, 0.248, 0.337], y: [1.236, 1.236, 0] },
+              t: 0,
+              s: [10.24, 10.24, 100]
+            },
+            {
+              i: { x: [0.5, 0.5, 0.667], y: [1, 1, 1] },
+              o: { x: [0.5, 0.5, 0.333], y: [0, 0, 0] },
+              t: 20,
+              s: [10, 10, 100]
+            },
+            {
+              i: { x: [0.477, 0.477, 0.651], y: [0.723, 0.723, -3.226] },
+              o: { x: [0.606, 0.606, 0.301], y: [0, 0, 0] },
+              t: 40,
+              s: [12.5, 12.5, 100]
+            },
+            { t: 60, s: [10.24, 10.24, 100] }
+          ],
+          ix: 6,
+          l: 2
+        }
+      },
+      ao: 0,
+      shapes: [
+        {
+          ty: "gr",
+          it: [
+            {
+              ind: 0,
+              ty: "sh",
+              ix: 1,
+              ks: {
+                a: 0,
+                k: {
+                  i: [
+                    [-11.046, 0],
+                    [0, 0],
+                    [0, -11.046],
+                    [0, 0],
+                    [11.046, 0],
+                    [0, 0],
+                    [0, 11.046],
+                    [0, 0]
+                  ],
+                  o: [
+                    [0, 0],
+                    [11.046, 0],
+                    [0, 0],
+                    [0, 11.046],
+                    [0, 0],
+                    [-11.046, 0],
+                    [0, 0],
+                    [0, -11.046]
+                  ],
+                  v: [
+                    [-20, -40],
+                    [20, -40],
+                    [40, -20],
+                    [40, 20],
+                    [20, 40],
+                    [-20, 40],
+                    [-40, 20],
+                    [-40, -20]
+                  ],
+                  c: true
+                },
+                ix: 2
+              },
+              nm: "Path 1",
+              mn: "ADBE Vector Shape - Group",
+              hd: false
+            },
+            {
+              ty: "gr",
+              it: [
+                {
+                  ty: "tr",
+                  p: { a: 0, k: [0, 0], ix: 2 },
+                  a: { a: 0, k: [0, 0], ix: 1 },
+                  s: { a: 0, k: [100, 100], ix: 3 },
+                  r: { a: 0, k: 0, ix: 6 },
+                  o: { a: 0, k: 100, ix: 7 },
+                  sk: { a: 0, k: 0, ix: 4 },
+                  sa: { a: 0, k: 0, ix: 5 },
+                  nm: "Transform"
+                }
+              ],
+              nm: "Group 1",
+              np: 0,
+              cix: 2,
+              bm: 0,
+              ix: 2,
+              mn: "ADBE Vector Group",
+              hd: false
+            },
+            { ty: "mm", mm: 4, nm: "Merge Paths 1", mn: "ADBE Vector Filter - Merge", hd: false },
+            {
+              ty: "fl",
+              c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
+              o: { a: 0, k: 100, ix: 5 },
+              r: 1,
+              bm: 0,
+              nm: "Fill 1",
+              mn: "ADBE Vector Graphic - Fill",
+              hd: false
+            },
+            {
+              ty: "tr",
+              p: { a: 0, k: [40.25, 40.25], ix: 2 },
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              r: { a: 0, k: 0, ix: 6 },
+              o: { a: 0, k: 100, ix: 7 },
+              sk: { a: 0, k: 0, ix: 4 },
+              sa: { a: 0, k: 0, ix: 5 },
+              nm: "Transform"
+            }
+          ],
+          nm: "Group 1",
+          np: 4,
+          cix: 2,
+          bm: 0,
+          ix: 1,
+          mn: "ADBE Vector Group",
+          hd: false
+        }
+      ],
+      ip: 0,
+      op: 60,
+      st: -1,
+      bm: 0
+    },
+    {
+      ddd: 0,
+      ind: 3,
+      ty: 4,
+      nm: "Point 1",
+      sr: 1,
+      ks: {
+        o: {
+          a: 1,
+          k: [
+            { i: { x: [0.5], y: [1] }, o: { x: [0.5], y: [0] }, t: 0, s: [100] },
+            { i: { x: [0.25], y: [1] }, o: { x: [0.5], y: [0] }, t: 20, s: [50] },
+            { t: 60, s: [100] }
+          ],
+          ix: 11
+        },
+        r: { a: 0, k: 0, ix: 10 },
+        p: { a: 0, k: [7.969, 24.031, 0], ix: 2, l: 2 },
+        a: { a: 0, k: [40.5, 40.375, 0], ix: 1, l: 2 },
+        s: {
+          a: 1,
+          k: [
+            {
+              i: { x: [0.5, 0.5, 0.667], y: [1, 1, 1] },
+              o: { x: [0.5, 0.5, 0.333], y: [0, 0, 0] },
+              t: 0,
+              s: [10, 10, 100]
+            },
+            {
+              i: { x: [0.25, 0.25, 0.667], y: [1, 1, 1] },
+              o: { x: [0.5, 0.5, 0.333], y: [0, 0, 0] },
+              t: 20,
+              s: [12.5, 12.5, 100]
+            },
+            { t: 60, s: [10, 10, 100] }
+          ],
+          ix: 6,
+          l: 2
+        }
+      },
+      ao: 0,
+      shapes: [
+        {
+          ty: "gr",
+          it: [
+            {
+              ind: 0,
+              ty: "sh",
+              ix: 1,
+              ks: {
+                a: 0,
+                k: {
+                  i: [
+                    [-11.046, 0],
+                    [0, 0],
+                    [0, -11.046],
+                    [0, 0],
+                    [11.046, 0],
+                    [0, 0],
+                    [0, 11.046],
+                    [0, 0]
+                  ],
+                  o: [
+                    [0, 0],
+                    [11.046, 0],
+                    [0, 0],
+                    [0, 11.046],
+                    [0, 0],
+                    [-11.046, 0],
+                    [0, 0],
+                    [0, -11.046]
+                  ],
+                  v: [
+                    [-20, -40],
+                    [20, -40],
+                    [40, -20],
+                    [40, 20],
+                    [20, 40],
+                    [-20, 40],
+                    [-40, 20],
+                    [-40, -20]
+                  ],
+                  c: true
+                },
+                ix: 2
+              },
+              nm: "Path 1",
+              mn: "ADBE Vector Shape - Group",
+              hd: false
+            },
+            {
+              ty: "gr",
+              it: [
+                {
+                  ty: "tr",
+                  p: { a: 0, k: [0, 0], ix: 2 },
+                  a: { a: 0, k: [0, 0], ix: 1 },
+                  s: { a: 0, k: [100, 100], ix: 3 },
+                  r: { a: 0, k: 0, ix: 6 },
+                  o: { a: 0, k: 100, ix: 7 },
+                  sk: { a: 0, k: 0, ix: 4 },
+                  sa: { a: 0, k: 0, ix: 5 },
+                  nm: "Transform"
+                }
+              ],
+              nm: "Group 1",
+              np: 0,
+              cix: 2,
+              bm: 0,
+              ix: 2,
+              mn: "ADBE Vector Group",
+              hd: false
+            },
+            { ty: "mm", mm: 4, nm: "Merge Paths 1", mn: "ADBE Vector Filter - Merge", hd: false },
+            {
+              ty: "fl",
+              c: { a: 0, k: [1, 1, 1, 1], ix: 4 },
+              o: { a: 0, k: 100, ix: 5 },
+              r: 1,
+              bm: 0,
+              nm: "Fill 1",
+              mn: "ADBE Vector Graphic - Fill",
+              hd: false
+            },
+            {
+              ty: "tr",
+              p: { a: 0, k: [40.25, 40.25], ix: 2 },
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              r: { a: 0, k: 0, ix: 6 },
+              o: { a: 0, k: 100, ix: 7 },
+              sk: { a: 0, k: 0, ix: 4 },
+              sa: { a: 0, k: 0, ix: 5 },
+              nm: "Transform"
+            }
+          ],
+          nm: "Group 1",
+          np: 4,
+          cix: 2,
+          bm: 0,
+          ix: 1,
+          mn: "ADBE Vector Group",
+          hd: false
+        }
+      ],
+      ip: 0,
+      op: 60,
+      st: 0,
+      bm: 0
     }
-  );
-}, "ToastContent");
+  ],
+  markers: []
+};
 
 // src/components/Toast/index.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var DEFAULT_TOAST_DURATION = 4e3;
-var createCustomToast = /* @__PURE__ */ __name((title, type, options) => {
-  return sonnerToast2.custom(
-    (toastId) => /* @__PURE__ */ jsx5(
-      ToastContent,
-      {
-        toastId,
-        title,
-        description: options?.description,
-        type,
-        action: options?.action
-      }
-    ),
-    { id: options?.id, duration: options?.duration ?? DEFAULT_TOAST_DURATION }
-  );
-}, "createCustomToast");
-var promiseToast = /* @__PURE__ */ __name((promise, options) => {
-  let dismissed = false;
-  const id = sonnerToast2.custom(
-    (toastId) => /* @__PURE__ */ jsx5(
-      ToastContent,
-      {
-        toastId,
-        title: options.loading,
-        description: options.description,
-        type: "promise"
+import { millisecondsInSecond as millisecondsInSecond2 } from "date-fns/constants";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { createElement } from "react";
+var { Provider, Root, Title, Viewport } = Toast;
+var Toaster = /* @__PURE__ */ __name(() => {
+  const list = useAtomValue(toastAtom);
+  return /* @__PURE__ */ jsxs3(Provider, { children: [
+    list.map((props) => (
+      // eslint-disable-next-line react/prop-types
+      /* @__PURE__ */ createElement(SingleToast, { ...props, key: props.toastId })
+    )),
+    /* @__PURE__ */ jsx4(Viewport, { className: style_module_default3.ToastViewport })
+  ] });
+}, "Toaster");
+var SingleToast = /* @__PURE__ */ __name((props) => {
+  const setToast = useSetAtom2(toastAtom);
+  const timerRef = useRef(void 0);
+  const { message, icon, button, timer, toastId, isLoading } = props;
+  const [isOpen, setIsOpen] = useState(true);
+  const lottieRef = useRef(null);
+  const toastSuccess = useRef(false);
+  const removeToast = /* @__PURE__ */ __name(() => {
+    setToast((prev) => prev.filter((toast) => toast.toastId !== toastId));
+    timerRef.current && clearTimeout(timerRef.current);
+  }, "removeToast");
+  useEffect(() => {
+    if (isLoading && !toastSuccess.current) {
+      if (lottieRef.current) {
+        Lottie.loadAnimation({
+          container: lottieRef.current,
+          renderer: "svg",
+          loop: true,
+          autoplay: true,
+          animationData: loading_default
+        });
       }
-    ),
-    {
-      duration: Infinity,
-      onDismiss: /* @__PURE__ */ __name(() => {
-        dismissed = true;
-      }, "onDismiss")
+    } else {
+      toastSuccess.current = true;
+      timerRef.current = setTimeout(() => {
+        removeToast();
+        clearTimeout(timerRef.current);
+      }, timer + millisecondsInSecond2);
+      const preCloseTimeout = setTimeout(() => {
+        setIsOpen(false);
+      }, timer);
+      return () => {
+        clearTimeout(preCloseTimeout);
+        clearTimeout(timerRef.current);
+      };
     }
-  );
-  promise.then((data) => {
-    if (dismissed) return;
-    const title = typeof options.success === "function" ? options.success(data) : options.success;
-    createCustomToast(title, "success", { id, duration: DEFAULT_TOAST_DURATION });
-  }).catch((error) => {
-    if (dismissed) return;
-    const title = typeof options.error === "function" ? options.error(error) : options.error;
-    createCustomToast(title, "error", { id, duration: DEFAULT_TOAST_DURATION });
-  });
-  return id;
-}, "promiseToast");
-var toast = Object.assign(
-  (title, options) => createCustomToast(title, "default", options),
-  {
-    success: /* @__PURE__ */ __name((title, options) => createCustomToast(title, "success", options), "success"),
-    error: /* @__PURE__ */ __name((title, options) => createCustomToast(title, "error", options), "error"),
-    caution: /* @__PURE__ */ __name((title, options) => createCustomToast(title, "caution", options), "caution"),
-    promise: promiseToast,
-    dismiss: sonnerToast2.dismiss
-  }
-);
-var Toaster = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx5(SonnerToaster, { position: "top-center", gap: 8, offset: 29 }), "Toaster");
+  }, [isLoading]);
+  const renderIcon = /* @__PURE__ */ __name(() => {
+    if (!icon) return null;
+    const { icon: IconCmp, ...rest } = icon;
+    return /* @__PURE__ */ jsx4("i", { className: style_module_default3.Icon, children: /* @__PURE__ */ jsx4(IconCmp, { ...rest, size: "m" }) });
+  }, "renderIcon");
+  return /* @__PURE__ */ jsxs3(Root, { className: style_module_default3.ToastRoot, open: isOpen, ...props, children: [
+    isLoading && !toastSuccess.current ? /* @__PURE__ */ jsx4("div", { ref: lottieRef, style: { width: "24px", height: "24px" } }) : renderIcon(),
+    /* @__PURE__ */ jsxs3(Title, { className: style_module_default3.ToastTitle, children: [
+      /* @__PURE__ */ jsx4(
+        Paragraph,
+        {
+          className: style_module_default3.TitleText,
+          type: "normal",
+          weight: "medium",
+          size: 3,
+          color: "inverse-label-static-primary",
+          children: message
+        }
+      ),
+      button && /* @__PURE__ */ jsx4(
+        Button,
+        {
+          onClick: () => {
+            button.onClick();
+            setIsOpen(false);
+            timerRef.current = setTimeout(() => {
+              removeToast();
+              clearTimeout(timerRef.current);
+            }, 175);
+          },
+          level: "static",
+          size: "s",
+          children: button.label
+        }
+      )
+    ] })
+  ] });
+}, "SingleToast");
 
 // src/components/Typography/Set/Heading.tsx
 import { forwardRef as forwardRef3 } from "react";
 import clsx3 from "clsx";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Heading = forwardRef3(
   ({ size, children, type, className, color = "neutral-label-primary", as, ...rest }, ref) => {
     const Element = as || `h${size}`;
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx5(
       Element,
       {
         ...rest,
@@ -526,7 +1023,7 @@ var style_module_default4 = {
 
 // src/components/Typography/Set/Caption.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var Caption = forwardRef4(
   ({
     children,
@@ -538,7 +1035,7 @@ var Caption = forwardRef4(
     as: Element = "p",
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       Element,
       {
         ...rest,
@@ -558,8 +1055,8 @@ Caption.displayName = "Caption";
 // src/components/Typography/Set/Title.tsx
 import { forwardRef as forwardRef5 } from "react";
 import clsx5 from "clsx";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Title = forwardRef5(
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Title2 = forwardRef5(
   ({
     weight,
     size,
@@ -570,7 +1067,7 @@ var Title = forwardRef5(
     as: Element = "p",
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx7(
       Element,
       {
         ...rest,
@@ -589,7 +1086,7 @@ var Title = forwardRef5(
 // src/components/Typography/Set/Display.tsx
 import clsx6 from "clsx";
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Display = forwardRef6(
   ({
     size,
@@ -601,7 +1098,7 @@ var Display = forwardRef6(
     as: Element = "p",
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx8(
       Element,
       {
         ...rest,
@@ -638,8 +1135,8 @@ var rootMediaStyle = AppMedia.createMediaStyle();
 var { MediaContextProvider, Media } = AppMedia;
 
 // src/components/Typography/Responsive/index.tsx
-import { Fragment as Fragment2, jsx as jsx10 } from "react/jsx-runtime";
-import { createElement } from "react";
+import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
 var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
   const commonProps = {
     ...rest,
@@ -647,15 +1144,15 @@ var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
   };
   switch (level) {
     case "caption":
-      return /* @__PURE__ */ jsx10(Caption, { ...commonProps });
+      return /* @__PURE__ */ jsx9(Caption, { ...commonProps });
     case "heading":
-      return /* @__PURE__ */ jsx10(Heading, { ...commonProps });
+      return /* @__PURE__ */ jsx9(Heading, { ...commonProps });
     case "paragraph":
-      return /* @__PURE__ */ jsx10(Paragraph, { ...commonProps });
+      return /* @__PURE__ */ jsx9(Paragraph, { ...commonProps });
     case "title":
-      return /* @__PURE__ */ jsx10(Title, { ...commonProps });
+      return /* @__PURE__ */ jsx9(Title2, { ...commonProps });
     case "display":
-      return /* @__PURE__ */ jsx10(Display, { ...commonProps });
+      return /* @__PURE__ */ jsx9(Display, { ...commonProps });
     default:
       return null;
   }
@@ -696,11 +1193,11 @@ var Typography = /* @__PURE__ */ __name((props) => {
   }, "createMediaProps");
   return (
     // Fragment없이도 원래 동작해야하는데 liner-web에서 JSX.Element가 배열로 오면 에러 띄워서 임시로 Fragment로 래핑합니다.
-    /* @__PURE__ */ jsx10(Fragment2, { children: breakPointKeyArray.map((breakPointKey) => {
+    /* @__PURE__ */ jsx9(Fragment2, { children: breakPointKeyArray.map((breakPointKey) => {
       const variable = props[breakPointKey];
       const isExistVariable = !!variable;
       if (isExistVariable) {
-        return /* @__PURE__ */ createElement(Media, { ...createMediaProps(breakPointKey), key: breakPointKey }, /* @__PURE__ */ jsx10(TypographyImpl, { ...variable, text: variable.text || children }));
+        return /* @__PURE__ */ createElement2(Media, { ...createMediaProps(breakPointKey), key: breakPointKey }, /* @__PURE__ */ jsx9(TypographyImpl, { ...variable, text: variable.text || children }));
       }
       return null;
     }) })
@@ -731,8 +1228,8 @@ var style_module_default5 = {
 // src/components/Popover/index.tsx
 import { cva as cva3 } from "cva";
 import { clsx as clsx7 } from "clsx";
-import { IconCloseFill as IconCloseFill2 } from "@liner-fe/icon";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { IconCloseFill } from "@liner-fe/icon";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_OFFSET = -6;
 var popoverVariants = cva3({
   base: style_module_default5.content,
@@ -758,9 +1255,9 @@ var popoverDescriptionVariants = cva3({
   base: [style_module_default5.description, "lp-sys-typo-caption1-normal-regular"]
 });
 var popoverFooterVariants = cva3({ base: [style_module_default5.footer, "lp-sys-typo-caption1-normal-medium"] });
-var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ jsx11(PopoverPrimitive.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
-var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx11(PopoverPrimitive.Trigger, { asChild: true, children: by }), "PopoverTrigger");
-var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ jsx11(
+var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ jsx10(PopoverPrimitive.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
+var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx10(PopoverPrimitive.Trigger, { asChild: true, children: by }), "PopoverTrigger");
+var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ jsx10(
   "svg",
   {
     className,
@@ -769,7 +1266,7 @@ var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ js
     height: "10",
     viewBox: "0 0 30 10",
     fill: "none",
-    children: /* @__PURE__ */ jsx11(
+    children: /* @__PURE__ */ jsx10(
       "path",
       {
         fillRule: "evenodd",
@@ -798,7 +1295,7 @@ var PopoverContent = React3.forwardRef(
     children,
     container,
     ...props
-  }, ref) => /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsxs4(Fragment3, { children: [
+  }, ref) => /* @__PURE__ */ jsx10(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ jsxs4(Fragment3, { children: [
     /* @__PURE__ */ jsxs4(
       PopoverPrimitive.Content,
       {
@@ -812,22 +1309,22 @@ var PopoverContent = React3.forwardRef(
         children: [
           /* @__PURE__ */ jsxs4("div", { className: style_module_default5.contentContainer, children: [
             (tag || icon || onClose) && /* @__PURE__ */ jsxs4("div", { className: style_module_default5.heading, children: [
-              tag && /* @__PURE__ */ jsx11("span", { className: popoverTagVariants(), children: tag }),
-              icon && /* @__PURE__ */ jsx11(icon.icon, { size: "xs", fill: icon.fill }),
-              /* @__PURE__ */ jsx11("p", { className: popoverTitleVariants(), children: title }),
-              onClose && /* @__PURE__ */ jsx11(
+              tag && /* @__PURE__ */ jsx10("span", { className: popoverTagVariants(), children: tag }),
+              icon && /* @__PURE__ */ jsx10(icon.icon, { size: "xs", fill: icon.fill }),
+              /* @__PURE__ */ jsx10("p", { className: popoverTitleVariants(), children: title }),
+              onClose && /* @__PURE__ */ jsx10(
                 PopoverPrimitive.PopoverClose,
                 {
                   className: style_module_default5.closeButton,
                   onClick: () => {
                     onClose();
                   },
-                  children: /* @__PURE__ */ jsx11(IconCloseFill2, { size: "s", fill: true, type: "neutral-label-static-primary" })
+                  children: /* @__PURE__ */ jsx10(IconCloseFill, { size: "s", fill: true, type: "neutral-label-static-primary" })
                 }
               )
             ] }),
-            description && /* @__PURE__ */ jsx11("p", { className: popoverDescriptionVariants(), children: description }),
-            onConfirm && /* @__PURE__ */ jsx11("div", { className: popoverFooterVariants(), children: /* @__PURE__ */ jsx11(
+            description && /* @__PURE__ */ jsx10("p", { className: popoverDescriptionVariants(), children: description }),
+            onConfirm && /* @__PURE__ */ jsx10("div", { className: popoverFooterVariants(), children: /* @__PURE__ */ jsx10(
               Button,
               {
                 level: "static",
@@ -840,11 +1337,11 @@ var PopoverContent = React3.forwardRef(
             ) }),
             children
           ] }),
-          /* @__PURE__ */ jsx11(PopoverPrimitive.Arrow, { asChild: true, children: /* @__PURE__ */ jsx11(PopoverAnchor, { className: clsx7(popoverAnchorVariants({ level })) }) })
+          /* @__PURE__ */ jsx10(PopoverPrimitive.Arrow, { asChild: true, children: /* @__PURE__ */ jsx10(PopoverAnchor, { className: clsx7(popoverAnchorVariants({ level })) }) })
         ]
       }
     ),
-    isOverlay && /* @__PURE__ */ jsx11("div", { "data-radix-popper-overlay": true, className: style_module_default5.overlay })
+    isOverlay && /* @__PURE__ */ jsx10("div", { "data-radix-popper-overlay": true, className: style_module_default5.overlay })
   ] }) })
 );
 var Popover = Object.assign(PopoverRoot, {
@@ -867,12 +1364,12 @@ var style_module_default6 = {
 // src/components/Tooltip/index.tsx
 import { cva as cva4 } from "cva";
 import clsx8 from "clsx";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var DEFAULT_OFFSET2 = "medium";
 var tooltipVariants = cva4({ base: [style_module_default6.tooltip, "lp-sys-typo-caption1-normal-medium"] });
 var TooltipProvider = TooltipPrimitive.Provider;
-var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ jsx12(TooltipPrimitive.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
-var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx12(TooltipPrimitive.Trigger, { asChild: true, children: by }), "TooltipTrigger");
+var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ jsx11(TooltipPrimitive.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
+var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx11(TooltipPrimitive.Trigger, { asChild: true, children: by }), "TooltipTrigger");
 var TooltipContent = forwardRef8(
   ({
     description,
@@ -881,7 +1378,7 @@ var TooltipContent = forwardRef8(
     offset = DEFAULT_OFFSET2,
     collisionPadding,
     ...props
-  }, ref) => /* @__PURE__ */ jsx12(
+  }, ref) => /* @__PURE__ */ jsx11(
     TooltipPrimitive.Content,
     {
       ref,
@@ -890,7 +1387,7 @@ var TooltipContent = forwardRef8(
       collisionPadding,
       className: clsx8(tooltipVariants(), className),
       ...props,
-      children: /* @__PURE__ */ jsx12("p", { className: style_module_default6.tooltipContent, children: description })
+      children: /* @__PURE__ */ jsx11("p", { className: style_module_default6.tooltipContent, children: description })
     }
   )
 );
@@ -924,7 +1421,7 @@ var style_module_default7 = {
 
 // src/components/IconButton/index.tsx
 import { Slot as SlotPrimitive } from "radix-ui";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var { Slot } = SlotPrimitive;
 var ICON_SIZE_OPTIONS = ["l", "m", "s"];
 var ICON_LEVEL_OPTIONS = [
@@ -1010,7 +1507,7 @@ var IconButton = forwardRef9(
     ...rest
   }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx12(
       Comp,
       {
         ...rest,
@@ -1022,13 +1519,13 @@ var IconButton = forwardRef9(
         ref,
         disabled: disabled || isLoading,
         role: "button",
-        children: isLoading ? /* @__PURE__ */ jsx13(
+        children: isLoading ? /* @__PURE__ */ jsx12(
           Loading,
           {
             size: iconButtonSizeIconSizeMap[size],
             level: iconButtonLoadingLevelMap[level]
           }
-        ) : /* @__PURE__ */ jsx13(
+        ) : /* @__PURE__ */ jsx12(
           icon.icon,
           {
             size: iconButtonSizeIconSizeMap[size],
@@ -1084,7 +1581,7 @@ var style_module_default9 = {
 
 // src/components/Label/index.tsx
 import { cva as cva6 } from "cva";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var defaultLabelVariants = cva6({
   base: ["lp-sys-typo-paragraph2-normal-medium", style_module_default9.label],
   variants: {
@@ -1125,7 +1622,7 @@ var Label = forwardRef10(
     error = false,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx13(
       LabelPrimitive.Root,
       {
         ref,
@@ -1142,19 +1639,19 @@ Label.displayName = "Label";
 
 // src/components/CheckBox/index.tsx
 import { IconCheckMark, IconMinus } from "@liner-fe/icon";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var Checkbox = forwardRef11(
   ({ className, label, description, ...props }, ref) => {
     const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ jsxs5(Label, { position: "right", htmlFor: props.id, children: [
       /* @__PURE__ */ jsxs5("div", { className: style_module_default8["label-wrapper"], children: [
-        /* @__PURE__ */ jsx15(Paragraph, { type: "normal", weight: "medium", size: 3, children: label }),
-        description && /* @__PURE__ */ jsx15(Paragraph, { className: style_module_default8.description, size: 3, type: "normal", weight: "regular", children: description })
+        /* @__PURE__ */ jsx14(Paragraph, { type: "normal", weight: "medium", size: 3, children: label }),
+        description && /* @__PURE__ */ jsx14(Paragraph, { className: style_module_default8.description, size: 3, type: "normal", weight: "regular", children: description })
       ] }),
       children
-    ] }) : /* @__PURE__ */ jsx15(Fragment4, { children }), "CheckboxWrapper");
-    return /* @__PURE__ */ jsx15(CheckboxWrapper, { children: /* @__PURE__ */ jsx15(CheckboxPrimitive.Root, { className: clsx11(style_module_default8.checkbox, className), ref, ...props, children: /* @__PURE__ */ jsxs5(CheckboxPrimitive.Indicator, { className: style_module_default8["checkbox-indicator"], children: [
-      /* @__PURE__ */ jsx15(IconCheckMark, { size: "xs", type: "inverse-label-primary", className: style_module_default8["icon-check"] }),
-      /* @__PURE__ */ jsx15(IconMinus, { size: "xs", type: "inverse-label-primary", className: style_module_default8["icon-minus"] })
+    ] }) : /* @__PURE__ */ jsx14(Fragment4, { children }), "CheckboxWrapper");
+    return /* @__PURE__ */ jsx14(CheckboxWrapper, { children: /* @__PURE__ */ jsx14(CheckboxPrimitive.Root, { className: clsx11(style_module_default8.checkbox, className), ref, ...props, children: /* @__PURE__ */ jsxs5(CheckboxPrimitive.Indicator, { className: style_module_default8["checkbox-indicator"], children: [
+      /* @__PURE__ */ jsx14(IconCheckMark, { size: "xs", type: "inverse-label-primary", className: style_module_default8["icon-check"] }),
+      /* @__PURE__ */ jsx14(IconMinus, { size: "xs", type: "inverse-label-primary", className: style_module_default8["icon-minus"] })
     ] }) }) });
   }
 );
@@ -1173,27 +1670,27 @@ var style_module_default10 = {
 };
 
 // src/components/Radio/index.tsx
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
-var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx16("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
-var RadioRoot = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(RadioGroupPrimitive.Root, { ref, className, ...props }));
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx15("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx15("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
+var RadioRoot = forwardRef12(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(RadioGroupPrimitive.Root, { ref, className, ...props }));
 RadioRoot.displayName = "RadioRoot";
 var RadioItem = forwardRef12(
   ({ className, label, description, ...props }, ref) => {
     const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ jsxs6(Label, { position: "right", children: [
       /* @__PURE__ */ jsxs6("div", { className: style_module_default10["label-wrapper"], children: [
         label,
-        description && /* @__PURE__ */ jsx16(Paragraph, { className: style_module_default10.description, size: 3, type: "normal", weight: "regular", children: description })
+        description && /* @__PURE__ */ jsx15(Paragraph, { className: style_module_default10.description, size: 3, type: "normal", weight: "regular", children: description })
       ] }),
       children
-    ] }) : /* @__PURE__ */ jsx16(Fragment5, { children }), "RadioItemWrapper");
-    return /* @__PURE__ */ jsx16(RadioItemWrapper, { children: /* @__PURE__ */ jsx16(
+    ] }) : /* @__PURE__ */ jsx15(Fragment5, { children }), "RadioItemWrapper");
+    return /* @__PURE__ */ jsx15(RadioItemWrapper, { children: /* @__PURE__ */ jsx15(
       RadioGroupPrimitive.Item,
       {
         ref,
         className: clsx12(style_module_default10["radio-item"], className),
         ...props,
         "aria-label": label,
-        children: /* @__PURE__ */ jsx16(RadioGroupPrimitive.Indicator, { className: style_module_default10.indicator, children: /* @__PURE__ */ jsx16(RadioIndicator, {}) })
+        children: /* @__PURE__ */ jsx15(RadioGroupPrimitive.Indicator, { className: style_module_default10.indicator, children: /* @__PURE__ */ jsx15(RadioIndicator, {}) })
       }
     ) });
   }
@@ -1208,8 +1705,8 @@ import {
   forwardRef as forwardRef13,
   useId,
   useImperativeHandle,
-  useRef,
-  useState
+  useRef as useRef2,
+  useState as useState2
 } from "react";
 
 // src/components/Textfield/style.module.scss
@@ -1238,13 +1735,13 @@ var style_module_default11 = {
 import { cva as cva7 } from "cva";
 import clsx13 from "clsx";
 import {
-  IconCloseFill as IconCloseFill3,
-  IconExclamationmarkFill as IconExclamationmarkFill2,
+  IconCloseFill as IconCloseFill2,
+  IconExclamationmarkFill,
   IconVisibility,
   IconVisibilityOff
 } from "@liner-fe/icon";
 import { flushSync } from "react-dom";
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var defaultTextfieldVariants = cva7({
   base: style_module_default11.textfield,
   variants: {
@@ -1270,9 +1767,9 @@ var Textfield = forwardRef13((props, ref) => {
     onClear,
     ...rest
   } = props;
-  const inputRef = useRef(null);
-  const [value, setValue] = useState("");
-  const [deidentifiy, setDeidentifiy] = useState(true);
+  const inputRef = useRef2(null);
+  const [value, setValue] = useState2("");
+  const [deidentifiy, setDeidentifiy] = useState2(true);
   const isControlled = controlledValue !== void 0;
   const isPassword = type === "password";
   const isDeidentified = isPassword && deidentifiy;
@@ -1323,7 +1820,7 @@ var Textfield = forwardRef13((props, ref) => {
     return "text";
   })();
   return /* @__PURE__ */ jsxs7("div", { className: style_module_default11["textfield-container"], "data-disabled": disabled, "data-error": !!error, children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx16(
       "div",
       {
         className: clsx13(defaultTextfieldVariants({ color }), {
@@ -1331,7 +1828,7 @@ var Textfield = forwardRef13((props, ref) => {
         }),
         onClick: handleTextfieldClick,
         children: /* @__PURE__ */ jsxs7("div", { className: style_module_default11["input-wrapper"], children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx16(
             "input",
             {
               className: clsx13(style_module_default11.input, {
@@ -1346,7 +1843,7 @@ var Textfield = forwardRef13((props, ref) => {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx16(
             Label,
             {
               className: clsx13(style_module_default11.label, {
@@ -1360,14 +1857,14 @@ var Textfield = forwardRef13((props, ref) => {
             }
           ),
           /* @__PURE__ */ jsxs7("div", { className: style_module_default11["input-action-buttons"], children: [
-            textfieldValue && !disabled && /* @__PURE__ */ jsx17(
+            textfieldValue && !disabled && /* @__PURE__ */ jsx16(
               IconButton,
               {
                 tabIndex: -1,
                 className: style_module_default11["action-button"],
                 level: "quinary",
                 icon: {
-                  icon: IconCloseFill3,
+                  icon: IconCloseFill2,
                   size: "s"
                 },
                 type: "button",
@@ -1376,7 +1873,7 @@ var Textfield = forwardRef13((props, ref) => {
                 }
               }
             ),
-            isPassword && !disabled && /* @__PURE__ */ jsx17(
+            isPassword && !disabled && /* @__PURE__ */ jsx16(
               IconButton,
               {
                 tabIndex: -1,
@@ -1393,15 +1890,15 @@ var Textfield = forwardRef13((props, ref) => {
                 }
               }
             ),
-            buttonProps && /* @__PURE__ */ jsx17(Button, { ...buttonProps, size: "m", type: "button" })
+            buttonProps && /* @__PURE__ */ jsx16(Button, { ...buttonProps, size: "m", type: "button" })
           ] })
         ] })
       }
     ),
     displayFooter && /* @__PURE__ */ jsxs7("div", { className: style_module_default11.footer, children: [
-      /* @__PURE__ */ jsx17("div", { className: style_module_default11["error-wrapper"], children: error && /* @__PURE__ */ jsxs7(Fragment6, { children: [
-        /* @__PURE__ */ jsx17(IconExclamationmarkFill2, { fill: true, size: "xs", type: "function-label-negative" }),
-        /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx16("div", { className: style_module_default11["error-wrapper"], children: error && /* @__PURE__ */ jsxs7(Fragment6, { children: [
+        /* @__PURE__ */ jsx16(IconExclamationmarkFill, { fill: true, size: "xs", type: "function-label-negative" }),
+        /* @__PURE__ */ jsx16(
           Caption,
           {
             size: 3,
@@ -1457,16 +1954,16 @@ var style_module_default12 = {
 import { IconCheckMark as IconCheckMark2, IconDropDown } from "@liner-fe/icon";
 import {
   forwardRef as forwardRef14,
-  useEffect,
-  useState as useState2
+  useEffect as useEffect2,
+  useState as useState3
 } from "react";
 import clsx14 from "clsx";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
-var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx18("div", { className: style_module_default12.badgeContainer, children: /* @__PURE__ */ jsx18(Caption, { className: style_module_default12.badge, size: 2, type: "normal", weight: "medium", children }) }), "Badge");
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ jsx17("div", { className: style_module_default12.badgeContainer, children: /* @__PURE__ */ jsx17(Caption, { className: style_module_default12.badge, size: 2, type: "normal", weight: "medium", children }) }), "Badge");
 var SelectContent = forwardRef14(
   (props, ref) => {
     const { id, isResponsive, popSide, sideOffset, listLabel, children, container } = props;
-    return /* @__PURE__ */ jsx18(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx17(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ jsx17(
       SelectPrimitive.Content,
       {
         id: `select-content-${id}`,
@@ -1489,13 +1986,13 @@ var SelectContent = forwardRef14(
         sideOffset,
         avoidCollisions: false,
         children: /* @__PURE__ */ jsxs8(ScrollArea.Root, { className: style_module_default12.scrollAreaRoot, type: "always", children: [
-          /* @__PURE__ */ jsx18(SelectPrimitive.Viewport, { asChild: true, children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx17(SelectPrimitive.Viewport, { asChild: true, children: /* @__PURE__ */ jsx17(
             ScrollArea.Viewport,
             {
               className: style_module_default12.scrollAreaViewport,
               style: { maxHeight: "268px", overflowY: "auto" },
               children: /* @__PURE__ */ jsxs8(SelectPrimitive.Group, { children: [
-                listLabel && /* @__PURE__ */ jsx18(SelectPrimitive.Label, { asChild: true, children: /* @__PURE__ */ jsx18(
+                listLabel && /* @__PURE__ */ jsx17(SelectPrimitive.Label, { asChild: true, children: /* @__PURE__ */ jsx17(
                   Label,
                   {
                     className: style_module_default12["desktop-label"],
@@ -1509,7 +2006,7 @@ var SelectContent = forwardRef14(
               ] })
             }
           ) }),
-          /* @__PURE__ */ jsx18(ScrollArea.Scrollbar, { className: style_module_default12.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ jsx18(ScrollArea.Thumb, { className: style_module_default12.scrollAreaThumb }) })
+          /* @__PURE__ */ jsx17(ScrollArea.Scrollbar, { className: style_module_default12.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ jsx17(ScrollArea.Thumb, { className: style_module_default12.scrollAreaThumb }) })
         ] })
       }
     ) });
@@ -1534,13 +2031,13 @@ var SelectRoot = forwardRef14((props, ref) => {
     ...rest
   } = props;
   const contentProps = { id, isResponsive, popSide, sideOffset, listLabel, children, container };
-  const [isOpen, setIsOpen] = useState2(false);
-  useEffect(() => {
+  const [isOpen, setIsOpen] = useState3(false);
+  useEffect2(() => {
     setIsOpen(open);
   }, [open]);
   return /* @__PURE__ */ jsxs8("div", { children: [
     /* @__PURE__ */ jsxs8("div", { className: style_module_default12["label-container"], children: [
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx17(
         Label,
         {
           className: style_module_default12["select-label"],
@@ -1551,7 +2048,7 @@ var SelectRoot = forwardRef14((props, ref) => {
           children: label
         }
       ),
-      badge && /* @__PURE__ */ jsx18(Badge, { children: badge })
+      badge && /* @__PURE__ */ jsx17(Badge, { children: badge })
     ] }),
     /* @__PURE__ */ jsxs8(
       SelectPrimitive.Root,
@@ -1564,10 +2061,10 @@ var SelectRoot = forwardRef14((props, ref) => {
         },
         children: [
           /* @__PURE__ */ jsxs8(SelectPrimitive.Trigger, { className: style_module_default12.trigger, ref, id, children: [
-            /* @__PURE__ */ jsx18(SelectPrimitive.Value, { className: style_module_default12.placeholder, placeholder }),
-            /* @__PURE__ */ jsx18(SelectPrimitive.Icon, { className: style_module_default12.openIcon, children: /* @__PURE__ */ jsx18(IconDropDown, { fill: true, size: "xs" }) })
+            /* @__PURE__ */ jsx17(SelectPrimitive.Value, { className: style_module_default12.placeholder, placeholder }),
+            /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { className: style_module_default12.openIcon, children: /* @__PURE__ */ jsx17(IconDropDown, { fill: true, size: "xs" }) })
           ] }),
-          /* @__PURE__ */ jsx18(SelectContent, { ...contentProps })
+          /* @__PURE__ */ jsx17(SelectContent, { ...contentProps })
         ]
       }
     )
@@ -1584,9 +2081,9 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
       onClick?.();
     },
     children: [
-      /* @__PURE__ */ jsx18(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx18(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
-      icon && /* @__PURE__ */ jsx18(SelectPrimitive.Icon, { className: style_module_default12.icon, children: /* @__PURE__ */ jsx18(icon.icon, { size: "xs", ...icon }) }),
-      /* @__PURE__ */ jsx18(SelectPrimitive.ItemIndicator, { className: style_module_default12.itemIndicator, children: /* @__PURE__ */ jsx18(IconCheckMark2, { size: "xs", type: "brand-label-primary" }) })
+      /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx17(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
+      icon && /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { className: style_module_default12.icon, children: /* @__PURE__ */ jsx17(icon.icon, { size: "xs", ...icon }) }),
+      /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { className: style_module_default12.itemIndicator, children: /* @__PURE__ */ jsx17(IconCheckMark2, { size: "xs", type: "brand-label-primary" }) })
     ]
   }
 ), "SelectItem");
@@ -1603,15 +2100,15 @@ var style_module_default13 = {
 
 // src/components/List/index.tsx
 import { IconCheckMark as IconCheckMark3 } from "@liner-fe/icon";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/hooks/collection.tsx
 import { createContext, useContext, useMemo } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var CollectionContext = createContext(void 0);
 var CollectionProvider = /* @__PURE__ */ __name(({ value, onChangeValue, children }) => {
   const contextValue = useMemo(() => ({ value, onChangeValue }), [value, onChangeValue]);
-  return /* @__PURE__ */ jsx19(CollectionContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx18(CollectionContext.Provider, { value: contextValue, children });
 }, "CollectionProvider");
 var useCollectionContext = /* @__PURE__ */ __name(() => {
   const context = useContext(CollectionContext);
@@ -1623,20 +2120,20 @@ var useCollectionContext = /* @__PURE__ */ __name(() => {
 
 // src/components/List/index.tsx
 import clsx15 from "clsx";
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var ListRoot = /* @__PURE__ */ __name(({ children, className, ...props }) => {
-  return /* @__PURE__ */ jsx20(CollectionProvider, { ...props, children: /* @__PURE__ */ jsx20("ul", { className: clsx15(style_module_default13.list, className), children }) });
+  return /* @__PURE__ */ jsx19(CollectionProvider, { ...props, children: /* @__PURE__ */ jsx19("ul", { className: clsx15(style_module_default13.list, className), children }) });
 }, "ListRoot");
 var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => {
-  const [isFocused, setIsFocused] = useState3(false);
+  const [isFocused, setIsFocused] = useState4(false);
   const { value: contextValue, onChangeValue } = useCollectionContext();
   const isSelected = contextValue === value;
   const renderIcon = /* @__PURE__ */ __name(() => {
     if (isSelected) {
-      return /* @__PURE__ */ jsx20(IconCheckMark3, { type: "brand-label-primary" });
+      return /* @__PURE__ */ jsx19(IconCheckMark3, { type: "brand-label-primary" });
     }
     if (icon) {
-      return /* @__PURE__ */ jsx20(icon.icon, { className: style_module_default13.icon, size: "xs", ...icon });
+      return /* @__PURE__ */ jsx19(icon.icon, { className: style_module_default13.icon, size: "xs", ...icon });
     }
     return null;
   }, "renderIcon");
@@ -1658,7 +2155,7 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
         onChangeValue?.(value);
       },
       children: [
-        /* @__PURE__ */ jsx20(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
+        /* @__PURE__ */ jsx19(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
         renderIcon()
       ]
     }
@@ -1666,11 +2163,86 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
 }, "Item");
 var List = Object.assign(ListRoot, { Item });
 
+// src/components/Snackbar/style.module.scss
+var style_module_default14 = {
+  "Viewport": "_Viewport_1q9l5_1",
+  "ViewportRight": "_ViewportRight_1q9l5_21",
+  "ViewportLeft": "_ViewportLeft_1q9l5_25",
+  "extendedContainer": "_extendedContainer_1q9l5_29",
+  "NavigationWrapper": "_NavigationWrapper_1q9l5_33",
+  "Wrapper": "_Wrapper_1q9l5_40",
+  "Root": "_Root_1q9l5_46",
+  "CloseButton": "_CloseButton_1q9l5_52",
+  "Content": "_Content_1q9l5_63",
+  "MarginRight12": "_MarginRight12_1q9l5_69",
+  "ContentWrapper": "_ContentWrapper_1q9l5_73",
+  "gap300": "_gap300_1q9l5_79",
+  "minWidth32": "_minWidth32_1q9l5_85",
+  "minWidth24": "_minWidth24_1q9l5_90",
+  "JustifyEnd": "_JustifyEnd_1q9l5_95",
+  "slideIn": "_slideIn_1q9l5_1",
+  "hide": "_hide_1q9l5_1",
+  "swipeOut": "_swipeOut_1q9l5_1",
+  "slideInLeft": "_slideInLeft_1q9l5_1",
+  "swipeOutLeft": "_swipeOutLeft_1q9l5_1"
+};
+
+// src/components/Snackbar/index.tsx
+import { Toast as Toast2 } from "radix-ui";
+import { useAtomValue as useAtomValue2, useSetAtom as useSetAtom4 } from "jotai";
+
+// src/hooks/useSnackbar.ts
+import { atom as atom2, useSetAtom as useSetAtom3 } from "jotai";
+import { millisecondsInSecond as millisecondsInSecond3 } from "date-fns/constants";
+var snackbarAtom = atom2([]);
+var useSnackbar = /* @__PURE__ */ __name(() => {
+  const setSnackbar = useSetAtom3(snackbarAtom);
+  return {
+    open: /* @__PURE__ */ __name((info) => {
+      const snackbarId = generateRandomId();
+      const timer = info.timer ?? (info.button ? millisecondsInSecond3 * 5 : millisecondsInSecond3 + 800);
+      setSnackbar((prev) => [...prev, { ...info, snackbarId, timer }]);
+    }, "open")
+  };
+}, "useSnackbar");
+
+// src/components/Snackbar/SnackbarIcon/style.module.scss
+var style_module_default15 = {
+  "container": "_container_1jxdi_1"
+};
+
+// src/components/Snackbar/SnackbarIcon/index.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var SnackbarIcon = /* @__PURE__ */ __name((props) => {
+  const { icon } = props;
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx20(icon.icon, { ...icon, size: "m", className: style_module_default15.container });
+}, "SnackbarIcon");
+
+// src/components/Snackbar/index.tsx
+import { IconArrowForward } from "@liner-fe/icon";
+
+// src/components/Snackbar/SnackbarTitle/index.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var SnackbarTitle = /* @__PURE__ */ __name(({ title }) => /* @__PURE__ */ jsx21(Paragraph, { type: "normal", weight: "medium", size: 3, color: "inverse-label-static-primary", children: title }), "SnackbarTitle");
+
+// src/components/Snackbar/SnackbarDescription/index.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var SnackbarDescription = /* @__PURE__ */ __name(({ description }) => {
+  if (!description) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx22(Paragraph, { type: "normal", weight: "regular", size: 4, color: "inverse-label-static-secondary", children: description });
+}, "SnackbarDescription");
+
+// src/components/Snackbar/index.tsx
+import clsx18 from "clsx";
+
 // src/components/TextButton/index.tsx
 import { cva as cva8 } from "cva";
 
 // src/components/TextButton/style.module.scss
-var style_module_default14 = {
+var style_module_default16 = {
   "button": "_button_zsyf9_1",
   "text": "_text_zsyf9_20",
   "primary": "_primary_zsyf9_23",
@@ -1687,7 +2259,7 @@ var style_module_default14 = {
 import { Children as Children2, cloneElement as cloneElement2, forwardRef as forwardRef15 } from "react";
 import clsx16 from "clsx";
 import { classNames } from "@liner-fe/design-token";
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
 var TEXT_LEVEL_OPTIONS = ["primary", "secondary", "tertiary"];
 var TEXT_SIZE_OPTIONS = ["m", "s", "xs"];
 var textButtonSizeIconSizeMap = {
@@ -1708,20 +2280,20 @@ var textButtonLevelIconTypeMap = {
   }
 };
 var textButtonVariants = cva8({
-  base: [style_module_default14.button, style_module_default14.text],
+  base: [style_module_default16.button, style_module_default16.text],
   variants: {
     level: {
-      primary: style_module_default14["primary"],
-      secondary: style_module_default14["secondary"],
-      tertiary: style_module_default14["tertiary"]
+      primary: style_module_default16["primary"],
+      secondary: style_module_default16["secondary"],
+      tertiary: style_module_default16["tertiary"]
     },
     size: {
-      m: [classNames.typography["lp-sys-typo-paragraph4-normal-regular"], style_module_default14.m],
-      s: [classNames.typography["lp-sys-typo-caption1-normal-regular"], style_module_default14.s],
-      xs: [classNames.typography["lp-sys-typo-caption2-normal-regular"], style_module_default14.xs]
+      m: [classNames.typography["lp-sys-typo-paragraph4-normal-regular"], style_module_default16.m],
+      s: [classNames.typography["lp-sys-typo-caption1-normal-regular"], style_module_default16.s],
+      xs: [classNames.typography["lp-sys-typo-caption2-normal-regular"], style_module_default16.xs]
     },
     underline: {
-      true: style_module_default14.underline
+      true: style_module_default16.underline
     }
   }
 });
@@ -1743,10 +2315,10 @@ var TextButton = forwardRef15(
       fillType: "inverse-label-primary",
       ...icon
     }), "getIconProps");
-    const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ jsxs10("span", { className: style_module_default14["text-children"], children: [
-      leftIcon && /* @__PURE__ */ jsx21(leftIcon.icon, { ...getIconProps(leftIcon) }),
-      /* @__PURE__ */ jsx21("p", { children: children2 }),
-      rightIcon && /* @__PURE__ */ jsx21(rightIcon.icon, { ...getIconProps(rightIcon) })
+    const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ jsxs10("span", { className: style_module_default16["text-children"], children: [
+      leftIcon && /* @__PURE__ */ jsx23(leftIcon.icon, { ...getIconProps(leftIcon) }),
+      /* @__PURE__ */ jsx23("p", { children: children2 }),
+      rightIcon && /* @__PURE__ */ jsx23(rightIcon.icon, { ...getIconProps(rightIcon) })
     ] }), "renderContent");
     if (asChild) {
       const parent = Children2.only(children);
@@ -1757,7 +2329,7 @@ var TextButton = forwardRef15(
         children: renderContent(parent.props.children)
       });
     }
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(
       "button",
       {
         className: clsx16(textButtonVariants({ level, underline, size }), className),
@@ -1770,14 +2342,184 @@ var TextButton = forwardRef15(
 );
 TextButton.displayName = "TextButton";
 
+// src/components/Snackbar/SnackbarButton/style.module.scss
+var style_module_default17 = {
+  "Container": "_Container_4sip5_1",
+  "button": "_button_4sip5_9"
+};
+
+// src/components/Snackbar/SnackbarButton/index.tsx
+import clsx17 from "clsx";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+var SnackbarButton = /* @__PURE__ */ __name(({
+  button,
+  containerStyle,
+  onCloseSnackbar
+}) => {
+  if (button?.text || button?.basic) {
+    return /* @__PURE__ */ jsxs11("div", { className: clsx17(style_module_default17.Container, containerStyle), children: [
+      button?.text && /* @__PURE__ */ jsx24(
+        TextButton,
+        {
+          size: "s",
+          onClick: (e) => {
+            button.text?.onClick?.(e);
+            onCloseSnackbar();
+          },
+          level: "inverse-static",
+          className: style_module_default17.button,
+          children: button.text.text
+        }
+      ),
+      button?.basic && /* @__PURE__ */ jsx24(
+        Button,
+        {
+          size: "s",
+          onClick: (e) => {
+            button.basic?.onClick?.(e);
+            onCloseSnackbar();
+          },
+          fill: true,
+          level: "static",
+          children: button.basic.text
+        }
+      )
+    ] });
+  }
+  return null;
+}, "SnackbarButton");
+
+// src/components/Snackbar/index.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+import { millisecondsInSecond as millisecondsInSecond4 } from "date-fns/constants";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { createElement as createElement3 } from "react";
+var { Provider: Provider2, Root: Root2, Viewport: Viewport2 } = Toast2;
+var Snackbar = /* @__PURE__ */ __name(() => {
+  const list = useAtomValue2(snackbarAtom);
+  const rightSnackbars = list.filter((snackbar) => snackbar.position !== "left");
+  const leftSnackbars = list.filter((snackbar) => snackbar.position === "left");
+  return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+    /* @__PURE__ */ jsxs12(Provider2, { children: [
+      rightSnackbars.map((props) => (
+        // eslint-disable-next-line react/prop-types
+        /* @__PURE__ */ createElement3(SingleSnackbar, { ...props, key: props.snackbarId, position: "right" })
+      )),
+      /* @__PURE__ */ jsx25(Viewport2, { className: clsx18(style_module_default14.Viewport, style_module_default14.ViewportRight) })
+    ] }),
+    /* @__PURE__ */ jsxs12(Provider2, { children: [
+      leftSnackbars.map((props) => (
+        // eslint-disable-next-line react/prop-types
+        /* @__PURE__ */ createElement3(SingleSnackbar, { ...props, key: props.snackbarId, position: "left" })
+      )),
+      /* @__PURE__ */ jsx25(Viewport2, { className: clsx18(style_module_default14.Viewport, style_module_default14.ViewportLeft) })
+    ] })
+  ] });
+}, "Snackbar");
+var SingleSnackbar = /* @__PURE__ */ __name((props) => {
+  const setSnackbar = useSetAtom4(snackbarAtom);
+  const timerRef = useRef3(void 0);
+  const { snackbarId, description, title, timer } = props;
+  const [isOpen, setIsOpen] = useState5(true);
+  const onCloseSnackbar = useCallback(() => {
+    setSnackbar((prev) => prev.filter((snackbar) => snackbar.snackbarId !== snackbarId));
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, [setSnackbar, snackbarId]);
+  useEffect3(() => {
+    if (timer && timer > 0) {
+      const preCloseTimeout = setTimeout(() => {
+        setIsOpen(false);
+      }, timer);
+      timerRef.current = setTimeout(() => {
+        onCloseSnackbar();
+      }, timer + millisecondsInSecond4);
+      return () => {
+        clearTimeout(preCloseTimeout);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+        }
+      };
+    }
+  }, [timer, onCloseSnackbar]);
+  useEffect3(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  if (props.kind === "navigation") {
+    return /* @__PURE__ */ jsxs12(
+      Root2,
+      {
+        onSwipeEnd: onCloseSnackbar,
+        className: clsx18(style_module_default14.Root, style_module_default14.NavigationWrapper),
+        onClick: props.button.onClick,
+        open: isOpen,
+        children: [
+          /* @__PURE__ */ jsxs12("div", { className: clsx18(style_module_default14.Content, style_module_default14.MarginRight12), children: [
+            /* @__PURE__ */ jsx25(SnackbarTitle, { title }),
+            /* @__PURE__ */ jsx25(SnackbarDescription, { description })
+          ] }),
+          /* @__PURE__ */ jsx25(
+            IconArrowForward,
+            {
+              fill: true,
+              type: "inverse-label-static-primary",
+              className: description ? style_module_default14.minWidth32 : style_module_default14.minWidth24,
+              size: description ? "l" : "m"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (props.kind === "extended") {
+    return /* @__PURE__ */ jsxs12(
+      Root2,
+      {
+        onSwipeEnd: onCloseSnackbar,
+        className: clsx18(style_module_default14.Root, style_module_default14.gap300, style_module_default14.extendedContainer),
+        open: isOpen,
+        children: [
+          /* @__PURE__ */ jsxs12("div", { className: style_module_default14.Content, children: [
+            /* @__PURE__ */ jsx25(SnackbarTitle, { title }),
+            /* @__PURE__ */ jsx25(SnackbarDescription, { description })
+          ] }),
+          /* @__PURE__ */ jsx25(
+            SnackbarButton,
+            {
+              button: props.button,
+              containerStyle: style_module_default14.JustifyEnd,
+              onCloseSnackbar
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs12(Root2, { onSwipeEnd: onCloseSnackbar, className: clsx18(style_module_default14.Root, style_module_default14.Wrapper), open: isOpen, children: [
+    /* @__PURE__ */ jsxs12("div", { className: style_module_default14.ContentWrapper, children: [
+      /* @__PURE__ */ jsx25(SnackbarIcon, { icon: props.icon }),
+      /* @__PURE__ */ jsxs12("div", { className: clsx18(style_module_default14.Content, style_module_default14.MarginRight12), children: [
+        /* @__PURE__ */ jsx25(SnackbarTitle, { title }),
+        /* @__PURE__ */ jsx25(SnackbarDescription, { description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx25(SnackbarButton, { button: props.button, onCloseSnackbar })
+  ] });
+}, "SingleSnackbar");
+
 // src/components/Logo/index.tsx
 import { vars } from "@liner-fe/design-token";
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 var Logo = /* @__PURE__ */ __name((props) => {
   if (props.type === "combination") {
     const { width, height, fill = "brand-label-secondary", className } = props;
     const darkModeAwareFillColor = vars.color[fill];
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         width,
@@ -1786,50 +2528,50 @@ var Logo = /* @__PURE__ */ __name((props) => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ jsxs11("g", { children: [
-          /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsxs13("g", { children: [
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M56.7088 28.6542H52.9156C52.6532 28.6542 52.4455 28.4483 52.4455 28.1883V8.38183C52.4455 5.67308 53.0796 3.77695 53.3091 3.19186C53.3419 3.09434 53.2763 2.99683 53.167 2.99683H46.2365C46.1381 2.99683 46.0616 3.09434 46.0944 3.19186C46.313 3.78778 46.9252 5.69475 46.9252 8.42517V25.7937C46.9252 28.8167 46.313 30.8103 46.0944 31.4171C46.0616 31.5146 46.1272 31.6121 46.2365 31.6121H66.2081C66.2846 31.6121 66.3502 31.5471 66.3502 31.4713V25.9562C66.3502 25.8479 66.23 25.7721 66.1316 25.8262C65.115 26.3788 60.6878 28.665 56.7088 28.665V28.6542Z",
               fill: darkModeAwareFillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M94.4108 26.6714C94.4108 29.3259 93.8533 30.9078 93.5472 31.4496C93.4925 31.5471 93.5691 31.6663 93.6784 31.6663H100.347C100.456 31.6663 100.521 31.5579 100.478 31.4604C100.183 30.8753 99.5922 29.1309 99.5922 26.7147V18.816C99.5922 16.1614 98.991 14.1027 97.7886 12.6617C96.5752 11.2206 94.859 10.4947 92.6399 10.4947C88.8467 10.4947 86.1029 13.431 84.9661 15.5221C84.8458 15.7496 84.496 15.663 84.496 15.4029V11.3073C84.496 11.2314 84.4304 11.1664 84.3539 11.1664H79.0959C78.9866 11.1664 78.921 11.2748 78.9648 11.3723C79.238 11.9466 79.8065 13.7018 79.8065 16.118V26.6822C79.8065 29.3368 79.249 30.9187 78.9429 31.4604C78.8882 31.5579 78.9648 31.6771 79.0741 31.6771H85.7422C85.8515 31.6771 85.9171 31.5688 85.8734 31.4713C85.5892 30.8862 85.0098 29.1417 85.0098 26.7255V20.7013C85.0098 19.8886 85.1628 19.076 85.4798 18.3175C85.9499 17.2124 86.5402 16.3131 87.2617 15.6196C88.2564 14.6445 89.4042 14.1461 90.716 14.1461C91.9512 14.1461 92.8804 14.5578 93.4925 15.3813C94.1047 16.2047 94.4217 17.4182 94.4217 19.0218V26.693L94.4108 26.6714Z",
               fill: darkModeAwareFillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M69.3127 31.6663H76.0026C76.112 31.6663 76.1776 31.558 76.1338 31.4604C75.8496 30.8754 75.2702 29.1309 75.2702 26.7147V11.3073C75.2702 11.2315 75.2047 11.1664 75.1281 11.1664H69.3345C69.2252 11.1664 69.1596 11.2748 69.2033 11.3723C69.4876 11.9466 70.056 13.7018 70.056 16.118V26.6822C70.056 29.3368 69.4876 30.9187 69.1924 31.4604C69.1378 31.558 69.2143 31.6771 69.3236 31.6771L69.3127 31.6663Z",
               fill: darkModeAwareFillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M72.2642 8.71772C74.1335 8.71772 75.6529 7.21165 75.6529 5.35886C75.6529 3.50607 74.1335 2 72.2642 2C70.395 2 68.8755 3.50607 68.8755 5.35886C68.8755 7.21165 70.395 8.71772 72.2642 8.71772Z",
               fill: darkModeAwareFillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M130.299 15.5438C130.299 15.8038 130.616 15.8905 130.736 15.663C132.201 12.8675 134.179 11.1339 136.573 11.1339H138.858C138.935 11.1339 139 11.1989 139 11.2748V15.5329C139 15.6088 138.935 15.6738 138.858 15.6738H135.218C133.556 15.6738 132.004 16.5081 130.769 17.8408C130.474 18.1658 130.31 18.5776 130.299 19.0001V26.693C130.299 29.1092 130.878 30.8645 131.162 31.4388C131.206 31.5363 131.14 31.6446 131.031 31.6446H124.341C124.232 31.6446 124.155 31.5254 124.21 31.4279C124.516 30.8862 125.074 29.3151 125.074 26.6497V16.0855C125.074 13.6693 124.505 11.914 124.221 11.3398C124.177 11.2423 124.243 11.1339 124.352 11.1339H130.146C130.222 11.1339 130.288 11.1989 130.288 11.2748V15.5221L130.299 15.5438Z",
               fill: darkModeAwareFillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M113.967 29.4993C110.076 29.4993 108.152 26.5955 107.944 21.9581C107.944 21.8714 108.01 21.8064 108.086 21.8064H122.57C122.658 21.8064 122.723 21.7414 122.723 21.6547C122.669 14.4386 118.329 10.4405 112.47 10.4405C106.611 10.4405 101.998 14.7095 101.998 21.2213C101.998 28.1991 106.315 32.1647 113.279 32.1647C118.023 32.1647 121.488 29.4451 122.516 25.0244C122.538 24.9378 122.461 24.8511 122.374 24.8511H120.657C120.592 24.8511 120.537 24.8944 120.515 24.9486C119.63 27.7765 116.831 29.4885 113.956 29.4885L113.967 29.4993ZM112.514 13.1167C115.039 13.1167 116.657 15.1104 116.744 18.9026C116.744 18.9785 116.678 19.0543 116.591 19.0543H108.141C108.054 19.0543 107.988 18.9785 107.999 18.9026C108.207 15.2404 109.945 13.1276 112.524 13.1276L112.514 13.1167Z",
               fill: darkModeAwareFillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M32.4411 12.4883V3.18101C32.4411 3.08349 32.3646 3.00764 32.2662 3.00764H22.7996C22.7996 3.00764 22.7122 3.02931 22.6794 3.06182L17.2465 8.43599C17.2465 8.43599 17.17 8.49017 17.1262 8.49017H7.1459C7.1459 8.49017 7.05845 8.51184 7.02566 8.54434L0.0514475 15.4246C-0.0578662 15.5329 0.0186534 15.728 0.171692 15.728H9.1682C9.43056 15.728 9.63825 15.9338 9.63825 16.1939V25.4361C9.63825 25.5337 9.71477 25.6095 9.81315 25.6095H19.1595C19.4218 25.6095 19.6295 25.8262 19.6295 26.0754V34.971C19.6295 35.1227 19.8154 35.2093 19.9356 35.101L26.8114 28.2966C26.8114 28.2966 26.8661 28.2207 26.8661 28.1666V18.1333C26.8661 18.1333 26.8879 18.0358 26.9207 18.0033L32.3864 12.5858C32.3864 12.5858 32.4411 12.51 32.4411 12.4558V12.4883ZM17.9133 16.8873V9.67119C17.9133 9.41114 18.121 9.20528 18.3833 9.20528H25.6855C25.9478 9.20528 26.1555 9.41114 26.1555 9.67119V16.8873C26.1555 17.1474 25.9478 17.3532 25.6855 17.3532H18.3833C18.121 17.3532 17.9133 17.1474 17.9133 16.8873Z",
@@ -1842,7 +2584,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
   }
   if (props.type === "symbol-main") {
     const { size, className } = props;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         width: size,
@@ -1851,7 +2593,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M44.64 16.1672V3.24077C44.64 3.10534 44.5347 3 44.3993 3H31.373C31.373 3 31.2527 3.0301 31.2076 3.07524L23.7317 10.5391C23.7317 10.5391 23.6264 10.6144 23.5663 10.6144H9.833C9.833 10.6144 9.71266 10.6445 9.66754 10.6896L0.0707934 20.2452C-0.0796258 20.3957 0.0256677 20.6666 0.236255 20.6666H12.6158C12.9768 20.6666 13.2626 20.9525 13.2626 21.3137V34.1498C13.2626 34.2852 13.3678 34.3905 13.5032 34.3905H26.3641C26.7251 34.3905 27.0109 34.6915 27.0109 35.0376V47.3922C27.0109 47.6029 27.2666 47.7232 27.432 47.5728L36.8934 38.1225C36.8934 38.1225 36.9686 38.0172 36.9686 37.9419V24.0073C36.9686 24.0073 36.9987 23.8719 37.0438 23.8267L44.5648 16.3026C44.5648 16.3026 44.64 16.1973 44.64 16.122V16.1672ZM24.6493 22.2767V12.2546C24.6493 11.8935 24.9351 11.6076 25.2961 11.6076H35.3441C35.7051 11.6076 35.9909 11.8935 35.9909 12.2546V22.2767C35.9909 22.6379 35.7051 22.9238 35.3441 22.9238H25.2961C24.9351 22.9238 24.6493 22.6379 24.6493 22.2767Z",
@@ -1863,7 +2605,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
   }
   if (props.type === "symbol-circle") {
     const { size, className } = props;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         width: size,
@@ -1872,7 +2614,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M38.2863 19.6925V9.8935C38.2863 9.79083 38.2065 9.71098 38.1039 9.71098H28.2291C28.2291 9.71098 28.1379 9.73379 28.1037 9.76802L22.4365 15.4261C22.4365 15.4261 22.3567 15.4832 22.3111 15.4832H11.9004C11.9004 15.4832 11.8092 15.506 11.775 15.5402L4.5 22.784C4.38597 22.8981 4.46579 23.1034 4.62543 23.1034H14.0099C14.2836 23.1034 14.5002 23.3201 14.5002 23.5939V33.3245C14.5002 33.4272 14.58 33.507 14.6826 33.507H24.432C24.7057 33.507 24.9223 33.7352 24.9223 33.9976V43.3631C24.9223 43.5228 25.1162 43.6141 25.2416 43.5L32.4139 36.3361C32.4139 36.3361 32.4709 36.2562 32.4709 36.1992V25.6359C32.4709 25.6359 32.4937 25.5332 32.5279 25.499L38.2293 19.7952C38.2293 19.7952 38.2863 19.7154 38.2863 19.6583V19.6925ZM23.1321 24.324V16.7266C23.1321 16.4528 23.3487 16.2361 23.6224 16.2361H31.2394C31.5131 16.2361 31.7298 16.4528 31.7298 16.7266V24.324C31.7298 24.5978 31.5131 24.8145 31.2394 24.8145H23.6224C23.3487 24.8145 23.1321 24.5978 23.1321 24.324Z",
@@ -1884,7 +2626,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
   }
   if (props.type === "circle") {
     const { size, className } = props;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         width: size,
@@ -1893,7 +2635,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M38.2402 9.81371C38.2402 9.74309 38.204 9.68333 38.1895 9.65074C38.1569 9.63806 38.0972 9.60004 38.0266 9.60004H28.1578C28.1089 9.60004 28.0618 9.61996 28.0274 9.65436L22.3614 15.3094C22.327 15.3438 22.28 15.3638 22.2311 15.3638H11.8426C11.7937 15.3638 11.7466 15.3837 11.7122 15.4181L4.45458 22.663C4.33688 22.7789 4.42018 22.9799 4.58496 22.9799H13.9558C14.2292 22.9799 14.4501 23.2008 14.4501 23.4743V33.1946C14.4501 33.2471 14.4737 33.2942 14.5099 33.3286C14.5443 33.3648 14.5914 33.3883 14.6439 33.3883H24.3642C24.6376 33.3883 24.8585 33.6092 24.8585 33.8827V43.2535C24.8585 43.4183 25.0595 43.5016 25.1754 43.3839L32.4204 36.1262C32.4548 36.0918 32.4747 36.0448 32.4747 35.9959V25.6074C32.4747 25.5585 32.4946 25.5114 32.529 25.477L38.1841 19.8111C38.2185 19.7767 38.2384 19.7296 38.2384 19.6807V9.81371H38.2402ZM31.6979 24.2493C31.6979 24.5173 31.4806 24.7364 31.2108 24.7364H23.5892C23.3212 24.7364 23.1021 24.5191 23.1021 24.2493V16.6277C23.1021 16.3597 23.3193 16.1406 23.5892 16.1406H31.2108C31.4787 16.1406 31.6979 16.3579 31.6979 16.6277V24.2493Z",
@@ -1905,7 +2647,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
   }
   if (props.type === "favicon") {
     const { size, className } = props;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         width: size,
@@ -1914,7 +2656,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx26(
           "path",
           {
             d: "M44.8002 16.2872V3.36077C44.8002 3.22533 44.6949 3.12 44.5595 3.12H31.5332C31.5332 3.12 31.4128 3.15009 31.3677 3.19524L23.8919 10.6591C23.8919 10.6591 23.7866 10.7344 23.7264 10.7344H9.99315C9.99315 10.7344 9.87282 10.7645 9.82769 10.8096L0.23095 20.3652C0.0805305 20.5157 0.185824 20.7866 0.396411 20.7866H12.7759C13.1369 20.7866 13.4227 21.0725 13.4227 21.4337V34.2698C13.4227 34.4052 13.528 34.5105 13.6634 34.5105H26.5242C26.8852 34.5105 27.171 34.8115 27.171 35.1576V47.5122C27.171 47.7229 27.4267 47.8432 27.5922 47.6928L37.0536 38.2425C37.0536 38.2425 37.1288 38.1371 37.1288 38.0619V24.1273C37.1288 24.1273 37.1589 23.9918 37.204 23.9467L44.7249 16.4226C44.7249 16.4226 44.8002 16.3173 44.8002 16.242V16.2872ZM24.8094 22.3967V12.3746C24.8094 12.0135 25.0952 11.7276 25.4562 11.7276H35.5042C35.8653 11.7276 36.1511 12.0135 36.1511 12.3746V22.3967C36.1511 22.7579 35.8653 23.0438 35.5042 23.0438H25.4562C25.0952 23.0438 24.8094 22.7579 24.8094 22.3967Z",
@@ -1927,7 +2669,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
   if (props.type === "team") {
     const { width, height, className, fill = "brand-label-secondary" } = props;
     const fillColor = vars.color[fill];
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         width,
@@ -1936,78 +2678,78 @@ var Logo = /* @__PURE__ */ __name((props) => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ jsxs11("g", { children: [
-          /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsxs13("g", { children: [
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M184.872 36.3336H114.674C112.782 36.3336 111.242 34.7471 111.242 32.7988V3.95789C111.242 2.00778 112.782 0.423096 114.674 0.423096H184.872C186.765 0.423096 188.304 2.00959 188.304 3.95789V32.7988C188.304 34.749 186.765 36.3336 184.872 36.3336ZM184.214 3.47489L115.334 3.4785C114.63 3.4785 114.061 4.04834 114.061 4.75204V32.0083C114.061 32.712 114.63 33.2818 115.334 33.2818L184.214 33.2782C184.918 33.2782 185.487 32.7084 185.487 32.0047V4.74662C185.487 4.04291 184.918 3.47308 184.214 3.47308V3.47489Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M29.083 7.86175C31.167 7.86175 32.8566 6.17214 32.8566 4.08817C32.8566 2.00419 31.1688 0.312775 29.083 0.312775C26.9972 0.312775 25.3076 2.00238 25.3076 4.08636C25.3076 6.17033 26.9972 7.85994 29.083 7.85994V7.86175Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M11.8055 30.2283H7.58688C7.30106 30.2283 7.06589 29.9931 7.06589 29.7073V7.48004C7.06589 4.44634 7.77321 2.31714 8.02466 1.65505C8.06446 1.54832 7.98667 1.43616 7.8727 1.43616H0.166346C0.0541876 1.43616 -0.0254086 1.54651 0.0125805 1.65324C0.253178 2.31714 0.933364 4.46081 0.933364 7.52346V27.0119C0.933364 30.4001 0.245942 32.6433 0.00896248 33.3199C-0.0272176 33.4248 0.0505696 33.5351 0.162728 33.5351H22.3683C22.4587 33.5351 22.5311 33.4628 22.5311 33.3723V27.1873C22.5311 27.0643 22.399 26.9847 22.2905 27.0444C21.1598 27.6667 16.2375 30.2283 11.8055 30.2283Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M53.8248 28.0104C53.8248 30.9917 53.2007 32.7591 52.8642 33.3669C52.8045 33.4754 52.8823 33.6075 53.0071 33.6075H60.4168C60.538 33.6075 60.6158 33.4809 60.5634 33.3723C60.2414 32.7193 59.5774 30.7547 59.5774 28.0484V19.1915C59.5774 16.2103 58.9063 13.9092 57.5658 12.2902C56.2217 10.6711 54.3132 9.85889 51.8385 9.85889C47.6199 9.85889 44.5699 13.1513 43.3073 15.4976C43.1716 15.749 42.7863 15.6513 42.7863 15.3619V10.7634C42.7863 10.6729 42.7139 10.6006 42.6235 10.6006H36.7804C36.661 10.6006 36.5814 10.7254 36.6338 10.8321C36.9432 11.4816 37.5745 13.4498 37.5745 16.1578V28.0086C37.5782 30.9899 36.954 32.7573 36.6194 33.3651C36.5597 33.4736 36.6393 33.6057 36.7623 33.6057H44.1774C44.2986 33.6057 44.3764 33.4809 44.3239 33.3723C44.0074 32.7211 43.3579 30.7547 43.3579 28.0466V21.2882C43.3579 20.3746 43.5298 19.4629 43.8861 18.6127C44.4035 17.3735 45.0656 16.3677 45.8688 15.5862C46.9705 14.4881 48.2549 13.9346 49.7166 13.9346C51.0878 13.9346 52.1207 14.3959 52.8063 15.3239C53.492 16.2501 53.8339 17.6123 53.8339 19.4068V28.0086H53.8266L53.8248 28.0104Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M25.7979 33.6076H33.2366C33.3559 33.6076 33.4355 33.4827 33.3831 33.3742C33.0683 32.723 32.4207 30.7566 32.4207 28.0485V10.7635C32.4207 10.673 32.3483 10.6006 32.2579 10.6006H25.8178C25.6984 10.6006 25.6188 10.7255 25.6713 10.834C25.9824 11.4834 26.6174 13.4516 26.6174 16.1597V28.0105C26.6174 30.9917 25.9915 32.7591 25.655 33.367C25.5953 33.4755 25.6749 33.6076 25.7979 33.6076Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M93.2845 15.5266C93.2845 15.8161 93.6427 15.9156 93.7747 15.6587C95.4082 12.5182 97.608 10.5826 100.265 10.5826L100.258 10.5862H102.802C102.892 10.5862 102.964 10.6586 102.964 10.749V15.5266C102.964 15.6171 102.892 15.6894 102.802 15.6894H98.7513C96.9007 15.6894 95.1731 16.6247 93.8091 18.1189C93.478 18.4825 93.2989 18.9456 93.2845 19.4214V28.0485C93.2845 30.7566 93.9303 32.723 94.2469 33.3743C94.2993 33.4828 94.2215 33.6076 94.1003 33.6076H86.6617C86.5387 33.6076 86.4591 33.4756 86.5188 33.367C86.8553 32.7592 87.4812 30.9918 87.4812 28.0106V16.1598C87.4812 13.4517 86.8444 11.4835 86.5351 10.8341C86.4826 10.7255 86.5622 10.6007 86.6816 10.6007H93.1217C93.2121 10.6007 93.2845 10.6731 93.2845 10.7635V15.5266Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M74.6377 34.1828C66.8916 34.1828 62.0923 29.7272 62.0923 21.8996C62.0923 14.5858 67.1774 9.80283 73.7332 9.80283C80.2891 9.80283 85.1372 14.3507 85.1372 22.5545H69.075C68.8688 22.5545 68.7024 22.7282 68.7132 22.9344C68.99 28.0123 71.1301 31.1834 75.3975 31.1834C78.9359 31.1834 82.3748 28.8263 82.9356 25.0256C82.9429 24.9822 82.979 24.9478 83.0243 24.9478H85.0359C85.092 24.9478 85.1336 24.9967 85.1263 25.0527C84.3304 30.6661 80.3071 34.1828 74.6395 34.1828H74.6359H74.6377ZM73.7821 12.8003C70.9727 12.8003 69.0588 15.0869 68.7693 19.0667C68.7548 19.2784 68.9195 19.4593 69.1311 19.4593H78.1164C78.3227 19.4593 78.4855 19.2874 78.4782 19.0812C78.3317 14.9675 76.5498 12.8022 73.7839 12.8022L73.7821 12.8003Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M124.721 24.5354V10.4903H122.598C120.02 10.4903 118.564 11.0058 117.835 12.0677H117.683V8.09332H135.369V12.0677H135.187C134.459 11.0058 133.032 10.4903 130.454 10.4903H128.33V24.5354C128.33 26.8111 128.573 27.9634 129.423 29.0253V29.1773H123.629V29.0253C124.479 28.0249 124.721 26.8418 124.721 24.5354Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M139.403 29.5716C135.125 29.5716 131.879 26.5379 131.879 21.867C131.879 17.681 134.913 14.4049 138.736 14.4049C142.254 14.4049 144.591 16.6499 144.591 20.503V21.7169H135.248C135.459 25.1142 137.431 26.8436 140.313 26.8436C141.738 26.8436 143.074 26.4185 144.347 25.5701L144.772 27.238C143.316 28.7847 141.527 29.5734 139.403 29.5734V29.5716ZM141.284 19.7722C141.254 17.6792 140.192 16.4346 138.493 16.4346C136.794 16.4346 135.642 17.6177 135.307 19.7722H141.284Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M180.877 25.628V19.7722C180.877 16.4654 178.996 14.4031 176.327 14.4031C174.417 14.4031 172.93 15.4035 171.928 17.2252H171.776C171.078 15.4053 169.652 14.4031 167.863 14.4031C166.074 14.4031 164.618 15.2823 163.677 16.8905H163.529L163.518 14.7776C163.518 14.7215 163.472 14.6745 163.415 14.6745H159.487C159.411 14.6745 159.362 14.7522 159.395 14.821C159.59 15.2298 160.106 16.469 160.106 18.1767V25.6425C160.106 27.5202 159.598 28.6345 159.386 29.0181C159.348 29.0868 159.399 29.17 159.476 29.17H164.145C164.221 29.17 164.27 29.0904 164.238 29.0235C164.039 28.6128 163.518 27.3737 163.518 25.6696V20.2335C163.518 20.2335 163.543 16.923 166.62 16.923C168.107 16.923 168.865 17.9849 168.865 19.926V25.6895C168.865 27.4189 168.713 28.1769 168.228 29.0271V29.1791H172.87V29.0271C172.355 28.2076 172.233 27.5112 172.233 25.6895V20.7147C172.233 18.4101 173.538 16.923 175.236 16.923C176.662 16.923 177.512 17.9234 177.512 19.9567V25.6298C177.512 27.4496 177.391 28.2076 176.875 29.0271V29.1791H181.517V29.0271C181.002 28.2076 180.881 27.4496 180.881 25.6298L180.877 25.628Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M158.172 29.0235C157.973 28.6146 157.454 27.3755 157.452 25.6732V19.9857C157.452 18.0446 156.906 16.6191 155.844 15.7382C154.782 14.859 153.416 14.4031 151.81 14.4031C149.869 14.4031 147.866 15.2533 146.379 16.4654L146.774 18.2255C148.23 17.3464 149.596 16.9212 150.9 16.9212C152.751 16.9212 154.116 17.8619 154.116 19.8337V20.7437L151.325 21.4419C147.897 22.3211 145.987 23.5042 145.987 25.8414C145.987 28.0557 147.685 29.5734 149.869 29.5734C151.522 29.5734 152.971 28.7666 153.916 27.1873C153.751 28.1497 153.465 28.7576 153.321 29.0217C153.283 29.0904 153.333 29.1736 153.411 29.1736H158.08C158.156 29.1736 158.205 29.094 158.172 29.0271V29.0235ZM151.112 27.115C150.14 27.115 149.413 26.509 149.413 25.4163C149.413 24.3237 150.233 23.7484 152.174 23.1406L154.115 22.5038V23.4753C154.115 25.8414 152.506 27.115 151.112 27.115Z",
@@ -2021,7 +2763,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
   if (props.type === "pro") {
     const { width, height, className, fill = "brand-label-secondary" } = props;
     const fillColor = vars.color[fill];
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2030,78 +2772,78 @@ var Logo = /* @__PURE__ */ __name((props) => {
         viewBox: "0 0 164 36",
         fill: "none",
         className,
-        children: /* @__PURE__ */ jsxs11("g", { children: [
-          /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsxs13("g", { children: [
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M160.028 35.9619H113.316C111.425 35.9619 109.886 34.3763 109.886 32.4292V3.60506C109.886 1.65609 111.425 0.0723267 113.316 0.0723267H160.028C161.919 0.0723267 163.458 1.6579 163.458 3.60506V32.4292C163.458 34.3782 161.919 35.9619 160.028 35.9619ZM159.37 3.12234L113.976 3.12595C113.273 3.12595 112.703 3.69546 112.703 4.39875V31.6391C112.703 32.3424 113.273 32.9119 113.976 32.9119L159.37 32.9083C160.073 32.9083 160.643 32.3388 160.643 31.6355V4.39332C160.643 3.69003 160.073 3.12053 159.37 3.12053V3.12234Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M116.76 28.7484C116.686 28.7484 116.635 28.6761 116.659 28.6074C116.814 28.1626 117.264 26.6909 117.264 24.469V11.6832C117.264 9.67271 116.818 8.26613 116.66 7.83222C116.635 7.76352 116.688 7.68939 116.762 7.68939H123.504C125.928 7.68939 127.868 8.26432 129.352 9.38525C130.837 10.5062 131.565 12.052 131.565 14.0226C131.565 18.0526 128.262 20.4481 123.504 20.4481H120.896V21.1839V24.4672C120.896 26.6891 121.347 28.1626 121.502 28.6055C121.526 28.6743 121.475 28.7466 121.401 28.7466H119.902L116.76 28.7502V28.7484ZM120.896 18.1122H123.079C126.078 18.1122 127.776 16.7183 127.776 14.0208C127.776 11.3234 126.109 10.0506 123.079 10.0506H120.896V18.1122Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M150.109 13.99C154.352 13.99 157.503 17.1105 157.503 21.5364C157.503 25.9622 154.352 29.1424 150.109 29.1424C145.866 29.1424 142.714 25.9604 142.714 21.5364C142.714 17.1123 145.866 13.99 150.109 13.99ZM150.109 16.2933C147.806 16.2933 146.35 18.264 146.35 21.5364C146.35 24.8088 147.775 26.8391 150.109 26.8391C152.443 26.8391 153.897 24.8088 153.897 21.5364C153.897 18.264 152.441 16.2933 150.109 16.2933Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M136.72 17.4575C136.72 17.6383 136.944 17.6997 137.027 17.5406C138.047 15.579 139.421 14.3695 141.08 14.3695H141.077L142.664 14.3713C142.72 14.3713 142.765 14.4165 142.765 14.4726V17.4557C142.765 17.5117 142.72 17.5569 142.664 17.5569H140.135C138.98 17.5569 137.9 18.1409 137.049 19.0738C136.843 19.3016 136.73 19.5909 136.721 19.8874V25.2751C136.721 26.9655 137.239 28.1931 137.436 28.5999C137.468 28.6668 137.419 28.7463 137.343 28.7463H132.715C132.637 28.7463 132.588 28.6632 132.626 28.5963C132.836 28.2166 133.341 27.1119 133.341 25.2516V17.8516C133.341 16.1594 132.831 14.9318 132.637 14.525C132.605 14.4581 132.654 14.3804 132.729 14.3804H136.622C136.678 14.3804 136.723 14.4256 136.723 14.4816V17.4557L136.72 17.4575Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M136.72 17.4575C136.72 17.6383 136.944 17.6997 137.027 17.5406C138.047 15.579 139.421 14.3695 141.08 14.3695H141.077L142.664 14.3713C142.72 14.3713 142.765 14.4165 142.765 14.4726V17.4557C142.765 17.5117 142.72 17.5569 142.664 17.5569H140.135C138.98 17.5569 137.9 18.1409 137.049 19.0738C136.843 19.3016 136.73 19.5909 136.721 19.8874V25.2751C136.721 26.9655 137.239 28.1931 137.436 28.5999C137.468 28.6668 137.419 28.7463 137.343 28.7463H132.715C132.637 28.7463 132.588 28.6632 132.626 28.5963C132.836 28.2166 133.341 27.1119 133.341 25.2516V17.8516C133.341 16.1594 132.831 14.9318 132.637 14.525C132.605 14.4581 132.654 14.3804 132.729 14.3804H136.622C136.678 14.3804 136.723 14.4256 136.723 14.4816V17.4557L136.72 17.4575Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M11.7895 29.8268H7.57656C7.29107 29.8268 7.05573 29.5934 7.05573 29.306V7.11851C7.05573 4.08997 7.76174 1.96613 8.01252 1.30255C8.05303 1.19645 7.97394 1.08264 7.86013 1.08264H0.167245C0.0553629 1.08264 -0.023728 1.1926 0.0148521 1.29869C0.255978 1.96034 0.933062 4.10154 0.933062 7.15902V26.6131C0.933062 29.9946 0.248262 32.2361 0.00906532 32.9113C-0.0275858 33.0174 0.051507 33.1254 0.163389 33.1254H22.3296C22.4183 33.1254 22.4917 33.0521 22.4917 32.9634V26.7886C22.4917 26.6652 22.3605 26.5861 22.2525 26.6459C21.124 27.267 16.2089 29.8249 11.7857 29.8249V29.8287L11.7895 29.8268Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M53.6435 27.6123C53.6435 30.5887 53.0204 32.3518 52.6848 32.9614C52.625 33.0694 52.7041 33.2006 52.8275 33.2006H60.2253C60.3449 33.2006 60.4259 33.0733 60.3719 32.9672C60.0497 32.3171 59.3862 30.3534 59.3862 27.6528V18.8102C59.3862 15.8338 58.7168 13.5363 57.38 11.9198C56.0374 10.3033 54.1315 9.4931 51.6624 9.4931C47.4514 9.4931 44.4055 12.7782 43.1458 15.1219C43.0089 15.3746 42.625 15.2763 42.625 14.985V10.394C42.625 10.3052 42.5517 10.2319 42.463 10.2319H36.6297C36.5101 10.2319 36.431 10.3554 36.4831 10.4634C36.7917 11.1115 37.4205 13.0753 37.4205 15.7817V27.6123C37.4244 30.5887 36.8013 32.3538 36.4657 32.9614C36.4059 33.0694 36.485 33.2025 36.6084 33.2025H44.01C44.1296 33.2025 44.2087 33.0772 44.1566 32.9691C43.8403 32.3191 43.1921 30.3553 43.1921 27.6528V20.9051C43.1921 19.9927 43.3638 19.0822 43.7188 18.2334C44.2338 16.9969 44.8955 15.99 45.6979 15.2126C46.7975 14.115 48.0802 13.5633 49.5386 13.5633C50.9082 13.5633 51.9383 14.0243 52.6211 14.9483C53.3059 15.8743 53.6474 17.2323 53.6474 19.0224V27.6103H53.6396L53.6435 27.6123Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M25.7793 33.2006H33.2041C33.3237 33.2006 33.4028 33.0752 33.3507 32.9672C33.0363 32.3171 32.39 30.3553 32.39 27.6509V10.394C32.39 10.3052 32.3167 10.2319 32.228 10.2319H25.7986C25.679 10.2319 25.5999 10.3573 25.652 10.4634C25.9626 11.1116 26.5972 13.0753 26.5972 15.7817V27.6123C26.5972 30.5888 25.9703 32.3538 25.6366 32.9614C25.5768 33.0695 25.6559 33.2006 25.7793 33.2006Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M29.0603 7.49662C31.1398 7.49662 32.8277 5.80874 32.8277 3.72927C32.8277 1.6498 31.1417 -0.0380859 29.0603 -0.0380859C26.9789 -0.0380859 25.293 1.6498 25.293 3.72927C25.293 5.80874 26.9809 7.49662 29.0603 7.49662Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M93.4794 15.149C93.4794 15.4384 93.8363 15.5367 93.9694 15.2821C95.5994 12.1455 97.7965 10.2146 100.451 10.2146L100.445 10.2185H102.984C103.072 10.2185 103.146 10.2918 103.146 10.3805V15.149C103.146 15.2377 103.072 15.311 102.984 15.311H98.9404C97.0944 15.311 95.3679 16.2466 94.006 17.7377C93.6762 18.1004 93.4987 18.5633 93.4814 19.0398V27.6528C93.4814 30.3554 94.1276 32.3191 94.442 32.9692C94.4941 33.0791 94.415 33.2026 94.2954 33.2026H86.8706C86.7472 33.2026 86.6681 33.0714 86.7279 32.9615C87.0635 32.3538 87.6885 30.5888 87.6885 27.6143V15.7836C87.6885 13.0811 87.0539 11.1154 86.7433 10.4654C86.6912 10.3573 86.7703 10.2339 86.8899 10.2339H93.3193C93.408 10.2339 93.4814 10.3072 93.4814 10.3959V15.1529L93.4794 15.149Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M75.351 30.7797C71.0339 30.7797 68.8965 27.5274 68.667 22.3365C68.6612 22.2439 68.7364 22.1667 68.829 22.1667H84.9073C84.998 22.1667 85.0713 22.0915 85.0713 22.0008C85.0057 13.9144 80.189 9.43719 73.6863 9.43719C67.1836 9.43719 62.0659 14.2134 62.0659 21.5128C62.0659 29.3272 66.8557 33.7755 74.589 33.7755H74.5929C79.861 33.7755 83.7055 30.7277 84.8514 25.7836C84.8745 25.6814 84.7954 25.5849 84.6932 25.5849H82.7854C82.714 25.5849 82.6523 25.6312 82.6311 25.6987C81.6454 28.8604 78.5396 30.7797 75.351 30.7797ZM73.7364 12.4291C76.5431 12.4291 78.3371 14.6629 78.4297 18.9086C78.4297 18.9993 78.3583 19.0764 78.2657 19.0764H68.8811C68.7885 19.0764 68.7114 18.9974 68.7191 18.9048C68.9525 14.7979 70.8815 12.431 73.7383 12.431L73.7364 12.4291Z",
@@ -2115,7 +2857,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
   if (props.type === "max") {
     const { width, height, className, fill = "brand-label-secondary" } = props;
     const fillColor = vars.color[fill];
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         width,
@@ -2124,71 +2866,71 @@ var Logo = /* @__PURE__ */ __name((props) => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ jsxs11("g", { children: [
-          /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsxs13("g", { children: [
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M172.338 36H113.318C111.426 36 109.888 34.4145 109.888 32.4672V3.64313C109.888 1.69387 111.426 0.110352 113.318 0.110352H172.338C174.23 0.110352 175.768 1.69591 175.768 3.64313V32.4672C175.768 34.4165 174.23 36 172.338 36ZM171.68 3.16092L113.978 3.16501C113.275 3.16501 112.705 3.73507 112.705 4.43795V31.6785C112.705 32.3814 113.275 32.9515 113.978 32.9515L171.68 32.9474C172.382 32.9474 172.953 32.3773 172.953 31.6745V4.43182C172.953 3.72895 172.382 3.15888 171.68 3.15888V3.16092Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M11.7895 29.8662H7.57629C7.29024 29.8662 7.05526 29.6333 7.05526 29.3452V7.15752C7.05526 4.12943 7.76223 2.00445 8.0115 1.34244C8.05237 1.23619 7.97268 1.12177 7.85826 1.12177H0.167469C0.0550904 1.12177 -0.0225531 1.2321 0.0142254 1.33835C0.255329 2.00036 0.931644 4.14169 0.931644 7.19839V26.6522C0.931644 30.0337 0.247156 32.2752 0.00809567 32.9494C-0.0286828 33.0557 0.0510039 33.164 0.163383 33.164H22.3306C22.4184 33.164 22.492 33.0904 22.492 33.0026V26.8279C22.492 26.7053 22.3612 26.6256 22.2529 26.6849C21.1251 27.306 16.209 29.8641 11.7854 29.8641V29.8682H11.7895V29.8662Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M53.6435 27.6513C53.6435 30.6283 53.0203 32.3917 52.6852 33.0006C52.6259 33.1088 52.7036 33.2396 52.8282 33.2396H60.2268C60.3474 33.2396 60.4271 33.1129 60.3739 33.0067C60.0511 32.3569 59.3891 30.3934 59.3891 27.6922V18.849C59.3891 15.872 58.7189 13.5754 57.3826 11.9592C56.0402 10.343 54.1339 9.5318 51.6656 9.5318C47.4545 9.5318 44.408 12.8173 43.1493 15.1609C43.0124 15.4143 42.6283 15.3162 42.6283 15.0241V10.4329C42.6283 10.345 42.5548 10.2715 42.4669 10.2715H36.6334C36.5129 10.2715 36.4352 10.3941 36.4863 10.5023C36.7948 11.1501 37.4242 13.1136 37.4242 15.8209V27.6513C37.4283 30.6283 36.8051 32.3937 36.47 33.0006C36.4107 33.1088 36.4884 33.2417 36.613 33.2417H44.0157C44.1342 33.2417 44.2139 33.117 44.1628 33.0087C43.8461 32.359 43.1984 30.3954 43.1984 27.6922V20.9433C43.1984 20.03 43.37 19.1208 43.7255 18.2708C44.2404 17.0346 44.9025 16.0273 45.7055 15.2509C46.8047 14.1536 48.0879 13.602 49.5468 13.602C50.9157 13.602 51.9455 14.0637 52.63 14.9873C53.3145 15.9129 53.6557 17.2716 53.6557 19.0615V27.6493H53.6476H53.6516L53.6435 27.6513Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M25.7796 33.2396H33.2048C33.3233 33.2396 33.403 33.1149 33.3519 33.0066C33.0373 32.3569 32.3916 30.3954 32.3916 27.6901V10.4328C32.3916 10.345 32.318 10.2714 32.2302 10.2714H25.8001C25.6816 10.2714 25.6019 10.3961 25.653 10.5023C25.9635 11.15 26.599 13.1136 26.599 15.8209V27.6513C26.599 30.6283 25.9717 32.3937 25.6387 33.0005C25.5794 33.1088 25.6591 33.2396 25.7817 33.2396H25.7796Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M29.0612 7.5355C31.1412 7.5355 32.829 5.84778 32.829 3.76775C32.829 1.68772 31.1412 0 29.0612 0C26.9812 0 25.2935 1.68772 25.2935 3.76775C25.2935 5.84778 26.9812 7.5355 29.0612 7.5355Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M93.4806 15.1875C93.4806 15.4776 93.8381 15.5757 93.9709 15.3203C95.6014 12.1839 97.7979 10.2531 100.452 10.2531L100.446 10.2571H102.984C103.072 10.2571 103.145 10.3307 103.145 10.4186V15.1875C103.145 15.2754 103.072 15.3489 102.984 15.3489H98.9401C97.093 15.3489 95.3665 16.2847 94.0057 17.7763C93.6767 18.14 93.4989 18.6018 93.4806 19.0778V27.6901C93.4806 30.3934 94.1262 32.3569 94.4409 33.0067C94.494 33.117 94.4143 33.2396 94.2938 33.2396H86.8686C86.746 33.2396 86.6663 33.1088 86.7256 32.9985C87.0607 32.3917 87.6859 30.6263 87.6859 27.6513V15.8209C87.6859 13.1177 87.0504 11.1521 86.7399 10.5023C86.6867 10.394 86.7664 10.2714 86.887 10.2714H93.3171C93.4049 10.2714 93.4785 10.345 93.4785 10.4329V15.1895V15.1855L93.4806 15.1875Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M75.3506 30.8184C71.0332 30.8184 68.896 27.5655 68.6672 22.3757C68.661 22.2837 68.7366 22.2061 68.8286 22.2061H84.9069C84.9968 22.2061 85.0704 22.1305 85.0704 22.0406C85.005 13.9534 80.189 9.47662 73.6854 9.47662C67.1817 9.47662 62.0654 14.2537 62.0654 21.5522C62.0654 29.3677 66.8548 33.8158 74.5885 33.8158H74.5926C79.8601 33.8158 83.7055 30.7673 84.8517 25.8247C84.8742 25.7225 84.7966 25.6265 84.6944 25.6265H82.786C82.7145 25.6265 82.6532 25.6735 82.6307 25.7409C81.6459 28.9018 78.5401 30.8224 75.3506 30.8224V30.8184ZM73.7365 12.4679C76.5439 12.4679 78.3379 14.7012 78.4298 18.9471C78.4298 19.037 78.3583 19.1146 78.2663 19.1146H68.8817C68.7898 19.1146 68.7121 19.0349 68.7203 18.943C68.9532 14.8361 70.882 12.47 73.7406 12.47H73.7385L73.7365 12.4679Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M154.224 28.1846C154.028 27.78 153.515 26.5561 153.513 24.8745V19.2556C153.513 17.339 152.974 15.9292 151.926 15.0608C150.877 14.1924 149.527 13.7429 147.941 13.7429C146.025 13.7429 144.045 14.5827 142.576 15.78L142.966 17.5188C144.404 16.6505 145.753 16.2296 147.042 16.2296C148.871 16.2296 150.219 17.1592 150.219 19.1064V20.0055L147.463 20.6961C144.077 21.5645 142.189 22.7332 142.189 25.0421C142.189 27.2284 143.867 28.7281 146.025 28.7281C147.657 28.7281 149.089 27.9312 150.021 26.3702C149.858 27.3203 149.576 27.921 149.433 28.1826C149.396 28.25 149.445 28.3317 149.523 28.3317H154.134C154.21 28.3317 154.257 28.2541 154.224 28.1866V28.1826V28.1846ZM147.251 26.3007C146.29 26.3007 145.573 25.7021 145.573 24.6232C145.573 23.5444 146.382 22.9764 148.301 22.3756L150.217 21.7463V22.7067C150.217 25.0441 148.628 26.3028 147.251 26.3028V26.3007Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M120.468 11.1786H120.317V23.5893C120.317 25.9084 120.527 27.1732 121.22 28.1682V28.3194H116.702V28.1682C117.395 27.2038 117.605 25.9084 117.605 23.5893V11.9305C117.605 9.6707 117.425 8.49583 116.702 7.53346V7.38226H122.666L128.962 23.8897H129.113L135.318 7.38226H141.011V7.53346C140.287 8.52853 140.077 9.732 140.077 11.9305V23.6792C140.077 25.9983 140.287 27.1139 141.011 28.1682V28.3194H135.619V28.1682C136.373 27.1139 136.552 25.9983 136.552 23.6792V11.3278H136.401L130.016 28.3174H127.004L120.468 11.1766V11.1786Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M157.569 17.2634C156.515 15.7882 155.943 15.0036 155.009 14.1904V14.0392H160.219V14.1597C160.219 15.1242 160.52 15.968 161.335 17.1715L162.389 18.8286H162.51L163.654 17.1715C164.467 15.966 164.618 15.304 164.618 14.1291V14.0392H168.987V14.1904C168.022 14.9443 167.42 15.6963 166.245 17.3533L163.926 20.6368L166.909 24.9154C168.024 26.5112 168.656 27.2958 169.53 28.1683V28.3195H164.349V28.1989C164.349 27.2345 164.048 26.3906 163.233 25.1565L161.907 23.0785H161.756L160.34 25.1279C159.526 26.3334 159.345 27.116 159.345 28.2009V28.3215H155.007V28.1703C155.971 27.2958 156.633 26.4826 157.749 24.8868L160.34 21.2416L157.569 17.2655V17.2634Z",
@@ -2202,7 +2944,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
   if (props.type === "scholar") {
     const { width, height, className, fill = "brand-label-secondary" } = props;
     const fillColor = vars.color[fill];
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx26(
       "svg",
       {
         width,
@@ -2211,8 +2953,8 @@ var Logo = /* @__PURE__ */ __name((props) => {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         className,
-        children: /* @__PURE__ */ jsxs11("g", { children: [
-          /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsxs13("g", { children: [
+          /* @__PURE__ */ jsx26(
             "path",
             {
               fillRule: "evenodd",
@@ -2221,7 +2963,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               fillRule: "evenodd",
@@ -2230,14 +2972,14 @@ var Logo = /* @__PURE__ */ __name((props) => {
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M191.241 10.1641C194.571 10.1641 196.25 11.9276 196.819 12.6826C197.371 13.4207 197.647 14.1476 197.647 14.9026C197.647 15.6575 197.456 16.0349 197.135 16.4011C196.802 16.7842 196.397 16.9702 195.811 16.9702C195.225 16.9702 194.808 16.8124 194.532 16.4912C194.261 16.1701 193.985 15.6742 193.664 15.0264C192.639 12.9699 192.064 12.1304 190.526 12.1304C189.698 12.1304 188.272 12.5642 187.095 13.5107C185.951 14.4685 185.015 15.7363 184.311 17.28C183.601 18.8463 183.235 20.5761 183.235 22.4016C183.235 24.2271 183.5 25.1286 183.996 26.1653C184.475 27.202 185.128 27.9737 186.002 28.5259C186.841 29.0555 187.787 29.3259 188.807 29.3259C189.962 29.3259 191.219 28.8865 192.013 28.2104C193.179 27.2189 194.329 25.6132 194.656 25.1343C194.706 25.0554 194.813 25.0328 194.892 25.0835L194.881 25.0947L195.901 25.7258C195.985 25.7765 196.013 25.8779 195.963 25.9624C195.602 26.5765 194.132 28.971 192.058 30.6951C190.402 32.0754 188.807 32.729 186.931 32.7966H186.638C182.762 32.7966 180.621 29.8274 179.911 28.3625C179.212 26.9709 178.863 25.444 178.863 23.6692C178.863 21.8944 179.472 19.0436 180.638 17.0266C181.872 14.9307 183.398 13.3081 185.32 12.0742C187.247 10.7896 189.185 10.1641 191.241 10.1641Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               fillRule: "evenodd",
@@ -2246,7 +2988,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               fillRule: "evenodd",
@@ -2255,42 +2997,42 @@ var Logo = /* @__PURE__ */ __name((props) => {
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M171.618 1.46484C173.313 1.46485 174.277 1.67352 175.466 2.05664C177.861 2.82509 178.843 3.38688 178.852 3.39185V9.83179L178.857 9.82056C178.857 9.91066 178.795 9.98385 178.705 9.99512L177.798 10.1079C177.714 10.1192 177.629 10.0684 177.607 9.98389C177.432 9.37539 176.643 6.95256 174.851 5.23413C173.758 4.18621 172.434 3.6792 170.806 3.6792C169.268 3.67921 168.304 4.01723 167.256 4.92432C166.276 5.72437 165.797 6.74425 165.797 7.87671C165.797 9.00916 166.057 9.80354 166.772 10.8008C167.397 11.6966 168.327 12.6263 169.454 13.4827L172.784 16.052C174.029 16.9929 175.049 18.1084 175.821 19.3591C176.576 20.5874 176.959 21.9509 176.959 23.4102C176.959 25.0046 176.451 26.7737 175.595 28.1372C174.665 29.5739 173.415 30.7009 171.871 31.4954C170.164 32.3743 167.995 32.7686 166.564 32.7686C164.547 32.7686 162.017 32.0361 162.017 32.0361C160 31.3826 158.681 30.712 158.337 30.5317C158.281 30.5035 158.247 30.4472 158.247 30.3796V23.4158C158.247 23.3257 158.321 23.2469 158.411 23.2412L159.318 23.168C159.402 23.1623 159.481 23.2129 159.504 23.2974C159.696 24.0185 160.648 27.337 162.473 28.8076C163.887 29.9457 165.431 30.5037 167.2 30.5037C168.969 30.5037 169.42 30.2389 170.248 29.76L170.265 29.7485C171.139 29.2246 171.809 28.5653 172.265 27.7935C172.767 26.9765 173.02 26.1145 173.02 25.1792C173.02 24.244 172.71 23.2806 172.13 22.3848C171.556 21.4946 170.66 20.5536 169.538 19.6577L166.203 17.0886C164.901 16.0463 163.893 14.9758 163.127 13.8264C162.4 12.6996 162.034 11.4036 162.034 9.87109C162.034 8.33862 162.507 6.80621 163.358 5.5498C164.265 4.28211 165.454 3.27342 166.902 2.55225C168.389 1.83111 169.922 1.46484 171.618 1.46484Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M81.4085 9.99512C81.4987 9.99512 81.589 10.0402 81.589 10.1304V26.9033C81.589 29.5288 82.22 31.4276 82.5355 32.0586C82.5805 32.1487 82.5354 32.2839 82.4002 32.2839H75.0758C74.9406 32.2839 74.8954 32.1487 74.9405 32.0586C75.256 31.4726 75.8871 29.7485 75.8871 26.8582V15.3757C75.8871 12.7503 75.3068 10.8516 74.9857 10.2205C74.9406 10.1303 74.9856 9.9952 75.1207 9.99512H81.4085Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M100.356 9.26831C102.796 9.26831 104.649 10.0345 105.962 11.6177C107.275 13.2009 107.906 15.4207 107.906 18.311V26.9033C107.906 29.5288 108.531 31.4276 108.852 32.0586C108.897 32.1487 108.852 32.2839 108.717 32.2839H101.483C101.348 32.2839 101.303 32.1487 101.348 32.0586C101.707 31.4742 102.291 29.7574 102.294 26.8806L102.26 26.9482V18.5815C102.26 16.8181 101.945 15.5052 101.263 14.6038C100.582 13.6967 99.6349 13.2459 98.232 13.2458C96.8291 13.2458 95.567 13.7417 94.4796 14.8291C93.6683 15.601 93.0315 16.5476 92.5357 17.7703C92.2202 18.5815 92.0399 19.4436 92.0399 20.345V26.9033C92.0399 29.5288 92.6712 31.4276 92.9867 32.0586C93.0317 32.1487 92.9865 32.2839 92.8514 32.2839H85.617C85.4818 32.2839 85.4367 32.1487 85.4818 32.0586C85.8424 31.4726 86.4283 29.7485 86.4283 26.8582V15.3757C86.4283 12.7503 85.8425 10.8516 85.5269 10.2205C85.4819 10.1303 85.527 9.99512 85.6622 9.99512H91.3582C91.4484 9.99512 91.5386 10.04 91.5387 10.1301V14.6038C91.5387 14.8742 91.899 14.9643 92.0343 14.739C93.2569 12.4797 96.2431 9.26833 100.356 9.26831Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M57.8011 1.0874C57.9363 1.08746 57.9364 1.22262 57.9364 1.31274C57.6716 1.94377 56.9896 4.02281 56.9896 6.96387V28.5315C56.9896 28.8019 57.215 29.0273 57.4854 29.0273H61.5985V29.033H61.6886C65.9874 29.033 70.8215 26.5428 71.909 25.9568C71.9992 25.9117 72.1344 25.9568 72.1344 26.092V32.1038C72.1342 32.1489 72.0443 32.2387 71.9542 32.2388H50.2962C50.1611 32.2387 50.161 32.1036 50.161 32.0134C50.3807 31.3823 51.0626 29.2132 51.0626 25.9116V7.00879C51.0626 4.02836 50.3863 1.94377 50.161 1.31274C50.1159 1.17755 50.2061 1.08743 50.2962 1.0874H57.8011Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M140.725 9.89941C140.815 9.89948 140.905 9.98933 140.905 10.0344V14.7334L140.911 14.739C140.911 15.0095 141.176 15.0996 141.311 14.8743C142.894 11.8431 145.063 9.94434 147.644 9.94434H150.128C150.218 9.94434 150.309 10.0345 150.309 10.0796V14.6941C150.309 14.7842 150.218 14.8293 150.128 14.8293H146.196C144.387 14.8294 142.714 15.7307 141.361 17.1787C141.04 17.5393 140.866 17.99 140.866 18.4407V26.8076C140.866 29.4331 141.497 31.3262 141.812 31.9629C141.857 32.053 141.812 32.1882 141.677 32.1882H134.398C134.262 32.1882 134.217 32.053 134.262 31.9629C134.578 31.3769 135.209 29.6528 135.209 26.7625V15.28C135.209 12.6546 134.578 10.7615 134.307 10.1248C134.262 10.0346 134.307 9.89941 134.443 9.89941H140.725Z",
               fill: fillColor
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx26(
             "path",
             {
               d: "M78.3709 0C80.4049 0 82.0782 1.62841 82.0782 3.66235C82.0781 5.69624 80.4048 7.32446 78.3709 7.32446C76.3371 7.32444 74.7089 5.69623 74.7088 3.66235C74.7088 1.62842 76.337 2.46852e-05 78.3709 0Z",
@@ -2301,7 +3043,7 @@ var Logo = /* @__PURE__ */ __name((props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx22("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx26("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx26(
     "path",
     {
       d: "M38.2402 9.81371C38.2402 9.74309 38.204 9.68333 38.1895 9.65074C38.1569 9.63806 38.0972 9.60004 38.0266 9.60004H28.1578C28.1089 9.60004 28.0618 9.61996 28.0274 9.65436L22.3614 15.3094C22.327 15.3438 22.28 15.3638 22.2311 15.3638H11.8426C11.7937 15.3638 11.7466 15.3837 11.7122 15.4181L4.45458 22.663C4.33688 22.7789 4.42018 22.9799 4.58496 22.9799H13.9558C14.2292 22.9799 14.4501 23.2008 14.4501 23.4743V33.1946C14.4501 33.2471 14.4737 33.2942 14.5099 33.3286C14.5443 33.3648 14.5914 33.3883 14.6439 33.3883H24.3642C24.6376 33.3883 24.8585 33.6092 24.8585 33.8827V43.2535C24.8585 43.4183 25.0595 43.5016 25.1754 43.3839L32.4204 36.1262C32.4548 36.0918 32.4747 36.0448 32.4747 35.9959V25.6074C32.4747 25.5585 32.4946 25.5114 32.529 25.477L38.1841 19.8111C38.2185 19.7767 38.2384 19.7296 38.2384 19.6807V9.81371H38.2402ZM31.6979 24.2493C31.6979 24.5173 31.4806 24.7364 31.2108 24.7364H23.5892C23.3212 24.7364 23.1021 24.5191 23.1021 24.2493V16.6277C23.1021 16.3597 23.3193 16.1406 23.5892 16.1406H31.2108C31.4787 16.1406 31.6979 16.3579 31.6979 16.6277V24.2493Z",
@@ -2313,11 +3055,11 @@ var Logo = /* @__PURE__ */ __name((props) => {
 // src/components/coach-mark/primitive/index.tsx
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
 import { cva as cva9 } from "cva";
-import clsx17 from "clsx";
+import clsx19 from "clsx";
 import { forwardRef as forwardRef16 } from "react";
 
 // src/components/coach-mark/primitive/style.module.scss
-var style_module_default15 = {
+var style_module_default18 = {
   "anchor": "_anchor_1d9jc_1",
   "content": "_content_1d9jc_5",
   "overlay": "_overlay_1d9jc_14",
@@ -2325,20 +3067,20 @@ var style_module_default15 = {
 };
 
 // src/components/coach-mark/primitive/index.tsx
-import { IconCloseFill as IconCloseFill4 } from "@liner-fe/icon";
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { IconCloseFill as IconCloseFill3 } from "@liner-fe/icon";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var primitiveCoachMarkVariants = cva9({
-  base: style_module_default15.content
+  base: style_module_default18.content
 });
 var primitiveCoachMarkAnchorVariants = cva9({
-  base: style_module_default15.anchor
+  base: style_module_default18.anchor
 });
-var PrimitiveCoachMarkTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx23(PopoverPrimitive2.Trigger, { asChild: true, children: by }), "PrimitiveCoachMarkTrigger");
-var PrimitiveCoachMarkRoot = /* @__PURE__ */ __name(({ trigger, children, ...props }) => /* @__PURE__ */ jsxs12(PopoverPrimitive2.Root, { ...props, children: [
-  /* @__PURE__ */ jsx23(PrimitiveCoachMarkTrigger, { by: trigger }),
+var PrimitiveCoachMarkTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx27(PopoverPrimitive2.Trigger, { asChild: true, children: by }), "PrimitiveCoachMarkTrigger");
+var PrimitiveCoachMarkRoot = /* @__PURE__ */ __name(({ trigger, children, ...props }) => /* @__PURE__ */ jsxs14(PopoverPrimitive2.Root, { ...props, children: [
+  /* @__PURE__ */ jsx27(PrimitiveCoachMarkTrigger, { by: trigger }),
   children
 ] }), "PrimitiveCoachMarkRoot");
-var PrimitiveCoachMarkAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ jsx23(
+var PrimitiveCoachMarkAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ jsx27(
   "svg",
   {
     className,
@@ -2347,7 +3089,7 @@ var PrimitiveCoachMarkAnchor = /* @__PURE__ */ __name(({ className }) => /* @__P
     height: "24",
     viewBox: "0 0 10 24",
     fill: "none",
-    children: /* @__PURE__ */ jsx23(
+    children: /* @__PURE__ */ jsx27(
       "path",
       {
         fillRule: "evenodd",
@@ -2358,16 +3100,16 @@ var PrimitiveCoachMarkAnchor = /* @__PURE__ */ __name(({ className }) => /* @__P
     )
   }
 ), "PrimitiveCoachMarkAnchor");
-var PrimitiveCoachMarkClose = /* @__PURE__ */ __name(({ className, onClick }) => /* @__PURE__ */ jsx23(PopoverPrimitive2.Close, { asChild: true, className: clsx17(style_module_default15.close, className), onClick, children: /* @__PURE__ */ jsx23(IconCloseFill4, { fill: true, size: "xs", type: "neutral-label-primary" }) }), "PrimitiveCoachMarkClose");
-var PrimitiveCoachMarkContent = forwardRef16(({ children, className, container, ...rest }, ref) => /* @__PURE__ */ jsx23(PopoverPrimitive2.Portal, { container, children: /* @__PURE__ */ jsxs12(
+var PrimitiveCoachMarkClose = /* @__PURE__ */ __name(({ className, onClick }) => /* @__PURE__ */ jsx27(PopoverPrimitive2.Close, { asChild: true, className: clsx19(style_module_default18.close, className), onClick, children: /* @__PURE__ */ jsx27(IconCloseFill3, { fill: true, size: "xs", type: "neutral-label-primary" }) }), "PrimitiveCoachMarkClose");
+var PrimitiveCoachMarkContent = forwardRef16(({ children, className, container, ...rest }, ref) => /* @__PURE__ */ jsx27(PopoverPrimitive2.Portal, { container, children: /* @__PURE__ */ jsxs14(
   PopoverPrimitive2.Content,
   {
     ref,
-    className: clsx17(primitiveCoachMarkVariants(), className),
+    className: clsx19(primitiveCoachMarkVariants(), className),
     ...rest,
     children: [
       children,
-      /* @__PURE__ */ jsx23(PopoverPrimitive2.Arrow, { asChild: true, children: /* @__PURE__ */ jsx23(PrimitiveCoachMarkAnchor, { className: clsx17(primitiveCoachMarkAnchorVariants()) }) })
+      /* @__PURE__ */ jsx27(PopoverPrimitive2.Arrow, { asChild: true, children: /* @__PURE__ */ jsx27(PrimitiveCoachMarkAnchor, { className: clsx19(primitiveCoachMarkAnchorVariants()) }) })
     ]
   }
 ) }));
@@ -2379,10 +3121,10 @@ var PrimitiveCoachMark = Object.assign(PrimitiveCoachMarkRoot, {
 });
 
 // src/components/coach-mark/compact/index.tsx
-import { forwardRef as forwardRef18, useState as useState4 } from "react";
+import { forwardRef as forwardRef18, useState as useState6 } from "react";
 
 // src/components/coach-mark/compact/style.module.scss
-var style_module_default16 = {
+var style_module_default19 = {
   "content": "_content_mrnt5_1",
   "slideIn": "_slideIn_mrnt5_1",
   "closeButton": "_closeButton_mrnt5_20",
@@ -2394,14 +3136,14 @@ var style_module_default16 = {
 };
 
 // src/components/coach-mark/compact/index.tsx
-import clsx19 from "clsx";
+import clsx21 from "clsx";
 import { cva as cva11 } from "cva";
 
 // src/components/Tag/index.tsx
 import { forwardRef as forwardRef17 } from "react";
 
 // src/components/Tag/style.module.scss
-var style_module_default17 = {
+var style_module_default20 = {
   "tag": "_tag_b57yu_2",
   "s": "_s_b57yu_12",
   "m": "_m_b57yu_17",
@@ -2544,23 +3286,23 @@ var colorOptions = [
 
 // src/components/Tag/index.tsx
 import { cva as cva10 } from "cva";
-import clsx18 from "clsx";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import clsx20 from "clsx";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var tagVariants = cva10({
-  base: style_module_default17.tag,
+  base: style_module_default20.tag,
   variants: {
-    borderColor: arrayToStyleObject(colorOptions, style_module_default17, "border"),
+    borderColor: arrayToStyleObject(colorOptions, style_module_default20, "border"),
     size: {
-      s: style_module_default17.s,
-      m: style_module_default17.m,
-      l: style_module_default17.l
+      s: style_module_default20.s,
+      m: style_module_default20.m,
+      l: style_module_default20.l
     },
     thick: {
-      true: style_module_default17.thick
+      true: style_module_default20.thick
     },
     radius: {
-      square: style_module_default17.square,
-      rounded: style_module_default17.rounded
+      square: style_module_default20.square,
+      rounded: style_module_default20.rounded
     }
   }
 });
@@ -2576,14 +3318,14 @@ var Tag = forwardRef17(
     className,
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx28(
       Caption,
       {
         ref,
         size: 3,
         type: "normal",
         weight: "bold",
-        className: clsx18(tagVariants({ borderColor, size, thick, radius }), className),
+        className: clsx20(tagVariants({ borderColor, size, thick, radius }), className),
         color,
         style: { backgroundColor: `var(--${backgroundColor})`, ...rest.style },
         ...rest,
@@ -2595,47 +3337,47 @@ var Tag = forwardRef17(
 
 // src/components/coach-mark/compact/index.tsx
 import * as PopoverPrimitive3 from "@radix-ui/react-popover";
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 var compactCoachMarkVariants = cva11({
-  base: style_module_default16.content,
+  base: style_module_default19.content,
   variants: {
     level: {
-      brand: style_module_default16.brand,
-      "inverse-static": style_module_default16["inverse-static"],
-      inverse: style_module_default16.inverse
+      brand: style_module_default19.brand,
+      "inverse-static": style_module_default19["inverse-static"],
+      inverse: style_module_default19.inverse
     }
   }
 });
 var CompactCoachMarkRoot = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ jsx25(PrimitiveCoachMark, { ...props });
+  return /* @__PURE__ */ jsx29(PrimitiveCoachMark, { ...props });
 }, "CompactCoachMarkRoot");
 var CompactCoachMarkContent = forwardRef18(
   ({ tag, title, level = "brand", className, side = "top", sideOffset = -15, onClose, ...props }, ref) => {
-    const [isHover, setIsHover] = useState4(false);
-    return /* @__PURE__ */ jsxs13(
+    const [isHover, setIsHover] = useState6(false);
+    return /* @__PURE__ */ jsxs15(
       PrimitiveCoachMark.Content,
       {
         ref,
-        className: clsx19(compactCoachMarkVariants({ level }), className),
+        className: clsx21(compactCoachMarkVariants({ level }), className),
         side,
         sideOffset,
         onMouseEnter: () => setIsHover(true),
         onMouseLeave: () => setIsHover(false),
         ...props,
         children: [
-          tag && /* @__PURE__ */ jsx25(Tag, { color: "neutral-label-primary", backgroundColor: "neutral-container-lowest", children: tag }),
-          /* @__PURE__ */ jsx25(
+          tag && /* @__PURE__ */ jsx29(Tag, { color: "neutral-label-primary", backgroundColor: "neutral-container-lowest", children: tag }),
+          /* @__PURE__ */ jsx29(
             Caption,
             {
               size: 2,
               type: "normal",
               weight: "bold",
               color: "inverse-label-static-primary",
-              className: style_module_default16.main,
+              className: style_module_default19.main,
               children: title
             }
           ),
-          isHover && /* @__PURE__ */ jsx25(PrimitiveCoachMark.Close, { className: style_module_default16.close, onClick: onClose })
+          isHover && /* @__PURE__ */ jsx29(PrimitiveCoachMark.Close, { className: style_module_default19.close, onClick: onClose })
         ]
       }
     );
@@ -2651,7 +3393,7 @@ var CompactCoachMark = Object.assign(CompactCoachMarkRoot, {
 import * as PopoverPrimitive4 from "@radix-ui/react-popover";
 
 // src/components/coach-mark/main/style.module.scss
-var style_module_default18 = {
+var style_module_default21 = {
   "content": "_content_1w9jj_1",
   "slideIn": "_slideIn_1w9jj_1",
   "brand": "_brand_1w9jj_19",
@@ -2672,20 +3414,20 @@ var style_module_default18 = {
 import {
   forwardRef as forwardRef19,
   isValidElement,
-  useEffect as useEffect2
+  useEffect as useEffect4
 } from "react";
 import { IconClose } from "@liner-fe/icon";
 import { cva as cva12 } from "cva";
-import clsx20 from "clsx";
+import clsx22 from "clsx";
 import { Illust } from "@liner-fe/illust";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var coachMarkVariants = cva12({
-  base: style_module_default18.content,
+  base: style_module_default21.content,
   variants: {
     level: {
-      brand: style_module_default18.brand,
-      "inverse-static": style_module_default18["inverse-static"],
-      inverse: style_module_default18.inverse
+      brand: style_module_default21.brand,
+      "inverse-static": style_module_default21["inverse-static"],
+      inverse: style_module_default21.inverse
     }
   }
 });
@@ -2696,7 +3438,7 @@ var coachMarkLevelButtonLevelMap = {
 };
 var CoachMarkRoot = /* @__PURE__ */ __name((props) => {
   const { children } = props;
-  useEffect2(() => {
+  useEffect4(() => {
     if (isValidElement(children) && "image" in children.props) {
       const imageProps = children.props.image;
       if (imageProps?.src) {
@@ -2705,7 +3447,7 @@ var CoachMarkRoot = /* @__PURE__ */ __name((props) => {
       }
     }
   }, []);
-  return /* @__PURE__ */ jsx26(PrimitiveCoachMark, { ...props });
+  return /* @__PURE__ */ jsx30(PrimitiveCoachMark, { ...props });
 }, "CoachMarkRoot");
 var CoachMarkContent = forwardRef19(
   ({
@@ -2725,31 +3467,31 @@ var CoachMarkContent = forwardRef19(
     secondaryButton,
     onClose,
     ...rest
-  }, ref) => /* @__PURE__ */ jsxs14(
+  }, ref) => /* @__PURE__ */ jsxs16(
     PrimitiveCoachMark.Content,
     {
       ref,
-      className: clsx20(coachMarkVariants({ level }), className),
+      className: clsx22(coachMarkVariants({ level }), className),
       style: { width: width ? `${width}px` : void 0 },
       side,
       sideOffset,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx26(PopoverPrimitive4.Close, { asChild: true, children: /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx30(PopoverPrimitive4.Close, { asChild: true, children: /* @__PURE__ */ jsx30(
           IconButton,
           {
             icon: { icon: IconClose },
             size: "s",
             level: "inverse-static",
-            className: style_module_default18.closeButton,
+            className: style_module_default21.closeButton,
             onClick: onClose
           }
         ) }),
-        /* @__PURE__ */ jsxs14("header", { className: style_module_default18.top, children: [
-          illust && /* @__PURE__ */ jsx26(Illust, { width: 72, ...illust }),
-          /* @__PURE__ */ jsxs14("div", { className: style_module_default18.main, children: [
-            /* @__PURE__ */ jsxs14("div", { className: style_module_default18.title, children: [
-              tag && /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsxs16("header", { className: style_module_default21.top, children: [
+          illust && /* @__PURE__ */ jsx30(Illust, { width: 72, ...illust }),
+          /* @__PURE__ */ jsxs16("div", { className: style_module_default21.main, children: [
+            /* @__PURE__ */ jsxs16("div", { className: style_module_default21.title, children: [
+              tag && /* @__PURE__ */ jsx30(
                 Tag,
                 {
                   color: "neutral-label-static-primary",
@@ -2757,8 +3499,8 @@ var CoachMarkContent = forwardRef19(
                   children: tag
                 }
               ),
-              icon && /* @__PURE__ */ jsx26(icon.icon, { size: "xs", fill: icon.fill, type: "inverse-label-static-primary" }),
-              title && /* @__PURE__ */ jsx26(
+              icon && /* @__PURE__ */ jsx30(icon.icon, { size: "xs", fill: icon.fill, type: "inverse-label-static-primary" }),
+              title && /* @__PURE__ */ jsx30(
                 Paragraph,
                 {
                   size: 4,
@@ -2769,38 +3511,38 @@ var CoachMarkContent = forwardRef19(
                 }
               )
             ] }),
-            image && /* @__PURE__ */ jsx26("div", { className: style_module_default18["image-container"], children: /* @__PURE__ */ jsx26(
+            image && /* @__PURE__ */ jsx30("div", { className: style_module_default21["image-container"], children: /* @__PURE__ */ jsx30(
               "img",
               {
-                className: style_module_default18.image,
+                className: style_module_default21.image,
                 src: image.src ?? "",
                 alt: image.alt ?? "",
                 width: 280,
                 height: 160
               }
             ) }),
-            description && /* @__PURE__ */ jsx26(
+            description && /* @__PURE__ */ jsx30(
               Caption,
               {
                 size: 2,
                 type: "normal",
                 weight: "regular",
                 color: "inverse-label-static-secondary",
-                className: style_module_default18.description,
+                className: style_module_default21.description,
                 children: description
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs14("footer", { className: style_module_default18.footer, children: [
-          step ? /* @__PURE__ */ jsxs14(Caption, { size: 2, type: "normal", weight: "regular", color: "inverse-label-static-secondary", children: [
+        /* @__PURE__ */ jsxs16("footer", { className: style_module_default21.footer, children: [
+          step ? /* @__PURE__ */ jsxs16(Caption, { size: 2, type: "normal", weight: "regular", color: "inverse-label-static-secondary", children: [
             step.current,
             " / ",
             step.total
-          ] }) : /* @__PURE__ */ jsx26("div", { className: style_module_default18.empty }),
-          /* @__PURE__ */ jsxs14("div", { className: style_module_default18.buttonGroup, children: [
-            secondaryButton && /* @__PURE__ */ jsx26(Button, { size: "s", level: "inverse-static", ...secondaryButton }),
-            primaryButton && /* @__PURE__ */ jsx26(Button, { size: "s", level: coachMarkLevelButtonLevelMap[level], ...primaryButton })
+          ] }) : /* @__PURE__ */ jsx30("div", { className: style_module_default21.empty }),
+          /* @__PURE__ */ jsxs16("div", { className: style_module_default21.buttonGroup, children: [
+            secondaryButton && /* @__PURE__ */ jsx30(Button, { size: "s", level: "inverse-static", ...secondaryButton }),
+            primaryButton && /* @__PURE__ */ jsx30(Button, { size: "s", level: coachMarkLevelButtonLevelMap[level], ...primaryButton })
           ] })
         ] })
       ]
@@ -2817,7 +3559,7 @@ var CoachMark = Object.assign(CoachMarkRoot, {
 import { forwardRef as forwardRef20 } from "react";
 
 // src/components/Badge/style.module.scss
-var style_module_default19 = {
+var style_module_default22 = {
   "badge": "_badge_f8fzb_1",
   "s": "_s_f8fzb_10",
   "m": "_m_f8fzb_15",
@@ -2839,8 +3581,8 @@ var style_module_default19 = {
 
 // src/components/Badge/index.tsx
 import { cva as cva13 } from "cva";
-import clsx21 from "clsx";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import clsx23 from "clsx";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var badgeSizeIconSizeMap = {
   s: "xxs",
   m: "xs",
@@ -2852,20 +3594,20 @@ var badgeSizeTypoMap = {
   l: ["lp-sys-typo-caption1-normal-regular", "lp-sys-typo-caption1-normal-medium"]
 };
 var badgeBase = cva13({
-  base: style_module_default19.badge,
+  base: style_module_default22.badge,
   variants: {
     size: {
-      s: style_module_default19.s,
-      m: style_module_default19.m,
-      l: style_module_default19.l
+      s: style_module_default22.s,
+      m: style_module_default22.m,
+      l: style_module_default22.l
     }
   }
 });
 function getBgClass(variant, color) {
-  if (variant === "subtle") return style_module_default19.subtle;
-  if (variant === "outlined") return style_module_default19.outlined;
-  if (variant === "fill") return color === "accent" ? style_module_default19["fill-accent"] : style_module_default19["fill-primary"];
-  return style_module_default19["inverse-primary"];
+  if (variant === "subtle") return style_module_default22.subtle;
+  if (variant === "outlined") return style_module_default22.outlined;
+  if (variant === "fill") return color === "accent" ? style_module_default22["fill-accent"] : style_module_default22["fill-primary"];
+  return style_module_default22["inverse-primary"];
 }
 __name(getBgClass, "getBgClass");
 function getIconType(variant, color) {
@@ -2889,22 +3631,22 @@ function getIconType(variant, color) {
 }
 __name(getIconType, "getIconType");
 function getTextClass(variant, color) {
-  if (variant === "inverse") return style_module_default19["text-primary-inverse"];
+  if (variant === "inverse") return style_module_default22["text-primary-inverse"];
   switch (color) {
     case "neutral":
-      return style_module_default19["text-neutral"];
+      return style_module_default22["text-neutral"];
     case "neutral-secondary":
-      return style_module_default19["text-neutral-secondary"];
+      return style_module_default22["text-neutral-secondary"];
     case "primary":
-      return style_module_default19["text-primary"];
+      return style_module_default22["text-primary"];
     case "caution":
-      return style_module_default19["text-caution"];
+      return style_module_default22["text-caution"];
     case "error":
-      return style_module_default19["text-error"];
+      return style_module_default22["text-error"];
     case "accent":
-      return style_module_default19["text-accent"];
+      return style_module_default22["text-accent"];
     default:
-      return style_module_default19["text-neutral"];
+      return style_module_default22["text-neutral"];
   }
 }
 __name(getTextClass, "getTextClass");
@@ -2924,11 +3666,11 @@ var Badge2 = forwardRef20(
     const typoClass = badgeSizeTypoMap[size][+thick];
     const resolvedVariant = variant;
     const resolvedColor = color;
-    return /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsxs17(
       "span",
       {
         ref,
-        className: clsx21(
+        className: clsx23(
           badgeBase({ size }),
           typoClass,
           getBgClass(resolvedVariant, resolvedColor),
@@ -2937,7 +3679,7 @@ var Badge2 = forwardRef20(
         ),
         ...rest,
         children: [
-          !!leftIcon && /* @__PURE__ */ jsx27(
+          !!leftIcon && /* @__PURE__ */ jsx31(
             leftIcon.icon,
             {
               size: iconSize,
@@ -2945,8 +3687,8 @@ var Badge2 = forwardRef20(
               ...leftIcon
             }
           ),
-          /* @__PURE__ */ jsx27("span", { className: style_module_default19.text, children }),
-          !!rightIcon && /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx31("span", { className: style_module_default22.text, children }),
+          !!rightIcon && /* @__PURE__ */ jsx31(
             rightIcon.icon,
             {
               size: iconSize,
@@ -2986,12 +3728,14 @@ export {
   PrimitiveCoachMark,
   Radio,
   Select,
+  SingleSnackbar,
+  Snackbar,
   TEXT_LEVEL_OPTIONS,
   TEXT_SIZE_OPTIONS,
   Tag,
   TextButton,
   Textfield,
-  Title,
+  Title2 as Title,
   Toaster,
   Tooltip,
   Typography,
@@ -2999,5 +3743,7 @@ export {
   isEmptyObject,
   objectToArray,
   rootMediaStyle,
-  toast
+  snackbarAtom,
+  useSnackbar,
+  useToast
 };