@alto-avios/alto-ui 2.3.3 → 3.0.0

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/Grid/Grid.d.ts

@@ -1,30 +1,46 @@
 import { default as React } from 'react';
-type SpaceToken = 'default' | '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+import { SpaceToken } from '../../utils/spaceToken/spaceToken';
 type AutoFlowValue = 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
 type AlignContentValue = 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
-export interface GridCellProps extends React.HTMLAttributes<HTMLDivElement> {
+type ValidElements = 'div' | 'span';
+type PolymorphicProps<E extends ValidElements> = {
+    as?: E;
+} & Omit<React.ComponentPropsWithRef<E>, 'as'>;
+export interface GridCellBaseProps {
     /**
-     * Number of columns this cell should span
+     * Number of columns/rows this cell should span
+     * Can be a single number for column span or an object for both
      */
-    colSpan?: number;
+    span?: number | {
+        column?: number;
+        row?: number;
+    };
     /**
-     * Number of rows this cell should span
+     * Named grid area for placing the cell
      */
-    rowSpan?: number;
+    area?: string;
     /**
-     * The starting column for this cell
+     * Column number where the cell will be placed
      */
-    colStart?: number;
+    column?: string | number;
     /**
-     * The starting row for this cell
+     * Starting column for the cell
      */
-    rowStart?: number;
+    columnStart?: number;
+    /**
+     * Ending column for spanning multiple columns
+     */
+    columnEnd?: number;
     /**
-     * The ending column for this cell
+     * Row number where the cell will be placed
      */
-    colEnd?: number;
+    row?: string | number;
     /**
-     * The ending row for this cell
+     * Starting row for the cell
+     */
+    rowStart?: number;
+    /**
+     * Ending row for spanning multiple rows
      */
     rowEnd?: number;
     /**
@@ -37,7 +53,8 @@ export interface GridCellProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     style?: React.CSSProperties;
 }
-export declare const GridCell: ({ colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, children, style, ...rest }: GridCellProps) => import("react/jsx-runtime").JSX.Element;
+export type GridCellProps<E extends ValidElements = 'div'> = GridCellBaseProps & PolymorphicProps<E>;
+export declare const GridCell: <E extends ValidElements = "div">({ as, span, area, column, columnStart, columnEnd, row, rowStart, rowEnd, children, style, ...rest }: GridCellProps<E>) => import("react/jsx-runtime").JSX.Element;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Optional unique identifier for the grid
@@ -99,7 +116,7 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The content of the grid
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
      * @internal
      * Additional CSS properties to apply to the grid
@@ -108,6 +125,8 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export declare const Grid: {
     ({ id, isInline, alignContent, autoColumns, autoFlow, columns, rows, templateColumns, templateRows, gap, rowGap, columnGap, children, style, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;
-    Cell: ({ colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, children, style, ...rest }: GridCellProps) => import("react/jsx-runtime").JSX.Element;
+    Cell: <E extends ValidElements = "div">({ as, span, area, column, columnStart, columnEnd, row, rowStart, rowEnd, children, style, ...rest }: GridCellProps<E>) => import("react/jsx-runtime").JSX.Element;
 };
+declare const isValidElement: (value: unknown) => value is ValidElements;
+export { isValidElement };
 export default Grid;

package/dist/components/Grid/Grid.js

@@ -1,46 +1,74 @@
 import { jsx } from "react/jsx-runtime";
-import '../../assets/Grid.css';const grid = "_grid_f3f0m_1";
-const gridItem = "_gridItem_f3f0m_6";
+import { getSpaceValue } from "../../utils/spaceToken/spaceToken.js";
+import '../../assets/Grid.css';const grid = "_grid_agdpw_1";
+const gridItem = "_gridItem_agdpw_6";
 const styles = {
   grid,
   gridItem
 };
-const getGapValue = (token) => {
-  return token === "default" ? "var(--alto-grid-gutter-default)" : `var(--alto-sem-space-${token})`;
-};
 const GridCell = ({
-  colSpan,
-  rowSpan,
-  colStart,
-  colEnd,
+  as,
+  span,
+  area,
+  column,
+  columnStart,
+  columnEnd,
+  row,
   rowStart,
   rowEnd,
   children,
   style,
   ...rest
 }) => {
+  const Component = as || "div";
+  const getSpanStyles = () => {
+    if (!span) return {};
+    if (typeof span === "number") {
+      return {
+        gridColumn: `span ${span}`
+      };
+    }
+    return {
+      ...span.column && {
+        gridColumn: `span ${span.column}`
+      },
+      ...span.row && {
+        gridRow: `span ${span.row}`
+      }
+    };
+  };
   const gridCellStyle = {
-    ...colSpan && {
-      gridColumn: `span ${colSpan}`
-    },
-    ...rowSpan && {
-      gridRow: `span ${rowSpan}`
-    },
-    ...colStart && {
-      gridColumnStart: colStart
+    // Grid area takes precedence over individual positioning
+    ...area && {
+      gridArea: area
     },
-    ...colEnd && {
-      gridColumnEnd: colEnd
-    },
-    ...rowStart && {
-      gridRowStart: rowStart
-    },
-    ...rowEnd && {
-      gridRowEnd: rowEnd
+    // If no area is specified, use individual positioning props
+    ...!area && {
+      ...column && {
+        gridColumn: column
+      },
+      ...columnStart && {
+        gridColumnStart: columnStart
+      },
+      ...columnEnd && {
+        gridColumnEnd: columnEnd
+      },
+      ...row && {
+        gridRow: row
+      },
+      ...rowStart && {
+        gridRowStart: rowStart
+      },
+      ...rowEnd && {
+        gridRowEnd: rowEnd
+      }
     },
+    // Apply span styles
+    ...getSpanStyles(),
+    // Apply any custom styles
     ...style
   };
-  return /* @__PURE__ */ jsx("div", { className: styles.gridCell, style: gridCellStyle, ...rest, children });
+  return /* @__PURE__ */ jsx(Component, { className: styles.gridCell, style: gridCellStyle, ...rest, children });
 };
 const Grid = ({
   id,
@@ -69,19 +97,24 @@ const Grid = ({
     gridAutoFlow: autoFlow,
     alignContent,
     ...rowGap || columnGap ? {
-      rowGap: getGapValue(rowGap || "default"),
-      columnGap: getGapValue(columnGap || "default")
+      rowGap: rowGap ? getSpaceValue(rowGap) : void 0,
+      columnGap: columnGap ? getSpaceValue(columnGap) : void 0
     } : {
-      gap: getGapValue(gap || "default")
+      gap: getSpaceValue(gap || "default")
     },
     ...style
   };
   return /* @__PURE__ */ jsx("div", { id, className: styles.grid, style: gridStyle, ...rest, children });
 };
+const isValidElement = (value) => {
+  const validElements = ["div", "span"];
+  return typeof value === "string" && validElements.includes(value);
+};
 Grid.Cell = GridCell;
 export {
   Grid,
   GridCell,
-  Grid as default
+  Grid as default,
+  isValidElement
 };
 //# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

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

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

@@ -3,11 +3,11 @@ import { VariantProps } from 'class-variance-authority';
 import { fgColorVariants } from '../../utils/fgColour/fgColor';
 declare const heading: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | "xl" | "xxs" | null | undefined;
-    textAlign?: "start" | "center" | "end" | 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: React.ReactNode;

package/dist/components/Heading/Heading.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { fgColorVariants } from "../../utils/fgColour/fgColor.js";
-import '../../assets/Heading.css';const heading$1 = "_heading_12ps7_1";
-const xxs = "_xxs_12ps7_8";
-const xs = "_xs_12ps7_15";
-const sm = "_sm_12ps7_22";
-const md = "_md_12ps7_29";
-const lg = "_lg_12ps7_36";
-const xl = "_xl_12ps7_43";
-const start = "_start_12ps7_50";
-const center = "_center_12ps7_54";
-const end = "_end_12ps7_58";
+import '../../assets/Heading.css';const heading$1 = "_heading_15puj_1";
+const xxs = "_xxs_15puj_8";
+const xs = "_xs_15puj_15";
+const sm = "_sm_15puj_22";
+const md = "_md_15puj_29";
+const lg = "_lg_15puj_36";
+const xl = "_xl_15puj_43";
+const start = "_start_15puj_50";
+const center = "_center_15puj_54";
+const end = "_end_15puj_58";
 const styles = {
   heading: heading$1,
   xxs,
@@ -26,12 +26,12 @@ const styles = {
 const heading = cva(styles.heading, {
   variants: {
     size: {
-      "xxs": styles.xxs,
-      "xs": styles.xs,
-      "sm": styles.sm,
-      "md": styles.md,
-      "lg": styles.lg,
-      "xl": styles.xl
+      xxs: styles.xxs,
+      xs: styles.xs,
+      sm: styles.sm,
+      md: styles.md,
+      lg: styles.lg,
+      xl: styles.xl
     },
     textAlign: {
       start: styles.start,
@@ -51,8 +51,10 @@ 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,

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

@@ -16,7 +16,7 @@ export interface IconProps {
     /**
      * Flip the icon horizontally, vertically, or both.
      */
-    flip?: "horizontal" | "vertical" | "both";
+    flip?: 'horizontal' | 'vertical' | 'both';
     /**
      * Whether the icon should be displayed with a fixed width.
      */
@@ -46,9 +46,9 @@ export interface IconProps {
      */
     className?: string;
     /**
-    * Whether the icon is purely decorative and should be hidden from screen readers.
-    * @default false
-    */
+     * Whether the icon is purely decorative and should be hidden from screen readers.
+     * @default false
+     */
     isDecorative?: boolean;
     /**
      * Accessible text for the icon. If the icon is decorative, this can be omitted.

package/dist/components/Icon/Icon.js

@@ -10,6 +10,7 @@ const Icon = ({
   border,
   rotation,
   pull,
+  // eslint-disable-next-line react/prop-types
   spin,
   className,
   ariaLabel,

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/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: ({ 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 default IconButton;

package/dist/components/IconButton/IconButton.js

@@ -5,26 +5,27 @@ 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_104jb_1";
-const sm = "_sm_104jb_24";
-const md = "_md_104jb_30";
-const lg = "_lg_104jb_36";
-const accentPrimary = "_accentPrimary_104jb_46";
-const accentSecondary = "_accentSecondary_104jb_69";
-const accentTertiary = "_accentTertiary_104jb_96";
-const accentQuaternary = "_accentQuaternary_104jb_125";
-const criticalPrimary = "_criticalPrimary_104jb_149";
-const criticalSecondary = "_criticalSecondary_104jb_173";
-const criticalTertiary = "_criticalTertiary_104jb_200";
-const criticalQuaternary = "_criticalQuaternary_104jb_225";
-const neutralPrimary = "_neutralPrimary_104jb_250";
-const neutralSecondary = "_neutralSecondary_104jb_274";
-const neutralTertiary = "_neutralTertiary_104jb_299";
-const neutralQuaternary = "_neutralQuaternary_104jb_324";
-const whitePrimary = "_whitePrimary_104jb_350";
-const whiteSecondary = "_whiteSecondary_104jb_379";
-const whiteTertiary = "_whiteTertiary_104jb_409";
-const whiteQuaternary = "_whiteQuaternary_104jb_438";
+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";
 const styles = {
   iconButton: iconButton$1,
   sm,
@@ -46,8 +47,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_104jb_469",
-  "icon-wrapper": "_icon-wrapper_104jb_474"
+  "fa-spinner-third": "_fa-spinner-third_by3pb_476",
+  "icon-wrapper": "_icon-wrapper_by3pb_481"
 };
 const iconButton = cva(styles.iconButton, {
   variants: {
@@ -87,7 +88,8 @@ const iconButton = cva(styles.iconButton, {
 });
 const IconButton = ({
   //Button Props
-  styleType = "accent",
+  styleType,
+  styleVariant,
   emphasis = "primary",
   size = "md",
   isLoading = false,
@@ -108,6 +110,8 @@ const IconButton = ({
   type,
   focusStyle = "default",
   slot,
+  tooltipLabel = "",
+  tooltipPlacement = "top",
   ...props
 }) => {
   const buttonRef = useRef(null);
@@ -117,17 +121,22 @@ 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: 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;
 };
 export {
   IconButton,

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,23 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { BorderVariants } from '../../utils/border/border';
+import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
+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;
+}
+export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
+export default Image;

package/dist/components/Image/Image.js

@@ -0,0 +1,130 @@
+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 '../../assets/Image.css';const image = "_image_z82es_1";
+const fill = "_fill_z82es_10";
+const contain = "_contain_z82es_14";
+const cover = "_cover_z82es_18";
+const none = "_none_z82es_22";
+const scaleDown = "_scaleDown_z82es_26";
+const styles = {
+  image,
+  fill,
+  contain,
+  cover,
+  none,
+  scaleDown
+};
+const imageVariants = cva(styles.image, {
+  variants: {
+    fit: {
+      contain: styles.contain,
+      cover: styles.cover,
+      fill: styles.fill,
+      none: styles.none,
+      scaleDown: styles.scaleDown,
+      "scale-down": styles.scaleDown
+    }
+  }
+});
+const useImageLoaded = (onLoadProp) => {
+  const [loaded, setLoaded] = useState(false);
+  const ref = useRef(null);
+  const handleLoad = React.useCallback((event) => {
+    if (typeof onLoadProp === "function") {
+      onLoadProp(event);
+    }
+    setLoaded(true);
+  }, [onLoadProp]);
+  useEffect(() => {
+    if (ref.current && ref.current.complete) {
+      setLoaded(true);
+    }
+  });
+  return {
+    ref,
+    loaded,
+    handleLoad
+  };
+};
+const useMergedRef = (internalRef, forwardedRef) => {
+  return React.useMemo(() => {
+    if (!forwardedRef) return internalRef;
+    return (node) => {
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef && "current" in forwardedRef) {
+        forwardedRef.current = node;
+      }
+      internalRef.current = node;
+    };
+  }, [internalRef, forwardedRef]);
+};
+const Image = React.forwardRef(({
+  src,
+  fallbackSrc,
+  onError: onErrorProp,
+  onLoad: onLoadProp,
+  asChild,
+  children,
+  borderRadius,
+  backgroundColour,
+  fit,
+  aspectRatio,
+  ...props
+}, forwardedRef) => {
+  const {
+    ref: internalRef,
+    loaded,
+    handleLoad
+  } = useImageLoaded(onLoadProp);
+  const ref = useMergedRef(internalRef, forwardedRef);
+  const [isError, setError] = useState(!src);
+  if (asChild && !children) {
+    console.error("Image component: Children required when asChild is true");
+  }
+  const handleError = React.useCallback((e) => {
+    if (fallbackSrc) {
+      setError(true);
+    }
+    if (typeof onErrorProp === "function") {
+      onErrorProp(e);
+    }
+  }, [fallbackSrc, onErrorProp]);
+  const imgProps = {
+    src: isError ? fallbackSrc : src,
+    className: `
+    ${borderVariants({
+      borderRadius
+    })}
+    ${backgroundColorVariants({
+      backgroundColour
+    })}
+    ${imageVariants({
+      fit
+    })}`,
+    onError: handleError,
+    onLoad: handleLoad,
+    ref,
+    "data-loaded": loaded,
+    style: {
+      aspectRatio
+    },
+    ...props
+  };
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...imgProps,
+      ...children.props
+    });
+  }
+  return /* @__PURE__ */ jsx("img", { ...imgProps });
+});
+Image.displayName = "Image";
+export {
+  Image,
+  Image as default
+};
+//# sourceMappingURL=Image.js.map

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

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

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

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