@alto-avios/alto-ui 3.0.0 → 3.2.0

package/dist/components/DateField/DateField.js.map

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

package/dist/components/DetailsDisclosure/DetailsDisclosure.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { DisclosureProps as AriaDisclosureProps, DisclosurePanelProps as AriaDisclosurePanelProps } from 'react-aria-components';
+interface DetailsDisclosureProps extends AriaDisclosureProps {
+    /**
+     * Whether the disclosure is expanded by default.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Whether the disclosure is expanded (Controlled)
+     */
+    isExpanded?: boolean;
+    /**
+     * Callback function that is called when the disclosure is expanded or collapsed. (Controlled)
+     */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /**
+     * <DetailsDisclosure.Trigger> and <DetailsDisclosure.Panel> children.
+     */
+    children?: React.ReactNode;
+}
+declare const DetailsDisclosure: {
+    ({ children, ...props }: DetailsDisclosureProps): import("react/jsx-runtime").JSX.Element;
+    Summary: {
+        ({ children, }: Pick<DetailsDisclosureProps, "children">): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Details: {
+        ({ children, ...props }: AriaDisclosurePanelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type { DetailsDisclosureProps };
+export default DetailsDisclosure;

package/dist/components/DetailsDisclosure/DetailsDisclosure.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Disclosure, Button, DisclosurePanel } from "react-aria-components";
+import { Icon } from "../Icon/Icon.js";
+import '../../assets/DetailsDisclosure.css';const detailsDisclosure = "_detailsDisclosure_9jcud_1";
+const detailsDisclosureIcon = "_detailsDisclosureIcon_9jcud_8";
+const detailsDisclosureDetails = "_detailsDisclosureDetails_9jcud_40";
+const styles = {
+  detailsDisclosure,
+  detailsDisclosureIcon,
+  detailsDisclosureDetails
+};
+const DetailsDisclosureSummary = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsxs(Button, { slot: "trigger", children: [
+    /* @__PURE__ */ jsx(Icon, { className: styles["detailsDisclosureIcon"], iconName: "caret-right", iconPrefix: "fas", ariaLabel: "Open disclosure" }),
+    children
+  ] });
+};
+DetailsDisclosureSummary.displayName = "DetailsDisclosure.Summary";
+const DetailsDisclosureDetails = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(DisclosurePanel, { className: styles["detailsDisclosureDetails"], ...props, children });
+};
+DetailsDisclosureDetails.displayName = "DetailsDisclosure.Details";
+const DetailsDisclosure = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Disclosure, { className: styles["detailsDisclosure"], ...props, children });
+};
+DetailsDisclosure.Summary = DetailsDisclosureSummary;
+DetailsDisclosure.Details = DetailsDisclosureDetails;
+export {
+  DetailsDisclosure as default
+};
+//# sourceMappingURL=DetailsDisclosure.js.map

package/dist/components/DetailsDisclosure/DetailsDisclosure.js.map

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

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

@@ -0,0 +1,2 @@
+export type { DetailsDisclosureProps } from './DetailsDisclosure';
+export { default } from './DetailsDisclosure';

package/dist/components/DetailsDisclosure/index.js

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

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

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

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

@@ -0,0 +1,7 @@
+import { CalloutBannerProps } from '../CalloutBanner/CalloutBanner';
+import { default as React } from 'react';
+export interface ErrorSummaryProps extends Pick<CalloutBannerProps, 'title' | 'description'> {
+    children: React.ReactElement[] | React.ReactElement;
+}
+export declare const ErrorSummary: ({ title, description, children, }: ErrorSummaryProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ErrorSummary;

package/dist/components/ErrorSummary/ErrorSummary.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalloutBanner } from "../CalloutBanner/CalloutBanner.js";
+import React, { useState } from "react";
+import Link from "../Link/Link.js";
+import { Box } from "../Box/Box.js";
+import '../../assets/ErrorSummary.css';const styles = {
+  "errorSummary-list": "_errorSummary-list_yt1ru_1",
+  "errorSummary-list__item": "_errorSummary-list__item_yt1ru_24"
+};
+const MAX_ERRORS_SHOW = 4;
+const ErrorSummary = ({
+  title,
+  description,
+  children
+}) => {
+  const [showAllErrors, setShowAllErrors] = useState(false);
+  if (!children || Array.isArray(children) && children.length === 0) {
+    return null;
+  }
+  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, {
+          key: `error-${index}`,
+          iconEndProps: false
+        });
+      }
+      return child;
+    }) }),
+    hasMoreErrors && !showAllErrors && /* @__PURE__ */ jsx(Link, { onPress: () => setShowAllErrors(true), underline: true, size: "sm", iconEndProps: {
+      iconName: "chevron-down"
+    }, children: "Show more" }),
+    showAllErrors && hasMoreErrors && /* @__PURE__ */ jsx(Link, { onPress: () => setShowAllErrors(false), underline: true, size: "sm", iconEndProps: {
+      iconName: "chevron-up"
+    }, children: "Show less" })
+  ] }) });
+};
+export {
+  ErrorSummary,
+  ErrorSummary as default
+};
+//# sourceMappingURL=ErrorSummary.js.map

package/dist/components/ErrorSummary/ErrorSummary.js.map

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

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

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

package/dist/components/ErrorSummary/index.js

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

package/dist/components/ErrorSummary/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/FieldHeader/FieldHeader.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import FieldDescription from "../FieldDescription/FieldDescription.js";
 import { FieldError } from "../FieldError/FieldError.js";
 import { FieldLabel } from "../FieldLabel/FieldLabel.js";
-import '../../assets/FieldHeader.css';const fieldHeader = "_fieldHeader_3rjlj_1";
+import '../../assets/FieldHeader.css';const fieldHeader = "_fieldHeader_jjofg_1";
 const styles = {
   fieldHeader,
-  "label-container": "_label-container_3rjlj_12"
+  "label-container": "_label-container_jjofg_13"
 };
 const FieldHeader = ({
   label,
@@ -16,10 +16,10 @@ const FieldHeader = ({
   labelFor
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: styles.fieldHeader, "data-invalid": isInvalid ? true : void 0, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles["label-container"], children: [
-      label && /* @__PURE__ */ jsx(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: label }),
-      !isRequired && /* @__PURE__ */ jsx("span", { children: "Optional" })
-    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles["label-container"], children: label && /* @__PURE__ */ jsxs(FieldLabel, { required: isRequired ? true : void 0, htmlFor: labelFor, children: [
+      label,
+      !isRequired && ` (Optional)`
+    ] }) }),
     description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
     /* @__PURE__ */ jsx(FieldError, { children: errorMessage })
   ] });

package/dist/components/FieldLabel/FieldLabel.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Label } from "react-aria-components";
-import '../../assets/FieldLabel.css';const fieldLabel = "_fieldLabel_1jqml_1";
+import '../../assets/FieldLabel.css';const fieldLabel = "_fieldLabel_vou7c_1";
 const styles = {
   fieldLabel
 };

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;
-    textAlign?: "end" | "start" | "center" | null | undefined;
+    size?: "lg" | "sm" | "xs" | "xl" | "md" | "xxs" | null | undefined;
+    textAlign?: "center" | "end" | "start" | 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
@@ -6,13 +13,28 @@ export interface IconProps {
     iconName: string;
     /**
      * The prefix of the icon to load.
+     * See https://docs.fontawesome.com/web/add-icons/how-to
      * @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 +76,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;