@passui/react 0.1.20 → 0.1.22

package/dist/types/src/components/context-menu/menu-reveal.d.ts

@@ -4,6 +4,15 @@ export type MenuRect = {
     width: number;
     height: number;
 };
+/** Return toward the source while handing its material back to the real trigger. */
+export declare function menuSurfaceExit(source: ReturnType<typeof menuSurfaceReveal>): {
+    opacity: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    borderRadius: number;
+};
 /** Animate the material's bounds independently so menu text never stretches. */
 export declare function menuSurfaceReveal(source: MenuRect | undefined, target: MenuRect & {
     radius?: number;

package/dist/types/src/components/one-time-code/one-time-code.d.ts

@@ -1,18 +1,23 @@
-import { type InputHTMLAttributes } from "react";
+import { type InputHTMLAttributes, type Ref } from "react";
 export type OneTimeCodeStatus = "idle" | "verifying" | "success" | "error";
+export type OneTimeCodeFormat = "numeric" | "alphanumeric";
 export interface OneTimeCodeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "maxLength" | "size"> {
     label: string;
     value: string;
     onChange: (value: string) => void;
     /** Called when a complete code is entered, including paste and autofill. */
     onComplete?: (value: string) => void;
-    /** Number of digits, 3–8. @default 6 */
+    /** Number of characters, 3–8. @default 6 */
     length?: number;
+    /** Accepted characters. Alphanumeric codes use uppercase ASCII letters and digits. @default "numeric" */
+    format?: OneTimeCodeFormat;
+    /** Ref to the single native input, for focus and selection. */
+    ref?: Ref<HTMLInputElement>;
     status?: OneTimeCodeStatus;
     /** Localized verification feedback announced without reading decorative cells. */
     statusLabel?: string;
 }
-/** Normalize common numeric keyboards without splitting the browser's input into cells. */
-export declare function normalizeCode(value: string, length: number): string;
+/** Normalize common numeric keyboards and optional ASCII letters in one native field. */
+export declare function normalizeCode(value: string, length: number, format?: OneTimeCodeFormat): string;
 /** Six cells, one field: paste, autofill, selection and Backspace stay native. */
-export declare function OneTimeCode({ label, value, onChange, onComplete, length, status, statusLabel, className, disabled, id: suppliedId, ...props }: OneTimeCodeProps): import("react").JSX.Element;
+export declare function OneTimeCode({ label, value, onChange, onComplete, length, format, ref, status, statusLabel, className, disabled, id: suppliedId, ...props }: OneTimeCodeProps): import("react").JSX.Element;

package/dist/types/src/components/sheet/sheet.d.ts

@@ -5,6 +5,8 @@ export interface SheetProps {
     open: boolean;
     /** Called on Escape or an outside press. */
     onClose: () => void;
+    /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
+    dismissOnOutsidePress?: boolean;
     /** Read out by screen readers as the sheet's name. */
     label: string;
     /** ID of a visible heading to use instead of label for the accessible name. */

package/dist/types/src/icons/icons.d.ts

@@ -152,6 +152,10 @@ export declare const LanguageIcon: {
     ({ size, strokeWidth, ...props }: IconProps): import("react").JSX.Element;
     displayName: string;
 };
+export declare const LoadingIcon: {
+    ({ size, strokeWidth, ...props }: IconProps): import("react").JSX.Element;
+    displayName: string;
+};
 export declare const SignOutIcon: {
     ({ size, strokeWidth, ...props }: IconProps): import("react").JSX.Element;
     displayName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.20",
+    "version": "0.1.22",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {

package/src/components/context-menu/context-menu-host.tsx

@@ -9,7 +9,7 @@ import { spring } from "../../motion/transitions"
 import { concealMenuSource } from "./conceal-menu-source"
 import { findMenuTypeaheadIndex, isMenuNavigationKey, nextMenuIndex } from "./menu-navigation"
 import { menuPosition } from "./menu-position"
-import { menuSurfaceReveal } from "./menu-reveal"
+import { menuSurfaceExit, menuSurfaceReveal } from "./menu-reveal"
 import {
     closeContextMenu,
     getContextMenu,
@@ -44,6 +44,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
 
     useLayoutEffect(() => {
         if (
+            !present ||
             (!menu.source && !menu.toolbar) ||
             !position.ready ||
             !(menu.anchor instanceof HTMLElement)
@@ -64,7 +65,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
             )
                 menu.anchor.focus({ preventScroll: true })
         }
-    }, [menu, position.ready])
+    }, [menu, position.ready, present])
 
     useLayoutEffect(() => {
         const surface = ref.current
@@ -283,8 +284,12 @@ function Menu({ menu }: { menu: OpenMenu }) {
                               }
                             : undefined
                     }
-                    exit={reducedMotion ? { opacity: 0 } : source}
-                    transition={reducedMotion ? { duration: 0 } : spring.smooth}
+                    exit={reducedMotion ? { opacity: 0 } : menuSurfaceExit(source)}
+                    transition={
+                        reducedMotion
+                            ? { duration: 0 }
+                            : { ...spring.smooth, opacity: { duration: 0.16 } }
+                    }
                 />
             )}
             <motion.div

package/src/components/context-menu/menu-reveal.ts

@@ -5,6 +5,11 @@ export type MenuRect = {
     height: number
 }
 
+/** Return toward the source while handing its material back to the real trigger. */
+export function menuSurfaceExit(source: ReturnType<typeof menuSurfaceReveal>) {
+    return { ...source, opacity: 0 }
+}
+
 /** Animate the material's bounds independently so menu text never stretches. */
 export function menuSurfaceReveal(
     source: MenuRect | undefined,

package/src/components/locale-switcher/locale-switcher.tsx

@@ -1,7 +1,10 @@
 import { getNativeLanguageName } from "../../lib/language"
 import { cn } from "../../lib/class-names"
-import { AnimatePresence, motion, useDragControls, useMotionValue } from "motion/react"
+import { motion, useDragControls, useMotionValue } from "motion/react"
 import { useEffect, useRef, useState } from "react"
+import { useDismiss } from "../../hooks/use-dismiss"
+import { CheckIcon, GlobeIcon } from "../../icons/icons"
+import { Popover } from "../popover/popover"
 
 type Side = "left" | "right"
 type Edge = "top" | "bottom"
@@ -66,6 +69,7 @@ export function LocaleSwitcher<L extends string>({
     label,
 }: LocaleSwitcherProps<L>) {
     const containerRef = useRef<HTMLDivElement>(null)
+    const triggerRef = useRef<HTMLButtonElement>(null)
     const dragControls = useDragControls()
     const x = useMotionValue(0)
     const y = useMotionValue(0)
@@ -82,15 +86,12 @@ export function LocaleSwitcher<L extends string>({
         if (stored) setAnchor(stored)
     }, [storageKey])
 
+    useDismiss(containerRef, open, () => setOpen(false))
     useEffect(() => {
-        if (!open) return
-        function handlePointerDown(e: PointerEvent) {
-            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-                setOpen(false)
-            }
-        }
-        document.addEventListener("pointerdown", handlePointerDown)
-        return () => document.removeEventListener("pointerdown", handlePointerDown)
+        if (open)
+            containerRef.current
+                ?.querySelector<HTMLButtonElement>('[role="menuitemradio"][aria-checked="true"]')
+                ?.focus()
     }, [open])
 
     function commitDraggedPosition() {
@@ -129,74 +130,114 @@ export function LocaleSwitcher<L extends string>({
                 ...(anchor.edge === "top" ? { top: anchor.y } : { bottom: anchor.y }),
             }}
             onDragEnd={commitDraggedPosition}
-            onMouseLeave={() => open && setOpen(false)}
+            onDragStart={() => setOpen(false)}
+            onKeyDown={(event) => {
+                if (!open) return
+                if (event.key === "Escape") {
+                    event.preventDefault()
+                    setOpen(false)
+                    triggerRef.current?.focus()
+                    return
+                }
+                if (event.key === "Tab") {
+                    setOpen(false)
+                    return
+                }
+                if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return
+                const options = Array.from(
+                    containerRef.current?.querySelectorAll<HTMLButtonElement>(
+                        '[role="menuitemradio"]'
+                    ) ?? []
+                )
+                if (!options.length) return
+                event.preventDefault()
+                const current = options.indexOf(document.activeElement as HTMLButtonElement)
+                const next =
+                    event.key === "Home"
+                        ? 0
+                        : event.key === "End"
+                          ? options.length - 1
+                          : (current + (event.key === "ArrowDown" ? 1 : -1) + options.length) %
+                            options.length
+                options[next]?.focus()
+            }}
             className="z-60"
         >
-            <motion.div
-                layout
-                transition={{
-                    type: "spring",
-                    damping: 28,
-                    stiffness: 380,
+            <button
+                ref={triggerRef}
+                type="button"
+                aria-label={label}
+                aria-haspopup="menu"
+                aria-expanded={open}
+                onPointerDown={(e) => dragControls.start(e)}
+                onClick={() => setOpen((prev) => !prev)}
+                onKeyDown={(event) => {
+                    if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+                        event.preventDefault()
+                        setOpen(true)
+                    }
                 }}
+                className="glass-menu flex h-12 min-w-20 touch-none cursor-grab items-center justify-center gap-2 rounded-full px-4 text-caption font-semibold text-label active:cursor-grabbing"
+            >
+                <GlobeIcon aria-hidden="true" className="size-5" />
+                {locale.toUpperCase()}
+            </button>
+            <Popover
+                open={open}
+                anchorRef={triggerRef}
+                origin={anchor.side === "right" ? "top-right" : "top-left"}
+                role="menu"
+                aria-label={label}
                 className={cn(
-                    "overflow-hidden rounded-2xl border border-separator/35 bg-elevated/80 shadow-lg",
-                    "backdrop-blur-xl backdrop-saturate-150",
-                    "flex",
-                    growsUp ? "flex-col-reverse" : "flex-col",
-                    open ? "w-40 gap-px p-1" : "size-10"
+                    "top-0 flex w-52 max-w-[calc(100vw-2.5rem)] gap-2 p-2",
+                    anchor.side === "right" ? "right-0" : "left-0",
+                    growsUp ? "flex-col-reverse" : "flex-col"
                 )}
             >
                 <button
                     type="button"
                     aria-label={label}
-                    aria-expanded={open}
-                    onPointerDown={(e) => dragControls.start(e)}
-                    onClick={() => setOpen((prev) => !prev)}
-                    className={cn(
-                        "flex shrink-0 cursor-grab items-center justify-center",
-                        "active:cursor-grabbing text-xs font-semibold",
-                        open ? "h-9 w-full rounded-lg hover:bg-accent" : "size-10 rounded-2xl"
-                    )}
+                    onClick={() => {
+                        setOpen(false)
+                        triggerRef.current?.focus()
+                    }}
+                    className="flex min-h-12 w-full items-center justify-center gap-2 rounded-4xl bg-fill/50 text-caption font-semibold text-label"
                 >
+                    <GlobeIcon aria-hidden="true" className="size-5" />
                     {locale.toUpperCase()}
                 </button>
-
-                <AnimatePresence>
-                    {open && (
-                        <motion.div
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            transition={{ delay: 0.05 }}
-                            className="flex flex-col gap-px"
-                        >
-                            {langs.map((item) => {
-                                const active = item.value === locale
-                                return (
-                                    <button
-                                        key={item.value}
-                                        type="button"
-                                        onClick={() => {
-                                            setOpen(false)
-                                            if (!active) {
-                                                onSelect(item.value)
-                                            }
-                                        }}
-                                        className={cn(
-                                            "rounded-sm px-2 py-1.5 text-left text-sm",
-                                            "hover:bg-accent transition-colors",
-                                            active && "text-primary font-medium"
-                                        )}
-                                    >
-                                        {item.label}
-                                    </button>
-                                )
-                            })}
-                        </motion.div>
-                    )}
-                </AnimatePresence>
-            </motion.div>
+                <div className="flex flex-col gap-1">
+                    {langs.map((item) => {
+                        const active = item.value === locale
+                        return (
+                            <button
+                                key={item.value}
+                                type="button"
+                                role="menuitemradio"
+                                aria-checked={active}
+                                tabIndex={-1}
+                                onClick={() => {
+                                    setOpen(false)
+                                    triggerRef.current?.focus()
+                                    if (!active) {
+                                        onSelect(item.value)
+                                    }
+                                }}
+                                className={cn(
+                                    "flex min-h-11 items-center justify-between gap-3 rounded-4xl px-3.5 py-2.5 text-left text-footnote text-label outline-none",
+                                    "hover:bg-fill/65 focus-visible:bg-fill/65 transition-colors",
+                                    active && "bg-accent/12 font-medium"
+                                )}
+                            >
+                                {item.label}
+                                {active && (
+                                    <CheckIcon aria-hidden="true" className="size-4 shrink-0" />
+                                )}
+                            </button>
+                        )
+                    })}
+                </div>
+            </Popover>
         </motion.div>
     )
 }

package/src/components/one-time-code/one-time-code.tsx

@@ -1,8 +1,16 @@
-import { type CSSProperties, type InputHTMLAttributes, useEffect, useId, useRef } from "react"
+import {
+    type CSSProperties,
+    type InputHTMLAttributes,
+    type Ref,
+    useEffect,
+    useId,
+    useRef,
+} from "react"
 import { CheckIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 
 export type OneTimeCodeStatus = "idle" | "verifying" | "success" | "error"
+export type OneTimeCodeFormat = "numeric" | "alphanumeric"
 export interface OneTimeCodeProps
     extends Omit<
         InputHTMLAttributes<HTMLInputElement>,
@@ -13,21 +21,29 @@ export interface OneTimeCodeProps
     onChange: (value: string) => void
     /** Called when a complete code is entered, including paste and autofill. */
     onComplete?: (value: string) => void
-    /** Number of digits, 3–8. @default 6 */
+    /** Number of characters, 3–8. @default 6 */
     length?: number
+    /** Accepted characters. Alphanumeric codes use uppercase ASCII letters and digits. @default "numeric" */
+    format?: OneTimeCodeFormat
+    /** Ref to the single native input, for focus and selection. */
+    ref?: Ref<HTMLInputElement>
     status?: OneTimeCodeStatus
     /** Localized verification feedback announced without reading decorative cells. */
     statusLabel?: string
 }
 
-/** Normalize common numeric keyboards without splitting the browser's input into cells. */
-export function normalizeCode(value: string, length: number) {
+/** Normalize common numeric keyboards and optional ASCII letters in one native field. */
+export function normalizeCode(
+    value: string,
+    length: number,
+    format: OneTimeCodeFormat = "numeric"
+) {
     return Array.from(value, (digit) => {
         const point = digit.codePointAt(0) ?? 0
         for (const base of [0x30, 0x660, 0x6f0, 0xff10]) {
             if (point >= base && point < base + 10) return String(point - base)
         }
-        return ""
+        return format === "alphanumeric" && /^[a-z]$/i.test(digit) ? digit.toUpperCase() : ""
     })
         .join("")
         .slice(0, length)
@@ -40,6 +56,8 @@ export function OneTimeCode({
     onChange,
     onComplete,
     length = 6,
+    format = "numeric",
+    ref,
     status = "idle",
     statusLabel,
     className,
@@ -52,13 +70,14 @@ export function OneTimeCode({
     const filter = `otp-goo-${generated.replace(/:/g, "")}`
     const input = useRef<HTMLInputElement>(null)
     const count = Number.isFinite(length) ? Math.max(3, Math.min(8, Math.round(length))) : 6
-    const code = normalizeCode(value, count)
+    const code = normalizeCode(value, count, format)
     const locked = disabled || props.readOnly || status === "verifying" || status === "success"
     useEffect(() => {
         if (status === "error") input.current?.select()
     }, [status])
     const update = (next: string) => {
-        const normalized = normalizeCode(next, count)
+        if (locked) return
+        const normalized = normalizeCode(next, count, format)
         onChange(normalized)
         if (normalized.length === count && normalized !== code) onComplete?.(normalized)
     }
@@ -123,26 +142,37 @@ export function OneTimeCode({
                 <CheckIcon aria-hidden="true" className="passui-otp-check" size={24} />
                 <input
                     {...props}
-                    ref={input}
+                    ref={(node) => {
+                        input.current = node
+                        if (typeof ref === "function") return ref(node)
+                        if (ref) ref.current = node
+                    }}
                     id={id}
                     type="text"
-                    inputMode="numeric"
-                    autoComplete="one-time-code"
-                    pattern="[0-9]*"
+                    inputMode={format === "numeric" ? "numeric" : "text"}
+                    autoComplete={props.autoComplete ?? "one-time-code"}
+                    autoCapitalize={format === "alphanumeric" ? "characters" : "off"}
+                    spellCheck={false}
+                    pattern={format === "numeric" ? "[0-9]*" : "[A-Za-z0-9]*"}
                     maxLength={count}
+                    minLength={count}
                     aria-label={label}
                     value={code}
                     disabled={disabled}
                     readOnly={locked}
                     aria-busy={status === "verifying" || undefined}
                     aria-invalid={status === "error" || props["aria-invalid"]}
-                    aria-describedby={statusLabel ? `${id}-status` : props["aria-describedby"]}
+                    aria-describedby={
+                        [props["aria-describedby"], statusLabel && `${id}-status`]
+                            .filter(Boolean)
+                            .join(" ") || undefined
+                    }
                     onChange={(event) => update(event.target.value)}
                     onPaste={(event) => {
                         props.onPaste?.(event)
                         if (event.defaultPrevented || locked) return
                         const pasted = event.clipboardData.getData("text")
-                        const normalized = normalizeCode(pasted, count)
+                        const normalized = normalizeCode(pasted, count, format)
                         if (normalized && normalized !== pasted) {
                             event.preventDefault()
                             update(normalized)

package/src/components/popover/anchored-surface.tsx

@@ -40,9 +40,12 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
         const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
         const material = useRef<HTMLDivElement>(null)
         const content = useRef<HTMLDivElement>(null)
-        const animated = useRef<{ values: number[]; velocities: number[]; opacity: number } | null>(
-            null
-        )
+        const animated = useRef<{
+            values: number[]
+            velocities: number[]
+            opacity: number
+            materialOpacity: number
+        } | null>(null)
         const placement = useAnchoredPlacement(anchor, width, needed, true)
         const [geometry, setGeometry] = useState<{
             source: ReturnType<typeof menuSurfaceReveal>
@@ -82,12 +85,16 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
         useLayoutEffect(() => {
             if (!root.current) return
             const unregister = registerFloatingLayer(root.current, anchor)
+            return unregister
+        }, [anchor])
+
+        useLayoutEffect(() => {
+            if (!present) return
             const restore = concealMenuSource(anchor, false)
             return () => {
-                unregister()
                 restore()
             }
-        }, [anchor])
+        }, [anchor, present])
 
         useLayoutEffect(() => {
             if (!geometry || !material.current || !content.current) {
@@ -110,6 +117,7 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
                 values: [...source],
                 velocities: source.map(() => 0),
                 opacity: 0,
+                materialOpacity: 1,
             }
             animated.current = state
             let frame = 0,
@@ -120,6 +128,7 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
                 pane.style.width = `${Math.max(0, width)}px`
                 pane.style.height = `${Math.max(0, height)}px`
                 pane.style.borderRadius = `${Math.max(0, radius)}px`
+                pane.style.opacity = String(state.materialOpacity)
                 body.style.opacity = String(state.opacity)
             }
             const tick = (now: number) => {
@@ -151,11 +160,18 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
                 )
                 const opacity = present ? Math.max(0, (progress - 0.25) / 0.75) : 0
                 state.opacity += (opacity - state.opacity) * (1 - Math.exp(-dt / 0.04))
+                state.materialOpacity +=
+                    ((present ? 1 : 0) - state.materialOpacity) * (1 - Math.exp(-dt / 0.04))
                 paint()
-                if (resting && Math.abs(opacity - state.opacity) < 0.01) {
+                if (
+                    resting &&
+                    Math.abs(opacity - state.opacity) < 0.01 &&
+                    Math.abs((present ? 1 : 0) - state.materialOpacity) < 0.01
+                ) {
                     state.values = [...target]
                     state.velocities.fill(0)
                     state.opacity = present ? 1 : 0
+                    state.materialOpacity = present ? 1 : 0
                     paint()
                     if (!present) remove?.()
                     return
@@ -166,6 +182,7 @@ export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
                 state.values = [...target]
                 state.velocities.fill(0)
                 state.opacity = present ? 1 : 0
+                state.materialOpacity = present ? 1 : 0
                 paint()
                 if (!present) remove?.()
             } else {

package/src/components/popover/popover.tsx

@@ -7,7 +7,7 @@ import {
 } from "motion/react"
 import { type ReactNode, type RefObject, useLayoutEffect, useRef, useState } from "react"
 import { concealMenuSource } from "../context-menu/conceal-menu-source"
-import { menuSurfaceReveal } from "../context-menu/menu-reveal"
+import { menuSurfaceExit, menuSurfaceReveal } from "../context-menu/menu-reveal"
 import { cn } from "../../lib/class-names"
 import { screenEdges } from "../../lib/screen-edges"
 import { floatingPanelMotion, spring } from "../../motion/transitions"
@@ -183,11 +183,16 @@ function OpenPopover({
                 }
             )
         )
+    }, [anchorRef, fit])
+
+    useLayoutEffect(() => {
+        const source = anchorRef?.current
+        if (!source || !present) return
         const restoreSource = concealMenuSource(source, false)
         return () => {
             restoreSource()
         }
-    }, [anchorRef, fit])
+    }, [anchorRef, present])
 
     return (
         <motion.div
@@ -274,8 +279,12 @@ function OpenPopover({
                               }
                             : undefined
                     }
-                    exit={reducedMotion ? { opacity: 0 } : (reveal ?? { opacity: 0 })}
-                    transition={reducedMotion ? { duration: 0 } : spring.smooth}
+                    exit={reducedMotion || !reveal ? { opacity: 0 } : menuSurfaceExit(reveal)}
+                    transition={
+                        reducedMotion
+                            ? { duration: 0 }
+                            : { ...spring.smooth, opacity: { duration: 0.16 } }
+                    }
                 />
             )}
             {children}

package/src/components/sheet/sheet.tsx

@@ -13,6 +13,8 @@ export interface SheetProps {
     open: boolean
     /** Called on Escape or an outside press. */
     onClose: () => void
+    /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
+    dismissOnOutsidePress?: boolean
     /** Read out by screen readers as the sheet's name. */
     label: string
     /** ID of a visible heading to use instead of label for the accessible name. */
@@ -41,6 +43,7 @@ export function Sheet({ open, ...props }: SheetProps) {
 
 function OpenSheet({
     onClose,
+    dismissOnOutsidePress = true,
     label,
     labelledBy,
     placement = "adaptive",
@@ -77,7 +80,7 @@ function OpenSheet({
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
-                onClick={onClose}
+                onClick={dismissOnOutsidePress ? onClose : undefined}
             />
             <motion.div
                 ref={panel}

package/src/icons/icons.tsx

@@ -1,5 +1,6 @@
 import {
     LanguagesIcon,
+    Loading03Icon,
     Logout01Icon,
     MoreVertical,
     SentIcon,
@@ -227,6 +228,7 @@ export const catalogIcons = {
 
 export const NoteIcon = /* @__PURE__ */ icon(Note01Icon, "NoteIcon")
 export const LanguageIcon = /* @__PURE__ */ icon(LanguagesIcon, "LanguageIcon")
+export const LoadingIcon = /* @__PURE__ */ icon(Loading03Icon, "LoadingIcon")
 export const SignOutIcon = /* @__PURE__ */ icon(Logout01Icon, "SignOutIcon")
 export const MoreVerticalIcon = /* @__PURE__ */ icon(MoreVertical, "MoreVerticalIcon")
 export const SendIcon = /* @__PURE__ */ icon(SentIcon, "SendIcon")