@alto-avios/alto-ui 2.4.0 → 3.1.0

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { FormProps as FormAriaProps } from 'react-aria-components';
+export interface FormProps extends FormAriaProps {
+    children?: React.ReactNode;
+}
+export declare const Form: ({ children, ...props }: FormProps) => import("react/jsx-runtime").JSX.Element;
+export default Form;

package/dist/components/Form/Form.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1 } from "react-aria-components";
+import '../../assets/Form.css';const form = "_form_11vpr_1";
+const styles = {
+  form
+};
+const Form = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Form$1, { className: styles["form"], ...props, children });
+};
+export {
+  Form,
+  Form as default
+};
+//# sourceMappingURL=Form.js.map

package/dist/components/Form/Form.js.map

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

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

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

package/dist/components/Form/index.js

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

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

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

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;
-    textAlign?: "start" | "center" | "end" | 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';
+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";
@@ -51,23 +51,30 @@ const DEFAULT_HEADING_SIZE_MAP = {
   h4: "sm",
   h5: "xs",
   h6: "xxs",
-  span: "md"
+  span: "md",
   // Default for span elements
+  legend: "sm"
+  // Default for legend elements
 };
 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

@@ -1,7 +1,8 @@
 import { PressEvent } from 'react-aria-components';
 import { ButtonProps } from '../Button/Button';
 import { IconProps } from '../Icon/Icon';
-export interface IconButtonProps extends ButtonProps {
+import { FormProps } from '../../utils/forms/formProps';
+export interface IconButtonProps extends Omit<ButtonProps<'button'>, 'onClick'>, FormProps {
     /**
      * What icon from fontAwesome to use with all options
      */
@@ -11,13 +12,21 @@ export interface IconButtonProps extends ButtonProps {
      */
     isLoading?: boolean;
     /**
-     * 	Handler to be called when the button is clicked.
+     * Handler to be called when the button is clicked.
      */
     onClick?: (e: PressEvent) => void;
     /**
-     *  The Slot of the button
+     * The Slot of the button
      */
     slot?: string;
+    /**
+     * Tooltip text to display on hover and focus
+     */
+    tooltipLabel?: string;
+    /**
+     * Tooltip placement relative to the button
+     */
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
 }
-export declare const IconButton: ({ styleType, emphasis, size, isLoading, iconProps, onClick, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, focusStyle, slot, ...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,30 +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 '../../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 { Tooltip } from "../Tooltip/Tooltip.js";
+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,
@@ -46,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: {
@@ -85,9 +86,9 @@ const iconButton = cva(styles.iconButton, {
     size: "md"
   }
 });
-const IconButton = ({
-  //Button Props
-  styleType = "accent",
+const IconButton = forwardRef(({
+  styleType,
+  styleVariant,
   emphasis = "primary",
   size = "md",
   isLoading = false,
@@ -108,8 +109,10 @@ const IconButton = ({
   type,
   focusStyle = "default",
   slot,
+  tooltipLabel = "",
+  tooltipPlacement = "top",
   ...props
-}) => {
+}, ref) => {
   const buttonRef = useRef(null);
   const [buttonWidth, setButtonWidth] = useState(null);
   useEffect(() => {
@@ -117,18 +120,24 @@ const IconButton = ({
       setButtonWidth(buttonRef.current.offsetWidth);
     }
   }, [isLoading, size]);
-  return /* @__PURE__ */ jsxs(Button, { className: `${iconButton({
+  const resolvedStyleVariant = styleVariant ?? styleType ?? "accent";
+  const buttonContent = /* @__PURE__ */ jsxs(Button, { className: `${iconButton({
     size,
-    [styleType]: emphasis
+    [resolvedStyleVariant]: emphasis
   })} ${focusStyleVariants({
     focusStyle
-  })}`, ref: buttonRef, onPress: onClick, form, formAction, formEncType, formMethod, formNoValidate, formTarget, name, value, isDisabled, autoFocus, type, "aria-label": 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" }),
     !isLoading && /* @__PURE__ */ jsx(Icon, { ...iconProps })
   ] });
-};
+  if (tooltipLabel) {
+    return /* @__PURE__ */ jsx(Tooltip, { label: tooltipLabel, placement: tooltipPlacement, isDisabled, children: buttonContent });
+  }
+  return buttonContent;
+});
+IconButton.displayName = "IconButton";
 export {
   IconButton,
   IconButton as default

package/dist/components/IconButton/IconButton.js.map

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

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

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { BorderVariants } from '../../utils/border/border';
+import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
+declare const imageVariants: (props?: ({
+    fit?: "fill" | "none" | "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 */
+    fallbackSrc?: string;
+    /** Called when image fails to load */
+    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    /** Called when image is loaded */
+    onLoad?: React.ReactEventHandler<HTMLImageElement>;
+    /** Polymorphism with children, the component will render the children instead of the image */
+    asChild?: boolean;
+    /** To support polymorphism with children */
+    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;