@guardian/stand 0.0.37 → 0.0.39

package/dist/types/styleD/build/typescript/component/checkbox.d.ts

@@ -7,16 +7,16 @@ export declare const componentCheckbox: {
             display: string;
             position: string;
             gap: string;
-            'align-items': string;
+            alignItems: string;
             color: string;
             cursor: string;
             indicator: {
                 display: string;
-                'align-items': string;
-                'justify-content': string;
-                'flex-shrink': number;
+                alignItems: string;
+                justifyContent: string;
+                flexShrink: number;
                 border: string;
-                'border-radius': string;
+                borderRadius: string;
                 transition: string;
                 svg: {
                     fill: string;
@@ -30,23 +30,23 @@ export declare const componentCheckbox: {
                     height: string;
                 };
                 selected: {
-                    'background-color': string;
+                    backgroundColor: string;
                     border: string;
                     svg: {
                         fill: string;
                     };
                 };
-                ':focus-visible': {
+                focusVisible: {
                     outline: string;
-                    'outline-offset': string;
+                    outlineOffset: string;
                 };
                 error: {
-                    'background-color': string;
+                    backgroundColor: string;
                     border: string;
                 };
             };
             label: {
-                'align-self': string;
+                alignSelf: string;
             };
             disabled: {
                 color: string;
@@ -54,7 +54,7 @@ export declare const componentCheckbox: {
                 indicator: {
                     border: string;
                     selected: {
-                        'background-color': string;
+                        backgroundColor: string;
                     };
                 };
             };
@@ -83,17 +83,17 @@ export declare const componentCheckbox: {
     group: {
         shared: {
             display: string;
-            'flex-direction': string;
+            flexDirection: string;
         };
         sm: {
             gap: string;
-            'margin-top': string;
-            'margin-bottom': string;
+            marginTop: string;
+            marginBottom: string;
         };
         md: {
             gap: string;
-            'margin-top': string;
-            'margin-bottom': string;
+            marginTop: string;
+            marginBottom: string;
         };
     };
 };

package/dist/types/styleD/build/typescript/component/favicon.d.ts

@@ -8,9 +8,9 @@ export declare const componentFavicon: {
     };
     size: string;
     display: string;
-    'align-items': string;
-    'justify-content': string;
-    'user-select': string;
+    alignItems: string;
+    justifyContent: string;
+    userSelect: string;
     typography: {
         font: string;
         letterSpacing: string;

package/dist/types/styleD/build/typescript/component/form.d.ts

@@ -6,7 +6,7 @@ export declare const componentForm: {
         shared: {
             container: {
                 display: string;
-                'flex-direction': string;
+                flexDirection: string;
                 gap: string;
                 width: string;
             };

package/dist/types/styleD/build/typescript/component/grid.d.ts

@@ -5,12 +5,25 @@ export declare const componentGrid: {
     shared: {
         display: string;
         width: string;
-        columns: number;
-        gap: string;
         direction: string;
         wrap: string;
         justifyContent: string;
         alignItems: string;
     };
+    sm: {
+        columns: number;
+        gap: string;
+        padding: string;
+    };
+    md: {
+        columns: number;
+        gap: string;
+        padding: string;
+    };
+    lg: {
+        columns: number;
+        gap: string;
+        padding: string;
+    };
 };
 export type ComponentGrid = typeof componentGrid;

package/dist/types/styleD/build/typescript/component/icon.d.ts

@@ -4,7 +4,7 @@
 export declare const componentIcon: {
     shared: {
         display: string;
-        'user-select': string;
+        userSelect: string;
     };
     sm: {
         size: string;

package/dist/types/styleD/build/typescript/component/inlineMessage.d.ts

@@ -5,10 +5,10 @@ export declare const componentInlineMessage: {
     shared: {
         display: string;
         gap: string;
-        'align-items': string;
+        alignItems: string;
         icon: {
             size: string;
-            'align-self': string;
+            alignSelf: string;
         };
         typography: {
             font: string;

package/dist/types/styleD/build/typescript/component/layout.d.ts

@@ -7,9 +7,6 @@ export declare const componentLayout: {
             display: string;
             minHeight: string;
             width: string;
-            'max-width': string;
-            'margin-left': string;
-            'margin-right': string;
         };
         sm: {
             gridTemplateAreas: string;
@@ -44,5 +41,10 @@ export declare const componentLayout: {
             width: string;
         };
     };
+    main: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
 };
 export type ComponentLayout = typeof componentLayout;

package/dist/types/styleD/build/typescript/component/menu.d.ts

@@ -5,8 +5,8 @@ export declare const componentMenu: {
     menu: {
         shared: {
             display: string;
-            'flex-direction': string;
-            'background-color': string;
+            flexDirection: string;
+            backgroundColor: string;
             border: string;
         };
     };
@@ -14,14 +14,14 @@ export declare const componentMenu: {
         header: {
             shared: {
                 display: string;
-                'align-items': string;
+                alignItems: string;
                 padding: {
                     top: string;
                     right: string;
                     bottom: string;
                     left: string;
                 };
-                'background-color': string;
+                backgroundColor: string;
                 color: string;
             };
             sm: {
@@ -45,26 +45,26 @@ export declare const componentMenu: {
     menuItem: {
         shared: {
             display: string;
-            'grid-template-areas': string;
-            'grid-template-areas-with-description': string;
-            'grid-template-columns': string;
+            gridTemplateAreas: string;
+            gridTemplateAreasWithDescription: string;
+            gridTemplateColumns: string;
             gap: string;
-            'align-items': string;
+            alignItems: string;
             padding: {
                 top: string;
                 right: string;
                 bottom: string;
                 left: string;
             };
-            'border-bottom': string;
-            'background-color': string;
+            borderBottom: string;
+            backgroundColor: string;
             icon: {
-                'grid-area': string;
-                'align-self': string;
+                gridArea: string;
+                alignSelf: string;
                 color: string;
             };
             label: {
-                'grid-area': string;
+                gridArea: string;
                 color: string;
                 typography: {
                     font: string;
@@ -73,7 +73,7 @@ export declare const componentMenu: {
                 };
             };
             description: {
-                'grid-area': string;
+                gridArea: string;
                 color: string;
                 typography: {
                     font: string;
@@ -82,9 +82,9 @@ export declare const componentMenu: {
                 };
             };
             aside: {
-                'grid-area': string;
-                'justify-self': string;
-                'align-self': string;
+                gridArea: string;
+                justifySelf: string;
+                alignSelf: string;
                 color: string;
                 typography: {
                     font: string;
@@ -92,37 +92,37 @@ export declare const componentMenu: {
                     fontWidth: number;
                 };
             };
-            ':last-child': {
-                'border-bottom': string;
+            lastChild: {
+                borderBottom: string;
             };
-            ':hover': {
-                'background-color': string;
+            hover: {
+                backgroundColor: string;
                 outline: string;
             };
-            ':focus-visible': {
+            focusVisible: {
                 outline: string;
-                'outline-offset': string;
+                outlineOffset: string;
             };
-            ':pressed': {
-                'background-color': string;
+            pressed: {
+                backgroundColor: string;
             };
         };
         sm: {
             icon: {
                 size: string;
-                'line-height': number;
+                lineHeight: number;
             };
         };
         md: {
             icon: {
                 size: string;
-                'line-height': number;
+                lineHeight: number;
             };
         };
     };
     menuSeparator: {
         shared: {
-            'background-color': string;
+            backgroundColor: string;
             height: string;
             width: string;
         };
@@ -133,11 +133,11 @@ export declare const componentMenu: {
             shadow: string;
         };
         sm: {
-            'max-width': string;
+            maxWidth: string;
             width: string;
         };
         md: {
-            'max-width': string;
+            maxWidth: string;
             width: string;
         };
     };

package/dist/types/styleD/build/typescript/component/select.d.ts

@@ -30,7 +30,7 @@ export declare const componentSelect: {
             };
             focused: {
                 outline: string;
-                'outline-offset': string;
+                outlineOffset: string;
             };
             disabled: {
                 backgroundColor: string;
@@ -49,7 +49,7 @@ export declare const componentSelect: {
             paddingBottom: string;
             focused: {
                 outline: string;
-                'outline-offset': string;
+                outlineOffset: string;
                 backgroundColor: string;
             };
         };

package/dist/types/styleD/build/typescript/component/textArea.d.ts

@@ -12,10 +12,10 @@ export declare const componentTextArea: {
             left: string;
         };
         height: string;
-        'margin-top': string;
-        'border-radius': string;
+        marginTop: string;
+        borderRadius: string;
         border: string;
-        'background-color': string;
+        backgroundColor: string;
         placeholderColor: string;
         disabled: {
             backgroundColor: string;

package/dist/types/styleD/build/typescript/component/textInput.d.ts

@@ -11,10 +11,10 @@ export declare const componentTextInput: {
             bottom: string;
             left: string;
         };
-        'margin-top': string;
-        'border-radius': string;
+        marginTop: string;
+        borderRadius: string;
         border: string;
-        'background-color': string;
+        backgroundColor: string;
         placeholderColor: string;
         disabled: {
             backgroundColor: string;

package/dist/types/styleD/build/typescript/component/{TopBar.d.ts → topBar.d.ts}

@@ -2,16 +2,16 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const componentTopBar: {
-    'background-color': string;
+    backgroundColor: string;
     display: string;
     height: string;
-    'justify-content': string;
-    'border-right': string;
-    'border-top': string;
-    'border-bottom': string;
-    'border-left': string;
+    justifyContent: string;
+    borderRight: string;
+    borderTop: string;
+    borderBottom: string;
+    borderLeft: string;
     spacer: {
-        'margin-left': string;
+        marginLeft: string;
     };
     collapsedNavMenu: {
         button: {
@@ -22,22 +22,22 @@ export declare const componentTopBar: {
             border: string;
             cursor: string;
             hovered: {
-                'background-color': string;
+                backgroundColor: string;
             };
             active: {
-                'background-color': string;
+                backgroundColor: string;
             };
         };
         popover: {
-            'background-color': string;
+            backgroundColor: string;
             border: string;
             offset: number;
             containerPadding: number;
         };
     };
-    Item: {
+    item: {
         display: string;
-        'align-items': string;
+        alignItems: string;
         height: string;
         sm: {
             padding: {
@@ -65,15 +65,15 @@ export declare const componentTopBar: {
         };
         border: string;
     };
-    Navigation: {
+    navigation: {
         shared: {
             display: string;
             position: string;
-            'align-items': string;
+            alignItems: string;
             cursor: string;
-            'text-decoration': string;
+            textDecoration: string;
             height: string;
-            ':disabled': {
+            disabled: {
                 cursor: string;
                 color: string;
             };
@@ -83,17 +83,17 @@ export declare const componentTopBar: {
                 bottom: string;
                 left: string;
             };
-            ':focus-visible': {
+            focusVisible: {
                 outline: string;
-                'outline-offset': string;
+                outlineOffset: string;
             };
-            'border-top': string;
+            borderTop: string;
             divider: string;
             _menuOpen: {
                 width: string;
                 height: string;
                 selected: {
-                    'background-color': string;
+                    backgroundColor: string;
                 };
             };
         };
@@ -110,11 +110,11 @@ export declare const componentTopBar: {
         };
         selected: {
             color: string;
-            'border-bottom': string;
+            borderBottom: string;
         };
         unselected: {
             color: string;
-            'border-bottom': string;
+            borderBottom: string;
         };
         md: {
             typography: {
@@ -131,10 +131,10 @@ export declare const componentTopBar: {
             };
         };
     };
-    ToolName: {
+    toolName: {
         display: string;
         color: string;
-        'align-items': string;
+        alignItems: string;
         gap: string;
         typography: {
             font: string;
@@ -182,12 +182,12 @@ export declare const componentTopBar: {
             };
             focused: {
                 outline: string;
-                'outline-offset': string;
+                outlineOffset: string;
             };
             collapsed: {
                 paddingLeft: string;
                 paddingRight: string;
-                'justify-content': string;
+                justifyContent: string;
             };
         };
     };

package/dist/types/styleD/build/typescript/semantic/colors.d.ts

@@ -5,13 +5,13 @@ export declare const semanticColors: {
     text: {
         strong: string;
         weak: string;
-        'strong-inverse': string;
-        'weak-inverse': string;
-        'stronger-inverse': string;
+        strongInverse: string;
+        weakInverse: string;
+        strongerInverse: string;
         error: string;
         warning: string;
         success: string;
-        'success-inverse': string;
+        successInverse: string;
         information: string;
         disabled: string;
         green: string;
@@ -19,64 +19,65 @@ export declare const semanticColors: {
         red: string;
         cyan: string;
         teal: string;
-        'cool-purple': string;
-        'warm-purple': string;
+        coolPurple: string;
+        warmPurple: string;
         magenta: string;
         orange: string;
         yellow: string;
     };
     bg: {
         base: string;
-        'raised-level-1': string;
-        'raised-level-2': string;
+        raisedLevel1: string;
+        raisedLevel2: string;
+        raisedLevel3: string;
     };
     border: {
         stronger: string;
         strong: string;
         weak: string;
         weaker: string;
-        'strong-inverse': string;
+        strongInverse: string;
         disabled: string;
         accent: string;
         error: string;
         focused: string;
         selected: string;
-        'selected-inverse': string;
+        selectedInverse: string;
     };
     fill: {
-        'accent-strong': string;
-        'accent-strong-hover': string;
-        'accent-strong-pressed': string;
+        accentStrong: string;
+        accentStrongHover: string;
+        accentStrongPressed: string;
         strong: string;
-        'strong-hover': string;
-        'strong-pressed': string;
+        strongHover: string;
+        strongPressed: string;
         weak: string;
-        'weak-hover': string;
-        'weak-pressed': string;
+        weakHover: string;
+        weakPressed: string;
         disabled: string;
-        'disabled-inverse': string;
+        disabledInverse: string;
         link: string;
-        'link-hover': string;
-        'link-pressed': string;
-        'green-weak': string;
-        'blue-weak': string;
-        'red-weak': string;
-        'cyan-weak': string;
-        'teal-weak': string;
-        'cool-purple-weak': string;
-        'warm-purple-weak': string;
-        'magenta-weak': string;
-        'orange-weak': string;
-        'yellow-weak': string;
+        linkHover: string;
+        linkPressed: string;
+        greenWeak: string;
+        blueWeak: string;
+        redWeak: string;
+        cyanWeak: string;
+        tealWeak: string;
+        coolPurpleWeak: string;
+        warmPurpleWeak: string;
+        magentaWeak: string;
+        orangeWeak: string;
+        yellowWeak: string;
         selected: string;
-        'draft-strong': string;
-        'live-weak': string;
-        'warning-weak': string;
-        'information-weak': string;
-        'error-weak': string;
-        'error-strong': string;
-        'success-weak': string;
-        'success-strong': string;
+        draftStrong: string;
+        liveWeak: string;
+        warningWeak: string;
+        informationWeak: string;
+        errorWeak: string;
+        errorStrong: string;
+        successWeak: string;
+        successStrong: string;
     };
 };
 export type SemanticColors = typeof semanticColors;

package/dist/types/styleD/build/typescript/semantic/grid.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const semanticGrid: {
+    gutter: {
+        lgPx: string;
+        mdPx: string;
+        smPx: string;
+    };
+    margin: {
+        lgPx: string;
+        mdPx: string;
+        smPx: string;
+    };
+    columns: {
+        lg: number;
+        md: number;
+        sm: number;
+    };
+};
+export type SemanticGrid = typeof semanticGrid;

package/dist/types/styleD/build/typescript/semantic/sizing.d.ts

@@ -18,7 +18,14 @@ export declare const semanticSizing: {
     border: {
         default: string;
         md: string;
-        'extra-wide': string;
+        extraWide: string;
+    };
+    sidebar: {
+        mdPx: string;
+        lgPx: string;
+    };
+    layout: {
+        maxWidthPx: string;
     };
 };
 export type SemanticSizing = typeof semanticSizing;