@alto-avios/alto-ui 2.3.2 → 2.4.0

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

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

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_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";
+import '../../assets/Heading.css';const heading$1 = "_heading_15puj_1";
+const xxs = "_xxs_15puj_8";
+const xs = "_xs_15puj_15";
+const sm = "_sm_15puj_22";
+const md = "_md_15puj_29";
+const lg = "_lg_15puj_36";
+const xl = "_xl_15puj_43";
+const start = "_start_15puj_50";
+const center = "_center_15puj_54";
+const end = "_end_15puj_58";
 const styles = {
   heading: heading$1,
   xxs,
@@ -26,12 +26,12 @@ const styles = {
 const heading = cva(styles.heading, {
   variants: {
     size: {
-      "xxs": styles.xxs,
-      "xs": styles.xs,
-      "sm": styles.sm,
-      "md": styles.md,
-      "lg": styles.lg,
-      "xl": styles.xl
+      xxs: styles.xxs,
+      xs: styles.xs,
+      sm: styles.sm,
+      md: styles.md,
+      lg: styles.lg,
+      xl: styles.xl
     },
     textAlign: {
       start: styles.start,

package/dist/components/Icon/Icon.d.ts

@@ -16,7 +16,7 @@ export interface IconProps {
     /**
      * Flip the icon horizontally, vertically, or both.
      */
-    flip?: "horizontal" | "vertical" | "both";
+    flip?: 'horizontal' | 'vertical' | 'both';
     /**
      * Whether the icon should be displayed with a fixed width.
      */
@@ -46,9 +46,9 @@ export interface IconProps {
      */
     className?: string;
     /**
-    * Whether the icon is purely decorative and should be hidden from screen readers.
-    * @default false
-    */
+     * Whether the icon is purely decorative and should be hidden from screen readers.
+     * @default false
+     */
     isDecorative?: boolean;
     /**
      * Accessible text for the icon. If the icon is decorative, this can be omitted.

package/dist/components/Icon/Icon.js

@@ -10,6 +10,7 @@ const Icon = ({
   border,
   rotation,
   pull,
+  // eslint-disable-next-line react/prop-types
   spin,
   className,
   ariaLabel,

package/dist/components/Icon/Icon.js.map

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

package/dist/components/IconButton/IconButton.js

@@ -5,26 +5,26 @@ import { Button } from "react-aria-components";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
-import '../../assets/IconButton.css';const iconButton$1 = "_iconButton_104jb_1";
-const sm = "_sm_104jb_24";
-const md = "_md_104jb_30";
-const lg = "_lg_104jb_36";
-const accentPrimary = "_accentPrimary_104jb_46";
-const accentSecondary = "_accentSecondary_104jb_69";
-const accentTertiary = "_accentTertiary_104jb_96";
-const accentQuaternary = "_accentQuaternary_104jb_125";
-const criticalPrimary = "_criticalPrimary_104jb_149";
-const criticalSecondary = "_criticalSecondary_104jb_173";
-const criticalTertiary = "_criticalTertiary_104jb_200";
-const criticalQuaternary = "_criticalQuaternary_104jb_225";
-const neutralPrimary = "_neutralPrimary_104jb_250";
-const neutralSecondary = "_neutralSecondary_104jb_274";
-const neutralTertiary = "_neutralTertiary_104jb_299";
-const neutralQuaternary = "_neutralQuaternary_104jb_324";
-const whitePrimary = "_whitePrimary_104jb_350";
-const whiteSecondary = "_whiteSecondary_104jb_379";
-const whiteTertiary = "_whiteTertiary_104jb_409";
-const whiteQuaternary = "_whiteQuaternary_104jb_438";
+import '../../assets/IconButton.css';const iconButton$1 = "_iconButton_by3pb_1";
+const sm = "_sm_by3pb_24";
+const md = "_md_by3pb_30";
+const lg = "_lg_by3pb_36";
+const accentPrimary = "_accentPrimary_by3pb_46";
+const accentSecondary = "_accentSecondary_by3pb_69";
+const accentTertiary = "_accentTertiary_by3pb_98";
+const accentQuaternary = "_accentQuaternary_by3pb_127";
+const criticalPrimary = "_criticalPrimary_by3pb_151";
+const criticalSecondary = "_criticalSecondary_by3pb_175";
+const criticalTertiary = "_criticalTertiary_by3pb_204";
+const criticalQuaternary = "_criticalQuaternary_by3pb_229";
+const neutralPrimary = "_neutralPrimary_by3pb_254";
+const neutralSecondary = "_neutralSecondary_by3pb_278";
+const neutralTertiary = "_neutralTertiary_by3pb_305";
+const neutralQuaternary = "_neutralQuaternary_by3pb_330";
+const whitePrimary = "_whitePrimary_by3pb_356";
+const whiteSecondary = "_whiteSecondary_by3pb_385";
+const whiteTertiary = "_whiteTertiary_by3pb_416";
+const whiteQuaternary = "_whiteQuaternary_by3pb_445";
 const styles = {
   iconButton: iconButton$1,
   sm,
@@ -46,8 +46,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_104jb_469",
-  "icon-wrapper": "_icon-wrapper_104jb_474"
+  "fa-spinner-third": "_fa-spinner-third_by3pb_476",
+  "icon-wrapper": "_icon-wrapper_by3pb_481"
 };
 const iconButton = cva(styles.iconButton, {
   variants: {

package/dist/components/Link/Link.js

@@ -3,13 +3,13 @@ import { Icon } from "../Icon/Icon.js";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { Link as Link$1 } from "react-aria-components";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/Link.css';const link$1 = "_link_kftxp_1";
-const xs = "_xs_kftxp_9";
-const sm = "_sm_kftxp_15";
-const md = "_md_kftxp_21";
-const lg = "_lg_kftxp_27";
-const underline = "_underline_kftxp_58";
-const iconEnd = "_iconEnd_kftxp_75";
+import '../../assets/Link.css';const link$1 = "_link_4ndec_1";
+const xs = "_xs_4ndec_9";
+const sm = "_sm_4ndec_15";
+const md = "_md_4ndec_21";
+const lg = "_lg_4ndec_27";
+const underline = "_underline_4ndec_58";
+const iconEnd = "_iconEnd_4ndec_75";
 const styles = {
   link: link$1,
   xs,

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -2,11 +2,11 @@ export interface LoadingSpinnerProps {
     /**
      * What size loading spinner
      */
-    size?: "xs" | "lg" | "sm" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x" | undefined;
+    size?: 'xs' | 'lg' | 'sm' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | undefined;
     /**
      * What size loading spinner
      */
-    buttonSize?: "sm" | "md" | "lg" | undefined;
+    buttonSize?: 'sm' | 'md' | 'lg' | undefined;
     className?: string;
 }
 declare const LoadingSpinner: ({ size, buttonSize, className, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -2,15 +2,15 @@ import { jsx } from "react/jsx-runtime";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { ProgressBar } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
-import '../../assets/LoadingSpinner.css';const sm = "_sm_1643p_1";
-const md = "_md_1643p_5";
-const lg = "_lg_1643p_9";
+import '../../assets/LoadingSpinner.css';const sm = "_sm_1tfp3_1";
+const md = "_md_1tfp3_5";
+const lg = "_lg_1tfp3_9";
 const styles = {
   sm,
   md,
   lg,
-  "fa-spinner-third": "_fa-spinner-third_1643p_13",
-  "icon-wrapper": "_icon-wrapper_1643p_18"
+  "fa-spinner-third": "_fa-spinner-third_1tfp3_13",
+  "icon-wrapper": "_icon-wrapper_1tfp3_18"
 };
 const loadingSpinner = cva(styles.loadingSpinner, {
   variants: {

package/dist/components/NewButton/NewButton.js

@@ -5,32 +5,32 @@ import { useButton } from "@react-aria/button";
 import { Icon } from "../Icon/Icon.js";
 import LoadingSpinner from "../LoadingSpinner/LoadingSpinner.js";
 import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
-import '../../assets/NewButton.css';const newButton$1 = "_newButton_1ajlh_1";
-const content = "_content_1ajlh_23";
-const isNotLoading = "_isNotLoading_1ajlh_31";
-const loadingSpinner = "_loadingSpinner_1ajlh_31";
-const isLoading = "_isLoading_1ajlh_40";
-const focusWhite = "_focusWhite_1ajlh_52";
-const sm = "_sm_1ajlh_59";
-const md = "_md_1ajlh_64";
-const lg = "_lg_1ajlh_69";
-const fullWidth = "_fullWidth_1ajlh_74";
-const accentPrimary = "_accentPrimary_1ajlh_82";
-const accentSecondary = "_accentSecondary_1ajlh_101";
-const accentTertiary = "_accentTertiary_1ajlh_128";
-const accentQuaternary = "_accentQuaternary_1ajlh_153";
-const criticalPrimary = "_criticalPrimary_1ajlh_177";
-const criticalSecondary = "_criticalSecondary_1ajlh_201";
-const criticalTertiary = "_criticalTertiary_1ajlh_228";
-const criticalQuaternary = "_criticalQuaternary_1ajlh_253";
-const neutralPrimary = "_neutralPrimary_1ajlh_278";
-const neutralSecondary = "_neutralSecondary_1ajlh_302";
-const neutralTertiary = "_neutralTertiary_1ajlh_327";
-const neutralQuaternary = "_neutralQuaternary_1ajlh_352";
-const whitePrimary = "_whitePrimary_1ajlh_378";
-const whiteSecondary = "_whiteSecondary_1ajlh_403";
-const whiteTertiary = "_whiteTertiary_1ajlh_433";
-const whiteQuaternary = "_whiteQuaternary_1ajlh_462";
+import '../../assets/NewButton.css';const newButton$1 = "_newButton_jfgy8_1";
+const content = "_content_jfgy8_23";
+const isNotLoading = "_isNotLoading_jfgy8_31";
+const loadingSpinner = "_loadingSpinner_jfgy8_31";
+const isLoading = "_isLoading_jfgy8_40";
+const focusWhite = "_focusWhite_jfgy8_52";
+const sm = "_sm_jfgy8_59";
+const md = "_md_jfgy8_64";
+const lg = "_lg_jfgy8_69";
+const fullWidth = "_fullWidth_jfgy8_74";
+const accentPrimary = "_accentPrimary_jfgy8_82";
+const accentSecondary = "_accentSecondary_jfgy8_102";
+const accentTertiary = "_accentTertiary_jfgy8_132";
+const accentQuaternary = "_accentQuaternary_jfgy8_158";
+const criticalPrimary = "_criticalPrimary_jfgy8_183";
+const criticalSecondary = "_criticalSecondary_jfgy8_208";
+const criticalTertiary = "_criticalTertiary_jfgy8_238";
+const criticalQuaternary = "_criticalQuaternary_jfgy8_264";
+const neutralPrimary = "_neutralPrimary_jfgy8_291";
+const neutralSecondary = "_neutralSecondary_jfgy8_316";
+const neutralTertiary = "_neutralTertiary_jfgy8_345";
+const neutralQuaternary = "_neutralQuaternary_jfgy8_371";
+const whitePrimary = "_whitePrimary_jfgy8_398";
+const whiteSecondary = "_whiteSecondary_jfgy8_424";
+const whiteTertiary = "_whiteTertiary_jfgy8_457";
+const whiteQuaternary = "_whiteQuaternary_jfgy8_487";
 const styles = {
   newButton: newButton$1,
   content,
@@ -58,8 +58,8 @@ const styles = {
   whiteSecondary,
   whiteTertiary,
   whiteQuaternary,
-  "fa-spinner-third": "_fa-spinner-third_1ajlh_493",
-  "icon-wrapper": "_icon-wrapper_1ajlh_498"
+  "fa-spinner-third": "_fa-spinner-third_jfgy8_519",
+  "icon-wrapper": "_icon-wrapper_jfgy8_524"
 };
 const newButton = cva(styles.newButton, {
   variants: {

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,55 @@
+import { ValidationResult, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
+export interface NumberFieldProps extends AriaNumberFieldProps {
+    /**
+     * The label for the NumberField
+     */
+    label?: string;
+    /**
+     * The label for the increment button
+     * @default "Increase"
+     */
+    labelIncrement?: string;
+    /**
+     * The label for the decrement button
+     * @default "Decrease"
+     */
+    labelDecrement?: string;
+    /**
+     * The description for the NumberField
+     */
+    description?: string;
+    /**
+     * The minimum value for the NumberField
+     *
+     */
+    minValue?: number;
+    /**
+     * The maximum value for the NumberField
+     */
+    maxValue?: number;
+    /**
+     * Whether the NumberField is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The error message for the NumberField
+     */
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    /**
+     * The default value for the NumberField
+     */
+    defaultValue?: number;
+    /**
+     * Whether the NumberField is invalid
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the NumberField is required
+     * @default false
+     */
+    isRequired?: boolean;
+}
+export declare const NumberField: ({ label, labelIncrement, labelDecrement, description, defaultValue, minValue, maxValue, isInvalid, isDisabled, isRequired, errorMessage, ...props }: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberField;

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NumberField as NumberField$1, Group, Button, Input } from "react-aria-components";
+import { FieldHeader } from "../FieldHeader/FieldHeader.js";
+import { Icon } from "../Icon/Icon.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import '../../assets/NumberField.css';const numberField = "_numberField_htvlg_1";
+const numberFieldGroup = "_numberFieldGroup_htvlg_6";
+const numberFieldInput = "_numberFieldInput_htvlg_59";
+const numberFieldButton = "_numberFieldButton_htvlg_60";
+const styles = {
+  numberField,
+  numberFieldGroup,
+  numberFieldInput,
+  numberFieldButton
+};
+const NumberField = ({
+  label,
+  labelIncrement = "Increase",
+  labelDecrement = "Decrease",
+  description,
+  defaultValue,
+  minValue,
+  maxValue,
+  isInvalid = false,
+  isDisabled = false,
+  isRequired = false,
+  errorMessage,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(NumberField$1, { className: styles.numberField, defaultValue, minValue, maxValue, isInvalid, isDisabled, ...props, children: [
+    label ? /* @__PURE__ */ jsx(FieldHeader, { label, description, isInvalid, isRequired, errorMessage }) : null,
+    /* @__PURE__ */ jsxs(Group, { className: styles.numberFieldGroup, children: [
+      /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelDecrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "decrement", children: /* @__PURE__ */ jsx(Icon, { iconName: "minus" }) }) }),
+      /* @__PURE__ */ jsx(Input, { className: styles.numberFieldInput }),
+      /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", label: labelIncrement, children: /* @__PURE__ */ jsx(Button, { className: styles.numberFieldButton, slot: "increment", children: /* @__PURE__ */ jsx(Icon, { iconName: "plus" }) }) })
+    ] })
+  ] });
+};
+export {
+  NumberField,
+  NumberField as default
+};
+//# sourceMappingURL=NumberField.js.map

package/dist/components/NumberField/NumberField.js.map

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

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

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

package/dist/components/NumberField/index.js

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

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

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

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

@@ -7,7 +7,7 @@ declare const paragraph: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ParagraphVariants = VariantProps<typeof paragraph>;
 type FgColorVariants = VariantProps<typeof fgColorVariants>;
-type ParagraphSize = "xs" | "sm" | "md" | "lg";
+type ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface ParagraphProps extends ParagraphVariants {
     children: React.ReactNode;
     /**
@@ -19,12 +19,12 @@ export interface ParagraphProps extends ParagraphVariants {
      * The foreground color of the paragraph
      * @default "secondary"
      */
-    fgColor?: FgColorVariants["fgColor"];
+    fgColor?: FgColorVariants['fgColor'];
     /**
      * The text alignment of the paragraph
      * @default "start"
      */
-    textAlign?: "start" | "center" | "end";
+    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/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_1qy5u_1";
-const defaultFocus = "_defaultFocus_1qy5u_41";
-const whiteFocus = "_whiteFocus_1qy5u_45";
+import '../../assets/Radio.css';const radio$1 = "_radio_y39zj_1";
+const defaultFocus = "_defaultFocus_y39zj_41";
+const whiteFocus = "_whiteFocus_y39zj_45";
 const styles = {
   radio: radio$1,
   defaultFocus,

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -30,5 +30,5 @@ interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
      */
     isRequired?: boolean;
 }
-export declare const RadioGroup: ({ label, description, defaultValue, errorMessage, isDisabled, isInvalid, isRequired, children, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ label, description, errorMessage, isDisabled, isInvalid, isRequired, children, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,14 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { RadioGroup as RadioGroup$1 } from "react-aria-components";
 import { FieldHeader } from "../FieldHeader/FieldHeader.js";
-import '../../assets/RadioGroup.css';const radioGroup = "_radioGroup_18m1j_1";
+import '../../assets/RadioGroup.css';const radioGroup = "_radioGroup_1yeix_1";
 const styles = {
   radioGroup
 };
 const RadioGroup = ({
   label,
   description,
-  defaultValue,
   errorMessage,
   isDisabled,
   isInvalid,

package/dist/components/RadioGroup/RadioGroup.js.map

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

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { BackgroundVariants } from '../../utils/backgroundColour/backgroundColour';
+import { PaddingVariants } from '../../utils/padding/padding';
+type SectionPaddingValue = "default" | PaddingVariants['paddingX'];
+type SectionPadding = {
+    paddingX?: SectionPaddingValue;
+    paddingY?: SectionPaddingValue;
+    paddingTop?: SectionPaddingValue;
+    paddingRight?: SectionPaddingValue;
+    paddingBottom?: SectionPaddingValue;
+    paddingLeft?: SectionPaddingValue;
+};
+export interface SectionProps extends BackgroundVariants, SectionPadding {
+    children: React.ReactNode;
+    containerMaxWidth?: 'full-width' | 'page';
+    style?: React.CSSProperties;
+    className?: string;
+}
+interface ContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    containerMaxWidth?: 'full-width' | 'page';
+}
+declare const Container: ({ children, className, containerMaxWidth }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+interface SectionComponent extends React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>> {
+    Container: typeof Container;
+}
+declare const Section: SectionComponent;
+export default Section;

package/dist/components/Section/Section.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { backgroundColorVariants } from "../../utils/backgroundColour/backgroundColour.js";
+import { paddingVariants } from "../../utils/padding/padding.js";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import '../../assets/Section.css';const section = "_section_dk7qx_1";
+const container = "_container_dk7qx_8";
+const pageWidth = "_pageWidth_dk7qx_16";
+const fullWidth = "_fullWidth_dk7qx_20";
+const paddingTopDefault = "_paddingTopDefault_dk7qx_34";
+const paddingRightDefault = "_paddingRightDefault_dk7qx_38";
+const paddingBottomDefault = "_paddingBottomDefault_dk7qx_42";
+const paddingLeftDefault = "_paddingLeftDefault_dk7qx_46";
+const styles = {
+  section,
+  container,
+  pageWidth,
+  fullWidth,
+  "paddingX-default": "_paddingX-default_dk7qx_24",
+  "paddingY-default": "_paddingY-default_dk7qx_29",
+  paddingTopDefault,
+  paddingRightDefault,
+  paddingBottomDefault,
+  paddingLeftDefault
+};
+const sectionPaddingVariants = cva("", {
+  variants: {
+    paddingX: {
+      default: styles["paddingX-default"]
+    },
+    paddingY: {
+      default: styles["paddingY-default"]
+    },
+    paddingTop: {
+      default: styles["paddingTopDefault"]
+    },
+    paddingRight: {
+      default: styles["paddingRightDefault"]
+    },
+    paddingBottom: {
+      default: styles["paddingBottomDefault"]
+    },
+    paddingLeft: {
+      default: styles["paddingLeftDefault"]
+    }
+  }
+});
+const Container = ({
+  children,
+  className,
+  containerMaxWidth = "page"
+}) => /* @__PURE__ */ jsx("div", { className: `${styles.container} ${styles[`${containerMaxWidth}Width`]} ${className || ""}`, children });
+const Section = forwardRef(({
+  children,
+  containerMaxWidth = "page",
+  backgroundColour,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingX = "default",
+  paddingY = "default",
+  style,
+  className
+}, ref) => {
+  return /* @__PURE__ */ jsx("section", { ref, className: `
+        ${styles.section}
+        ${paddingVariants({
+    paddingTop: paddingTop !== "default" ? paddingTop : void 0,
+    paddingBottom: paddingBottom !== "default" ? paddingBottom : void 0,
+    paddingLeft: paddingLeft !== "default" ? paddingLeft : void 0,
+    paddingRight: paddingRight !== "default" ? paddingRight : void 0,
+    paddingX: paddingX !== "default" ? paddingX : void 0,
+    paddingY: paddingY !== "default" ? paddingY : void 0
+  })}
+        ${sectionPaddingVariants({
+    paddingTop: paddingTop === "default" ? "default" : void 0,
+    paddingBottom: paddingBottom === "default" ? "default" : void 0,
+    paddingLeft: paddingLeft === "default" ? "default" : void 0,
+    paddingRight: paddingRight === "default" ? "default" : void 0,
+    paddingX: paddingX === "default" ? "default" : void 0,
+    paddingY: paddingY === "default" ? "default" : void 0
+  })}
+        ${backgroundColorVariants({
+    backgroundColour
+  })} 
+        ${className || ""}
+      `.trim(), style, children: React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type === Container) {
+      return React.cloneElement(child, {
+        ...child.props,
+        containerMaxWidth
+      });
+    }
+    return child;
+  }) });
+});
+Section.displayName = "Section";
+Section.Container = Container;
+export {
+  Section as default
+};
+//# sourceMappingURL=Section.js.map

package/dist/components/Section/Section.js.map

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

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

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

package/dist/components/Section/index.js

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

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

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

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_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";
+import '../../assets/SubHeading.css';const subHeading$1 = "_subHeading_up5r4_1";
+const xs = "_xs_up5r4_8";
+const sm = "_sm_up5r4_15";
+const start = "_start_up5r4_22";
+const center = "_center_up5r4_26";
+const end = "_end_up5r4_30";
 const styles = {
   subHeading: subHeading$1,
   xs,
@@ -18,8 +18,8 @@ const styles = {
 const subHeading = cva(styles.subHeading, {
   variants: {
     size: {
-      "xs": styles.xs,
-      "sm": styles.sm
+      xs: styles.xs,
+      sm: styles.sm
     },
     textAlign: {
       start: styles.start,