@dragunio/fe-libs 0.1.8 → 0.1.10

package/dist/index.mjs

@@ -2,8 +2,12 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   CloseIcon,
+  EyeIcon,
+  EyeOffIcon,
+  MailboxIcon,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  PhoneIcon,
   PlusIcon,
   SearchIcon,
   arrow_left,
@@ -23,7 +27,7 @@ import {
   search,
   trash,
   x_close
-} from "./chunk-HM3V3DVO.mjs";
+} from "./chunk-BAZJ5UJ5.mjs";
 
 // packages/button/src/index.tsx
 import { forwardRef } from "react";
@@ -708,41 +712,264 @@ var Toggle = forwardRef3(function Toggle2({
 Toggle.displayName = "Toggle";
 
 // packages/drawer/src/index.tsx
-import { useEffect as useEffect4 } from "react";
+import {
+  useId as useId3,
+  useRef as useRef5
+} from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
-  useEffect4(() => {
-    if (!open) return;
+
+// packages/overlay/src/useModalOverlay.ts
+import { useEffect as useEffect4, useLayoutEffect, useRef as useRef4 } from "react";
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  '[contenteditable="true"]',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+var overlayStack = [];
+var scrollLockCount = 0;
+var savedBodyStyles = null;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect4 : useLayoutEffect;
+function lockBodyScroll() {
+  if (typeof document === "undefined" || scrollLockCount++ > 0) return;
+  const { body, documentElement } = document;
+  savedBodyStyles = {
+    overflow: body.style.overflow,
+    overscrollBehavior: body.style.overscrollBehavior,
+    paddingRight: body.style.paddingRight
+  };
+  const scrollbarWidth = Math.max(
+    0,
+    window.innerWidth - documentElement.clientWidth
+  );
+  const currentPadding = Number.parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+  body.style.overflow = "hidden";
+  body.style.overscrollBehavior = "none";
+  if (scrollbarWidth > 0)
+    body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined" || scrollLockCount === 0) return;
+  scrollLockCount -= 1;
+  if (scrollLockCount > 0 || !savedBodyStyles) return;
+  const { body } = document;
+  body.style.overflow = savedBodyStyles.overflow;
+  body.style.overscrollBehavior = savedBodyStyles.overscrollBehavior;
+  body.style.paddingRight = savedBodyStyles.paddingRight;
+  savedBodyStyles = null;
+}
+function getFocusableElements(panel) {
+  return Array.from(
+    panel.querySelectorAll(FOCUSABLE_SELECTOR)
+  ).filter(
+    (element) => element.tabIndex >= 0 && !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true"
+  );
+}
+function getTopOverlay() {
+  return overlayStack.reduce((top, candidate) => {
+    if (!top || candidate.priority > top.priority) return candidate;
+    if (candidate.priority < top.priority) return top;
+    const topNode = top.panelRef.current?.parentElement;
+    const candidateNode = candidate.panelRef.current?.parentElement;
+    if (topNode && candidateNode) {
+      const position = topNode.compareDocumentPosition(candidateNode);
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING) return candidate;
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) return top;
+    }
+    return candidate;
+  }, void 0);
+}
+function useModalOverlay(options) {
+  const overlayIdRef = useRef4();
+  const previouslyFocusedRef = useRef4(null);
+  const optionsRef = useRef4(options);
+  optionsRef.current = options;
+  if (!overlayIdRef.current) overlayIdRef.current = /* @__PURE__ */ Symbol("fe-overlay");
+  useIsomorphicLayoutEffect(() => {
+    if (!options.open || typeof document === "undefined") return;
+    const overlayId = overlayIdRef.current;
+    previouslyFocusedRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    overlayStack.push({
+      id: overlayId,
+      panelRef: options.panelRef,
+      priority: options.priority ?? 0
+    });
+    lockBodyScroll();
+    const focusInitialElement = () => {
+      const { initialFocusRef, panelRef } = optionsRef.current;
+      const focusTarget = initialFocusRef?.current ?? panelRef.current;
+      focusTarget?.focus();
+    };
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (!cancelled && getTopOverlay()?.id === overlayId)
+        focusInitialElement();
+    });
     const onKeyDown = (event) => {
-      if (event.key === "Escape") onClose();
+      if (getTopOverlay()?.id !== overlayId) return;
+      if (event.key === "Escape") {
+        if (optionsRef.current.closeOnEscape !== false) {
+          event.preventDefault();
+          optionsRef.current.onClose();
+        }
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const panel = optionsRef.current.panelRef.current;
+      if (!panel) return;
+      const focusable = getFocusableElements(panel);
+      if (!focusable.length) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const activeElement = document.activeElement;
+      if (event.shiftKey && (activeElement === first || !panel.contains(activeElement))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (activeElement === last || !panel.contains(activeElement))) {
+        event.preventDefault();
+        first.focus();
+      }
     };
     document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [onClose, open]);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      cancelled = true;
+      const stackIndex = overlayStack.findIndex(
+        (entry) => entry.id === overlayId
+      );
+      if (stackIndex !== -1) overlayStack.splice(stackIndex, 1);
+      unlockBodyScroll();
+      if (optionsRef.current.restoreFocus !== false) {
+        const nextOverlay = getTopOverlay()?.panelRef.current;
+        if (nextOverlay) nextOverlay.focus();
+        else if (previouslyFocusedRef.current?.isConnected) {
+          previouslyFocusedRef.current.focus();
+        }
+      }
+    };
+  }, [options.open, options.panelRef]);
+}
+
+// packages/drawer/src/index.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var DrawerWidths = {
+  small: 360,
+  medium: 400,
+  large: 480
+};
+function Drawer({
+  open,
+  onClose,
+  title,
+  description,
+  footer,
+  side = "right",
+  width = DrawerWidths.medium,
+  fullScreen = false,
+  children,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  closeLabel = "Close drawer",
+  initialFocusRef,
+  restoreFocus = true,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const titleId = useId3();
+  const descriptionId = useId3();
+  const panelRef = useRef5(null);
+  useModalOverlay({
+    open,
+    onClose,
+    panelRef,
+    priority: 1e3,
+    closeOnEscape,
+    initialFocusRef,
+    restoreFocus
+  });
   if (!open || typeof document === "undefined") return null;
   const panelStyle = !fullScreen && (side === "left" || side === "right") ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
-  return createPortal(/* @__PURE__ */ jsx7("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
-    if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-  }, children: /* @__PURE__ */ jsxs7("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
-    /* @__PURE__ */ jsxs7("header", { className: "fe-drawer__header", children: [
-      title && /* @__PURE__ */ jsx7("h2", { children: title }),
-      /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
-    ] }),
-    /* @__PURE__ */ jsx7("div", { className: "fe-drawer__body", children }),
-    footer && /* @__PURE__ */ jsx7("footer", { className: "fe-drawer__footer", children: footer })
-  ] }) }), document.body);
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  return createPortal(
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "fe-drawer-backdrop",
+        role: "presentation",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget && closeOnBackdropClick)
+            onClose();
+        },
+        children: /* @__PURE__ */ jsxs7(
+          "aside",
+          {
+            ref: panelRef,
+            className: [
+              "fe-drawer",
+              `fe-drawer--${side}`,
+              fullScreen && "fe-drawer--full-screen",
+              className
+            ].filter(Boolean).join(" "),
+            style: panelStyle,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": describedBy,
+            "aria-label": ariaLabel ?? (title ? void 0 : "Drawer"),
+            tabIndex: -1,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxs7("header", { className: "fe-drawer__header", children: [
+                (title || description) && /* @__PURE__ */ jsxs7("div", { className: "fe-drawer__heading", children: [
+                  title && /* @__PURE__ */ jsx7("h2", { id: titleId, children: title }),
+                  description && /* @__PURE__ */ jsx7("p", { id: descriptionId, children: description })
+                ] }),
+                /* @__PURE__ */ jsx7(
+                  Button,
+                  {
+                    hierarchy: "tertiary-gray",
+                    size: "32",
+                    iconOnly: true,
+                    icon: /* @__PURE__ */ jsx7(CloseIcon, {}),
+                    "aria-label": closeLabel,
+                    onClick: onClose
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx7("div", { className: "fe-drawer__body", children }),
+              footer && /* @__PURE__ */ jsx7("footer", { className: "fe-drawer__footer", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
 }
 
 // packages/form-controls/src/controls/TextInput/text-input.tsx
-import { forwardRef as forwardRef4, useId as useId4, useState as useState6 } from "react";
+import { forwardRef as forwardRef4, useId as useId5, useState as useState6 } from "react";
 
 // packages/tooltip/src/index.tsx
-import { cloneElement, useId as useId3, useState as useState5 } from "react";
+import { cloneElement, useId as useId4, useState as useState5 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
   const [visible, setVisible] = useState5(false);
-  const id = useId3();
+  const id = useId4();
   const trigger = cloneElement(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
     children.props.onMouseEnter?.(event);
     setVisible(true);
@@ -848,7 +1075,7 @@ var TextInput = forwardRef4(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = useId4();
+    const generatedId = useId5();
     const inputId = id ?? generatedId + "-input";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
@@ -953,17 +1180,264 @@ var TextInput = forwardRef4(
 );
 TextInput.displayName = "TextInput";
 
+// packages/form-controls/src/controls/EmailInput/email-input.tsx
+import { forwardRef as forwardRef5 } from "react";
+
+// packages/form-controls/src/controls/ValidatedInput/validation.ts
+import { useState as useState7 } from "react";
+var invalidValueMessage = "Invalid value.";
+function toValidationError(result) {
+  if (typeof result === "string") return result || void 0;
+  return result === false ? invalidValueMessage : void 0;
+}
+function validateEmail(value, required = false) {
+  const email = value.trim();
+  if (!email) return required ? "Email is required." : void 0;
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) ? void 0 : "Enter a valid email address.";
+}
+function validatePassword(value, required = false) {
+  if (!value) return required ? "Password is required." : void 0;
+  if (value.length < 8) return "Use at least 8 characters.";
+  if (!/[a-z]/.test(value) || !/[A-Z]/.test(value) || !/\d/.test(value))
+    return "Include uppercase, lowercase, and a number.";
+  return void 0;
+}
+function validatePhoneNumber(value, required = false) {
+  const phoneNumber = value.trim();
+  if (!phoneNumber) return required ? "Phone number is required." : void 0;
+  if (!/^\+?[\d() ]+$/.test(phoneNumber))
+    return "Use only numbers, spaces, parentheses, and an optional leading +.";
+  const digitCount = phoneNumber.replace(/\D/g, "").length;
+  return digitCount >= 7 && digitCount <= 15 ? void 0 : "Enter a phone number with 7 to 15 digits.";
+}
+function normalizePhoneNumber(value) {
+  return value.replace(/[^\d+() ]/g, "");
+}
+function useInputValidation({
+  error,
+  errorMessage,
+  isRequired = false,
+  required = false,
+  validate,
+  validateOn = "blur",
+  builtInValidator
+}) {
+  const [validationError, setValidationError] = useState7();
+  const [hasValidated, setHasValidated] = useState7(false);
+  const hasExternalError = error !== void 0 || errorMessage !== void 0;
+  const validateValue = (value) => {
+    const builtInError = builtInValidator(value, isRequired || required);
+    const customError = builtInError ? void 0 : toValidationError(validate?.(value));
+    const nextError = builtInError ?? customError;
+    setHasValidated(true);
+    setValidationError(nextError);
+    return nextError;
+  };
+  return {
+    error: hasExternalError ? getFieldError(error, errorMessage) : validationError,
+    onValueChange(value) {
+      if (validateOn === "change" || hasValidated) validateValue(value);
+    },
+    onBlur(value) {
+      if (validateOn === "blur") validateValue(value);
+    }
+  };
+}
+
+// packages/form-controls/src/controls/EmailInput/email-input.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var EmailInput = forwardRef5(
+  function EmailInput2({
+    error,
+    errorMessage,
+    isRequired,
+    required,
+    validate,
+    validateOn,
+    onBlur,
+    onValueChange,
+    autoComplete,
+    className,
+    ...props
+  }, ref) {
+    const validation = useInputValidation({
+      error,
+      errorMessage,
+      isRequired,
+      required,
+      validate,
+      validateOn,
+      builtInValidator: validateEmail
+    });
+    return /* @__PURE__ */ jsx11(
+      TextInput,
+      {
+        ...props,
+        ref,
+        className: ["fe-email-input", className].filter(Boolean).join(" "),
+        type: "email",
+        inputMode: "email",
+        autoComplete: autoComplete ?? "email",
+        isRequired,
+        required,
+        prefix: /* @__PURE__ */ jsx11(MailboxIcon, { size: 18 }),
+        error: validation.error,
+        onValueChange: (value) => {
+          validation.onValueChange(value);
+          onValueChange?.(value);
+        },
+        onBlur: (event) => {
+          validation.onBlur(event.currentTarget.value);
+          onBlur?.(event);
+        }
+      }
+    );
+  }
+);
+EmailInput.displayName = "EmailInput";
+
+// packages/form-controls/src/controls/PasswordInput/password-input.tsx
+import { forwardRef as forwardRef6, useState as useState8 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var PasswordInput = forwardRef6(
+  function PasswordInput2({
+    error,
+    errorMessage,
+    isRequired,
+    required,
+    validate,
+    validateOn,
+    onBlur,
+    onValueChange,
+    autoComplete,
+    className,
+    showPasswordLabel = "Show password",
+    hidePasswordLabel = "Hide password",
+    ...props
+  }, ref) {
+    const [visible, setVisible] = useState8(false);
+    const validation = useInputValidation({
+      error,
+      errorMessage,
+      isRequired,
+      required,
+      validate,
+      validateOn,
+      builtInValidator: validatePassword
+    });
+    const toggleLabel = visible ? hidePasswordLabel : showPasswordLabel;
+    return /* @__PURE__ */ jsx12(
+      TextInput,
+      {
+        ...props,
+        ref,
+        className: ["fe-password-input", className].filter(Boolean).join(" "),
+        type: visible ? "text" : "password",
+        autoComplete: autoComplete ?? "current-password",
+        isRequired,
+        required,
+        suffix: /* @__PURE__ */ jsx12(
+          Button,
+          {
+            hierarchy: "tertiary-gray",
+            size: "24",
+            iconOnly: true,
+            icon: visible ? /* @__PURE__ */ jsx12(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ jsx12(EyeIcon, { size: 16 }),
+            "aria-label": toggleLabel,
+            "aria-pressed": visible,
+            className: "fe-password-input__toggle",
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => setVisible((previous) => !previous)
+          }
+        ),
+        error: validation.error,
+        onValueChange: (value) => {
+          validation.onValueChange(value);
+          onValueChange?.(value);
+        },
+        onBlur: (event) => {
+          validation.onBlur(event.currentTarget.value);
+          onBlur?.(event);
+        }
+      }
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// packages/form-controls/src/controls/PhoneNumberInput/phone-number-input.tsx
+import { forwardRef as forwardRef7, useState as useState9 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var PhoneNumberInput = forwardRef7(function PhoneNumberInput2({
+  value,
+  defaultValue = "",
+  error,
+  errorMessage,
+  isRequired,
+  required,
+  validate,
+  validateOn,
+  onBlur,
+  onValueChange,
+  autoComplete,
+  className,
+  ...props
+}, ref) {
+  const controlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState9(
+    () => normalizePhoneNumber(defaultValue)
+  );
+  const currentValue = controlled ? value : uncontrolledValue;
+  const validation = useInputValidation({
+    error,
+    errorMessage,
+    isRequired,
+    required,
+    validate,
+    validateOn,
+    builtInValidator: validatePhoneNumber
+  });
+  return /* @__PURE__ */ jsx13(
+    TextInput,
+    {
+      ...props,
+      ref,
+      className: ["fe-phone-number-input", className].filter(Boolean).join(" "),
+      type: "tel",
+      inputMode: "tel",
+      autoComplete: autoComplete ?? "tel",
+      value: currentValue,
+      isRequired,
+      required,
+      prefix: /* @__PURE__ */ jsx13(PhoneIcon, { size: 18 }),
+      error: validation.error,
+      onValueChange: (nextValue) => {
+        const normalizedValue = normalizePhoneNumber(nextValue);
+        if (!controlled) setUncontrolledValue(normalizedValue);
+        validation.onValueChange(normalizedValue);
+        onValueChange?.(normalizedValue);
+      },
+      onBlur: (event) => {
+        const normalizedValue = normalizePhoneNumber(event.currentTarget.value);
+        validation.onBlur(normalizedValue);
+        onBlur?.(event);
+      }
+    }
+  );
+});
+PhoneNumberInput.displayName = "PhoneNumberInput";
+
 // packages/form-controls/src/controls/TextArea/text-area.tsx
 import {
-  forwardRef as forwardRef5,
-  useId as useId5,
+  forwardRef as forwardRef8,
+  useId as useId6,
   useImperativeHandle,
-  useLayoutEffect,
-  useRef as useRef4,
-  useState as useState7
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef6,
+  useState as useState10
 } from "react";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var TextArea = forwardRef5(
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var TextArea = forwardRef8(
   function TextArea2({
     value,
     defaultValue = "",
@@ -990,13 +1464,13 @@ var TextArea = forwardRef5(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = useId5();
+    const generatedId = useId6();
     const inputId = id ?? generatedId + "-input";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = useState7(defaultValue);
-    const textareaRef = useRef4(null);
+    const [internalValue, setInternalValue] = useState10(defaultValue);
+    const textareaRef = useRef6(null);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -1015,7 +1489,7 @@ var TextArea = forwardRef5(
       textarea.style.height = `${textarea.scrollHeight}px`;
     };
     useImperativeHandle(ref, () => textareaRef.current, []);
-    useLayoutEffect(() => {
+    useLayoutEffect2(() => {
       if (autosize && textareaRef.current) {
         resizeToContent(textareaRef.current);
       }
@@ -1035,7 +1509,7 @@ var TextArea = forwardRef5(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx14(
             FieldLabel,
             {
               id: labelId,
@@ -1046,7 +1520,7 @@ var TextArea = forwardRef5(
             }
           ),
           /* @__PURE__ */ jsxs11("span", { className: "fe-text-area__control", children: [
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx14(
               "textarea",
               {
                 ref: textareaRef,
@@ -1070,23 +1544,23 @@ var TextArea = forwardRef5(
               }
             ),
             isRequired && placeholder && !currentValue && /* @__PURE__ */ jsxs11("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsx11("span", { children: placeholder }),
-              /* @__PURE__ */ jsx11("span", { className: "fe-field__required", children: "*" })
+              /* @__PURE__ */ jsx14("span", { children: placeholder }),
+              /* @__PURE__ */ jsx14("span", { className: "fe-field__required", children: "*" })
             ] }),
-            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx11(
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx14(
               Button,
               {
                 hierarchy: "tertiary-gray",
                 size: "24",
                 iconOnly: true,
-                icon: /* @__PURE__ */ jsx11(CloseIcon, { size: 14 }),
+                icon: /* @__PURE__ */ jsx14(CloseIcon, { size: 14 }),
                 "aria-label": clearLabel,
                 onClick: clear,
                 className: "fe-text-area__clear"
               }
             )
           ] }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx14(
             FieldMessage,
             {
               id: messageId2,
@@ -1104,16 +1578,31 @@ TextArea.displayName = "TextArea";
 
 // packages/form-controls/src/controls/Selection/selection.tsx
 import {
-  forwardRef as forwardRef6,
+  forwardRef as forwardRef9,
   useEffect as useEffect5,
-  useId as useId6,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef5,
-  useState as useState8
+  useId as useId7,
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef7,
+  useState as useState11
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var Selection = forwardRef6(
+
+// packages/overlay/src/getPortalZIndex.ts
+var DEFAULT_PORTAL_Z_INDEX = 1e3;
+function getPortalZIndex(anchor) {
+  if (!anchor || typeof window === "undefined") return DEFAULT_PORTAL_Z_INDEX;
+  let highestAncestorZIndex = DEFAULT_PORTAL_Z_INDEX - 1;
+  for (let element = anchor; element; element = element.parentElement) {
+    const zIndex = Number.parseInt(window.getComputedStyle(element).zIndex, 10);
+    if (Number.isFinite(zIndex))
+      highestAncestorZIndex = Math.max(highestAncestorZIndex, zIndex);
+  }
+  return Math.max(DEFAULT_PORTAL_Z_INDEX, highestAncestorZIndex + 1);
+}
+
+// packages/form-controls/src/controls/Selection/selection.tsx
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var Selection = forwardRef9(
   function Selection2({
     className,
     label,
@@ -1142,7 +1631,7 @@ var Selection = forwardRef6(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = useId6();
+    const generatedId = useId7();
     const triggerId = id ?? generatedId + "-trigger";
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
@@ -1160,7 +1649,7 @@ var Selection = forwardRef6(
       label ? labelId : void 0
     );
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = useState8(
+    const [internalValue, setInternalValue] = useState11(
       defaultValue ?? (multiple ? [] : "")
     );
     const selectedValue = isControlled ? value : internalValue;
@@ -1168,12 +1657,12 @@ var Selection = forwardRef6(
     const selectedOptions = options.filter(
       (option) => selectedValues.some((item) => String(item) === String(option.value))
     );
-    const [open, setOpen] = useState8(false);
-    const [query, setQuery] = useState8("");
-    const [activeIndex, setActiveIndex] = useState8(0);
-    const rootRef = useRef5(null);
-    const menuRef = useRef5(null);
-    const [menuPosition, setMenuPosition] = useState8(null);
+    const [open, setOpen] = useState11(false);
+    const [query, setQuery] = useState11("");
+    const [activeIndex, setActiveIndex] = useState11(0);
+    const rootRef = useRef7(null);
+    const menuRef = useRef7(null);
+    const [menuPosition, setMenuPosition] = useState11(null);
     useEffect5(() => {
       const close = (event) => {
         const target = event.target;
@@ -1183,7 +1672,7 @@ var Selection = forwardRef6(
       document.addEventListener("mousedown", close);
       return () => document.removeEventListener("mousedown", close);
     }, []);
-    useLayoutEffect2(() => {
+    useLayoutEffect3(() => {
       if (!open) return;
       const updateMenuPosition = () => {
         const rect = rootRef.current?.getBoundingClientRect();
@@ -1191,7 +1680,8 @@ var Selection = forwardRef6(
           setMenuPosition({
             top: rect.bottom + 7,
             left: rect.left,
-            width: rect.width
+            width: rect.width,
+            zIndex: getPortalZIndex(rootRef.current)
           });
       };
       updateMenuPosition();
@@ -1275,7 +1765,7 @@ var Selection = forwardRef6(
         ].filter(Boolean).join(" "),
         ...props,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx15(
             FieldLabel,
             {
               id: labelId,
@@ -1286,7 +1776,7 @@ var Selection = forwardRef6(
             }
           ),
           /* @__PURE__ */ jsxs12("div", { ref: rootRef, className: "fe-selection__control", children: [
-            name && selectedValues.map((item) => /* @__PURE__ */ jsx12(
+            name && selectedValues.map((item) => /* @__PURE__ */ jsx15(
               "input",
               {
                 type: "hidden",
@@ -1313,7 +1803,7 @@ var Selection = forwardRef6(
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
                 children: [
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx15(
                     "span",
                     {
                       className: [
@@ -1327,7 +1817,7 @@ var Selection = forwardRef6(
                           className: "fe-selection__tag",
                           children: [
                             option.label,
-                            /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", children: "\xD7" })
+                            /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\xD7" })
                           ]
                         },
                         String(option.value)
@@ -1335,16 +1825,16 @@ var Selection = forwardRef6(
                         item,
                         index < displayLabel.length - 1 ? ", " : ""
                       ] }, index)) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
-                        /* @__PURE__ */ jsx12("span", { children: placeholder }),
-                        isRequired && /* @__PURE__ */ jsx12("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                        /* @__PURE__ */ jsx15("span", { children: placeholder }),
+                        isRequired && /* @__PURE__ */ jsx15("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
                     }
                   ),
-                  /* @__PURE__ */ jsx12("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx12("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+                  /* @__PURE__ */ jsx15("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx15("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
                 ]
               }
             ),
-            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ jsx12(
+            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -1364,14 +1854,15 @@ var Selection = forwardRef6(
                     position: "fixed",
                     top: menuPosition.top,
                     left: menuPosition.left,
-                    width: menuPosition.width
+                    width: menuPosition.width,
+                    zIndex: menuPosition.zIndex
                   },
                   role: "listbox",
                   "aria-multiselectable": multiple || void 0,
                   children: [
                     searchable && /* @__PURE__ */ jsxs12("div", { className: "fe-selection__search", children: [
-                      /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", children: "\u2315" }),
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u2315" }),
+                      /* @__PURE__ */ jsx15(
                         "input",
                         {
                           autoFocus: true,
@@ -1385,7 +1876,7 @@ var Selection = forwardRef6(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx12("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+                    /* @__PURE__ */ jsx15("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
                       const isSelected = selectedValues.some(
                         (item) => String(item) === String(option.value)
                       );
@@ -1403,8 +1894,8 @@ var Selection = forwardRef6(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ jsx12("span", { children: option.label }),
-                            isSelected && /* @__PURE__ */ jsx12(
+                            /* @__PURE__ */ jsx15("span", { children: option.label }),
+                            isSelected && /* @__PURE__ */ jsx15(
                               "span",
                               {
                                 className: "fe-selection__check",
@@ -1416,14 +1907,14 @@ var Selection = forwardRef6(
                         },
                         String(option.value)
                       );
-                    }) : /* @__PURE__ */ jsx12("p", { className: "fe-selection__empty", children: "No matching options" }) })
+                    }) : /* @__PURE__ */ jsx15("p", { className: "fe-selection__empty", children: "No matching options" }) })
                   ]
                 }
               ),
               document.body
             )
           ] }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx15(
             FieldMessage,
             {
               id: messageId2,
@@ -1441,13 +1932,13 @@ Selection.displayName = "Selection";
 
 // packages/form-controls/src/controls/NumberInput/number-input.tsx
 import {
-  forwardRef as forwardRef7,
+  forwardRef as forwardRef10,
   useEffect as useEffect6,
-  useId as useId7,
-  useRef as useRef6,
-  useState as useState9
+  useId as useId8,
+  useRef as useRef8,
+  useState as useState12
 } from "react";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSeparator = ".") {
   return new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
@@ -1504,7 +1995,7 @@ function normalizeNumberInput(raw, options) {
     value
   };
 }
-var NumberInput = forwardRef7(
+var NumberInput = forwardRef10(
   function NumberInput2({
     value,
     defaultValue = null,
@@ -1541,14 +2032,14 @@ var NumberInput = forwardRef7(
     onKeyDown,
     ...props
   }, ref) {
-    const inputRef = useRef6(null);
-    const generatedId = useId7();
+    const inputRef = useRef8(null);
+    const generatedId = useId8();
     const messageId2 = generatedId + "-message";
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = useState9(defaultValue);
-    const [focused, setFocused] = useState9(false);
+    const [internalValue, setInternalValue] = useState12(defaultValue);
+    const [focused, setFocused] = useState12(false);
     const actualValue = isControlled ? value ?? null : internalValue;
-    const [text, setText] = useState9(
+    const [text, setText] = useState12(
       actualValue === null ? "" : formatNumber(
         actualValue,
         decimals,
@@ -1634,7 +2125,7 @@ var NumberInput = forwardRef7(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx16(
             FieldLabel,
             {
               id: labelId,
@@ -1645,9 +2136,9 @@ var NumberInput = forwardRef7(
             }
           ),
           /* @__PURE__ */ jsxs13("span", { className: "fe-number-input__control", children: [
-            resolvedPrefix && /* @__PURE__ */ jsx13("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
+            resolvedPrefix && /* @__PURE__ */ jsx16("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
             /* @__PURE__ */ jsxs13("span", { className: "fe-number-input__input-wrap", children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx16(
                 "input",
                 {
                   ref: (node) => {
@@ -1689,35 +2180,35 @@ var NumberInput = forwardRef7(
                   className: "fe-number-input__placeholder",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ jsx13("span", { children: placeholder }),
-                    /* @__PURE__ */ jsx13("span", { className: "fe-field__required", children: "*" })
+                    /* @__PURE__ */ jsx16("span", { children: placeholder }),
+                    /* @__PURE__ */ jsx16("span", { className: "fe-field__required", children: "*" })
                   ]
                 }
               )
             ] }),
-            resolvedSuffix && /* @__PURE__ */ jsx13("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
+            resolvedSuffix && /* @__PURE__ */ jsx16("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
             endAdornment,
             showStepper && /* @__PURE__ */ jsxs13("span", { className: "fe-number-input__stepper", children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx16(
                 Button,
                 {
                   hierarchy: "tertiary-gray",
                   size: "24",
                   iconOnly: true,
-                  icon: /* @__PURE__ */ jsx13(ChevronUpIcon, { size: 12 }),
+                  icon: /* @__PURE__ */ jsx16(ChevronUpIcon, { size: 12 }),
                   "aria-label": incrementLabel,
                   disabled: disableIncrement,
                   onMouseDown: (event) => event.preventDefault(),
                   onClick: () => adjustValue(1)
                 }
               ),
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx16(
                 Button,
                 {
                   hierarchy: "tertiary-gray",
                   size: "24",
                   iconOnly: true,
-                  icon: /* @__PURE__ */ jsx13(ChevronDownIcon, { size: 12 }),
+                  icon: /* @__PURE__ */ jsx16(ChevronDownIcon, { size: 12 }),
                   "aria-label": decrementLabel,
                   disabled: disableDecrement,
                   onMouseDown: (event) => event.preventDefault(),
@@ -1726,7 +2217,7 @@ var NumberInput = forwardRef7(
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx16(
             FieldMessage,
             {
               id: messageId2,
@@ -1743,8 +2234,8 @@ var NumberInput = forwardRef7(
 NumberInput.displayName = "NumberInput";
 
 // packages/form-controls/src/controls/CurrencyInput/currency-input.tsx
-import { useState as useState10 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function CurrencyInput({
   suffix = "VND",
   currencies,
@@ -1755,13 +2246,13 @@ function CurrencyInput({
   disabled,
   ...props
 }) {
-  const [internalCurrency, setInternalCurrency] = useState10(
+  const [internalCurrency, setInternalCurrency] = useState13(
     defaultCurrency ?? currencies?.[0]?.code ?? ""
   );
   const selectedCurrency = currency ?? internalCurrency;
   const current = currencies?.find((item) => item.code === selectedCurrency);
   const currencySuffix = current?.suffix ?? current?.code ?? suffix;
-  const endAdornment = currencies?.length ? /* @__PURE__ */ jsx14(
+  const endAdornment = currencies?.length ? /* @__PURE__ */ jsx17(
     Selection,
     {
       className: "fe-currency-input__currency",
@@ -1780,8 +2271,8 @@ function CurrencyInput({
         onCurrencyChange?.(next);
       }
     }
-  ) : /* @__PURE__ */ jsx14("span", { className: "fe-currency-input__suffix", children: currencySuffix });
-  return /* @__PURE__ */ jsx14(
+  ) : /* @__PURE__ */ jsx17("span", { className: "fe-currency-input__suffix", children: currencySuffix });
+  return /* @__PURE__ */ jsx17(
     NumberInput,
     {
       ...props,
@@ -1793,8 +2284,8 @@ function CurrencyInput({
 }
 
 // packages/form-controls/src/controls/DateTimePicker/date-time-picker.tsx
-import { useEffect as useEffect7, useId as useId8, useRef as useRef7, useState as useState11 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useId as useId9, useRef as useRef9, useState as useState14 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 var pad = (value) => String(value).padStart(2, "0");
 function formatDate(date, format) {
   return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
@@ -1830,7 +2321,7 @@ function DateTimePicker(props) {
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy
   } = props;
-  const generatedId = useId8();
+  const generatedId = useId9();
   const triggerId = id ?? generatedId + "-trigger";
   const labelId = generatedId + "-label";
   const messageId2 = generatedId + "-message";
@@ -1848,20 +2339,20 @@ function DateTimePicker(props) {
   );
   const isRange = mode === "range";
   const controlled = props.value !== void 0;
-  const [singleInternal, setSingleInternal] = useState11(
+  const [singleInternal, setSingleInternal] = useState14(
     (!isRange ? props.defaultValue : null) ?? null
   );
-  const [rangeInternal, setRangeInternal] = useState11(
+  const [rangeInternal, setRangeInternal] = useState14(
     (isRange ? props.defaultValue : void 0) ?? [null, null]
   );
   const singleValue = !isRange ? props.value ?? singleInternal : null;
   const rangeValue = isRange ? props.value ?? rangeInternal : [null, null];
-  const [open, setOpen] = useState11(false);
-  const [month, setMonth] = useState11(
+  const [open, setOpen] = useState14(false);
+  const [month, setMonth] = useState14(
     () => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date())
   );
-  const [editingEnd, setEditingEnd] = useState11(false);
-  const rootRef = useRef7(null);
+  const [editingEnd, setEditingEnd] = useState14(false);
+  const rootRef = useRef9(null);
   useEffect7(() => {
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -1935,7 +2426,7 @@ function DateTimePicker(props) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx18(
           FieldLabel,
           {
             id: labelId,
@@ -1959,14 +2450,14 @@ function DateTimePicker(props) {
             "aria-expanded": open,
             onClick: () => setOpen((current) => !current),
             children: [
-              /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u25F7" }),
+              /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: "\u25F7" }),
               /* @__PURE__ */ jsxs14(
                 "span",
                 {
                   className: !shownValue && placeholder ? "fe-datetime-picker__value is-placeholder" : "fe-datetime-picker__value",
                   children: [
                     shownValue || placeholder || (isRange ? "Select date range" : "Select date and time"),
-                    isRequired && placeholder && !shownValue && /* @__PURE__ */ jsx15("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                    isRequired && placeholder && !shownValue && /* @__PURE__ */ jsx18("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                   ]
                 }
               )
@@ -1981,7 +2472,7 @@ function DateTimePicker(props) {
             "aria-label": "Date and time picker",
             children: [
               /* @__PURE__ */ jsxs14("div", { className: "fe-datetime-picker__month", children: [
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     type: "button",
@@ -1992,11 +2483,11 @@ function DateTimePicker(props) {
                     children: "\u2039"
                   }
                 ),
-                /* @__PURE__ */ jsx15("strong", { children: month.toLocaleDateString(locale, {
+                /* @__PURE__ */ jsx18("strong", { children: month.toLocaleDateString(locale, {
                   month: "long",
                   year: "numeric"
                 }) }),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     type: "button",
@@ -2008,12 +2499,12 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx15("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx15("span", { children: day }, day)) }),
-              /* @__PURE__ */ jsx15("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
+              /* @__PURE__ */ jsx18("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx18("span", { children: day }, day)) }),
+              /* @__PURE__ */ jsx18("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
                 const inMonth = day.getMonth() === month.getMonth();
                 const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
                 const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
-                return /* @__PURE__ */ jsx15(
+                return /* @__PURE__ */ jsx18(
                   "button",
                   {
                     type: "button",
@@ -2029,7 +2520,7 @@ function DateTimePicker(props) {
                 );
               }) }),
               isRange && /* @__PURE__ */ jsxs14("div", { className: "fe-datetime-picker__range-tabs", children: [
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     type: "button",
@@ -2038,7 +2529,7 @@ function DateTimePicker(props) {
                     children: "Start"
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     type: "button",
@@ -2050,7 +2541,7 @@ function DateTimePicker(props) {
               ] }),
               /* @__PURE__ */ jsxs14("label", { className: "fe-datetime-picker__time", children: [
                 "Time",
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx18(
                   "input",
                   {
                     type: "time",
@@ -2063,7 +2554,7 @@ function DateTimePicker(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx18(
           FieldMessage,
           {
             id: messageId2,
@@ -2078,9 +2569,9 @@ function DateTimePicker(props) {
 }
 
 // packages/form-controls/src/controls/Checkbox/checkbox.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-var Checkbox = forwardRef8(
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var Checkbox = forwardRef11(
   function Checkbox2({
     label,
     labelPosition = "right",
@@ -2097,9 +2588,9 @@ var Checkbox = forwardRef8(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs15("label", { className: classes, style, children: [
-      label && labelPosition === "top" && /* @__PURE__ */ jsx16("span", { className: "fe-checkbox__label", children: label }),
+      label && labelPosition === "top" && /* @__PURE__ */ jsx19("span", { className: "fe-checkbox__label", children: label }),
       /* @__PURE__ */ jsxs15("span", { className: "fe-checkbox__content", children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx19(
           "input",
           {
             ref,
@@ -2110,8 +2601,8 @@ var Checkbox = forwardRef8(
             ...props
           }
         ),
-        /* @__PURE__ */ jsx16("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
-        label && labelPosition === "right" && /* @__PURE__ */ jsx16("span", { className: "fe-checkbox__label", children: label })
+        /* @__PURE__ */ jsx19("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ jsx19("span", { className: "fe-checkbox__label", children: label })
       ] })
     ] });
   }
@@ -2119,9 +2610,9 @@ var Checkbox = forwardRef8(
 Checkbox.displayName = "Checkbox";
 
 // packages/form-controls/src/controls/RadioButton/radio-button.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-var RadioButton = forwardRef9(
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var RadioButton = forwardRef12(
   function RadioButton2({
     label,
     labelPosition = "right",
@@ -2138,9 +2629,9 @@ var RadioButton = forwardRef9(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs16("label", { className: classes, style, children: [
-      label && labelPosition === "top" && /* @__PURE__ */ jsx17("span", { className: "fe-radio-button__label", children: label }),
+      label && labelPosition === "top" && /* @__PURE__ */ jsx20("span", { className: "fe-radio-button__label", children: label }),
       /* @__PURE__ */ jsxs16("span", { className: "fe-radio-button__content", children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx20(
           "input",
           {
             ref,
@@ -2151,8 +2642,8 @@ var RadioButton = forwardRef9(
             ...props
           }
         ),
-        /* @__PURE__ */ jsx17("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
-        label && labelPosition === "right" && /* @__PURE__ */ jsx17("span", { className: "fe-radio-button__label", children: label })
+        /* @__PURE__ */ jsx20("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ jsx20("span", { className: "fe-radio-button__label", children: label })
       ] })
     ] });
   }
@@ -2160,9 +2651,9 @@ var RadioButton = forwardRef9(
 RadioButton.displayName = "RadioButton";
 
 // packages/form-controls/src/controls/RadioGroup/radio-group.tsx
-import { forwardRef as forwardRef10, useId as useId9 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
-var RadioGroup = forwardRef10(
+import { forwardRef as forwardRef13, useId as useId10 } from "react";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var RadioGroup = forwardRef13(
   function RadioGroup2({
     label,
     labelPosition = "top",
@@ -2180,7 +2671,7 @@ var RadioGroup = forwardRef10(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = useId9();
+    const generatedId = useId10();
     const groupName = name ?? `fe-radio-group-${generatedId}`;
     const labelId = `${id ?? generatedId}-label`;
     const isControlled = value !== void 0;
@@ -2197,9 +2688,9 @@ var RadioGroup = forwardRef10(
     return /* @__PURE__ */ jsxs17("div", { ref, className: classes, ...props, children: [
       label && labelPosition === "top" && /* @__PURE__ */ jsxs17("span", { id: labelId, className: "fe-radio-group__label", children: [
         label,
-        isRequired && /* @__PURE__ */ jsx18("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+        isRequired && /* @__PURE__ */ jsx21("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx21(
         "div",
         {
           id,
@@ -2211,7 +2702,7 @@ var RadioGroup = forwardRef10(
           children: options.map((option) => {
             const optionDisabled = disabled || option.disabled;
             const optionValue = String(option.value);
-            return /* @__PURE__ */ jsx18(
+            return /* @__PURE__ */ jsx21(
               RadioButton,
               {
                 name: groupName,
@@ -2230,7 +2721,7 @@ var RadioGroup = forwardRef10(
       ),
       label && labelPosition === "right" && /* @__PURE__ */ jsxs17("span", { id: labelId, className: "fe-radio-group__label", children: [
         label,
-        isRequired && /* @__PURE__ */ jsx18("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+        isRequired && /* @__PURE__ */ jsx21("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
       ] })
     ] });
   }
@@ -2238,12 +2729,12 @@ var RadioGroup = forwardRef10(
 RadioGroup.displayName = "RadioGroup";
 
 // packages/expandable-section/src/index.tsx
-import { useId as useId10, useState as useState12 } from "react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useId as useId11, useState as useState15 } from "react";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = useState12(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = useState15(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
-  const id = useId10();
+  const id = useId11();
   const toggle = () => {
     if (disabled) return;
     const next = !isExpanded;
@@ -2252,15 +2743,15 @@ function ExpandableSection({ title, children, expanded, defaultExpanded = false,
   };
   return /* @__PURE__ */ jsxs18("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
     /* @__PURE__ */ jsxs18("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
-      /* @__PURE__ */ jsx19("span", { children: title }),
-      /* @__PURE__ */ jsx19("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+      /* @__PURE__ */ jsx22("span", { children: title }),
+      /* @__PURE__ */ jsx22("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsx19("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx19("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ jsx22("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx22("div", { className: "fe-expandable-section__content-inner", children }) })
   ] });
 }
 
 // packages/loading/src/index.tsx
-import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 var sizes = {
   small: "16px",
   medium: "24px",
@@ -2274,14 +2765,14 @@ function Loading({ size = "medium", color = "#2878f0", label, className, style,
     ...style
   };
   return /* @__PURE__ */ jsxs19("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
-    /* @__PURE__ */ jsx20("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ jsx20("span", { className: "fe-loading__label", children: label }),
-    !label && /* @__PURE__ */ jsx20("span", { className: "fe-loading__sr-only", children: "Loading" })
+    /* @__PURE__ */ jsx23("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx23("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ jsx23("span", { className: "fe-loading__sr-only", children: "Loading" })
   ] });
 }
 
 // packages/skeleton/src/index.tsx
-import { Fragment as Fragment3, jsx as jsx21 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24 } from "react/jsx-runtime";
 var pixels = (value) => typeof value === "number" ? `${value}px` : value;
 function SkeletonBase({ variant = "box", shape, width, height, count = 1, animated = true, className, style, ...props }) {
   const resolvedVariant = shape ?? variant;
@@ -2292,7 +2783,7 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
     "--fe-skeleton-height": resolvedHeight,
     ...style
   };
-  return /* @__PURE__ */ jsx21(Fragment3, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(Fragment3, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx24(
     "div",
     {
       className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
@@ -2304,16 +2795,16 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
   )) });
 }
 function SkeletonCircle({ size = 40, ...props }) {
-  return /* @__PURE__ */ jsx21(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+  return /* @__PURE__ */ jsx24(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
 }
 function SkeletonSquare({ size = 80, ...props }) {
-  return /* @__PURE__ */ jsx21(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+  return /* @__PURE__ */ jsx24(SkeletonBase, { variant: "box", width: size, height: size, ...props });
 }
 function SkeletonBox({ width = "100%", height = 80, ...props }) {
-  return /* @__PURE__ */ jsx21(SkeletonBase, { variant: "box", width, height, ...props });
+  return /* @__PURE__ */ jsx24(SkeletonBase, { variant: "box", width, height, ...props });
 }
 function SkeletonLine({ width = "100%", height = 12, ...props }) {
-  return /* @__PURE__ */ jsx21(SkeletonBase, { variant: "line", width, height, ...props });
+  return /* @__PURE__ */ jsx24(SkeletonBase, { variant: "line", width, height, ...props });
 }
 var Skeleton = Object.assign(SkeletonBase, {
   Circle: SkeletonCircle,
@@ -2323,9 +2814,12 @@ var Skeleton = Object.assign(SkeletonBase, {
 });
 
 // packages/modal/src/index.tsx
-import { useEffect as useEffect8, useId as useId11, useRef as useRef8 } from "react";
+import {
+  useId as useId12,
+  useRef as useRef10
+} from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 function Modal({
   open,
   onClose,
@@ -2336,60 +2830,87 @@ function Modal({
   actions = [],
   size = "medium",
   closeOnBackdropClick = true,
+  closeOnEscape = true,
   closeButton = true,
   closeLabel = "Close modal",
+  initialFocusRef,
+  restoreFocus = true,
   className,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
   ...props
 }) {
-  const titleId = useId11();
-  const panelRef = useRef8(null);
-  useEffect8(() => {
-    if (!open) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    panelRef.current?.focus();
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [onClose, open]);
+  const titleId = useId12();
+  const descriptionId = useId12();
+  const panelRef = useRef10(null);
+  useModalOverlay({
+    open,
+    onClose,
+    panelRef,
+    priority: 1100,
+    closeOnEscape,
+    initialFocusRef,
+    restoreFocus
+  });
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
   return createPortal3(
-    /* @__PURE__ */ jsx22("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
-      if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-    }, children: /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsx25(
       "div",
       {
-        ref: panelRef,
-        className: ["fe-modal", `fe-modal--${size}`, className].filter(Boolean).join(" "),
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? titleId : void 0,
-        "aria-label": title ? void 0 : "Modal",
-        tabIndex: -1,
-        ...props,
-        children: [
-          (title || description || closeButton) && /* @__PURE__ */ jsxs20("header", { className: "fe-modal__header", children: [
-            /* @__PURE__ */ jsxs20("div", { className: "fe-modal__heading", children: [
-              title && /* @__PURE__ */ jsx22("h2", { id: titleId, children: title }),
-              description && /* @__PURE__ */ jsx22("p", { children: description })
-            ] }),
-            closeButton && /* @__PURE__ */ jsx22(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ jsx22(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
-          ] }),
-          /* @__PURE__ */ jsx22("div", { className: "fe-modal__body", children }),
-          hasFooter && /* @__PURE__ */ jsxs20("footer", { className: "fe-modal__footer", children: [
-            footer && /* @__PURE__ */ jsx22("div", { className: "fe-modal__footer-content", children: footer }),
-            actions.length > 0 && /* @__PURE__ */ jsx22("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ jsx22(Button, { ...action, children: label }, index)) })
-          ] })
-        ]
+        className: "fe-modal-backdrop",
+        role: "presentation",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget && closeOnBackdropClick)
+            onClose();
+        },
+        children: /* @__PURE__ */ jsxs20(
+          "div",
+          {
+            ref: panelRef,
+            className: ["fe-modal", `fe-modal--${size}`, className].filter(Boolean).join(" "),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": describedBy,
+            "aria-label": ariaLabel ?? (title ? void 0 : "Modal"),
+            tabIndex: -1,
+            ...props,
+            children: [
+              (title || description || closeButton) && /* @__PURE__ */ jsxs20("header", { className: "fe-modal__header", children: [
+                /* @__PURE__ */ jsxs20("div", { className: "fe-modal__heading", children: [
+                  title && /* @__PURE__ */ jsx25("h2", { id: titleId, children: title }),
+                  description && /* @__PURE__ */ jsx25("p", { id: descriptionId, children: description })
+                ] }),
+                closeButton && /* @__PURE__ */ jsx25(
+                  Button,
+                  {
+                    hierarchy: "tertiary-gray",
+                    size: "32",
+                    iconOnly: true,
+                    icon: /* @__PURE__ */ jsx25(CloseIcon, {}),
+                    "aria-label": closeLabel,
+                    onClick: onClose
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx25("div", { className: "fe-modal__body", children }),
+              hasFooter && /* @__PURE__ */ jsxs20("footer", { className: "fe-modal__footer", children: [
+                footer && /* @__PURE__ */ jsx25("div", { className: "fe-modal__footer-content", children: footer }),
+                actions.length > 0 && /* @__PURE__ */ jsx25("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ jsx25(Button, { ...action, children: label }, index)) })
+              ] })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     document.body
   );
 }
 
 // packages/progress/src/index.tsx
-import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 function ProgressBar({ value, max = 100, label, showValue = true, size = "medium", color = "#2878f0", className, style, "aria-label": ariaLabel, ...props }) {
   const indeterminate = value === null || value === void 0;
   const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, Number(value) / Math.max(1, max) * 100));
@@ -2401,15 +2922,15 @@ function ProgressBar({ value, max = 100, label, showValue = true, size = "medium
   const visibleValue = `${Math.round(percentage)}%`;
   return /* @__PURE__ */ jsxs21("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
     (label || !indeterminate && showValue) && /* @__PURE__ */ jsxs21("div", { className: "fe-progress__meta", children: [
-      label && /* @__PURE__ */ jsx23("span", { className: "fe-progress__label", children: label }),
-      !indeterminate && showValue && /* @__PURE__ */ jsx23("output", { className: "fe-progress__value", children: visibleValue })
+      label && /* @__PURE__ */ jsx26("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ jsx26("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__PURE__ */ jsx23("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ jsx23("span", { className: "fe-progress__indicator" }) })
+    /* @__PURE__ */ jsx26("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ jsx26("span", { className: "fe-progress__indicator" }) })
   ] });
 }
 
 // packages/chip/src/index.tsx
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var statuses = ["default", "info", "success", "warning", "error", "neutral", "pending", "processing"];
 function Chip({ children, status = "default", color, variant = "subtle", dot = false, onRemove, removeLabel = "Remove", className, style, ...props }) {
   const usesCustomColor = Boolean(color);
@@ -2419,15 +2940,15 @@ function Chip({ children, status = "default", color, variant = "subtle", dot = f
   };
   const resolvedStatus = statuses.includes(status) ? status : "default";
   return /* @__PURE__ */ jsxs22("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
-    dot && /* @__PURE__ */ jsx24("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx24("span", { className: "fe-chip__content", children }),
-    onRemove && /* @__PURE__ */ jsx24(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx24(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
+    dot && /* @__PURE__ */ jsx27("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx27("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ jsx27(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx27(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
 
 // packages/message/src/index.tsx
-import { useEffect as useEffect9, useState as useState13 } from "react";
-import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState16 } from "react";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var messageId = 0;
 var entries = [];
 var listeners = /* @__PURE__ */ new Set();
@@ -2460,22 +2981,22 @@ var message = {
 };
 var icons = { success: "\u2713", info: "i", warning: "!", error: "\xD7" };
 function Message({ maxCount = 4, closeLabel = "Close notification", className, ...props }) {
-  const [visibleEntries, setVisibleEntries] = useState13(entries);
-  useEffect9(() => {
+  const [visibleEntries, setVisibleEntries] = useState16(entries);
+  useEffect8(() => {
     const listener = (nextEntries) => setVisibleEntries(nextEntries);
     listeners.add(listener);
     return () => {
       listeners.delete(listener);
     };
   }, []);
-  return /* @__PURE__ */ jsx25("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ jsxs23("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
-    /* @__PURE__ */ jsx25("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+  return /* @__PURE__ */ jsx28("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ jsxs23("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx28("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
     /* @__PURE__ */ jsxs23("div", { className: "fe-message__body", children: [
-      entry.title && /* @__PURE__ */ jsx25("strong", { className: "fe-message__title", children: entry.title }),
-      /* @__PURE__ */ jsx25("div", { className: "fe-message__content", children: entry.content })
+      entry.title && /* @__PURE__ */ jsx28("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ jsx28("div", { className: "fe-message__content", children: entry.content })
     ] }),
-    entry.action && /* @__PURE__ */ jsx25("span", { className: "fe-message__action", children: entry.action }),
-    /* @__PURE__ */ jsx25(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
+    entry.action && /* @__PURE__ */ jsx28("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ jsx28(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
   ] }, entry.id)) });
 }
 ((Message2) => {
@@ -2489,8 +3010,8 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
 })(Message || (Message = {}));
 
 // packages/snackbar/src/index.tsx
-import { useEffect as useEffect10 } from "react";
-import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect9 } from "react";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function Snackbar({
   open,
   message: message2,
@@ -2504,12 +3025,12 @@ function Snackbar({
 }) {
   const vertical = anchorOrigin.vertical ?? "bottom";
   const horizontal = anchorOrigin.horizontal ?? "center";
-  useEffect10(() => {
+  useEffect9(() => {
     if (!open || autoHideDuration === null) return void 0;
     const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
     return () => window.clearTimeout(timer);
   }, [open, autoHideDuration, onClose]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!open) return void 0;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose?.("escapeKeyDown");
@@ -2518,16 +3039,16 @@ function Snackbar({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx26("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs24("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx26("span", { className: "fe-snackbar__message", children: message2 }),
-    action && /* @__PURE__ */ jsx26("span", { className: "fe-snackbar__action", children: action }),
-    onClose && /* @__PURE__ */ jsx26(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
+  return /* @__PURE__ */ jsx29("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs24("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx29("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ jsx29("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ jsx29(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
   ] }) });
 }
 
 // packages/avatar/src/index.tsx
-import { Children, isValidElement as isValidElement2, useState as useState14 } from "react";
-import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Children, isValidElement as isValidElement2, useState as useState17 } from "react";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var FALLBACK_AVATARS = [
   {
     background: "#E0E7FF",
@@ -2868,15 +3389,15 @@ function AvatarFallbackIcon({ avatar }) {
       focusable: "false",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx27("rect", { width: "24", height: "24", fill: background }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30("rect", { width: "24", height: "24", fill: background }),
+        /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M3 24c.52-3.79 3.58-6.25 9-6.25S20.48 20.21 21 24",
             fill: shirt
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M8.1 17.65h7.8l1.05 2.05H7.05l1.05-2.05Z",
@@ -2884,38 +3405,38 @@ function AvatarFallbackIcon({ avatar }) {
             opacity: ".72"
           }
         ),
-        /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "10.25", r: "5.25", fill: skin }),
-        hairStyle === 0 && /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "10.25", r: "5.25", fill: skin }),
+        hairStyle === 0 && /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M6.75 10.25C6.75 6.34 9.02 4 12.15 4c3.22 0 5.1 2.33 5.1 5.54-1.6-1.41-3.46-2.1-5.59-2.1-1.63 0-3.27.56-4.91 1.68Z",
             fill: hair
           }
         ),
-        hairStyle === 1 && /* @__PURE__ */ jsx27(
+        hairStyle === 1 && /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M6.6 10.1c.16-3.93 2.57-6.2 5.62-6.2 3.57 0 5.3 2.75 5.08 6.32-1.42-1.23-2.91-1.82-4.48-1.82-2.4 0-3.9.65-6.22 1.7Z",
             fill: hair
           }
         ),
-        hairStyle === 2 && /* @__PURE__ */ jsx27(
+        hairStyle === 2 && /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M6.8 10.55C6.8 6.28 9.43 4 12.2 4c3.46 0 5.13 2.83 4.93 6.38-1.38-1.58-3.03-2.38-4.92-2.38-1.81 0-3.61.85-5.41 2.55Z",
             fill: hair
           }
         ),
-        hairStyle === 3 && /* @__PURE__ */ jsx27(
+        hairStyle === 3 && /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M6.66 10.1C6.94 6.12 9.18 4 12.1 4c3.77 0 5.2 2.95 5.18 6.21-1.5-1.07-3.1-1.6-4.8-1.6-2.18 0-3.98.5-5.82 1.49Z",
             fill: hair
           }
         ),
-        /* @__PURE__ */ jsx27("circle", { cx: "10.05", cy: "10.65", r: ".48", fill: "#3B2924" }),
-        /* @__PURE__ */ jsx27("circle", { cx: "13.95", cy: "10.65", r: ".48", fill: "#3B2924" }),
-        expression === 0 && /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx30("circle", { cx: "10.05", cy: "10.65", r: ".48", fill: "#3B2924" }),
+        /* @__PURE__ */ jsx30("circle", { cx: "13.95", cy: "10.65", r: ".48", fill: "#3B2924" }),
+        expression === 0 && /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M10.25 13.2c1.08.66 2.42.66 3.5 0",
@@ -2925,7 +3446,7 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 1 && /* @__PURE__ */ jsx27(
+        expression === 1 && /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M10.5 13.2h3",
@@ -2935,7 +3456,7 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 2 && /* @__PURE__ */ jsx27(
+        expression === 2 && /* @__PURE__ */ jsx30(
           "path",
           {
             d: "M10.6 13.38c.84-.44 1.96-.44 2.8 0",
@@ -2945,11 +3466,11 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 3 && /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "13.2", r: ".82", fill: "#B95A5A" }),
+        expression === 3 && /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "13.2", r: ".82", fill: "#B95A5A" }),
         glasses && /* @__PURE__ */ jsxs25("g", { fill: "none", stroke: "#3C4355", strokeWidth: ".65", children: [
-          /* @__PURE__ */ jsx27("circle", { cx: "10", cy: "10.55", r: "1.45" }),
-          /* @__PURE__ */ jsx27("circle", { cx: "14", cy: "10.55", r: "1.45" }),
-          /* @__PURE__ */ jsx27("path", { d: "M11.45 10.55h1.1M8.55 10.55H7.5m9 0h-1.05" })
+          /* @__PURE__ */ jsx30("circle", { cx: "10", cy: "10.55", r: "1.45" }),
+          /* @__PURE__ */ jsx30("circle", { cx: "14", cy: "10.55", r: "1.45" }),
+          /* @__PURE__ */ jsx30("path", { d: "M11.45 10.55h1.1M8.55 10.55H7.5m9 0h-1.05" })
         ] })
       ]
     }
@@ -2968,10 +3489,10 @@ function Avatar({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const [generatedFallbackIndex] = useState14(
+  const [generatedFallbackIndex] = useState17(
     () => Math.floor(Math.random() * FALLBACK_AVATARS.length)
   );
-  const [failedImageSrc, setFailedImageSrc] = useState14();
+  const [failedImageSrc, setFailedImageSrc] = useState17();
   const imageSrc = src?.trim();
   const trimmedContent = content?.trim() ?? "";
   const showImage = Boolean(imageSrc && failedImageSrc !== imageSrc);
@@ -2992,7 +3513,7 @@ function Avatar({
       "aria-label": showImage ? ariaLabel : ariaLabel ?? fallbackLabel,
       ...props,
       children: [
-        showImage && /* @__PURE__ */ jsx27(
+        showImage && /* @__PURE__ */ jsx30(
           "img",
           {
             className: "fe-avatar__image",
@@ -3001,8 +3522,8 @@ function Avatar({
             onError: () => setFailedImageSrc(imageSrc)
           }
         ),
-        !showImage && initials && /* @__PURE__ */ jsx27("span", { className: "fe-avatar__initials", "aria-hidden": "true", children: initials }),
-        !showImage && !initials && /* @__PURE__ */ jsx27(AvatarFallbackIcon, { avatar: selectedFallback })
+        !showImage && initials && /* @__PURE__ */ jsx30("span", { className: "fe-avatar__initials", "aria-hidden": "true", children: initials }),
+        !showImage && !initials && /* @__PURE__ */ jsx30(AvatarFallbackIcon, { avatar: selectedFallback })
       ]
     }
   );
@@ -3037,7 +3558,7 @@ function AvatarGroup({
       ...props,
       children: [
         /* @__PURE__ */ jsxs25("div", { className: "fe-avatar-group__items", children: [
-          visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsx27(
+          visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsx30(
             "span",
             {
               className: "fe-avatar-group__item",
@@ -3060,11 +3581,1984 @@ function AvatarGroup({
             }
           )
         ] }),
-        singleContent && /* @__PURE__ */ jsx27("span", { className: "fe-avatar-group__content", children: singleContent })
+        singleContent && /* @__PURE__ */ jsx30("span", { className: "fe-avatar-group__content", children: singleContent })
       ]
     }
   );
 }
+
+// packages/file-upload/src/index.tsx
+import {
+  forwardRef as forwardRef14,
+  useId as useId13,
+  useMemo as useMemo3,
+  useRef as useRef11,
+  useState as useState18,
+  useEffect as useEffect10
+} from "react";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+var FILE_UPLOAD_ACCEPTS = {
+  all: [],
+  image: [
+    "image/*",
+    ".avif",
+    ".bmp",
+    ".gif",
+    ".heic",
+    ".heif",
+    ".ico",
+    ".jpeg",
+    ".jpg",
+    ".png",
+    ".svg",
+    ".tif",
+    ".tiff",
+    ".webp"
+  ],
+  pdf: [".pdf"],
+  word: [".doc", ".docm", ".docx", ".dot", ".dotx", ".odt", ".rtf"],
+  spreadsheet: [".csv", ".ods", ".xls", ".xlsb", ".xlsm", ".xlsx"],
+  presentation: [".odp", ".pot", ".potx", ".pps", ".ppsx", ".ppt", ".pptx"],
+  document: [
+    ".pdf",
+    ".doc",
+    ".docm",
+    ".docx",
+    ".dot",
+    ".dotx",
+    ".odt",
+    ".rtf",
+    ".csv",
+    ".xls",
+    ".xlsb",
+    ".xlsx",
+    ".xlsm",
+    ".ods",
+    ".pot",
+    ".potx",
+    ".pps",
+    ".ppsx",
+    ".ppt",
+    ".pptx",
+    ".odp"
+  ],
+  text: [".log", ".md", ".rtf", ".text", ".txt"],
+  csv: [".csv"],
+  json: [".json"],
+  xml: [".xml"],
+  code: [
+    ".c",
+    ".cpp",
+    ".cs",
+    ".css",
+    ".go",
+    ".html",
+    ".java",
+    ".js",
+    ".jsx",
+    ".php",
+    ".py",
+    ".rb",
+    ".rs",
+    ".scss",
+    ".sh",
+    ".sql",
+    ".swift",
+    ".ts",
+    ".tsx",
+    ".vue",
+    ".yml",
+    ".yaml"
+  ],
+  archive: [".7z", ".bz2", ".gz", ".rar", ".tar", ".tgz", ".xz", ".zip"],
+  audio: [
+    "audio/*",
+    ".aac",
+    ".aiff",
+    ".flac",
+    ".m4a",
+    ".mp3",
+    ".ogg",
+    ".opus",
+    ".wav",
+    ".wma"
+  ],
+  video: [
+    "video/*",
+    ".avi",
+    ".mkv",
+    ".mov",
+    ".mp4",
+    ".mpeg",
+    ".mpg",
+    ".webm",
+    ".wmv"
+  ],
+  font: [".ttf", ".otf", ".woff", ".woff2"],
+  email: [".eml", ".msg"]
+};
+function fileSignature(file) {
+  return `${file.name}-${file.size}-${file.lastModified}-${file.type}`;
+}
+function normalizeAccept(accept) {
+  if (!accept) return [];
+  const groups = typeof accept === "string" ? [accept] : accept;
+  return [...new Set(groups.flatMap((group) => FILE_UPLOAD_ACCEPTS[group]))];
+}
+function isAcceptedFile(file, accept) {
+  if (!accept.length) return true;
+  const type = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return accept.some((entry) => {
+    if (entry.startsWith(".")) return name.endsWith(entry);
+    if (entry.endsWith("/*")) return type.startsWith(entry.slice(0, -1));
+    return type === entry;
+  });
+}
+function formatFileSize(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 1024) return `${bytes || 0} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileVisual({ file }) {
+  const [previewUrl, setPreviewUrl] = useState18();
+  const isImage = file.type.startsWith("image/");
+  useEffect10(() => {
+    if (!isImage || typeof URL.createObjectURL !== "function") return;
+    const objectUrl = URL.createObjectURL(file);
+    setPreviewUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file, isImage]);
+  if (previewUrl) {
+    return /* @__PURE__ */ jsx31("img", { className: "fe-file-upload__thumbnail", src: previewUrl, alt: "" });
+  }
+  const extension = file.name.includes(".") ? file.name.slice(
+    file.name.lastIndexOf(".") + 1,
+    file.name.lastIndexOf(".") + 5
+  ) : "file";
+  return /* @__PURE__ */ jsx31("span", { className: "fe-file-upload__file-type", "aria-hidden": "true", children: extension });
+}
+var FileUpload = forwardRef14(
+  function FileUpload2({
+    value,
+    defaultValue = [],
+    onChange,
+    onAccept,
+    onReject,
+    onRemove,
+    accept,
+    maxSize = Infinity,
+    maxFiles = Infinity,
+    multiple = true,
+    disabled = false,
+    preventDuplicate = true,
+    label = "Upload files",
+    description,
+    dropLabel = "Drop files here",
+    browseLabel = "Browse files",
+    removeLabel = (file) => `Remove ${file.name}`,
+    showFileList = true,
+    inputProps,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, forwardedRef) {
+    const generatedId = useId13();
+    const inputId = `${generatedId}-input`;
+    const descriptionId = `${generatedId}-description`;
+    const inputRef = useRef11(null);
+    const dragDepthRef = useRef11(0);
+    const [uncontrolledFiles, setUncontrolledFiles] = useState18(() => [
+      ...defaultValue
+    ]);
+    const [isDragging, setIsDragging] = useState18(false);
+    const [rejections, setRejections] = useState18([]);
+    const files = value === void 0 ? uncontrolledFiles : [...value];
+    const acceptList = useMemo3(() => normalizeAccept(accept), [accept]);
+    const nativeAccept = acceptList.join(",") || void 0;
+    const allowedFileCount = multiple ? maxFiles : 1;
+    const safeMaxFiles = Number.isFinite(allowedFileCount) ? Math.max(0, Math.floor(allowedFileCount)) : Infinity;
+    const helperText = description ?? [
+      acceptList.length ? `Accepted: ${acceptList.join(", ")}` : void 0,
+      Number.isFinite(maxSize) ? `Up to ${formatFileSize(maxSize)} per file` : void 0
+    ].filter(Boolean).join(" \u2022 ");
+    const assignInputRef = (node) => {
+      inputRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    };
+    const commitFiles = (nextFiles) => {
+      if (value === void 0) setUncontrolledFiles(nextFiles);
+      onChange?.(nextFiles);
+    };
+    const addFiles = (fileList) => {
+      if (disabled) return;
+      const candidates = Array.from(fileList ?? []);
+      const nextRejections = [];
+      const accepted = [];
+      const knownFiles = new Set(files.map(fileSignature));
+      for (const file of candidates) {
+        const signature = fileSignature(file);
+        if (!isAcceptedFile(file, acceptList)) {
+          nextRejections.push({
+            file,
+            code: "accept",
+            message: `${file.name} is not an accepted file type.`
+          });
+        } else if (file.size > maxSize) {
+          nextRejections.push({
+            file,
+            code: "max-size",
+            message: `${file.name} exceeds ${formatFileSize(maxSize)}.`
+          });
+        } else if (preventDuplicate && knownFiles.has(signature)) {
+          nextRejections.push({
+            file,
+            code: "duplicate",
+            message: `${file.name} is already in the list.`
+          });
+        } else if (files.length + accepted.length >= safeMaxFiles) {
+          nextRejections.push({
+            file,
+            code: "max-files",
+            message: `Only ${safeMaxFiles} file${safeMaxFiles === 1 ? "" : "s"} can be selected.`
+          });
+        } else {
+          knownFiles.add(signature);
+          accepted.push(file);
+        }
+      }
+      setRejections(nextRejections);
+      if (nextRejections.length) onReject?.(nextRejections);
+      if (!accepted.length) return;
+      commitFiles([...files, ...accepted]);
+      onAccept?.(accepted);
+    };
+    const openFileDialog = () => {
+      if (!disabled) inputRef.current?.click();
+    };
+    const removeFile = (file, index) => {
+      if (disabled) return;
+      onRemove?.(file, index);
+      commitFiles(files.filter((_, fileIndex) => fileIndex !== index));
+    };
+    const handleDragEnter = (event) => {
+      event.preventDefault();
+      if (disabled) return;
+      dragDepthRef.current += 1;
+      setIsDragging(true);
+    };
+    const handleDragLeave = (event) => {
+      event.preventDefault();
+      dragDepthRef.current -= 1;
+      if (dragDepthRef.current <= 0) {
+        dragDepthRef.current = 0;
+        setIsDragging(false);
+      }
+    };
+    const handleDrop = (event) => {
+      event.preventDefault();
+      dragDepthRef.current = 0;
+      setIsDragging(false);
+      addFiles(event.dataTransfer.files);
+    };
+    return /* @__PURE__ */ jsxs26(
+      "div",
+      {
+        ...props,
+        className: ["fe-file-upload", className].filter(Boolean).join(" "),
+        children: [
+          label && /* @__PURE__ */ jsx31("label", { className: "fe-file-upload__label", htmlFor: inputId, children: label }),
+          helperText && /* @__PURE__ */ jsx31("span", { id: descriptionId, className: "fe-file-upload__description", children: helperText }),
+          /* @__PURE__ */ jsx31(
+            "input",
+            {
+              ...inputProps,
+              ref: assignInputRef,
+              id: inputId,
+              type: "file",
+              className: "fe-file-upload__input",
+              accept: nativeAccept,
+              multiple,
+              disabled,
+              "aria-label": ariaLabel,
+              "aria-describedby": helperText ? descriptionId : void 0,
+              onChange: (event) => {
+                addFiles(event.target.files);
+                event.target.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs26(
+            "div",
+            {
+              className: [
+                "fe-file-upload__dropzone",
+                isDragging && "fe-file-upload__dropzone--dragging",
+                disabled && "fe-file-upload__dropzone--disabled"
+              ].filter(Boolean).join(" "),
+              onDragEnter: handleDragEnter,
+              onDragOver: (event) => event.preventDefault(),
+              onDragLeave: handleDragLeave,
+              onDrop: handleDrop,
+              children: [
+                /* @__PURE__ */ jsx31("span", { className: "fe-file-upload__drop-icon", "aria-hidden": "true", children: "\u2191" }),
+                /* @__PURE__ */ jsx31("span", { className: "fe-file-upload__drop-label", children: dropLabel }),
+                /* @__PURE__ */ jsx31("span", { className: "fe-file-upload__drop-hint", children: "or choose from your device" }),
+                /* @__PURE__ */ jsx31(
+                  Button,
+                  {
+                    hierarchy: "secondary-gray",
+                    disabled,
+                    onClick: openFileDialog,
+                    children: browseLabel
+                  }
+                )
+              ]
+            }
+          ),
+          rejections.length > 0 && /* @__PURE__ */ jsx31("div", { className: "fe-file-upload__errors", role: "alert", children: rejections.map((rejection) => /* @__PURE__ */ jsx31("p", { children: rejection.message }, `${fileSignature(rejection.file)}-${rejection.code}`)) }),
+          showFileList && files.length > 0 && /* @__PURE__ */ jsx31("ul", { className: "fe-file-upload__list", "aria-label": "Selected files", children: files.map((file, index) => /* @__PURE__ */ jsxs26(
+            "li",
+            {
+              className: "fe-file-upload__item",
+              children: [
+                /* @__PURE__ */ jsx31("span", { className: "fe-file-upload__visual", children: /* @__PURE__ */ jsx31(FileVisual, { file }) }),
+                /* @__PURE__ */ jsxs26("span", { className: "fe-file-upload__file-details", children: [
+                  /* @__PURE__ */ jsx31("span", { className: "fe-file-upload__file-name", title: file.name, children: file.name }),
+                  /* @__PURE__ */ jsx31("span", { className: "fe-file-upload__file-size", children: formatFileSize(file.size) })
+                ] }),
+                /* @__PURE__ */ jsx31(
+                  Button,
+                  {
+                    hierarchy: "tertiary-color",
+                    color: "error",
+                    destructive: true,
+                    size: "24",
+                    iconOnly: true,
+                    icon: /* @__PURE__ */ jsx31(CloseIcon, { size: 14 }),
+                    "aria-label": removeLabel(file),
+                    disabled,
+                    onClick: () => removeFile(file, index)
+                  }
+                )
+              ]
+            },
+            `${fileSignature(file)}-${index}`
+          )) })
+        ]
+      }
+    );
+  }
+);
+FileUpload.displayName = "FileUpload";
+
+// packages/file-preview/src/index.tsx
+import {
+  useEffect as useEffect11,
+  useId as useId14,
+  useRef as useRef12,
+  useState as useState19
+} from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+function clampIndex(index, length) {
+  if (!length) return 0;
+  return Math.min(Math.max(Math.floor(index), 0), length - 1);
+}
+function hasExtension(file, extensions) {
+  const name = file.name.toLowerCase();
+  return extensions.some((extension) => name.endsWith(extension));
+}
+function getFilePreviewKind(file) {
+  const type = file.type.toLowerCase();
+  if (type.startsWith("image/") || hasExtension(file, [".svg"])) return "image";
+  if (type.startsWith("video/")) return "video";
+  if (type.startsWith("audio/")) return "audio";
+  if (type === "application/pdf" || hasExtension(file, [".pdf"])) return "pdf";
+  return "unsupported";
+}
+function formatFileSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function getFileExtension(file) {
+  const dotIndex = file.name.lastIndexOf(".");
+  return dotIndex >= 0 ? file.name.slice(dotIndex + 1).toUpperCase() : "FILE";
+}
+function useFileObjectUrl(file) {
+  const [preview, setPreview] = useState19();
+  useEffect11(() => {
+    if (!file || typeof URL.createObjectURL !== "function") {
+      setPreview(void 0);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreview({ file, url });
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+  if (!preview || preview.file !== file) return void 0;
+  return preview.url;
+}
+function startLocalDownload(file) {
+  if (typeof document === "undefined" || typeof URL.createObjectURL !== "function") {
+    return;
+  }
+  const url = URL.createObjectURL(file);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = file.name;
+  anchor.hidden = true;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function PreviewContent({ file }) {
+  const kind = getFilePreviewKind(file);
+  const url = useFileObjectUrl(file);
+  if (url && kind === "image") {
+    return /* @__PURE__ */ jsx32("img", { className: "fe-file-preview__image", src: url, alt: file.name });
+  }
+  if (url && kind === "video") {
+    return /* @__PURE__ */ jsx32("video", { className: "fe-file-preview__video", controls: true, src: url, children: "Your browser cannot play this video." });
+  }
+  if (url && kind === "audio") {
+    return /* @__PURE__ */ jsx32("audio", { className: "fe-file-preview__audio", controls: true, src: url });
+  }
+  if (url && kind === "pdf") {
+    return /* @__PURE__ */ jsx32(
+      "iframe",
+      {
+        className: "fe-file-preview__pdf",
+        title: `Preview ${file.name}`,
+        src: `${url}#view=FitH`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs27("div", { className: "fe-file-preview__unsupported", children: [
+    /* @__PURE__ */ jsx32("span", { className: "fe-file-preview__file-type", "aria-hidden": "true", children: getFileExtension(file) }),
+    /* @__PURE__ */ jsx32("p", { children: "Preview is not available for this file type." }),
+    /* @__PURE__ */ jsx32("span", { children: file.name })
+  ] });
+}
+function FilePreview({
+  open,
+  files,
+  activeIndex,
+  defaultActiveIndex = 0,
+  onActiveIndexChange,
+  onClose,
+  onEscape,
+  onDelete,
+  onDownload,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  closeLabel = "Close file preview",
+  downloadLabel = "Download",
+  deleteLabel = "Delete",
+  hideDownload = false,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const titleId = useId14();
+  const panelRef = useRef12(null);
+  const [uncontrolledIndex, setUncontrolledIndex] = useState19(defaultActiveIndex);
+  const resolvedIndex = clampIndex(
+    activeIndex ?? uncontrolledIndex,
+    files.length
+  );
+  const activeFile = files[resolvedIndex];
+  const hasPrevious = resolvedIndex > 0;
+  const hasNext = resolvedIndex < files.length - 1;
+  const requestClose = (reason) => {
+    if (reason === "escape") onEscape?.();
+    onClose(reason);
+  };
+  useModalOverlay({
+    open,
+    onClose: () => requestClose("escape"),
+    panelRef,
+    priority: 1200,
+    closeOnEscape
+  });
+  useEffect11(() => {
+    if (activeIndex === void 0) {
+      setUncontrolledIndex((index) => clampIndex(index, files.length));
+    }
+  }, [activeIndex, files.length]);
+  const changeActiveIndex = (nextIndex) => {
+    const next = clampIndex(nextIndex, files.length);
+    const nextFile = files[next];
+    if (!nextFile || next === resolvedIndex) return;
+    if (activeIndex === void 0) setUncontrolledIndex(next);
+    onActiveIndexChange?.(next, nextFile);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowLeft" && hasPrevious) {
+      event.preventDefault();
+      changeActiveIndex(resolvedIndex - 1);
+    }
+    if (event.key === "ArrowRight" && hasNext) {
+      event.preventDefault();
+      changeActiveIndex(resolvedIndex + 1);
+    }
+  };
+  if (!open || typeof document === "undefined") return null;
+  return createPortal4(
+    /* @__PURE__ */ jsx32(
+      "div",
+      {
+        className: "fe-file-preview-backdrop",
+        role: "presentation",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget && closeOnBackdropClick) {
+            requestClose("backdrop");
+          }
+        },
+        children: /* @__PURE__ */ jsxs27(
+          "div",
+          {
+            ...props,
+            ref: panelRef,
+            className: ["fe-file-preview", className].filter(Boolean).join(" "),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": activeFile ? titleId : void 0,
+            "aria-label": ariaLabel ?? (activeFile ? void 0 : "File preview"),
+            tabIndex: -1,
+            onKeyDown: handleKeyDown,
+            children: [
+              /* @__PURE__ */ jsxs27("header", { className: "fe-file-preview__header", children: [
+                /* @__PURE__ */ jsxs27("div", { className: "fe-file-preview__heading", children: [
+                  /* @__PURE__ */ jsx32("h2", { id: titleId, children: activeFile?.name ?? "File preview" }),
+                  /* @__PURE__ */ jsx32("span", { "aria-label": `${resolvedIndex + 1} of ${files.length} files`, children: files.length ? `${resolvedIndex + 1} / ${files.length}` : "0 / 0" })
+                ] }),
+                /* @__PURE__ */ jsx32(
+                  Button,
+                  {
+                    hierarchy: "tertiary-gray",
+                    size: "32",
+                    iconOnly: true,
+                    icon: /* @__PURE__ */ jsx32(CloseIcon, {}),
+                    "aria-label": closeLabel,
+                    onClick: () => requestClose("close")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs27("div", { className: "fe-file-preview__body", children: [
+                activeFile ? /* @__PURE__ */ jsx32(PreviewContent, { file: activeFile }) : /* @__PURE__ */ jsx32("p", { className: "fe-file-preview__empty", children: "No files to preview." }),
+                activeFile && files.length > 1 && /* @__PURE__ */ jsxs27(Fragment4, { children: [
+                  /* @__PURE__ */ jsx32(
+                    Button,
+                    {
+                      className: "fe-file-preview__navigation fe-file-preview__navigation--previous",
+                      hierarchy: "secondary-gray",
+                      size: "40",
+                      iconOnly: true,
+                      icon: /* @__PURE__ */ jsx32(ChevronDownIcon, {}),
+                      "aria-label": "Previous file",
+                      disabled: !hasPrevious,
+                      onClick: () => changeActiveIndex(resolvedIndex - 1)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx32(
+                    Button,
+                    {
+                      className: "fe-file-preview__navigation fe-file-preview__navigation--next",
+                      hierarchy: "secondary-gray",
+                      size: "40",
+                      iconOnly: true,
+                      icon: /* @__PURE__ */ jsx32(ChevronDownIcon, {}),
+                      "aria-label": "Next file",
+                      disabled: !hasNext,
+                      onClick: () => changeActiveIndex(resolvedIndex + 1)
+                    }
+                  )
+                ] })
+              ] }),
+              activeFile && /* @__PURE__ */ jsxs27("footer", { className: "fe-file-preview__footer", children: [
+                /* @__PURE__ */ jsxs27("span", { className: "fe-file-preview__metadata", children: [
+                  getFilePreviewKind(activeFile),
+                  " \xB7",
+                  " ",
+                  formatFileSize2(activeFile.size)
+                ] }),
+                /* @__PURE__ */ jsxs27("div", { className: "fe-file-preview__actions", children: [
+                  !hideDownload && /* @__PURE__ */ jsx32(
+                    Button,
+                    {
+                      hierarchy: "secondary-gray",
+                      onClick: () => {
+                        onDownload?.(activeFile, resolvedIndex);
+                        startLocalDownload(activeFile);
+                      },
+                      children: downloadLabel
+                    }
+                  ),
+                  onDelete && /* @__PURE__ */ jsx32(
+                    Button,
+                    {
+                      hierarchy: "secondary-color",
+                      color: "error",
+                      destructive: true,
+                      onClick: () => onDelete(activeFile, resolvedIndex),
+                      children: deleteLabel
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// packages/not-found/src/index.tsx
+import {
+  useEffect as useEffect12,
+  useId as useId16,
+  useRef as useRef13,
+  useState as useState20
+} from "react";
+
+// packages/not-found/src/CavemanArtwork.tsx
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+function CavemanArtwork() {
+  return /* @__PURE__ */ jsxs28("div", { className: "fe-cave-scene", children: [
+    " ",
+    /* @__PURE__ */ jsx33("div", { className: "fe-cave-text", children: /* @__PURE__ */ jsx33("span", { children: "404" }) }),
+    /* @__PURE__ */ jsxs28("div", { className: "fe-cave-container", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "fe-cave-caveman", children: [
+        /* @__PURE__ */ jsx33("div", { className: "fe-cave-leg", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-foot", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-fingers" }) }) }),
+        /* @__PURE__ */ jsx33("div", { className: "fe-cave-leg", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-foot", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-fingers" }) }) }),
+        /* @__PURE__ */ jsxs28("div", { className: "fe-cave-shape", children: [
+          /* @__PURE__ */ jsx33("div", { className: "fe-cave-circle" }),
+          /* @__PURE__ */ jsx33("div", { className: "fe-cave-circle" })
+        ] }),
+        /* @__PURE__ */ jsxs28("div", { className: "fe-cave-head", children: [
+          /* @__PURE__ */ jsx33("div", { className: "fe-cave-eye", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-nose" }) }),
+          /* @__PURE__ */ jsx33("div", { className: "fe-cave-mouth" })
+        ] }),
+        /* @__PURE__ */ jsx33("div", { className: "fe-cave-arm-right", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-club" }) })
+      ] }),
+      /* @__PURE__ */ jsxs28("div", { className: "fe-cave-caveman", children: [
+        /* @__PURE__ */ jsx33("div", { className: "fe-cave-leg", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-foot", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-fingers" }) }) }),
+        /* @__PURE__ */ jsx33("div", { className: "fe-cave-leg", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-foot", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-fingers" }) }) }),
+        /* @__PURE__ */ jsxs28("div", { className: "fe-cave-shape", children: [
+          /* @__PURE__ */ jsx33("div", { className: "fe-cave-circle" }),
+          /* @__PURE__ */ jsx33("div", { className: "fe-cave-circle" })
+        ] }),
+        /* @__PURE__ */ jsxs28("div", { className: "fe-cave-head", children: [
+          /* @__PURE__ */ jsx33("div", { className: "fe-cave-eye", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-nose" }) }),
+          /* @__PURE__ */ jsx33("div", { className: "fe-cave-mouth" })
+        ] }),
+        /* @__PURE__ */ jsx33("div", { className: "fe-cave-arm-right", children: /* @__PURE__ */ jsx33("div", { className: "fe-cave-club" }) })
+      ] })
+    ] })
+  ] });
+}
+
+// packages/not-found/src/YetiArtwork.tsx
+import { useId as useId15 } from "react";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+function YetiArtwork() {
+  const id = useId15();
+  return /* @__PURE__ */ jsxs29("div", { className: "fe-yeti-scene", children: [
+    " ",
+    /* @__PURE__ */ jsxs29(
+      "svg",
+      {
+        "data-part": "yetiSVG",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 600 550",
+        children: [
+          /* @__PURE__ */ jsxs29(
+            "linearGradient",
+            {
+              id: `${id}-flashlightGrad`,
+              x1: "126.5842",
+              x2: "90.5842",
+              y1: "176.5625",
+              y2: "213.5625",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx34("stop", { offset: "0", stopColor: "#333" }),
+                /* @__PURE__ */ jsx34("stop", { offset: ".076", stopColor: "#414141" }),
+                /* @__PURE__ */ jsx34("stop", { offset: ".2213", stopColor: "#555" }),
+                /* @__PURE__ */ jsx34("stop", { offset: ".3651", stopColor: "#626262" }),
+                /* @__PURE__ */ jsx34("stop", { offset: ".5043", stopColor: "#666" }),
+                /* @__PURE__ */ jsx34("stop", { offset: ".6323", stopColor: "#606060" }),
+                /* @__PURE__ */ jsx34("stop", { offset: ".8063", stopColor: "#4e4e4e" }),
+                /* @__PURE__ */ jsx34("stop", { offset: "1", stopColor: "#333" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx34("path", { fill: "#24658F", d: "M0 0h600v470H0z" }),
+          /* @__PURE__ */ jsxs29("g", { "data-part": "pillow", children: [
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#09334F",
+                d: "M241.3 124.6c-52.9 28.6-112.6 48-181.8 54.4-40.9 6.8-64.6-82.3-31.9-106.6C84 43.8 144.8 26.2 209.4 18c32.8 13 48.5 75.3 31.9 106.6z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "none",
+                stroke: "#001726",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M52.8 91.3c10 7.4 25.4 50.7 16.1 65.8M241.3 124.6c-52.9 28.6-112.6 48-181.8 54.4-40.9 6.8-64.6-82.3-31.9-106.6C84 43.8 144.8 26.2 209.4 18c32.8 13 48.5 75.3 31.9 106.6z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#09334F",
+                stroke: "#001726",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M201.9 21.9c4.9-8 14.1-11.3 20.6-7.3s7.7 13.7 2.8 21.7"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#09334F",
+                stroke: "#001726",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M242.1 103.1c1.8.3 3.6.9 5.3 1.8 8.4 4.1 12.6 13 9.3 19.8s-12.9 9-21.3 4.9c-1.9-.9-3.6-2.1-5-3.4"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#09334F",
+                stroke: "#001726",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M70.3 172c.2 1.4.2 2.8.1 4.3-.8 9.4-8.3 16.4-16.7 15.6S39.2 183 40 173.7c.1-1.6.5-3.1 1-4.5"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#09334F",
+                stroke: "#001726",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M20.9 85.1c-4.1-5-5.1-11.6-2.1-16.9 4.1-7.2 14-9.2 22.1-4.6 3.7 2.1 6.4 5.2 7.9 8.6"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs29("g", { "data-part": "yeti", children: [
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                "data-part": "bodyBG",
+                fill: "#67B1E0",
+                d: "M80.9 291.4l-17.1-72.8c-6.3-27 10.4-54 37.4-60.3l93.1-29.6c26.5-8.1 54.6 6.8 62.7 33.3l21.9 71.5"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "hlFur",
+                "data-part": "hlBody",
+                fill: "#FFF",
+                d: "M67.1 232.7c15.6-8.7 27.7-23.7 38-38.7 5.5-8 10.9-16.4 18.3-22.7 13.1-11.2 31.3-14.8 48.6-15 4.9 0 9.9.1 14.5-1.7 3.6-1.5 6.5-4.1 9.3-6.9 6.5-6.5 12-14 18-21-6.4-.6-12.9 0-19.4 2l-93.1 29.6c-27 6.3-43.7 33.4-37.4 60.3l3.2 14.1z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                "data-part": "bodyOutline",
+                fill: "none",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M80.9 291.4l-17.1-72.8c-6.3-27 10.4-54 37.4-60.3l93.1-29.6c26.5-8.1 54.6 6.8 62.7 33.3l21.9 71.5"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#67B1E0",
+                d: "M197.5 132.4l-11.2-47.9c-6.3-26.7-32.7-44.1-59.5-38.2-27.4 6-44.5 33.1-38.1 60.3l13.6 56.2"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "hlFur",
+                "data-part": "hlHead",
+                fill: "#FFF",
+                d: "M100.4 132.3l7.4 29.8 89.7-28.8-11.4-48.9c-1.6-6.8-4.5-12.9-8.4-18.3-9.6-7.9-28.5-12.9-46.9-8.5-24.9 5.9-34.5 23.6-38.1 37.9-.8.8-3.8 3-5.1 5.4.2 1.9.5 3.7 1 5.6l7 28.8 4.8-3z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#67B1E0",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M182.1 71.6c3.8 3.6 7 7.7 9.5 12-1.8.4-3.6.9-5.3 1.6 3.2 2.9 5.7 6.3 7.6 9.9-1.1.3-2.2.7-3.3 1.1 2.5 3.5 4.3 7.4 5.4 11.5-.8-.5-2.2-.8-3.3-1"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "none",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M197.5 132.4l-11.2-47.9c-6.3-26.7-32.7-44.1-59.5-38.2-27.4 6-44.5 33.1-38.1 60.3l13.6 56.2"
+              }
+            ),
+            /* @__PURE__ */ jsxs29("g", { children: [
+              /* @__PURE__ */ jsx34(
+                "ellipse",
+                {
+                  cx: "85.8",
+                  cy: "120.4",
+                  fill: "#88C9F2",
+                  rx: "11.5",
+                  ry: "11.5",
+                  transform: "rotate(-66.265 85.7992 120.4318)"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  "data-part": "hlEar",
+                  fill: "#DDF1FA",
+                  d: "M80.4 122.2c-1.3-5.5 1.6-11.1 6.6-13.2-1.3-.1-2.6-.1-3.9.3-6.2 1.5-10 7.7-8.5 13.9s7.7 10 13.9 8.5c.7-.2 1.3-.4 1.9-.6-4.7-.6-8.9-4-10-8.9z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#88C9F2",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M84.2 116.6c-2.2.5-3.6 2.8-3 5 .5 2.2 2.8 3.6 5 3"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "ellipse",
+                {
+                  cx: "85.8",
+                  cy: "120.4",
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeWidth: "2.5",
+                  rx: "11.5",
+                  ry: "11.5",
+                  transform: "rotate(-66.265 85.7992 120.4318)"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlFur",
+                  fill: "#FFF",
+                  d: "M106 130.3l-12 3.6 1.2-11.4-6.3-.1 6-12h-5.4l9.6-8.4z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlFur",
+                  fill: "#FFF",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M92.1 96.4c-5.1 5.9-8.4 11.7-10 17 4.2-1.2 8.5-2.2 12.8-3-4.2 4.8-6.7 9.5-7.6 13.8 2.7-.7 5.4-1.3 8-1.7-2.3 4.8-2.8 9.2-1.7 13.3 1.4-1 4-2.4 6.1-3.4"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "hlSkin",
+                "data-part": "face",
+                fill: "#DDF1FA",
+                d: "M169.1 70.4l7.3 23.4c9.4 26.8-1.8 45-20 50.7s-37.8-5.1-45.8-30.1L103.3 91"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                "data-part": "chin",
+                fill: "none",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M152.4 147.5c3.8 1 8 1.4 12.3 1.1-.5-1.4-1-2.9-1.6-4.3 3.8.6 7.9.7 12.1.1l-3.3-4.8c3.1-.6 6.3-1.6 9.5-3.1-1.4-1.6-2.8-3.1-4.2-4.6"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "hlFur",
+                "data-part": "eyebrow",
+                fill: "#FFF",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M100.9 89.8c7.6 3.5 15.9 6.1 24.7 7.7 1.1-3.3 2.1-6.6 3-9.9 5.5 2.3 11.3 4.1 17.5 5.4.2-3.3.4-6.5.4-9.7 4.5.7 9.2 1.1 14 1.1-.5-3.4-1.1-6.7-1.7-10 4.5-1.9 9-4.2 13.3-6.9"
+              }
+            ),
+            /* @__PURE__ */ jsxs29("g", { "data-part": "eyeL", children: [
+              /* @__PURE__ */ jsx34("circle", { cx: "135.9", cy: "105.3", r: "3.5", fill: "#265D85" }),
+              /* @__PURE__ */ jsx34("circle", { cx: "133.7", cy: "103.5", r: "1", fill: "#FFF" })
+            ] }),
+            /* @__PURE__ */ jsxs29("g", { "data-part": "eyeR", children: [
+              /* @__PURE__ */ jsx34("circle", { cx: "163.2", cy: "96.3", r: "3.5", fill: "#265D85" }),
+              /* @__PURE__ */ jsx34("circle", { cx: "160.9", cy: "94.5", r: "1", fill: "#FFF" })
+            ] }),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                "data-part": "nose",
+                fill: "#265D85",
+                d: "M149.3 101.2l4.4-1.6c1.8-.6 3.6 1 3.1 2.9l-1.1 3.9c-.4 1.6-2.3 2.2-3.6 1.3l-3.3-2.3c-1.7-1.1-1.3-3.5.5-4.2z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#67B1E0",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2.5",
+                d: "M112.4 55.9c.9-4.3 3.8-9.2 8.8-13.7 1.4 2.3 2.8 4.7 4.1 7.1 2.3-4.8 6.9-9.8 13.8-14.1-.1 3.4-.3 6.8-.6 10.1 4.4-3 10.2-5.7 17.3-7.6-1.7 3.6-3.7 7.2-5.9 10.8"
+              }
+            ),
+            /* @__PURE__ */ jsxs29("g", { "data-part": "mouth", children: [
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  "data-part": "mouthBG",
+                  fill: "#265D85",
+                  d: "M149 115.7c-4.6 3.7-6.6 9.8-5 15.6.1.5.3 1.1.5 1.6.6 1.5 2.4 2.3 3.9 1.7l11.2-4.4 11.2-4.4c1.5-.6 2.3-2.4 1.7-3.9-.2-.5-.4-1-.7-1.5-2.8-5.2-8.4-8.3-14.1-7.9-3.7.2-5.9 1.1-8.7 3.2z"
+                }
+              ),
+              /* @__PURE__ */ jsxs29("g", { children: [
+                /* @__PURE__ */ jsx34("defs", { children: /* @__PURE__ */ jsx34(
+                  "path",
+                  {
+                    id: `${id}-mouthPath`,
+                    d: "M149 115.7c-4.6 3.7-6.6 9.8-5 15.6.1.5.3 1.1.5 1.6.6 1.5 2.4 2.3 3.9 1.7l11.2-4.4 11.2-4.4c1.5-.6 2.3-2.4 1.7-3.9-.2-.5-.4-1-.7-1.5-2.8-5.2-8.4-8.3-14.1-7.9-3.7.2-5.9 1.1-8.7 3.2z"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx34("clipPath", { id: `${id}-mouthClipPath`, children: /* @__PURE__ */ jsx34("use", { overflow: "visible", href: `#${id}-mouthPath` }) }),
+                /* @__PURE__ */ jsxs29("g", { clipPath: `url(#${id}-mouthClipPath)`, children: [
+                  /* @__PURE__ */ jsx34(
+                    "ellipse",
+                    {
+                      cx: "160.8",
+                      cy: "133.2",
+                      fill: "#CC4A6C",
+                      rx: "13",
+                      ry: "8",
+                      transform: "rotate(-21.685 160.775 133.1613)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx34(
+                    "ellipse",
+                    {
+                      cx: "158.4",
+                      cy: "127.1",
+                      fill: "#FFF",
+                      opacity: ".1",
+                      rx: "5",
+                      ry: "1.5",
+                      transform: "rotate(-21.685 158.3808 127.126)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx34(
+                    "path",
+                    {
+                      "data-part": "tooth1",
+                      fill: "#FFF",
+                      d: "M161.5 116.1l-3.7 1.5c-1 .4-2.2-.1-2.6-1.1l-1.5-3.7 7.4-3 1.5 3.7c.5 1 0 2.2-1.1 2.6z"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx34(
+                    "path",
+                    {
+                      "data-part": "tooth2",
+                      fill: "#FFF",
+                      d: "M151.8 128.9l-1.9.7c-1 .4-1.5 1.6-1.1 2.6l1.1 2.8 5.6-2.2-1.1-2.8c-.5-1-1.6-1.5-2.6-1.1z"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx34(
+                    "path",
+                    {
+                      "data-part": "tooth3",
+                      fill: "#FFF",
+                      d: "M158.3 126.3l-1.9.7c-1 .4-1.5 1.6-1.1 2.6l1.1 2.8 5.6-2.2-1.1-2.8c-.5-1-1.6-1.5-2.6-1.1z"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  "data-part": "mouthOutline",
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M149 115.7c-4.6 3.7-6.6 9.8-5 15.6.1.5.3 1.1.5 1.6.6 1.5 2.4 2.3 3.9 1.7l11.2-4.4 11.2-4.4c1.5-.6 2.3-2.4 1.7-3.9-.2-.5-.4-1-.7-1.5-2.8-5.2-8.4-8.3-14.1-7.9-3.7.2-5.9 1.1-8.7 3.2z"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs29("g", { "data-part": "armR", children: [
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  fill: "#DDF1FA",
+                  d: "M158.4 116.9l-.7.3c-3.7 1.5-5.5 5.7-4.1 9.4l1.2 2.9c1.7 4.4 6.7 6.5 11.1 4.8l1.4-.5"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#A9DDF3",
+                  d: "M154.8 129.1l.7 1.8c1 2.5 5.4 3.1 5.4 3.1l-2-5.1c-.3-.7-1.1-1.1-1.8-.8l-2.3 1z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "2.5",
+                  d: "M158.4 116.9l-.7.3c-3.7 1.5-5.5 5.7-4.1 9.4l1.2 2.9c1.7 4.4 6.7 6.5 11.1 4.8l1.4-.5"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  fill: "#DDF1FA",
+                  stroke: "#265D85",
+                  strokeWidth: "2.5",
+                  d: "M167.7 113.2l-.7.3c-3.7 1.5-5.5 5.7-4.1 9.4l1.2 2.9c1.7 4.4 6.7 6.5 11.1 4.8l1.4-.5"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  fill: "#DDF1FA",
+                  stroke: "#265D85",
+                  strokeWidth: "2.5",
+                  d: "M177 109.4l-.7.3c-3.7 1.5-5.5 5.7-4.1 9.4l1.2 2.9c1.7 4.4 6.7 6.5 11.1 4.8l1.4-.5"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#88C9F2",
+                  d: "M162.3 128.6l18.6 46.7 37.2-14.8-17.9-44.8"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  fill: "#DDF1FA",
+                  d: "M206.5 130.7l-5.9-15.1-37.9 13 6.4 17.4c10 1.6 34.6-6.3 37.4-15.3z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "2.5",
+                  d: "M162.3 128.6l18.6 46.7 37.2-14.8-15.3-38.3"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  fill: "#DDF1FA",
+                  d: "M190.8 119l-1.5-3.7c-2-5.1-7.9-7.6-13-5.6l5.2 12.9"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  fill: "#DDF1FA",
+                  d: "M203.5 123.8l-1.5-3.7c-2-5.1-7.9-7.6-13-5.6l5.2 12.9"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#A9DDF3",
+                  d: "M200.4 119.4l-.7-1.8c-1-2.5-5.4-3.1-5.4-3.1l1.9 4.8c.3.8 1.3 1.3 2.1.9l2.1-.8z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "2.5",
+                  d: "M203.5 123.8l-1.5-3.7c-2-5.1-7.9-7.6-13-5.6"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "2.5",
+                  d: "M193.7 126.4l-4.4-11.1c-2-5.1-7.9-7.6-13-5.6"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#67B1E0",
+                  d: "M219.6 160.1c-1.5-6.2-3.2-13.2-5.1-21.1-2.8 2.1-5.6 4.5-8.3 7.4-2-1.8-4.1-3.7-6.2-5.7-2.4 3.6-4.6 7.7-6.7 12.1-3-1.9-6-3.9-9.2-6-1.4 2.9-2.7 6-4 9.2-4.7-.6-9.4-1.1-14.2-1.7 5.4 8 10.3 15.2 14.7 21.5"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M219.6 160.1c-1.5-6.2-3.2-13.2-5.1-21.1-2.8 2.1-5.6 4.5-8.3 7.4-2-1.8-4.1-3.7-6.2-5.7-2.4 3.6-4.6 7.7-6.7 12.1-3-1.9-6-3.9-9.2-6-1.4 2.9-2.7 6-4 9.2-4.7-.6-9.4-1.1-14.2-1.7 5.4 8 10.3 15.2 14.7 21.5"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#3A5E77",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "2.5",
+                  d: "M160.9 125l2 5.1"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  fill: "#DDF1FA",
+                  d: "M172.2 126.4l-1.5-3.7c-2-5.1-7.9-7.6-13-5.6l5.2 12.9"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "2.5",
+                  d: "M160.5 124l2.4 6.1"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  fill: "#DDF1FA",
+                  d: "M181.5 122.7L180 119c-2-5.1-7.9-7.6-13-5.6l5.2 12.9"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "2.5",
+                  d: "M181.5 122.7L180 119c-2-5.1-7.9-7.6-13-5.6"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "2.5",
+                  d: "M172.2 126.4l-1.5-3.7c-2-5.1-7.9-7.6-13-5.6"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs29("g", { "data-part": "armL", children: [
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#67B1E0",
+                  d: "M50.9 156.7c-12 35.8-7.8 69.6 8.3 101.9 12.1 22.7 37 14.1 39.5-11.8v-65l-47.8-25.1z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M50.9 156.7c-12 35.8-7.8 69.6 8.3 101.9 10 22.3 37.3 15.1 39.5-11.8v-65l-47.8-25.1z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#262626",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeMiterlimit: "10",
+                  strokeWidth: "20",
+                  d: "M59.3 143.8l34.3 33.9"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#4D4D4D",
+                  d: "M58.4 133.9l15.9 15.9-.9.9-16.5-16.5c.5-.2 1-.3 1.5-.3z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#1A1A1A",
+                  d: "M71.2 169.6l-20.1-20c-2.4-3.7-2.5-8.1.1-11.7l23.1 22.2"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#4D4D4D",
+                  d: "M80.5 156.4l16 15.9-.9.9-16.5-16.5c.5-.1 1-.2 1.4-.3z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#1A1A1A",
+                  d: "M74.2 160.1L86 171.4l-2 11-10.2-10.1c-2.4-4.4-2.5-8.5.4-12.2z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#88C9F2",
+                  d: "M65.9 164.8c-1.9-5.5.8-11.8 6.1-14.1 4.9-2.2 10.4-.6 13.5 3.4 1.3 1.6 3.5 2.1 5.4 1.4 3-1.2 3.9-4.9 1.9-7.4-5.8-7.2-16.1-9.9-25-5.7-9.4 4.4-14.1 15.3-10.9 25.2"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M67.9 168.3c-1.1-1.2-2-3.6-2-3.6-1.9-5.5.8-11.8 6.1-14.1 4.9-2.2 10.4-.6 13.5 3.4 1.3 1.6 3.5 2.1 5.4 1.4 3-1.2 3.9-4.9 1.9-7.4-5.8-7.2-16.1-9.9-25-5.7-9.4 4.4-14.1 15.3-10.9 25.2"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#88C9F2",
+                  d: "M69.9 168.7c-1.9-5.5.8-11.8 6.1-14.1 4.9-2.2 10.4-.6 13.5 3.4 1.3 1.6 3.5 2.1 5.4 1.4 3-1.2 3.9-4.9 1.9-7.4-5.8-7.2-16.1-9.9-25-5.7-9.4 4.4-14.1 15.3-10.9 25.2"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#67B1E0",
+                  d: "M49.9 155l2.7 12.7.2 11.8 5 8.6 9.5-1.8 2-8.7-6.9.6 1.7-11.7-6.6 2.8 1-13.8-4.6 2.9z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M71.9 172.3c-1.1-1.2-2-3.6-2-3.6-1.9-5.5.8-11.8 6.1-14.1 4.9-2.2 10.4-.6 13.5 3.4 1.3 1.6 3.5 2.1 5.4 1.4 3-1.2 3.9-4.9 1.9-7.4-5.8-7.2-16.1-9.9-25-5.7"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlSkin",
+                  "data-part": "hlHandL",
+                  fill: "#DDF1FA",
+                  d: "M101.7 156.9c-5.8-7.2-16.1-9.9-25-5.7-5.9 2.8-9.9 8.1-11.3 14.1l-1-.9-6.2 4.2c5.5 18.1 19.3 25.4 30.4 21l1.2-9.1c-6 2.4-12.7-.7-14.9-6.8-1.9-5.5.8-11.8 6.1-14.1 4.9-2.2 10.4-.6 13.5 3.4 1.3 1.6 3.5 2.1 5.4 1.4 2.9-1.3 3.8-5 1.8-7.5z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M89.7 180.5c-6 2.4-12.7-.7-14.9-6.8"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M76.9 177.3c-1.1-1.2-2-3.6-2-3.6-1.9-5.5.8-11.8 6.1-14.1 4.9-2.2 10.4-.6 13.5 3.4 1.3 1.6 3.5 2.1 5.4 1.4 3-1.2 3.9-4.9 1.9-7.4-5.8-7.2-16.1-9.9-25-5.7"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  className: "hlFur",
+                  "data-part": "hlArmL",
+                  fill: "#FFF",
+                  d: "M98.8 202.8l-1.4-8.7-5.2.7-7.2-11.5-6.8 9-3.9-9.3-7.5 4.8 3.5-11.4-7.1 1.9 2.7-13.5-7.8 4.9c-11.7 26.5-3.6 52.5 1.7 66.6 15.5-6.4 30.3-21.9 39-33.5z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "#A9DDF3",
+                  d: "M101 161.2l-2.4-2.2c.2-1.6-.2-2.7-.8-3.9l2.6 2.5c.8.8 1 2.2.6 3.6z"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M66.9 187.8l3.5-11.4-7.2 1.9 2.6-13.9-7.5 4.5 1.2-15.5-5.5 4.2"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M54 157.6l-5.6-5.6 2.7 14.7"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M67.1 188l7.3-5 3.8 9.3"
+                }
+              ),
+              /* @__PURE__ */ jsx34(
+                "path",
+                {
+                  fill: "none",
+                  stroke: "#265D85",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2.5",
+                  d: "M78.2 192.3l6.8-9 7.1 11.5"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs29(
+            "g",
+            {
+              "data-part": "fingersBackL",
+              visibility: "hidden",
+              fill: "#88C9F2",
+              stroke: "#265D85",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeMiterlimit: "10",
+              strokeWidth: "2.5",
+              children: [
+                /* @__PURE__ */ jsx34("path", { d: "M149.2 177.5l-5.6-23.3c-.6-2.7 1-5.4 3.7-6 2.7-.6 5.4 1 6 3.7l4.4 18.4c.6 2.7-1 5.4-3.7 6l-4.8 1.2M139.4 179.8l-5.6-23.3c-.6-2.7 1-5.4 3.7-6 2.7-.6 5.4 1 6 3.7l5.6 23.3-9.7 2.3z" }),
+                /* @__PURE__ */ jsx34("path", { d: "M128.6 177.3l-4.4-18.4c-.6-2.7 1-5.4 3.7-6 2.7-.6 5.4 1 6 3.7l5.6 23.3-4.9 1.2c-2.7.5-5.4-1.2-6-3.8z" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs29(
+            "g",
+            {
+              "data-part": "fingersBackR",
+              visibility: "hidden",
+              fill: "#88c9f2",
+              stroke: "#265D85",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeMiterlimit: "10",
+              strokeWidth: "2.5",
+              children: [
+                /* @__PURE__ */ jsx34("path", { d: "M215.5 152l-15.9-17.9c-1.8-2.1-1.6-5.2.4-7.1 2.1-1.8 5.2-1.6 7.1.4l12.6 14.2c1.8 2.1 1.6 5.2-.4 7l-3.8 3.4" }),
+                /* @__PURE__ */ jsx34("path", { d: "M208 158.6l-15.9-17.9c-1.8-2.1-1.6-5.2.4-7.1 2.1-1.8 5.2-1.6 7.1.4l15.9 17.9-7.5 6.7z" }),
+                /* @__PURE__ */ jsx34("path", { d: "M197.2 161.5l-12.6-14.2c-1.8-2.1-1.6-5.2.4-7.1 2.1-1.8 5.2-1.6 7.1.4l15.9 17.9-3.7 3.3c-2.1 2-5.2 1.8-7.1-.3z" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs29("g", { "data-part": "blanket", children: [
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                d: "M1.2 271.4C6.6 262 13 253.1 22.4 248c10.3-5.5 22.5-5.5 33.7-8.8 21.8-6.5 37.5-25.2 50.3-43.9 5.5-8 10.9-16.4 18.3-22.7 13.1-11.2 31.3-14.8 48.6-15 4.9 0 9.9.1 14.5-1.7 3.6-1.5 6.5-4.1 9.3-6.9 10.1-10.2 17.9-22.8 29-32 7.9-6.6 18.7-14.7 29.5-13.7 13.9 1.2 25 5.8 38.5-1.5 28.1-15.2 27.8-60.6 56.2-75.1 16.2-8.3 36.9-3.6 52.6-12.7 5.4-3.2 9.8-7.7 13.9-12.5h128.5l-350.8 209L1.3 363l-.1-91.6z",
+                opacity: ".1"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#09334F",
+                d: "M0 281.6c5.3-9.2 11.5-17.9 20.7-22.8 10.3-5.5 22.5-5.5 33.7-8.8 21.8-6.5 37.5-25.2 50.3-43.9 5.5-8 10.9-16.4 18.3-22.7 13.1-11.2 31.3-14.8 48.6-15 4.9 0 9.9.1 14.5-1.7 3.6-1.5 6.5-4.1 9.3-6.9 10.1-10.2 17.9-22.8 29-32 7.9-6.6 18.7-14.7 29.5-13.7 13.9 1.2 25 5.8 38.5-1.5 28.1-15.2 27.8-60.6 56.2-75.1 16.2-8.3 36.9-3.6 52.6-12.7C411 19.1 417.1 8.4 424.9.3H700v570H0V281.6z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#072A40",
+                d: "M0 281.6c5.3-9.2 11.6-17.9 20.8-22.8 10.3-5.5 22.5-5.5 33.7-8.8 21.8-6.5 37.5-25.2 50.3-43.9 5.5-8 10.9-16.4 18.3-22.7 13.1-11.2 31.3-14.8 48.6-15 4.9 0 9.9.1 14.5-1.7 3.6-1.5 6.5-4.1 9.3-6.9 10.1-10.2 17.9-22.8 29-32 7.9-6.6 18.7-14.7 29.5-13.7 13.9 1.2 25 5.8 38.5-1.5 28.1-15.2 27.8-60.6 56.2-75.1 16.2-8.3 36.9-3.6 52.6-12.7 9.8-5.7 15.9-16.4 23.7-24.6h100.4c-3.5 2.8-7.3 5.3-11.4 7.2-11.6 5.4-23 6.6-34.9 1.9-10.5-4.2-22.3 2.4-30.1 10.6-7.8 8.2-14 18.3-23.7 24-15.7 9.1-36.4 4.4-52.6 12.7-28.4 14.6-28.2 60-56.2 75.1-13.5 7.3-24.6 2.8-38.5 1.5-10.8-1-21.5 7.1-29.5 13.7-11.2 9.2-18.9 21.8-29 32-2.7 2.7-5.7 5.4-9.3 6.9-4.5 1.9-9.6 1.7-14.5 1.7-17.3.2-35.4 3.8-48.6 15-7.4 6.3-12.8 14.7-18.3 22.7-12.9 18.7-28.6 37.4-50.3 43.9-11.2 3.4-23.4 3.3-33.7 8.8-11.9 6.4-18.9 19-25.2 31-8.2 15.3-11.6 30-19.6 44.7v-72z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "none",
+                stroke: "#001726",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                d: "M1.2 283c5.3-9.3 11.8-18 21.1-23 10.3-5.5 22.5-5.5 33.7-8.8 21.8-6.5 37.5-25.2 50.3-43.9 5.5-8 10.9-16.4 18.3-22.7 13.1-11.2 31.3-14.8 48.6-15 4.9 0 9.9.1 14.5-1.7 3.6-1.5 6.5-4.1 9.3-6.9 10.1-10.2 17.9-22.8 29-32 7.9-6.6 18.7-14.7 29.5-13.7 13.9 1.2 25 5.8 38.5-1.5 28.1-15.2 27.8-60.6 56.2-75.1 16.2-8.3 36.9-3.6 52.6-12.7 9.8-5.7 15.9-16.4 23.7-24.5"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "none",
+                stroke: "#001726",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                d: "M1.2 355c8-14.7 11.7-29.4 19.9-44.9 6.3-11.9 13.3-24.6 25.2-31 10.3-5.5 22.5-5.5 33.7-8.8 21.8-6.5 37.5-25.2 50.3-43.9 5.5-8 10.9-16.4 18.3-22.7 13.1-11.2 31.3-14.8 48.6-15 4.9 0 9.9.1 14.5-1.7 3.6-1.5 6.5-4.1 9.3-6.9 10.1-10.2 17.9-22.8 29-32 7.9-6.6 18.7-14.7 29.5-13.7 13.9 1.2 25 5.8 38.5-1.5 28.1-15.2 27.8-60.6 56.2-75.1 16.2-8.3 36.9-3.6 52.6-12.7 9.8-5.7 15.9-15.8 23.7-24s19.6-14.8 30.1-10.6c11.9 4.8 23.2 3.5 34.9-1.9 4-1.9 7.7-4.4 11.2-7.1"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                d: "M111.2 197.2s50.7 23.9 90.8 43.1c14.2 6.8 18 25.4 7.5 37.2-7.6 8.5-20.2 10.4-30 4.5l-89.9-54.7 21.6-30.1z",
+                opacity: ".03"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                d: "M12.1 266s53.5 64.8 94.7 114c11.7 13.9 1.8 35.1-16.4 35.1-7.1 0-13.8-3.6-17.8-9.5L0 296.5v-13.2L12.1 266z",
+                opacity: ".03"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                d: "M155.7 170.1s111.4 46.9 171.1 69c3.5 1.3 7.4 0 9.4-3.2 2.7-4.2.9-9.9-3.8-11.7-33.5-12.8-147.3-56-147.3-56l-29.4 1.9z",
+                opacity: ".03"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                d: "M255.9 114.7S349 145.6 412 176c2.1 1 4.6.6 6.2-1 2.8-2.7 1.9-7.5-1.7-9-23.3-9.6-94.3-38.6-131.1-50.4-.1.1-10.2 1.9-29.5-.9z",
+                opacity: ".03"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                d: "M356.6 34.9l152.1 49.3c2.2.7 4.5.6 6.7-.2 8.7-3.4 8.2-15.9-.7-18.6l-121-36.8-37.1 6.3z",
+                opacity: ".03"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs29("g", { "data-part": "fingersFrontL", visibility: "hidden", children: [
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#88C9F2",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                d: "M146.2 165.1l2.8 11.6c.6 2.7 3.3 4.3 6 3.7 2.7-.6 4.3-3.3 3.7-6l-1.6-6.8c-.6-2.7-3.3-4.3-6-3.7l-4.9 1.2"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#A9DDF3",
+                d: "M151.4 173.8l.5 2.2c.3 1.1 1.3 1.7 2.4 1.5 1.1-.3 1.7-1.3 1.5-2.4l-.5-2.2-3.9.9z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#88C9F2",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                d: "M136.5 167.4l2.8 11.6c.6 2.7 3.3 4.3 6 3.7 2.7-.6 4.3-3.3 3.7-6l-2.8-11.6-9.7 2.3z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#A9DDF3",
+                d: "M141.7 176.2l.5 2.2c.3 1.1 1.3 1.7 2.4 1.5 1.1-.3 1.7-1.3 1.5-2.4l-.5-2.2-3.9.9z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#88C9F2",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                d: "M127.9 174.6l1.6 6.8c.6 2.7 3.3 4.3 6 3.7 2.7-.6 4.3-3.3 3.7-6l-2.8-11.6-4.9 1.2c-2.6.5-4.2 3.2-3.6 5.9z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#A9DDF3",
+                d: "M131.9 178.5l.5 2.2c.3 1.1 1.3 1.7 2.4 1.5 1.1-.3 1.7-1.3 1.5-2.4l-.5-2.2-3.9.9z"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs29("g", { "data-part": "fingersFrontR", visibility: "hidden", children: [
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#88c9f2",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                d: "M207.1 142.5l7.9 8.9c1.8 2.1 5 2.3 7.1.4 2.1-1.8 2.3-5 .4-7.1l-4.6-5.2c-1.8-2.1-5-2.2-7-.4l-3.8 3.4"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#A9DDF3",
+                d: "M215.8 147.7l1.5 1.7c.7.8 2 .9 2.8.2.8-.7.9-2 .2-2.8l-1.5-1.7-3 2.6z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#88c9f2",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                d: "M199.6 149.1l7.9 8.9c1.8 2.1 5 2.3 7.1.4 2.1-1.8 2.3-5 .4-7.1l-7.9-8.9-7.5 6.7z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#A9DDF3",
+                d: "M208.3 154.4l1.5 1.7c.7.8 2 .9 2.8.2.8-.7.9-2 .2-2.8l-1.5-1.7-3 2.6z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#88c9f2",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                d: "M195.4 159.5l4.6 5.2c1.8 2.1 5 2.3 7.1.4 2.1-1.8 2.3-5 .4-7.1l-7.9-8.9-3.7 3.3c-2.1 1.9-2.3 5-.5 7.1z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#A9DDF3",
+                d: "M200.8 161l1.5 1.7c.7.8 2 .9 2.8.2.8-.7.9-2 .2-2.8l-1.5-1.7-3 2.6z"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs29("g", { "data-part": "flashlightFront", children: [
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#1A1A1A",
+                d: "M83.9 181.4l4.6 26.4 34.6-33.6-24.5-6.2c-8.9-2.6-16.6 3.9-14.7 13.4z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#333",
+                d: "M91.9 167.8l20.5 7.4-.5 1.2-21.4-8.2c.5-.2 1-.3 1.4-.4z"
+              }
+            ),
+            /* @__PURE__ */ jsx34("path", { d: "M86 171.4c-2 2.5-3 6-2.2 10l4.6 26.4 11.4-11.1L86 171.4z" }),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: `url(#${id}-flashlightGrad)`,
+                d: "M99.1 183.7c-10.6 9.4-13.4 21.4-9 28.5 4.3 6.8 18 3 28.6-6.4s14.9-23.7 8.8-29c-6.9-6.1-17.8-2.6-28.4 6.9z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                fill: "#B3B3B3",
+                d: "M101.6 185.7c-8.2 7.3-11.9 18.2-8.8 23.1 2.6 4.1 13.6-1.1 21.8-8.4s13.6-18.1 9.9-21.6c-4.4-4.2-14.7-.4-22.9 6.9z"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs29(
+      "svg",
+      {
+        "data-part": "lightSVG",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 600 550",
+        children: [
+          /* @__PURE__ */ jsxs29("filter", { id: `${id}-white-glow`, children: [
+            /* @__PURE__ */ jsx34(
+              "feFlood",
+              {
+                result: "flood",
+                floodColor: "#ffffff",
+                floodOpacity: ".6"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "feComposite",
+              {
+                in: "flood",
+                result: "mask",
+                in2: "SourceGraphic",
+                operator: "in"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "feMorphology",
+              {
+                in: "mask",
+                result: "dilated",
+                operator: "dilate",
+                radius: "3"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "feGaussianBlur",
+              {
+                in: "dilated",
+                result: "blurred",
+                stdDeviation: "8"
+              }
+            ),
+            /* @__PURE__ */ jsxs29("feMerge", { children: [
+              /* @__PURE__ */ jsx34("feMergeNode", { in: "blurred" }),
+              /* @__PURE__ */ jsx34("feMergeNode", { in: "SourceGraphic" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs29("g", { "data-part": "light", children: [
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                filter: `url(#${id}-white-glow)`,
+                fill: "#F8FFE8",
+                d: "M122.2 177.4c-5.2-1.6-13.6 2.1-20.6 8.3-7.7 6.8-11.4 16.8-9.3 22.1L421 1683h1534V733L122.2 177.4z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                opacity: "0.7",
+                fill: "#FFFFFF",
+                d: "M101.6,185.7c-8.2,7.3-11.9,18.2-8.8,23.1c2.6,4.1,13.6-1.1,21.8-8.4s13.6-18.1,9.9-21.6 C120.1,174.6,109.8,178.4,101.6,185.7z"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs29("g", { "data-part": "four04", children: [
+            /* @__PURE__ */ jsxs29("g", { opacity: ".2", "data-part": "lettersShadow", children: [
+              /* @__PURE__ */ jsx34("path", { d: "M233.2 408.6l30.6 46.3-51.9 46 22.2 25.8 125.2 37.6 45.1-18.7-45.5-51.9 12.1-18.1-25.3-30.8-26.2-6.5-27.5-37.7z" }),
+              /* @__PURE__ */ jsx34("path", { d: "M328.9 467.6S391.4 601.5 505 558c88.3-33.8-69.2-108.2-85-116.5-15.8-8.3-76.8 6.9-76.8 6.9l-14.3 19.2z" }),
+              /* @__PURE__ */ jsx34("path", { d: "M474.2 515.1L505 558l-20.6 50.6 22.3 25.8 162.5 27 48.4-24.3-60.2-42.7 19.1-12.1-38.4-37.4-32.3.6-72-30.3z" })
+            ] }),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "lettersSide",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                fill: "#3A7199",
+                d: "M269.2 316l-17.9 6 15.4.8 19.2-6.4zM220.3 371l12.4 37.8 14 7.4-13.3-40.7zM214.4 317.4c-.3-.8-.5-1.6-.8-2.4-.3-.8-.5-1.7-.8-2.5-.3-.9-.5-1.7-.8-2.6-.3-.9-.6-1.8-.8-2.8-.3-.9-.6-1.9-.8-2.9-.3-1-.6-1.9-.8-2.9-.3-1-.5-1.9-.8-2.9-.3-1-.5-1.9-.8-2.9-.3-1-.5-2-.8-2.9-.3-1-.5-1.9-.8-2.9-.3-1-.5-1.9-.8-2.9-.3-1-.5-1.9-.8-2.9-.3-1-.5-1.9-.8-2.8-.2-.9-.5-1.8-.7-2.7-.2-.9-.5-1.7-.7-2.6l-.6-2.4-10.9 2.8c.2.7.4 1.5.6 2.3l.6 2.4c.2.8.4 1.6.7 2.5s.5 1.7.7 2.6c.2.9.5 1.8.7 2.7.2.9.5 1.8.7 2.7.2.9.5 1.8.7 2.7.2.9.5 1.8.7 2.7.2.9.5 1.8.8 2.7.3.9.5 1.8.8 2.7.3.9.5 1.8.8 2.7.3.9.5 1.8.8 2.7.3.9.5 1.7.8 2.6.3.8.5 1.7.8 2.5.2.8.5 1.6.7 2.3.2.8.5 1.5.7 2.2l6.3 19.3-28.8 9.7 10 2.6 31-10.4-6.8-21zM162.6 243.7l-25 119.5 10.7 32.2 7.6 6.5-11.5-34.7 26.9-128.8z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "lettersFront",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                fill: "#67B1E0",
+                d: "M266.7 322.8l19.2-6.5 12.1 37.2-19.2 6.5 13.2 40.6-45.2 15.6-13.3-40.7-77.5 26.4-11.5-34.8 26.9-128.8 61.5-19.9 33.8 104.4zm-62-38.9c-.3-1-.5-1.9-.8-2.8-.2-.9-.5-1.8-.7-2.7-.2-.9-.5-1.7-.7-2.6l-.6-2.4-1.1.4c-.1 1.6-.2 3.2-.4 4.8-.1 1.6-.3 3.2-.4 4.7-.1 1.6-.3 3.1-.5 4.7s-.3 3.1-.5 4.7-.4 3.1-.5 4.7c-.2 1.6-.4 3.2-.6 4.7l-.6 4.8-.6 4.8-6.4 36.8 31-10.4-6.8-20.8c-.3-.8-.5-1.6-.8-2.4-.3-.8-.5-1.7-.8-2.5-.3-.9-.5-1.7-.8-2.6-.3-.9-.6-1.8-.8-2.8-.3-.9-.6-1.9-.8-2.9-.3-1-.6-1.9-.8-2.9-.3-1-.6-1.9-.8-2.9-.3-1-.5-1.9-.8-2.9-.3-1-.5-2-.8-2.9-.3-1-.5-1.9-.8-2.9-.3-1-.5-1.9-.8-2.9-.5-.9-.8-1.9-1-2.8"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "lettersSide",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                fill: "#3A7199",
+                d: "M390 347.5c-.1-1.9-.3-3.8-.5-5.5-.2-1.7-.4-3.4-.7-4.9-.3-1.5-.5-2.9-.9-4.3-.3-1.3-.7-2.5-1.1-3.6-.4-1.1-.8-2.1-1.3-3.1-.5-.9-.9-1.8-1.5-2.5-.5-.8-1.1-1.4-1.7-2-.6-.6-1.2-1.1-1.8-1.5-.6-.4-1.3-.7-2-1.1-.7-.3-1.4-.6-2-.8l-2.1-.6c-.7-.2-1.5-.3-2.2-.3h-14.3 1.6l2.1.3c.7.1 1.3.3 2 .5.6.2 1.3.5 1.9.8.6.3 1.2.6 1.8 1 .6.4 1.2.8 1.7 1.3s1.1 1.1 1.5 1.8c.5.7.9 1.5 1.4 2.3.4.9.8 1.8 1.2 2.8.4 1 .7 2.2 1 3.4.3 1.2.6 2.5.8 4 .2 1.4.4 2.9.6 4.5.2 1.6.3 3.3.4 5.1.1 1.8.2 3.8.2 5.8 0 2.1 0 4.3-.1 6.7-.1 2.4-.2 4.9-.4 7.6-.2 2.7-.4 5.5-.7 8.4-.3 2.9-.6 5.7-.9 8.4-.3 2.7-.7 5.2-1 7.5-.4 2.4-.8 4.6-1.2 6.7-.4 2.1-.8 4-1.3 5.8-.5 1.8-.9 3.5-1.4 5.1s-1 3.1-1.5 4.5-1 2.7-1.6 3.9c-.5 1.2-1.1 2.3-1.6 3.3-.3.5-.5.9-.8 1.4-.1.1-.2.3-.3.4-.2.3-.4.6-.6.8-.1.2-.2.3-.3.5-.2.2-.3.5-.5.7-.1.1-.2.3-.4.4-.2.2-.3.4-.5.6l-.4.4-.5.5c-.1.1-.3.2-.4.3-.2.1-.3.3-.5.4-.1.1-.3.2-.4.3-.2.1-.3.2-.5.3-.1.1-.3.2-.4.2-.3.2-.5.3-.8.4-.6.3-1.3.5-2 .7h-.1c-.6.2-1.3.4-1.9.5h-.1c-.6.1-1.3.2-1.9.2H349c-.7-.1-1.3-.2-2-.3h-.1c-.6-.1-1.3-.3-1.9-.5h-.1c-.6-.2-1.2-.5-1.8-.8-.6-.3-1.2-.7-1.8-1.1 0 0-.1 0-.1-.1 0 0-.1 0-.1-.1 0 0-.1 0-.1-.1 0 0-.1 0-.1-.1l11 8.3.1.1.1.1s.1 0 .1.1c0 0 .1 0 .1.1.3.2.6.4 1 .6.3.2.6.4 1 .5.3.2.6.3.9.4.3.1.7.3 1 .4h.2l.9.3c.3.1.7.2 1.1.3h.2c.3.1.6.1.9.2.4.1.7.1 1.1.1H363c.3 0 .5 0 .8-.1.3 0 .5-.1.8-.1.1 0 .2 0 .3-.1h.2c.1 0 .2 0 .3-.1.3-.1.5-.1.8-.2.3-.1.5-.1.8-.2.1 0 .1 0 .2-.1.1 0 .2-.1.3-.1.2-.1.4-.1.6-.2.2-.1.4-.2.6-.2l.6-.3c.1 0 .1-.1.2-.1s.1-.1.2-.1.1-.1.2-.1.1-.1.2-.1.1-.1.2-.1c.1-.1.3-.2.4-.3.2-.1.4-.2.6-.4.1 0 .1-.1.2-.1.1-.1.2-.1.2-.2.1-.1.2-.1.3-.2.1-.1.2-.2.3-.2.1-.1.3-.2.4-.4.2-.2.4-.3.5-.5l.3-.3c.1-.1.1-.1.1-.2l.2-.2c.1-.1.2-.3.4-.4.1-.2.3-.3.4-.5.2-.2.4-.5.6-.7.1-.1.2-.2.3-.4 0 0 0-.1.1-.1l.1-.1c.2-.2.3-.5.5-.8.1-.2.2-.3.3-.5l.9-1.5c.6-1.1 1.2-2.2 1.8-3.5.6-1.3 1.1-2.7 1.7-4.2.5-1.5 1.1-3.1 1.6-4.8.5-1.7 1-3.5 1.5-5.5.5-1.9 1-4 1.4-6.3s.9-4.6 1.3-7.2c.4-2.6.8-5.3 1.1-8.1.4-2.9.7-5.9 1-9 .3-3.2.6-6.2.8-9 .2-2.9.3-5.6.4-8.1.1-2.6.1-5 .1-7.2.1-1.6 0-3.7-.1-5.6zM325.4 293.8c.7-.6 1.3-1.2 2-1.8.2-.2.4-.4.6-.5.8-.7 1.7-1.4 2.6-2.1.2-.1.4-.3.6-.4.7-.5 1.4-1.1 2.2-1.6.3-.2.5-.4.8-.5.8-.5 1.7-1.1 2.5-1.6.1-.1.2-.1.3-.2 1-.6 1.9-1.1 2.9-1.6.2-.1.3-.2.5-.3.9-.5 1.9-.9 2.9-1.3.1-.1.3-.1.4-.2 1-.4 2-.9 3.1-1.2.4-.2.9-.3 1.3-.5.1 0 .2-.1.4-.1.4-.1.8-.3 1.2-.4.1 0 .1 0 .2-.1.5-.1 1-.3 1.5-.4h.1c.5-.1 1-.3 1.5-.4l-11.1 2.7c-.1 0-.3.1-.4.1-.1 0-.3.1-.4.1-.1 0-.3.1-.4.1h-.1c-.1 0-.2.1-.3.1-.3.1-.7.2-1 .3h-.1-.1c-.2.1-.5.1-.7.2-.1 0-.2.1-.4.1-.1 0-.1 0-.2.1-.1 0-.1 0-.2.1-.1 0-.2.1-.3.1-.3.1-.6.2-1 .3-.6.2-1.2.4-1.8.7-.4.2-.7.3-1.1.5-.1.1-.2.1-.4.2-.1 0-.2.1-.3.1-.6.3-1.1.5-1.7.8-.2.1-.5.2-.7.4-.1 0-.2.1-.3.1-.1 0-.1.1-.2.1-.2.1-.3.2-.5.3-.7.4-1.5.8-2.2 1.2-.1.1-.2.1-.3.2-.6.4-1.2.7-1.8 1.1-.2.1-.4.3-.6.4-.1.1-.2.1-.3.2-.1.1-.3.2-.4.3-.7.5-1.3.9-2 1.4-.2.1-.4.3-.5.4-.1.1-.1.1-.2.1-.7.6-1.5 1.2-2.2 1.8-.1 0-.1.1-.2.1-.1.1-.3.2-.4.4-.4.3-.7.6-1.1 1-.3.2-.5.5-.8.7-.2.2-.4.4-.7.6-.8.7-1.5 1.5-2.3 2.3-1.7 1.8-3.2 3.7-4.8 5.7-1.5 2-3 4.2-4.3 6.5-1.4 2.3-2.7 4.7-3.9 7.3-1.2 2.6-2.4 5.3-3.4 8.1-1.1 2.8-2.1 5.8-3 8.9-.9 3.1-1.7 6.3-2.4 9.6s-1.3 6.8-1.9 10.4c-.5 3.6-1 7.3-1.3 11.1-.4 3.8-.6 7.5-.7 11.2-.1 3.6-.2 7.1-.1 10.5.1 3.4.3 6.7.6 9.9s.7 6.3 1.3 9.3c.5 3 1.2 5.9 1.9 8.6.7 2.8 1.5 5.4 2.4 8 .9 2.5 1.9 5 3 7.3s2.3 4.5 3.6 6.6c.4.7.9 1.4 1.3 2.1.4.7.9 1.3 1.4 2s.9 1.3 1.4 1.9l1.5 1.8 8.3 9.9c-.5-.6-1.1-1.3-1.6-2s-1-1.3-1.5-2l-1.5-2.1c-.5-.7-1-1.5-1.4-2.2-1.4-2.3-2.7-4.6-3.9-7.1-1.2-2.5-2.3-5.1-3.2-7.8-1-2.7-1.9-5.6-2.6-8.6-.8-3-1.4-6.1-2-9.3-.6-3.2-1-6.5-1.3-10-.3-3.4-.5-7-.6-10.7-.1-3.7-.1-7.5.1-11.3.1-3.9.4-7.9.8-12s.9-8.1 1.4-12c.6-3.9 1.3-7.6 2-11.2.8-3.6 1.6-7 2.6-10.4 1-3.3 2-6.5 3.2-9.6 1.2-3.1 2.4-6 3.7-8.7 1.3-2.8 2.7-5.4 4.2-7.9s3-4.8 4.7-7c1.6-2.2 3.3-4.2 5.1-6.1.8-.9 1.6-1.7 2.4-2.5.2-.3.4-.5.6-.7z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "lettersFront",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                fill: "#67B1E0",
+                d: "M436.1 339.3c.5 3.1 1 6.4 1.3 9.8.3 3.4.5 6.9.6 10.4.1 3.6 0 7.3-.1 11.1-.2 3.8-.4 7.8-.8 11.8-.4 4.1-.9 8-1.5 11.8-.6 3.8-1.3 7.5-2 11-.8 3.5-1.6 6.9-2.6 10.2-1 3.3-2 6.4-3.1 9.5-1.1 3-2.4 5.9-3.6 8.7-1.3 2.8-2.7 5.4-4.1 7.9-1.4 2.5-3 4.9-4.6 7.1-1.6 2.2-3.3 4.3-5 6.3-1.8 2-3.6 3.8-5.5 5.5-1.9 1.7-3.8 3.3-5.8 4.7-2 1.4-4.1 2.7-6.2 3.9-2.1 1.2-4.3 2.2-6.6 3.1-2.3.9-4.6 1.7-6.9 2.3-2.3.6-4.7 1.1-7.2 1.5-2.4.3-4.9.6-7.4.6-2.5.1-5.1 0-7.7-.2-2.6-.2-5.2-.5-7.7-1s-4.9-1.1-7.3-1.8c-2.4-.7-4.6-1.6-6.8-2.6s-4.3-2.1-6.4-3.4c-2.1-1.3-4-2.6-5.9-4.1-1.9-1.5-3.7-3.1-5.4-4.9-1.7-1.8-3.4-3.6-4.9-5.6-1.6-2-3-4.1-4.4-6.4-1.4-2.3-2.7-4.6-3.9-7.1-1.2-2.5-2.3-5.1-3.2-7.8-1-2.7-1.9-5.6-2.6-8.6-.8-3-1.4-6.1-2-9.3-.6-3.2-1-6.5-1.3-10-.3-3.4-.5-7-.6-10.7-.1-3.7-.1-7.5.1-11.3.1-3.9.4-7.9.8-12s.9-8.1 1.4-12c.6-3.9 1.3-7.6 2-11.2.8-3.6 1.6-7 2.6-10.4 1-3.3 2-6.5 3.2-9.6 1.2-3.1 2.4-6 3.7-8.7 1.3-2.8 2.7-5.4 4.2-7.9s3-4.8 4.7-7c1.6-2.2 3.3-4.2 5.1-6.1 1.8-1.9 3.6-3.7 5.5-5.3 1.9-1.6 3.9-3.1 5.9-4.5 2-1.4 4.1-2.6 6.3-3.7 2.1-1.1 4.4-2.1 6.6-2.9 2.3-.8 4.6-1.5 6.9-2.1 2.4-.5 4.8-1 7.2-1.2 2.5-.3 5-.4 7.5-.4 2.6 0 5.2.1 7.8.4 2.6.3 5.1.7 7.6 1.2s4.9 1.2 7.2 1.9c2.3.8 4.6 1.6 6.8 2.7 2.2 1 4.3 2.1 6.4 3.4 2.1 1.3 4 2.6 5.9 4.1 1.9 1.5 3.7 3.1 5.4 4.8 1.7 1.7 3.3 3.6 4.9 5.6 1.5 2 3 4.1 4.3 6.3 1.4 2.2 2.6 4.6 3.8 7 1.2 2.4 2.2 5 3.2 7.7.9 2.7 1.8 5.5 2.5 8.4.5 3 1.1 6 1.7 9.1zm-52 69.5c.5-1.9 1-4 1.4-6.3.4-2.2.9-4.6 1.3-7.2.4-2.6.8-5.3 1.1-8.1.4-2.9.7-5.9 1-9 .3-3.2.6-6.2.8-9 .2-2.9.3-5.6.4-8.1.1-2.6.1-5 .1-7.2 0-2.3-.1-4.3-.2-6.3-.1-1.9-.3-3.8-.5-5.5-.2-1.7-.4-3.4-.7-4.9-.3-1.5-.5-2.9-.9-4.3-.3-1.3-.7-2.5-1.1-3.6-.4-1.1-.8-2.1-1.3-3.1-.5-.9-.9-1.8-1.5-2.5-.5-.8-1.1-1.4-1.7-2-.6-.6-1.2-1.1-1.8-1.5-.6-.4-1.3-.7-2-1.1-.7-.3-1.4-.6-2-.8l-2.1-.6c-.7-.2-1.5-.3-2.2-.3-.8-.1-1.5-.1-2.2-.1-.7 0-1.5.1-2.2.2-.7.1-1.5.2-2.2.4-.7.2-1.4.4-2.1.7-.7.3-1.4.6-2.1 1.1-.7.5-1.4 1-2 1.6-.7.6-1.3 1.4-1.9 2.2-.6.8-1.2 1.7-1.8 2.8-.6 1-1.2 2.1-1.8 3.4-.6 1.2-1.1 2.6-1.7 4-.5 1.5-1.1 3-1.6 4.7-.5 1.7-1 3.5-1.5 5.4-.5 1.9-.9 4-1.4 6.2-.4 2.2-.9 4.6-1.2 7.1-.4 2.5-.8 5.2-1.1 8.1-.3 2.9-.7 5.9-1 9.1-.3 3.2-.6 6.2-.8 9.1-.2 2.9-.3 5.6-.4 8.2-.1 2.6-.1 5-.1 7.3s.1 4.4.2 6.4.3 3.9.4 5.7c.2 1.8.4 3.5.7 5 .3 1.6.5 3 .9 4.4.3 1.4.7 2.6 1.1 3.8.4 1.2.8 2.2 1.3 3.2s.9 1.9 1.5 2.6c.5.8 1.1 1.5 1.6 2.1.6.6 1.2 1.1 1.8 1.6.6.4 1.3.8 2 1.2.7.3 1.3.6 2 .9l2.1.6c.7.2 1.5.3 2.2.3.7.1 1.5.1 2.2 0 .7 0 1.5-.1 2.2-.2.7-.1 1.5-.3 2.2-.5.7-.2 1.4-.5 2.1-.8.7-.3 1.4-.7 2.1-1.2.7-.5 1.4-1.1 2-1.8.7-.7 1.3-1.5 1.9-2.4.6-.9 1.2-1.8 1.8-2.9.6-1.1 1.2-2.2 1.8-3.5.6-1.3 1.1-2.7 1.7-4.2.5-1.5 1.1-3.1 1.6-4.8.6-1.9 1.1-3.7 1.6-5.6"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "lettersSide",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                fill: "#3A7199",
+                d: "M548.6 448.8l-18.7-2.8 13.4 7.7 20.1 2.9zM480.2 475.8l-6 39.3 9.2 13 6.4-42.4zM499.1 425.2c.1-.8.3-1.6.4-2.5.1-.8.3-1.7.4-2.6.1-.9.3-1.8.5-2.7.2-.9.3-1.9.5-2.9s.4-1.9.5-2.9c.2-1 .4-2 .6-2.9l.6-3 .6-3 .6-3 .6-3c.2-1 .4-2 .6-2.9.2-1 .4-2 .6-2.9.2-1 .4-1.9.6-2.8l.6-2.7c.2-.9.4-1.7.6-2.6.2-.8.4-1.7.5-2.5l-10.9-2.4c-.2.7-.3 1.5-.5 2.3-.2.8-.3 1.6-.5 2.4-.2.8-.3 1.7-.5 2.5-.2.9-.4 1.7-.5 2.6l-.6 2.7-.6 2.7-.6 2.7c-.2.9-.4 1.8-.6 2.8-.2.9-.4 1.8-.6 2.8-.2.9-.4 1.8-.5 2.8-.2.9-.3 1.8-.5 2.7-.2.9-.3 1.8-.5 2.7-.2.9-.3 1.8-.5 2.6-.1.9-.3 1.7-.4 2.5-.1.8-.3 1.6-.4 2.4-.1.8-.2 1.5-.4 2.3l-3.1 20.1-30-4.4 7.8 6.9 32.3 4.7 3.3-21.5zM486.2 336.1l-76.3 95.3-5 33.7 3.8 9.2 5.5-36.2 82.1-102.8z"
+              }
+            ),
+            /* @__PURE__ */ jsx34(
+              "path",
+              {
+                className: "lettersFront",
+                stroke: "#265D85",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeMiterlimit: "10",
+                strokeWidth: "2.5",
+                fill: "#67B1E0",
+                d: "M543.3 453.7l20.1 2.9-6 38.6-20-2.8-6.5 42.1-47.4-6.5 6.5-42.3-81.1-11.4 5.4-36.2 82.2-102.8 63.8 9.9-17 108.5zm-37.7-62.8c.2-1 .4-1.9.6-2.8l.6-2.7c.2-.9.4-1.7.6-2.6.2-.8.4-1.7.5-2.5l-1.2-.2c-.8 1.4-1.6 2.7-2.5 4.1s-1.7 2.7-2.5 4c-.8 1.3-1.7 2.7-2.5 4-.9 1.3-1.7 2.6-2.6 4-.9 1.3-1.7 2.6-2.6 3.9-.9 1.3-1.8 2.6-2.7 4s-1.8 2.7-2.7 4-1.8 2.7-2.7 4L463.6 442l32.3 4.7 3.3-21.6c.1-.8.3-1.6.4-2.5.1-.8.3-1.7.4-2.6.1-.9.3-1.8.5-2.7.2-.9.3-1.9.5-2.9s.4-1.9.5-2.9c.2-1 .4-2 .6-2.9l.6-3 .6-3 .6-3 .6-3c.2-1 .4-2 .6-2.9.1-.8.3-1.8.5-2.8"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// packages/not-found/src/index.tsx
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+var variants = ["caveman", "bad_dream", "electric_shock"];
+var copy2 = {
+  caveman: {
+    title: "This page is history.",
+    description: "The page you are looking for could not be found."
+  },
+  bad_dream: {
+    title: "Hello?? Is somebody there?!?",
+    description: "The page you are trying to reach cannot be found. Perhaps it was just a bad dream?"
+  },
+  electric_shock: {
+    title: "Looks like you\u2019re lost",
+    description: "The page you are looking for is not available."
+  }
+};
+function NotFoundScene({
+  variant,
+  title,
+  description,
+  action,
+  homeLabel = "Go to Home",
+  homeHref = "/",
+  onHomeClick,
+  animated = true,
+  className,
+  ...props
+}) {
+  const titleId = useId16();
+  return /* @__PURE__ */ jsxs30(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      ...props,
+      className: ["fe-not-found", `fe-not-found--${variant}`, className].filter(Boolean).join(" "),
+      "data-variant": variant,
+      "data-animated": animated,
+      children: [
+        /* @__PURE__ */ jsxs30("div", { className: "fe-not-found__art", "aria-hidden": "true", children: [
+          variant === "caveman" && /* @__PURE__ */ jsx35(CavemanArtwork, {}),
+          variant === "bad_dream" && /* @__PURE__ */ jsx35(YetiArtwork, {}),
+          variant === "electric_shock" && /* @__PURE__ */ jsx35("div", { className: "fe-not-found__lost-art", children: /* @__PURE__ */ jsx35("span", { children: "404" }) })
+        ] }),
+        /* @__PURE__ */ jsxs30("div", { className: "fe-not-found__content", children: [
+          /* @__PURE__ */ jsxs30("h2", { id: titleId, className: "fe-not-found__title", children: [
+            /* @__PURE__ */ jsx35("span", { className: "fe-not-found__sr-only", children: "404: " }),
+            title === void 0 ? copy2[variant].title : title
+          ] }),
+          /* @__PURE__ */ jsx35("div", { className: "fe-not-found__description", children: description === void 0 ? copy2[variant].description : description }),
+          /* @__PURE__ */ jsx35("div", { className: "fe-not-found__actions", children: action !== void 0 ? action : /* @__PURE__ */ jsx35(
+            Button,
+            {
+              hierarchy: "primary",
+              size: "40",
+              content: homeLabel,
+              onClick: onHomeClick ?? (() => window.location.assign(homeHref))
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function NotFoundCaveman(props) {
+  return /* @__PURE__ */ jsx35(NotFoundScene, { ...props, variant: "caveman" });
+}
+function NotFoundYeti(props) {
+  return /* @__PURE__ */ jsx35(NotFoundScene, { ...props, variant: "bad_dream" });
+}
+function NotFoundLost(props) {
+  return /* @__PURE__ */ jsx35(NotFoundScene, { ...props, variant: "electric_shock" });
+}
+function NotFound({ variant = "random", ...props }) {
+  const [randomVariant, setRandomVariant] = useState20("caveman");
+  const picked = useRef13(false);
+  useEffect12(() => {
+    if (variant === "random" && !picked.current) {
+      picked.current = true;
+      setRandomVariant(
+        variants[Math.floor(Math.random() * variants.length)] ?? "caveman"
+      );
+    }
+  }, [variant]);
+  return /* @__PURE__ */ jsx35(
+    NotFoundScene,
+    {
+      ...props,
+      variant: variant === "random" ? randomVariant : variant
+    }
+  );
+}
 export {
   Avatar,
   AvatarGroup,
@@ -3078,14 +5572,29 @@ export {
   CurrencyInput,
   DateTimePicker,
   Drawer,
+  DrawerWidths,
+  EmailInput,
   ExpandableSection,
+  EyeIcon,
+  EyeOffIcon,
+  FILE_UPLOAD_ACCEPTS,
+  FilePreview,
+  FileUpload,
   Loading,
+  MailboxIcon,
   Message,
   Modal,
   MoreHorizontalIcon,
   MoreVerticalIcon,
+  NotFound,
+  NotFoundCaveman,
+  NotFoundLost,
+  NotFoundYeti,
   NumberInput,
   Pagination,
+  PasswordInput,
+  PhoneIcon,
+  PhoneNumberInput,
   PlusIcon,
   ProgressBar,
   RadioButton,
@@ -3117,7 +5626,9 @@ export {
   chevron_right,
   chevron_up,
   copy,
+  formatFileSize,
   formatNumber,
+  getFilePreviewKind,
   getIconSize,
   key,
   lock,
@@ -3125,9 +5636,13 @@ export {
   log_out,
   message,
   minus_square,
+  normalizePhoneNumber,
   plus,
   plus_square,
   search,
   trash,
+  validateEmail,
+  validatePassword,
+  validatePhoneNumber,
   x_close
 };