@landtrustinc/design-system 1.2.67 → 1.2.68

package/dist/index.js

@@ -65,6 +65,7 @@ __export(src_exports, {
   LayoutTokens: () => LayoutTokens,
   ListingChat: () => ListingChat_default,
   Logo: () => Logo_default,
+  LottieAnimations: () => LottieAnimations_default,
   MarkdownContent: () => MarkdownContent_default,
   MessageBubble: () => MessageBubble_default,
   Modal: () => Modal_default,
@@ -94,6 +95,7 @@ __export(src_exports, {
   WidgetPanel: () => WidgetPanel,
   WidgetTrigger: () => WidgetTrigger,
   globalStyles: () => globalStyles,
+  lottieAnimations: () => lottieAnimations,
   styles: () => styles_exports,
   useBottomDrawer: () => useBottomDrawer_default,
   useBottomDrawerHook: () => useBottomDrawer
@@ -7061,7 +7063,9 @@ var useChatScrollControl = ({
       }
       const shouldAutoScroll = userJustSentMessageRef.current;
       if (!shouldAutoScroll) {
-        setShowScrollButton(true);
+        const atBottomNow = isScrolledToBottom(el);
+        setIsAtBottom(atBottomNow);
+        setShowScrollButton(enableScrollToBottomControl && !atBottomNow);
         return;
       }
       requestAnimationFrame(() => {
@@ -9845,14 +9849,541 @@ var Logo = ({
 };
 var Logo_default = Logo;
 
+// src/LottieAnimations/LottieAnimations.tsx
+var import_react66 = require("react");
+
+// src/LottieAnimations/animations/loading.ts
+var loadingAnimationData = {
+  nm: "Loading Dots",
+  ddd: 0,
+  h: 1080,
+  w: 1920,
+  meta: { g: "@lottiefiles/toolkit-js 0.26.1" },
+  layers: [
+    {
+      ty: 4,
+      nm: "Dot4",
+      sr: 1,
+      st: 0,
+      op: 360,
+      ip: 0,
+      hd: false,
+      ddd: 0,
+      bm: 0,
+      hasMask: false,
+      ao: 0,
+      ks: {
+        a: { a: 0, k: [-284, 92, 0], ix: 1 },
+        s: {
+          a: 1,
+          k: [
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [50, 50, 100],
+              t: 25
+            },
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [75, 75, 100],
+              t: 39
+            },
+            { s: [50, 50, 100], t: 55 }
+          ],
+          ix: 6
+        },
+        sk: { a: 0, k: 0 },
+        p: {
+          a: 1,
+          k: [
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [1142, 540, 0],
+              t: 25,
+              ti: [0, 0, 0],
+              to: [0, -6.667, 0]
+            },
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [1142, 500, 0],
+              t: 39,
+              ti: [0, -6.667, 0],
+              to: [0, 0, 0]
+            },
+            { s: [1142, 540, 0], t: 55 }
+          ],
+          ix: 2
+        },
+        r: { a: 0, k: 0, ix: 10 },
+        sa: { a: 0, k: 0 },
+        o: {
+          a: 1,
+          k: [
+            { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [25], t: 25 },
+            { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [100], t: 39 },
+            { s: [25], t: 55 }
+          ],
+          ix: 11
+        }
+      },
+      ef: [],
+      shapes: [
+        {
+          ty: "gr",
+          bm: 0,
+          hd: false,
+          mn: "ADBE Vector Group",
+          nm: "Ellipse 1",
+          ix: 1,
+          cix: 2,
+          np: 3,
+          it: [
+            {
+              ty: "el",
+              bm: 0,
+              hd: false,
+              mn: "ADBE Vector Shape - Ellipse",
+              nm: "Ellipse Path 1",
+              d: 1,
+              p: { a: 0, k: [0, 0], ix: 3 },
+              s: { a: 0, k: [120, 120], ix: 2 }
+            },
+            {
+              ty: "fl",
+              bm: 0,
+              hd: false,
+              mn: "ADBE Vector Graphic - Fill",
+              nm: "Fill 1",
+              c: { a: 0, k: [0.0902, 0.2196, 0.3922], ix: 4 },
+              r: 1,
+              o: { a: 0, k: 100, ix: 5 }
+            },
+            {
+              ty: "tr",
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              sk: { a: 0, k: 0, ix: 4 },
+              p: { a: 0, k: [-284, 92], ix: 2 },
+              r: { a: 0, k: 0, ix: 6 },
+              sa: { a: 0, k: 0, ix: 5 },
+              o: { a: 0, k: 100, ix: 7 }
+            }
+          ]
+        }
+      ],
+      ind: 1
+    },
+    {
+      ty: 4,
+      nm: "Dot3",
+      sr: 1,
+      st: 0,
+      op: 360,
+      ip: 0,
+      hd: false,
+      ddd: 0,
+      bm: 0,
+      hasMask: false,
+      ao: 0,
+      ks: {
+        a: { a: 0, k: [-284, 92, 0], ix: 1 },
+        s: {
+          a: 1,
+          k: [
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [50, 50, 100],
+              t: 17
+            },
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [75, 75, 100],
+              t: 31
+            },
+            { s: [50, 50, 100], t: 47 }
+          ],
+          ix: 6
+        },
+        sk: { a: 0, k: 0 },
+        p: {
+          a: 1,
+          k: [
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [1022, 540, 0],
+              t: 17,
+              ti: [0, 0, 0],
+              to: [0, -6.667, 0]
+            },
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [1022, 500, 0],
+              t: 31,
+              ti: [0, -6.667, 0],
+              to: [0, 0, 0]
+            },
+            { s: [1022, 540, 0], t: 47 }
+          ],
+          ix: 2
+        },
+        r: { a: 0, k: 0, ix: 10 },
+        sa: { a: 0, k: 0 },
+        o: {
+          a: 1,
+          k: [
+            { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [25], t: 17 },
+            { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [100], t: 31 },
+            { s: [25], t: 47 }
+          ],
+          ix: 11
+        }
+      },
+      ef: [],
+      shapes: [
+        {
+          ty: "gr",
+          bm: 0,
+          hd: false,
+          mn: "ADBE Vector Group",
+          nm: "Ellipse 1",
+          ix: 1,
+          cix: 2,
+          np: 3,
+          it: [
+            {
+              ty: "el",
+              bm: 0,
+              hd: false,
+              mn: "ADBE Vector Shape - Ellipse",
+              nm: "Ellipse Path 1",
+              d: 1,
+              p: { a: 0, k: [0, 0], ix: 3 },
+              s: { a: 0, k: [120, 120], ix: 2 }
+            },
+            {
+              ty: "fl",
+              bm: 0,
+              hd: false,
+              mn: "ADBE Vector Graphic - Fill",
+              nm: "Fill 1",
+              c: { a: 0, k: [0.0902, 0.2196, 0.3922], ix: 4 },
+              r: 1,
+              o: { a: 0, k: 100, ix: 5 }
+            },
+            {
+              ty: "tr",
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              sk: { a: 0, k: 0, ix: 4 },
+              p: { a: 0, k: [-284, 92], ix: 2 },
+              r: { a: 0, k: 0, ix: 6 },
+              sa: { a: 0, k: 0, ix: 5 },
+              o: { a: 0, k: 100, ix: 7 }
+            }
+          ]
+        }
+      ],
+      ind: 2
+    },
+    {
+      ty: 4,
+      nm: "Dot2",
+      sr: 1,
+      st: 0,
+      op: 360,
+      ip: 0,
+      hd: false,
+      ddd: 0,
+      bm: 0,
+      hasMask: false,
+      ao: 0,
+      ks: {
+        a: { a: 0, k: [-284, 92, 0], ix: 1 },
+        s: {
+          a: 1,
+          k: [
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [50, 50, 100],
+              t: 9
+            },
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [75, 75, 100],
+              t: 23
+            },
+            { s: [50, 50, 100], t: 39 }
+          ],
+          ix: 6
+        },
+        sk: { a: 0, k: 0 },
+        p: {
+          a: 1,
+          k: [
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [902, 540, 0],
+              t: 9,
+              ti: [0, 0, 0],
+              to: [0, -6.667, 0]
+            },
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [902, 500, 0],
+              t: 23,
+              ti: [0, 0, 0],
+              to: [0, 0, 0]
+            },
+            { s: [902, 540, 0], t: 39 }
+          ],
+          ix: 2
+        },
+        r: { a: 0, k: 0, ix: 10 },
+        sa: { a: 0, k: 0 },
+        o: {
+          a: 1,
+          k: [
+            { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [25], t: 9 },
+            { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [100], t: 23 },
+            { s: [25], t: 39 }
+          ],
+          ix: 11
+        }
+      },
+      ef: [],
+      shapes: [
+        {
+          ty: "gr",
+          bm: 0,
+          hd: false,
+          mn: "ADBE Vector Group",
+          nm: "Ellipse 1",
+          ix: 1,
+          cix: 2,
+          np: 3,
+          it: [
+            {
+              ty: "el",
+              bm: 0,
+              hd: false,
+              mn: "ADBE Vector Shape - Ellipse",
+              nm: "Ellipse Path 1",
+              d: 1,
+              p: { a: 0, k: [0, 0], ix: 3 },
+              s: { a: 0, k: [120, 120], ix: 2 }
+            },
+            {
+              ty: "fl",
+              bm: 0,
+              hd: false,
+              mn: "ADBE Vector Graphic - Fill",
+              nm: "Fill 1",
+              c: { a: 0, k: [0.0902, 0.2196, 0.3922], ix: 4 },
+              r: 1,
+              o: { a: 0, k: 100, ix: 5 }
+            },
+            {
+              ty: "tr",
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              sk: { a: 0, k: 0, ix: 4 },
+              p: { a: 0, k: [-284, 92], ix: 2 },
+              r: { a: 0, k: 0, ix: 6 },
+              sa: { a: 0, k: 0, ix: 5 },
+              o: { a: 0, k: 100, ix: 7 }
+            }
+          ]
+        }
+      ],
+      ind: 3
+    },
+    {
+      ty: 4,
+      nm: "Dot1",
+      sr: 1,
+      st: 0,
+      op: 360,
+      ip: 0,
+      hd: false,
+      ddd: 0,
+      bm: 0,
+      hasMask: false,
+      ao: 0,
+      ks: {
+        a: { a: 0, k: [-284, 92, 0], ix: 1 },
+        s: {
+          a: 1,
+          k: [
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [50, 50, 100],
+              t: 0
+            },
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [75, 75, 100],
+              t: 14
+            },
+            { s: [50, 50, 100], t: 30 }
+          ],
+          ix: 6
+        },
+        sk: { a: 0, k: 0 },
+        p: {
+          a: 1,
+          k: [
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [782, 540, 0],
+              t: 0,
+              ti: [0, 0, 0],
+              to: [0, -6.667, 0]
+            },
+            {
+              o: { x: 0.333, y: 0 },
+              i: { x: 0.667, y: 1 },
+              s: [782, 500, 0],
+              t: 14,
+              ti: [0, -6.667, 0],
+              to: [0, 0, 0]
+            },
+            { s: [782, 540, 0], t: 30 }
+          ],
+          ix: 2
+        },
+        r: { a: 0, k: 0, ix: 10 },
+        sa: { a: 0, k: 0 },
+        o: {
+          a: 1,
+          k: [
+            { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [25], t: 0 },
+            { o: { x: 0.333, y: 0 }, i: { x: 0.667, y: 1 }, s: [100], t: 14 },
+            { s: [25], t: 30 }
+          ],
+          ix: 11
+        }
+      },
+      ef: [],
+      shapes: [
+        {
+          ty: "gr",
+          bm: 0,
+          hd: false,
+          mn: "ADBE Vector Group",
+          nm: "Ellipse 1",
+          ix: 1,
+          cix: 2,
+          np: 3,
+          it: [
+            {
+              ty: "el",
+              bm: 0,
+              hd: false,
+              mn: "ADBE Vector Shape - Ellipse",
+              nm: "Ellipse Path 1",
+              d: 1,
+              p: { a: 0, k: [0, 0], ix: 3 },
+              s: { a: 0, k: [120, 120], ix: 2 }
+            },
+            {
+              ty: "fl",
+              bm: 0,
+              hd: false,
+              mn: "ADBE Vector Graphic - Fill",
+              nm: "Fill 1",
+              c: { a: 0, k: [0.0902, 0.2196, 0.3922], ix: 4 },
+              r: 1,
+              o: { a: 0, k: 100, ix: 5 }
+            },
+            {
+              ty: "tr",
+              a: { a: 0, k: [0, 0], ix: 1 },
+              s: { a: 0, k: [100, 100], ix: 3 },
+              sk: { a: 0, k: 0, ix: 4 },
+              p: { a: 0, k: [-284, 92], ix: 2 },
+              r: { a: 0, k: 0, ix: 6 },
+              sa: { a: 0, k: 0, ix: 5 },
+              o: { a: 0, k: 100, ix: 7 }
+            }
+          ]
+        }
+      ],
+      ind: 4
+    }
+  ],
+  v: "5.7.11",
+  fr: 60,
+  op: 81,
+  ip: 0,
+  assets: []
+};
+
+// src/LottieAnimations/LottieAnimations.tsx
+var import_jsx_runtime260 = require("@emotion/react/jsx-runtime");
+var lottieAnimations = {
+  loading: loadingAnimationData
+};
+var LottieAnimations = ({
+  animation = "loading",
+  animationData,
+  size,
+  loop = true,
+  autoPlay = true,
+  style,
+  ...props
+}) => {
+  const [LottieComponent, setLottieComponent] = (0, import_react66.useState)(null);
+  (0, import_react66.useEffect)(() => {
+    let isMounted = true;
+    import("lottie-react").then((module2) => {
+      if (isMounted) {
+        setLottieComponent(() => module2.default);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  const sizeValue = typeof size === "number" ? `${size}px` : size;
+  const mergedStyle = sizeValue !== void 0 ? { width: sizeValue, height: sizeValue, ...style } : style;
+  if (!LottieComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+    LottieComponent,
+    {
+      animationData: animationData != null ? animationData : lottieAnimations[animation],
+      loop,
+      autoPlay,
+      style: mergedStyle,
+      ...props
+    }
+  );
+};
+var LottieAnimations_default = LottieAnimations;
+
 // src/Navigation/Navigation.styles.ts
-var import_react66 = require("@emotion/react");
-var navigationStyles = import_react66.css`
+var import_react67 = require("@emotion/react");
+var navigationStyles = import_react67.css`
   width: 100%;
   background-color: white;
   border-bottom: 1px solid #e5e5e5;
 `;
-var hamburgerButtonStyles = import_react66.css`
+var hamburgerButtonStyles = import_react67.css`
   cursor: pointer;
   &:focus {
     outline: 2px solid #4f46e5;
@@ -9863,7 +10394,7 @@ var hamburgerButtonStyles = import_react66.css`
     display: none;
   }
 `;
-var centeredLogoStyles = import_react66.css`
+var centeredLogoStyles = import_react67.css`
   transform: translate(-50%, -50%);
   max-width: 150px;
 
@@ -9871,27 +10402,27 @@ var centeredLogoStyles = import_react66.css`
     display: none;
   }
 `;
-var desktopLogoStyles = import_react66.css`
+var desktopLogoStyles = import_react67.css`
   display: none;
 
   @media (min-width: 768px) {
     display: block;
   }
 `;
-var containerStyles5 = import_react66.css`
+var containerStyles5 = import_react67.css`
   @media (min-width: 768px) {
     justify-content: space-between;
     position: static;
   }
 `;
-var logoStyles2 = import_react66.css`
+var logoStyles2 = import_react67.css`
   width: 100%;
 
   @media (min-width: 768px) {
     width: initial;
   }
 `;
-var desktopNavStyles = import_react66.css`
+var desktopNavStyles = import_react67.css`
   display: none;
 
   @media (min-width: 768px) {
@@ -9900,7 +10431,7 @@ var desktopNavStyles = import_react66.css`
     gap: 32px;
   }
 `;
-var navLinksStyles = import_react66.css`
+var navLinksStyles = import_react67.css`
   display: flex;
   align-items: center;
   gap: 24px;
@@ -9908,7 +10439,7 @@ var navLinksStyles = import_react66.css`
   margin: 0;
   padding: 0;
 `;
-var navLinkStyles = import_react66.css`
+var navLinkStyles = import_react67.css`
   text-decoration: none;
   color: #374151;
   font-weight: 500;
@@ -9924,7 +10455,7 @@ var navLinkStyles = import_react66.css`
     outline-offset: 2px;
   }
 `;
-var avatarPlaceholderStyles = import_react66.css`
+var avatarPlaceholderStyles = import_react67.css`
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -9949,7 +10480,7 @@ var avatarPlaceholderStyles = import_react66.css`
 `;
 
 // src/Navigation/Navigation.tsx
-var import_jsx_runtime260 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime261 = require("@emotion/react/jsx-runtime");
 var Navigation = ({
   onMenuToggle,
   className,
@@ -9963,7 +10494,7 @@ var Navigation = ({
   onAvatarClick,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Box_default, { css: navigationStyles, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { css: navigationStyles, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -9972,7 +10503,7 @@ var Navigation = ({
       position: "relative",
       css: containerStyles5,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
           Box_default,
           {
             as: "button",
@@ -9984,11 +10515,11 @@ var Navigation = ({
             border: "none",
             padding: space[2],
             css: hamburgerButtonStyles,
-            children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Icon_default, { variant: "Bars", size: "large" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Icon_default, { variant: "Bars", size: "large" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Box_default, { css: desktopLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Logo_default, { variant: logoVariant, theme: logoTheme }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Box_default, { position: "absolute", left: "50%", top: "50%", css: centeredLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { css: desktopLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Logo_default, { variant: logoVariant, theme: logoTheme }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { position: "absolute", left: "50%", top: "50%", css: centeredLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
           Logo_default,
           {
             variant: logoVariant,
@@ -9997,8 +10528,8 @@ var Navigation = ({
             css: logoStyles2
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(Box_default, { css: desktopNavStyles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Box_default, { as: "nav", children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Box_default, { as: "ul", css: navLinksStyles, children: navLinks.map((link) => /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Box_default, { as: "li", children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(Box_default, { css: desktopNavStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { as: "nav", children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { as: "ul", css: navLinksStyles, children: navLinks.map((link) => /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { as: "li", children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
             "a",
             {
               href: link.href,
@@ -10007,7 +10538,7 @@ var Navigation = ({
               children: link.label
             }
           ) }, link.href)) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
             Box_default,
             {
               as: "button",
@@ -10029,21 +10560,21 @@ var Navigation_default = Navigation;
 var import_react_loading_skeleton2 = __toESM(require("react-loading-skeleton"));
 
 // src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
 
 // src/ScrollingCarousel/context/CarouselContext.tsx
-var import_react67 = __toESM(require("react"));
-var CarouselContext = import_react67.default.createContext(
+var import_react68 = __toESM(require("react"));
+var CarouselContext = import_react68.default.createContext(
   null
 );
 
 // src/ScrollingCarousel/ScrollingCarousel.styles.ts
-var import_react68 = require("@emotion/react");
-var carouselRoot = import_react68.css`
+var import_react69 = require("@emotion/react");
+var carouselRoot = import_react69.css`
   position: relative;
 `;
-var carousel = (gap2) => import_react68.css`
+var carousel = (gap2) => import_react69.css`
   display: flex;
   overflow-y: hidden;
   overflow-x: scroll;
@@ -10056,7 +10587,7 @@ var carousel = (gap2) => import_react68.css`
     display: none;
   }
 `;
-var step = (itemWidth) => import_react68.css`
+var step = (itemWidth) => import_react69.css`
   scroll-snap-align: center;
   flex-basis: ${itemWidth || "100%"};
   flex-shrink: 0;
@@ -10066,7 +10597,7 @@ var step = (itemWidth) => import_react68.css`
     flex-basis: ${itemWidth || "100%"};
   }
 `;
-var controls = (position2) => import_react68.css`
+var controls = (position2) => import_react69.css`
   ${(position2 === "left-right" || position2 === "top-right") && `
     display: none;
 
@@ -10075,7 +10606,7 @@ var controls = (position2) => import_react68.css`
     }
   `}
 `;
-var iconWrapper = import_react68.css`
+var iconWrapper = import_react69.css`
   display: flex;
   width: var(--spacing-7);
   height: var(--spacing-7);
@@ -10085,7 +10616,7 @@ var iconWrapper = import_react68.css`
   justify-content: center;
   box-shadow: var(--shadow-md);
 `;
-var button = (position2) => import_react68.css`
+var button = (position2) => import_react69.css`
   background: transparent;
   border-color: transparent;
   outline: none;
@@ -10117,7 +10648,7 @@ var button = (position2) => import_react68.css`
     bottom: calc(-1 * var(--spacing-1));
   `}
 `;
-var buttonLeft = (position2) => import_react68.css`
+var buttonLeft = (position2) => import_react69.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -10137,7 +10668,7 @@ var buttonLeft = (position2) => import_react68.css`
     left: calc(50% - var(--spacing-16));
   `}
 `;
-var customButtonLeft = (position2) => import_react68.css`
+var customButtonLeft = (position2) => import_react69.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -10157,7 +10688,7 @@ var customButtonLeft = (position2) => import_react68.css`
     left: calc(50% - var(--spacing-16));
   `}
 `;
-var buttonRight = (position2) => import_react68.css`
+var buttonRight = (position2) => import_react69.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -10177,12 +10708,12 @@ var buttonRight = (position2) => import_react68.css`
     right: calc(50% - var(--spacing-16));
   `}
 `;
-var icon = import_react68.css`
+var icon = import_react69.css`
   width: var(--spacing-3);
   height: var(--spacing-3);
   color: var(--color-base-black);
 `;
-var dots = import_react68.css`
+var dots = import_react69.css`
   position: absolute;
   bottom: var(--spacing-2);
   left: 0;
@@ -10192,11 +10723,11 @@ var dots = import_react68.css`
   align-items: center;
   justify-content: center;
 `;
-var dotsInner = import_react68.css`
+var dotsInner = import_react69.css`
   display: flex;
   overflow: hidden;
 `;
-var dot = (dotsColor) => import_react68.css`
+var dot = (dotsColor) => import_react69.css`
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
@@ -10235,22 +10766,22 @@ var dot = (dotsColor) => import_react68.css`
     `}
   }
 `;
-var dotDistance2 = import_react68.css`
+var dotDistance2 = import_react69.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.9);
   }
 `;
-var dotDistance3 = import_react68.css`
+var dotDistance3 = import_react69.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.8);
   }
 `;
-var dotDistanceGreaterThan3 = import_react68.css`
+var dotDistanceGreaterThan3 = import_react69.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.7);
   }
 `;
-var dotVisible = import_react68.css`
+var dotVisible = import_react69.css`
   &::after {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1.2);
@@ -10258,7 +10789,7 @@ var dotVisible = import_react68.css`
 `;
 
 // src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
-var import_jsx_runtime261 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime262 = require("@emotion/react/jsx-runtime");
 var ScrollingCarouselStep = ({
   children,
   index,
@@ -10267,7 +10798,7 @@ var ScrollingCarouselStep = ({
   onClick,
   itemWidth
 }) => {
-  const context = (0, import_react69.useContext)(CarouselContext);
+  const context = (0, import_react70.useContext)(CarouselContext);
   if (!context) {
     throw new Error(
       "ScrollingCarouselStep must be used within ScrollingCarousel"
@@ -10278,7 +10809,7 @@ var ScrollingCarouselStep = ({
     threshold: 0.75,
     root: carousel2.current
   });
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (typeof index !== "undefined") {
       dispatch({
         type: "set_child_visibility",
@@ -10286,7 +10817,7 @@ var ScrollingCarouselStep = ({
       });
     }
   }, [inView, index, dispatch]);
-  return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
     "div",
     {
       ref,
@@ -10304,10 +10835,10 @@ var ScrollingCarouselStep = ({
 ScrollingCarouselStep.displayName = "ScrollingCarouselStep";
 
 // src/ScrollingCarousel/ScrollingCarousel.tsx
-var import_react73 = __toESM(require("react"));
+var import_react74 = __toESM(require("react"));
 
 // src/ScrollingCarousel/hooks/useCarouselDots.ts
-var import_react70 = require("react");
+var import_react71 = require("react");
 
 // src/ScrollingCarousel/ScrollingCarousel.helpers.ts
 var childVisibilityReducer = (state, action) => {
@@ -10338,7 +10869,7 @@ var useCarouselDots = ({
   anyItemsVisible,
   numberOfDots
 }) => {
-  const dotOffset = (0, import_react70.useRef)(0);
+  const dotOffset = (0, import_react71.useRef)(0);
   const dotWidth = 12;
   const totalDots = childVisibility.length;
   const dotToCenterIndex = Math.round(
@@ -10370,7 +10901,7 @@ var useCarouselDots = ({
 };
 
 // src/ScrollingCarousel/hooks/useCarouselNavigation.ts
-var import_react71 = require("react");
+var import_react72 = require("react");
 
 // src/shared/helpers.ts
 var import_seamless_scroll_polyfill = require("seamless-scroll-polyfill");
@@ -10404,7 +10935,7 @@ var useCarouselNavigation = ({
   infiniteScroll,
   childVisibilityLength
 }) => {
-  const getStepEl = (0, import_react71.useCallback)(
+  const getStepEl = (0, import_react72.useCallback)(
     (index) => {
       if (carousel2.current) {
         const selector = `[data-carousel-id="${id}"][data-carousel-index="${index}"]`;
@@ -10414,7 +10945,7 @@ var useCarouselNavigation = ({
     },
     [carousel2, id]
   );
-  const next = (0, import_react71.useCallback)(
+  const next = (0, import_react72.useCallback)(
     (e) => {
       e.preventDefault();
       if (lastItemIsVisible && !infiniteScroll)
@@ -10442,7 +10973,7 @@ var useCarouselNavigation = ({
       carousel2
     ]
   );
-  const back = (0, import_react71.useCallback)(
+  const back = (0, import_react72.useCallback)(
     (e) => {
       e.preventDefault();
       if (firstItemIsVisible && !infiniteScroll)
@@ -10470,7 +11001,7 @@ var useCarouselNavigation = ({
       carousel2
     ]
   );
-  const goTo = (0, import_react71.useCallback)(
+  const goTo = (0, import_react72.useCallback)(
     (e, i) => {
       e.preventDefault();
       const el = getStepEl(i);
@@ -10488,12 +11019,12 @@ var useCarouselNavigation = ({
 };
 
 // src/ScrollingCarousel/hooks/useCarouselVisibility.ts
-var import_react72 = require("react");
+var import_react73 = require("react");
 var useCarouselVisibility = (carousel2) => {
-  const [state, dispatch] = (0, import_react72.useReducer)(childVisibilityReducer, {
+  const [state, dispatch] = (0, import_react73.useReducer)(childVisibilityReducer, {
     childVisibility: []
   });
-  const carouselContextApi = (0, import_react72.useMemo)(
+  const carouselContextApi = (0, import_react73.useMemo)(
     () => ({ carousel: carousel2, dispatch }),
     [carousel2]
   );
@@ -10514,7 +11045,7 @@ var useCarouselVisibility = (carousel2) => {
 };
 
 // src/ScrollingCarousel/ScrollingCarousel.tsx
-var import_jsx_runtime262 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime263 = require("@emotion/react/jsx-runtime");
 var ScrollingCarousel = ({
   className,
   children,
@@ -10533,8 +11064,8 @@ var ScrollingCarousel = ({
   itemWidth,
   gap: gap2
 }) => {
-  const carousel2 = (0, import_react73.useRef)(null);
-  const [isHovering, setIsHovering] = (0, import_react73.useState)(false);
+  const carousel2 = (0, import_react74.useRef)(null);
+  const [isHovering, setIsHovering] = (0, import_react74.useState)(false);
   const {
     state,
     carouselContextApi,
@@ -10554,7 +11085,7 @@ var ScrollingCarousel = ({
     infiniteScroll,
     childVisibilityLength: state.childVisibility.length
   });
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     if (carousel2.current && typeof current === "number" && current >= 0) {
       const childrenArray = Array.from(carousel2.current.children);
       const selectedItem = childrenArray[current];
@@ -10569,9 +11100,9 @@ var ScrollingCarousel = ({
       }
     }
   }, [current]);
-  const childrenWithIndex = import_react73.default.Children.map(
+  const childrenWithIndex = import_react74.default.Children.map(
     children,
-    (child, index) => import_react73.default.cloneElement(child, { index, itemWidth })
+    (child, index) => import_react74.default.cloneElement(child, { index, itemWidth })
   );
   const { dotOffset, dotDistances, dotWidth } = useCarouselDots({
     childVisibility: state.childVisibility,
@@ -10582,7 +11113,7 @@ var ScrollingCarousel = ({
   });
   const hasMultipleChildren = state.childVisibility.length > 1;
   const shouldShowNavigation = showNavigationOnHover ? isHovering : true;
-  return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
     "div",
     {
       css: carouselRoot,
@@ -10590,7 +11121,7 @@ var ScrollingCarousel = ({
       onMouseEnter: () => setIsHovering(true),
       onMouseLeave: () => setIsHovering(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
           "div",
           {
             css: carousel(gap2),
@@ -10599,11 +11130,11 @@ var ScrollingCarousel = ({
             role: "region",
             "aria-roledescription": "carousel",
             "aria-label": "Scrolling carousel",
-            children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(CarouselContext.Provider, { value: carouselContextApi, children: childrenWithIndex })
+            children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(CarouselContext.Provider, { value: carouselContextApi, children: childrenWithIndex })
           }
         ),
-        hasMultipleChildren && shouldShowNavigation && /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)("div", { css: controls(buttonsPosition), children: [
-          showButtons && (!firstItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
+        hasMultipleChildren && shouldShowNavigation && /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)("div", { css: controls(buttonsPosition), children: [
+          showButtons && (!firstItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
             "button",
             {
               "aria-label": "Previous",
@@ -10615,10 +11146,10 @@ var ScrollingCarousel = ({
               },
               css: customLeftButton ? customButtonLeft(buttonsPosition) : buttonLeft(buttonsPosition),
               "data-testid": `scrolling-carousel-button-back-${id}`,
-              children: customBackIcon ? customBackIcon : /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Icon_default, { variant: "AngleLeft", css: icon }) })
+              children: customBackIcon ? customBackIcon : /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Icon_default, { variant: "AngleLeft", css: icon }) })
             }
           ),
-          showButtons && (!lastItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
+          showButtons && (!lastItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
             "button",
             {
               "aria-label": "Next",
@@ -10630,11 +11161,11 @@ var ScrollingCarousel = ({
               },
               css: buttonRight(buttonsPosition),
               "data-testid": `scrolling-carousel-button-next-${id}`,
-              children: customNextIcon ? customNextIcon : /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Icon_default, { variant: "AngleRight", css: icon }) })
+              children: customNextIcon ? customNextIcon : /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Icon_default, { variant: "AngleRight", css: icon }) })
             }
           )
         ] }),
-        showDots && /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("div", { css: dots, children: /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
+        showDots && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("div", { css: dots, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
           "div",
           {
             css: dotsInner,
@@ -10642,7 +11173,7 @@ var ScrollingCarousel = ({
             children: state.childVisibility.map((childVisibility, i) => {
               var _a;
               const distance = (_a = dotDistances[i]) != null ? _a : 0;
-              return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
                 "button",
                 {
                   type: "button",
@@ -10673,8 +11204,8 @@ var ScrollingCarousel = ({
 ScrollingCarousel.displayName = "ScrollingCarousel";
 
 // src/PackageCard/PackageCard.styles.ts
-var import_react74 = require("@emotion/react");
-var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler) => import_react74.css`
+var import_react75 = require("@emotion/react");
+var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler) => import_react75.css`
   ${hasClickHandler && `
     cursor: pointer;
   `}
@@ -10692,7 +11223,7 @@ var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler)
   flex-direction: column;
   gap: var(--spacing-2);
 
-  ${orientation === "horizontal" && import_react74.css`
+  ${orientation === "horizontal" && import_react75.css`
     /* Apply horizontal layout only on tablet and up */
     ${media.md} {
       flex-direction: row;
@@ -10720,58 +11251,58 @@ var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler)
     }
   `}
 `;
-var imageContainerStyles = (orientation) => import_react74.css`
+var imageContainerStyles = (orientation) => import_react75.css`
   width: 100%;
   height: 260px;
 
-  ${orientation === "horizontal" && import_react74.css`
+  ${orientation === "horizontal" && import_react75.css`
     ${media.md} {
       width: 40%;
       height: 200px;
   `}
 `;
-var imageBoxStyles = (orientation) => import_react74.css`
+var imageBoxStyles = (orientation) => import_react75.css`
   height: 260px;
-  ${orientation === "horizontal" && import_react74.css`
+  ${orientation === "horizontal" && import_react75.css`
     ${media.md} {
       height: 200px;
     }
   `}
 `;
-var contentContainerStyles = (orientation, hasContentBackground) => import_react74.css`
+var contentContainerStyles = (orientation, hasContentBackground) => import_react75.css`
   ${hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles}
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 
-  ${orientation === "horizontal" && import_react74.css`
+  ${orientation === "horizontal" && import_react75.css`
     ${media.md} {
       width: 60%;
       justify-content: center;
     }
   `}
 `;
-var imageStyles3 = import_react74.css`
+var imageStyles3 = import_react75.css`
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   background-color: lightgray;
 `;
-var badgeTopLeftStyles = import_react74.css`
+var badgeTopLeftStyles = import_react75.css`
   position: absolute;
   top: var(--spacing-3);
   left: var(--spacing-3);
   z-index: 2;
 `;
-var badgeBottomRightStyles = import_react74.css`
+var badgeBottomRightStyles = import_react75.css`
   position: absolute;
   bottom: var(--spacing-3);
   right: var(--spacing-3);
   z-index: 2;
 `;
-var heartIconStyles = import_react74.css`
+var heartIconStyles = import_react75.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
@@ -10793,20 +11324,20 @@ var heartIconStyles = import_react74.css`
     transform: scale(1.1);
   }
 `;
-var actionMenuStyles = import_react74.css`
+var actionMenuStyles = import_react75.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
   z-index: 3;
 `;
-var contentWithBackgroundStyles = import_react74.css`
+var contentWithBackgroundStyles = import_react75.css`
   padding: 0 var(--spacing-3) var(--spacing-4) var(--spacing-3);
   background-color: var(--surface-page);
 `;
-var contentWithoutBackgroundStyles = import_react74.css`
+var contentWithoutBackgroundStyles = import_react75.css`
   padding-top: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);
 `;
-var overlayStyles = import_react74.css`
+var overlayStyles = import_react75.css`
   position: absolute;
   top: 0;
   left: 0;
@@ -10818,7 +11349,7 @@ var overlayStyles = import_react74.css`
   display: block;
   pointer-events: none;
 `;
-var titleStyles = import_react74.css`
+var titleStyles = import_react75.css`
   text-wrap: wrap;
   word-break: break-word;
   white-space: pre-wrap;
@@ -10826,7 +11357,7 @@ var titleStyles = import_react74.css`
 `;
 
 // src/PackageCard/PackageCard.tsx
-var import_jsx_runtime263 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime264 = require("@emotion/react/jsx-runtime");
 var PackageCard = ({
   images,
   title,
@@ -10847,22 +11378,22 @@ var PackageCard = ({
   ...rest
 }) => {
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
       Box_default,
       {
         css: cardContainerStyles3(orientation, hasContentBackground, false),
         className,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
             Box_default,
             {
               overflow: "hidden",
               borderRadius: "var(--spacing-4)",
               css: imageContainerStyles(orientation),
-              children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_loading_skeleton2.default, { width: "100%", height: "100%", borderRadius: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_loading_skeleton2.default, { width: "100%", height: "100%", borderRadius: 16 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
             Box_default,
             {
               display: "flex",
@@ -10870,9 +11401,9 @@ var PackageCard = ({
               gap: "var(--spacing-1)",
               mb: "var(--spacing-1)",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_loading_skeleton2.default, { width: "80%", height: 16, borderRadius: 4 }),
-                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_loading_skeleton2.default, { width: "60%", height: 14, borderRadius: 4 }),
-                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_loading_skeleton2.default, { width: "40%", height: 14, borderRadius: 4 })
+                /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_loading_skeleton2.default, { width: "80%", height: 16, borderRadius: 4 }),
+                /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_loading_skeleton2.default, { width: "60%", height: 14, borderRadius: 4 }),
+                /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_loading_skeleton2.default, { width: "40%", height: 14, borderRadius: 4 })
               ]
             }
           ) })
@@ -10884,7 +11415,7 @@ var PackageCard = ({
   const shouldShowOverlay = availabilityBadges == null ? void 0 : availabilityBadges.some(
     (badge2) => badge2.showOverlay
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
     Box_default,
     {
       position: "relative",
@@ -10893,7 +11424,7 @@ var PackageCard = ({
       onClick,
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
           Box_default,
           {
             position: "relative",
@@ -10901,7 +11432,7 @@ var PackageCard = ({
             borderRadius: "var(--spacing-4)",
             css: imageContainerStyles(orientation),
             children: [
-              availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+              availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                 AvailabilityBadge_default,
                 {
                   variant: badge2.variant,
@@ -10910,18 +11441,18 @@ var PackageCard = ({
                 },
                 `availability-${index}`
               )),
-              shouldShowOverlay && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { css: overlayStyles }),
-              /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+              shouldShowOverlay && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { css: overlayStyles }),
+              /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                 ScrollingCarousel,
                 {
                   showDots: images.length > 1,
                   showNavigationOnHover: true,
                   id: carouselId,
-                  children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+                  children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                     ScrollingCarouselStep,
                     {
                       parentId: carouselId,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                         Box_default,
                         {
                           width: "100%",
@@ -10939,7 +11470,7 @@ var PackageCard = ({
                   ))
                 }
               ),
-              onFavoriteClick && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+              onFavoriteClick && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                 Box_default,
                 {
                   css: heartIconStyles,
@@ -10948,14 +11479,14 @@ var PackageCard = ({
                     e.stopPropagation();
                     onFavoriteClick == null ? void 0 : onFavoriteClick();
                   },
-                  children: isFavorited ? /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+                  children: isFavorited ? /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                     Icon_default,
                     {
                       variant: "HeartSolid",
                       size: "small",
                       fill: "var(--color-error-500)"
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                     Icon_default,
                     {
                       variant: "Heart",
@@ -10965,13 +11496,13 @@ var PackageCard = ({
                   )
                 }
               ),
-              actions && actions.length > 0 && orientation === "vertical" && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(ActionMenu_default, { actions }) })
+              actions && actions.length > 0 && orientation === "vertical" && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(ActionMenu_default, { actions }) })
             ]
           }
         ),
-        actions && actions.length > 0 && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(ActionMenu_default, { actions }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+        actions && actions.length > 0 && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(ActionMenu_default, { actions }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
             Box_default,
             {
               display: "flex",
@@ -10979,7 +11510,7 @@ var PackageCard = ({
               gap: "var(--spacing-1)",
               mb: "var(--spacing-1)",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                   Text_default,
                   {
                     size: size === "xs" ? "sm" : "md",
@@ -10988,8 +11519,8 @@ var PackageCard = ({
                     children: title
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Text_default, { size: size === "xs" ? "xs" : "sm", fontWeight: "bold", children: subtitle }) }),
-                startingPrice && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(Text_default, { size: size === "xs" ? "xs" : "sm", fontWeight: "normal", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Text_default, { size: size === "xs" ? "xs" : "sm", fontWeight: "bold", children: subtitle }) }),
+                startingPrice && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(Text_default, { size: size === "xs" ? "xs" : "sm", fontWeight: "normal", children: [
                   "Starting Price ",
                   startingPrice,
                   " / Guest"
@@ -10997,14 +11528,14 @@ var PackageCard = ({
               ]
             }
           ),
-          badges && badges.length > 0 && size !== "xs" && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+          badges && badges.length > 0 && size !== "xs" && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
             Box_default,
             {
               display: "flex",
               gap: "var(--spacing-2) var(--spacing-4)",
               alignItems: "center",
               flexWrap: "wrap",
-              children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+              children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
                 IconLabel_default,
                 {
                   iconSize: badge2.iconSize || "medium",
@@ -11023,14 +11554,14 @@ var PackageCard = ({
 var PackageCard_default = PackageCard;
 
 // src/PackageHeader/PackageHeader.tsx
-var import_jsx_runtime264 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime265 = require("@emotion/react/jsx-runtime");
 var PackageHeader = ({
   header,
   subheader,
   features,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -11039,9 +11570,9 @@ var PackageHeader = ({
       color: "var(--text-primary)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Heading_default, { size: "xs", fontWeight: "bold", children: header }),
-        subheader && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Text_default, { children: subheader }),
-        features && /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(FeatureList_default, { items: features })
+        /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Heading_default, { size: "xs", fontWeight: "bold", children: header }),
+        subheader && /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Text_default, { children: subheader }),
+        features && /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(FeatureList_default, { items: features })
       ]
     }
   );
@@ -11049,8 +11580,8 @@ var PackageHeader = ({
 var PackageHeader_default = PackageHeader;
 
 // src/ReviewCard/components/ReviewImages.styles.ts
-var import_react75 = require("@emotion/react");
-var imageStyles4 = import_react75.css`
+var import_react76 = require("@emotion/react");
+var imageStyles4 = import_react76.css`
   flex: 1;
   min-width: 0;
   max-width: 100%;
@@ -11061,13 +11592,13 @@ var imageStyles4 = import_react75.css`
 `;
 
 // src/ReviewCard/components/ReviewImages.tsx
-var import_jsx_runtime265 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime266 = require("@emotion/react/jsx-runtime");
 var ReviewImages = ({ images, maxImages = 3 }) => {
   const displayImages = images.slice(0, maxImages);
   if (displayImages.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Box_default, { display: "flex", gap: "var(--spacing-2)", flexWrap: "wrap", children: displayImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Box_default, { display: "flex", gap: "var(--spacing-2)", flexWrap: "wrap", children: displayImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
     "img",
     {
       src: image,
@@ -11080,7 +11611,7 @@ var ReviewImages = ({ images, maxImages = 3 }) => {
 var ReviewImages_default = ReviewImages;
 
 // src/ReviewCard/components/ReviewReply.tsx
-var import_jsx_runtime266 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime267 = require("@emotion/react/jsx-runtime");
 var ReviewReply = ({
   avatarSrc,
   name,
@@ -11089,7 +11620,7 @@ var ReviewReply = ({
   label,
   rating
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
     Box_default,
     {
       backgroundColor: "var(--surface-neutral)",
@@ -11099,7 +11630,7 @@ var ReviewReply = ({
       flexDirection: "column",
       gap: "var(--spacing-3)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -11107,7 +11638,7 @@ var ReviewReply = ({
             justifyContent: "space-between",
             gap: "var(--spacing-2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
                 UserCard_default,
                 {
                   avatarSrc,
@@ -11116,11 +11647,11 @@ var ReviewReply = ({
                   rating
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(AvailabilityBadge_default, { variant: "neutral", children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(AvailabilityBadge_default, { variant: "neutral", children: label })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Text_default, { children: content })
+        /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(Text_default, { children: content })
       ]
     }
   );
@@ -11128,7 +11659,7 @@ var ReviewReply = ({
 var ReviewReply_default = ReviewReply;
 
 // src/ReviewCard/ReviewCard.tsx
-var import_jsx_runtime267 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime268 = require("@emotion/react/jsx-runtime");
 var ReviewCard = ({
   avatarSrc,
   name,
@@ -11140,7 +11671,7 @@ var ReviewCard = ({
   replies = [],
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
     Box_default,
     {
       backgroundColor: "white",
@@ -11151,7 +11682,7 @@ var ReviewCard = ({
       gap: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
           UserCard_default,
           {
             avatarSrc,
@@ -11160,10 +11691,10 @@ var ReviewCard = ({
             rating
           }
         ),
-        availabilityBadge && /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(AvailabilityBadge_default, { variant: availabilityBadge.variant, children: availabilityBadge.text }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(Text_default, { size: "md", children: content }),
-        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(ReviewImages_default, { images }),
-        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: replies.map((reply, index) => /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
+        availabilityBadge && /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(AvailabilityBadge_default, { variant: availabilityBadge.variant, children: availabilityBadge.text }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(Text_default, { size: "md", children: content }),
+        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(ReviewImages_default, { images }),
+        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: replies.map((reply, index) => /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(
           ReviewReply_default,
           {
             avatarSrc: reply.avatarSrc,
@@ -11182,12 +11713,12 @@ var ReviewCard = ({
 var ReviewCard_default = ReviewCard;
 
 // src/Reviews/Reviews.tsx
-var import_react76 = require("@emotion/react");
+var import_react77 = require("@emotion/react");
 
 // src/Reviews/components/ReviewItem.tsx
-var import_jsx_runtime268 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime269 = require("@emotion/react/jsx-runtime");
 var ReviewItem = ({ label, rating }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -11195,10 +11726,10 @@ var ReviewItem = ({ label, rating }) => {
       alignItems: "center",
       width: "100%",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(Text_default, { fontWeight: "semibold", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(Icon_default, { variant: "StarSolid", size: "large", fill: "var(--surface-action-2)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime268.jsx)(Text_default, { fontWeight: "semibold", children: rating.toFixed(1) })
+        /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Text_default, { fontWeight: "semibold", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Icon_default, { variant: "StarSolid", size: "large", fill: "var(--surface-action-2)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Text_default, { fontWeight: "semibold", children: rating.toFixed(1) })
         ] })
       ]
     }
@@ -11207,14 +11738,14 @@ var ReviewItem = ({ label, rating }) => {
 var ReviewItem_default = ReviewItem;
 
 // src/Reviews/Reviews.tsx
-var import_jsx_runtime269 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime270 = require("@emotion/react/jsx-runtime");
 var Reviews = ({
   averageRating,
   totalReviews,
   items,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
     Box_default,
     {
       width: "100%",
@@ -11227,7 +11758,7 @@ var Reviews = ({
       p: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -11235,12 +11766,12 @@ var Reviews = ({
             alignItems: "center",
             gap: "var(--spacing-2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(Heading_default, { size: "sm", fontWeight: "bold", color: "text-primary", children: averageRating.toFixed(1) }),
-              /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Heading_default, { size: "sm", fontWeight: "bold", color: "text-primary", children: averageRating.toFixed(1) }),
+              /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
                 StarRating_default,
                 {
                   rating: averageRating,
-                  css: import_react76.css`
+                  css: import_react77.css`
             > svg {
               height: 40px;
               width: 40px;
@@ -11248,7 +11779,7 @@ var Reviews = ({
           `
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
                 "Overall Rating \u2022 ",
                 totalReviews,
                 " Review",
@@ -11257,14 +11788,14 @@ var Reviews = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
           Box_default,
           {
             display: "flex",
             flexDirection: "column",
             gap: "var(--spacing-2)",
             width: "100%",
-            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(ReviewItem_default, { label: item.label, rating: item.rating }, index))
+            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(ReviewItem_default, { label: item.label, rating: item.rating }, index))
           }
         )
       ]
@@ -11274,7 +11805,7 @@ var Reviews = ({
 var Reviews_default = Reviews;
 
 // src/Reviews/ReviewsShowcase.tsx
-var import_jsx_runtime270 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime271 = require("@emotion/react/jsx-runtime");
 var ReviewsShowcase = () => {
   const sampleData = {
     averageRating: 4,
@@ -11296,7 +11827,7 @@ var ReviewsShowcase = () => {
       { label: "Game Abundance", rating: 5 }
     ]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -11304,24 +11835,24 @@ var ReviewsShowcase = () => {
       gap: "var(--spacing-8)",
       p: "var(--spacing-6)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Heading_default, { size: "lg", children: "Reviews Component Showcase" }),
-        /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Heading_default, { size: "md", children: "Default Reviews" }),
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Reviews_default, { ...sampleData }) })
+        /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Heading_default, { size: "lg", children: "Reviews Component Showcase" }),
+        /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Heading_default, { size: "md", children: "Default Reviews" }),
+          /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Reviews_default, { ...sampleData }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Heading_default, { size: "md", children: "High Rating Reviews" }),
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Reviews_default, { ...highRatingData }) })
+        /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Heading_default, { size: "md", children: "High Rating Reviews" }),
+          /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Reviews_default, { ...highRatingData }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Heading_default, { size: "md", children: "Mobile Layout (320px width)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Heading_default, { size: "md", children: "Mobile Layout (320px width)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(
             Box_default,
             {
               maxWidth: "320px",
               border: "1px solid var(--color-neutral-200)",
               p: "var(--spacing-4)",
-              children: /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(Reviews_default, { ...sampleData })
+              children: /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(Reviews_default, { ...sampleData })
             }
           )
         ] })
@@ -11367,6 +11898,7 @@ var ReviewsShowcase_default = ReviewsShowcase;
   LayoutTokens,
   ListingChat,
   Logo,
+  LottieAnimations,
   MarkdownContent,
   MessageBubble,
   Modal,
@@ -11396,6 +11928,7 @@ var ReviewsShowcase_default = ReviewsShowcase;
   WidgetPanel,
   WidgetTrigger,
   globalStyles,
+  lottieAnimations,
   styles,
   useBottomDrawer,
   useBottomDrawerHook