@guardian/stand 0.0.9 → 0.0.11

package/dist/icon-button.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var IconButton = require('./components/icon-button/IconButton.cjs');
+
+
+
+exports.IconButton = IconButton.IconButton;

package/dist/icon-button.js

@@ -0,0 +1 @@
+export { IconButton } from './components/icon-button/IconButton.js';

package/dist/icon-link-button.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var IconLinkButton = require('./components/icon-link-button/IconLinkButton.cjs');
+
+
+
+exports.IconLinkButton = IconLinkButton.IconLinkButton;

package/dist/icon-link-button.js

@@ -0,0 +1 @@
+export { IconLinkButton } from './components/icon-link-button/IconLinkButton.js';

package/dist/icon.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Icon = require('./components/icon/Icon.cjs');
+var icon = require('./styleD/build/typescript/component/icon.cjs');
+
+
+
+exports.Icon = Icon.Icon;
+exports.componentIcon = icon.componentIcon;

package/dist/icon.js

@@ -0,0 +1,2 @@
+export { Icon } from './components/icon/Icon.js';
+export { componentIcon } from './styleD/build/typescript/component/icon.js';

package/dist/index.cjs

@@ -3,25 +3,37 @@
 var byline = require('./styleD/build/typescript/component/byline.cjs');
 var tagAutocomplete = require('./styleD/build/typescript/component/tagAutocomplete.cjs');
 var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
+var userMenu = require('./styleD/build/typescript/component/userMenu.cjs');
+var avatar = require('./styleD/build/typescript/component/avatar.cjs');
+var button = require('./styleD/build/typescript/component/button.cjs');
+var typography = require('./styleD/build/typescript/component/typography.cjs');
+var icon = require('./styleD/build/typescript/component/icon.cjs');
 var colors = require('./styleD/build/typescript/base/colors.cjs');
-var typography = require('./styleD/build/typescript/base/typography.cjs');
+var typography$1 = require('./styleD/build/typescript/base/typography.cjs');
 var spacing = require('./styleD/build/typescript/base/spacing.cjs');
 var sizing = require('./styleD/build/typescript/base/sizing.cjs');
 var radius = require('./styleD/build/typescript/base/radius.cjs');
 var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
-var typography$1 = require('./styleD/build/typescript/semantic/typography.cjs');
+var typography$2 = require('./styleD/build/typescript/semantic/typography.cjs');
 var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
+var reset = require('./util/reset.css.cjs');
 
 
 
 exports.componentByline = byline.componentByline;
 exports.componentTagAutocomplete = tagAutocomplete.componentTagAutocomplete;
 exports.componentTagTable = tagTable.componentTagTable;
+exports.componentUserMenu = userMenu.componentUserMenu;
+exports.componentAvatar = avatar.componentAvatar;
+exports.componentButton = button.componentButton;
+exports.componentTypography = typography.componentTypography;
+exports.componentIcon = icon.componentIcon;
 exports.baseColors = colors.baseColors;
-exports.baseTypography = typography.baseTypography;
+exports.baseTypography = typography$1.baseTypography;
 exports.baseSpacing = spacing.baseSpacing;
 exports.baseSizing = sizing.baseSizing;
 exports.baseRadius = radius.baseRadius;
 exports.semanticColors = colors$1.semanticColors;
-exports.semanticTypography = typography$1.semanticTypography;
+exports.semanticTypography = typography$2.semanticTypography;
 exports.semanticSizing = sizing$1.semanticSizing;
+exports.GlobalResetStyles = reset;

package/dist/index.js

@@ -1,6 +1,11 @@
 export { componentByline } from './styleD/build/typescript/component/byline.js';
 export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete.js';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
+export { componentUserMenu } from './styleD/build/typescript/component/userMenu.js';
+export { componentAvatar } from './styleD/build/typescript/component/avatar.js';
+export { componentButton } from './styleD/build/typescript/component/button.js';
+export { componentTypography } from './styleD/build/typescript/component/typography.js';
+export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
@@ -9,3 +14,4 @@ export { baseRadius } from './styleD/build/typescript/base/radius.js';
 export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
+export { default as GlobalResetStyles } from './util/reset.css.js';

package/dist/link-button.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var LinkButton = require('./components/link-button/LinkButton.cjs');
+
+
+
+exports.LinkButton = LinkButton.LinkButton;

package/dist/link-button.js

@@ -0,0 +1 @@
+export { LinkButton } from './components/link-button/LinkButton.js';

package/dist/styleD/build/css/base/colors.css

@@ -37,7 +37,7 @@
 	--base-colors-blue-500: #3e82dd;
 	--base-colors-blue-600: #699ee5;
 	--base-colors-blue-700: #93b9ec;
-	--base-colors-blue-800: #bdd4f4;
+	--base-colors-blue-800: #c5d9f4;
 	--base-colors-blue-900: #e8f0fb;
 	--base-colors-cyan-50: #00202f;
 	--base-colors-cyan-100: #00344e;

package/dist/styleD/build/css/base/sizing.css

@@ -5,6 +5,7 @@
 :root {
 	--base-sizing-size-1-px: 1px;
 	--base-sizing-size-2-px: 2px;
+	--base-sizing-size-8-px: 8px;
 	--base-sizing-size-16-px: 16px;
 	--base-sizing-size-18-px: 18px;
 	--base-sizing-size-20-px: 20px;
@@ -14,6 +15,7 @@
 	--base-sizing-size-48-px: 48px;
 	--base-sizing-size-1-rem: 0.0625rem;
 	--base-sizing-size-2-rem: 0.125rem;
+	--base-sizing-size-8-rem: 0.5rem;
 	--base-sizing-size-16-rem: 1rem;
 	--base-sizing-size-18-rem: 1.125rem;
 	--base-sizing-size-20-rem: 1.25rem;

package/dist/styleD/build/css/component/avatar.css

@@ -0,0 +1,54 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-avatar-shared-color-green-text: #24491d;
+	--component-avatar-shared-color-green-background: #cde4c9;
+	--component-avatar-shared-color-green-border: unset;
+	--component-avatar-shared-color-blue-text: #092f62;
+	--component-avatar-shared-color-blue-background: #c5d9f4;
+	--component-avatar-shared-color-blue-border: unset;
+	--component-avatar-shared-color-red-text: #65170e;
+	--component-avatar-shared-color-red-background: #f5c6c0;
+	--component-avatar-shared-color-red-border: unset;
+	--component-avatar-shared-color-cyan-text: #00344e;
+	--component-avatar-shared-color-cyan-background: #b8d8e7;
+	--component-avatar-shared-color-cyan-border: unset;
+	--component-avatar-shared-color-teal-text: #0e2729;
+	--component-avatar-shared-color-teal-background: #c5dfe1;
+	--component-avatar-shared-color-teal-border: unset;
+	--component-avatar-shared-color-cool-purple-text: #394069;
+	--component-avatar-shared-color-cool-purple-background: #dbdff7;
+	--component-avatar-shared-color-cool-purple-border: unset;
+	--component-avatar-shared-color-warm-purple-text: #381350;
+	--component-avatar-shared-color-warm-purple-background: #dac3e8;
+	--component-avatar-shared-color-warm-purple-border: unset;
+	--component-avatar-shared-color-magenta-text: #581734;
+	--component-avatar-shared-color-magenta-background: #edc6d7;
+	--component-avatar-shared-color-magenta-border: unset;
+	--component-avatar-shared-color-orange-text: #693c16;
+	--component-avatar-shared-color-orange-background: #fcddc6;
+	--component-avatar-shared-color-orange-border: unset;
+	--component-avatar-shared-color-yellow-text: #5b4a0b;
+	--component-avatar-shared-color-yellow-background: #fbeebf;
+	--component-avatar-shared-color-yellow-border: unset;
+	--component-avatar-shared-color-outlined-text: #000000;
+	--component-avatar-shared-color-outlined-background: none;
+	--component-avatar-shared-color-outlined-border: 0.0625rem solid #8d8d8d;
+	--component-avatar-shared-display: inline-flex;
+	--component-avatar-shared-align-items: center;
+	--component-avatar-shared-justify-content: center;
+	--component-avatar-shared-overflow: hidden;
+	--component-avatar-shared-flex-shrink: 0;
+	--component-avatar-shared-border-radius: 50%;
+	--component-avatar-shared-user-select: none;
+	--component-avatar-sm-size: 2rem;
+	--component-avatar-sm-typography-font: normal 700 0.75rem/1 'Open Sans';
+	--component-avatar-sm-typography-letter-spacing: 0rem;
+	--component-avatar-sm-typography-font-width: 95;
+	--component-avatar-md-size: 2.5rem;
+	--component-avatar-md-typography-font: normal 700 0.875rem/1 'Open Sans';
+	--component-avatar-md-typography-letter-spacing: -0.0125rem;
+	--component-avatar-md-typography-font-width: 95;
+}

package/dist/styleD/build/css/component/button.css

@@ -0,0 +1,282 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-button-shared-display: inline-flex;
+	--component-button-shared-webkit-appearance: none;
+	--component-button-shared-text-align: inherit;
+	--component-button-shared-box-shadow: none;
+	--component-button-shared-cursor: pointer;
+	--component-button-shared-justify-content: center;
+	--component-button-shared-align-items: center;
+	--component-button-shared-text-decoration: none;
+	--component-button-shared-disabled-cursor: not-allowed;
+	--component-button-shared-focus-visible-outline: 0.125rem solid #0072a9;
+	--component-button-shared-focus-visible-outline-offset: 0.125rem;
+	--component-button-emphasised-primary-shared-color: #ffffff;
+	--component-button-emphasised-primary-shared-background-color: #0d4289;
+	--component-button-emphasised-primary-shared-border-radius: 0.25rem;
+	--component-button-emphasised-primary-shared-border: 0.0625rem solid #0d4289;
+	--component-button-emphasised-primary-shared-hover-background-color: #092f62;
+	--component-button-emphasised-primary-shared-hover-border: 0.0625rem solid
+		#092f62;
+	--component-button-emphasised-primary-shared-active-background-color: #061d3c;
+	--component-button-emphasised-primary-shared-active-border: 0.0625rem solid
+		#061d3c;
+	--component-button-emphasised-primary-shared-disabled-color: #999999;
+	--component-button-emphasised-primary-shared-disabled-background-color: #dcdcdc;
+	--component-button-emphasised-primary-shared-disabled-border: 0.0625rem
+		solid #dcdcdc;
+	--component-button-emphasised-primary-xs-height: 1.5rem;
+	--component-button-emphasised-primary-xs-padding-top: 0.25rem;
+	--component-button-emphasised-primary-xs-padding-right: 0.5rem;
+	--component-button-emphasised-primary-xs-padding-bottom: 0.25rem;
+	--component-button-emphasised-primary-xs-padding-left: 0.5rem;
+	--component-button-emphasised-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
+	--component-button-emphasised-primary-xs-typography-font: normal 700
+		0.75rem/1 'Open Sans';
+	--component-button-emphasised-primary-xs-typography-letter-spacing: 0rem;
+	--component-button-emphasised-primary-xs-typography-font-width: 95;
+	--component-button-emphasised-primary-xs-icon-size: 1.125rem;
+	--component-button-emphasised-primary-xs-icon-gap: 0.25rem;
+	--component-button-emphasised-primary-xs-icon-button-width: 1.5rem;
+	--component-button-emphasised-primary-sm-height: 2rem;
+	--component-button-emphasised-primary-sm-padding-top: 0.25rem;
+	--component-button-emphasised-primary-sm-padding-right: 0.625rem;
+	--component-button-emphasised-primary-sm-padding-bottom: 0.25rem;
+	--component-button-emphasised-primary-sm-padding-left: 0.625rem;
+	--component-button-emphasised-primary-sm-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-emphasised-primary-sm-typography-font: normal 700
+		0.875rem/1 'Open Sans';
+	--component-button-emphasised-primary-sm-typography-letter-spacing: -0.0125rem;
+	--component-button-emphasised-primary-sm-typography-font-width: 95;
+	--component-button-emphasised-primary-sm-icon-size: 1.125rem;
+	--component-button-emphasised-primary-sm-icon-gap: 0.25rem;
+	--component-button-emphasised-primary-sm-icon-button-width: 2rem;
+	--component-button-emphasised-primary-md-height: 2.5rem;
+	--component-button-emphasised-primary-md-padding-top: 0.25rem;
+	--component-button-emphasised-primary-md-padding-right: 0.75rem;
+	--component-button-emphasised-primary-md-padding-bottom: 0.25rem;
+	--component-button-emphasised-primary-md-padding-left: 0.75rem;
+	--component-button-emphasised-primary-md-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-emphasised-primary-md-typography-font: normal 700
+		0.875rem/1 'Open Sans';
+	--component-button-emphasised-primary-md-typography-letter-spacing: -0.0125rem;
+	--component-button-emphasised-primary-md-typography-font-width: 95;
+	--component-button-emphasised-primary-md-icon-size: 1.25rem;
+	--component-button-emphasised-primary-md-icon-gap: 0.25rem;
+	--component-button-emphasised-primary-md-icon-button-width: 2.5rem;
+	--component-button-emphasised-primary-lg-height: 3rem;
+	--component-button-emphasised-primary-lg-padding-top: 0.25rem;
+	--component-button-emphasised-primary-lg-padding-right: 1rem;
+	--component-button-emphasised-primary-lg-padding-bottom: 0.25rem;
+	--component-button-emphasised-primary-lg-padding-left: 1rem;
+	--component-button-emphasised-primary-lg-padding-with-icon-icon-left-left: 0.75rem;
+	--component-button-emphasised-primary-lg-typography-font: normal 700 1rem/1
+		'Open Sans';
+	--component-button-emphasised-primary-lg-typography-letter-spacing: -0.0125rem;
+	--component-button-emphasised-primary-lg-typography-font-width: 95;
+	--component-button-emphasised-primary-lg-icon-size: 1.5rem;
+	--component-button-emphasised-primary-lg-icon-gap: 0.25rem;
+	--component-button-emphasised-primary-lg-icon-button-width: 3rem;
+	--component-button-emphasised-secondary-shared-color: #000000;
+	--component-button-emphasised-secondary-shared-background-color: none;
+	--component-button-emphasised-secondary-shared-border-radius: 0.25rem;
+	--component-button-emphasised-secondary-shared-border: 0.0625rem solid
+		#0d4289;
+	--component-button-emphasised-secondary-shared-hover-background-color: #e8f0fb;
+	--component-button-emphasised-secondary-shared-hover-border: 0.0625rem solid
+		#0d4289;
+	--component-button-emphasised-secondary-shared-active-background-color: #c5d9f4;
+	--component-button-emphasised-secondary-shared-active-border: 0.0625rem
+		solid #0d4289;
+	--component-button-emphasised-secondary-shared-disabled-color: #999999;
+	--component-button-emphasised-secondary-shared-disabled-background-color: none;
+	--component-button-emphasised-secondary-shared-disabled-border: 0.0625rem
+		solid #dcdcdc;
+	--component-button-emphasised-secondary-xs-height: 1.5rem;
+	--component-button-emphasised-secondary-xs-padding-top: 0.25rem;
+	--component-button-emphasised-secondary-xs-padding-right: 0.5rem;
+	--component-button-emphasised-secondary-xs-padding-bottom: 0.25rem;
+	--component-button-emphasised-secondary-xs-padding-left: 0.5rem;
+	--component-button-emphasised-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
+	--component-button-emphasised-secondary-xs-typography-font: normal 700
+		0.75rem/1 'Open Sans';
+	--component-button-emphasised-secondary-xs-typography-letter-spacing: 0rem;
+	--component-button-emphasised-secondary-xs-typography-font-width: 95;
+	--component-button-emphasised-secondary-xs-icon-size: 1.125rem;
+	--component-button-emphasised-secondary-xs-icon-gap: 0.25rem;
+	--component-button-emphasised-secondary-xs-icon-button-width: 1.5rem;
+	--component-button-emphasised-secondary-sm-height: 2rem;
+	--component-button-emphasised-secondary-sm-padding-top: 0.25rem;
+	--component-button-emphasised-secondary-sm-padding-right: 0.625rem;
+	--component-button-emphasised-secondary-sm-padding-bottom: 0.25rem;
+	--component-button-emphasised-secondary-sm-padding-left: 0.625rem;
+	--component-button-emphasised-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-emphasised-secondary-sm-typography-font: normal 700
+		0.875rem/1 'Open Sans';
+	--component-button-emphasised-secondary-sm-typography-letter-spacing: -0.0125rem;
+	--component-button-emphasised-secondary-sm-typography-font-width: 95;
+	--component-button-emphasised-secondary-sm-icon-size: 1.125rem;
+	--component-button-emphasised-secondary-sm-icon-gap: 0.25rem;
+	--component-button-emphasised-secondary-sm-icon-button-width: 2rem;
+	--component-button-emphasised-secondary-md-height: 2.5rem;
+	--component-button-emphasised-secondary-md-padding-top: 0.25rem;
+	--component-button-emphasised-secondary-md-padding-right: 0.75rem;
+	--component-button-emphasised-secondary-md-padding-bottom: 0.25rem;
+	--component-button-emphasised-secondary-md-padding-left: 0.75rem;
+	--component-button-emphasised-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-emphasised-secondary-md-typography-font: normal 700
+		0.875rem/1 'Open Sans';
+	--component-button-emphasised-secondary-md-typography-letter-spacing: -0.0125rem;
+	--component-button-emphasised-secondary-md-typography-font-width: 95;
+	--component-button-emphasised-secondary-md-icon-size: 1.25rem;
+	--component-button-emphasised-secondary-md-icon-gap: 0.25rem;
+	--component-button-emphasised-secondary-md-icon-button-width: 2.5rem;
+	--component-button-emphasised-secondary-lg-height: 3rem;
+	--component-button-emphasised-secondary-lg-padding-top: 0.25rem;
+	--component-button-emphasised-secondary-lg-padding-right: 1rem;
+	--component-button-emphasised-secondary-lg-padding-bottom: 0.25rem;
+	--component-button-emphasised-secondary-lg-padding-left: 1rem;
+	--component-button-emphasised-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
+	--component-button-emphasised-secondary-lg-typography-font: normal 700
+		1rem/1 'Open Sans';
+	--component-button-emphasised-secondary-lg-typography-letter-spacing: -0.0125rem;
+	--component-button-emphasised-secondary-lg-typography-font-width: 95;
+	--component-button-emphasised-secondary-lg-icon-size: 1.5rem;
+	--component-button-emphasised-secondary-lg-icon-gap: 0.25rem;
+	--component-button-emphasised-secondary-lg-icon-button-width: 3rem;
+	--component-button-neutral-primary-shared-color: #ffffff;
+	--component-button-neutral-primary-shared-background-color: #545454;
+	--component-button-neutral-primary-shared-border-radius: 0.25rem;
+	--component-button-neutral-primary-shared-border: 0.0625rem solid #545454;
+	--component-button-neutral-primary-shared-hover-background-color: #333333;
+	--component-button-neutral-primary-shared-hover-border: 0.0625rem solid
+		#333333;
+	--component-button-neutral-primary-shared-active-background-color: #121212;
+	--component-button-neutral-primary-shared-active-border: 0.0625rem solid
+		#121212;
+	--component-button-neutral-primary-shared-disabled-color: #999999;
+	--component-button-neutral-primary-shared-disabled-background-color: #dcdcdc;
+	--component-button-neutral-primary-shared-disabled-border: 0.0625rem solid
+		#dcdcdc;
+	--component-button-neutral-primary-xs-height: 1.5rem;
+	--component-button-neutral-primary-xs-padding-top: 0.25rem;
+	--component-button-neutral-primary-xs-padding-right: 0.5rem;
+	--component-button-neutral-primary-xs-padding-bottom: 0.25rem;
+	--component-button-neutral-primary-xs-padding-left: 0.5rem;
+	--component-button-neutral-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
+	--component-button-neutral-primary-xs-typography-font: normal 700 0.75rem/1
+		'Open Sans';
+	--component-button-neutral-primary-xs-typography-letter-spacing: 0rem;
+	--component-button-neutral-primary-xs-typography-font-width: 95;
+	--component-button-neutral-primary-xs-icon-size: 1.125rem;
+	--component-button-neutral-primary-xs-icon-gap: 0.25rem;
+	--component-button-neutral-primary-xs-icon-button-width: 1.5rem;
+	--component-button-neutral-primary-sm-height: 2rem;
+	--component-button-neutral-primary-sm-padding-top: 0.25rem;
+	--component-button-neutral-primary-sm-padding-right: 0.625rem;
+	--component-button-neutral-primary-sm-padding-bottom: 0.25rem;
+	--component-button-neutral-primary-sm-padding-left: 0.625rem;
+	--component-button-neutral-primary-sm-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-neutral-primary-sm-typography-font: normal 700 0.875rem/1
+		'Open Sans';
+	--component-button-neutral-primary-sm-typography-letter-spacing: -0.0125rem;
+	--component-button-neutral-primary-sm-typography-font-width: 95;
+	--component-button-neutral-primary-sm-icon-size: 1.125rem;
+	--component-button-neutral-primary-sm-icon-gap: 0.25rem;
+	--component-button-neutral-primary-sm-icon-button-width: 2rem;
+	--component-button-neutral-primary-md-height: 2.5rem;
+	--component-button-neutral-primary-md-padding-top: 0.25rem;
+	--component-button-neutral-primary-md-padding-right: 0.75rem;
+	--component-button-neutral-primary-md-padding-bottom: 0.25rem;
+	--component-button-neutral-primary-md-padding-left: 0.75rem;
+	--component-button-neutral-primary-md-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-neutral-primary-md-typography-font: normal 700 0.875rem/1
+		'Open Sans';
+	--component-button-neutral-primary-md-typography-letter-spacing: -0.0125rem;
+	--component-button-neutral-primary-md-typography-font-width: 95;
+	--component-button-neutral-primary-md-icon-size: 1.25rem;
+	--component-button-neutral-primary-md-icon-gap: 0.25rem;
+	--component-button-neutral-primary-md-icon-button-width: 2.5rem;
+	--component-button-neutral-primary-lg-height: 3rem;
+	--component-button-neutral-primary-lg-padding-top: 0.25rem;
+	--component-button-neutral-primary-lg-padding-right: 1rem;
+	--component-button-neutral-primary-lg-padding-bottom: 0.25rem;
+	--component-button-neutral-primary-lg-padding-left: 1rem;
+	--component-button-neutral-primary-lg-padding-with-icon-icon-left-left: 0.75rem;
+	--component-button-neutral-primary-lg-typography-font: normal 700 1rem/1
+		'Open Sans';
+	--component-button-neutral-primary-lg-typography-letter-spacing: -0.0125rem;
+	--component-button-neutral-primary-lg-typography-font-width: 95;
+	--component-button-neutral-primary-lg-icon-size: 1.5rem;
+	--component-button-neutral-primary-lg-icon-gap: 0.25rem;
+	--component-button-neutral-primary-lg-icon-button-width: 3rem;
+	--component-button-neutral-secondary-shared-color: #000000;
+	--component-button-neutral-secondary-shared-background-color: none;
+	--component-button-neutral-secondary-shared-border-radius: 0.25rem;
+	--component-button-neutral-secondary-shared-border: 0.0625rem solid #545454;
+	--component-button-neutral-secondary-shared-hover-background-color: #ededed;
+	--component-button-neutral-secondary-shared-hover-border: 0.0625rem solid
+		#545454;
+	--component-button-neutral-secondary-shared-active-background-color: #dcdcdc;
+	--component-button-neutral-secondary-shared-active-border: 0.0625rem solid
+		#545454;
+	--component-button-neutral-secondary-shared-disabled-color: #999999;
+	--component-button-neutral-secondary-shared-disabled-background-color: none;
+	--component-button-neutral-secondary-shared-disabled-border: 0.0625rem solid
+		#dcdcdc;
+	--component-button-neutral-secondary-xs-height: 1.5rem;
+	--component-button-neutral-secondary-xs-padding-top: 0.25rem;
+	--component-button-neutral-secondary-xs-padding-right: 0.5rem;
+	--component-button-neutral-secondary-xs-padding-bottom: 0.25rem;
+	--component-button-neutral-secondary-xs-padding-left: 0.5rem;
+	--component-button-neutral-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
+	--component-button-neutral-secondary-xs-typography-font: normal 700
+		0.75rem/1 'Open Sans';
+	--component-button-neutral-secondary-xs-typography-letter-spacing: 0rem;
+	--component-button-neutral-secondary-xs-typography-font-width: 95;
+	--component-button-neutral-secondary-xs-icon-size: 1.125rem;
+	--component-button-neutral-secondary-xs-icon-gap: 0.25rem;
+	--component-button-neutral-secondary-xs-icon-button-width: 1.5rem;
+	--component-button-neutral-secondary-sm-height: 2rem;
+	--component-button-neutral-secondary-sm-padding-top: 0.25rem;
+	--component-button-neutral-secondary-sm-padding-right: 0.625rem;
+	--component-button-neutral-secondary-sm-padding-bottom: 0.25rem;
+	--component-button-neutral-secondary-sm-padding-left: 0.625rem;
+	--component-button-neutral-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-neutral-secondary-sm-typography-font: normal 700
+		0.875rem/1 'Open Sans';
+	--component-button-neutral-secondary-sm-typography-letter-spacing: -0.0125rem;
+	--component-button-neutral-secondary-sm-typography-font-width: 95;
+	--component-button-neutral-secondary-sm-icon-size: 1.125rem;
+	--component-button-neutral-secondary-sm-icon-gap: 0.25rem;
+	--component-button-neutral-secondary-sm-icon-button-width: 2rem;
+	--component-button-neutral-secondary-md-height: 2.5rem;
+	--component-button-neutral-secondary-md-padding-top: 0.25rem;
+	--component-button-neutral-secondary-md-padding-right: 0.75rem;
+	--component-button-neutral-secondary-md-padding-bottom: 0.25rem;
+	--component-button-neutral-secondary-md-padding-left: 0.75rem;
+	--component-button-neutral-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
+	--component-button-neutral-secondary-md-typography-font: normal 700
+		0.875rem/1 'Open Sans';
+	--component-button-neutral-secondary-md-typography-letter-spacing: -0.0125rem;
+	--component-button-neutral-secondary-md-typography-font-width: 95;
+	--component-button-neutral-secondary-md-icon-size: 1.25rem;
+	--component-button-neutral-secondary-md-icon-gap: 0.25rem;
+	--component-button-neutral-secondary-md-icon-button-width: 2.5rem;
+	--component-button-neutral-secondary-lg-height: 3rem;
+	--component-button-neutral-secondary-lg-padding-top: 0.25rem;
+	--component-button-neutral-secondary-lg-padding-right: 1rem;
+	--component-button-neutral-secondary-lg-padding-bottom: 0.25rem;
+	--component-button-neutral-secondary-lg-padding-left: 1rem;
+	--component-button-neutral-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
+	--component-button-neutral-secondary-lg-typography-font: normal 700 1rem/1
+		'Open Sans';
+	--component-button-neutral-secondary-lg-typography-letter-spacing: -0.0125rem;
+	--component-button-neutral-secondary-lg-typography-font-width: 95;
+	--component-button-neutral-secondary-lg-icon-size: 1.5rem;
+	--component-button-neutral-secondary-lg-icon-gap: 0.25rem;
+	--component-button-neutral-secondary-lg-icon-button-width: 3rem;
+}

package/dist/styleD/build/css/component/byline.css

@@ -17,7 +17,7 @@
 	--component-byline-chip-border-radius: 8px;
 	--component-byline-chip-padding-x: 4px;
 	--component-byline-chip-padding-y: 2px;
-	--component-byline-chip-selected-border-color: #bdd4f4;
+	--component-byline-chip-selected-border-color: #c5d9f4;
 	--component-byline-chip-tagged-background-color: #dcdcdc;
 	--component-byline-chip-untagged-color: #000000;
 	--component-byline-dropdown-border-color: #cccccc;

package/dist/styleD/build/css/component/icon.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-icon-shared-display: inline-flex;
+	--component-icon-shared-user-select: none;
+	--component-icon-sm-size: 1.125rem;
+	--component-icon-md-size: 1.25rem;
+	--component-icon-lg-size: 1.5rem;
+}

package/dist/styleD/build/css/component/typography.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-typography-color: #000000;
+}

package/dist/styleD/build/css/component/userMenu.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-user-menu-container-background-color: #dcdcdc;
+	--component-user-menu-container-width: 300px;
+	--component-user-menu-container-padding-y: 0.25rem;
+	--component-user-menu-container-padding-x: 0.25rem;
+	--component-user-menu-heading-font-weight: 700;
+	--component-user-menu-heading-font-size: 1.125rem;
+	--component-user-menu-heading-padding-top: 0px;
+	--component-user-menu-heading-padding-right: 0px;
+	--component-user-menu-heading-padding-bottom: 0px;
+	--component-user-menu-heading-padding-left: 0px;
+	--component-user-menu-heading-text-align: left;
+	--component-user-menu-label-font-weight: 700;
+	--component-user-menu-label-font-size: 0.875rem;
+	--component-user-menu-label-padding-top: 15px;
+	--component-user-menu-label-padding-right: 0px;
+	--component-user-menu-label-padding-bottom: 0.375rem;
+	--component-user-menu-label-padding-left: 0px;
+	--component-user-menu-label-text-align: left;
+	--component-user-menu-toggle-button-base-background-color: #ededed;
+	--component-user-menu-toggle-button-disabled-background-color: #dcdcdc;
+	--component-user-menu-toggle-button-base-border-color: #dcdcdc;
+	--component-user-menu-toggle-button-selected-border-color: #0d4289;
+	--component-user-menu-toggle-button-gap: 0.25rem;
+}

package/dist/styleD/build/css/semantic/colors.css

@@ -24,36 +24,39 @@
 	--semantic-colors-text-orange: #693c16;
 	--semantic-colors-text-yellow: #5b4a0b;
 	--semantic-colors-text-interactive-disabled: #999999;
-	--semantic-colors-bg-default-on-dark: #121212;
-	--semantic-colors-bg-default-on-light: #ffffff;
+	--semantic-colors-bg-base: #ffffff;
+	--semantic-colors-bg-raised-1: #f6f6f6;
+	--semantic-colors-bg-raised-2: #ededed;
 	--semantic-colors-surface-light-1: #f6f6f6;
 	--semantic-colors-surface-light-2: #ededed;
 	--semantic-colors-surface-dark-1: #333333;
-	--semantic-colors-border-subtle: #cccccc;
 	--semantic-colors-border-default: #8d8d8d;
+	--semantic-colors-border-secondary: #cccccc;
+	--semantic-colors-border-tertiary: #ededed;
 	--semantic-colors-border-strong: #545454;
 	--semantic-colors-border-inverse-strong: #ffffff;
 	--semantic-colors-border-interactive-emphasised: #0d4289;
 	--semantic-colors-border-interactive-neutral: #545454;
 	--semantic-colors-border-interactive-disabled: #dcdcdc;
 	--semantic-colors-border-interactive-focused: #0072a9;
+	--semantic-colors-border-interactive-selected: #0072a9;
 	--semantic-colors-status-status-draft: #f1c21b;
 	--semantic-colors-status-status-live: #4e9e3e;
 	--semantic-colors-status-status-selected: #0072a9;
 	--semantic-colors-status-status-focused: #0072a9;
 	--semantic-colors-fill-interactive-primary-emphasised: #0d4289;
 	--semantic-colors-fill-interactive-primary-emphasised-hover: #092f62;
-	--semantic-colors-fill-interactive-primary-emphasised-pressed: #092f62;
+	--semantic-colors-fill-interactive-primary-emphasised-pressed: #061d3c;
 	--semantic-colors-fill-interactive-secondary-emphasised-hover: #e8f0fb;
-	--semantic-colors-fill-interactive-secondary-emphasised-pressed: #e8f0fb;
+	--semantic-colors-fill-interactive-secondary-emphasised-pressed: #c5d9f4;
 	--semantic-colors-fill-interactive-primary-neutral: #545454;
 	--semantic-colors-fill-interactive-primary-neutral-hover: #333333;
-	--semantic-colors-fill-interactive-primary-neutral-pressed: #333333;
+	--semantic-colors-fill-interactive-primary-neutral-pressed: #121212;
 	--semantic-colors-fill-interactive-secondary-neutral-hover: #ededed;
-	--semantic-colors-fill-interactive-secondary-neutral-pressed: #ededed;
+	--semantic-colors-fill-interactive-secondary-neutral-pressed: #dcdcdc;
 	--semantic-colors-fill-interactive-disabled: #dcdcdc;
 	--semantic-colors-fill-green-subtle: #cde4c9;
-	--semantic-colors-fill-blue-subtle: #bdd4f4;
+	--semantic-colors-fill-blue-subtle: #c5d9f4;
 	--semantic-colors-fill-red-subtle: #f5c6c0;
 	--semantic-colors-fill-cyan-subtle: #b8d8e7;
 	--semantic-colors-fill-teal-subtle: #c5dfe1;
@@ -62,4 +65,5 @@
 	--semantic-colors-fill-magenta-subtle: #edc6d7;
 	--semantic-colors-fill-orange-subtle: #fcddc6;
 	--semantic-colors-fill-yellow-subtle: #fbeebf;
+	--semantic-colors-fill-selected: #005d8b;
 }

package/dist/styleD/build/css/semantic/sizing.css

@@ -12,4 +12,5 @@
 	--semantic-sizing-icon-lg: 1.5rem;
 	--semantic-sizing-border-default: 0.0625rem;
 	--semantic-sizing-border-md: 0.125rem;
+	--semantic-sizing-border-extra-wide: 0.5rem;
 }

package/dist/styleD/build/css/semantic/typography.css

@@ -148,4 +148,7 @@
 	--semantic-typography-interactive-sm-font: normal 700 0.875rem/1 'Open Sans';
 	--semantic-typography-interactive-sm-letter-spacing: -0.0125rem;
 	--semantic-typography-interactive-sm-font-width: 95;
+	--semantic-typography-interactive-md-font: normal 700 1rem/1 'Open Sans';
+	--semantic-typography-interactive-md-letter-spacing: -0.0125rem;
+	--semantic-typography-interactive-md-font-width: 95;
 }

package/dist/styleD/build/typescript/base/colors.cjs

@@ -40,7 +40,7 @@ const baseColors = {
     "500": "#3e82dd",
     "600": "#699ee5",
     "700": "#93b9ec",
-    "800": "#bdd4f4",
+    "800": "#c5d9f4",
     "900": "#e8f0fb"
   },
   cyan: {

package/dist/styleD/build/typescript/base/colors.js

@@ -38,7 +38,7 @@ const baseColors = {
     "500": "#3e82dd",
     "600": "#699ee5",
     "700": "#93b9ec",
-    "800": "#bdd4f4",
+    "800": "#c5d9f4",
     "900": "#e8f0fb"
   },
   cyan: {

package/dist/styleD/build/typescript/base/sizing.cjs

@@ -3,6 +3,7 @@
 const baseSizing = {
   "size-1-px": "1px",
   "size-2-px": "2px",
+  "size-8-px": "8px",
   "size-16-px": "16px",
   "size-18-px": "18px",
   "size-20-px": "20px",
@@ -12,6 +13,7 @@ const baseSizing = {
   "size-48-px": "48px",
   "size-1-rem": "0.0625rem",
   "size-2-rem": "0.125rem",
+  "size-8-rem": "0.5rem",
   "size-16-rem": "1rem",
   "size-18-rem": "1.125rem",
   "size-20-rem": "1.25rem",