@alto-avios/alto-ui 3.0.0 → 3.2.0

package/dist/components/Icon/Icon.js

@@ -1,11 +1,92 @@
 import { jsx } from "react/jsx-runtime";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { useState, useEffect } from "react";
+import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
+import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
+import '../../assets/Icon.css';const iconSize0_5x = "_iconSize0_5x_h11q1_8";
+const iconSize0_75x = "_iconSize0_75x_h11q1_12";
+const iconSize1_25x = "_iconSize1_25x_h11q1_16";
+const iconSize1_5x = "_iconSize1_5x_h11q1_20";
+const iconSize2_5x = "_iconSize2_5x_h11q1_24";
+const iconSize1x = "_iconSize1x_h11q1_39";
+const iconSize2x = "_iconSize2x_h11q1_54";
+const iconSize3x = "_iconSize3x_h11q1_64";
+const iconSize4x = "_iconSize4x_h11q1_69";
+const iconSize5x = "_iconSize5x_h11q1_74";
+const iconSize6x = "_iconSize6x_h11q1_79";
+const iconSize7x = "_iconSize7x_h11q1_84";
+const iconSize8x = "_iconSize8x_h11q1_89";
+const iconSize9x = "_iconSize9x_h11q1_94";
+const iconSize10x = "_iconSize10x_h11q1_99";
+const icon$1 = "_icon_h11q1_1";
+const fixedWidth = "_fixedWidth_h11q1_105";
+const square = "_square_h11q1_109";
+const roomy = "_roomy_h11q1_113";
+const styles = {
+  "icon-wrapper": "_icon-wrapper_h11q1_1",
+  iconSize0_5x,
+  iconSize0_75x,
+  iconSize1_25x,
+  iconSize1_5x,
+  iconSize2_5x,
+  iconSize1x,
+  iconSize2x,
+  iconSize3x,
+  iconSize4x,
+  iconSize5x,
+  iconSize6x,
+  iconSize7x,
+  iconSize8x,
+  iconSize9x,
+  iconSize10x,
+  icon: icon$1,
+  fixedWidth,
+  square,
+  roomy
+};
+const icon = cva(styles.icon, {
+  variants: {
+    padding: {
+      none: "",
+      fixedWidth: styles.fixedWidth,
+      square: styles.square,
+      roomy: styles.roomy
+    },
+    iconSize: {
+      default: styles.iconSize1x,
+      "0.5x": styles.iconSize0_5x,
+      "0.75x": styles.iconSize0_75x,
+      "1x": styles.iconSize1x,
+      "1.25x": styles.iconSize1_25x,
+      "1.5x": styles.iconSize1_5x,
+      "2x": styles.iconSize2x,
+      "2.5x": styles.iconSize2_5x,
+      "3x": styles.iconSize3x,
+      "4x": styles.iconSize4x,
+      "5x": styles.iconSize5x,
+      "6x": styles.iconSize6x,
+      "7x": styles.iconSize7x,
+      "8x": styles.iconSize8x,
+      "9x": styles.iconSize9x,
+      "10x": styles.iconSize10x,
+      lg: styles.iconSize1_25x,
+      sm: styles.iconSize1x,
+      xs: styles.iconSize1x,
+      "2xs": styles.iconSize0_75x,
+      xl: styles.iconSize2x,
+      "2xl": styles.iconSize3x
+    }
+  }
+});
 const Icon = ({
   iconName,
   iconPrefix = "far",
-  iconSize: size,
+  iconSize = "1x",
+  iconPack,
+  color,
+  padding = "none",
   flip,
-  fixedWidth,
+  fixedWidth: fixedWidth2 = true,
   listItem,
   border,
   rotation,
@@ -14,19 +95,31 @@ const Icon = ({
   spin,
   className,
   ariaLabel,
+  privateBgColorVariant,
   ...props
 }) => {
   const [key, setKey] = useState(0);
   useEffect(() => {
     setKey((prevKey) => prevKey + 1);
-  }, [iconName, iconPrefix, size, flip, fixedWidth, listItem, border, rotation, pull, spin, ariaLabel]);
+  }, [iconName, iconPrefix, iconSize, iconPack, color, padding, flip, fixedWidth2, listItem, border, rotation, pull, spin, ariaLabel, privateBgColorVariant]);
+  const fontAwesomeSize = ["2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"].includes(iconSize || "") ? `fa-${iconSize}` : "";
+  const formatSize = (iconSize2) => `iconSize${iconSize2.replace(".", "_")}`;
+  const customSizeClass = iconSize && styles[formatSize(iconSize)];
   const accessibilityProps = ariaLabel ? {
     "aria-label": ariaLabel
   } : {
     "aria-label": iconName
   };
-  const classNames = [iconPrefix, `fa-${iconName}`, size ? `fa-${size}` : "", flip ? `fa-flip-${flip}` : "", fixedWidth ? "fa-fw" : "", listItem ? "fa-li" : "", border ? "fa-border" : "", rotation ? `fa-rotate-${rotation}` : "", pull ? `fa-pull-${pull}` : "", spin ? "fa-spin" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("span", { className: `icon-wrapper ${className || ""}`, children: /* @__PURE__ */ jsx("i", { className: classNames, ...accessibilityProps, ...props, role: "img" }) }, key);
+  const classNames = [iconPrefix, `fa-${iconName}`, fontAwesomeSize, iconPack ? `fa-${iconPack}` : "", flip ? `fa-flip-${flip}` : "", fixedWidth2 ? "fa-fw" : "", listItem ? "fa-li" : "", border ? "fa-border" : "", rotation ? `fa-rotate-${rotation}` : "", pull ? `fa-pull-${pull}` : "", spin ? "fa-spin" : "", customSizeClass].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: `icon-wrapper ${styles["icon-wrapper"]} ${className || ""} ${icon({
+    iconSize
+  })}`, children: /* @__PURE__ */ jsx("i", { className: `${classNames} ${icon({
+    padding
+  })} ${foregroundColorVariants({
+    foregroundColor: color
+  })} ${backgroundColorVariants({
+    backgroundColor: privateBgColorVariant ?? "transparent"
+  })}`, ...accessibilityProps, ...props, role: "img" }) }, key);
 };
 export {
   Icon,

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/IconBackdrop/IconBackdrop.d.ts

@@ -0,0 +1,24 @@
+import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
+import { IconProps } from '../Icon/Icon';
+export interface IconBackdropProps {
+    /**
+     * The shape of the backdrop
+     * @default 'squircle'
+     */
+    backdropShape?: 'circle' | 'squircle';
+    /**
+     * The colour of the backdrop
+     * @default 'accentSubtle'
+     */
+    backdropColor?: BackgroundVariants['backgroundColor'];
+    /**
+     * The size of the backdrop
+     */
+    iconSize?: IconProps['iconSize'];
+    /**
+     * The icon properties
+     */
+    iconProps?: Omit<IconProps, 'iconSize' | 'padding'>;
+}
+export declare const IconBackdrop: ({ backdropShape, backdropColor, iconSize, iconProps, }: IconBackdropProps) => import("react/jsx-runtime").JSX.Element;
+export default IconBackdrop;

package/dist/components/IconBackdrop/IconBackdrop.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { Icon } from "../Icon/Icon.js";
+import '../../assets/IconBackdrop.css';const iconBackdrop$1 = "_iconBackdrop_1e7m2_1";
+const squircle = "_squircle_1e7m2_7";
+const circle = "_circle_1e7m2_11";
+const styles = {
+  iconBackdrop: iconBackdrop$1,
+  squircle,
+  circle
+};
+const iconBackdrop = cva(styles.iconBackdrop, {
+  variants: {
+    backdropShape: {
+      circle: styles.circle,
+      squircle: styles.squircle
+    }
+  }
+});
+const IconBackdrop = ({
+  backdropShape = "squircle",
+  backdropColor = "accentSubtle",
+  iconSize = "2x",
+  iconProps = {}
+}) => {
+  return /* @__PURE__ */ jsx("span", { className: `${iconBackdrop({
+    backdropShape
+  })}`, children: /* @__PURE__ */ jsx(Icon, { padding: "roomy", iconName: iconProps.iconName ?? "plane-up", ...iconProps, iconSize, privateBgColorVariant: backdropColor }) });
+};
+export {
+  IconBackdrop,
+  IconBackdrop as default
+};
+//# sourceMappingURL=IconBackdrop.js.map

package/dist/components/IconBackdrop/IconBackdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconBackdrop.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1 @@
+export { default } from './IconBackdrop';

package/dist/components/IconBackdrop/index.js

@@ -0,0 +1,5 @@
+import { IconBackdrop } from "./IconBackdrop.js";
+export {
+  IconBackdrop as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/IconBackdrop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/IconButton/IconButton.d.ts

@@ -28,5 +28,5 @@ export interface IconButtonProps extends Omit<ButtonProps<'button'>, 'onClick'>,
      */
     tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
 }
-export declare const IconButton: ({ styleType, styleVariant, emphasis, size, isLoading, iconProps, onClick, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, focusStyle, slot, tooltipLabel, tooltipPlacement, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/components/IconButton/IconButton.js

@@ -1,31 +1,31 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import { useRef, useState, useEffect } from "react";
+import { forwardRef, useRef, useState, useEffect } from "react";
 import { Button } from "react-aria-components";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import '../../assets/IconButton.css';const iconButton$1 = "_iconButton_by3pb_1";
-const sm = "_sm_by3pb_24";
-const md = "_md_by3pb_30";
-const lg = "_lg_by3pb_36";
-const accentPrimary = "_accentPrimary_by3pb_46";
-const accentSecondary = "_accentSecondary_by3pb_69";
-const accentTertiary = "_accentTertiary_by3pb_98";
-const accentQuaternary = "_accentQuaternary_by3pb_127";
-const criticalPrimary = "_criticalPrimary_by3pb_151";
-const criticalSecondary = "_criticalSecondary_by3pb_175";
-const criticalTertiary = "_criticalTertiary_by3pb_204";
-const criticalQuaternary = "_criticalQuaternary_by3pb_229";
-const neutralPrimary = "_neutralPrimary_by3pb_254";
-const neutralSecondary = "_neutralSecondary_by3pb_278";
-const neutralTertiary = "_neutralTertiary_by3pb_305";
-const neutralQuaternary = "_neutralQuaternary_by3pb_330";
-const whitePrimary = "_whitePrimary_by3pb_356";
-const whiteSecondary = "_whiteSecondary_by3pb_385";
-const whiteTertiary = "_whiteTertiary_by3pb_416";
-const whiteQuaternary = "_whiteQuaternary_by3pb_445";
+import '../../assets/IconButton.css';const iconButton$1 = "_iconButton_kb1oz_1";
+const sm = "_sm_kb1oz_24";
+const md = "_md_kb1oz_30";
+const lg = "_lg_kb1oz_36";
+const accentPrimary = "_accentPrimary_kb1oz_46";
+const accentSecondary = "_accentSecondary_kb1oz_69";
+const accentTertiary = "_accentTertiary_kb1oz_98";
+const accentQuaternary = "_accentQuaternary_kb1oz_127";
+const criticalPrimary = "_criticalPrimary_kb1oz_151";
+const criticalSecondary = "_criticalSecondary_kb1oz_175";
+const criticalTertiary = "_criticalTertiary_kb1oz_204";
+const criticalQuaternary = "_criticalQuaternary_kb1oz_229";
+const neutralPrimary = "_neutralPrimary_kb1oz_254";
+const neutralSecondary = "_neutralSecondary_kb1oz_278";
+const neutralTertiary = "_neutralTertiary_kb1oz_305";
+const neutralQuaternary = "_neutralQuaternary_kb1oz_330";
+const whitePrimary = "_whitePrimary_kb1oz_356";
+const whiteSecondary = "_whiteSecondary_kb1oz_385";
+const whiteTertiary = "_whiteTertiary_kb1oz_416";
+const whiteQuaternary = "_whiteQuaternary_kb1oz_445";
 const styles = {
   iconButton: iconButton$1,
   sm,
@@ -47,8 +47,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_by3pb_476",
-  "icon-wrapper": "_icon-wrapper_by3pb_481"
+  "fa-spinner-third": "_fa-spinner-third_kb1oz_476",
+  "icon-wrapper": "_icon-wrapper_kb1oz_481"
 };
 const iconButton = cva(styles.iconButton, {
   variants: {
@@ -86,8 +86,7 @@ const iconButton = cva(styles.iconButton, {
     size: "md"
   }
 });
-const IconButton = ({
-  //Button Props
+const IconButton = forwardRef(({
   styleType,
   styleVariant,
   emphasis = "primary",
@@ -113,7 +112,7 @@ const IconButton = ({
   tooltipLabel = "",
   tooltipPlacement = "top",
   ...props
-}) => {
+}, ref) => {
   const buttonRef = useRef(null);
   const [buttonWidth, setButtonWidth] = useState(null);
   useEffect(() => {
@@ -127,7 +126,7 @@ const IconButton = ({
     [resolvedStyleVariant]: emphasis
   })} ${focusStyleVariants({
     focusStyle
-  })}`, ref: buttonRef, onPress: onClick, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, "aria-label": tooltipLabel ? void 0 : isLoading ? "Loading Spinner" : "Icon", style: {
+  })}`, ref: ref || buttonRef, onPress: onClick, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, "aria-label": tooltipLabel ? void 0 : isLoading ? "Loading Spinner" : "Icon", style: {
     width: isLoading && buttonWidth ? `${buttonWidth}px` : void 0
   }, slot, ...props, children: [
     isLoading && /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x" }),
@@ -137,7 +136,8 @@ const IconButton = ({
     return /* @__PURE__ */ jsx(Tooltip, { label: tooltipLabel, placement: tooltipPlacement, isDisabled, children: buttonContent });
   }
   return buttonContent;
-};
+});
+IconButton.displayName = "IconButton";
 export {
   IconButton,
   IconButton as default

package/dist/components/Image/Image.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { BorderVariants } from '../../utils/border/border';
-import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
+import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
 declare const imageVariants: (props?: ({
-    fit?: "fill" | "none" | "contain" | "cover" | "scale-down" | "scaleDown" | null | undefined;
+    fit?: "none" | "fill" | "contain" | "cover" | "scale-down" | "scaleDown" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'className' | 'style'>, Pick<BorderVariants, 'borderRadius'>, BackgroundVariants, VariantProps<typeof imageVariants> {
     /** Image url that will be used as a fallback in case `src` prop is not set or image cannot be loaded */
@@ -18,6 +18,7 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElemen
     children?: React.ReactNode;
     /** Aspect ratio of the image */
     aspectRatio?: number;
+    backgroundColour?: BackgroundVariants['backgroundColor'];
 }
 export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
 export default Image;

package/dist/components/Image/Image.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect } from "react";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { borderVariants } from "../../utils/border/border.js";
-import { backgroundColorVariants } from "../../utils/backgroundColour/backgroundColour.js";
+import { backgroundColorVariants } from "../../utils/backgroundColor/backgroundColor.js";
 import '../../assets/Image.css';const image = "_image_z82es_1";
 const fill = "_fill_z82es_10";
 const contain = "_contain_z82es_14";
@@ -70,11 +70,16 @@ const Image = React.forwardRef(({
   asChild,
   children,
   borderRadius,
+  backgroundColor,
   backgroundColour,
   fit,
   aspectRatio,
   ...props
 }, forwardedRef) => {
+  if (backgroundColour && !backgroundColor) {
+    console.warn("Warning: `backgroundColour` is deprecated and will be removed in a future release. Please use `backgroundColor` instead.");
+  }
+  const resolvedBackgroundColor = backgroundColor ?? backgroundColour;
   const {
     ref: internalRef,
     loaded,
@@ -100,7 +105,7 @@ const Image = React.forwardRef(({
       borderRadius
     })}
     ${backgroundColorVariants({
-      backgroundColour
+      backgroundColor: resolvedBackgroundColor
     })}
     ${imageVariants({
       fit

package/dist/components/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Image.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Link/Link.d.ts

@@ -39,10 +39,10 @@ export interface LinkProps extends AriaLinkProps {
      */
     target?: string;
     /**
-     * The label for the external link
+     * Aria label applied when target="_blank"
      * @default "open in new tab"
      */
-    labelExternal?: string;
+    ariaLabelExternal?: string;
     /**
      * 	The focus style of the button
      */
@@ -63,5 +63,5 @@ export interface LinkProps extends AriaLinkProps {
      */
     linkText?: string;
 }
-declare const Link: ({ size, underline, iconStartProps, iconEndProps, iconProps, linkText, href, target, focusStyle, children, labelExternal, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+declare const Link: ({ size, underline, iconStartProps, iconEndProps, iconProps, linkText, href, target, focusStyle, children, ariaLabelExternal, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/dist/components/Link/Link.js

@@ -57,7 +57,7 @@ const Link = ({
   target = "_self",
   focusStyle = "default",
   children,
-  labelExternal = "open in new tab",
+  ariaLabelExternal = "open in new tab",
   ...props
 }) => {
   const finalIconEndProps = iconProps ?? // Use deprecated iconProps if provided
@@ -66,7 +66,7 @@ const Link = ({
   });
   const externalLinkProps = target === "_blank" ? {
     rel: "noopener noreferrer",
-    "aria-label": labelExternal
+    "aria-label": ariaLabelExternal
   } : {};
   return /* @__PURE__ */ jsxs(Link$1, { className: `${link({
     size,

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../Button/Button';
+type PlacementType = 'top' | 'top start' | 'top end' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left top' | 'left bottom';
+export interface MenuProps {
+    /**
+     * The label text for the menu button
+     */
+    label: string;
+    /**
+     * Accessible label for the menu (for screen readers)
+     * Defaults to the button label if not provided
+     * @default props.label
+     */
+    'aria-label'?: string;
+    /**
+     * Whether the menu is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The placement of the menu relative to the button
+     * @default 'bottom start'
+     */
+    placement?: PlacementType;
+    /**
+     * The button emphasis
+     * @default 'tertiary'
+     */
+    buttonEmphasis?: ButtonProps['emphasis'];
+    /**
+     * The button style variant
+     * @default 'neutral'
+     */
+    buttonStyleVariant?: ButtonProps['styleVariant'];
+    /**
+     * The button style variant when menu is open
+     * @default buttonStyleVariant value
+     */
+    buttonOpenVariant?: ButtonProps['styleVariant'];
+    /**
+     * ID of an element to position the menu against instead of the button
+     * When provided, the menu will be positioned relative to this element
+     */
+    alignToElementId?: string;
+    /**
+     * Whether the menu should flip to fit in the viewport
+     * @default false
+     */
+    shouldFlip?: boolean;
+    /**
+     * Whether the menu should open on hover and focus
+     * @default false
+     */
+    openOnHoverAndFocus?: boolean;
+    /**
+     * Whether to allow tabbing out of the menu
+     * @default true
+     */
+    allowTabOut?: boolean;
+    /**
+     * The content to display inside the menu (as JSX children)
+     * Can be custom HTML content
+     */
+    children: React.ReactNode;
+    /**
+     * Icon props for the start of the button
+     */
+    iconStartProps?: ButtonProps['iconStartProps'];
+    /**
+     * Icon props for the end of the button
+     */
+    iconEndProps?: ButtonProps['iconEndProps'];
+}
+export declare const Menu: ({ label, "aria-label": ariaLabel, isDisabled, placement, buttonEmphasis, buttonStyleVariant, buttonOpenVariant, alignToElementId, shouldFlip, openOnHoverAndFocus, allowTabOut, children, iconStartProps, iconEndProps, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export default Menu;