@alto-avios/alto-ui 2.1.0 → 2.3.0

package/dist/assets/CardSection.css

@@ -0,0 +1 @@
+._cardSection_1llfd_1{align-items:center;background:var(--alto-sem-color-bg-layer1-default);box-sizing:border-box;display:flex;flex-direction:column;padding:var(--alto-section-padding-vertical-default) var(--alto-section-margin-horizontal-default);width:100vw}._cardContainer_1llfd_11{align-self:stretch;background:var(--alto-sem-color-bg-layer2-default);border-radius:var(--alto-card-radius);display:flex;flex-direction:column;justify-content:flex-end;margin:auto;max-width:var(--alto-section-container-max-width);width:100%}._cardGrid_1llfd_23{-moz-column-gap:var(--alto-grid-gutter-default);column-gap:var(--alto-grid-gutter-default);display:grid;grid-template-areas:"content" "media";grid-template-columns:repeat(12,[col-start] 1fr)}._contentCell_1llfd_33{display:grid;grid-area:content;grid-column:col-start/span 12;padding:var(--alto-sem-space-2xl) 0}._contentBox_1llfd_40{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--alto-sem-space-lg);margin:auto;max-width:628px;padding:0 var(--alto-section-margin-horizontal-default)}._mediaCell_1llfd_51{display:grid;grid-area:media;grid-column:col-start/span 12;margin:0}._mediaCell_1llfd_51 img{border-radius:var(--alto-card-radius);height:100%;-o-object-fit:cover;object-fit:cover;width:100%}._isReversed_1llfd_65 ._cardGrid_1llfd_23{grid-template-areas:"media" "content"}@media screen and (min-width:768px){._contentCell_1llfd_33{grid-column:2/11;padding:var(--alto-sem-space-3xl) 0}._contentBox_1llfd_40{padding:0}}@media screen and (min-width:1024px){._cardContainer_1llfd_11{align-items:flex-end;flex-direction:row;gap:var(--alto-grid-gutter-default);max-width:var(--alto-section-container-max-width)}._cardGrid_1llfd_23{grid-template-areas:"content media"}._contentCell_1llfd_33{grid-column:2/span 5;padding:var(--alto-sem-space-2xl) 0}._mediaCell_1llfd_51{grid-column:8/span 5}._isReversed_1llfd_65 ._cardGrid_1llfd_23{grid-template-areas:"media content"}._isReversed_1llfd_65 ._contentCell_1llfd_33{grid-column:7/span 5}._isReversed_1llfd_65 ._mediaCell_1llfd_51{grid-column:1/span 5}}

package/dist/assets/Grid.css

@@ -0,0 +1 @@
+._grid_f3f0m_1{box-sizing:border-box;width:100%}._gridItem_f3f0m_6{min-height:0;min-width:0}

package/dist/assets/Radio.css

@@ -1 +1 @@
-._radio_1csym_1{align-items:center;color:var(--alto-sem-color-fg-primary);cursor:pointer;display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);forced-color-adjust:none;gap:var(--alto-sem-space-sm);justify-content:flex-start;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);min-height:48px}._radio_1csym_1:before{background-color:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-circle);box-sizing:border-box;content:"";display:block;height:1.5rem;transition:all .2s;width:1.5rem}._radio_1csym_1[data-hovered]:before{border-color:var(--alto-sem-color-border-primary-hover)}._radio_1csym_1[data-focus-visible]:before{outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md);transition:none}._defaultFocus_1csym_41[data-focus-visible]:before{outline-color:var(--alto-sem-color-border-accent)}._whiteFocus_1csym_45[data-focus-visible]:before{outline-color:var(--alto-sem-color-border-white)}._radio_1csym_1[data-pressed]:before{border-color:var(--alto-sem-color-border-primary-active)}._radio_1csym_1[data-selected]:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-accent-vibrant-default);border-width:.5rem}._radio_1csym_1[data-selected][data-hovered]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._radio_1csym_1[data-selected][data-focused]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._radio_1csym_1[data-selected][data-focus-visible]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._radio_1csym_1[data-selected][data-pressed]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._radio_1csym_1[data-invalid]:before{background:var(--alto-sem-color-bg-critical-subtle-default);border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical);border-radius:var(--alto-sem-radius-circle)}._radio_1csym_1[data-invalid][data-hovered]:before{background-color:var(--alto-sem-color-bg-tertiary-hover);border-color:var(--alto-sem-color-border-critical)}._radio_1csym_1[data-invalid][data-focused]:before{border-color:var(--alto-sem-color-border-critical)}._radio_1csym_1[data-invalid][data-focus-visible]:before,._radio_1csym_1[data-invalid][data-pressed]:before{background-color:var(--alto-sem-color-bg-tertiary-active);border-color:var(--alto-sem-color-border-critical)}._radio_1csym_1[data-invalid][data-selected]:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-critical-vibrant-default);border-width:.5rem}._radio_1csym_1[data-disabled]{color:var(--alto-sem-color-fg-disabled-primary);cursor:default;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height)}._radio_1csym_1[data-disabled]:before{background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);border-radius:var(--alto-sem-radius-circle)}._radio_1csym_1[data-disabled][data-selected]:before{border-width:.5rem}
+._radio_1qy5u_1{align-items:center;color:var(--alto-sem-color-fg-primary);cursor:pointer;display:flex;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);forced-color-adjust:none;gap:var(--alto-sem-space-sm);justify-content:flex-start;letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);min-height:48px}._radio_1qy5u_1:before{background-color:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-primary-default);border-radius:var(--alto-sem-radius-circle);box-sizing:border-box;content:"";display:block;height:1.5rem;transition:all .2s;width:1.5rem}._radio_1qy5u_1[data-hovered]:before{border-color:var(--alto-sem-color-border-primary-hover)}._radio_1qy5u_1[data-focus-visible]:before{outline-offset:var(--alto-sem-border-width-md);outline-style:solid;outline-width:var(--alto-sem-border-width-md);transition:none}._defaultFocus_1qy5u_41[data-focus-visible]:before{outline-color:var(--alto-sem-color-border-accent)}._whiteFocus_1qy5u_45[data-focus-visible]:before{outline-color:var(--alto-sem-color-border-white)}._radio_1qy5u_1[data-pressed]:before{border-color:var(--alto-sem-color-border-primary-active)}._radio_1qy5u_1[data-selected]:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-accent-vibrant-default);border-width:.5rem;box-shadow:0 0 0 1px var(--alto-sem-color-border-white)}._radio_1qy5u_1[data-selected][data-hovered]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._radio_1qy5u_1[data-selected][data-focused]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._radio_1qy5u_1[data-selected][data-focus-visible]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-hover)}._radio_1qy5u_1[data-selected][data-pressed]:before{border-color:var(--alto-sem-color-bg-accent-vibrant-active)}._radio_1qy5u_1[data-invalid]:before{background:var(--alto-sem-color-bg-critical-subtle-default);border:var(--alto-sem-border-width-md) solid var(--alto-sem-color-border-critical);border-radius:var(--alto-sem-radius-circle)}._radio_1qy5u_1[data-invalid][data-hovered]:before{background-color:var(--alto-sem-color-bg-tertiary-hover);border-color:var(--alto-sem-color-border-critical)}._radio_1qy5u_1[data-invalid][data-focused]:before{border-color:var(--alto-sem-color-border-critical)}._radio_1qy5u_1[data-invalid][data-focus-visible]:before,._radio_1qy5u_1[data-invalid][data-pressed]:before{background-color:var(--alto-sem-color-bg-tertiary-active);border-color:var(--alto-sem-color-border-critical)}._radio_1qy5u_1[data-invalid][data-selected]:before{background-color:var(--alto-sem-color-fg-critical-on-vibrant);border-color:var(--alto-sem-color-bg-critical-vibrant-default);border-width:.5rem}._radio_1qy5u_1[data-disabled]{color:var(--alto-sem-color-fg-disabled-primary);cursor:default;font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-style:normal;font-weight:var(--alto-sem-text-body-regular-font-weight);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height)}._radio_1qy5u_1[data-disabled]:before{background:var(--alto-sem-color-bg-disabled-subtle);border:1px solid var(--alto-sem-color-border-disabled-subtle);border-radius:var(--alto-sem-radius-circle)}._radio_1qy5u_1[data-disabled][data-selected]:before{border-width:.5rem}

package/dist/assets/backgroundColour.css

@@ -0,0 +1 @@
+._backgroundColour-transparent_jawk2_1{background-color:transparent}._backgroundColour-base_jawk2_5{background-color:var(--alto-sem-color-bg-base)}._backgroundColour-layer1_jawk2_9{background-color:var(--alto-sem-color-bg-layer1-default)}._backgroundColour-layer2_jawk2_13{background-color:var(--alto-sem-color-bg-layer2-default)}._backgroundColour-layer3_jawk2_17{background-color:var(--alto-sem-color-bg-layer3-default)}._backgroundColour-accent-vibrant_jawk2_21{background-color:var(--alto-sem-color-bg-accent-vibrant-default)}._backgroundColour-accent-subtle_jawk2_25{background-color:var(--alto-sem-color-bg-accent-subtle-default)}._backgroundColour-accent-deep_jawk2_29{background-color:var(--alto-sem-color-bg-accent-deep-default)}._backgroundColour-critical-vibrant_jawk2_33{background-color:var(--alto-sem-color-bg-critical-vibrant-default)}._backgroundColour-critical-subtle_jawk2_37{background-color:var(--alto-sem-color-bg-critical-subtle-default)}._backgroundColour-warning-vibrant_jawk2_41{background-color:var(--alto-sem-color-bg-warning-vibrant-default)}._backgroundColour-warning-subtle_jawk2_45{background-color:var(--alto-sem-color-bg-warning-subtle-default)}._backgroundColour-caution-vibrant_jawk2_49{background-color:var(--alto-sem-color-bg-caution-vibrant-default)}._backgroundColour-caution-subtle_jawk2_53{background-color:var(--alto-sem-color-bg-caution-subtle-default)}._backgroundColour-success-vibrant_jawk2_57{background-color:var(--alto-sem-color-bg-success-vibrant-default)}._backgroundColour-success-subtle_jawk2_61{background-color:var(--alto-sem-color-bg-success-subtle-default)}._backgroundColour-information-vibrant_jawk2_65{background-color:var(--alto-sem-color-bg-information-vibrant-default)}._backgroundColour-information-subtle_jawk2_69{background-color:var(--alto-sem-color-bg-information-subtle-default)}._backgroundColour-inverse-vibrant_jawk2_73{background-color:var(--alto-sem-color-bg-inverse-vibrant-default)}._backgroundColour-inverse-subtle_jawk2_77{background-color:var(--alto-sem-color-bg-inverse-subtle-default)}._backgroundColour-white-vibrant_jawk2_81{background-color:var(--alto-sem-color-bg-white-vibrant-default)}._backgroundColour-white-subtle_jawk2_85{background-color:var(--alto-sem-color-bg-white-subtle-default)}._backgroundColour-disabled-vibrant_jawk2_89{background-color:var(--alto-sem-color-bg-disabled-vibrant)}._backgroundColour-disabled-subtle_jawk2_93{background-color:var(--alto-sem-color-bg-disabled-subtle)}._backgroundColour-sale-vibrant_jawk2_97{background-color:var(--alto-sem-color-bg-sale-vibrant-default)}

package/dist/assets/border.css

@@ -0,0 +1 @@
+._borderRadiusNone_1ka0b_1{border-radius:var(--alto-sem-radius-none)}._borderRadius6xs_1ka0b_5{border-radius:var(--alto-sem-radius-6xs)}._borderRadius5xs_1ka0b_9{border-radius:var(--alto-sem-radius-5xs)}._borderRadius4xs_1ka0b_13{border-radius:var(--alto-sem-radius-4xs)}._borderRadius3xs_1ka0b_17{border-radius:var(--alto-sem-radius-3xs)}._borderRadius2xs_1ka0b_21{border-radius:var(--alto-sem-radius-2xs)}._borderRadiusXs_1ka0b_25{border-radius:var(--alto-sem-radius-xs)}._borderRadiusSm_1ka0b_29{border-radius:var(--alto-sem-radius-sm)}._borderRadiusMd_1ka0b_33{border-radius:var(--alto-sem-radius-md)}._borderRadiusLg_1ka0b_37{border-radius:var(--alto-sem-radius-lg)}._borderRadiusXl_1ka0b_41{border-radius:var(--alto-sem-radius-xl)}._borderRadiusCircle_1ka0b_45{border-radius:var(--alto-sem-radius-circle)}._borderWidthNone_1ka0b_49{border-width:var(--alto-sem-border-width-none)}._borderWidthXs_1ka0b_53{border-width:var(--alto-sem-border-width-xs)}._borderWidthSm_1ka0b_57{border-width:var(--alto-sem-border-width-sm)}._borderWidthMd_1ka0b_61{border-width:var(--alto-sem-border-width-md)}._borderWidthLg_1ka0b_65{border-width:var(--alto-sem-border-width-lg)}._borderWidthXl_1ka0b_69{border-width:var(--alto-sem-border-width-xl)}._borderStyleNone_1ka0b_73{border-style:none}._borderStyleSolid_1ka0b_77{border-style:solid}._borderStyleDashed_1ka0b_81{border-style:dashed}._borderColourNone_1ka0b_85{border-color:transparent}._borderColourSecondary_1ka0b_89{border-color:var(--alto-sem-color-border-secondary)}._borderColourTertiary_1ka0b_93{border-color:var(--alto-sem-color-border-tertiary)}._borderColourAccent_1ka0b_97{border-color:var(--alto-sem-color-border-accent)}._borderColourCaution_1ka0b_101{border-color:var(--alto-sem-color-border-caution)}._borderColourCritical_1ka0b_105{border-color:var(--alto-sem-color-border-critical)}._borderColourInformation_1ka0b_109{border-color:var(--alto-sem-color-border-information)}._borderColourInverse_1ka0b_113{border-color:var(--alto-sem-color-border-inverse)}._borderColourSuccess_1ka0b_117{border-color:var(--alto-sem-color-border-success)}._borderColourWarning_1ka0b_121{border-color:var(--alto-sem-color-border-warning)}._borderColourWhite_1ka0b_125{border-color:var(--alto-sem-color-border-white)}

package/dist/assets/flex.css

@@ -0,0 +1 @@
+._flex_1ug5y_1{display:flex}._flexInline_1ug5y_5{display:inline-flex}._flexJustifyContentStart_1ug5y_9{justify-content:flex-start}._flexJustifyContentCenter_1ug5y_13{justify-content:center}._flexJustifyContentEnd_1ug5y_17{justify-content:flex-end}._flexWrapWrap_1ug5y_21{flex-wrap:wrap}._flexWrapNowrap_1ug5y_25{flex-wrap:nowrap}._flexGrow1_1ug5y_29{flex-grow:1}._flexGrow0_1ug5y_33{flex-grow:0}._flexShrink1_1ug5y_37{flex-shrink:1}._flexShrink0_1ug5y_41{flex-shrink:0}._flexDirectionRow_1ug5y_45{flex-direction:row}._flexDirectionRowReverse_1ug5y_49{flex-direction:row-reverse}._flexDirectionColumn_1ug5y_53{flex-direction:column}._flexDirectionColumnReverse_1ug5y_57{flex-direction:column-reverse}._flexAlignItemsStart_1ug5y_61{align-items:flex-start}._flexAlignItemsCenter_1ug5y_65{align-items:center}._flexAlignItemsEnd_1ug5y_69{align-items:flex-end}._flexGap5xs_1ug5y_73{gap:var(--alto-sem-space-5xs)}._flexGap4xs_1ug5y_77{gap:var(--alto-sem-space-4xs)}._flexGap3xs_1ug5y_81{gap:var(--alto-sem-space-3xs)}._flexGap2xs_1ug5y_85{gap:var(--alto-sem-space-2xs)}._flexGapXs_1ug5y_89{gap:var(--alto-sem-space-xs)}._flexGapSm_1ug5y_93{gap:var(--alto-sem-space-sm)}._flexGapMd_1ug5y_97{gap:var(--alto-sem-space-md)}._flexGapLg_1ug5y_101{gap:var(--alto-sem-space-lg)}._flexGapXl_1ug5y_105{gap:var(--alto-sem-space-xl)}._flexGap2xl_1ug5y_109{gap:var(--alto-sem-space-2xl)}._flexGap3xl_1ug5y_113{gap:var(--alto-sem-space-3xl)}._flexGap4xl_1ug5y_117{gap:var(--alto-sem-space-4xl)}._flexGap5xl_1ug5y_121{gap:var(--alto-sem-space-5xl)}._flexGap6xl_1ug5y_125{gap:var(--alto-sem-space-6xl)}

package/dist/assets/padding.css

@@ -0,0 +1 @@
+._paddingLg_bawps_1{padding:var(--alto-sem-space-lg)}._paddingMd_bawps_5{padding:var(--alto-sem-space-md)}._paddingSm_bawps_9{padding:var(--alto-sem-space-sm)}._paddingX-lg_bawps_13{padding-left:var(--alto-sem-space-lg);padding-right:var(--alto-sem-space-lg)}._paddingX-md_bawps_18{padding-left:var(--alto-sem-space-md);padding-right:var(--alto-sem-space-md)}._paddingX-sm_bawps_23{padding-left:var(--alto-sem-space-sm);padding-right:var(--alto-sem-space-sm)}._paddingY-lg_bawps_28{padding-bottom:var(--alto-sem-space-lg);padding-top:var(--alto-sem-space-lg)}._paddingY-md_bawps_33{padding-bottom:var(--alto-sem-space-md);padding-top:var(--alto-sem-space-md)}._paddingY-sm_bawps_38{padding-bottom:var(--alto-sem-space-sm);padding-top:var(--alto-sem-space-sm)}._paddingTopLg_bawps_43{padding-top:var(--alto-sem-space-lg)}._paddingTopMd_bawps_47{padding-top:var(--alto-sem-space-md)}._paddingTopSm_bawps_51{padding-top:var(--alto-sem-space-sm)}._paddingRightLg_bawps_55{padding-right:var(--alto-sem-space-lg)}._paddingRightMd_bawps_59{padding-right:var(--alto-sem-space-md)}._paddingRightSm_bawps_63{padding-right:var(--alto-sem-space-sm)}._paddingBottomLg_bawps_67{padding-bottom:var(--alto-sem-space-lg)}._paddingBottomMd_bawps_71{padding-bottom:var(--alto-sem-space-md)}._paddingBottomSm_bawps_75{padding-bottom:var(--alto-sem-space-sm)}._paddingLeftLg_bawps_79{padding-left:var(--alto-sem-space-lg)}._paddingLeftMd_bawps_83{padding-left:var(--alto-sem-space-md)}._paddingLeftSm_bawps_87{padding-left:var(--alto-sem-space-sm)}

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
+import { FlexVariants } from '../../utils/flex/flex';
+import { BorderVariants } from '../../utils/border/border';
+import { PaddingVariants } from '../../utils/padding/padding';
+export interface BoxProps extends BackgroundVariants, FlexVariants, BorderVariants, PaddingVariants {
+    children: React.ReactNode;
+    /**
+     * The HTML element to render the Box as.
+     */
+    as?: "div" | "article";
+    /**
+     * The width of the Box.
+     * Accepts any valid CSS unit or "full"
+     */
+    width?: "full" | string;
+    /**
+     * The maximum width of the Box.
+     * Accepts any valid CSS unit.
+     */
+    maxWidth?: string;
+    /**
+     * The minimum width of the Box.
+     * Accepts any valid CSS unit.
+     */
+    minWidth?: string;
+}
+export declare const Box: ({ children, as: Component, width, maxWidth, minWidth, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export default Box;

package/dist/components/Box/Box.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { backgroundColorVariants } from "../../utils/backgroundColour/backgroundColour.js";
+import { flexVariants } from "../../utils/flex/flex.js";
+import { borderVariants } from "../../utils/border/border.js";
+import { paddingVariants } from "../../utils/padding/padding.js";
+const Box = ({
+  children,
+  as: Component = "div",
+  width,
+  maxWidth,
+  minWidth,
+  ...props
+}) => {
+  const borderWidth = !(props == null ? void 0 : props.borderWidth) && props.borderColour !== "none" ? "sm" : props.borderWidth;
+  const styles = {
+    width: width === "full" ? "100%" : width,
+    maxWidth,
+    minWidth
+  };
+  return /* @__PURE__ */ jsx(Component, { className: `${borderVariants({
+    ...props,
+    borderWidth
+  })} ${flexVariants({
+    ...props
+  })} ${paddingVariants({
+    ...props
+  })} ${backgroundColorVariants({
+    ...props
+  })}`, style: styles, children });
+};
+export {
+  Box,
+  Box as default
+};
+//# sourceMappingURL=Box.js.map

package/dist/components/Box/Box.js.map

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

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

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

package/dist/components/Box/index.js

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

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

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

package/dist/components/CardSection/CardSection.d.ts

@@ -0,0 +1,23 @@
+export interface CardSectionProps {
+    /**
+     * Decides whether the card section should be reversed
+     * @default false
+     */
+    isReversed?: boolean;
+    /**
+     * The content of the card section
+     */
+    children: React.ReactNode;
+}
+interface CardSectionComponent extends React.ForwardRefExoticComponent<CardSectionProps & React.RefAttributes<HTMLElement>> {
+    Content: typeof Content;
+    Media: typeof Media;
+}
+declare const CardSection: CardSectionComponent;
+declare const Content: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const Media: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardSection;

package/dist/components/CardSection/CardSection.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { forwardRef } from "react";
+import '../../assets/CardSection.css';const cardSection$1 = "_cardSection_1llfd_1";
+const cardContainer = "_cardContainer_1llfd_11";
+const cardGrid = "_cardGrid_1llfd_23";
+const contentCell = "_contentCell_1llfd_33";
+const contentBox = "_contentBox_1llfd_40";
+const mediaCell = "_mediaCell_1llfd_51";
+const isReversed = "_isReversed_1llfd_65";
+const styles = {
+  cardSection: cardSection$1,
+  cardContainer,
+  cardGrid,
+  contentCell,
+  contentBox,
+  mediaCell,
+  isReversed
+};
+const cardSection = cva(styles.cardSection, {
+  variants: {
+    isReversed: {
+      true: styles.isReversed
+    }
+  },
+  defaultVariants: {}
+});
+const CardSection = forwardRef(({
+  isReversed: isReversed2 = false,
+  children
+}, ref) => /* @__PURE__ */ jsx("section", { ref, className: cardSection({
+  isReversed: isReversed2
+}), children: /* @__PURE__ */ jsx("div", { className: styles.cardContainer, children: /* @__PURE__ */ jsx("div", { className: styles.cardGrid, children }) }) }));
+CardSection.displayName = "CardSection";
+const Content = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { className: styles.contentCell, children: /* @__PURE__ */ jsx("article", { className: styles.contentBox, children }) });
+const Media = ({
+  children
+}) => /* @__PURE__ */ jsx("figure", { className: styles.mediaCell, children });
+CardSection.Content = Content;
+CardSection.Media = Media;
+export {
+  CardSection as default
+};
+//# sourceMappingURL=CardSection.js.map

package/dist/components/CardSection/CardSection.js.map

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

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

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

package/dist/components/CardSection/index.js

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

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

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

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

@@ -0,0 +1,113 @@
+import { default as React } from 'react';
+type SpaceToken = 'default' | '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+type AutoFlowValue = 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+type AlignContentValue = 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
+export interface GridCellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Number of columns this cell should span
+     */
+    colSpan?: number;
+    /**
+     * Number of rows this cell should span
+     */
+    rowSpan?: number;
+    /**
+     * The starting column for this cell
+     */
+    colStart?: number;
+    /**
+     * The starting row for this cell
+     */
+    rowStart?: number;
+    /**
+     * The ending column for this cell
+     */
+    colEnd?: number;
+    /**
+     * The ending row for this cell
+     */
+    rowEnd?: number;
+    /**
+     * The content of the grid cell
+     */
+    children: React.ReactNode;
+    /**
+     * @internal
+     * Additional CSS properties to apply to the grid cell
+     */
+    style?: React.CSSProperties;
+}
+export declare const GridCell: ({ colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, children, style, ...rest }: GridCellProps) => import("react/jsx-runtime").JSX.Element;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Optional unique identifier for the grid
+     */
+    id?: string;
+    /**
+     * Sets the display to inline-grid if true, and grid if false
+     * @default false
+     */
+    isInline?: boolean;
+    /**
+     * Controls the vertical alignment of the content within the grid
+     */
+    alignContent?: AlignContentValue;
+    /**
+     * Determines how columns are automatically created in the grid
+     * e.g., "minmax(100px, 1fr)" or "200px"
+     */
+    autoColumns?: string;
+    /**
+     * Sets the flow direction and behavior of the grid's auto-placement
+     */
+    autoFlow?: AutoFlowValue;
+    /**
+     * Number of columns to create (generates equal-width columns)
+     * Takes precedence over templateColumns if both are provided
+     */
+    columns?: number;
+    /**
+     * Number of rows to create (generates equal-height rows)
+     * Takes precedence over templateRows if both are provided
+     */
+    rows?: number;
+    /**
+     * Defines the columns of the grid using CSS grid-template-columns syntax
+     * e.g. "1fr 1fr 1fr" or "200px 1fr 200px"
+     */
+    templateColumns?: string;
+    /**
+     * Defines the rows of the grid using CSS grid-template-rows syntax
+     * e.g. "auto auto" or "100px 1fr"
+     */
+    templateRows?: string;
+    /**
+     * Controls the overall space between grid cells
+     * @default 'default'
+     */
+    gap?: SpaceToken;
+    /**
+     * Controls the vertical space between rows
+     * @default 'default'
+     */
+    rowGap?: SpaceToken;
+    /**
+     * Controls the horizontal space between columns
+     * @default 'default'
+     */
+    columnGap?: SpaceToken;
+    /**
+     * The content of the grid
+     */
+    children: React.ReactNode;
+    /**
+     * @internal
+     * Additional CSS properties to apply to the grid
+     */
+    style?: React.CSSProperties;
+}
+export declare const Grid: {
+    ({ id, isInline, alignContent, autoColumns, autoFlow, columns, rows, templateColumns, templateRows, gap, rowGap, columnGap, children, style, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;
+    Cell: ({ colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, children, style, ...rest }: GridCellProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Grid;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import '../../assets/Grid.css';const grid = "_grid_f3f0m_1";
+const gridItem = "_gridItem_f3f0m_6";
+const styles = {
+  grid,
+  gridItem
+};
+const getGapValue = (token) => {
+  return token === "default" ? "var(--alto-grid-gutter-default)" : `var(--alto-sem-space-${token})`;
+};
+const GridCell = ({
+  colSpan,
+  rowSpan,
+  colStart,
+  colEnd,
+  rowStart,
+  rowEnd,
+  children,
+  style,
+  ...rest
+}) => {
+  const gridCellStyle = {
+    ...colSpan && {
+      gridColumn: `span ${colSpan}`
+    },
+    ...rowSpan && {
+      gridRow: `span ${rowSpan}`
+    },
+    ...colStart && {
+      gridColumnStart: colStart
+    },
+    ...colEnd && {
+      gridColumnEnd: colEnd
+    },
+    ...rowStart && {
+      gridRowStart: rowStart
+    },
+    ...rowEnd && {
+      gridRowEnd: rowEnd
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { className: styles.gridCell, style: gridCellStyle, ...rest, children });
+};
+const Grid = ({
+  id,
+  isInline = false,
+  alignContent,
+  autoColumns,
+  autoFlow,
+  columns,
+  rows,
+  templateColumns,
+  templateRows,
+  gap,
+  rowGap,
+  columnGap,
+  children,
+  style,
+  ...rest
+}) => {
+  const effectiveTemplateColumns = columns ? `repeat(${columns}, 1fr)` : templateColumns;
+  const effectiveTemplateRows = rows ? `repeat(${rows}, 1fr)` : templateRows;
+  const gridStyle = {
+    display: isInline ? "inline-grid" : "grid",
+    gridTemplateColumns: effectiveTemplateColumns,
+    gridTemplateRows: effectiveTemplateRows,
+    gridAutoColumns: autoColumns,
+    gridAutoFlow: autoFlow,
+    alignContent,
+    ...rowGap || columnGap ? {
+      rowGap: getGapValue(rowGap || "default"),
+      columnGap: getGapValue(columnGap || "default")
+    } : {
+      gap: getGapValue(gap || "default")
+    },
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { id, className: styles.grid, style: gridStyle, ...rest, children });
+};
+Grid.Cell = GridCell;
+export {
+  Grid,
+  GridCell,
+  Grid as default
+};
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

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

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

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

package/dist/components/Grid/index.js

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

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

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

package/dist/components/Radio/Radio.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Radio as Radio$1 } from "react-aria-components";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/Radio.css';const radio$1 = "_radio_1csym_1";
-const defaultFocus = "_defaultFocus_1csym_41";
-const whiteFocus = "_whiteFocus_1csym_45";
+import '../../assets/Radio.css';const radio$1 = "_radio_1qy5u_1";
+const defaultFocus = "_defaultFocus_1qy5u_41";
+const whiteFocus = "_whiteFocus_1qy5u_45";
 const styles = {
   radio: radio$1,
   defaultFocus,

package/dist/components/RadioGroup/RadioGroup.js

@@ -17,7 +17,7 @@ const RadioGroup = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(RadioGroup$1, { className: styles.radioGroup, isInvalid, isDisabled, "aria-label": label, ...props, children: [
-    /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired, isInvalid }),
+    (label || description || errorMessage) && /* @__PURE__ */ jsx(FieldHeader, { label, description, errorMessage, isRequired, isInvalid }),
     children
   ] });
 };

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Badge } from './Badge';
 export { default as Button } from './Button';
 export { default as ButtonGroup } from './ButtonGroup';
+export { default as CardSection } from './CardSection';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as DateField } from './DateField';
@@ -10,6 +11,7 @@ export { default as FieldDescription } from './FieldDescription';
 export { default as FieldError } from './FieldError';
 export { default as FieldHeader } from './FieldHeader';
 export { default as FieldLabel } from './FieldLabel';
+export { default as Grid } from './Grid';
 export { default as Heading } from './Heading';
 export { default as Icon } from './Icon';
 export { default as IconButton } from './IconButton';

package/dist/components/index.js

@@ -2,20 +2,22 @@ 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 { default as default2 } from "./CardSection/CardSection.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 { default as default3 } from "./FieldDescription/FieldDescription.js";
 import { FieldError } from "./FieldError/FieldError.js";
 import { FieldHeader } from "./FieldHeader/FieldHeader.js";
 import { FieldLabel } from "./FieldLabel/FieldLabel.js";
+import { Grid } from "./Grid/Grid.js";
 import { Heading } from "./Heading/Heading.js";
 import { Icon } from "./Icon/Icon.js";
 import { IconButton } from "./IconButton/IconButton.js";
-import { default as default3 } from "./Link/Link.js";
-import { default as default4 } from "./LoadingSpinner/LoadingSpinner.js";
+import { default as default4 } from "./Link/Link.js";
+import { default as default5 } from "./LoadingSpinner/LoadingSpinner.js";
 import { NewButton } from "./NewButton/NewButton.js";
 import { Radio } from "./Radio/Radio.js";
 import { RadioGroup } from "./RadioGroup/RadioGroup.js";
@@ -24,27 +26,29 @@ 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 default5 } from "./ToggleButton/ToggleButton.js";
-import { default as default6 } from "./ToggleIconButton/ToggleIconButton.js";
+import { default as default6 } from "./ToggleButton/ToggleButton.js";
+import { default as default7 } from "./ToggleIconButton/ToggleIconButton.js";
 import { Tooltip } from "./Tooltip/Tooltip.js";
 export {
   Badge,
   Button,
   ButtonGroup,
+  default2 as CardSection,
   Checkbox,
   CheckboxGroup,
   DateField,
   DestinationHeading,
   Eyebrow,
-  default2 as FieldDescription,
+  default3 as FieldDescription,
   FieldError,
   FieldHeader,
   FieldLabel,
+  Grid,
   Heading,
   Icon,
   IconButton,
-  default3 as Link,
-  default4 as LoadingSpinner,
+  default4 as Link,
+  default5 as LoadingSpinner,
   NewButton,
   Radio,
   RadioGroup,
@@ -53,8 +57,8 @@ export {
   TagGroup,
   TextAreaField,
   TextField,
-  default5 as ToggleButton,
-  default6 as ToggleIconButton,
+  default6 as ToggleButton,
+  default7 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

@@ -2,20 +2,22 @@ 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 { default as default2 } from "./components/CardSection/CardSection.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 { default as default3 } from "./components/FieldDescription/FieldDescription.js";
 import { FieldError } from "./components/FieldError/FieldError.js";
 import { FieldHeader } from "./components/FieldHeader/FieldHeader.js";
 import { FieldLabel } from "./components/FieldLabel/FieldLabel.js";
+import { Grid } from "./components/Grid/Grid.js";
 import { Heading } from "./components/Heading/Heading.js";
 import { Icon } from "./components/Icon/Icon.js";
 import { IconButton } from "./components/IconButton/IconButton.js";
-import { default as default3 } from "./components/Link/Link.js";
-import { default as default4 } from "./components/LoadingSpinner/LoadingSpinner.js";
+import { default as default4 } from "./components/Link/Link.js";
+import { default as default5 } from "./components/LoadingSpinner/LoadingSpinner.js";
 import { NewButton } from "./components/NewButton/NewButton.js";
 import { Radio } from "./components/Radio/Radio.js";
 import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
@@ -24,27 +26,29 @@ 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 default5 } from "./components/ToggleButton/ToggleButton.js";
-import { default as default6 } from "./components/ToggleIconButton/ToggleIconButton.js";
+import { default as default6 } from "./components/ToggleButton/ToggleButton.js";
+import { default as default7 } from "./components/ToggleIconButton/ToggleIconButton.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 export {
   Badge,
   Button,
   ButtonGroup,
+  default2 as CardSection,
   Checkbox,
   CheckboxGroup,
   DateField,
   DestinationHeading,
   Eyebrow,
-  default2 as FieldDescription,
+  default3 as FieldDescription,
   FieldError,
   FieldHeader,
   FieldLabel,
+  Grid,
   Heading,
   Icon,
   IconButton,
-  default3 as Link,
-  default4 as LoadingSpinner,
+  default4 as Link,
+  default5 as LoadingSpinner,
   NewButton,
   Radio,
   RadioGroup,
@@ -53,8 +57,8 @@ export {
   TagGroup,
   TextAreaField,
   TextField,
-  default5 as ToggleButton,
-  default6 as ToggleIconButton,
+  default6 as ToggleButton,
+  default7 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/backgroundColour/backgroundColour.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputType } from 'storybook/internal/types';
+export declare const backgroundColorVariants: (props?: ({
+    backgroundColour?: "base" | "transparent" | "layer1" | "layer2" | "layer3" | "accentVibrant" | "accentSubtle" | "accentDeep" | "criticalVibrant" | "criticalSubtle" | "warningVibrant" | "warningSubtle" | "cautionVibrant" | "cautionSubtle" | "successVibrant" | "successSubtle" | "informationVibrant" | "informationSubtle" | "inverseVibrant" | "inverseSubtle" | "whiteVibrant" | "whiteSubtle" | "disabledVibrant" | "disabledSubtle" | "saleVibrant" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type BackgroundVariants = VariantProps<typeof backgroundColorVariants>;
+export declare const backgroundColourOptions: BackgroundVariants["backgroundColour"][];
+export declare const backgroundColourArgTypes: Record<string, InputType>;

package/dist/utils/backgroundColour/backgroundColour.js

@@ -0,0 +1,102 @@
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import '../../assets/backgroundColour.css';const styles = {
+  "backgroundColour-transparent": "_backgroundColour-transparent_jawk2_1",
+  "backgroundColour-base": "_backgroundColour-base_jawk2_5",
+  "backgroundColour-layer1": "_backgroundColour-layer1_jawk2_9",
+  "backgroundColour-layer2": "_backgroundColour-layer2_jawk2_13",
+  "backgroundColour-layer3": "_backgroundColour-layer3_jawk2_17",
+  "backgroundColour-accent-vibrant": "_backgroundColour-accent-vibrant_jawk2_21",
+  "backgroundColour-accent-subtle": "_backgroundColour-accent-subtle_jawk2_25",
+  "backgroundColour-accent-deep": "_backgroundColour-accent-deep_jawk2_29",
+  "backgroundColour-critical-vibrant": "_backgroundColour-critical-vibrant_jawk2_33",
+  "backgroundColour-critical-subtle": "_backgroundColour-critical-subtle_jawk2_37",
+  "backgroundColour-warning-vibrant": "_backgroundColour-warning-vibrant_jawk2_41",
+  "backgroundColour-warning-subtle": "_backgroundColour-warning-subtle_jawk2_45",
+  "backgroundColour-caution-vibrant": "_backgroundColour-caution-vibrant_jawk2_49",
+  "backgroundColour-caution-subtle": "_backgroundColour-caution-subtle_jawk2_53",
+  "backgroundColour-success-vibrant": "_backgroundColour-success-vibrant_jawk2_57",
+  "backgroundColour-success-subtle": "_backgroundColour-success-subtle_jawk2_61",
+  "backgroundColour-information-vibrant": "_backgroundColour-information-vibrant_jawk2_65",
+  "backgroundColour-information-subtle": "_backgroundColour-information-subtle_jawk2_69",
+  "backgroundColour-inverse-vibrant": "_backgroundColour-inverse-vibrant_jawk2_73",
+  "backgroundColour-inverse-subtle": "_backgroundColour-inverse-subtle_jawk2_77",
+  "backgroundColour-white-vibrant": "_backgroundColour-white-vibrant_jawk2_81",
+  "backgroundColour-white-subtle": "_backgroundColour-white-subtle_jawk2_85",
+  "backgroundColour-disabled-vibrant": "_backgroundColour-disabled-vibrant_jawk2_89",
+  "backgroundColour-disabled-subtle": "_backgroundColour-disabled-subtle_jawk2_93",
+  "backgroundColour-sale-vibrant": "_backgroundColour-sale-vibrant_jawk2_97"
+};
+const backgroundColorVariants = cva("", {
+  variants: {
+    backgroundColour: {
+      transparent: styles["backgroundColour-transparent"],
+      base: styles["backgroundColour-base"],
+      layer1: styles["backgroundColour-layer1"],
+      layer2: styles["backgroundColour-layer2"],
+      layer3: styles["backgroundColour-layer3"],
+      accentVibrant: styles["backgroundColour-accent-vibrant"],
+      accentSubtle: styles["backgroundColour-accent-subtle"],
+      accentDeep: styles["backgroundColour-accent-deep"],
+      criticalVibrant: styles["backgroundColour-critical-vibrant"],
+      criticalSubtle: styles["backgroundColour-critical-subtle"],
+      warningVibrant: styles["backgroundColour-warning-vibrant"],
+      warningSubtle: styles["backgroundColour-warning-subtle"],
+      cautionVibrant: styles["backgroundColour-caution-vibrant"],
+      cautionSubtle: styles["backgroundColour-caution-subtle"],
+      successVibrant: styles["backgroundColour-success-vibrant"],
+      successSubtle: styles["backgroundColour-success-subtle"],
+      informationVibrant: styles["backgroundColour-information-vibrant"],
+      informationSubtle: styles["backgroundColour-information-subtle"],
+      inverseVibrant: styles["backgroundColour-inverse-vibrant"],
+      inverseSubtle: styles["backgroundColour-inverse-subtle"],
+      whiteVibrant: styles["backgroundColour-white-vibrant"],
+      whiteSubtle: styles["backgroundColour-white-subtle"],
+      disabledVibrant: styles["backgroundColour-disabled-vibrant"],
+      disabledSubtle: styles["backgroundColour-disabled-subtle"],
+      saleVibrant: styles["backgroundColour-sale-vibrant"]
+    }
+  },
+  defaultVariants: {
+    backgroundColour: "transparent"
+  }
+});
+const backgroundColourOptions = [
+  "transparent",
+  "base",
+  "layer1",
+  "layer2",
+  "layer3",
+  "accentVibrant",
+  "accentSubtle",
+  "accentDeep",
+  "criticalVibrant",
+  "criticalSubtle",
+  "warningVibrant",
+  "warningSubtle",
+  "cautionVibrant",
+  "cautionSubtle",
+  "successVibrant",
+  "successSubtle",
+  "informationVibrant",
+  "informationSubtle",
+  "inverseVibrant",
+  "inverseSubtle",
+  "whiteVibrant",
+  "whiteSubtle",
+  "disabledVibrant",
+  "disabledSubtle",
+  "saleVibrant"
+];
+const backgroundColourArgTypes = {
+  backgroundColour: {
+    control: "select",
+    options: backgroundColourOptions,
+    defaultValue: "transparent"
+  }
+};
+export {
+  backgroundColorVariants,
+  backgroundColourArgTypes,
+  backgroundColourOptions
+};
+//# sourceMappingURL=backgroundColour.js.map

package/dist/utils/backgroundColour/backgroundColour.js.map

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

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputType } from 'storybook/internal/types';
+export declare const borderVariants: (props?: ({
+    borderRadius?: "lg" | "sm" | "xs" | "none" | "md" | "xl" | "circle" | "5xs" | "4xs" | "3xs" | "2xs" | "6xs" | null | undefined;
+    borderWidth?: "lg" | "sm" | "xs" | "none" | "md" | "xl" | null | undefined;
+    borderStyle?: "none" | "dashed" | "solid" | null | undefined;
+    borderColour?: "none" | "white" | "critical" | "warning" | "caution" | "success" | "accent" | "secondary" | "tertiary" | "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/border/border.js

@@ -0,0 +1,147 @@
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import '../../assets/border.css';const borderRadiusNone = "_borderRadiusNone_1ka0b_1";
+const borderRadius6xs = "_borderRadius6xs_1ka0b_5";
+const borderRadius5xs = "_borderRadius5xs_1ka0b_9";
+const borderRadius4xs = "_borderRadius4xs_1ka0b_13";
+const borderRadius3xs = "_borderRadius3xs_1ka0b_17";
+const borderRadius2xs = "_borderRadius2xs_1ka0b_21";
+const borderRadiusXs = "_borderRadiusXs_1ka0b_25";
+const borderRadiusSm = "_borderRadiusSm_1ka0b_29";
+const borderRadiusMd = "_borderRadiusMd_1ka0b_33";
+const borderRadiusLg = "_borderRadiusLg_1ka0b_37";
+const borderRadiusXl = "_borderRadiusXl_1ka0b_41";
+const borderRadiusCircle = "_borderRadiusCircle_1ka0b_45";
+const borderWidthNone = "_borderWidthNone_1ka0b_49";
+const borderWidthXs = "_borderWidthXs_1ka0b_53";
+const borderWidthSm = "_borderWidthSm_1ka0b_57";
+const borderWidthMd = "_borderWidthMd_1ka0b_61";
+const borderWidthLg = "_borderWidthLg_1ka0b_65";
+const borderWidthXl = "_borderWidthXl_1ka0b_69";
+const borderStyleNone = "_borderStyleNone_1ka0b_73";
+const borderStyleSolid = "_borderStyleSolid_1ka0b_77";
+const borderStyleDashed = "_borderStyleDashed_1ka0b_81";
+const borderColourNone = "_borderColourNone_1ka0b_85";
+const borderColourSecondary = "_borderColourSecondary_1ka0b_89";
+const borderColourTertiary = "_borderColourTertiary_1ka0b_93";
+const borderColourAccent = "_borderColourAccent_1ka0b_97";
+const borderColourCaution = "_borderColourCaution_1ka0b_101";
+const borderColourCritical = "_borderColourCritical_1ka0b_105";
+const borderColourInformation = "_borderColourInformation_1ka0b_109";
+const borderColourInverse = "_borderColourInverse_1ka0b_113";
+const borderColourSuccess = "_borderColourSuccess_1ka0b_117";
+const borderColourWarning = "_borderColourWarning_1ka0b_121";
+const borderColourWhite = "_borderColourWhite_1ka0b_125";
+const styles = {
+  borderRadiusNone,
+  borderRadius6xs,
+  borderRadius5xs,
+  borderRadius4xs,
+  borderRadius3xs,
+  borderRadius2xs,
+  borderRadiusXs,
+  borderRadiusSm,
+  borderRadiusMd,
+  borderRadiusLg,
+  borderRadiusXl,
+  borderRadiusCircle,
+  borderWidthNone,
+  borderWidthXs,
+  borderWidthSm,
+  borderWidthMd,
+  borderWidthLg,
+  borderWidthXl,
+  borderStyleNone,
+  borderStyleSolid,
+  borderStyleDashed,
+  borderColourNone,
+  borderColourSecondary,
+  borderColourTertiary,
+  borderColourAccent,
+  borderColourCaution,
+  borderColourCritical,
+  borderColourInformation,
+  borderColourInverse,
+  borderColourSuccess,
+  borderColourWarning,
+  borderColourWhite
+};
+const borderVariants = cva("", {
+  variants: {
+    borderRadius: {
+      none: styles["borderRadiusNone"],
+      "6xs": styles["borderRadius6xs"],
+      "5xs": styles["borderRadius5xs"],
+      "4xs": styles["borderRadius4xs"],
+      "3xs": styles["borderRadius3xs"],
+      "2xs": styles["borderRadius2xs"],
+      xs: styles["borderRadiusXs"],
+      sm: styles["borderRadiusSm"],
+      md: styles["borderRadiusMd"],
+      lg: styles["borderRadiusLg"],
+      xl: styles["borderRadiusXl"],
+      circle: styles["borderRadiusCircle"]
+    },
+    borderWidth: {
+      none: styles["borderWidthNone"],
+      xs: styles["borderWidthXs"],
+      sm: styles["borderWidthSm"],
+      md: styles["borderWidthMd"],
+      lg: styles["borderWidthLg"],
+      xl: styles["borderWidthXl"]
+    },
+    borderStyle: {
+      none: styles["borderStyleNone"],
+      solid: styles["borderStyleSolid"],
+      dashed: styles["borderStyleDashed"]
+    },
+    borderColour: {
+      none: styles["borderColourNone"],
+      secondary: styles["borderColourSecondary"],
+      tertiary: styles["borderColourTertiary"],
+      accent: styles["borderColourAccent"],
+      caution: styles["borderColourCaution"],
+      critical: styles["borderColourCritical"],
+      information: styles["borderColourInformation"],
+      inverse: styles["borderColourInverse"],
+      success: styles["borderColourSuccess"],
+      warning: styles["borderColourWarning"],
+      white: styles["borderColourWhite"]
+    }
+  },
+  defaultVariants: {
+    borderRadius: "none",
+    borderWidth: "none",
+    borderStyle: "solid",
+    borderColour: "none"
+  }
+});
+const borderArgTypes = {
+  borderRadius: {
+    control: "select",
+    options: [
+      "none",
+      "6xs",
+      "5xs",
+      "4xs",
+      "3xs",
+      "2xs",
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "circle"
+    ],
+    defaultValue: "none"
+  },
+  borderWidth: {
+    control: "select",
+    options: ["none", "xs", "sm", "md", "lg", "xl"],
+    defaultValue: "none"
+  }
+};
+export {
+  borderArgTypes,
+  borderVariants
+};
+//# sourceMappingURL=border.js.map

package/dist/utils/border/border.js.map

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

package/dist/utils/fgColour/fgColor.d.ts

@@ -1,3 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
 export declare const fgColorVariants: (props?: ({
     fgColor?: "default" | "accentPrimary" | "accentSecondary" | "secondary" | "criticalPrimary" | "whitePrimary" | "accentOnVibrant" | "accentOnVibrantAccent" | "accentOnSubtle" | "accentOnDeep" | "criticalOnVibrant" | "criticalOnSubtle" | "warningPrimary" | "warningOnVibrant" | "warningOnSubtle" | "cautionPrimary" | "cautionOnVibrant" | "cautionOnSubtle" | "successPrimary" | "successOnVibrant" | "successOnSubtle" | "informationPrimary" | "informationOnVibrant" | "informationOnSubtle" | "inversePrimary" | "inverseOnVibrant" | "inverseOnSubtle" | "whiteOnVibrant" | "whiteOnSubtle" | "disabledPrimary" | "disabledOnVibrant" | "disabledOnSubtle" | "salePrimary" | "saleOnVibrant" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type FgColorVariants = VariantProps<typeof fgColorVariants>;

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

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const flexVariants: (props?: ({
+    display?: "flex" | "inline-flex" | null | undefined;
+    justifyContent?: "start" | "center" | "end" | null | undefined;
+    flexWrap?: "nowrap" | "wrap" | null | undefined;
+    flexGrow?: 0 | 1 | null | undefined;
+    flexShrink?: 0 | 1 | null | undefined;
+    flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | null | undefined;
+    alignItems?: "start" | "center" | "end" | null | undefined;
+    gap?: "lg" | "sm" | "xs" | "md" | "xl" | "5xs" | "4xs" | "3xs" | "2xs" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type FlexVariants = VariantProps<typeof flexVariants>;

package/dist/utils/flex/flex.js

@@ -0,0 +1,126 @@
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import '../../assets/flex.css';const flex = "_flex_1ug5y_1";
+const flexInline = "_flexInline_1ug5y_5";
+const flexJustifyContentStart = "_flexJustifyContentStart_1ug5y_9";
+const flexJustifyContentCenter = "_flexJustifyContentCenter_1ug5y_13";
+const flexJustifyContentEnd = "_flexJustifyContentEnd_1ug5y_17";
+const flexWrapWrap = "_flexWrapWrap_1ug5y_21";
+const flexWrapNowrap = "_flexWrapNowrap_1ug5y_25";
+const flexGrow1 = "_flexGrow1_1ug5y_29";
+const flexGrow0 = "_flexGrow0_1ug5y_33";
+const flexShrink1 = "_flexShrink1_1ug5y_37";
+const flexShrink0 = "_flexShrink0_1ug5y_41";
+const flexDirectionRow = "_flexDirectionRow_1ug5y_45";
+const flexDirectionRowReverse = "_flexDirectionRowReverse_1ug5y_49";
+const flexDirectionColumn = "_flexDirectionColumn_1ug5y_53";
+const flexDirectionColumnReverse = "_flexDirectionColumnReverse_1ug5y_57";
+const flexAlignItemsStart = "_flexAlignItemsStart_1ug5y_61";
+const flexAlignItemsCenter = "_flexAlignItemsCenter_1ug5y_65";
+const flexAlignItemsEnd = "_flexAlignItemsEnd_1ug5y_69";
+const flexGap5xs = "_flexGap5xs_1ug5y_73";
+const flexGap4xs = "_flexGap4xs_1ug5y_77";
+const flexGap3xs = "_flexGap3xs_1ug5y_81";
+const flexGap2xs = "_flexGap2xs_1ug5y_85";
+const flexGapXs = "_flexGapXs_1ug5y_89";
+const flexGapSm = "_flexGapSm_1ug5y_93";
+const flexGapMd = "_flexGapMd_1ug5y_97";
+const flexGapLg = "_flexGapLg_1ug5y_101";
+const flexGapXl = "_flexGapXl_1ug5y_105";
+const flexGap2xl = "_flexGap2xl_1ug5y_109";
+const flexGap3xl = "_flexGap3xl_1ug5y_113";
+const flexGap4xl = "_flexGap4xl_1ug5y_117";
+const flexGap5xl = "_flexGap5xl_1ug5y_121";
+const flexGap6xl = "_flexGap6xl_1ug5y_125";
+const styles = {
+  flex,
+  flexInline,
+  flexJustifyContentStart,
+  flexJustifyContentCenter,
+  flexJustifyContentEnd,
+  flexWrapWrap,
+  flexWrapNowrap,
+  flexGrow1,
+  flexGrow0,
+  flexShrink1,
+  flexShrink0,
+  flexDirectionRow,
+  flexDirectionRowReverse,
+  flexDirectionColumn,
+  flexDirectionColumnReverse,
+  flexAlignItemsStart,
+  flexAlignItemsCenter,
+  flexAlignItemsEnd,
+  flexGap5xs,
+  flexGap4xs,
+  flexGap3xs,
+  flexGap2xs,
+  flexGapXs,
+  flexGapSm,
+  flexGapMd,
+  flexGapLg,
+  flexGapXl,
+  flexGap2xl,
+  flexGap3xl,
+  flexGap4xl,
+  flexGap5xl,
+  flexGap6xl
+};
+const flexVariants = cva("", {
+  variants: {
+    display: {
+      flex: styles["flex"],
+      "inline-flex": styles["flexInline"]
+    },
+    justifyContent: {
+      start: styles["flexJustifyContentStart"],
+      center: styles["flexJustifyContentCenter"],
+      end: styles["flexJustifyContentEnd"]
+    },
+    flexWrap: {
+      wrap: styles["flexWrapWrap"],
+      nowrap: styles["flexWrapNowrap"]
+    },
+    flexGrow: {
+      0: styles["flexGrow0"],
+      1: styles["flexGrow1"]
+    },
+    flexShrink: {
+      0: styles["flexShrink0"],
+      1: styles["flexShrink1"]
+    },
+    flexDirection: {
+      row: styles["flexDirectionRow"],
+      "row-reverse": styles["flexDirectionRowReverse"],
+      column: styles["flexDirectionColumn"],
+      "column-reverse": styles["flexDirectionColumnReverse"]
+    },
+    alignItems: {
+      start: styles["flexAlignItemsStart"],
+      center: styles["flexAlignItemsCenter"],
+      end: styles["flexAlignItemsEnd"]
+    },
+    gap: {
+      "5xs": styles["flexGap5xs"],
+      "4xs": styles["flexGap4xs"],
+      "3xs": styles["flexGap3xs"],
+      "2xs": styles["flexGap2xs"],
+      xs: styles["flexGapXs"],
+      sm: styles["flexGapSm"],
+      md: styles["flexGapMd"],
+      lg: styles["flexGapLg"],
+      xl: styles["flexGapXl"],
+      "2xl": styles["flexGap2xl"],
+      "3xl": styles["flexGap3xl"],
+      "4xl": styles["flexGap4xl"],
+      "5xl": styles["flexGap5xl"],
+      "6xl": styles["flexGap6xl"]
+    }
+  },
+  defaultVariants: {
+    display: "flex"
+  }
+});
+export {
+  flexVariants
+};
+//# sourceMappingURL=flex.js.map

package/dist/utils/flex/flex.js.map

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

package/dist/utils/padding/padding.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputType } from 'storybook/internal/types';
+export declare const paddingVariants: (props?: ({
+    padding?: "lg" | "sm" | "md" | null | undefined;
+    paddingX?: "lg" | "sm" | "md" | null | undefined;
+    paddingY?: "lg" | "sm" | "md" | null | undefined;
+    paddingTop?: "lg" | "sm" | "md" | null | undefined;
+    paddingRight?: "lg" | "sm" | "md" | null | undefined;
+    paddingBottom?: "lg" | "sm" | "md" | null | undefined;
+    paddingLeft?: "lg" | "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type PaddingVariants = VariantProps<typeof paddingVariants>;
+export declare const paddingArgTypes: Record<string, InputType>;

package/dist/utils/padding/padding.js

@@ -0,0 +1,96 @@
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import '../../assets/padding.css';const paddingLg = "_paddingLg_bawps_1";
+const paddingMd = "_paddingMd_bawps_5";
+const paddingSm = "_paddingSm_bawps_9";
+const paddingTopLg = "_paddingTopLg_bawps_43";
+const paddingTopMd = "_paddingTopMd_bawps_47";
+const paddingTopSm = "_paddingTopSm_bawps_51";
+const paddingRightLg = "_paddingRightLg_bawps_55";
+const paddingRightMd = "_paddingRightMd_bawps_59";
+const paddingRightSm = "_paddingRightSm_bawps_63";
+const paddingBottomLg = "_paddingBottomLg_bawps_67";
+const paddingBottomMd = "_paddingBottomMd_bawps_71";
+const paddingBottomSm = "_paddingBottomSm_bawps_75";
+const paddingLeftLg = "_paddingLeftLg_bawps_79";
+const paddingLeftMd = "_paddingLeftMd_bawps_83";
+const paddingLeftSm = "_paddingLeftSm_bawps_87";
+const styles = {
+  paddingLg,
+  paddingMd,
+  paddingSm,
+  "paddingX-lg": "_paddingX-lg_bawps_13",
+  "paddingX-md": "_paddingX-md_bawps_18",
+  "paddingX-sm": "_paddingX-sm_bawps_23",
+  "paddingY-lg": "_paddingY-lg_bawps_28",
+  "paddingY-md": "_paddingY-md_bawps_33",
+  "paddingY-sm": "_paddingY-sm_bawps_38",
+  paddingTopLg,
+  paddingTopMd,
+  paddingTopSm,
+  paddingRightLg,
+  paddingRightMd,
+  paddingRightSm,
+  paddingBottomLg,
+  paddingBottomMd,
+  paddingBottomSm,
+  paddingLeftLg,
+  paddingLeftMd,
+  paddingLeftSm
+};
+const paddingControl = {
+  control: "select",
+  options: [null, "lg", "md", "sm"]
+};
+const paddingVariants = cva("", {
+  variants: {
+    padding: {
+      lg: styles["paddingLg"],
+      md: styles["paddingMd"],
+      sm: styles["paddingSm"]
+    },
+    paddingX: {
+      lg: styles["paddingX-lg"],
+      md: styles["paddingX-md"],
+      sm: styles["paddingX-sm"]
+    },
+    paddingY: {
+      lg: styles["paddingY-lg"],
+      md: styles["paddingY-md"],
+      sm: styles["paddingY-sm"]
+    },
+    paddingTop: {
+      lg: styles["paddingTopLg"],
+      md: styles["paddingTopMd"],
+      sm: styles["paddingTopSm"]
+    },
+    paddingRight: {
+      lg: styles["paddingRightLg"],
+      md: styles["paddingRightMd"],
+      sm: styles["paddingRightSm"]
+    },
+    paddingBottom: {
+      lg: styles["paddingBottomLg"],
+      md: styles["paddingBottomMd"],
+      sm: styles["paddingBottomSm"]
+    },
+    paddingLeft: {
+      lg: styles["paddingLeftLg"],
+      md: styles["paddingLeftMd"],
+      sm: styles["paddingLeftSm"]
+    }
+  }
+});
+const paddingArgTypes = {
+  padding: paddingControl,
+  paddingX: paddingControl,
+  paddingY: paddingControl,
+  paddingTop: paddingControl,
+  paddingRight: paddingControl,
+  paddingBottom: paddingControl,
+  paddingLeft: paddingControl
+};
+export {
+  paddingArgTypes,
+  paddingVariants
+};
+//# sourceMappingURL=padding.js.map

package/dist/utils/padding/padding.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "2.1.0",
+  "version": "2.3.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.2.0",
+    "@alto-avios/alto-tokens": "^2.3.0",
     "react": "^18.0.0"
   },
   "main": "dist/index.js",