@alto-avios/alto-ui 3.8.0 → 4.0.0

package/dist/components/Carousel/CarouselDots/CarouselDots.js

@@ -0,0 +1,150 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
+import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_1aqyc_1";
+const tabs = "_tabs_1aqyc_1";
+const transparent = "_transparent_1aqyc_21";
+const dotsScroller = "_dotsScroller_1aqyc_25";
+const tab = "_tab_1aqyc_1";
+const activeTab = "_activeTab_1aqyc_52";
+const styles = {
+  tabsContainer,
+  tabs,
+  transparent,
+  dotsScroller,
+  tab,
+  activeTab
+};
+const CarouselDots = ({
+  totalItems,
+  currentPage,
+  onDotClick,
+  dotsSize = "md",
+  variant = "standard",
+  focusStyle = "default",
+  className = "",
+  dotsWrapperClassName = "",
+  dotClassName = "",
+  activeDotClassName = "",
+  isTransitioning = false
+}) => {
+  const tabsRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing();
+  const {
+    isHovered,
+    hoverProps
+  } = useHover({});
+  const handleKeyDown = (e) => {
+    if (isTransitioning) return;
+    let handled = false;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const nextPage = (currentPage + 1) % totalItems;
+      onDotClick(nextPage);
+      handled = true;
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const prevPage = (currentPage - 1 + totalItems) % totalItems;
+      onDotClick(prevPage);
+      handled = true;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      onDotClick(0);
+      handled = true;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      onDotClick(totalItems - 1);
+      handled = true;
+    } else if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      handled = true;
+    }
+    if (handled && tabsRef.current) {
+      tabsRef.current.focus();
+    }
+  };
+  const getContainerClasses = () => {
+    const classes = [styles.tabsContainer];
+    if (className) classes.push(className);
+    if (isTransitioning) classes.push(styles.transitioning);
+    return classes.join(" ");
+  };
+  const getDotsWrapperClasses = () => {
+    const classes = [styles.tabs];
+    if (variant === "transparent") classes.push(styles.transparent);
+    classes.push(focusStyleVariants({
+      focusStyle
+    }));
+    if (dotsWrapperClassName) classes.push(dotsWrapperClassName);
+    return classes.join(" ");
+  };
+  const handleDotClick = (index) => {
+    if (isTransitioning) return;
+    onDotClick(index);
+  };
+  const handleDotKeyDown = (e, index) => {
+    if (isTransitioning) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      onDotClick(index);
+    }
+  };
+  const getDotAriaLabel = (index) => {
+    const slideNumber = index + 1;
+    const isCurrent = index === currentPage;
+    return `Go to slide ${slideNumber}${isCurrent ? ", current slide" : ""}`;
+  };
+  const getContainerAriaLabel = () => {
+    return `Slide pagination, ${totalItems} slides, currently on slide ${currentPage + 1}`;
+  };
+  return /* @__PURE__ */ jsx("div", { className: getContainerClasses(), ref: wrapperRef, "data-dot-size": dotsSize, "data-transitioning": isTransitioning ? "true" : void 0, children: /* @__PURE__ */ jsx("div", { className: getDotsWrapperClasses(), ref: tabsRef, tabIndex: 0, role: "tablist", "aria-label": getContainerAriaLabel(), onKeyDown: handleKeyDown, "data-focused": isFocusVisible ? true : void 0, "data-focus-visible": isFocusVisible ? true : void 0, "data-hovered": isHovered ? true : void 0, "aria-activedescendant": `dot-${currentPage}`, ...focusProps, ...hoverProps, children: /* @__PURE__ */ jsx("div", { className: styles.dotsScroller, children: Array.from({
+    length: totalItems
+  }, (_, index) => {
+    const isActive = index === currentPage;
+    const baseStyle = {
+      width: dotsSize === "lg" ? "12px" : "8px",
+      height: dotsSize === "lg" ? "12px" : "8px",
+      borderRadius: "50%",
+      backgroundColor: isActive ? "var(--alto-sem-color-fg-primary)" : "rgba(0, 0, 0, 0.3)",
+      border: "none",
+      padding: 0,
+      cursor: isTransitioning ? "default" : "pointer",
+      display: "block",
+      flexShrink: 0,
+      margin: 0,
+      transition: "background-color 0.2s ease"
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        id: `dot-${index}`,
+        type: "button",
+        className: `${styles.tab} ${isActive ? styles.activeTab : ""} ${dotClassName || ""} ${isActive && activeDotClassName ? activeDotClassName : ""}`,
+        onClick: () => handleDotClick(index),
+        onKeyDown: (e) => handleDotKeyDown(e, index),
+        "aria-label": getDotAriaLabel(index),
+        "aria-selected": isActive,
+        "aria-current": isActive ? "true" : "false",
+        role: "tab",
+        "data-tab-index": index,
+        tabIndex: -1,
+        style: baseStyle,
+        "aria-hidden": "true",
+        disabled: isTransitioning
+      },
+      index
+    );
+  }) }) }) });
+};
+export {
+  CarouselDots,
+  CarouselDots as default
+};
+//# sourceMappingURL=CarouselDots.js.map

package/dist/components/Carousel/CarouselDots/CarouselDots.js.map

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

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

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

package/dist/components/Carousel/index.js

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

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

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

package/dist/components/ComboBox/ComboBox.js

@@ -1,15 +1,17 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { ComboBox as ComboBox$1, Group, Input, Popover } from "react-aria-components";
-import { IconButton } from "../IconButton/IconButton.js";
+import { ComboBox as ComboBox$1, Group, Input, Button, Popover } from "react-aria-components";
+import { Icon } from "../Icon/Icon.js";
 import { Field } from "../_base/Field/Field.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
-import '../../assets/ComboBox.css';const comboBox = "_comboBox_168rl_1";
+import '../../assets/ComboBox.css';const comboBox = "_comboBox_x47tm_1";
+const comboBoxButton = "_comboBoxButton_x47tm_85";
 const styles = {
   comboBox,
-  "comboBox-group": "_comboBox-group_168rl_14",
-  "comboBox-input": "_comboBox-input_168rl_63",
-  "comboBox-loading": "_comboBox-loading_168rl_74",
-  "comboBox-popover": "_comboBox-popover_168rl_81"
+  "comboBox-group": "_comboBox-group_x47tm_14",
+  "comboBox-input": "_comboBox-input_x47tm_63",
+  "comboBox-loading": "_comboBox-loading_x47tm_74",
+  "comboBox-popover": "_comboBox-popover_x47tm_81",
+  comboBoxButton
 };
 const ComboBox = ({
   children,
@@ -19,12 +21,7 @@ const ComboBox = ({
   return /* @__PURE__ */ jsxs(Field, { as: ComboBox$1, className: styles["comboBox"], ...props, children: [
     /* @__PURE__ */ jsxs(Group, { className: styles["comboBox-group"], children: [
       /* @__PURE__ */ jsx(Input, { className: styles["comboBox-input"] }),
-      isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x", buttonSize: "sm", className: styles["comboBox-loading"] }) : /* @__PURE__ */ jsx(IconButton, { size: "sm", styleVariant: "white", isDisabled: props == null ? void 0 : props.isDisabled, iconProps: {
-        iconName: "angles-up-down",
-        iconPrefix: "fas",
-        padding: "roomy",
-        scale: "1x"
-      } })
+      isLoading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: "1x", buttonSize: "sm", className: styles["comboBox-loading"] }) : /* @__PURE__ */ jsx(Button, { className: styles.comboBoxButton, isDisabled: props == null ? void 0 : props.isDisabled, children: /* @__PURE__ */ jsx(Icon, { iconName: "angles-up-down", iconPrefix: "fas", padding: "roomy", scale: "1x" }) })
     ] }),
     /* @__PURE__ */ jsx(Popover, { className: styles["comboBox-popover"], children })
   ] });

package/dist/components/ComboBox/ComboBox.js.map

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

package/dist/components/CreditCardNumberField/CreditCardNumberField.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { TextField, Input } from "react-aria-components";
-import { P as PatternFormat } from "../../react-number-format.es-BjKL6crg.js";
+import { P as PatternFormat } from "../../react-number-format.es-Dbc1db6s.js";
 import { Field } from "../_base/Field/Field.js";
 import { Icon } from "../Icon/Icon.js";
 import { getCardIcon } from "../../utils/creditCard/creditCard.js";
@@ -21,15 +21,15 @@ const CreditCardNumberField = ({
   label = "Credit card number",
   ...props
 }) => {
-  const [value, setValue] = React.useState(defaultValue);
+  const [value, setValue] = React__default.useState(defaultValue);
   const valueDefinitive = valueControlled ?? value;
-  const cardIcon = React.useMemo(() => {
+  const cardIcon = React__default.useMemo(() => {
     if (typeof cardIconProp === "function") {
       return cardIconProp(value) || "credit-card";
     }
     return cardIconProp || "credit-card";
   }, [value, cardIconProp]);
-  return /* @__PURE__ */ jsx(Field, { className: styles.creditCardNumberField, as: TextField, isRequired: true, hasEndIcon: true, ...props, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+  return /* @__PURE__ */ jsx(Field, { ...props, as: TextField, isRequired: true, hasEndIcon: true, label, className: styles.creditCardNumberField, children: /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
     /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: "#### #### #### ####", customInput: Input, placeholder: props == null ? void 0 : props.placeholder, allowEmptyFormatting: false, defaultValue, value: valueDefinitive, onValueChange: (values) => {
       if (typeof onChangeControlled === "function") {
         onChangeControlled(values.value);

package/dist/components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { TextField, Input } from "react-aria-components";
-import { P as PatternFormat } from "../../react-number-format.es-BjKL6crg.js";
+import { P as PatternFormat } from "../../react-number-format.es-Dbc1db6s.js";
 import { Field } from "../_base/Field/Field.js";
 import '../../assets/CreditCardSecurityCodeField.css';const creditCardSecurityCodeField = "_creditCardSecurityCodeField_14mb2_1";
 const inputWrapper = "_inputWrapper_14mb2_11";
@@ -20,16 +20,16 @@ const CreditCardSecurityCodeField = ({
   digits = 3,
   ...props
 }) => {
-  const [value, setValue] = React.useState(defaultValue);
+  const [value, setValue] = React__default.useState(defaultValue);
   const valueDefinitive = valueControlled ?? value;
-  return /* @__PURE__ */ jsxs(Field, { className: styles.creditCardSecurityCodeField, as: TextField, isRequired: true, ...props, children: [
+  return /* @__PURE__ */ jsxs(Field, { className: styles.creditCardSecurityCodeField, as: TextField, isRequired: true, label, ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
       /* @__PURE__ */ jsx(PatternFormat, { type: "text", format: `${"#".repeat(digits)}`, customInput: Input, placeholder: props == null ? void 0 : props.placeholder, defaultValue, value: valueDefinitive, onValueChange: (values) => {
         if (typeof onChangeControlled === "function") {
           onChangeControlled(values.value);
         }
         setValue(values.value);
-      }, autoComplete: "cc-csc", "aria-label": label }),
+      }, autoComplete: "cc-csc" }),
       /* @__PURE__ */ jsx(CreditCardSecurityCodeIcon, { cardIcon })
     ] }),
     (props == null ? void 0 : props.children) && /* @__PURE__ */ jsx("div", { className: styles.inputChildren, children: props.children })

package/dist/components/Dialog/Dialog.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef } from "react";
+import React__default, { useRef } from "react";
 import { IconButton } from "../IconButton/IconButton.js";
 import { OverlayContainer, useOverlay, usePreventScroll, useModal } from "@react-aria/overlays";
 import { useDialog } from "@react-aria/dialog";
@@ -69,8 +69,8 @@ function DialogWrapper({
   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 headerChild = React__default.Children.toArray(children).find((child) => React__default.isValidElement(child) && child.type === DialogHeader);
+  const otherChildren = React__default.Children.toArray(children).filter((child) => !React__default.isValidElement(child) || child.type !== DialogHeader);
   const hasHeader = Boolean(headerChild) || hasDismissButton;
   const headerId = props["aria-labelledby"] || `${id}-header`;
   const contentId = props["aria-describedby"] || `${id}-content`;
@@ -81,7 +81,7 @@ function DialogWrapper({
         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: {
+      hasDismissButton && /* @__PURE__ */ jsx("div", { className: styles.closeButton, children: /* @__PURE__ */ jsx(IconButton, { onPress: onClose, styleVariant: "white", emphasis: "primary", size: "sm", iconProps: {
         iconName: "close",
         iconPrefix: "far",
         iconSize: "1x"

package/dist/components/ErrorSummary/ErrorSummary.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalloutBanner } from "../CalloutBanner/CalloutBanner.js";
-import React, { useState } from "react";
+import React__default, { useState } from "react";
 import Link from "../Link/Link.js";
 import { Box } from "../Box/Box.js";
 import '../../assets/ErrorSummary.css';const styles = {
@@ -19,9 +19,9 @@ const ErrorSummary = ({
   const errorsToRender = showAllErrors ? children : Array.isArray(children) ? children.slice(0, MAX_ERRORS_SHOW) : [children];
   const hasMoreErrors = Array.isArray(children) && children.length > MAX_ERRORS_SHOW;
   return /* @__PURE__ */ jsx(CalloutBanner, { title, description, children: /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx("div", { className: styles["errorSummary-list"], children: React.Children.map(errorsToRender, (child, index) => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, {
+    /* @__PURE__ */ jsx("div", { className: styles["errorSummary-list"], children: React__default.Children.map(errorsToRender, (child, index) => {
+      if (React__default.isValidElement(child)) {
+        return React__default.cloneElement(child, {
           key: `error-${index}`,
           iconEndProps: false
         });

package/dist/components/FieldError/FieldError.d.ts

@@ -1,6 +1,10 @@
 import { FieldErrorProps as AriaFieldErrorProps } from 'react-aria-components';
 export interface FieldErrorProps extends AriaFieldErrorProps {
     children?: React.ReactNode | any;
+    /**
+     * Whether the field is invalid.
+     */
+    isInvalid?: boolean;
 }
-export declare const FieldError: ({ children, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldError: ({ children, isInvalid: isInvalidProp, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element;
 export default FieldError;

package/dist/components/FieldError/FieldError.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { FieldError as FieldError$1 } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import '../../assets/FieldError.css';const fieldError = "_fieldError_1tsix_1";
@@ -7,8 +7,15 @@ const styles = {
 };
 const FieldError = ({
   children,
+  isInvalid: isInvalidProp,
   ...props
 }) => {
+  if (children && isInvalidProp) {
+    return /* @__PURE__ */ jsxs("div", { className: styles.fieldError, children: [
+      /* @__PURE__ */ jsx(Icon, { iconName: "triangle-exclamation", iconPrefix: "fas", "aria-label": "error-icon" }),
+      children
+    ] });
+  }
   return /* @__PURE__ */ jsx(FieldError$1, { className: styles.fieldError, ...props, children: ({
     validationErrors
   }) => {

package/dist/components/FieldError/FieldError.js.map

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

package/dist/components/FieldHeader/FieldHeader.js

@@ -22,7 +22,7 @@ const FieldHeader = ({
       !isRequired && ` (${optionalTranslation})`
     ] }) }),
     description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
-    /* @__PURE__ */ jsx(FieldError, { children: errorMessage })
+    /* @__PURE__ */ jsx(FieldError, { isInvalid, children: errorMessage })
   ] });
 };
 export {

package/dist/components/Grid/Grid.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 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';
+type JustifyContentValue = 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
 type ValidElements = 'div' | 'span';
 export type PolymorphicProps<E extends ValidElements> = {
     as?: E;
@@ -69,6 +70,10 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
      * Controls the vertical alignment of the content within the grid
      */
     alignContent?: AlignContentValue;
+    /**
+     * Controls the horizontal alignment of the content within the grid
+     */
+    justifyContent?: JustifyContentValue;
     /**
      * Determines how columns are automatically created in the grid
      * e.g., "minmax(100px, 1fr)" or "200px"
@@ -124,7 +129,7 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     style?: React.CSSProperties;
 }
 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;
+    ({ id, isInline, alignContent, justifyContent, autoColumns, autoFlow, columns, rows, templateColumns, templateRows, gap, rowGap, columnGap, children, style, ...rest }: GridProps): 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;

package/dist/components/Grid/Grid.js

@@ -72,6 +72,7 @@ const Grid = ({
   id,
   isInline = false,
   alignContent,
+  justifyContent,
   autoColumns,
   autoFlow,
   columns,
@@ -94,6 +95,7 @@ const Grid = ({
     gridAutoColumns: autoColumns,
     gridAutoFlow: autoFlow,
     alignContent,
+    justifyContent,
     ...rowGap || columnGap ? {
       rowGap: rowGap ? getSpaceValue(rowGap) : void 0,
       columnGap: columnGap ? getSpaceValue(columnGap) : void 0

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

@@ -26,15 +26,10 @@ export interface HeadingProps extends HeadingVariants {
      * 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, foregroundColor, fgColor, textAlign, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Heading: ({ children, as: Component, size, foregroundColor, textAlign, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
 export default Heading;

package/dist/components/Heading/Heading.js

@@ -61,20 +61,15 @@ const Heading = ({
   as: Component = "h1",
   size,
   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
   })} ${foregroundColorVariants({
-    foregroundColor: resolvedFontColor
+    foregroundColor
   })}`, ...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,11 +1,6 @@
 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
- */
-type DeprecatedIconSize = 'lg' | 'sm' | 'xs' | '2xs' | 'xl' | '2xl';
 export interface IconProps {
     /**
      * What Icon to load from fontAwesome
@@ -25,7 +20,7 @@ export interface IconProps {
     /**
      * The size of the icon.
      */
-    iconSize?: IconSize | DeprecatedIconSize;
+    iconSize?: IconSize;
     /**
      * The color of the icon.
      */

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

@@ -1,24 +1,12 @@
-import { PressEvent } from 'react-aria-components';
+import { ElementType } from 'react';
 import { ButtonProps } from '../Button/Button';
 import { IconProps } from '../Icon/Icon';
 import { FormProps } from '../../utils/forms/formProps';
-export interface IconButtonProps extends Omit<ButtonProps<'button'>, 'onClick'>, FormProps {
+export interface IconButtonProps<T extends ElementType = 'button'> extends Omit<ButtonProps<T>, 'children' | 'iconStartProps' | 'iconEndProps'>, FormProps {
     /**
      * What icon from fontAwesome to use with all options
      */
     iconProps?: IconProps;
-    /**
-     * Whether the button is loading
-     */
-    isLoading?: boolean;
-    /**
-     * Handler to be called when the button is clicked.
-     */
-    onClick?: (e: PressEvent) => void;
-    /**
-     * The Slot of the button
-     */
-    slot?: string;
     /**
      * Tooltip text to display on hover and focus
      */
@@ -28,5 +16,5 @@ export interface IconButtonProps extends Omit<ButtonProps<'button'>, 'onClick'>,
      */
     tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
 }
-export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps<ElementType> & import('react').RefAttributes<any>>;
 export default IconButton;