@cfx-dev/ui-components 5.0.25 → 5.0.27

package/dist/components/Button/ButtonShowcase.js

@@ -1,14 +1,14 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import c from "react";
-import r from "../Flex/Flex.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import d from "react";
+import t from "../Flex/Flex.js";
 import { Text as n } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import i from "./Button.js";
-import { ButtonBar as d } from "./ButtonBar.js";
+import { ButtonBar as c } from "./ButtonBar.js";
 import { LinkButton as l } from "./LinkButton.js";
 function h() {
-  return /* @__PURE__ */ t(r, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+  return /* @__PURE__ */ r(t, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Default Icon Right" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -19,7 +19,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Default Icon Left" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -30,7 +30,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Primary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -41,7 +41,31 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Primary With Border Shredded" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        i,
+        {
+          text: "Sign In",
+          theme: "primary",
+          icon: "Users",
+          borderShredded: !0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ e(n, { children: "Secondary With Border Shredded" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        i,
+        {
+          text: "Sign In",
+          theme: "secondary",
+          icon: "Users",
+          borderShredded: !0
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Secondary" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -52,7 +76,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Tertiary (Default)" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -63,7 +87,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "On Light" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -74,7 +98,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Quick Link" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -85,7 +109,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "No Icon" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -95,7 +119,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Disabled" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -107,7 +131,7 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Full Width" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         i,
@@ -119,9 +143,9 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Linked" }),
-      /* @__PURE__ */ t(r, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
+      /* @__PURE__ */ r(t, { p: 4, style: { backgroundColor: "var(--color-modal-background)" }, children: [
         /* @__PURE__ */ e(
           i,
           {
@@ -141,7 +165,7 @@ function h() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "LinkButton - look like button but its anchor" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         l,
@@ -153,16 +177,16 @@ function h() {
         }
       ) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Button Bar" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ t(d, { children: [
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ r(c, { children: [
         /* @__PURE__ */ e(i, { text: "Sign In", theme: "primary", icon: "Users" }),
         /* @__PURE__ */ e(i, { text: "Register", theme: "secondary", icon: "Users" }),
         /* @__PURE__ */ e(i, { text: "Sign Out", theme: "on-light", icon: "Users" }),
         /* @__PURE__ */ e(i, { text: "Create Account", theme: "tertiary", icon: "Users" })
       ] }) })
     ] }),
-    /* @__PURE__ */ t(r, { gap: "medium", vertical: !0, children: [
+    /* @__PURE__ */ r(t, { gap: "medium", vertical: !0, children: [
       /* @__PURE__ */ e(n, { children: "Long text" }),
       /* @__PURE__ */ e("div", { style: { maxWidth: "300px" }, children: /* @__PURE__ */ e(
         i,
@@ -175,7 +199,7 @@ function h() {
     ] })
   ] });
 }
-const x = c.memo(h);
+const x = d.memo(h);
 export {
   x as default
 };

package/dist/components/Lightbox/Lightbox.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { LightboxImageComponentProps, LightboxProps, VideoComponentProps } from './types';
+
+interface LightboxComponentProps extends LightboxProps {
+    LightboxImageComponent: React.ComponentType<LightboxImageComponentProps>;
+    VideoComponent: React.ComponentType<VideoComponentProps>;
+}
+declare function Lightbox({ LightboxImageComponent, VideoComponent, ...props }: LightboxComponentProps): import("react/jsx-runtime").JSX.Element | null;
+export default Lightbox;

package/dist/components/Lightbox/Lightbox.js

@@ -0,0 +1,172 @@
+import { jsx as t, jsxs as b, Fragment as P } from "react/jsx-runtime";
+import l from "react";
+import d from "../Flex/Flex.js";
+import { clsx as x } from "../../utils/clsx.js";
+import m from "../IconButton/IconButton.js";
+import { Text as S } from "../Text/Text.js";
+import "../../utils/ui/ui.js";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import { useKeyboardClose as K } from "../../utils/hooks/useKeyboardClose.js";
+import "../../index-CUyjBl1Y.js";
+import { useKeyboardArrows as M } from "../../utils/hooks/useKeyboardArrows.js";
+import { useLightbox as z } from "../../utils/hooks/useLightbox.js";
+const V = "cfxui__Lightbox__lightboxOverlay__dc0eb", A = "cfxui__Lightbox__lightboxContainer__26f04", F = "cfxui__Lightbox__lightboxImageContainer__eea35", $ = "cfxui__Lightbox__lightboxImage__0f73c", j = "cfxui__Lightbox__lightboxVideo__cffdb", T = "cfxui__Lightbox__lightboxControlBtn__41c50", q = "cfxui__Lightbox__lightboxClose__b2b96", G = "cfxui__Lightbox__lightboxNav__60d29", H = "cfxui__Lightbox__lightboxPrev__35acc", J = "cfxui__Lightbox__lightboxNext__09f51", Q = "cfxui__Lightbox__lightboxCounter__8824a", W = "cfxui__Lightbox__lightboxEmbla__546be", X = "cfxui__Lightbox__lightboxEmblaContainer__3b54b", Y = "cfxui__Lightbox__lightboxEmblaSlide__64f0b", o = {
+  lightboxOverlay: V,
+  lightboxContainer: A,
+  lightboxImageContainer: F,
+  lightboxImage: $,
+  lightboxVideo: j,
+  lightboxControlBtn: T,
+  lightboxClose: q,
+  lightboxNav: G,
+  lightboxPrev: H,
+  lightboxNext: J,
+  lightboxCounter: Q,
+  lightboxEmbla: W,
+  lightboxEmblaContainer: X,
+  lightboxEmblaSlide: Y
+};
+function he({
+  LightboxImageComponent: v,
+  VideoComponent: p,
+  ...N
+}) {
+  const {
+    lightboxItems: i,
+    currentIndex: a,
+    isOpen: r,
+    onClose: c,
+    onIndexChange: y,
+    className: L,
+    showNavigation: I = !0,
+    showCounter: w = !0,
+    showCloseButton: E = !0
+  } = N, n = l.useRef(null), h = l.useRef(null), g = l.useRef(!1), {
+    emblaRef: R,
+    getSelectedIndex: O,
+    handlePrevious: s,
+    handleNext: _,
+    handleOverlayClick: f,
+    handleOverlayKeyDown: D
+  } = z({
+    currentIndex: a,
+    isOpen: r,
+    onClose: c,
+    onIndexChange: y,
+    initialIndex: n.current ?? a
+  }), C = O(), k = l.useCallback((e) => {
+    e.target === h.current && (g.current = !0);
+  }, []), B = l.useCallback((e) => {
+    e.target === h.current && g.current && f(e), g.current = !1;
+  }, [f]), U = l.useCallback((e) => {
+    e === "left" ? s() : e === "right" && _();
+  }, [s, _]);
+  return M(U), K(c), l.useEffect(() => {
+    r && n.current === null && (n.current = a), r || (n.current = null);
+  }, [r, a]), !r || !i.length ? null : /* @__PURE__ */ t(
+    "div",
+    {
+      className: x(o.lightboxOverlay, L),
+      onMouseDown: k,
+      onMouseUp: B,
+      onKeyDown: D,
+      role: "button",
+      "aria-label": "Close lightbox",
+      tabIndex: 0,
+      ref: h,
+      children: /* @__PURE__ */ b("div", { className: o.lightboxContainer, children: [
+        " ",
+        E && /* @__PURE__ */ t(
+          m,
+          {
+            name: "Close",
+            className: x(o.lightboxClose, o.lightboxControlBtn),
+            onClick: c,
+            "aria-label": "Close lightbox",
+            size: "medium"
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: o.lightboxImageContainer, children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: o.lightboxEmbla,
+            ref: R,
+            children: /* @__PURE__ */ t(d, { className: o.lightboxEmblaContainer, children: i.map((e, u) => /* @__PURE__ */ b(
+              d,
+              {
+                centered: !0,
+                className: o.lightboxEmblaSlide,
+                children: [
+                  e.type === "video" && e.videoUrl && /* @__PURE__ */ t(
+                    p,
+                    {
+                      src: e.videoUrl,
+                      title: e.videoTitle,
+                      className: o.lightboxVideo,
+                      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                      allowFullScreen: !0,
+                      isActive: u === C
+                    }
+                  ),
+                  e.type === "image" && e.src && /* @__PURE__ */ t(
+                    v,
+                    {
+                      src: e.src,
+                      alt: e.alt ?? `Image ${u + 1} of ${i.length}`,
+                      placeholder: e.blurDataURL ? "blur" : "empty",
+                      blurDataURL: e.blurDataURL,
+                      fill: !0,
+                      className: o.lightboxImage
+                    }
+                  )
+                ]
+              },
+              e.id ?? u
+            )) })
+          },
+          r && n.current !== null ? `open-${n.current}` : "closed"
+        ) }),
+        " ",
+        I && i.length > 1 && /* @__PURE__ */ b(P, { children: [
+          /* @__PURE__ */ t(
+            m,
+            {
+              name: "LeftChevron",
+              className: x(o.lightboxNav, o.lightboxPrev, o.lightboxControlBtn),
+              onClick: s,
+              "aria-label": "Previous image",
+              size: "large"
+            }
+          ),
+          /* @__PURE__ */ t(
+            m,
+            {
+              name: "RightChevron",
+              className: x(o.lightboxNav, o.lightboxNext, o.lightboxControlBtn),
+              onClick: _,
+              "aria-label": "Next image",
+              size: "large"
+            }
+          )
+        ] }),
+        w && i.length > 1 && /* @__PURE__ */ b(
+          S,
+          {
+            color: "primary",
+            size: "xsmall",
+            className: o.lightboxCounter,
+            children: [
+              C + 1,
+              " ",
+              "/",
+              i.length
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  he as default
+};

package/dist/components/Lightbox/LightboxShowcase.d.ts

@@ -0,0 +1,6 @@
+import { MediaItem } from './types';
+
+declare const items: MediaItem[];
+declare function LightboxShowcase(): import("react/jsx-runtime").JSX.Element;
+export default LightboxShowcase;
+export { items };

package/dist/components/Lightbox/LightboxShowcase.js

@@ -0,0 +1,137 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import c from "react";
+import s from "../Flex/Flex.js";
+import { Interactive as m } from "../Interactive/Interactive.js";
+import h from "./Lightbox.js";
+const a = [
+  {
+    id: "1",
+    type: "image",
+    src: "https://picsum.photos/1200/800?1",
+    alt: "Image 1"
+  },
+  {
+    id: "2",
+    type: "image",
+    src: "https://picsum.photos/1200/800?2",
+    alt: "Image 2"
+  },
+  {
+    id: "3",
+    type: "image",
+    src: "https://picsum.photos/1200/800?3",
+    alt: "Image 3"
+  },
+  {
+    id: "4",
+    type: "video",
+    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+    videoTitle: "YouTube Demo Video"
+  }
+];
+function p({
+  src: r,
+  alt: o,
+  width: n,
+  height: i,
+  className: t
+}) {
+  return /* @__PURE__ */ e(
+    "img",
+    {
+      src: r,
+      alt: o,
+      width: n,
+      height: i,
+      className: t,
+      style: {
+        objectFit: "cover",
+        width: "100%",
+        height: "100%"
+      }
+    }
+  );
+}
+function u({
+  src: r,
+  className: o,
+  title: n,
+  allow: i,
+  allowFullScreen: t
+}) {
+  return /* @__PURE__ */ e(
+    "iframe",
+    {
+      src: r,
+      title: n,
+      className: o,
+      allow: i,
+      allowFullScreen: t,
+      style: {
+        width: "100%",
+        height: "100%",
+        border: 0
+      }
+    }
+  );
+}
+function I() {
+  const [r, o] = c.useState(!1), [n, i] = c.useState(0);
+  return /* @__PURE__ */ e(s, { direction: "column", gap: "large", children: /* @__PURE__ */ d(s, { direction: "column", gap: "small", children: [
+    /* @__PURE__ */ e("h4", { children: "Default" }),
+    /* @__PURE__ */ e(s, { gap: "small", children: a.map((t, l) => /* @__PURE__ */ e(
+      m,
+      {
+        onClick: () => {
+          i(l), o(!0);
+        },
+        children: t.type === "image" ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: t.src,
+            alt: t.alt,
+            width: 150,
+            height: 100,
+            style: {
+              cursor: "pointer",
+              objectFit: "cover"
+            }
+          }
+        ) : /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              width: 150,
+              height: 100,
+              background: "#000",
+              color: "#fff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              cursor: "pointer"
+            },
+            children: "YouTube Video"
+          }
+        )
+      },
+      t.id
+    )) }),
+    /* @__PURE__ */ e(
+      h,
+      {
+        lightboxItems: a,
+        currentIndex: n,
+        isOpen: r,
+        onClose: () => o(!1),
+        onIndexChange: i,
+        LightboxImageComponent: p,
+        VideoComponent: u
+      }
+    )
+  ] }) });
+}
+export {
+  I as default,
+  a as items
+};

package/dist/components/Lightbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Lightbox } from './Lightbox';
+export type { LightboxProps, LightboxImageItem, SwipeDirection, } from './types';

package/dist/components/Lightbox/index.js

@@ -0,0 +1,4 @@
+import { default as a } from "./Lightbox.js";
+export {
+  a as Lightbox
+};

package/dist/components/Lightbox/types.d.ts

@@ -0,0 +1,51 @@
+export type LightboxImageItem = {
+    type: 'image';
+    src: string;
+    alt?: string;
+    id?: string | number;
+    blurDataURL?: string;
+};
+export type LightboxVideoItem = {
+    type: 'video';
+    videoUrl: string;
+    videoTitle?: string;
+    id?: string | number;
+};
+export type MediaItem = LightboxImageItem | LightboxVideoItem;
+export interface UseLightboxOptions {
+    lightboxItems: MediaItem[];
+    currentIndex: number;
+    isOpen: boolean;
+    onClose: () => void;
+    onIndexChange: (idx: number) => void;
+}
+export interface LightboxProps {
+    lightboxItems: MediaItem[];
+    currentIndex: number;
+    isOpen: boolean;
+    onClose: () => void;
+    onIndexChange: (index: number) => void;
+    className?: string;
+    showNavigation?: boolean;
+    showCounter?: boolean;
+    showCloseButton?: boolean;
+}
+export type SwipeDirection = 'left' | 'right';
+export interface LightboxImageComponentProps {
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    placeholder?: 'blur' | 'empty';
+    blurDataURL?: string;
+    fill?: boolean;
+}
+export interface VideoComponentProps {
+    src: string;
+    title?: string;
+    className?: string;
+    allow: string;
+    allowFullScreen?: boolean;
+    isActive?: boolean;
+}

package/dist/components/Lightbox/types.js

@@ -0,0 +1 @@
+

package/dist/components/Logos/fivem/WhiteLogo.js

@@ -1,24 +1,24 @@
-import { jsx as L } from "react/jsx-runtime";
-import t from "react";
-function e(o) {
-  return /* @__PURE__ */ L(
+import { jsx as o } from "react/jsx-runtime";
+import e from "react";
+function L(t) {
+  return /* @__PURE__ */ o(
     "svg",
     {
-      viewBox: "0 0 30 30",
+      viewBox: "0 0 51 60",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      ...o,
-      children: /* @__PURE__ */ L(
+      ...t,
+      children: /* @__PURE__ */ o(
         "path",
         {
-          d: "M9.919 15.243L11.299 11.106L11.308 11.082L11.506 10.488L12.853 6.441C12.94 6.177 13.186 6 13.465 6H16.297L16.702 7.221L17.011 8.151L14.656 10.506V10.494L14.644 10.518L9.916 15.246L9.919 15.243ZM8.221 20.334L7 24H10.636L13.201 15.354L8.221 20.334ZM17.86 10.698L15.433 13.125L18.646 24H22.285L17.86 10.698Z",
+          d: "M10.9844 27.123L19.5344 1.473C19.8284 0.591 20.6504 0 21.5774 0H31.0154L32.8124 5.403L10.9844 27.123ZM35.6954 14.07L27.6494 22.107L38.8424 60H50.9744L35.6954 14.07ZM5.17339 44.553L0.0253906 60H12.1484L21.6134 28.137L5.17339 44.556V44.553Z",
           fill: "#F1F1E4"
         }
       )
     }
   );
 }
-const r = t.memo(e);
+const r = e.memo(L);
 export {
   r as default
 };

package/dist/components/Logos/redm/WhiteLogo.js

@@ -1,40 +1,18 @@
-import { jsxs as o, jsx as L } from "react/jsx-runtime";
-import l from "react";
-function e(t) {
-  return /* @__PURE__ */ o(
+import { jsx as L } from "react/jsx-runtime";
+import t from "react";
+function e(o) {
+  return /* @__PURE__ */ L(
     "svg",
     {
-      viewBox: "0 0 30 30",
+      viewBox: "0 0 34 60",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      ...t,
-      children: [
-        /* @__PURE__ */ L(
-          "path",
-          {
-            d: "M18.3867 17.7033L18.1967 17.6833L18.5167 16.06L18.7533 14.8667L18.7767 14.7533L18.7833 14.7267L18.6267 14.7033L18.4667 14.68L18.1333 14.63L17.9 14.5967L15.67 14.2667L15.6433 14.3967L15.53 14.9333L15.5167 15L15.4533 15.3L15.4367 15.3867L15.0467 17.57H12.9667L13.0833 15.9833L13.1467 15.1367V15.0867L13.1533 15.0367L13.1733 14.7733L13.18 14.6933L13.4 11.6767V9.46L13.4167 9.04L13.43 8.71667L13.4433 8.47L13.4633 7.99L13.48 7.62333L13.49 7.37333L13.55 5.16L11.2433 5.08667L10.2933 5.05333L10.3033 5.29333L10.2767 5.75333V8.13333L10.2567 8.41L10.2233 8.77667V12.29L10.1367 12.48L10.1433 12.6567L10.0933 13.4533L10.06 13.9933L10 14.2633V14.7533L10.0067 14.9933V24.9967H20.3033V24.35L20.7633 17.5933L19.0867 17.7033H18.3867ZM12.8467 22L13.01 21.19V20.62L12.8467 20.24H17.8733L17.82 21.0233L17.8733 22H12.8467Z",
-            fill: "#F1F1E4"
-          }
-        ),
-        /* @__PURE__ */ L(
-          "path",
-          {
-            d: "M10.25 5.81L10.2767 5.78333L10.25 5.75667V5.81Z",
-            fill: "#F1F1E4"
-          }
-        ),
-        /* @__PURE__ */ L(
-          "path",
-          {
-            d: "M18.2 5L17.8733 5.94L17.78 6.22L17.4567 7.16L17.3633 7.43667L17.24 7.79L16.9567 8.62333L16.5767 9.94333L16.3733 10.9033L18.0167 11.15L19.62 11.3867L19.98 9.97L20.6233 6.69333L20.69 6.36L20.74 6.09333L20.84 5.59L20.96 5H18.2Z",
-            fill: "#F1F1E4"
-          }
-        )
-      ]
+      ...o,
+      children: /* @__PURE__ */ L("path", { d: "M20.376 13.719L21.195 10.869L22.047 8.367L22.413 7.311L22.698 6.477L23.247 4.881L23.664 3.663L23.946 2.817L24.921 0H33.27L33.063 0.621L32.838 1.77L32.661 3.072L32.388 4.08L32.187 5.085L31.377 9.225L20.37 13.722L20.376 13.719ZM27.585 38.112L32.616 37.785L31.233 58.056V59.997H0.345L0 44.391L0.129 36.225L0.114 33.516L0.324 30.567L0.507 26.991L0.609 25.371L0.762 22.986L0.741 22.458L0.861 18.399L0.996 15.201V12.099V11.346L1.026 11.01L1.098 10.236L1.158 9.402V2.268L1.239 0.885L1.209 0.165L4.014 0.255L5.862 0.315L10.935 0.48L10.752 7.119L10.731 7.872L10.677 8.97L10.62 10.413L10.581 11.157L10.539 12.123L10.488 13.383V20.031L10.095 25.374L9.822 29.079L9.804 29.316L9.747 30.111L9.735 30.264L9.723 30.411L9.537 32.952L9.186 37.71H15.426L16.278 32.952L16.599 31.161L16.647 30.897L16.839 29.997L16.881 29.796L17.223 28.188L17.307 27.795L18.141 23.856L29.112 19.425L26.655 29.187L26.64 29.262L26.574 29.601L25.869 33.18L24.909 38.052L25.479 38.112H27.582H27.585ZM23.946 51.003L23.784 48.075L23.946 45.726H8.862L9.054 47.604V49.311L8.862 51H23.946V51.003Z", fill: "#EBEBEB" })
     }
   );
 }
-const r = l.memo(e);
+const r = t.memo(e);
 export {
   r as default
 };

package/dist/components/Shroud/Shroud.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as _ } from "react/jsx-runtime";
-import i from "react";
+import s from "react";
 import { TITLE_OUTLET_ID as h } from "../Title/Title.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
@@ -14,7 +14,7 @@ function R(c) {
   const {
     forRef: r,
     ref: n
-  } = c, [u, f] = i.useState({}), d = b(h, "before"), s = i.useCallback(() => {
+  } = c, [u, f] = s.useState({}), d = b(h, "before"), i = s.useCallback(() => {
     if (!r.current)
       return;
     const o = r.current.getBoundingClientRect(), m = {
@@ -34,7 +34,7 @@ function R(c) {
       )
     );
   }, [r]);
-  return i.useEffect(s, []), p(s), /* @__PURE__ */ t(d, { children: /* @__PURE__ */ _("div", { ref: n, className: e.root, style: u, children: [
+  return s.useEffect(i, [i]), p(i), /* @__PURE__ */ t(d, { children: /* @__PURE__ */ _("div", { ref: n, className: e.root, style: u, children: [
     /* @__PURE__ */ t("div", { className: e.tile, "data-top": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-left": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-right": !0 }),