@alto-avios/alto-ui 3.8.0 → 4.0.0

package/dist/components/SkeletonLoader/SkeletonLoader.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+export interface SkeletonLoaderProps {
+    /**
+     * The width of the skeleton
+     * Can be a number (pixels) or string (CSS value)
+     * @example 200 or "100%" or "50px"
+     */
+    width?: string | number;
+    /**
+     * The height of the skeleton
+     * Can be a number (pixels) or string (CSS value)
+     * @example 20 or "100%" or "2rem"
+     */
+    height?: string | number;
+    /**
+     * Number of skeleton lines to display
+     * @default 1
+     */
+    count?: number;
+    /**
+     * Whether to display the skeleton as a circle
+     * When true, height and width should be equal for best results
+     * @default false
+     */
+    circle?: boolean;
+    /**
+     * Whether to show the loading skeleton
+     * When false, renders children or nothing
+     * @default true
+     */
+    isLoading?: boolean;
+    /**
+     * Children to render when not loading
+     */
+    children?: React.ReactNode;
+    /**
+     * Accessible label describing what is loading
+     * @example "Loading user profile" or "Loading product details"
+     */
+    'aria-label'?: string;
+    /**
+     * Whether the skeleton loader itself should be focusable
+     * Set to true when the skeleton represents an interactive element (button, input, link)
+     * that was previously focusable in the interface
+     * @default false
+     */
+    elementFocusable?: boolean;
+}
+export declare const SkeletonLoader: ({ width, height, count, circle, isLoading, children, "aria-label": ariaLabel, elementFocusable, }: SkeletonLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export default SkeletonLoader;

package/dist/components/SkeletonLoader/SkeletonLoader.js

@@ -0,0 +1,150 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import React__default, { useRef, useState, useEffect } from "react";
+import '../../assets/SkeletonLoader.css';const SkeletonThemeContext = React__default.createContext({});
+const defaultEnableAnimation = true;
+function styleOptionsToCssProperties({ baseColor, highlightColor, width, height, borderRadius, circle, direction, duration, enableAnimation = defaultEnableAnimation, customHighlightBackground }) {
+  const style = {};
+  if (direction === "rtl")
+    style["--animation-direction"] = "reverse";
+  if (typeof duration === "number")
+    style["--animation-duration"] = `${duration}s`;
+  if (!enableAnimation)
+    style["--pseudo-element-display"] = "none";
+  if (typeof width === "string" || typeof width === "number")
+    style.width = width;
+  if (typeof height === "string" || typeof height === "number")
+    style.height = height;
+  if (typeof borderRadius === "string" || typeof borderRadius === "number")
+    style.borderRadius = borderRadius;
+  if (circle)
+    style.borderRadius = "50%";
+  if (typeof baseColor !== "undefined")
+    style["--base-color"] = baseColor;
+  if (typeof highlightColor !== "undefined")
+    style["--highlight-color"] = highlightColor;
+  if (typeof customHighlightBackground === "string")
+    style["--custom-highlight-background"] = customHighlightBackground;
+  return style;
+}
+function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp, ...originalPropsStyleOptions }) {
+  var _a, _b, _c;
+  const contextStyleOptions = React__default.useContext(SkeletonThemeContext);
+  const propsStyleOptions = { ...originalPropsStyleOptions };
+  for (const [key, value] of Object.entries(originalPropsStyleOptions)) {
+    if (typeof value === "undefined") {
+      delete propsStyleOptions[key];
+    }
+  }
+  const styleOptions = {
+    ...contextStyleOptions,
+    ...propsStyleOptions,
+    circle
+  };
+  const style = {
+    ...styleProp,
+    ...styleOptionsToCssProperties(styleOptions)
+  };
+  let className = "react-loading-skeleton";
+  if (customClassName)
+    className += ` ${customClassName}`;
+  const inline = (_a = styleOptions.inline) !== null && _a !== void 0 ? _a : false;
+  const elements = [];
+  const countCeil = Math.ceil(count);
+  for (let i = 0; i < countCeil; i++) {
+    let thisStyle = style;
+    if (countCeil > count && i === countCeil - 1) {
+      const width = (_b = thisStyle.width) !== null && _b !== void 0 ? _b : "100%";
+      const fractionalPart = count % 1;
+      const fractionalWidth = typeof width === "number" ? width * fractionalPart : `calc(${width} * ${fractionalPart})`;
+      thisStyle = { ...thisStyle, width: fractionalWidth };
+    }
+    const skeletonSpan = React__default.createElement("span", { className, style: thisStyle, key: i }, "‌");
+    if (inline) {
+      elements.push(skeletonSpan);
+    } else {
+      elements.push(React__default.createElement(
+        React__default.Fragment,
+        { key: i },
+        skeletonSpan,
+        React__default.createElement("br", null)
+      ));
+    }
+  }
+  return React__default.createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper ? elements.map((el, i) => React__default.createElement(Wrapper, { key: i }, el)) : elements);
+}
+const skeletonLoader = "_skeletonLoader_10o6z_1";
+const multiLine = "_multiLine_10o6z_15";
+const styles = {
+  skeletonLoader,
+  multiLine
+};
+const SkeletonLoader = ({
+  width,
+  height,
+  count = 1,
+  circle = false,
+  isLoading = true,
+  children,
+  "aria-label": ariaLabel,
+  elementFocusable = false
+}) => {
+  const containerRef = useRef(null);
+  const [focusVisible, setFocusVisible] = useState(false);
+  useEffect(() => {
+    if (isLoading && elementFocusable && containerRef.current) {
+      const activeElement = document.activeElement;
+      const shouldReceiveFocus = !activeElement || activeElement === document.body || activeElement.closest("[data-skeleton-replaced]");
+      if (shouldReceiveFocus) {
+        containerRef.current.focus();
+      }
+    }
+  }, [isLoading, elementFocusable]);
+  useEffect(() => {
+    if (!elementFocusable || !containerRef.current) return;
+    const element = containerRef.current;
+    const handleFocus = () => {
+      setFocusVisible(true);
+    };
+    const handleBlur = () => {
+      setFocusVisible(false);
+    };
+    const handleMouseDown = () => {
+      setFocusVisible(false);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Tab") {
+        setFocusVisible(true);
+      }
+    };
+    element.addEventListener("focus", handleFocus);
+    element.addEventListener("blur", handleBlur);
+    element.addEventListener("mousedown", handleMouseDown);
+    element.addEventListener("keydown", handleKeyDown);
+    return () => {
+      element.removeEventListener("focus", handleFocus);
+      element.removeEventListener("blur", handleBlur);
+      element.removeEventListener("mousedown", handleMouseDown);
+      element.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [elementFocusable]);
+  if (!isLoading) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const highlightGradient = `linear-gradient(90deg, var(--skeleton-highlight-start) 0%, var(--skeleton-highlight-center) 50%, var(--skeleton-highlight-end) 100%)`;
+  const wrapperClass = count > 1 ? `${styles.skeletonLoader} ${styles.multiLine}` : styles.skeletonLoader;
+  const containerStyle = {
+    "--skeleton-width": typeof width === "number" ? `${width}px` : width
+  };
+  const getAriaLabel = () => {
+    if (ariaLabel) return ariaLabel;
+    if (circle) return "Loading image";
+    if (count > 1) return "Loading content";
+    return "Loading";
+  };
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: wrapperClass, style: containerStyle, role: "status", "aria-label": getAriaLabel(), tabIndex: elementFocusable ? 0 : -1, "data-skeleton-loader": "true", "data-focus-visible": elementFocusable && focusVisible ? "true" : void 0, children: /* @__PURE__ */ jsx(Skeleton, { width, height, count, circle, baseColor: "var(--skeleton-base-color)", customHighlightBackground: highlightGradient, inline: true }) });
+};
+export {
+  SkeletonLoader,
+  SkeletonLoader as default
+};
+//# sourceMappingURL=SkeletonLoader.js.map

package/dist/components/SkeletonLoader/SkeletonLoader.js.map

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

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

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

package/dist/components/SkeletonLoader/index.js

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

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

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

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

@@ -26,16 +26,11 @@ export interface SubHeadingProps extends SubHeadingVariants {
      * @default "accentPrimary"
      */
     foregroundColor?: ForegroundVariants['foregroundColor'];
-    /**
-     * The foreground color of the heading
-     * @deprecated Use `foregroundColor` instead
-     */
-    fgColor?: ForegroundVariants['foregroundColor'];
     /**
      * The text alignment of the heading
      * @default "start"
      */
     textAlign?: 'start' | 'center' | 'end';
 }
-export declare const SubHeading: ({ children, as: Component, size, foregroundColor, fgColor, textAlign, ...props }: SubHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubHeading: ({ children, as: Component, size, foregroundColor, textAlign, ...props }: SubHeadingProps) => import("react/jsx-runtime").JSX.Element;
 export default SubHeading;

package/dist/components/SubHeading/SubHeading.js

@@ -37,20 +37,15 @@ const SubHeading = ({
   as: Component = "span",
   size,
   foregroundColor = "accentPrimary",
-  fgColor,
   textAlign = "start",
   ...props
 }) => {
   const effectiveSize = size;
-  if (fgColor) {
-    console.warn("The `fgColor` prop has been deprecated. Please use `foregroundColor` instead.");
-  }
-  const resolvedFontColor = fgColor ?? foregroundColor ?? "accentPrimary";
   return /* @__PURE__ */ jsx(Component, { className: `${subHeading({
     size: effectiveSize,
     textAlign
   })} ${foregroundColorVariants({
-    foregroundColor: resolvedFontColor
+    foregroundColor
   })}`, ...props, children });
 };
 export {

package/dist/components/SubHeading/SubHeading.js.map

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

package/dist/components/TextAreaField/TextAreaField.js

@@ -7,7 +7,7 @@ const styles = {
   textAreaField
 };
 const TextAreaField = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.textAreaField, ...props, children: /* @__PURE__ */ jsx(TextArea, { ref }) });
+  return /* @__PURE__ */ jsx(Field, { as: TextField, className: styles.textAreaField, label: (props == null ? void 0 : props.label) || (props == null ? void 0 : props["aria-label"]), ...props, children: /* @__PURE__ */ jsx(TextArea, { ref }) });
 });
 TextAreaField.displayName = "TextAreaField";
 export {

package/dist/components/_base/Field/Field.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { FieldHeader } from "../../FieldHeader/FieldHeader.js";
-import React from "react";
+import React__default from "react";
 import { fieldVariants } from "../../../utils/forms/field.js";
 import { FieldError } from "../../FieldError/FieldError.js";
 import '../../../assets/Field.css';const fieldGrid = "_fieldGrid_1ajki_1";
@@ -17,7 +17,7 @@ function PolymorphicField({
   if (!as) {
     console.warn("@alto/ui: Field expects an as prop");
   }
-  return as ? React.createElement(as, props, children) : /* @__PURE__ */ jsx("div", { children });
+  return as ? React__default.createElement(as, props, children) : /* @__PURE__ */ jsx("div", { children });
 }
 function Field({
   as,
@@ -30,12 +30,12 @@ function Field({
   errorPlacement = "top",
   ...props
 }) {
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if ((props == null ? void 0 : props.label) === void 0) {
       console.warn("@alto/ui: Field expects a label prop for accessibility compliance");
     }
   }, [props == null ? void 0 : props.label]);
-  return /* @__PURE__ */ jsxs(PolymorphicField, { as, isDisabled: props == null ? void 0 : props.isDisabled, className, isRequired: props == null ? void 0 : props.isRequired, ...props, children: [
+  return /* @__PURE__ */ jsxs(PolymorphicField, { as, isDisabled: props == null ? void 0 : props.isDisabled, className, ...props, children: [
     (props == null ? void 0 : props.label) ? /* @__PURE__ */ jsx(FieldHeader, { label: props == null ? void 0 : props.label, description: props == null ? void 0 : props.description, isInvalid: props == null ? void 0 : props.isInvalid, isRequired: props == null ? void 0 : props.isRequired, labelFor: props == null ? void 0 : props.labelFor, errorMessage: errorPlacement === "top" ? props == null ? void 0 : props.errorMessage : void 0, optionalTranslation: props == null ? void 0 : props.optionalTranslation }) : null,
     /* @__PURE__ */ jsx("div", { className: styles.fieldGrid, children: /* @__PURE__ */ jsx("div", { className: fieldVariants({
       columns,

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Accordion, AccordionGroup } from './Accordion';
 export type * from './Accordion';
+export { default as AviosCurrencyBadge } from './AviosCurrencyBadge';
+export type * from './AviosCurrencyBadge';
 export { default as AviosCurrency } from './AviosCurrency';
 export type * from './AviosCurrency';
 export { default as AviosBadge } from './AviosBadge';
@@ -18,6 +20,8 @@ export { default as CalloutBanner } from './CalloutBanner';
 export type * from './CalloutBanner';
 export { default as CardSection } from './CardSection';
 export type * from './CardSection';
+export { default as Carousel } from './Carousel';
+export type * from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export type * from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
@@ -80,6 +84,8 @@ export { default as LoadingSpinner } from './LoadingSpinner';
 export type * from './LoadingSpinner';
 export { default as Menu } from './Menu';
 export type * from './Menu';
+export { default as MonthYearField } from './MonthYearField';
+export type * from './MonthYearField';
 export { default as NumberField } from './NumberField';
 export type * from './NumberField';
 export { default as Paragraph } from './Paragraph';
@@ -102,6 +108,8 @@ export { default as SelectCard } from './SelectCard';
 export type * from './SelectCard';
 export { default as SelectNative } from './SelectNative';
 export type * from './SelectNative';
+export { default as SkeletonLoader } from './SkeletonLoader';
+export type * from './SkeletonLoader';
 export { default as Slider } from './Slider';
 export type * from './Slider';
 export { default as Spacer } from './Spacer';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 import '../assets/global.css';/* empty css                 */
 import { Accordion, AccordionGroup } from "./Accordion/Accordion.js";
+import { AviosCurrencyBadge } from "./AviosCurrencyBadge/AviosCurrencyBadge.js";
 import { AviosCurrency } from "./AviosCurrency/AviosCurrency.js";
 import { AviosBadge } from "./AviosBadge/AviosBadge.js";
 import { AviosCurrencySymbol } from "./AviosCurrencySymbol/AviosCurrencySymbol.js";
@@ -9,6 +10,7 @@ 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 { Carousel } from "./Carousel/Carousel.js";
 import { Checkbox } from "./Checkbox/Checkbox.js";
 import { CheckboxGroup } from "./CheckboxGroup/CheckboxGroup.js";
 import { ClearFieldButton } from "./ClearFieldButton/ClearFieldButton.js";
@@ -40,6 +42,7 @@ import { ListBox } from "./ListBox/ListBox.js";
 import { ListBoxItem } from "./ListBoxItem/ListBoxItem.js";
 import { default as default7 } from "./LoadingSpinner/LoadingSpinner.js";
 import { Menu } from "./Menu/Menu.js";
+import { MonthYearField } from "./MonthYearField/MonthYearField.js";
 import { NumberField } from "./NumberField/NumberField.js";
 import { Paragraph } from "./Paragraph/Paragraph.js";
 import { PhoneNumberField } from "./PhoneNumberField/PhoneNumberField.js";
@@ -51,6 +54,7 @@ import { SearchField } from "./SearchField/SearchField.js";
 import { default as default8 } from "./Section/Section.js";
 import { default as default9 } from "./SelectCard/SelectCard.js";
 import { SelectNative } from "./SelectNative/SelectNative.js";
+import { SkeletonLoader } from "./SkeletonLoader/SkeletonLoader.js";
 import { Slider } from "./Slider/Slider.js";
 import { Spacer } from "./Spacer/Spacer.js";
 import { SubHeading } from "./SubHeading/SubHeading.js";
@@ -67,6 +71,7 @@ export {
   AccordionGroup,
   AviosBadge,
   AviosCurrency,
+  AviosCurrencyBadge,
   AviosCurrencySymbol,
   Badge,
   Box,
@@ -74,6 +79,7 @@ export {
   ButtonGroup,
   CalloutBanner,
   default2 as CardSection,
+  Carousel,
   Checkbox,
   CheckboxGroup,
   ClearFieldButton,
@@ -105,6 +111,7 @@ export {
   ListBoxItem,
   default7 as LoadingSpinner,
   Menu,
+  MonthYearField,
   NumberField,
   Paragraph,
   PasswordField,
@@ -116,6 +123,7 @@ export {
   default8 as Section,
   default9 as SelectCard,
   SelectNative,
+  SkeletonLoader,
   Slider,
   Spacer,
   SubHeading,

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,5 +1,6 @@
 import './assets/global.css';/* empty css                */
 import { Accordion, AccordionGroup } from "./components/Accordion/Accordion.js";
+import { AviosCurrencyBadge } from "./components/AviosCurrencyBadge/AviosCurrencyBadge.js";
 import { AviosCurrency } from "./components/AviosCurrency/AviosCurrency.js";
 import { AviosBadge } from "./components/AviosBadge/AviosBadge.js";
 import { AviosCurrencySymbol } from "./components/AviosCurrencySymbol/AviosCurrencySymbol.js";
@@ -9,6 +10,7 @@ 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 { Carousel } from "./components/Carousel/Carousel.js";
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup.js";
 import { ClearFieldButton } from "./components/ClearFieldButton/ClearFieldButton.js";
@@ -40,6 +42,7 @@ import { ListBox } from "./components/ListBox/ListBox.js";
 import { ListBoxItem } from "./components/ListBoxItem/ListBoxItem.js";
 import { default as default7 } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { Menu } from "./components/Menu/Menu.js";
+import { MonthYearField } from "./components/MonthYearField/MonthYearField.js";
 import { NumberField } from "./components/NumberField/NumberField.js";
 import { Paragraph } from "./components/Paragraph/Paragraph.js";
 import { PhoneNumberField } from "./components/PhoneNumberField/PhoneNumberField.js";
@@ -51,6 +54,7 @@ import { SearchField } from "./components/SearchField/SearchField.js";
 import { default as default8 } from "./components/Section/Section.js";
 import { default as default9 } from "./components/SelectCard/SelectCard.js";
 import { SelectNative } from "./components/SelectNative/SelectNative.js";
+import { SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader.js";
 import { Slider } from "./components/Slider/Slider.js";
 import { Spacer } from "./components/Spacer/Spacer.js";
 import { SubHeading } from "./components/SubHeading/SubHeading.js";
@@ -67,6 +71,7 @@ export {
   AccordionGroup,
   AviosBadge,
   AviosCurrency,
+  AviosCurrencyBadge,
   AviosCurrencySymbol,
   Badge,
   Box,
@@ -74,6 +79,7 @@ export {
   ButtonGroup,
   CalloutBanner,
   default2 as CardSection,
+  Carousel,
   Checkbox,
   CheckboxGroup,
   ClearFieldButton,
@@ -105,6 +111,7 @@ export {
   ListBoxItem,
   default7 as LoadingSpinner,
   Menu,
+  MonthYearField,
   NumberField,
   Paragraph,
   PasswordField,
@@ -116,6 +123,7 @@ export {
   default8 as Section,
   default9 as SelectCard,
   SelectNative,
+  SkeletonLoader,
   Slider,
   Spacer,
   SubHeading,

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/{react-number-format.es-BjKL6crg.js → react-number-format.es-Dbc1db6s.js}

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useLayoutEffect, useMemo } from "react";
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useMemo } from "react";
 function __rest(s, e) {
   var t = {};
   for (var p in s) {
@@ -561,12 +561,12 @@ function NumberFormatBase(props) {
     onBlur: _onBlur
   });
   if (displayType === "text") {
-    return renderText ? React.createElement(React.Fragment, null, renderText(formattedValue, otherProps) || null) : React.createElement("span", Object.assign({}, otherProps, { ref: getInputRef }), formattedValue);
+    return renderText ? React__default.createElement(React__default.Fragment, null, renderText(formattedValue, otherProps) || null) : React__default.createElement("span", Object.assign({}, otherProps, { ref: getInputRef }), formattedValue);
   } else if (customInput) {
     var CustomInput = customInput;
-    return React.createElement(CustomInput, Object.assign({}, inputProps, { ref: getInputRef }));
+    return React__default.createElement(CustomInput, Object.assign({}, inputProps, { ref: getInputRef }));
   }
-  return React.createElement("input", Object.assign({}, inputProps, { ref: getInputRef }));
+  return React__default.createElement("input", Object.assign({}, inputProps, { ref: getInputRef }));
 }
 function format$1(numStr, props) {
   var format = props.format;
@@ -750,11 +750,11 @@ function usePatternFormat(props) {
 }
 function PatternFormat(props) {
   var patternFormatProps = usePatternFormat(props);
-  return React.createElement(NumberFormatBase, Object.assign({}, patternFormatProps));
+  return React__default.createElement(NumberFormatBase, Object.assign({}, patternFormatProps));
 }
 export {
   NumberFormatBase as N,
   PatternFormat as P,
   usePatternFormat as u
 };
-//# sourceMappingURL=react-number-format.es-BjKL6crg.js.map
+//# sourceMappingURL=react-number-format.es-Dbc1db6s.js.map

package/dist/{react-number-format.es-BjKL6crg.js.map → react-number-format.es-Dbc1db6s.js.map}

@@ -1 +1 @@
-{"version":3,"file":"react-number-format.es-BjKL6crg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react-number-format.es-Dbc1db6s.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "3.8.0",
+  "version": "4.0.0",
   "description": "A react component library for Alto Design System",
   "author": {
     "name": "Ian Caldwell IAGL",
@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "class-variance-authority": "^0.7.0",
+    "react-aria-carousel": "^0.2.0",
     "react-aria-components": "^1.5.0",
     "react-number-format": "^5.4.3",
     "ts-node": "^10.9.2",
@@ -91,6 +92,7 @@
     "prettier": "3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-loading-skeleton": "^3.5.0",
     "react-remove-attr": "^0.0.6",
     "rimraf": "^6.0.1",
     "standard-version": "^9.5.0",
@@ -106,7 +108,7 @@
     "wait-on": "^8.0.1"
   },
   "peerDependencies": {
-    "@alto-avios/alto-tokens": "^3.2.1",
+    "@alto-avios/alto-tokens": "^3.3.0",
     "react": "^18.0.0"
   },
   "main": "dist/index.js",