@iress-oss/ids-components 6.0.0-alpha.1 → 6.0.0-alpha.2

package/dist/src/components/Alert/Alert.styles.d.ts

@@ -108,7 +108,7 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
                 borderBottomLeftRadius: "radius.000";
                 borderWidth: "[0]";
                 borderLeftWidth: "[2.5px]";
-                paddingBlock: "spacing.400";
+                paddingBlock: "spacing.4";
             };
         };
         'site-wide': {

package/dist/src/components/Badge/Badge.styles.d.ts

@@ -3,8 +3,8 @@ export declare const badge: import('../../styled-system/types').SlotRecipeRuntim
         true: {
             badge: {
                 position: "absolute";
-                insetBlockStart: "spacing.000";
-                insetInlineEnd: "spacing.000";
+                insetBlockStart: "spacing.0";
+                insetInlineEnd: "spacing.0";
                 zIndex: "100";
                 transformOrigin: "100% 0";
                 borderRadius: "radius.100";

package/dist/src/components/Card/Card.styles.d.ts

@@ -56,7 +56,7 @@ export declare const card: import('../../styled-system/types').SlotRecipeRuntime
                 gridTemplateAreas: "\"prepend body topRight\" \"footer footer footer\"";
                 gridAutoColumns: "[minmax(0, min-content) auto min-content]";
                 gridAutoRows: "[auto min-content]";
-                padding: "spacing.000";
+                padding: "spacing.0";
             };
         };
     };
@@ -69,7 +69,7 @@ export declare const card: import('../../styled-system/types').SlotRecipeRuntime
     hasMedia: {
         true: {
             root: {
-                padding: "spacing.000";
+                padding: "spacing.0";
             };
         };
     };

package/dist/src/components/Checkbox/Checkbox.styles.d.ts

@@ -5,7 +5,7 @@ export declare const checkbox: import('../../styled-system/types').SlotRecipeRun
                 display: "inline-block";
             };
             mark: {
-                marginInlineEnd: "spacing.000";
+                marginInlineEnd: "spacing.0";
             };
             labelSpan: {
                 srOnly: true;
@@ -16,7 +16,7 @@ export declare const checkbox: import('../../styled-system/types').SlotRecipeRun
         true: {
             label: {
                 position: "relative";
-                padding: "spacing.000";
+                padding: "spacing.0";
                 width: "[100%]";
                 cursor: "pointer";
                 borderRadius: "radius.system.form";
@@ -45,7 +45,7 @@ export declare const checkbox: import('../../styled-system/types').SlotRecipeRun
                 borderStyle: "solid";
                 borderWidth: "1px";
                 borderRadius: "radius.system.form";
-                padding: "spacing.300";
+                padding: "spacing.3";
             };
         };
     };

package/dist/src/components/CheckboxGroup/CheckboxGroup.styles.d.ts

@@ -3,7 +3,7 @@ export declare const checkboxGroup: import('../../styled-system/types').RecipeRu
         block: {
             display: "flex";
             flexWrap: "wrap";
-            rowGap: "spacing.200";
+            rowGap: "spacing.2";
             '& label': {
                 display: "flex";
                 flexBasis: "[100%]";
@@ -18,7 +18,7 @@ export declare const checkboxGroup: import('../../styled-system/types').RecipeRu
         stack: {
             display: "flex";
             flexWrap: "wrap";
-            rowGap: "spacing.200";
+            rowGap: "spacing.2";
             '& > *': {
                 flexBasis: "[100%]";
             };
@@ -27,8 +27,8 @@ export declare const checkboxGroup: import('../../styled-system/types').RecipeRu
             display: "flex";
             flexFlow: "row wrap";
             width: "[100%]";
-            rowGap: "spacing.200";
-            columnGap: "spacing.400";
+            rowGap: "spacing.2";
+            columnGap: "spacing.4";
         };
     };
     readOnly: {

package/dist/src/components/Expander/Expander.styles.d.ts

@@ -7,11 +7,11 @@ export declare const expander: import('../../styled-system/types').SlotRecipeRun
                 alignItems: "flex-end";
                 width: "[100%]";
                 textStyle: "typography.heading.4";
-                py: "spacing.300";
+                py: "spacing.3";
                 borderBottom: "divider";
                 transition: "[all 0.2s ease-in-out]";
                 _after: {
-                    mr: "spacing.200";
+                    mr: "spacing.2";
                 };
                 _hover: {
                     color: "colour.primary.text";

package/dist/src/components/Field/Field.styles.d.ts

@@ -6,7 +6,7 @@ export declare const field: import('../../styled-system/types').SlotRecipeRuntim
                 gridTemplateColumns: "auto 1fr";
                 gridTemplateRows: "auto auto";
                 gridTemplateAreas: "\"label field\" \". footer\"";
-                columnGap: "spacing.200";
+                columnGap: "spacing.2";
                 alignItems: "center";
             };
             labelContainer: {
@@ -18,7 +18,7 @@ export declare const field: import('../../styled-system/types').SlotRecipeRuntim
             };
             footer: {
                 gridArea: "footer";
-                mt: "spacing.100";
+                mt: "spacing.1";
             };
             label: {
                 mb: "none";
@@ -37,7 +37,7 @@ export declare const field: import('../../styled-system/types').SlotRecipeRuntim
     hasHint: {
         true: {
             label: {
-                mb: "spacing.000";
+                mb: "spacing.0";
             };
         };
     };
@@ -78,10 +78,10 @@ export declare const field: import('../../styled-system/types').SlotRecipeRuntim
             };
             footer: {
                 position: "absolute";
-                left: "spacing.000";
-                right: "spacing.000";
+                left: "spacing.0";
+                right: "spacing.0";
                 top: "[100%]";
-                mt: "spacing.100";
+                mt: "spacing.1";
             };
         };
     };

package/dist/src/components/Inline/Inline.d.ts

@@ -1,6 +1,5 @@
-import { HorizontalAligns, VerticalAligns, IressStyledProps, ResponsiveProp } from '../../types';
+import { HorizontalAligns, VerticalAligns, IressStyledProps, ResponsiveProp, PositiveSpacingToken } from '../../types';
 import { ReactNode } from 'react';
-import { PositiveSpacingToken } from '../../../theme-preset/tokens/spacing';
 export interface IressInlineProps extends IressStyledProps {
     /**
      * Content to be displayed inline.

package/dist/src/components/Menu/Menu.styles.d.ts

@@ -33,8 +33,8 @@ export declare const menu: import('../../styled-system/types').SlotRecipeRuntime
     insidePopover: {
         true: {
             root: {
-                my: "spacing.200";
-                px: "spacing.200";
+                my: "spacing.2";
+                px: "spacing.2";
             };
         };
     };
@@ -52,13 +52,13 @@ export declare const menu: import('../../styled-system/types').SlotRecipeRuntime
                 display: "inline-flex";
                 flexWrap: "wrap";
                 flexDirection: "column";
-                rowGap: "spacing.100";
+                rowGap: "spacing.1";
             };
         };
         inline: {
             root: {
                 display: "inline-flex";
-                columnGap: "spacing.100";
+                columnGap: "spacing.1";
                 flexWrap: "wrap";
             };
             item: {
@@ -71,7 +71,7 @@ export declare const menu: import('../../styled-system/types').SlotRecipeRuntime
             root: {
                 display: "flex";
                 flexDirection: "row";
-                columnGap: "spacing.100";
+                columnGap: "spacing.1";
                 '& > :not(hr)': {
                     flex: "1";
                     textAlign: "center";

package/dist/src/components/Modal/Modal.styles.d.ts

@@ -12,7 +12,7 @@ export declare const modal: import('../../styled-system/types').SlotRecipeRuntim
             modal: {
                 display: "flex";
                 flexDirection: "column";
-                maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]";
+                maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]";
                 '@media (min-height: 600px)': {
                     maxHeight: "[calc(100vh - (100px * 2))]";
                 };
@@ -22,7 +22,7 @@ export declare const modal: import('../../styled-system/types').SlotRecipeRuntim
                 flex: "[1]";
                 overflowX: "hidden";
                 overflowY: "auto";
-                maxHeight: "[calc(100vh - ({spacing.spacing.700} * 2))]";
+                maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]";
                 '@media (min-height: 600px)': {
                     maxHeight: "[calc(100vh - (100px * 2))]";
                 };

package/dist/src/components/Radio/Radio.styles.d.ts

@@ -23,7 +23,7 @@ export declare const radio: import('../../styled-system/types').SlotRecipeRuntim
                 borderStyle: "solid";
                 borderColor: "colour.neutral.40";
                 borderRadius: "radius.050";
-                padding: "spacing.400";
+                padding: "spacing.4";
             };
         };
     };

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

@@ -3,7 +3,7 @@ export declare const radioGroup: import('../../styled-system/types').RecipeRunti
         stack: {
             display: "inline-flex";
             flexFlow: "column wrap";
-            rowGap: "spacing.200";
+            rowGap: "spacing.2";
             '& > *': {
                 flexBasis: "[0]";
             };
@@ -11,7 +11,7 @@ export declare const radioGroup: import('../../styled-system/types').RecipeRunti
         block: {
             display: "flex";
             flexFlow: "column wrap";
-            rowGap: "spacing.200";
+            rowGap: "spacing.2";
             '& label': {
                 flexBasis: "[100%]";
             };
@@ -20,7 +20,7 @@ export declare const radioGroup: import('../../styled-system/types').RecipeRunti
             display: "flex";
             flexFlow: "row wrap";
             width: "[100%]";
-            gap: "spacing.200";
+            gap: "spacing.2";
             '& label': {
                 flexBasis: "[auto]";
                 flexGrow: "[0]";
@@ -28,7 +28,7 @@ export declare const radioGroup: import('../../styled-system/types').RecipeRunti
         };
         inlineFlex: {
             display: "inline-flex";
-            gap: "spacing.200";
+            gap: "spacing.2";
         };
         inlineEqualWidth: {
             display: "flex";

package/dist/src/components/RichSelect/RichSelect.styles.d.ts

@@ -2,37 +2,37 @@ export declare const richSelect: import('../../styled-system/types').SlotRecipeR
     width: {
         '2': {
             richSelect: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
             };
         };
         '4': {
             richSelect: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
             };
         };
         '6': {
             richSelect: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
             };
         };
         '8': {
             richSelect: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
             };
         };
         '10': {
             richSelect: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
             };
         };
         '12': {
             richSelect: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
             };
         };
         '16': {
             richSelect: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
             };
         };
         '25perc': {

package/dist/src/components/Row/Row.d.ts

@@ -1,6 +1,5 @@
-import { HorizontalAligns, IressStyledProps, ResponsiveProp, VerticalAligns } from '../../types';
+import { PositiveSpacingToken, HorizontalAligns, IressStyledProps, ResponsiveProp, VerticalAligns } from '../../types';
 import { ReactNode } from 'react';
-import { PositiveSpacingToken } from '../../../theme-preset/tokens/spacing';
 export interface IressRowProps extends IressStyledProps {
     /**
      * Any content you would like to be contained. Best used with `IressCol`.

package/dist/src/components/Select/Select.styles.d.ts

@@ -7,7 +7,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
     width: {
         '2': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.2})]";
             };
             element: {
                 width: "auto";
@@ -15,7 +15,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '4': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.4})]";
             };
             element: {
                 width: "auto";
@@ -23,7 +23,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '6': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.6})]";
             };
             element: {
                 width: "auto";
@@ -31,7 +31,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '8': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.8})]";
             };
             element: {
                 width: "auto";
@@ -39,7 +39,7 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '10': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.10})]";
             };
             element: {
                 width: "auto";
@@ -47,12 +47,12 @@ export declare const select: import('../../styled-system/types').SlotRecipeRunti
         };
         '12': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.12})]";
             };
         };
         '16': {
             wrapper: {
-                width: "[calc({spacing.spacing.200} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
+                width: "[calc({spacing.spacing.2} + calc({sizes.chevron.select} * 2) + {sizes.input.16})]";
             };
             element: {
                 width: "auto";

package/dist/src/components/Skeleton/Skeleton.styles.d.ts

@@ -11,7 +11,7 @@ export declare const skeleton: import('../../styled-system/types').RecipeRuntime
         };
         text: {
             width: "[100%]";
-            height: "[spacing.600]";
+            height: "[spacing.6]";
         };
     };
 }>;

package/dist/src/components/Slideout/Slideout.styles.d.ts

@@ -2,7 +2,7 @@ export declare const slideout: import('../../styled-system/types').SlotRecipeRun
     position: {
         right: {
             root: {
-                insetInlineEnd: "spacing.000";
+                insetInlineEnd: "spacing.0";
                 borderStartStartRadius: "radius.050";
                 borderEndStartRadius: "radius.050";
                 borderStartEndRadius: "radius.000";
@@ -14,7 +14,7 @@ export declare const slideout: import('../../styled-system/types').SlotRecipeRun
         };
         left: {
             root: {
-                insetInlineStart: "spacing.000";
+                insetInlineStart: "spacing.0";
                 borderStartStartRadius: "radius.000";
                 borderEndStartRadius: "radius.000";
                 borderStartEndRadius: "radius.050";

package/dist/src/components/Stack/Stack.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { HorizontalAligns, IressStyledProps, ResponsiveProp } from '../../types';
-import { PositiveSpacingToken } from '../../../theme-preset/tokens/spacing';
+import { PositiveSpacingToken, HorizontalAligns, IressStyledProps, ResponsiveProp } from '../../types';
 export type IressStackProps<E extends keyof React.JSX.IntrinsicElements = 'div'> = IressStyledProps<E> & {
     /**
      * Content to be separated by a gutter.

package/dist/src/components/Toaster/components/Toast/Toast.styles.d.ts

@@ -35,24 +35,24 @@ export declare const toast: import('../../../../styled-system/types').SlotRecipe
         'start-x': {
             root: {
                 insetInlineStart: "[-100%]";
-                ms: "spacing.400";
+                ms: "spacing.4";
             };
         };
         'end-x': {
             root: {
                 insetInlineEnd: "[-100%]";
-                me: "spacing.400";
+                me: "spacing.4";
             };
         };
         'start-y': {
             root: {
-                mt: "spacing.400";
+                mt: "spacing.4";
                 transform: "[translateY(-100%)]";
             };
         };
         'end-y': {
             root: {
-                mb: "spacing.400";
+                mb: "spacing.4";
                 transform: "[translateY(100%)]";
             };
         };

package/dist/src/components/Toggle/Toggle.d.ts

@@ -2,13 +2,21 @@ import { MouseEvent, ReactNode } from 'react';
 import { IressStyledProps } from '../../types';
 export interface IressToggleProps extends Omit<IressStyledProps, 'onChange'> {
     /**
-     * Sets the checked state of the Toggle.
+     * If true, the toggle on.
+     * Please use this when are rendering the toggle in controlled mode,
+     * meaning it will not change unless you explicitly set the value using `onChange` and `checked`.
      */
     checked?: boolean;
     /**
      * Provides the label for the Toggle.
      */
     children: ReactNode;
+    /**
+     * If true, the toggle will be initially rendered as off.
+     * Please use this when are rendering the toggle in uncontrolled mode,
+     * meaning the value will change automatically when the user interacts with the toggle.
+     */
+    defaultChecked?: boolean;
     /**
      * Hides the label if true (label will still be read out by screen readers).
      */
@@ -22,4 +30,4 @@ export interface IressToggleProps extends Omit<IressStyledProps, 'onChange'> {
      */
     onChange?: (checked: boolean, event: MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const IressToggle: ({ checked: checkedProp, hiddenLabel, children, layout, className, onChange, "data-testid": testid, ...restProps }: IressToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressToggle: ({ checked: checkedProp, hiddenLabel, defaultChecked, children, layout, className, onChange, "data-testid": testid, ...restProps }: IressToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Toggle/Toggle.styles.d.ts

@@ -13,8 +13,8 @@ export declare const toggle: import('../../styled-system/types').SlotRecipeRunti
                 flexDirection: "row-reverse";
             };
             label: {
-                marginInlineStart: "spacing.100";
-                marginInlineEnd: "spacing.000";
+                marginInlineStart: "spacing.1";
+                marginInlineEnd: "spacing.0";
             };
         };
         'inline-between': {
@@ -33,7 +33,7 @@ export declare const toggle: import('../../styled-system/types').SlotRecipeRunti
             };
             label: {
                 display: "block";
-                marginBlockEnd: "spacing.100";
+                marginBlockEnd: "spacing.1";
             };
         };
     };
@@ -44,7 +44,7 @@ export declare const toggle: import('../../styled-system/types').SlotRecipeRunti
                 display: "inline-block";
             };
             checkboxMark: {
-                marginInlineEnd: "spacing.100";
+                marginInlineEnd: "spacing.1";
             };
         };
     };

package/dist/src/interfaces.d.ts

@@ -1,9 +1,7 @@
 import { ReactNode } from 'react';
 import { SystemValidationStatus, PaddingSize } from './enums';
-import { FormControlValue, PaddingSizes, ResponsiveProp, SystemValidationStatuses } from './types';
-import { SpacingToken } from './styled-system/tokens';
+import { PositiveSpacingToken, FormControlValue, PaddingSizes, ResponsiveProp, SystemValidationStatuses, SpacingToken } from './types';
 import { UtilityValues } from './styled-system/types/prop-type';
-import { PositiveSpacingToken } from '../theme-preset/tokens/spacing';
 /**
  * This interface is used to ensure that the ref returned by a component is compatible with React Hook Form.
  * It provides the contract for necessary methods to interact with the third-party library, such as `blur` and `focus`.
@@ -207,7 +205,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin
      */
-    m?: ResponsiveProp<UtilityValues['margin']>;
+    m?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`my`** property is short for `margin-block`. It defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
      *
@@ -219,7 +217,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-block
      */
-    my?: ResponsiveProp<UtilityValues['marginBlock']>;
+    my?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`mx`** property is short for `margin-inline`. It is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
      *
@@ -231,7 +229,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-inline
      */
-    mx?: ResponsiveProp<UtilityValues['marginInline']>;
+    mx?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`mb`** property is short for `margin-bottom` and sets the margin area on the bottom side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
      *
@@ -243,7 +241,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
      */
-    mb?: ResponsiveProp<UtilityValues['marginBottom']>;
+    mb?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`ml`** property is short for `margin-left` and sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
      *
@@ -255,7 +253,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
      */
-    ml?: ResponsiveProp<UtilityValues['marginLeft']>;
+    ml?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`mr`** property is short for `margin-right` and sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
      *
@@ -267,7 +265,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
      */
-    mr?: ResponsiveProp<UtilityValues['marginRight']>;
+    mr?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`mt`** property is short for `margin-top` and sets the margin area on the top side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
      *
@@ -279,7 +277,7 @@ export interface IressCSSProps {
      *
      * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
      */
-    mt?: ResponsiveProp<UtilityValues['marginTop']>;
+    mt?: ResponsiveProp<SpacingToken | 'auto'>;
     /**
      * The **`noGutter`** property is used to remove the bottom margin from the last child of a component.
      * This is useful when you want to avoid extra spacing at the end of a layout.

package/dist/src/patterns/Loading/Loading.styles.d.ts

@@ -27,8 +27,8 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 left: "[50%]";
                 transform: "translate(-50%, -50%)";
                 width: "[fit-content]";
-                px: "spacing.200";
-                py: "spacing.100";
+                px: "spacing.2";
+                py: "spacing.1";
                 textStyle: "typography.body.sm";
                 bg: "colour.neutral.20";
                 color: "colour.neutral.70";
@@ -58,8 +58,8 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 zIndex: "600";
             };
             message: {
-                px: "spacing.400";
-                py: "spacing.200";
+                px: "spacing.4";
+                py: "spacing.2";
                 bg: "colour.neutral.20";
                 color: "colour.neutral.70";
                 border: "divider";
@@ -79,7 +79,7 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 width: "overlay.sm";
             };
             message: {
-                p: "spacing.1200";
+                p: "spacing.10";
             };
         };
         page: {
@@ -92,8 +92,8 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
                 opacity: number;
                 transition: "[opacity 0.2s linear]";
                 position: "absolute";
-                top: "spacing.000";
-                left: "spacing.000";
+                top: "spacing.0";
+                left: "spacing.0";
             };
             message: {
                 opacity: number;
@@ -129,10 +129,10 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
             };
             message: {
                 position: "absolute";
-                left: "spacing.000";
+                left: "spacing.0";
                 width: "[max-content]";
                 color: "colour.neutral.70";
-                padding: "spacing.200";
+                padding: "spacing.2";
                 bg: "colour.neutral.10";
                 textStyle: "typography.body.md";
                 animationStyle: "loading-fade-next";
@@ -167,7 +167,7 @@ export declare const loading: import('../../styled-system/types').SlotRecipeRunt
         true: {};
     };
 }>;
-export declare const loadingList: import('../../styled-system/types').SlotRecipeRuntimeFn<"svg" | "circle" | "marker" | "dots" | "root" | "item" | "tick", {
+export declare const loadingList: import('../../styled-system/types').SlotRecipeRuntimeFn<"tick" | "svg" | "circle" | "marker" | "dots" | "root" | "item", {
     finished: {
         true: {
             svg: {