@guardian/stand 0.0.37 → 0.0.39

package/dist/types/index.d.ts

@@ -52,8 +52,8 @@ export { componentTextArea } from './styleD/build/typescript/component/textArea'
 export type { ComponentTextArea } from './styleD/build/typescript/component/textArea';
 export { componentTextInput } from './styleD/build/typescript/component/textInput';
 export type { ComponentTextInput } from './styleD/build/typescript/component/textInput';
-export { componentTopBar } from './styleD/build/typescript/component/TopBar';
-export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
+export { componentTopBar } from './styleD/build/typescript/component/topBar';
+export type { ComponentTopBar } from './styleD/build/typescript/component/topBar';
 export { componentTypography } from './styleD/build/typescript/component/typography';
 export type { ComponentTypography } from './styleD/build/typescript/component/typography';
 /**
@@ -74,6 +74,8 @@ export type { BaseTypography } from './styleD/build/typescript/base/typography';
  */
 export { semanticColors } from './styleD/build/typescript/semantic/colors';
 export type { SemanticColors } from './styleD/build/typescript/semantic/colors';
+export { semanticGrid } from './styleD/build/typescript/semantic/grid';
+export type { SemanticGrid } from './styleD/build/typescript/semantic/grid';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography';
 export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing';

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

@@ -116,7 +116,7 @@ export declare const baseColors: {
         readonly '800': "#edc6d7";
         readonly '900': "#f9ebf1";
     };
-    readonly 'warm-purple': {
+    readonly warmPurple: {
         readonly '50': "#220b30";
         readonly '100': "#381350";
         readonly '200': "#4e1a6f";
@@ -128,7 +128,7 @@ export declare const baseColors: {
         readonly '800': "#dac3e8";
         readonly '900': "#f2eaf7";
     };
-    readonly 'cool-purple': {
+    readonly coolPurple: {
         readonly '50': "#232740";
         readonly '100': "#394069";
         readonly '200': "#485084";

package/dist/types/styleD/build/typescript/base/radius.d.ts

@@ -2,11 +2,11 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const baseRadius: {
-    readonly 'corner-2-px': "2px";
-    readonly 'corner-4-px': "4px";
-    readonly 'corner-8-px': "8px";
-    readonly 'corner-2-rem': "0.125rem";
-    readonly 'corner-4-rem': "0.25rem";
-    readonly 'corner-8-rem': "0.5rem";
+    readonly corner2Px: "2px";
+    readonly corner4Px: "4px";
+    readonly corner8Px: "8px";
+    readonly corner2Rem: "0.125rem";
+    readonly corner4Rem: "0.25rem";
+    readonly corner8Rem: "0.5rem";
 };
 export type BaseRadius = typeof baseRadius;

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

@@ -2,25 +2,25 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const baseSizing: {
-    readonly 'size-1-px': "1px";
-    readonly 'size-2-px': "2px";
-    readonly 'size-8-px': "8px";
-    readonly 'size-16-px': "16px";
-    readonly 'size-18-px': "18px";
-    readonly 'size-20-px': "20px";
-    readonly 'size-24-px': "24px";
-    readonly 'size-32-px': "32px";
-    readonly 'size-40-px': "40px";
-    readonly 'size-48-px': "48px";
-    readonly 'size-1-rem': "0.0625rem";
-    readonly 'size-2-rem': "0.125rem";
-    readonly 'size-8-rem': "0.5rem";
-    readonly 'size-16-rem': "1rem";
-    readonly 'size-18-rem': "1.125rem";
-    readonly 'size-20-rem': "1.25rem";
-    readonly 'size-24-rem': "1.5rem";
-    readonly 'size-32-rem': "2rem";
-    readonly 'size-40-rem': "2.5rem";
-    readonly 'size-48-rem': "3rem";
+    readonly size1Px: "1px";
+    readonly size2Px: "2px";
+    readonly size8Px: "8px";
+    readonly size16Px: "16px";
+    readonly size18Px: "18px";
+    readonly size20Px: "20px";
+    readonly size24Px: "24px";
+    readonly size32Px: "32px";
+    readonly size40Px: "40px";
+    readonly size48Px: "48px";
+    readonly size1Rem: "0.0625rem";
+    readonly size2Rem: "0.125rem";
+    readonly size8Rem: "0.5rem";
+    readonly size16Rem: "1rem";
+    readonly size18Rem: "1.125rem";
+    readonly size20Rem: "1.25rem";
+    readonly size24Rem: "1.5rem";
+    readonly size32Rem: "2rem";
+    readonly size40Rem: "2.5rem";
+    readonly size48Rem: "3rem";
 };
 export type BaseSizing = typeof baseSizing;

package/dist/types/styleD/build/typescript/base/spacing.d.ts

@@ -2,39 +2,39 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const baseSpacing: {
-    readonly '2-px': "2px";
-    readonly '4-px': "4px";
-    readonly '6-px': "6px";
-    readonly '8-px': "8px";
-    readonly '10-px': "10px";
-    readonly '12-px': "12px";
-    readonly '16-px': "16px";
-    readonly '20-px': "20px";
-    readonly '24-px': "24px";
-    readonly '32-px': "32px";
-    readonly '36-px': "36px";
-    readonly '40-px': "40px";
-    readonly '48-px': "48px";
-    readonly '64-px': "64px";
-    readonly '72-px': "72px";
-    readonly '80-px': "80px";
-    readonly '96-px': "96px";
-    readonly '2-rem': "0.125rem";
-    readonly '4-rem': "0.25rem";
-    readonly '6-rem': "0.375rem";
-    readonly '8-rem': "0.5rem";
-    readonly '10-rem': "0.625rem";
-    readonly '12-rem': "0.75rem";
-    readonly '16-rem': "1rem";
-    readonly '20-rem': "1.25rem";
-    readonly '24-rem': "1.5rem";
-    readonly '32-rem': "2rem";
-    readonly '36-rem': "2.25rem";
-    readonly '40-rem': "2.5rem";
-    readonly '48-rem': "3rem";
-    readonly '64-rem': "4rem";
-    readonly '72-rem': "4.5rem";
-    readonly '80-rem': "5rem";
-    readonly '96-rem': "6rem";
+    readonly '2Px': "2px";
+    readonly '4Px': "4px";
+    readonly '6Px': "6px";
+    readonly '8Px': "8px";
+    readonly '10Px': "10px";
+    readonly '12Px': "12px";
+    readonly '16Px': "16px";
+    readonly '20Px': "20px";
+    readonly '24Px': "24px";
+    readonly '32Px': "32px";
+    readonly '36Px': "36px";
+    readonly '40Px': "40px";
+    readonly '48Px': "48px";
+    readonly '64Px': "64px";
+    readonly '72Px': "72px";
+    readonly '80Px': "80px";
+    readonly '96Px': "96px";
+    readonly '2Rem': "0.125rem";
+    readonly '4Rem': "0.25rem";
+    readonly '6Rem': "0.375rem";
+    readonly '8Rem': "0.5rem";
+    readonly '10Rem': "0.625rem";
+    readonly '12Rem': "0.75rem";
+    readonly '16Rem': "1rem";
+    readonly '20Rem': "1.25rem";
+    readonly '24Rem': "1.5rem";
+    readonly '32Rem': "2rem";
+    readonly '36Rem': "2.25rem";
+    readonly '40Rem': "2.5rem";
+    readonly '48Rem': "3rem";
+    readonly '64Rem': "4rem";
+    readonly '72Rem': "4.5rem";
+    readonly '80Rem': "5rem";
+    readonly '96Rem': "6rem";
 };
 export type BaseSpacing = typeof baseSpacing;

package/dist/types/styleD/build/typescript/base/typography.d.ts

@@ -3,50 +3,50 @@
  */
 export declare const baseTypography: {
     readonly family: {
-        readonly 'Open Sans': "Open Sans";
-        readonly 'Open Sans Compact': "Open Sans";
-        readonly 'Guardian Text Egyptian': "GuardianTextEgyptian";
-        readonly 'Guardian Headline': "GH Guardian Headline";
+        readonly openSans: "Open Sans";
+        readonly openSansCompact: "Open Sans";
+        readonly guardianTextEgyptian: "GuardianTextEgyptian";
+        readonly guardianHeadline: "GH Guardian Headline";
     };
     readonly size: {
-        readonly '12-px': "12px";
-        readonly '14-px': "14px";
-        readonly '16-px': "16px";
-        readonly '18-px': "18px";
-        readonly '20-px': "20px";
-        readonly '24-px': "24px";
-        readonly '28-px': "28px";
-        readonly '32-px': "32px";
-        readonly '36-px': "36px";
-        readonly '42-px': "42px";
-        readonly '48-px': "48px";
-        readonly '12-rem': "0.75rem";
-        readonly '14-rem': "0.875rem";
-        readonly '16-rem': "1rem";
-        readonly '18-rem': "1.125rem";
-        readonly '20-rem': "1.25rem";
-        readonly '24-rem': "1.5rem";
-        readonly '28-rem': "1.75rem";
-        readonly '32-rem': "2rem";
-        readonly '36-rem': "2.25rem";
-        readonly '42-rem': "2.625rem";
-        readonly '48-rem': "3rem";
+        readonly '12Px': "12px";
+        readonly '14Px': "14px";
+        readonly '16Px': "16px";
+        readonly '18Px': "18px";
+        readonly '20Px': "20px";
+        readonly '24Px': "24px";
+        readonly '28Px': "28px";
+        readonly '32Px': "32px";
+        readonly '36Px': "36px";
+        readonly '42Px': "42px";
+        readonly '48Px': "48px";
+        readonly '12Rem': "0.75rem";
+        readonly '14Rem': "0.875rem";
+        readonly '16Rem': "1rem";
+        readonly '18Rem': "1.125rem";
+        readonly '20Rem': "1.25rem";
+        readonly '24Rem': "1.5rem";
+        readonly '28Rem': "1.75rem";
+        readonly '32Rem': "2rem";
+        readonly '36Rem': "2.25rem";
+        readonly '42Rem': "2.625rem";
+        readonly '48Rem': "3rem";
     };
     readonly weight: {
-        readonly 'Guardian Headline': {
+        readonly guardianHeadline: {
             readonly bold: 700;
         };
-        readonly 'Guardian Text Egyptian': {
+        readonly guardianTextEgyptian: {
             readonly normal: 400;
             readonly bold: 700;
         };
-        readonly 'Open Sans': {
+        readonly openSans: {
             readonly light: 340;
             readonly normal: 460;
             readonly semiBold: 600;
             readonly bold: 700;
         };
-        readonly 'Open Sans Compact': {
+        readonly openSansCompact: {
             readonly light: 360;
             readonly normal: 460;
             readonly semiBold: 600;
@@ -54,28 +54,28 @@ export declare const baseTypography: {
         };
     };
     readonly width: {
-        readonly 'Open Sans': 95;
-        readonly 'Open Sans Compact': 88;
+        readonly openSans: 95;
+        readonly openSansCompact: 88;
     };
     readonly style: {
         readonly normal: "normal";
         readonly italic: "italic";
     };
-    readonly 'line-height': {
+    readonly lineHeight: {
         readonly tight: 1.15;
         readonly normal: 1.3;
         readonly loose: 1.4;
         readonly interactive: 1;
     };
-    readonly 'letter-spacing': {
-        readonly 'densest-px': "-1px";
-        readonly 'denser-px': "-0.5px";
-        readonly 'dense-px': "-0.2px";
-        readonly 'default-px': "0px";
-        readonly 'densest-rem': "-0.0625rem";
-        readonly 'denser-rem': "-0.03125rem";
-        readonly 'dense-rem': "-0.0125rem";
-        readonly 'default-rem': "0rem";
+    readonly letterSpacing: {
+        readonly densestPx: "-1px";
+        readonly denserPx: "-0.5px";
+        readonly densePx: "-0.2px";
+        readonly defaultPx: "0px";
+        readonly densestRem: "-0.0625rem";
+        readonly denserRem: "-0.03125rem";
+        readonly denseRem: "-0.0125rem";
+        readonly defaultRem: "0rem";
     };
 };
 export type BaseTypography = typeof baseTypography;

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

@@ -4,8 +4,8 @@
 export declare const componentAlertBanner: {
     shared: {
         display: string;
-        'align-items': string;
-        'justify-content': string;
+        alignItems: string;
+        justifyContent: string;
         padding: {
             top: string;
             right: string;
@@ -16,11 +16,11 @@ export declare const componentAlertBanner: {
         height: string;
         content: {
             display: string;
-            'justify-content': string;
+            justifyContent: string;
             gap: string;
             flex: string;
             height: string;
-            'align-items': string;
+            alignItems: string;
             color: string;
             typography: {
                 font: string;
@@ -33,16 +33,16 @@ export declare const componentAlertBanner: {
         };
     };
     information: {
-        'background-color': string;
+        backgroundColor: string;
     };
     success: {
-        'background-color': string;
+        backgroundColor: string;
     };
     warning: {
-        'background-color': string;
+        backgroundColor: string;
     };
     error: {
-        'background-color': string;
+        backgroundColor: string;
     };
 };
 export type ComponentAlertBanner = typeof componentAlertBanner;

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

@@ -8,10 +8,10 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
@@ -19,10 +19,10 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
@@ -30,10 +30,10 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
@@ -41,10 +41,10 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
@@ -52,32 +52,32 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
-            'cool-purple': {
+            coolPurple: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
-            'warm-purple': {
+            warmPurple: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
@@ -85,10 +85,10 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
@@ -96,10 +96,10 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
@@ -107,10 +107,10 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
@@ -118,35 +118,35 @@ export declare const componentAvatar: {
                 text: string;
                 background: string;
                 border: string;
-                ':hover': {
+                hover: {
                     background: string;
                 };
-                ':active': {
+                active: {
                     background: string;
                 };
             };
         };
         display: string;
-        'align-items': string;
-        'justify-content': string;
+        alignItems: string;
+        justifyContent: string;
         overflow: string;
-        'flex-shrink': string;
-        'border-radius': string;
-        'user-select': string;
+        flexShrink: string;
+        borderRadius: string;
+        userSelect: string;
         link: {
             width: string;
-            ':focus-visible': {
+            focusVisible: {
                 outline: string;
-                'outline-offset': string;
+                outlineOffset: string;
             };
-            'text-decoration': string;
+            textDecoration: string;
         };
         button: {
             background: string;
             border: string;
             padding: string;
             cursor: string;
-            ':disabled': {
+            disabled: {
                 cursor: string;
             };
         };

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

@@ -4,19 +4,19 @@
 export declare const componentButton: {
     shared: {
         display: string;
-        '-webkit-appearance': string;
-        'text-align': string;
-        'box-shadow': string;
+        webkitAppearance: string;
+        textAlign: string;
+        boxShadow: string;
         cursor: string;
-        'justify-content': string;
-        'align-items': string;
-        'text-decoration': string;
-        ':disabled': {
+        justifyContent: string;
+        alignItems: string;
+        textDecoration: string;
+        disabled: {
             cursor: string;
         };
-        ':focus-visible': {
+        focusVisible: {
             outline: string;
-            'outline-offset': string;
+            outlineOffset: string;
         };
     };
     primary: {
@@ -25,15 +25,15 @@ export declare const componentButton: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -150,15 +150,15 @@ export declare const componentButton: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;
@@ -275,15 +275,15 @@ export declare const componentButton: {
             backgroundColor: string;
             borderRadius: string;
             border: string;
-            ':hover': {
+            hover: {
                 backgroundColor: string;
                 border: string;
             };
-            ':active': {
+            active: {
                 backgroundColor: string;
                 border: string;
             };
-            ':disabled': {
+            disabled: {
                 color: string;
                 backgroundColor: string;
                 border: string;