@alto-avios/alto-ui 3.0.0 → 3.1.0

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { AriaDialogProps } from 'react-aria';
+export type DialogSize = 'dialogSmall' | 'dialogMedium' | 'dialogLarge';
+export type DialogRole = 'alertdialog' | 'dialog';
+export interface DialogProps extends AriaDialogProps {
+    /** Whether the dialog is currently visible */
+    isOpen?: boolean;
+    /** Callback function when dialog is requested to close */
+    onClose?: () => void;
+    /** Width variant of the dialog - affects max-width */
+    size?: DialogSize;
+    /** Whether clicking outside or escape key should be blocked */
+    modal?: boolean;
+    /** Shows/hides the close (X) button in header */
+    hasDismissButton?: boolean;
+    /** ARIA role - use 'alertdialog' for important messages */
+    role?: DialogRole;
+    /** Required unique ID for the dialog */
+    id?: string;
+    /** ID of element labeling the dialog (required for a11y) */
+    'aria-describedby'?: string;
+    /** ID of element describing the dialog (optional but recommended) */
+    'aria-labelledby'?: string;
+}
+export interface DialogComposition {
+    Header: typeof DialogHeader;
+    Content: typeof DialogContent;
+}
+declare const DialogHeader: ({ id, children, }: {
+    children: React.ReactNode;
+    id?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare function Dialog(props: React.PropsWithChildren<DialogProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Dialog {
+    var Header: ({ id, children, }: {
+        children: React.ReactNode;
+        id?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Content: ({ children }: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const DialogContent: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Dialog;

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,117 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef } from "react";
+import { IconButton } from "../IconButton/IconButton.js";
+import { OverlayContainer, useOverlay, usePreventScroll, useModal } from "@react-aria/overlays";
+import { useDialog } from "@react-aria/dialog";
+import { FocusScope } from "@react-aria/focus";
+import '../../assets/Dialog.css';const dialogWrapper = "_dialogWrapper_o29gm_1";
+const overlay = "_overlay_o29gm_10";
+const dialog = "_dialog_o29gm_1";
+const dialogContent = "_dialogContent_o29gm_47";
+const dialogHeading = "_dialogHeading_o29gm_54";
+const dialogContentInner = "_dialogContentInner_o29gm_58";
+const noHeader = "_noHeader_o29gm_64";
+const closeButton = "_closeButton_o29gm_68";
+const dialogSmall = "_dialogSmall_o29gm_94";
+const dialogMedium = "_dialogMedium_o29gm_98";
+const dialogLarge = "_dialogLarge_o29gm_102";
+const styles = {
+  dialogWrapper,
+  overlay,
+  dialog,
+  dialogContent,
+  dialogHeading,
+  dialogContentInner,
+  noHeader,
+  closeButton,
+  dialogSmall,
+  dialogMedium,
+  dialogLarge
+};
+const DialogHeader = ({
+  /** ID used to reference this header for aria-labelledby */
+  id,
+  /** Content of the header section */
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.dialogHeading, id, children });
+};
+function DialogWrapper({
+  children,
+  ...props
+}) {
+  const {
+    onClose,
+    size = "medium",
+    modal = false,
+    hasDismissButton = true,
+    role = "dialog",
+    id
+  } = props;
+  const ref = useRef(null);
+  const {
+    dialogProps
+  } = useDialog({
+    ...props,
+    role
+  }, ref);
+  const {
+    overlayProps,
+    underlayProps
+  } = useOverlay({
+    isOpen: true,
+    onClose,
+    isDismissable: true,
+    ...props
+  }, ref);
+  usePreventScroll();
+  const {
+    modalProps
+  } = useModal();
+  const headerChild = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.type === DialogHeader);
+  const otherChildren = React.Children.toArray(children).filter((child) => !React.isValidElement(child) || child.type !== DialogHeader);
+  const hasHeader = Boolean(headerChild) || hasDismissButton;
+  const headerId = props["aria-labelledby"] || `${id}-header`;
+  const contentId = props["aria-describedby"] || `${id}-content`;
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.dialogWrapper} ${modal ? styles.modal : ""}`, children: [
+    modal && /* @__PURE__ */ jsx("div", { className: styles.overlay, ...underlayProps, onClick: onClose, onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === "Space") {
+        onClose == null ? void 0 : onClose();
+      }
+    }, role: "button", tabIndex: 0 }),
+    /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: false, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ...dialogProps, ...modalProps, ref, className: `${styles.dialog} ${styles[size]}`, "data-size": size, id, role, "aria-labelledby": headerId, "aria-describedby": contentId, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${styles.dialogContent} ${!hasHeader ? styles.noHeader : ""}`, children: [
+        hasHeader && /* @__PURE__ */ jsx("div", { className: styles.dialogHeader, id: headerId, children: headerChild }),
+        /* @__PURE__ */ jsx("div", { id: contentId, children: otherChildren })
+      ] }),
+      hasDismissButton && /* @__PURE__ */ jsx("div", { className: styles.closeButton, children: /* @__PURE__ */ jsx(IconButton, { onClick: onClose, styleVariant: "white", emphasis: "primary", size: "sm", iconProps: {
+        iconName: "close",
+        iconPrefix: "far",
+        iconSize: "1x"
+      }, tooltipLabel: "Close dialog", "aria-label": "Close dialog" }) })
+    ] }) })
+  ] });
+}
+function Dialog(props) {
+  const {
+    isOpen,
+    children
+  } = props;
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(OverlayContainer, { children: /* @__PURE__ */ jsx(DialogWrapper, { ...props, children }) });
+}
+const DialogContent = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.dialogContentInner, children });
+};
+Dialog.Header = DialogHeader;
+Dialog.Content = DialogContent;
+export {
+  Dialog,
+  DialogContent,
+  Dialog as default
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map

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

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

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

package/dist/components/Dialog/index.js

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

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

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

package/dist/components/FieldError/FieldError.js

@@ -15,7 +15,7 @@ const FieldError = ({
     const errorMessage = children || (validationErrors == null ? void 0 : validationErrors[0]);
     if (!errorMessage) return null;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", "aria-label": "error-icon" }),
+      /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas", "aria-label": "error-icon" }),
       errorMessage
     ] });
   } });

package/dist/components/FieldsetHeader/FieldsetHeader.js

@@ -1,16 +1,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Heading } from "../Heading/Heading.js";
-import '../../assets/FieldsetHeader.css';const fieldsetHeader = "_fieldsetHeader_abhm4_1";
+import '../../assets/FieldsetHeader.css';const fieldsetHeader = "_fieldsetHeader_6pt1c_1";
 const styles = {
   fieldsetHeader,
-  "fieldsetHeader-description": "_fieldsetHeader-description_abhm4_12"
+  "fieldsetHeader-description": "_fieldsetHeader-description_6pt1c_12"
 };
 const FieldsetHeader = ({
   children,
   description
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: styles["fieldsetHeader"], children: [
-    /* @__PURE__ */ jsx(Heading, { as: "legend", size: "sm", fgColor: "accentSecondary", children }),
+    /* @__PURE__ */ jsx(Heading, { as: "legend", size: "sm", foregroundColor: "accentSecondary", children }),
     description && /* @__PURE__ */ jsx("span", { className: styles["fieldsetHeader-description"], children: description })
   ] });
 };

package/dist/components/Heading/Heading.d.ts

@@ -1,20 +1,39 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { fgColorVariants } from '../../utils/fgColour/fgColor';
+import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
 declare const heading: (props?: ({
-    size?: "lg" | "sm" | "xs" | "md" | "xl" | "xxs" | null | undefined;
+    size?: "lg" | "sm" | "xs" | "xl" | "md" | "xxs" | null | undefined;
     textAlign?: "end" | "start" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HeadingVariants = VariantProps<typeof heading>;
-type FgColorVariants = VariantProps<typeof fgColorVariants>;
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'legend';
 type HeadingSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface HeadingProps extends HeadingVariants {
+    /**
+     * children
+     */
     children: React.ReactNode;
+    /**
+     * The heading element to render
+     */
     as?: HeadingLevel;
+    /**
+     * The size of the heading
+     */
     size?: HeadingSize;
-    fgColor?: FgColorVariants['fgColor'];
+    /**
+     * The foreground color of the heading
+     */
+    foregroundColor?: ForegroundVariants['foregroundColor'];
+    /**
+     * The foreground color of the heading
+     * @deprecated Use `foregroundColor` instead
+     */
+    fgColor?: ForegroundVariants['foregroundColor'];
+    /**
+     * The text alignment of the heading
+     */
     textAlign?: 'start' | 'center' | 'end';
 }
-export declare const Heading: ({ children, as: Component, size, fgColor, textAlign, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ children, as: Component, size, foregroundColor, fgColor, textAlign, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
 export default Heading;

package/dist/components/Heading/Heading.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import { fgColorVariants } from "../../utils/fgColour/fgColor.js";
+import { foregroundColorVariants } from "../../utils/foregroundColour/foregroundColor.js";
 import '../../assets/Heading.css';const heading$1 = "_heading_15puj_1";
 const xxs = "_xxs_15puj_8";
 const xs = "_xs_15puj_15";
@@ -60,16 +60,21 @@ const Heading = ({
   children,
   as: Component = "h1",
   size,
-  fgColor = "accentPrimary",
+  foregroundColor = "accentSecondary",
+  fgColor,
   textAlign = "start",
   ...props
 }) => {
   const effectiveSize = size || DEFAULT_HEADING_SIZE_MAP[Component];
+  if (fgColor) {
+    console.warn("The `fgColor` prop has been deprecated. Please use `foregroundColor` instead.");
+  }
+  const resolvedFontColor = fgColor ?? foregroundColor ?? "accentSecondary";
   return /* @__PURE__ */ jsx(Component, { className: `${heading({
     size: effectiveSize,
     textAlign
-  })} ${fgColorVariants({
-    fgColor
+  })} ${foregroundColorVariants({
+    foregroundColor: resolvedFontColor
   })}`, ...props, children });
 };
 export {

package/dist/components/Heading/Heading.js.map

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

package/dist/components/Icon/Icon.d.ts

@@ -1,4 +1,11 @@
-export type IconSize = 'lg' | 'sm' | '1x' | 'xs' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
+import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
+import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
+export type IconSize = '0.5x' | '0.75x' | '1x' | '1.25x' | '1.5x' | '2x' | '2.5x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
+/**
+ * @deprecated These sizes will be removed in the next major version. Use 1x instead.
+ * @ignore
+ */
+export type DeprecatedIconSize = 'lg' | 'sm' | 'xs' | '2xs' | 'xl' | '2xl';
 export interface IconProps {
     /**
      * What Icon to load from fontAwesome
@@ -8,11 +15,25 @@ export interface IconProps {
      * The prefix of the icon to load.
      * @default 'fas'
      */
-    iconPrefix?: 'fas' | 'far' | 'fal' | 'fab' | 'fad';
+    iconPrefix?: 'fas' | 'far' | 'fal' | 'fab' | 'fad' | 'fak';
+    /**
+     * The icon pack to load.
+     * Example: 'brands'
+     */
+    iconPack?: string;
     /**
      * The size of the icon.
      */
-    iconSize?: IconSize;
+    iconSize?: IconSize | DeprecatedIconSize;
+    /**
+     * The color of the icon.
+     */
+    color?: ForegroundVariants['foregroundColor'];
+    /**
+     * The padding of the icon.
+     * @default 'none'
+     */
+    padding?: 'none' | 'fixedWidth' | 'square' | 'roomy';
     /**
      * Flip the icon horizontally, vertically, or both.
      */
@@ -54,6 +75,11 @@ export interface IconProps {
      * Accessible text for the icon. If the icon is decorative, this can be omitted.
      */
     ariaLabel?: string;
+    /**
+     * Background color class for the icon used solely in iconBackdrop component
+     * @ignore
+     */
+    privateBgColorVariant?: BackgroundVariants['backgroundColor'];
 }
-export declare const Icon: ({ iconName, iconPrefix, iconSize: size, flip, fixedWidth, listItem, border, rotation, pull, spin, className, ariaLabel, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ iconName, iconPrefix, iconSize, iconPack, color, padding, flip, fixedWidth, listItem, border, rotation, pull, spin, className, ariaLabel, privateBgColorVariant, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export default Icon;

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;