@alto-avios/alto-ui 2.3.3 → 3.0.0

package/dist/utils/fgColour/fgColor.js

@@ -1,39 +1,39 @@
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import '../../assets/fgColor.css';const styles = {
-  "fgColor-primary": "_fgColor-primary_1njr6_1",
-  "fgColor-secondary": "_fgColor-secondary_1njr6_5",
-  "fgColor-accent-primary": "_fgColor-accent-primary_1njr6_9",
-  "fgColor-accent-secondary": "_fgColor-accent-secondary_1njr6_13",
-  "fgColor-accent-on-vibrant": "_fgColor-accent-on-vibrant_1njr6_17",
-  "fgColor-accent-on-vibrant-accent": "_fgColor-accent-on-vibrant-accent_1njr6_21",
-  "fgColor-accent-on-subtle": "_fgColor-accent-on-subtle_1njr6_25",
-  "fgColor-accent-on-deep": "_fgColor-accent-on-deep_1njr6_29",
-  "fgColor-critical-primary": "_fgColor-critical-primary_1njr6_33",
-  "fgColor-critical-on-vibrant": "_fgColor-critical-on-vibrant_1njr6_37",
-  "fgColor-critical-on-subtle": "_fgColor-critical-on-subtle_1njr6_41",
-  "fgColor-warning-primary": "_fgColor-warning-primary_1njr6_45",
-  "fgColor-warning-on-vibrant": "_fgColor-warning-on-vibrant_1njr6_49",
-  "fgColor-warning-on-subtle": "_fgColor-warning-on-subtle_1njr6_53",
-  "fgColor-caution-primary": "_fgColor-caution-primary_1njr6_57",
-  "fgColor-caution-on-vibrant": "_fgColor-caution-on-vibrant_1njr6_61",
-  "fgColor-caution-on-subtle": "_fgColor-caution-on-subtle_1njr6_65",
-  "fgColor-success-primary": "_fgColor-success-primary_1njr6_69",
-  "fgColor-success-on-vibrant": "_fgColor-success-on-vibrant_1njr6_73",
-  "fgColor-success-on-subtle": "_fgColor-success-on-subtle_1njr6_77",
-  "fgColor-information-primary": "_fgColor-information-primary_1njr6_81",
-  "fgColor-information-on-vibrant": "_fgColor-information-on-vibrant_1njr6_85",
-  "fgColor-information-on-subtle": "_fgColor-information-on-subtle_1njr6_89",
-  "fgColor-inverse-primary": "_fgColor-inverse-primary_1njr6_93",
-  "fgColor-inverse-on-vibrant": "_fgColor-inverse-on-vibrant_1njr6_97",
-  "fgColor-inverse-on-subtle": "_fgColor-inverse-on-subtle_1njr6_101",
-  "fgColor-white-primary": "_fgColor-white-primary_1njr6_105",
-  "fgColor-white-on-vibrant": "_fgColor-white-on-vibrant_1njr6_109",
-  "fgColor-white-on-subtle": "_fgColor-white-on-subtle_1njr6_113",
-  "fgColor-disabled-primary": "_fgColor-disabled-primary_1njr6_117",
-  "fgColor-disabled-on-vibrant": "_fgColor-disabled-on-vibrant_1njr6_121",
-  "fgColor-disabled-on-subtle": "_fgColor-disabled-on-subtle_1njr6_125",
-  "fgColor-sale-primary": "_fgColor-sale-primary_1njr6_129",
-  "fgColor-sale-on-vibrant": "_fgColor-sale-on-vibrant_1njr6_133"
+  "fgColor-primary": "_fgColor-primary_qlmrn_1",
+  "fgColor-secondary": "_fgColor-secondary_qlmrn_5",
+  "fgColor-accent-primary": "_fgColor-accent-primary_qlmrn_9",
+  "fgColor-accent-secondary": "_fgColor-accent-secondary_qlmrn_13",
+  "fgColor-accent-on-vibrant": "_fgColor-accent-on-vibrant_qlmrn_17",
+  "fgColor-accent-on-vibrant-accent": "_fgColor-accent-on-vibrant-accent_qlmrn_21",
+  "fgColor-accent-on-subtle": "_fgColor-accent-on-subtle_qlmrn_25",
+  "fgColor-accent-on-deep": "_fgColor-accent-on-deep_qlmrn_29",
+  "fgColor-critical-primary": "_fgColor-critical-primary_qlmrn_33",
+  "fgColor-critical-on-vibrant": "_fgColor-critical-on-vibrant_qlmrn_37",
+  "fgColor-critical-on-subtle": "_fgColor-critical-on-subtle_qlmrn_41",
+  "fgColor-warning-primary": "_fgColor-warning-primary_qlmrn_45",
+  "fgColor-warning-on-vibrant": "_fgColor-warning-on-vibrant_qlmrn_49",
+  "fgColor-warning-on-subtle": "_fgColor-warning-on-subtle_qlmrn_53",
+  "fgColor-caution-primary": "_fgColor-caution-primary_qlmrn_57",
+  "fgColor-caution-on-vibrant": "_fgColor-caution-on-vibrant_qlmrn_61",
+  "fgColor-caution-on-subtle": "_fgColor-caution-on-subtle_qlmrn_65",
+  "fgColor-success-primary": "_fgColor-success-primary_qlmrn_69",
+  "fgColor-success-on-vibrant": "_fgColor-success-on-vibrant_qlmrn_73",
+  "fgColor-success-on-subtle": "_fgColor-success-on-subtle_qlmrn_77",
+  "fgColor-information-primary": "_fgColor-information-primary_qlmrn_81",
+  "fgColor-information-on-vibrant": "_fgColor-information-on-vibrant_qlmrn_85",
+  "fgColor-information-on-subtle": "_fgColor-information-on-subtle_qlmrn_89",
+  "fgColor-inverse-primary": "_fgColor-inverse-primary_qlmrn_93",
+  "fgColor-inverse-on-vibrant": "_fgColor-inverse-on-vibrant_qlmrn_97",
+  "fgColor-inverse-on-subtle": "_fgColor-inverse-on-subtle_qlmrn_101",
+  "fgColor-white-primary": "_fgColor-white-primary_qlmrn_105",
+  "fgColor-white-on-vibrant": "_fgColor-white-on-vibrant_qlmrn_109",
+  "fgColor-white-on-subtle": "_fgColor-white-on-subtle_qlmrn_113",
+  "fgColor-disabled-primary": "_fgColor-disabled-primary_qlmrn_117",
+  "fgColor-disabled-on-vibrant": "_fgColor-disabled-on-vibrant_qlmrn_121",
+  "fgColor-disabled-on-subtle": "_fgColor-disabled-on-subtle_qlmrn_125",
+  "fgColor-sale-primary": "_fgColor-sale-primary_qlmrn_129",
+  "fgColor-sale-on-vibrant": "_fgColor-sale-on-vibrant_qlmrn_133"
 };
 const fgColorVariants = cva("", {
   variants: {

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

@@ -1,12 +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;
+    justifyContent?: "end" | "start" | "center" | null | undefined;
     flexWrap?: "wrap" | "nowrap" | null | undefined;
     flexGrow?: 0 | 1 | null | undefined;
     flexShrink?: 0 | 1 | null | undefined;
     flexDirection?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
-    alignItems?: "start" | "center" | "end" | null | undefined;
+    alignItems?: "end" | "start" | "center" | null | undefined;
     gap?: "lg" | "sm" | "xs" | "md" | "5xs" | "4xs" | "3xs" | "2xs" | "xl" | "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

@@ -117,7 +117,9 @@ const flexVariants = cva("", {
     }
   },
   defaultVariants: {
-    display: "flex"
+    display: "flex",
+    alignItems: "start",
+    justifyContent: "start"
   }
 });
 export {

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

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

package/dist/utils/focus/focusStyles.d.ts

@@ -1,3 +1,3 @@
 export declare const focusStyleVariants: (props?: ({
-    focusStyle?: "default" | "white" | null | undefined;
+    focusStyle?: "white" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/utils/focus/focusStyles.js

@@ -1,6 +1,6 @@
 import { c as cva } from "../../index-Bi3v_EjJ.js";
-import '../../assets/focusStyles.css';const defaultFocus = "_defaultFocus_1xolq_1";
-const whiteFocus = "_whiteFocus_1xolq_5";
+import '../../assets/focusStyles.css';const defaultFocus = "_defaultFocus_19nac_1";
+const whiteFocus = "_whiteFocus_19nac_5";
 const styles = {
   defaultFocus,
   whiteFocus

package/dist/utils/forms/formProps.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+export type FormProps = Pick<AriaButtonProps, 'form' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'name' | 'value'>;

package/dist/utils/forms/formProps.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=formProps.js.map

package/dist/utils/forms/formProps.js.map

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

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

@@ -1,13 +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;
+    padding?: "lg" | "sm" | "xs" | "md" | "5xs" | "4xs" | "3xs" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingX?: "lg" | "sm" | "xs" | "md" | "5xs" | "4xs" | "3xs" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingY?: "lg" | "sm" | "xs" | "md" | "5xs" | "4xs" | "3xs" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingTop?: "lg" | "sm" | "xs" | "md" | "5xs" | "4xs" | "3xs" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingRight?: "lg" | "sm" | "xs" | "md" | "5xs" | "4xs" | "3xs" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingBottom?: "lg" | "sm" | "xs" | "md" | "5xs" | "4xs" | "3xs" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    paddingLeft?: "lg" | "sm" | "xs" | "md" | "5xs" | "4xs" | "3xs" | "2xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | 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

@@ -1,82 +1,307 @@
 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";
+import '../../assets/padding.css';const padding5xs = "_padding5xs_16erl_2";
+const padding4xs = "_padding4xs_16erl_5";
+const padding3xs = "_padding3xs_16erl_8";
+const padding2xs = "_padding2xs_16erl_11";
+const paddingXs = "_paddingXs_16erl_14";
+const paddingSm = "_paddingSm_16erl_17";
+const paddingMd = "_paddingMd_16erl_20";
+const paddingLg = "_paddingLg_16erl_23";
+const paddingXl = "_paddingXl_16erl_26";
+const padding2xl = "_padding2xl_16erl_29";
+const padding3xl = "_padding3xl_16erl_32";
+const padding4xl = "_padding4xl_16erl_35";
+const padding5xl = "_padding5xl_16erl_38";
+const padding6xl = "_padding6xl_16erl_41";
+const paddingTop5xs = "_paddingTop5xs_16erl_162";
+const paddingTop4xs = "_paddingTop4xs_16erl_165";
+const paddingTop3xs = "_paddingTop3xs_16erl_168";
+const paddingTop2xs = "_paddingTop2xs_16erl_171";
+const paddingTopXs = "_paddingTopXs_16erl_174";
+const paddingTopSm = "_paddingTopSm_16erl_177";
+const paddingTopMd = "_paddingTopMd_16erl_180";
+const paddingTopLg = "_paddingTopLg_16erl_183";
+const paddingTopXl = "_paddingTopXl_16erl_186";
+const paddingTop2xl = "_paddingTop2xl_16erl_189";
+const paddingTop3xl = "_paddingTop3xl_16erl_192";
+const paddingTop4xl = "_paddingTop4xl_16erl_195";
+const paddingTop5xl = "_paddingTop5xl_16erl_198";
+const paddingTop6xl = "_paddingTop6xl_16erl_201";
+const paddingRight5xs = "_paddingRight5xs_16erl_206";
+const paddingRight4xs = "_paddingRight4xs_16erl_209";
+const paddingRight3xs = "_paddingRight3xs_16erl_212";
+const paddingRight2xs = "_paddingRight2xs_16erl_215";
+const paddingRightXs = "_paddingRightXs_16erl_218";
+const paddingRightSm = "_paddingRightSm_16erl_221";
+const paddingRightMd = "_paddingRightMd_16erl_224";
+const paddingRightLg = "_paddingRightLg_16erl_227";
+const paddingRightXl = "_paddingRightXl_16erl_230";
+const paddingRight2xl = "_paddingRight2xl_16erl_233";
+const paddingRight3xl = "_paddingRight3xl_16erl_236";
+const paddingRight4xl = "_paddingRight4xl_16erl_239";
+const paddingRight5xl = "_paddingRight5xl_16erl_242";
+const paddingRight6xl = "_paddingRight6xl_16erl_245";
+const paddingBottom5xs = "_paddingBottom5xs_16erl_250";
+const paddingBottom4xs = "_paddingBottom4xs_16erl_253";
+const paddingBottom3xs = "_paddingBottom3xs_16erl_256";
+const paddingBottom2xs = "_paddingBottom2xs_16erl_259";
+const paddingBottomXs = "_paddingBottomXs_16erl_262";
+const paddingBottomSm = "_paddingBottomSm_16erl_265";
+const paddingBottomMd = "_paddingBottomMd_16erl_268";
+const paddingBottomLg = "_paddingBottomLg_16erl_271";
+const paddingBottomXl = "_paddingBottomXl_16erl_274";
+const paddingBottom2xl = "_paddingBottom2xl_16erl_277";
+const paddingBottom3xl = "_paddingBottom3xl_16erl_280";
+const paddingBottom4xl = "_paddingBottom4xl_16erl_283";
+const paddingBottom5xl = "_paddingBottom5xl_16erl_286";
+const paddingBottom6xl = "_paddingBottom6xl_16erl_289";
+const paddingLeft5xs = "_paddingLeft5xs_16erl_294";
+const paddingLeft4xs = "_paddingLeft4xs_16erl_297";
+const paddingLeft3xs = "_paddingLeft3xs_16erl_300";
+const paddingLeft2xs = "_paddingLeft2xs_16erl_303";
+const paddingLeftXs = "_paddingLeftXs_16erl_306";
+const paddingLeftSm = "_paddingLeftSm_16erl_309";
+const paddingLeftMd = "_paddingLeftMd_16erl_312";
+const paddingLeftLg = "_paddingLeftLg_16erl_315";
+const paddingLeftXl = "_paddingLeftXl_16erl_318";
+const paddingLeft2xl = "_paddingLeft2xl_16erl_321";
+const paddingLeft3xl = "_paddingLeft3xl_16erl_324";
+const paddingLeft4xl = "_paddingLeft4xl_16erl_327";
+const paddingLeft5xl = "_paddingLeft5xl_16erl_330";
+const paddingLeft6xl = "_paddingLeft6xl_16erl_333";
 const styles = {
-  paddingLg,
-  paddingMd,
+  padding5xs,
+  padding4xs,
+  padding3xs,
+  padding2xs,
+  paddingXs,
   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,
+  paddingMd,
+  paddingLg,
+  paddingXl,
+  padding2xl,
+  padding3xl,
+  padding4xl,
+  padding5xl,
+  padding6xl,
+  "paddingX-5xs": "_paddingX-5xs_16erl_46",
+  "paddingX-4xs": "_paddingX-4xs_16erl_50",
+  "paddingX-3xs": "_paddingX-3xs_16erl_54",
+  "paddingX-2xs": "_paddingX-2xs_16erl_58",
+  "paddingX-xs": "_paddingX-xs_16erl_62",
+  "paddingX-sm": "_paddingX-sm_16erl_66",
+  "paddingX-md": "_paddingX-md_16erl_70",
+  "paddingX-lg": "_paddingX-lg_16erl_74",
+  "paddingX-xl": "_paddingX-xl_16erl_78",
+  "paddingX-2xl": "_paddingX-2xl_16erl_82",
+  "paddingX-3xl": "_paddingX-3xl_16erl_86",
+  "paddingX-4xl": "_paddingX-4xl_16erl_90",
+  "paddingX-5xl": "_paddingX-5xl_16erl_94",
+  "paddingX-6xl": "_paddingX-6xl_16erl_98",
+  "paddingY-5xs": "_paddingY-5xs_16erl_104",
+  "paddingY-4xs": "_paddingY-4xs_16erl_108",
+  "paddingY-3xs": "_paddingY-3xs_16erl_112",
+  "paddingY-2xs": "_paddingY-2xs_16erl_116",
+  "paddingY-xs": "_paddingY-xs_16erl_120",
+  "paddingY-sm": "_paddingY-sm_16erl_124",
+  "paddingY-md": "_paddingY-md_16erl_128",
+  "paddingY-lg": "_paddingY-lg_16erl_132",
+  "paddingY-xl": "_paddingY-xl_16erl_136",
+  "paddingY-2xl": "_paddingY-2xl_16erl_140",
+  "paddingY-3xl": "_paddingY-3xl_16erl_144",
+  "paddingY-4xl": "_paddingY-4xl_16erl_148",
+  "paddingY-5xl": "_paddingY-5xl_16erl_152",
+  "paddingY-6xl": "_paddingY-6xl_16erl_156",
+  paddingTop5xs,
+  paddingTop4xs,
+  paddingTop3xs,
+  paddingTop2xs,
+  paddingTopXs,
   paddingTopSm,
-  paddingRightLg,
-  paddingRightMd,
+  paddingTopMd,
+  paddingTopLg,
+  paddingTopXl,
+  paddingTop2xl,
+  paddingTop3xl,
+  paddingTop4xl,
+  paddingTop5xl,
+  paddingTop6xl,
+  paddingRight5xs,
+  paddingRight4xs,
+  paddingRight3xs,
+  paddingRight2xs,
+  paddingRightXs,
   paddingRightSm,
-  paddingBottomLg,
-  paddingBottomMd,
+  paddingRightMd,
+  paddingRightLg,
+  paddingRightXl,
+  paddingRight2xl,
+  paddingRight3xl,
+  paddingRight4xl,
+  paddingRight5xl,
+  paddingRight6xl,
+  paddingBottom5xs,
+  paddingBottom4xs,
+  paddingBottom3xs,
+  paddingBottom2xs,
+  paddingBottomXs,
   paddingBottomSm,
-  paddingLeftLg,
+  paddingBottomMd,
+  paddingBottomLg,
+  paddingBottomXl,
+  paddingBottom2xl,
+  paddingBottom3xl,
+  paddingBottom4xl,
+  paddingBottom5xl,
+  paddingBottom6xl,
+  paddingLeft5xs,
+  paddingLeft4xs,
+  paddingLeft3xs,
+  paddingLeft2xs,
+  paddingLeftXs,
+  paddingLeftSm,
   paddingLeftMd,
-  paddingLeftSm
+  paddingLeftLg,
+  paddingLeftXl,
+  paddingLeft2xl,
+  paddingLeft3xl,
+  paddingLeft4xl,
+  paddingLeft5xl,
+  paddingLeft6xl
 };
 const paddingControl = {
   control: "select",
-  options: [null, "lg", "md", "sm"]
+  options: [
+    null,
+    "5xs",
+    "4xs",
+    "3xs",
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl"
+  ]
 };
 const paddingVariants = cva("", {
   variants: {
     padding: {
-      lg: styles["paddingLg"],
+      "5xs": styles["padding5xs"],
+      "4xs": styles["padding4xs"],
+      "3xs": styles["padding3xs"],
+      "2xs": styles["padding2xs"],
+      xs: styles["paddingXs"],
+      sm: styles["paddingSm"],
       md: styles["paddingMd"],
-      sm: styles["paddingSm"]
+      lg: styles["paddingLg"],
+      xl: styles["paddingXl"],
+      "2xl": styles["padding2xl"],
+      "3xl": styles["padding3xl"],
+      "4xl": styles["padding4xl"],
+      "5xl": styles["padding5xl"],
+      "6xl": styles["padding6xl"]
     },
     paddingX: {
-      lg: styles["paddingX-lg"],
+      "5xs": styles["paddingX-5xs"],
+      "4xs": styles["paddingX-4xs"],
+      "3xs": styles["paddingX-3xs"],
+      "2xs": styles["paddingX-2xs"],
+      xs: styles["paddingX-xs"],
+      sm: styles["paddingX-sm"],
       md: styles["paddingX-md"],
-      sm: styles["paddingX-sm"]
+      lg: styles["paddingX-lg"],
+      xl: styles["paddingX-xl"],
+      "2xl": styles["paddingX-2xl"],
+      "3xl": styles["paddingX-3xl"],
+      "4xl": styles["paddingX-4xl"],
+      "5xl": styles["paddingX-5xl"],
+      "6xl": styles["paddingX-6xl"]
     },
     paddingY: {
-      lg: styles["paddingY-lg"],
+      "5xs": styles["paddingY-5xs"],
+      "4xs": styles["paddingY-4xs"],
+      "3xs": styles["paddingY-3xs"],
+      "2xs": styles["paddingY-2xs"],
+      xs: styles["paddingY-xs"],
+      sm: styles["paddingY-sm"],
       md: styles["paddingY-md"],
-      sm: styles["paddingY-sm"]
+      lg: styles["paddingY-lg"],
+      xl: styles["paddingY-xl"],
+      "2xl": styles["paddingY-2xl"],
+      "3xl": styles["paddingY-3xl"],
+      "4xl": styles["paddingY-4xl"],
+      "5xl": styles["paddingY-5xl"],
+      "6xl": styles["paddingY-6xl"]
     },
     paddingTop: {
-      lg: styles["paddingTopLg"],
+      "5xs": styles["paddingTop5xs"],
+      "4xs": styles["paddingTop4xs"],
+      "3xs": styles["paddingTop3xs"],
+      "2xs": styles["paddingTop2xs"],
+      xs: styles["paddingTopXs"],
+      sm: styles["paddingTopSm"],
       md: styles["paddingTopMd"],
-      sm: styles["paddingTopSm"]
+      lg: styles["paddingTopLg"],
+      xl: styles["paddingTopXl"],
+      "2xl": styles["paddingTop2xl"],
+      "3xl": styles["paddingTop3xl"],
+      "4xl": styles["paddingTop4xl"],
+      "5xl": styles["paddingTop5xl"],
+      "6xl": styles["paddingTop6xl"]
     },
     paddingRight: {
-      lg: styles["paddingRightLg"],
+      "5xs": styles["paddingRight5xs"],
+      "4xs": styles["paddingRight4xs"],
+      "3xs": styles["paddingRight3xs"],
+      "2xs": styles["paddingRight2xs"],
+      xs: styles["paddingRightXs"],
+      sm: styles["paddingRightSm"],
       md: styles["paddingRightMd"],
-      sm: styles["paddingRightSm"]
+      lg: styles["paddingRightLg"],
+      xl: styles["paddingRightXl"],
+      "2xl": styles["paddingRight2xl"],
+      "3xl": styles["paddingRight3xl"],
+      "4xl": styles["paddingRight4xl"],
+      "5xl": styles["paddingRight5xl"],
+      "6xl": styles["paddingRight6xl"]
     },
     paddingBottom: {
-      lg: styles["paddingBottomLg"],
+      "5xs": styles["paddingBottom5xs"],
+      "4xs": styles["paddingBottom4xs"],
+      "3xs": styles["paddingBottom3xs"],
+      "2xs": styles["paddingBottom2xs"],
+      xs: styles["paddingBottomXs"],
+      sm: styles["paddingBottomSm"],
       md: styles["paddingBottomMd"],
-      sm: styles["paddingBottomSm"]
+      lg: styles["paddingBottomLg"],
+      xl: styles["paddingBottomXl"],
+      "2xl": styles["paddingBottom2xl"],
+      "3xl": styles["paddingBottom3xl"],
+      "4xl": styles["paddingBottom4xl"],
+      "5xl": styles["paddingBottom5xl"],
+      "6xl": styles["paddingBottom6xl"]
     },
     paddingLeft: {
-      lg: styles["paddingLeftLg"],
+      "5xs": styles["paddingLeft5xs"],
+      "4xs": styles["paddingLeft4xs"],
+      "3xs": styles["paddingLeft3xs"],
+      "2xs": styles["paddingLeft2xs"],
+      xs: styles["paddingLeftXs"],
+      sm: styles["paddingLeftSm"],
       md: styles["paddingLeftMd"],
-      sm: styles["paddingLeftSm"]
+      lg: styles["paddingLeftLg"],
+      xl: styles["paddingLeftXl"],
+      "2xl": styles["paddingLeft2xl"],
+      "3xl": styles["paddingLeft3xl"],
+      "4xl": styles["paddingLeft4xl"],
+      "5xl": styles["paddingLeft5xl"],
+      "6xl": styles["paddingLeft6xl"]
     }
   }
 });

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

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

package/dist/utils/spaceToken/spaceToken.d.ts

@@ -0,0 +1,3 @@
+export declare const SPACE_TOKENS: readonly ["default", "5xs", "4xs", "3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"];
+export type SpaceToken = (typeof SPACE_TOKENS)[number];
+export declare const getSpaceValue: (token: SpaceToken) => string;

package/dist/utils/spaceToken/spaceToken.js

@@ -0,0 +1,25 @@
+const SPACE_TOKENS = [
+  "default",
+  "5xs",
+  "4xs",
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl"
+];
+const getSpaceValue = (token) => {
+  return token === "default" ? "var(--alto-grid-gutter-default)" : `var(--alto-sem-space-${token})`;
+};
+export {
+  SPACE_TOKENS,
+  getSpaceValue
+};
+//# sourceMappingURL=spaceToken.js.map

package/dist/utils/spaceToken/spaceToken.js.map

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

package/dist/utils/stories/iconPropsArgTypes.js

@@ -2,19 +2,20 @@ const iconPropsArgTypes = {
   table: {
     type: {
       summary: "Icon Props",
-      detail: `{
-        iconName: string;
-        iconPrefix?: 'fas' | 'far' | 'fal' | 'fab' | 'fad';
-        iconSize?: 'lg' | 'sm' | '1x' | 'xs' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
-        flip?: 'horizontal' | 'vertical' | 'both';
-        fixedWidth?: boolean;
-        listItem?: boolean;
-        border?: boolean;
-        rotation?: 90 | 180 | 270;
-        pull?: 'left' | 'right';
-        ariaLabel?: string;
-        className?: string;
-      }`
+      detail: `
+{
+  iconName: string;
+  iconPrefix?: 'fas' | 'far' | 'fal' | 'fab' | 'fad';
+  iconSize?: 'lg' | 'sm' | '1x' | 'xs' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
+  flip?: 'horizontal' | 'vertical' | 'both';
+  fixedWidth?: boolean;
+  listItem?: boolean;
+  border?: boolean;
+  rotation?: 90 | 180 | 270;
+  pull?: 'left' | 'right';
+  ariaLabel?: string;
+  className?: string;
+}`
     }
   }
 };

package/dist/utils/stories/iconPropsArgTypes.js.map

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