@alto-avios/alto-ui 2.0.0 → 2.2.0

package/dist/assets/ButtonGroup.css

@@ -0,0 +1 @@
+._buttonGroup_1tzc6_2{align-items:center;display:flex;flex-wrap:wrap;gap:var(--alto-sem-space-sm) var(--alto-sem-space-2xs)}._alignStart_1tzc6_11{justify-content:flex-start}._alignCenter_1tzc6_15{justify-content:center}._alignEnd_1tzc6_19{justify-content:flex-end}._alignJustify_1tzc6_23,._alignSplit_1tzc6_28{justify-content:space-between}._alignSplit_1tzc6_28>:first-child{margin-right:auto}._alignSplit_1tzc6_28>:not(:first-child){display:flex;justify-content:flex-end}._alignStack_1tzc6_41{align-items:stretch;flex-direction:column}._alignStackFlip_1tzc6_46{align-items:stretch;flex-direction:column-reverse}

package/dist/assets/DestinationHeading.css

@@ -0,0 +1 @@
+._destinationHeading_13li7_1{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--alto-sem-space-2xs)}

package/dist/assets/Heading.css

@@ -1 +1 @@
-._heading_14dsg_1{display:block;font-family:var(--alto-sem-text-heading-font-family);font-style:normal;font-weight:var(--alto-sem-text-heading-font-weight);margin:0}._xxs_14dsg_9{font-size:var(--alto-sem-text-heading-2xs-font-size);letter-spacing:var(--alto-sem-text-heading-2xs-letter-spacing);line-height:var(--alto-sem-text-heading-2xs-line-height)}._xs_14dsg_15{font-size:var(--alto-sem-text-heading-xs-font-size);letter-spacing:var(--alto-sem-text-heading-xs-letter-spacing);line-height:var(--alto-sem-text-heading-xs-line-height)}._sm_14dsg_21{font-size:var(--alto-sem-text-heading-sm-font-size);letter-spacing:var(--alto-sem-text-heading-sm-letter-spacing);line-height:var(--alto-sem-text-heading-sm-line-height)}._md_14dsg_27{font-size:var(--alto-sem-text-heading-md-font-size);letter-spacing:var(--alto-sem-text-heading-md-letter-spacing);line-height:var(--alto-sem-text-heading-md-line-height)}._lg_14dsg_33{font-size:var(--alto-sem-text-heading-lg-font-size);letter-spacing:var(--alto-sem-text-heading-lg-letter-spacing);line-height:var(--alto-sem-text-heading-lg-line-height)}._xl_14dsg_39{font-size:var(--alto-sem-text-heading-xl-font-size);letter-spacing:var(--alto-sem-text-heading-xl-letter-spacing);line-height:var(--alto-sem-text-heading-xl-line-height)}._start_14dsg_45{text-align:start}._center_14dsg_49{text-align:center}._end_14dsg_53{text-align:end}
+._heading_12ps7_1{display:block;font-family:var(--alto-sem-text-heading-font-family);font-style:normal;margin:0}._xxs_12ps7_8{font-size:var(--alto-sem-text-heading-2xs-font-size);font-weight:var(--alto-sem-text-heading-2xs-font-weight);letter-spacing:var(--alto-sem-text-heading-2xs-letter-spacing);line-height:var(--alto-sem-text-heading-2xs-line-height)}._xs_12ps7_15{font-size:var(--alto-sem-text-heading-xs-font-size);font-weight:var(--alto-sem-text-heading-xs-font-weight);letter-spacing:var(--alto-sem-text-heading-xs-letter-spacing);line-height:var(--alto-sem-text-heading-xs-line-height)}._sm_12ps7_22{font-size:var(--alto-sem-text-heading-sm-font-size);font-weight:var(--alto-sem-text-heading-sm-font-weight);letter-spacing:var(--alto-sem-text-heading-sm-letter-spacing);line-height:var(--alto-sem-text-heading-sm-line-height)}._md_12ps7_29{font-size:var(--alto-sem-text-heading-md-font-size);font-weight:var(--alto-sem-text-heading-md-font-weight);letter-spacing:var(--alto-sem-text-heading-md-letter-spacing);line-height:var(--alto-sem-text-heading-md-line-height)}._lg_12ps7_36{font-size:var(--alto-sem-text-heading-lg-font-size);font-weight:var(--alto-sem-text-heading-lg-font-weight);letter-spacing:var(--alto-sem-text-heading-lg-letter-spacing);line-height:var(--alto-sem-text-heading-lg-line-height)}._xl_12ps7_43{font-size:var(--alto-sem-text-heading-xl-font-size);font-weight:var(--alto-sem-text-heading-xl-font-weight);letter-spacing:var(--alto-sem-text-heading-xl-letter-spacing);line-height:var(--alto-sem-text-heading-xl-line-height)}._start_12ps7_50{text-align:start}._center_12ps7_54{text-align:center}._end_12ps7_58{text-align:end}

package/dist/assets/Paragraph.css

@@ -0,0 +1 @@
+._paragraph_odu3c_1{display:block;font-family:var(--alto-sem-text-body-font-family);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);margin:0}._xs_odu3c_9{font-size:var(--alto-sem-text-body-xs-font-size);letter-spacing:var(--alto-sem-text-body-xs-letter-spacing);line-height:var(--alto-sem-text-body-xs-line-height)}._sm_odu3c_15{font-size:var(--alto-sem-text-body-sm-font-size);letter-spacing:var(--alto-sem-text-body-sm-letter-spacing);line-height:var(--alto-sem-text-body-sm-line-height)}._md_odu3c_21{font-size:var(--alto-sem-text-body-md-font-size);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height)}._lg_odu3c_27{font-size:var(--alto-sem-text-body-lg-font-size);letter-spacing:var(--alto-sem-text-body-lg-letter-spacing);line-height:var(--alto-sem-text-body-lg-line-height)}._start_odu3c_33{text-align:start}._center_odu3c_37{text-align:center}._end_odu3c_41{text-align:end}

package/dist/assets/SubHeading.css

@@ -1 +1 @@
-._subHeading_1ngd2_1{display:block;font-family:var(--alto-sem-text-heading-font-family);font-style:normal;font-weight:var(--alto-sem-text-heading-font-weight);margin:0}._xs_1ngd2_9{font-size:var(--alto-sem-text-heading-xs-font-size);letter-spacing:var(--alto-sem-text-heading-xs-letter-spacing);line-height:var(--alto-sem-text-heading-xs-line-height)}._sm_1ngd2_15{font-size:var(--alto-sem-text-heading-sm-font-size);letter-spacing:var(--alto-sem-text-heading-sm-letter-spacing);line-height:var(--alto-sem-text-heading-sm-line-height)}._start_1ngd2_21{text-align:start}._center_1ngd2_25{text-align:center}._end_1ngd2_29{text-align:end}
+._subHeading_qng6l_1{display:block;font-family:var(--alto-sem-text-heading-font-family);font-style:normal;margin:0}._xs_qng6l_8{font-size:var(--alto-sem-text-heading-xs-font-size);font-weight:var(--alto-sem-text-heading-xs-font-weight);letter-spacing:var(--alto-sem-text-heading-xs-letter-spacing);line-height:var(--alto-sem-text-heading-xs-line-height)}._sm_qng6l_15{font-size:var(--alto-sem-text-heading-sm-font-size);font-weight:var(--alto-sem-text-heading-sm-font-weight);letter-spacing:var(--alto-sem-text-heading-sm-letter-spacing);line-height:var(--alto-sem-text-heading-sm-line-height)}._start_qng6l_22{text-align:start}._center_qng6l_26{text-align:center}._end_qng6l_30{text-align:end}

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface ButtonGroupProps {
+    /**
+     * The buttons to be displayed within the group (maximum of three).
+     */
+    children: ReactNode;
+    /**
+     * Determines how the buttons are arranged.
+     */
+    align?: 'start' | 'center' | 'end' | 'justify' | 'split' | 'stack' | 'stackFlip';
+}
+export declare const ButtonGroup: ({ children, align, }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import '../../assets/ButtonGroup.css';const buttonGroup = "_buttonGroup_1tzc6_2";
+const alignStart = "_alignStart_1tzc6_11";
+const alignCenter = "_alignCenter_1tzc6_15";
+const alignEnd = "_alignEnd_1tzc6_19";
+const alignJustify = "_alignJustify_1tzc6_23";
+const alignSplit = "_alignSplit_1tzc6_28";
+const alignStack = "_alignStack_1tzc6_41";
+const alignStackFlip = "_alignStackFlip_1tzc6_46";
+const styles = {
+  buttonGroup,
+  alignStart,
+  alignCenter,
+  alignEnd,
+  alignJustify,
+  alignSplit,
+  alignStack,
+  alignStackFlip
+};
+const buttonGroupStyles = cva(styles.buttonGroup, {
+  variants: {
+    align: {
+      start: styles.alignStart,
+      center: styles.alignCenter,
+      end: styles.alignEnd,
+      justify: styles.alignJustify,
+      split: styles.alignSplit,
+      stack: styles.alignStack,
+      stackFlip: styles.alignStackFlip
+    }
+  },
+  defaultVariants: {
+    align: "start"
+  }
+});
+const ButtonGroup = ({
+  children,
+  align = "start"
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `${buttonGroupStyles({
+    align
+  })}`, role: "group", "aria-label": "Button Group", children: React.Children.map(children, (child) => child) });
+};
+export {
+  ButtonGroup,
+  ButtonGroup as default
+};
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/components/ButtonGroup/ButtonGroup.js.map

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

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

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

package/dist/components/ButtonGroup/index.js

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

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

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

package/dist/components/DestinationHeading/DestinationHeading.d.ts

@@ -0,0 +1,12 @@
+import { HeadingProps } from '../Heading/Heading';
+export interface DestinationHeadingProps extends Omit<HeadingProps, "children"> {
+    from: string;
+    to: string;
+    /**
+     * Custom a11y label for the arrow icon between destinations.
+     * @default "to"
+     */
+    iconLabel?: string;
+}
+export declare const DestinationHeading: ({ from, to, iconLabel, ...props }: DestinationHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export default DestinationHeading;

package/dist/components/DestinationHeading/DestinationHeading.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "../Heading/Heading.js";
+import { Icon } from "../Icon/Icon.js";
+import '../../assets/DestinationHeading.css';const destinationHeading = "_destinationHeading_13li7_1";
+const styles = {
+  destinationHeading
+};
+const DestinationHeading = ({
+  from,
+  to,
+  iconLabel = "to",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Heading, { ...props, children: /* @__PURE__ */ jsxs("span", { className: styles.destinationHeading, children: [
+    from,
+    /* @__PURE__ */ jsx(Icon, { iconName: "arrow-right", iconPrefix: "fas", ariaLabel: iconLabel }),
+    " ",
+    to
+  ] }) });
+};
+export {
+  DestinationHeading,
+  DestinationHeading as default
+};
+//# sourceMappingURL=DestinationHeading.js.map

package/dist/components/DestinationHeading/DestinationHeading.js.map

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

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

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

package/dist/components/DestinationHeading/index.js

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

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

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

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

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import { fgColorVariants } from '../../utils/fgColour/fgColor';
 declare const heading: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | "xxs" | "xl" | null | undefined;
-    textAlign?: "center" | "start" | "end" | null | undefined;
+    textAlign?: "start" | "center" | "end" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HeadingVariants = VariantProps<typeof heading>;
 type FgColorVariants = VariantProps<typeof fgColorVariants>;

package/dist/components/Heading/Heading.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { fgColorVariants } from "../../utils/fgColour/fgColor.js";
-import '../../assets/Heading.css';const heading$1 = "_heading_14dsg_1";
-const xxs = "_xxs_14dsg_9";
-const xs = "_xs_14dsg_15";
-const sm = "_sm_14dsg_21";
-const md = "_md_14dsg_27";
-const lg = "_lg_14dsg_33";
-const xl = "_xl_14dsg_39";
-const start = "_start_14dsg_45";
-const center = "_center_14dsg_49";
-const end = "_end_14dsg_53";
+import '../../assets/Heading.css';const heading$1 = "_heading_12ps7_1";
+const xxs = "_xxs_12ps7_8";
+const xs = "_xs_12ps7_15";
+const sm = "_sm_12ps7_22";
+const md = "_md_12ps7_29";
+const lg = "_lg_12ps7_36";
+const xl = "_xl_12ps7_43";
+const start = "_start_12ps7_50";
+const center = "_center_12ps7_54";
+const end = "_end_12ps7_58";
 const styles = {
   heading: heading$1,
   xxs,

package/dist/components/Paragraph/Paragraph.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { fgColorVariants } from '../../utils/fgColour/fgColor';
+declare const paragraph: (props?: ({
+    size?: "lg" | "sm" | "xs" | "md" | null | undefined;
+    textAlign?: "start" | "center" | "end" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ParagraphVariants = VariantProps<typeof paragraph>;
+type FgColorVariants = VariantProps<typeof fgColorVariants>;
+type ParagraphSize = "xs" | "sm" | "md" | "lg";
+export interface ParagraphProps extends ParagraphVariants {
+    children: React.ReactNode;
+    /**
+     * The size of the paragraph
+     * @default "md"
+     */
+    size?: ParagraphSize;
+    /**
+     * The foreground color of the paragraph
+     * @default "secondary"
+     */
+    fgColor?: FgColorVariants["fgColor"];
+    /**
+     * The text alignment of the paragraph
+     * @default "start"
+     */
+    textAlign?: "start" | "center" | "end";
+}
+export declare const Paragraph: ({ children, size, fgColor, textAlign, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export default Paragraph;

package/dist/components/Paragraph/Paragraph.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { fgColorVariants } from "../../utils/fgColour/fgColor.js";
+import '../../assets/Paragraph.css';const paragraph$1 = "_paragraph_odu3c_1";
+const xs = "_xs_odu3c_9";
+const sm = "_sm_odu3c_15";
+const md = "_md_odu3c_21";
+const lg = "_lg_odu3c_27";
+const start = "_start_odu3c_33";
+const center = "_center_odu3c_37";
+const end = "_end_odu3c_41";
+const styles = {
+  paragraph: paragraph$1,
+  xs,
+  sm,
+  md,
+  lg,
+  start,
+  center,
+  end
+};
+const paragraph = cva(styles.paragraph, {
+  variants: {
+    size: {
+      xs: styles.xs,
+      sm: styles.sm,
+      md: styles.md,
+      lg: styles.lg
+    },
+    textAlign: {
+      start: styles.start,
+      center: styles.center,
+      end: styles.end
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    textAlign: "start"
+  }
+});
+const Paragraph = ({
+  children,
+  size = "md",
+  fgColor = "secondary",
+  textAlign = "start",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("p", { className: `${paragraph({
+    size,
+    textAlign
+  })} ${fgColorVariants({
+    fgColor
+  })}`, ...props, children });
+};
+export {
+  Paragraph,
+  Paragraph as default
+};
+//# sourceMappingURL=Paragraph.js.map

package/dist/components/Paragraph/Paragraph.js.map

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

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

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

package/dist/components/Paragraph/index.js

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

package/dist/components/Paragraph/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 { fgColorVariants } from '../../utils/fgColour/fgColor';
 declare const subHeading: (props?: ({
     size?: "sm" | "xs" | null | undefined;
-    textAlign?: "center" | "start" | "end" | null | undefined;
+    textAlign?: "start" | "center" | "end" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HeadingVariants = VariantProps<typeof subHeading>;
 type FgColorVariants = VariantProps<typeof fgColorVariants>;

package/dist/components/SubHeading/SubHeading.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { fgColorVariants } from "../../utils/fgColour/fgColor.js";
-import '../../assets/SubHeading.css';const subHeading$1 = "_subHeading_1ngd2_1";
-const xs = "_xs_1ngd2_9";
-const sm = "_sm_1ngd2_15";
-const start = "_start_1ngd2_21";
-const center = "_center_1ngd2_25";
-const end = "_end_1ngd2_29";
+import '../../assets/SubHeading.css';const subHeading$1 = "_subHeading_qng6l_1";
+const xs = "_xs_qng6l_8";
+const sm = "_sm_qng6l_15";
+const start = "_start_qng6l_22";
+const center = "_center_qng6l_26";
+const end = "_end_qng6l_30";
 const styles = {
   subHeading: subHeading$1,
   xs,

package/dist/components/index.d.ts

@@ -1,8 +1,10 @@
 export { default as Badge } from './Badge';
 export { default as Button } from './Button';
+export { default as ButtonGroup } from './ButtonGroup';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as DateField } from './DateField';
+export { default as DestinationHeading } from './DestinationHeading';
 export { default as Eyebrow } from './Eyebrow';
 export { default as FieldDescription } from './FieldDescription';
 export { default as FieldError } from './FieldError';

package/dist/components/index.js

@@ -1,9 +1,11 @@
 import '../assets/global.css';/* empty css                 */
 import { Badge } from "./Badge/Badge.js";
 import { Button } from "./Button/Button.js";
+import { ButtonGroup } from "./ButtonGroup/ButtonGroup.js";
 import { Checkbox } from "./Checkbox/Checkbox.js";
 import { CheckboxGroup } from "./CheckboxGroup/CheckboxGroup.js";
 import { DateField } from "./DateField/DateField.js";
+import { DestinationHeading } from "./DestinationHeading/DestinationHeading.js";
 import { Eyebrow } from "./Eyebrow/Eyebrow.js";
 import { default as default2 } from "./FieldDescription/FieldDescription.js";
 import { FieldError } from "./FieldError/FieldError.js";
@@ -28,9 +30,11 @@ import { Tooltip } from "./Tooltip/Tooltip.js";
 export {
   Badge,
   Button,
+  ButtonGroup,
   Checkbox,
   CheckboxGroup,
   DateField,
+  DestinationHeading,
   Eyebrow,
   default2 as FieldDescription,
   FieldError,

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,11 @@
 import './assets/global.css';/* empty css                */
 import { Badge } from "./components/Badge/Badge.js";
 import { Button } from "./components/Button/Button.js";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup.js";
 import { DateField } from "./components/DateField/DateField.js";
+import { DestinationHeading } from "./components/DestinationHeading/DestinationHeading.js";
 import { Eyebrow } from "./components/Eyebrow/Eyebrow.js";
 import { default as default2 } from "./components/FieldDescription/FieldDescription.js";
 import { FieldError } from "./components/FieldError/FieldError.js";
@@ -28,9 +30,11 @@ import { Tooltip } from "./components/Tooltip/Tooltip.js";
 export {
   Badge,
   Button,
+  ButtonGroup,
   Checkbox,
   CheckboxGroup,
   DateField,
+  DestinationHeading,
   Eyebrow,
   default2 as FieldDescription,
   FieldError,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A react component library for Alto Design System",
   "author": "Ian Caldwell IAGL",
   "license": "MIT",
@@ -62,7 +62,7 @@
     "vite-plugin-lib-inject-css": "^2.1.1"
   },
   "peerDependencies": {
-    "@alto-avios/alto-tokens": "^2.1.0",
+    "@alto-avios/alto-tokens": "^2.2.0",
     "react": "^18.0.0"
   },
   "main": "dist/index.js",