@guardian/stand 0.0.54 → 0.0.56

package/dist/ButtonGroup.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_buttonGroup = require("./styleD/build/typescript/component/buttonGroup.cjs");
+const require_ButtonGroup = require("./components/ButtonGroup/ButtonGroup.cjs");
+exports.ButtonGroup = require_ButtonGroup.ButtonGroup;
+exports.componentButtonGroup = require_buttonGroup.componentButtonGroup;

package/dist/ButtonGroup.d.cts

@@ -0,0 +1,5 @@
+import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.cjs";
+import { PartialButtonGroupTheme } from "./components/ButtonGroup/styles.cjs";
+import { ButtonGroupProps } from "./components/ButtonGroup/types.cjs";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.cjs";
+export { ButtonGroup, type ButtonGroupProps, type PartialButtonGroupTheme as ButtonGroupTheme, type ComponentButtonGroup, componentButtonGroup };

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,5 @@
+import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
+import { PartialButtonGroupTheme } from "./components/ButtonGroup/styles.js";
+import { ButtonGroupProps } from "./components/ButtonGroup/types.js";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
+export { ButtonGroup, type ButtonGroupProps, type PartialButtonGroupTheme as ButtonGroupTheme, type ComponentButtonGroup, componentButtonGroup };

package/dist/ButtonGroup.js

@@ -0,0 +1,3 @@
+import { componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
+import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
+export { ButtonGroup, componentButtonGroup };

package/dist/components/ButtonGroup/ButtonGroup.cjs

@@ -0,0 +1,25 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Button = require("../Button/Button.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+//#region src/components/ButtonGroup/ButtonGroup.tsx
+const ButtonGroup = ({ size = "md", theme = {}, children, cssOverrides }) => {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultButtonGroupTheme, theme);
+	const buttons = [];
+	react.default.Children.forEach(children, (child, index) => {
+		if (!react.default.isValidElement(child) || child.type !== require_Button.Button) return;
+		buttons.push(react.default.cloneElement(child, {
+			key: child.key ?? index,
+			size
+		}));
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+		css: [require_styles.buttonGroupStyles(mergedTheme), cssOverrides],
+		children: buttons
+	});
+};
+//#endregion
+exports.ButtonGroup = ButtonGroup;

package/dist/components/ButtonGroup/ButtonGroup.d.cts

@@ -0,0 +1,11 @@
+import { ButtonGroupProps } from "./types.cjs";
+
+//#region src/components/ButtonGroup/ButtonGroup.d.ts
+declare const ButtonGroup: ({
+  size,
+  theme,
+  children,
+  cssOverrides
+}: ButtonGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { ButtonGroup };

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import { ButtonGroupProps } from "./types.js";
+
+//#region src/components/ButtonGroup/ButtonGroup.d.ts
+declare const ButtonGroup: ({
+  size,
+  theme,
+  children,
+  cssOverrides
+}: ButtonGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { ButtonGroup };

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,23 @@
+import { mergeDeep } from "../../util/mergeDeep.js";
+import { Button } from "../Button/Button.js";
+import { buttonGroupStyles, defaultButtonGroupTheme } from "./styles.js";
+import React from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+//#region src/components/ButtonGroup/ButtonGroup.tsx
+const ButtonGroup = ({ size = "md", theme = {}, children, cssOverrides }) => {
+	const mergedTheme = mergeDeep(defaultButtonGroupTheme, theme);
+	const buttons = [];
+	React.Children.forEach(children, (child, index) => {
+		if (!React.isValidElement(child) || child.type !== Button) return;
+		buttons.push(React.cloneElement(child, {
+			key: child.key ?? index,
+			size
+		}));
+	});
+	return /* @__PURE__ */ jsx("div", {
+		css: [buttonGroupStyles(mergedTheme), cssOverrides],
+		children: buttons
+	});
+};
+//#endregion
+export { ButtonGroup };

package/dist/components/ButtonGroup/styles.cjs

@@ -0,0 +1,21 @@
+const require_mq = require("../../styleD/utils/semantic/mq.cjs");
+const require_buttonGroup = require("../../styleD/build/typescript/component/buttonGroup.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/ButtonGroup/styles.ts
+const defaultButtonGroupTheme = require_buttonGroup.componentButtonGroup;
+const buttonGroupStyles = (theme) => {
+	return _emotion_react.css`
+		display: ${theme.display};
+		flex-direction: ${theme.flexDirection};
+		flex-wrap: ${theme.flexWrap};
+		gap: ${theme.gap};
+		width: ${theme.width};
+		justify-content: ${theme.justifyContent};
+		${require_mq.from.md} {
+			flex-direction: ${theme.md.flexDirection};
+		}
+	`;
+};
+//#endregion
+exports.buttonGroupStyles = buttonGroupStyles;
+exports.defaultButtonGroupTheme = defaultButtonGroupTheme;

package/dist/components/ButtonGroup/styles.d.cts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentButtonGroup } from "../../styleD/build/typescript/component/buttonGroup.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/ButtonGroup/styles.d.ts
+type ButtonGroupTheme = Prettify<ComponentButtonGroup>;
+type PartialButtonGroupTheme = Prettify<DeepPartial<ButtonGroupTheme>>;
+//#endregion
+export { ButtonGroupTheme, PartialButtonGroupTheme };

package/dist/components/ButtonGroup/styles.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentButtonGroup } from "../../styleD/build/typescript/component/buttonGroup.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/ButtonGroup/styles.d.ts
+type ButtonGroupTheme = Prettify<ComponentButtonGroup>;
+type PartialButtonGroupTheme = Prettify<DeepPartial<ButtonGroupTheme>>;
+//#endregion
+export { ButtonGroupTheme, PartialButtonGroupTheme };

package/dist/components/ButtonGroup/styles.js

@@ -0,0 +1,20 @@
+import { from } from "../../styleD/utils/semantic/mq.js";
+import { componentButtonGroup } from "../../styleD/build/typescript/component/buttonGroup.js";
+import { css } from "@emotion/react";
+//#region src/components/ButtonGroup/styles.ts
+const defaultButtonGroupTheme = componentButtonGroup;
+const buttonGroupStyles = (theme) => {
+	return css`
+		display: ${theme.display};
+		flex-direction: ${theme.flexDirection};
+		flex-wrap: ${theme.flexWrap};
+		gap: ${theme.gap};
+		width: ${theme.width};
+		justify-content: ${theme.justifyContent};
+		${from.md} {
+			flex-direction: ${theme.md.flexDirection};
+		}
+	`;
+};
+//#endregion
+export { buttonGroupStyles, defaultButtonGroupTheme };

package/dist/components/ButtonGroup/types.d.cts

@@ -0,0 +1,13 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { ButtonTheme } from "../Button/styles.cjs";
+import { ButtonGroupTheme } from "./styles.cjs";
+
+//#region src/components/ButtonGroup/types.d.ts
+type ButtonGroupProps = DefaultPropsWithChildren<ButtonGroupTheme> & {
+  /**
+   * Size of buttons within the group
+   */
+  size?: keyof Omit<ButtonTheme['primary'], 'shared'>;
+};
+//#endregion
+export { ButtonGroupProps };

package/dist/components/ButtonGroup/types.d.ts

@@ -0,0 +1,13 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { ButtonTheme } from "../Button/styles.js";
+import { ButtonGroupTheme } from "./styles.js";
+
+//#region src/components/ButtonGroup/types.d.ts
+type ButtonGroupProps = DefaultPropsWithChildren<ButtonGroupTheme> & {
+  /**
+   * Size of buttons within the group
+   */
+  size?: keyof Omit<ButtonTheme['primary'], 'shared'>;
+};
+//#endregion
+export { ButtonGroupProps };

package/dist/index.cjs

@@ -4,6 +4,7 @@ const require_button = require("./styleD/build/typescript/component/button.cjs")
 const require_alertBanner = require("./styleD/build/typescript/component/alertBanner.cjs");
 const require_breakpoints = require("./styleD/build/typescript/semantic/breakpoints.cjs");
 const require_avatar = require("./styleD/build/typescript/component/avatar.cjs");
+const require_buttonGroup = require("./styleD/build/typescript/component/buttonGroup.cjs");
 const require_byline = require("./styleD/build/typescript/component/byline.cjs");
 const require_checkbox = require("./styleD/build/typescript/component/checkbox.cjs");
 const require_autocomplete = require("./styleD/build/typescript/component/autocomplete.cjs");
@@ -46,6 +47,7 @@ exports.componentAlertBanner = require_alertBanner.componentAlertBanner;
 exports.componentAutocomplete = require_autocomplete.componentAutocomplete;
 exports.componentAvatar = require_avatar.componentAvatar;
 exports.componentButton = require_button.componentButton;
+exports.componentButtonGroup = require_buttonGroup.componentButtonGroup;
 exports.componentByline = require_byline.componentByline;
 exports.componentCheckbox = require_checkbox.componentCheckbox;
 exports.componentDatePicker = require_datePicker.componentDatePicker;

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import { ComponentIcon, componentIcon } from "./styleD/build/typescript/componen
 import { ComponentButton, componentButton } from "./styleD/build/typescript/component/button.cjs";
 import { ComponentAlertBanner, componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.cjs";
 import { ComponentAvatar, componentAvatar } from "./styleD/build/typescript/component/avatar.cjs";
+import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.cjs";
 import { ComponentByline, componentByline } from "./styleD/build/typescript/component/byline.cjs";
 import { ComponentForm, componentForm } from "./styleD/build/typescript/component/form.cjs";
 import { ComponentCheckbox, componentCheckbox } from "./styleD/build/typescript/component/checkbox.cjs";
@@ -36,4 +37,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.cjs";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.cjs";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.cjs";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { ComponentIcon, componentIcon } from "./styleD/build/typescript/componen
 import { ComponentButton, componentButton } from "./styleD/build/typescript/component/button.js";
 import { ComponentAlertBanner, componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.js";
 import { ComponentAvatar, componentAvatar } from "./styleD/build/typescript/component/avatar.js";
+import { ComponentButtonGroup, componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
 import { ComponentByline, componentByline } from "./styleD/build/typescript/component/byline.js";
 import { ComponentForm, componentForm } from "./styleD/build/typescript/component/form.js";
 import { ComponentCheckbox, componentCheckbox } from "./styleD/build/typescript/component/checkbox.js";
@@ -36,4 +37,4 @@ import { SemanticSizing, semanticSizing } from "./styleD/build/typescript/semant
 import { SemanticShadow, semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { SemanticRadius, semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { SemanticSpacing, semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { type BaseColors, type BaseRadius, type BaseSizing, type BaseSpacing, type BaseTypography, type ComponentAlertBanner, type ComponentAutocomplete, type ComponentAvatar, type ComponentButton, type ComponentButtonGroup, type ComponentByline, type ComponentCheckbox, type ComponentDatePicker, type ComponentFavicon, type ComponentForm, type ComponentGrid, type ComponentIcon, type ComponentInlineMessage, type ComponentIntendedAudienceSignifier, type ComponentLayout, type ComponentLink, type ComponentMenu, type ComponentModal, type ComponentRadioGroup, type ComponentSelect, type ComponentTagTable, type ComponentTextArea, type ComponentTextInput, type ComponentTopBar, type ComponentTypography, type ComponentUserMenu, type SemanticBreakpoints, type SemanticColors, type SemanticGrid, type SemanticRadius, type SemanticShadow, type SemanticSizing, type SemanticSpacing, type SemanticTypography, baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

package/dist/index.js

@@ -3,6 +3,7 @@ import { componentButton } from "./styleD/build/typescript/component/button.js";
 import { componentAlertBanner } from "./styleD/build/typescript/component/alertBanner.js";
 import { semanticBreakpoints } from "./styleD/build/typescript/semantic/breakpoints.js";
 import { componentAvatar } from "./styleD/build/typescript/component/avatar.js";
+import { componentButtonGroup } from "./styleD/build/typescript/component/buttonGroup.js";
 import { componentByline } from "./styleD/build/typescript/component/byline.js";
 import { componentCheckbox } from "./styleD/build/typescript/component/checkbox.js";
 import { componentAutocomplete } from "./styleD/build/typescript/component/autocomplete.js";
@@ -36,4 +37,4 @@ import { semanticSizing } from "./styleD/build/typescript/semantic/sizing.js";
 import { semanticShadow } from "./styleD/build/typescript/semantic/shadow.js";
 import { semanticRadius } from "./styleD/build/typescript/semantic/radius.js";
 import { semanticSpacing } from "./styleD/build/typescript/semantic/spacing.js";
-export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };
+export { baseColors, baseRadius, baseSizing, baseSpacing, baseTypography, componentAlertBanner, componentAutocomplete, componentAvatar, componentButton, componentButtonGroup, componentByline, componentCheckbox, componentDatePicker, componentFavicon, componentForm, componentGrid, componentIcon, componentInlineMessage, componentIntendedAudienceSignifier, componentLayout, componentLink, componentMenu, componentModal, componentRadioGroup, componentSelect, componentTagTable, componentTextArea, componentTextInput, componentTopBar, componentTypography, componentUserMenu, semanticBreakpoints, semanticColors, semanticGrid, semanticRadius, semanticShadow, semanticSizing, semanticSpacing, semanticTypography };

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

@@ -47,7 +47,7 @@
 	--base-colors-cyan-500: #2e8bb8;
 	--base-colors-cyan-600: #5ca5c8;
 	--base-colors-cyan-700: #8abed7;
-	--base-colors-cyan-800: #b8d8e7;
+	--base-colors-cyan-800: #c5dfec;
 	--base-colors-cyan-900: #e6f1f6;
 	--base-colors-teal-50: #050e0f;
 	--base-colors-teal-100: #0e2729;

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

@@ -19,7 +19,7 @@
 	--component-avatar-shared-color-red-hover-background: #eea198;
 	--component-avatar-shared-color-red-active-background: #e87c6f;
 	--component-avatar-shared-color-cyan-text: #00344e;
-	--component-avatar-shared-color-cyan-background: #b8d8e7;
+	--component-avatar-shared-color-cyan-background: #c5dfec;
 	--component-avatar-shared-color-cyan-border: unset;
 	--component-avatar-shared-color-cyan-hover-background: #8abed7;
 	--component-avatar-shared-color-cyan-active-background: #5ca5c8;

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

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-button-group-display: flex;
+	--component-button-group-flex-direction: column;
+	--component-button-group-flex-wrap: wrap;
+	--component-button-group-gap: 1rem;
+	--component-button-group-width: 100%;
+	--component-button-group-justify-content: flex-start;
+	--component-button-group-md-flex-direction: row;
+}

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

@@ -89,7 +89,7 @@
 	--component-date-picker-calendar-header-shared-button-aspect-ratio: 1;
 	--component-date-picker-calendar-header-shared-button-hovered-background-color: #f6f6f6;
 	--component-date-picker-calendar-header-shared-button-pressed-background-color: #ededed;
-	--component-date-picker-calendar-header-shared-button-selected-background-color: #b8d8e7;
+	--component-date-picker-calendar-header-shared-button-selected-background-color: #c5dfec;
 	--component-date-picker-calendar-header-shared-button-focus-visible-outline: 0.125rem
 		solid #0072a9;
 	--component-date-picker-calendar-header-shared-button-disabled-cursor: not-allowed;
@@ -112,7 +112,7 @@
 	--component-date-picker-calendar-cell-shared-outside-month-display: none;
 	--component-date-picker-calendar-cell-shared-hovered-background-color: #f6f6f6;
 	--component-date-picker-calendar-cell-shared-pressed-background-color: #ededed;
-	--component-date-picker-calendar-cell-shared-selected-background-color: #b8d8e7;
+	--component-date-picker-calendar-cell-shared-selected-background-color: #c5dfec;
 	--component-date-picker-calendar-cell-shared-focus-visible-outline: 0.125rem
 		solid #0072a9;
 	--component-date-picker-calendar-cell-shared-disabled-cursor: not-allowed;

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

@@ -60,7 +60,7 @@
 	--semantic-colors-fill-green-weak: #cde4c9;
 	--semantic-colors-fill-blue-weak: #c5d9f4;
 	--semantic-colors-fill-red-weak: #f5c6c0;
-	--semantic-colors-fill-cyan-weak: #b8d8e7;
+	--semantic-colors-fill-cyan-weak: #c5dfec;
 	--semantic-colors-fill-teal-weak: #c5dfe1;
 	--semantic-colors-fill-cool-purple-weak: #dbdff7;
 	--semantic-colors-fill-warm-purple-weak: #dac3e8;
@@ -68,6 +68,11 @@
 	--semantic-colors-fill-orange-weak: #fcddc6;
 	--semantic-colors-fill-yellow-weak: #fbeebf;
 	--semantic-colors-fill-selected: #005d8b;
+	--semantic-colors-fill-selected-weak: #c5dfec;
+	--semantic-colors-fill-selected-hover-weak: #c5dfec;
+	--semantic-colors-fill-selected-pressed-weak: #8abed7;
+	--semantic-colors-fill-selected-hover-strong: #8abed7;
+	--semantic-colors-fill-selected-pressed-strong: #5ca5c8;
 	--semantic-colors-fill-draft-strong: #f1c21b;
 	--semantic-colors-fill-live-weak: #aed2a6;
 	--semantic-colors-fill-warning-weak: #fbeebf;

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

@@ -19,4 +19,5 @@
 	--semantic-sizing-sidebar-lg-px: 280px;
 	--semantic-sizing-layout-max-width-px: 1584px;
 	--semantic-sizing-input-max-width-px: 450px;
+	--semantic-sizing-floating-ui-max-width-px: 200px;
 }

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

@@ -54,7 +54,7 @@ const baseColors = {
 		"500": "#2e8bb8",
 		"600": "#5ca5c8",
 		"700": "#8abed7",
-		"800": "#b8d8e7",
+		"800": "#c5dfec",
 		"900": "#e6f1f6"
 	},
 	teal: {

package/dist/styleD/build/typescript/base/colors.d.cts

@@ -54,7 +54,7 @@ declare const baseColors: {
     readonly '500': "#2e8bb8";
     readonly '600': "#5ca5c8";
     readonly '700': "#8abed7";
-    readonly '800': "#b8d8e7";
+    readonly '800': "#c5dfec";
     readonly '900': "#e6f1f6";
   };
   readonly teal: {

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

@@ -54,7 +54,7 @@ declare const baseColors: {
     readonly '500': "#2e8bb8";
     readonly '600': "#5ca5c8";
     readonly '700': "#8abed7";
-    readonly '800': "#b8d8e7";
+    readonly '800': "#c5dfec";
     readonly '900': "#e6f1f6";
   };
   readonly teal: {

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

@@ -54,7 +54,7 @@ const baseColors = {
 		"500": "#2e8bb8",
 		"600": "#5ca5c8",
 		"700": "#8abed7",
-		"800": "#b8d8e7",
+		"800": "#c5dfec",
 		"900": "#e6f1f6"
 	},
 	teal: {

package/dist/styleD/build/typescript/component/avatar.cjs

@@ -28,7 +28,7 @@ const componentAvatar = {
 			},
 			cyan: {
 				text: "#00344e",
-				background: "#b8d8e7",
+				background: "#c5dfec",
 				border: "unset",
 				hover: { background: "#8abed7" },
 				active: { background: "#5ca5c8" }

package/dist/styleD/build/typescript/component/avatar.js

@@ -28,7 +28,7 @@ const componentAvatar = {
 			},
 			cyan: {
 				text: "#00344e",
-				background: "#b8d8e7",
+				background: "#c5dfec",
 				border: "unset",
 				hover: { background: "#8abed7" },
 				active: { background: "#5ca5c8" }

package/dist/styleD/build/typescript/component/buttonGroup.cjs

@@ -0,0 +1,15 @@
+//#region src/styleD/build/typescript/component/buttonGroup.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentButtonGroup = {
+	display: "flex",
+	flexDirection: "column",
+	flexWrap: "wrap",
+	gap: "1rem",
+	width: "100%",
+	justifyContent: "flex-start",
+	md: { flexDirection: "row" }
+};
+//#endregion
+exports.componentButtonGroup = componentButtonGroup;

package/dist/styleD/build/typescript/component/buttonGroup.d.cts

@@ -0,0 +1,18 @@
+//#region src/styleD/build/typescript/component/buttonGroup.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentButtonGroup: {
+  display: string;
+  flexDirection: string;
+  flexWrap: string;
+  gap: string;
+  width: string;
+  justifyContent: string;
+  md: {
+    flexDirection: string;
+  };
+};
+type ComponentButtonGroup = typeof componentButtonGroup;
+//#endregion
+export { ComponentButtonGroup, componentButtonGroup };

package/dist/styleD/build/typescript/component/buttonGroup.d.ts

@@ -0,0 +1,18 @@
+//#region src/styleD/build/typescript/component/buttonGroup.d.ts
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const componentButtonGroup: {
+  display: string;
+  flexDirection: string;
+  flexWrap: string;
+  gap: string;
+  width: string;
+  justifyContent: string;
+  md: {
+    flexDirection: string;
+  };
+};
+type ComponentButtonGroup = typeof componentButtonGroup;
+//#endregion
+export { ComponentButtonGroup, componentButtonGroup };

package/dist/styleD/build/typescript/component/buttonGroup.js

@@ -0,0 +1,15 @@
+//#region src/styleD/build/typescript/component/buttonGroup.ts
+/**
+* Do not edit directly, this file was auto-generated.
+*/
+const componentButtonGroup = {
+	display: "flex",
+	flexDirection: "column",
+	flexWrap: "wrap",
+	gap: "1rem",
+	width: "100%",
+	justifyContent: "flex-start",
+	md: { flexDirection: "row" }
+};
+//#endregion
+export { componentButtonGroup };

package/dist/styleD/build/typescript/component/datePicker.cjs

@@ -104,7 +104,7 @@ const componentDatePicker = {
 				aspectRatio: "1",
 				hovered: { backgroundColor: "#f6f6f6" },
 				pressed: { backgroundColor: "#ededed" },
-				selected: { backgroundColor: "#b8d8e7" },
+				selected: { backgroundColor: "#c5dfec" },
 				focusVisible: { outline: "0.125rem solid #0072a9" },
 				disabled: {
 					cursor: "not-allowed",
@@ -136,7 +136,7 @@ const componentDatePicker = {
 			outsideMonth: { display: "none" },
 			hovered: { backgroundColor: "#f6f6f6" },
 			pressed: { backgroundColor: "#ededed" },
-			selected: { backgroundColor: "#b8d8e7" },
+			selected: { backgroundColor: "#c5dfec" },
 			focusVisible: { outline: "0.125rem solid #0072a9" },
 			disabled: {
 				cursor: "not-allowed",

package/dist/styleD/build/typescript/component/datePicker.js

@@ -104,7 +104,7 @@ const componentDatePicker = {
 				aspectRatio: "1",
 				hovered: { backgroundColor: "#f6f6f6" },
 				pressed: { backgroundColor: "#ededed" },
-				selected: { backgroundColor: "#b8d8e7" },
+				selected: { backgroundColor: "#c5dfec" },
 				focusVisible: { outline: "0.125rem solid #0072a9" },
 				disabled: {
 					cursor: "not-allowed",
@@ -136,7 +136,7 @@ const componentDatePicker = {
 			outsideMonth: { display: "none" },
 			hovered: { backgroundColor: "#f6f6f6" },
 			pressed: { backgroundColor: "#ededed" },
-			selected: { backgroundColor: "#b8d8e7" },
+			selected: { backgroundColor: "#c5dfec" },
 			focusVisible: { outline: "0.125rem solid #0072a9" },
 			disabled: {
 				cursor: "not-allowed",

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.cjs

@@ -25,10 +25,7 @@ const componentIntendedAudienceSignifier = {
 		size: "10px"
 	},
 	color: "#545454",
-	typography: {
-		font: "normal 460 0.75rem/1.3 Open Sans",
-		lineHeight: "1"
-	}
+	typography: { lineHeight: "1" }
 };
 //#endregion
 exports.componentIntendedAudienceSignifier = componentIntendedAudienceSignifier;

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.d.cts

@@ -26,7 +26,6 @@ declare const componentIntendedAudienceSignifier: {
   };
   color: string;
   typography: {
-    font: string;
     lineHeight: string;
   };
 };

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.d.ts

@@ -26,7 +26,6 @@ declare const componentIntendedAudienceSignifier: {
   };
   color: string;
   typography: {
-    font: string;
     lineHeight: string;
   };
 };

package/dist/styleD/build/typescript/component/intendedAudienceSignifier.js

@@ -25,10 +25,7 @@ const componentIntendedAudienceSignifier = {
 		size: "10px"
 	},
 	color: "#545454",
-	typography: {
-		font: "normal 460 0.75rem/1.3 Open Sans",
-		lineHeight: "1"
-	}
+	typography: { lineHeight: "1" }
 };
 //#endregion
 export { componentIntendedAudienceSignifier };

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

@@ -67,7 +67,7 @@ const semanticColors = {
 		greenWeak: "#cde4c9",
 		blueWeak: "#c5d9f4",
 		redWeak: "#f5c6c0",
-		cyanWeak: "#b8d8e7",
+		cyanWeak: "#c5dfec",
 		tealWeak: "#c5dfe1",
 		coolPurpleWeak: "#dbdff7",
 		warmPurpleWeak: "#dac3e8",
@@ -75,6 +75,11 @@ const semanticColors = {
 		orangeWeak: "#fcddc6",
 		yellowWeak: "#fbeebf",
 		selected: "#005d8b",
+		selectedWeak: "#c5dfec",
+		selectedHoverWeak: "#c5dfec",
+		selectedPressedWeak: "#8abed7",
+		selectedHoverStrong: "#8abed7",
+		selectedPressedStrong: "#5ca5c8",
 		draftStrong: "#f1c21b",
 		liveWeak: "#aed2a6",
 		warningWeak: "#fbeebf",

package/dist/styleD/build/typescript/semantic/colors.d.cts

@@ -75,6 +75,11 @@ declare const semanticColors: {
     orangeWeak: string;
     yellowWeak: string;
     selected: string;
+    selectedWeak: string;
+    selectedHoverWeak: string;
+    selectedPressedWeak: string;
+    selectedHoverStrong: string;
+    selectedPressedStrong: string;
     draftStrong: string;
     liveWeak: string;
     warningWeak: string;

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

@@ -75,6 +75,11 @@ declare const semanticColors: {
     orangeWeak: string;
     yellowWeak: string;
     selected: string;
+    selectedWeak: string;
+    selectedHoverWeak: string;
+    selectedPressedWeak: string;
+    selectedHoverStrong: string;
+    selectedPressedStrong: string;
     draftStrong: string;
     liveWeak: string;
     warningWeak: string;

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

@@ -67,7 +67,7 @@ const semanticColors = {
 		greenWeak: "#cde4c9",
 		blueWeak: "#c5d9f4",
 		redWeak: "#f5c6c0",
-		cyanWeak: "#b8d8e7",
+		cyanWeak: "#c5dfec",
 		tealWeak: "#c5dfe1",
 		coolPurpleWeak: "#dbdff7",
 		warmPurpleWeak: "#dac3e8",
@@ -75,6 +75,11 @@ const semanticColors = {
 		orangeWeak: "#fcddc6",
 		yellowWeak: "#fbeebf",
 		selected: "#005d8b",
+		selectedWeak: "#c5dfec",
+		selectedHoverWeak: "#c5dfec",
+		selectedPressedWeak: "#8abed7",
+		selectedHoverStrong: "#8abed7",
+		selectedPressedStrong: "#5ca5c8",
 		draftStrong: "#f1c21b",
 		liveWeak: "#aed2a6",
 		warningWeak: "#fbeebf",

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

@@ -26,7 +26,8 @@ const semanticSizing = {
 		lgPx: "280px"
 	},
 	layout: { maxWidthPx: "1584px" },
-	input: { maxWidthPx: "450px" }
+	input: { maxWidthPx: "450px" },
+	floatingUi: { maxWidthPx: "200px" }
 };
 //#endregion
 exports.semanticSizing = semanticSizing;

package/dist/styleD/build/typescript/semantic/sizing.d.cts

@@ -31,6 +31,9 @@ declare const semanticSizing: {
   input: {
     maxWidthPx: string;
   };
+  floatingUi: {
+    maxWidthPx: string;
+  };
 };
 type SemanticSizing = typeof semanticSizing;
 //#endregion

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

@@ -31,6 +31,9 @@ declare const semanticSizing: {
   input: {
     maxWidthPx: string;
   };
+  floatingUi: {
+    maxWidthPx: string;
+  };
 };
 type SemanticSizing = typeof semanticSizing;
 //#endregion

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -26,7 +26,8 @@ const semanticSizing = {
 		lgPx: "280px"
 	},
 	layout: { maxWidthPx: "1584px" },
-	input: { maxWidthPx: "450px" }
+	input: { maxWidthPx: "450px" },
+	floatingUi: { maxWidthPx: "200px" }
 };
 //#endregion
 export { semanticSizing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -57,6 +57,16 @@
         "default": "./dist/Button.cjs"
       }
     },
+    "./ButtonGroup": {
+      "import": {
+        "types": "./dist/ButtonGroup.d.ts",
+        "default": "./dist/ButtonGroup.js"
+      },
+      "require": {
+        "types": "./dist/ButtonGroup.d.cts",
+        "default": "./dist/ButtonGroup.cjs"
+      }
+    },
     "./LinkButton": {
       "import": {
         "types": "./dist/LinkButton.d.ts",
@@ -341,6 +351,7 @@
     "./component/userMenu.css": "./dist/styleD/build/css/component/userMenu.css",
     "./component/avatar.css": "./dist/styleD/build/css/component/avatar.css",
     "./component/button.css": "./dist/styleD/build/css/component/button.css",
+    "./component/buttonGroup.css": "./dist/styleD/build/css/component/buttonGroup.css",
     "./component/typography.css": "./dist/styleD/build/css/component/typography.css",
     "./component/icon.css": "./dist/styleD/build/css/component/icon.css",
     "./component/favicon.css": "./dist/styleD/build/css/component/favicon.css",
@@ -378,6 +389,9 @@
       "Button": [
         "./dist/Button.d.ts"
       ],
+      "ButtonGroup": [
+        "./dist/ButtonGroup.d.ts"
+      ],
       "LinkButton": [
         "./dist/LinkButton.d.ts"
       ],