@alto-avios/alto-ui 3.1.0 → 3.2.0

package/dist/components/PhoneNumberField/PhoneNumberField.js.map

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

package/dist/components/Popover/Popover.d.ts

@@ -1,16 +1,48 @@
 import { default as React } from 'react';
 import { OverlayTriggerState } from 'react-stately';
+type PlacementType = 'top' | 'top start' | 'top end' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left top' | 'left bottom';
+type ArrowDirectionType = 'top' | 'right' | 'bottom' | 'left';
+interface InternalPopoverProps {
+    /**
+     * @private Internal use only - placement of the popover
+     * This prop should only be used by internal components like Menu
+     */
+    placement?: PlacementType;
+    /**
+     * @private Internal use only - whether the popover should flip to fit in the viewport
+     * This prop should only be used by internal components like Menu
+     */
+    shouldFlip?: boolean;
+    /**
+     * @private Internal use only - whether to allow elements outside the popover may be interacted with
+     * This prop should only be used by internal components like Menu
+     */
+    isNonModal?: boolean;
+    /**
+     * @private Internal use only - whether to allow tabbing out of the popover
+     * This prop should only be used by internal components like Menu
+     */
+    allowTabOut?: boolean;
+    /**
+     * @private Internal use only - whether to auto-focus elements within the popover
+     * This prop should only be used by internal components like Menu
+     */
+    autoFocus?: boolean;
+}
 export interface PopoverProps {
     /** Content to be rendered inside the popover */
     children: React.ReactNode;
     /** State object controlling the overlay's open/closed status */
     state: OverlayTriggerState;
-    /** Direction of the popover arrow - affects initial placement */
-    arrowDirection?: 'top' | 'right' | 'bottom' | 'left';
+    /** Direction of the arrow that points to the trigger element */
+    arrowDirection?: ArrowDirectionType;
     /** Reference to the trigger element that opens the popover */
-    triggerRef: React.RefObject<HTMLButtonElement>;
+    triggerRef: React.RefObject<HTMLButtonElement> | {
+        current: HTMLElement;
+    };
     /** Whether to show the directional arrow on the popover */
     hasArrow?: boolean;
 }
-export declare const Popover: ({ children, state, arrowDirection, triggerRef, hasArrow, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+type CombinedPopoverProps = PopoverProps & InternalPopoverProps;
+export declare const Popover: ({ children, state, arrowDirection, triggerRef, hasArrow, placement, shouldFlip, isNonModal, allowTabOut, autoFocus, }: CombinedPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/dist/components/Popover/Popover.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useRef, useEffect } from "react";
 import { usePopover, Overlay, DismissButton } from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";
-import { mergeProps } from "@react-aria/utils";
 import '../../assets/Popover.css';const popoverWrapper = "_popoverWrapper_qrzbw_1";
 const popover = "_popover_qrzbw_1";
 const arrow = "_arrow_qrzbw_16";
@@ -11,54 +10,52 @@ const styles = {
   popover,
   arrow
 };
+const arrowDirectionToPlacement = {
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left"
+};
 const Popover = ({
   children,
   state,
   arrowDirection = "bottom",
   triggerRef,
-  hasArrow = true
+  hasArrow = true,
+  placement,
+  shouldFlip = true,
+  isNonModal = false,
+  allowTabOut = false,
+  autoFocus = false
 }) => {
   const popoverRef = useRef(null);
-  const [optimalPlacement, setOptimalPlacement] = React.useState(arrowDirection);
+  const initialPlacement = placement || arrowDirectionToPlacement[arrowDirection];
+  const [optimalPlacement, setOptimalPlacement] = React.useState(initialPlacement);
   useEffect(() => {
     const updatePlacement = () => {
       if (!popoverRef.current || !triggerRef.current) return;
-      const popoverRect = popoverRef.current.getBoundingClientRect();
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const viewportWidth = window.innerWidth;
-      let newPlacement = arrowDirection;
-      if (arrowDirection === "bottom" && triggerRect.bottom + popoverRect.height > viewportHeight) {
-        newPlacement = "top";
-      } else if (arrowDirection === "top" && triggerRect.top - popoverRect.height < 0) {
-        newPlacement = "bottom";
-      }
-      if (arrowDirection === "right" && triggerRect.right + popoverRect.width > viewportWidth) {
-        newPlacement = "left";
-      } else if (arrowDirection === "left" && triggerRect.left - popoverRect.width < 0) {
-        newPlacement = "right";
-      }
-      setOptimalPlacement(newPlacement);
+      setOptimalPlacement(initialPlacement);
     };
     updatePlacement();
     window.addEventListener("resize", updatePlacement);
     return () => window.removeEventListener("resize", updatePlacement);
-  }, [arrowDirection, popoverRef.current]);
+  }, [initialPlacement, popoverRef.current]);
   const {
     popoverProps,
     arrowProps,
-    placement
+    placement: finalPlacement
   } = usePopover({
     popoverRef,
     triggerRef,
     offset: 12,
     placement: optimalPlacement,
-    shouldFlip: true
+    shouldFlip,
+    isNonModal
   }, state);
-  return /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx("div", { className: styles.popoverWrapper, children: /* @__PURE__ */ jsx(FocusScope, { restoreFocus: true, contain: true, children: /* @__PURE__ */ jsxs("div", { ...mergeProps(popoverProps), ref: popoverRef, className: styles.popover, children: [
+  return /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx("div", { className: styles.popoverWrapper, children: /* @__PURE__ */ jsx(FocusScope, { restoreFocus: true, contain: !allowTabOut, autoFocus, children: /* @__PURE__ */ jsxs("div", { ...popoverProps, ref: popoverRef, className: styles.popover, children: [
     /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
     children,
-    hasArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, className: styles.arrow, "data-placement": placement })
+    hasArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, className: styles.arrow, "data-placement": finalPlacement })
   ] }) }) }) });
 };
 export {

package/dist/components/Popover/Popover.js.map

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

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

@@ -1 +1,2 @@
+export type { RadioProps } from './Radio';
 export { default } from './Radio';

package/dist/components/SelectCard/SelectCard.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { CheckboxProps } from 'react-aria-components';
+import { RadioProps } from '../Radio';
+type SelectCardContextType = {
+    /**
+     * The input type of the select card.
+     * @default 'checkbox'
+     */
+    type?: 'checkbox' | 'radio';
+    /**
+     * The ID of the title for a11y labelling.
+     * @default useId()
+     */
+    'aria-labelledby'?: string;
+} & (({
+    type?: 'checkbox';
+} & Omit<CheckboxProps, 'children' | 'focusStyle'>) | ({
+    type: 'radio';
+} & Omit<RadioProps, 'children' | 'focusStyle'>));
+type SelectCardProps = SelectCardContextType & {
+    /**
+     * The compounds components of the SelectCard:
+     * - SelectCard.Header
+     * - SelectCard.StartSlot
+     * - SelectCard.EndSlot
+     * - SelectCard.Label
+     * - SelectCard.Body
+     * - SelectCard.Details
+     */
+    children?: React.ReactNode;
+};
+declare const SelectCard: {
+    ({ children, type, ...contextProps }: SelectCardProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    StartSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    EndSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ title, description }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    Details: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+};
+interface HeaderProps {
+    children?: React.ReactNode;
+}
+interface SlotProps {
+    children: React.ReactNode;
+}
+interface LabelProps {
+    title: string;
+    description?: string;
+}
+export default SelectCard;

package/dist/components/SelectCard/SelectCard.js

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext } from "react";
+import { Paragraph } from "../Paragraph/Paragraph.js";
+import { Checkbox, Radio } from "react-aria-components";
+import '../../assets/SelectCard.css';const checkboxSvgWrapper = "_checkboxSvgWrapper_dir9q_104";
+const svg = "_svg_dir9q_118";
+const styles = {
+  "select-card": "_select-card_dir9q_1",
+  "select-card__header": "_select-card__header_dir9q_30",
+  "select-card__start-slot": "_select-card__start-slot_dir9q_38",
+  "select-card__label-title": "_select-card__label-title_dir9q_43",
+  "select-card__label": "_select-card__label_dir9q_43",
+  "select-card__end-slot": "_select-card__end-slot_dir9q_67",
+  "select-card__body": "_select-card__body_dir9q_79",
+  "select-card__details": "_select-card__details_dir9q_90",
+  "select-card__checkbox": "_select-card__checkbox_dir9q_104",
+  checkboxSvgWrapper,
+  svg,
+  "select-card__radio": "_select-card__radio_dir9q_183"
+};
+const SelectCardContext = createContext({});
+const SelectCard = ({
+  children,
+  type = "checkbox",
+  ...contextProps
+}) => {
+  const labelId = React.useId();
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
+      type,
+      "aria-labelledby": labelId,
+      ...contextProps
+    }, children: /* @__PURE__ */ jsx(Checkbox, { className: `${styles["select-card"]} ${styles["select-card__checkbox"]}`, ...contextProps, "aria-labelledby": labelId, children }) });
+  }
+  return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: {
+    "aria-labelledby": labelId,
+    ...contextProps
+  }, children: /* @__PURE__ */ jsx(Radio, { className: `${styles["select-card"]} ${styles["select-card__radio"]}`, ...contextProps, "aria-labelledby": labelId, children }) });
+};
+const Header = ({
+  children
+}) => {
+  const state = useContext(SelectCardContext);
+  if ((state == null ? void 0 : state.type) === "checkbox") {
+    return /* @__PURE__ */ jsxs("div", { className: styles["select-card__header"], children: [
+      /* @__PURE__ */ jsx("div", { className: `${styles.checkboxSvgWrapper}`, "data-disabled": state == null ? void 0 : state.isDisabled, children: /* @__PURE__ */ jsx("svg", { className: styles.svg, viewBox: "0 0 18 18", "aria-hidden": "true", children: (state == null ? void 0 : state.isIndeterminate) ? /* @__PURE__ */ jsx("rect", { x: 1, y: 7.5, width: 15, height: 3 }) : /* @__PURE__ */ jsx("polyline", { points: "1 9 7 14 15 4" }) }) }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles["select-card__header"], children });
+};
+const StartSlot = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__start-slot"], children });
+const EndSlot = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__end-slot"], children });
+const Label = ({
+  title,
+  description
+}) => {
+  const state = useContext(SelectCardContext);
+  return /* @__PURE__ */ jsxs("div", { className: styles["select-card__label"], children: [
+    /* @__PURE__ */ jsx("div", { className: styles["select-card__label-title"], id: state == null ? void 0 : state["aria-labelledby"], children: title }),
+    /* @__PURE__ */ jsx(Paragraph, { size: "sm", foregroundColor: (state == null ? void 0 : state.isDisabled) ? "disabledOnSubtle" : "default", children: description })
+  ] });
+};
+const Body = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles["select-card__body"], children });
+const Details = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: styles["select-card__details"], children });
+};
+SelectCard.Header = Header;
+SelectCard.StartSlot = StartSlot;
+SelectCard.EndSlot = EndSlot;
+SelectCard.Label = Label;
+SelectCard.Body = Body;
+SelectCard.Details = Details;
+export {
+  SelectCard as default
+};
+//# sourceMappingURL=SelectCard.js.map

package/dist/components/SelectCard/SelectCard.js.map

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

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

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

package/dist/components/SelectCard/index.js

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

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

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

package/dist/components/SubHeading/SubHeading.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor';
 declare const subHeading: (props?: ({
     size?: "sm" | "xs" | null | undefined;
-    textAlign?: "end" | "start" | "center" | null | undefined;
+    textAlign?: "center" | "end" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HeadingVariants = VariantProps<typeof subHeading>;
 type SubHeadingLevel = 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/Tag/Tag.js

@@ -3,9 +3,9 @@ import { Tag as Tag$1 } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Tag.css';const tag = "_tag_ob7tq_1";
-const isRemovable = "_isRemovable_ob7tq_21";
-const iconWrapper = "_iconWrapper_ob7tq_123";
+import '../../assets/Tag.css';const tag = "_tag_1jz2y_1";
+const isRemovable = "_isRemovable_1jz2y_21";
+const iconWrapper = "_iconWrapper_1jz2y_123";
 const styles = {
   tag,
   isRemovable,
@@ -24,7 +24,7 @@ const Tag = ({
   return /* @__PURE__ */ jsxs(Tag$1, { className: `${styles.tag} ${isRemovable2 ? styles.isRemovable : ""} ${focusStyleVariants({
     focusStyle
   })}`, isDisabled, id: id == null ? void 0 : id.toString(), textValue, ...props, children: [
-    leadingIconProps ? /* @__PURE__ */ jsx("span", { className: styles.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { ...leadingIconProps }) }) : null,
+    leadingIconProps ? /* @__PURE__ */ jsx("span", { className: styles.iconWrapper, children: /* @__PURE__ */ jsx(Icon, { ...leadingIconProps, iconSize: "0.75x", padding: "square" }) }) : null,
     children,
     isRemovable2 && /* @__PURE__ */ jsx(IconButton, { slot: "remove", size: "sm", iconProps: {
       iconName: "close"

package/dist/components/index.d.ts

@@ -1,8 +1,11 @@
+export { default as Accordion } from './Accordion';
+export { default as AviosBadge } from './AviosBadge';
 export { default as AviosCurrencySymbol } from './AviosCurrencySymbol';
 export { default as Badge } from './Badge';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
 export { default as ButtonGroup } from './ButtonGroup';
+export { default as CalloutBanner } from './CalloutBanner';
 export { default as CardSection } from './CardSection';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
@@ -11,6 +14,7 @@ export { default as DateField } from './DateField';
 export { default as DestinationHeading } from './DestinationHeading';
 export { default as DetailsDisclosure } from './DetailsDisclosure';
 export { default as Dialog } from './Dialog';
+export { default as ErrorSummary } from './ErrorSummary';
 export { default as Eyebrow } from './Eyebrow';
 export { default as FieldDescription } from './FieldDescription';
 export { default as FieldError } from './FieldError';
@@ -27,6 +31,7 @@ export { default as IconButton } from './IconButton';
 export { default as Image } from './Image';
 export { default as Link } from './Link';
 export { default as LoadingSpinner } from './LoadingSpinner';
+export { default as Menu } from './Menu';
 export { default as NumberField } from './NumberField';
 export { default as Paragraph } from './Paragraph';
 export { default as PhoneNumberField } from './PhoneNumberField';
@@ -36,6 +41,7 @@ export { default as Radio } from './Radio';
 export { default as RadioGroup } from './RadioGroup';
 export { default as Section } from './Section';
 export { default as Select } from './SelectNative';
+export { default as SelectCard } from './SelectCard';
 export { default as SelectNative } from './SelectNative';
 export { default as SubHeading } from './SubHeading';
 export { default as Switch } from './Switch';

package/dist/components/index.js

@@ -1,9 +1,12 @@
 import '../assets/global.css';/* empty css                 */
+import { Accordion } from "./Accordion/Accordion.js";
+import { AviosBadge } from "./AviosBadge/AviosBadge.js";
 import { AviosCurrencySymbol } from "./AviosCurrencySymbol/AviosCurrencySymbol.js";
 import { Badge } from "./Badge/Badge.js";
 import { Box } from "./Box/Box.js";
 import { Button } from "./Button/Button.js";
 import { ButtonGroup } from "./ButtonGroup/ButtonGroup.js";
+import { CalloutBanner } from "./CalloutBanner/CalloutBanner.js";
 import { default as default2 } from "./CardSection/CardSection.js";
 import { Checkbox } from "./Checkbox/Checkbox.js";
 import { CheckboxGroup } from "./CheckboxGroup/CheckboxGroup.js";
@@ -12,6 +15,7 @@ import { DateField } from "./DateField/DateField.js";
 import { DestinationHeading } from "./DestinationHeading/DestinationHeading.js";
 import { default as default3 } from "./DetailsDisclosure/DetailsDisclosure.js";
 import { Dialog } from "./Dialog/Dialog.js";
+import { ErrorSummary } from "./ErrorSummary/ErrorSummary.js";
 import { Eyebrow } from "./Eyebrow/Eyebrow.js";
 import { default as default4 } from "./FieldDescription/FieldDescription.js";
 import { FieldError } from "./FieldError/FieldError.js";
@@ -28,6 +32,7 @@ import { IconButton } from "./IconButton/IconButton.js";
 import { Image } from "./Image/Image.js";
 import { default as default6 } from "./Link/Link.js";
 import { default as default7 } from "./LoadingSpinner/LoadingSpinner.js";
+import { Menu } from "./Menu/Menu.js";
 import { NumberField } from "./NumberField/NumberField.js";
 import { Paragraph } from "./Paragraph/Paragraph.js";
 import { PhoneNumberField } from "./PhoneNumberField/PhoneNumberField.js";
@@ -37,21 +42,25 @@ import { Radio } from "./Radio/Radio.js";
 import { RadioGroup } from "./RadioGroup/RadioGroup.js";
 import { default as default8 } from "./Section/Section.js";
 import { SelectNative, SelectNative as SelectNative2 } from "./SelectNative/SelectNative.js";
+import { default as default9 } from "./SelectCard/SelectCard.js";
 import { SubHeading } from "./SubHeading/SubHeading.js";
 import { Switch } from "./Switch/Switch.js";
 import { Tag } from "./Tag/Tag.js";
 import { TagGroup } from "./TagGroup/TagGroup.js";
 import { TextField } from "./TextField/TextField.js";
 import { TextAreaField } from "./TextAreaField/TextAreaField.js";
-import { default as default9 } from "./ToggleButton/ToggleButton.js";
-import { default as default10 } from "./ToggleIconButton/ToggleIconButton.js";
+import { default as default10 } from "./ToggleButton/ToggleButton.js";
+import { default as default11 } from "./ToggleIconButton/ToggleIconButton.js";
 import { Tooltip } from "./Tooltip/Tooltip.js";
 export {
+  Accordion,
+  AviosBadge,
   AviosCurrencySymbol,
   Badge,
   Box,
   Button,
   ButtonGroup,
+  CalloutBanner,
   default2 as CardSection,
   Checkbox,
   CheckboxGroup,
@@ -60,6 +69,7 @@ export {
   DestinationHeading,
   default3 as DetailsDisclosure,
   Dialog,
+  ErrorSummary,
   Eyebrow,
   default4 as FieldDescription,
   FieldError,
@@ -76,6 +86,7 @@ export {
   Image,
   default6 as Link,
   default7 as LoadingSpinner,
+  Menu,
   NumberField,
   Paragraph,
   PasswordField,
@@ -85,6 +96,7 @@ export {
   RadioGroup,
   default8 as Section,
   SelectNative as Select,
+  default9 as SelectCard,
   SelectNative2 as SelectNative,
   SubHeading,
   Switch,
@@ -92,8 +104,8 @@ export {
   TagGroup,
   TextAreaField,
   TextField,
-  default9 as ToggleButton,
-  default10 as ToggleIconButton,
+  default10 as ToggleButton,
+  default11 as ToggleIconButton,
   Tooltip
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/index.js

@@ -1,9 +1,12 @@
 import './assets/global.css';/* empty css                */
+import { Accordion } from "./components/Accordion/Accordion.js";
+import { AviosBadge } from "./components/AviosBadge/AviosBadge.js";
 import { AviosCurrencySymbol } from "./components/AviosCurrencySymbol/AviosCurrencySymbol.js";
 import { Badge } from "./components/Badge/Badge.js";
 import { Box } from "./components/Box/Box.js";
 import { Button } from "./components/Button/Button.js";
 import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
+import { CalloutBanner } from "./components/CalloutBanner/CalloutBanner.js";
 import { default as default2 } from "./components/CardSection/CardSection.js";
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup.js";
@@ -12,6 +15,7 @@ import { DateField } from "./components/DateField/DateField.js";
 import { DestinationHeading } from "./components/DestinationHeading/DestinationHeading.js";
 import { default as default3 } from "./components/DetailsDisclosure/DetailsDisclosure.js";
 import { Dialog } from "./components/Dialog/Dialog.js";
+import { ErrorSummary } from "./components/ErrorSummary/ErrorSummary.js";
 import { Eyebrow } from "./components/Eyebrow/Eyebrow.js";
 import { default as default4 } from "./components/FieldDescription/FieldDescription.js";
 import { FieldError } from "./components/FieldError/FieldError.js";
@@ -28,6 +32,7 @@ import { IconButton } from "./components/IconButton/IconButton.js";
 import { Image } from "./components/Image/Image.js";
 import { default as default6 } from "./components/Link/Link.js";
 import { default as default7 } from "./components/LoadingSpinner/LoadingSpinner.js";
+import { Menu } from "./components/Menu/Menu.js";
 import { NumberField } from "./components/NumberField/NumberField.js";
 import { Paragraph } from "./components/Paragraph/Paragraph.js";
 import { PhoneNumberField } from "./components/PhoneNumberField/PhoneNumberField.js";
@@ -37,21 +42,25 @@ import { Radio } from "./components/Radio/Radio.js";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
 import { default as default8 } from "./components/Section/Section.js";
 import { SelectNative, SelectNative as SelectNative2 } from "./components/SelectNative/SelectNative.js";
+import { default as default9 } from "./components/SelectCard/SelectCard.js";
 import { SubHeading } from "./components/SubHeading/SubHeading.js";
 import { Switch } from "./components/Switch/Switch.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { TagGroup } from "./components/TagGroup/TagGroup.js";
 import { TextField } from "./components/TextField/TextField.js";
 import { TextAreaField } from "./components/TextAreaField/TextAreaField.js";
-import { default as default9 } from "./components/ToggleButton/ToggleButton.js";
-import { default as default10 } from "./components/ToggleIconButton/ToggleIconButton.js";
+import { default as default10 } from "./components/ToggleButton/ToggleButton.js";
+import { default as default11 } from "./components/ToggleIconButton/ToggleIconButton.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 export {
+  Accordion,
+  AviosBadge,
   AviosCurrencySymbol,
   Badge,
   Box,
   Button,
   ButtonGroup,
+  CalloutBanner,
   default2 as CardSection,
   Checkbox,
   CheckboxGroup,
@@ -60,6 +69,7 @@ export {
   DestinationHeading,
   default3 as DetailsDisclosure,
   Dialog,
+  ErrorSummary,
   Eyebrow,
   default4 as FieldDescription,
   FieldError,
@@ -76,6 +86,7 @@ export {
   Image,
   default6 as Link,
   default7 as LoadingSpinner,
+  Menu,
   NumberField,
   Paragraph,
   PasswordField,
@@ -85,6 +96,7 @@ export {
   RadioGroup,
   default8 as Section,
   SelectNative as Select,
+  default9 as SelectCard,
   SelectNative2 as SelectNative,
   SubHeading,
   Switch,
@@ -92,8 +104,8 @@ export {
   TagGroup,
   TextAreaField,
   TextField,
-  default9 as ToggleButton,
-  default10 as ToggleIconButton,
+  default10 as ToggleButton,
+  default11 as ToggleIconButton,
   Tooltip
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/dist/utils/border/border.d.ts

@@ -1,10 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import { InputType } from 'storybook/internal/types';
 export declare const borderVariants: (props?: ({
-    borderRadius?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "md" | "5xs" | "4xs" | "3xs" | "6xs" | "circle" | null | undefined;
+    borderRadius?: "none" | "lg" | "sm" | "xs" | "2xs" | "xl" | "circle" | "md" | "5xs" | "4xs" | "3xs" | "6xs" | null | undefined;
     borderWidth?: "none" | "lg" | "sm" | "xs" | "xl" | "md" | null | undefined;
     borderStyle?: "none" | "solid" | "dashed" | null | undefined;
-    borderColour?: "secondary" | "white" | "none" | "critical" | "warning" | "caution" | "success" | "tertiary" | "accent" | "information" | "inverse" | null | undefined;
+    borderColour?: "secondary" | "none" | "white" | "critical" | "warning" | "caution" | "success" | "tertiary" | "accent" | "information" | "inverse" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type BorderVariants = VariantProps<typeof borderVariants>;
 export declare const borderArgTypes: Record<string, InputType>;

package/dist/utils/flex/flex.d.ts

@@ -1,12 +1,17 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const flexVariants: (props?: ({
     display?: "flex" | "inline-flex" | null | undefined;
-    justifyContent?: "end" | "start" | "center" | "spaceBetween" | "spaceAround" | "spaceEvenly" | null | undefined;
-    flexWrap?: "wrap" | "nowrap" | null | undefined;
-    flexGrow?: 0 | 1 | null | undefined;
-    flexShrink?: 0 | 1 | null | undefined;
+    alignItems?: "center" | "end" | "start" | "flexStart" | "flexEnd" | "stretch" | "selfStart" | "selfEnd" | "selfCenter" | null | undefined;
+    justifyContent?: "left" | "right" | "center" | "end" | "inherit" | "initial" | "start" | "flexStart" | "flexEnd" | "stretch" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "normal" | "revert" | "revertLayer" | "unset" | null | undefined;
+    flexWrap?: "wrap" | "nowrap" | "wrapReverse" | null | undefined;
+    flexGrow?: 0 | 1 | "inherit" | "initial" | "revert" | "revertLayer" | "unset" | null | undefined;
+    flexShrink?: 0 | 1 | "inherit" | "initial" | "revert" | "revertLayer" | "unset" | null | undefined;
     flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
-    alignItems?: "end" | "start" | "center" | "stretch" | null | undefined;
+    alignSelf?: "center" | "end" | "auto" | "baseline" | "inherit" | "initial" | "start" | "flexStart" | "flexEnd" | "stretch" | "selfStart" | "selfEnd" | "normal" | "revert" | "revertLayer" | "unset" | null | undefined;
+    alignContent?: "center" | "end" | "baseline" | "inherit" | "initial" | "start" | "flexStart" | "flexEnd" | "stretch" | "spaceBetween" | "spaceAround" | "spaceEvenly" | "normal" | "revert" | "revertLayer" | "unset" | "firstBaseline" | "lastBaseline" | "safeCenter" | "unsafeCenter" | null | undefined;
+    flexBasis?: "inherit" | "initial" | "content" | "revert" | "revertLayer" | "unset" | "maxContent" | "minContent" | "fitContent" | null | undefined;
     gap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    rowGap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    columnGap?: "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type FlexVariants = VariantProps<typeof flexVariants>;