@guardian/stand 0.0.36 → 0.0.38

package/dist/components/alert-banner/AlertBanner.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { useMemo } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { alertBannerContentStyles, alertBannerStyles, defaultAlertBannerTheme } from './styles.js';
+import { defaultAlertBannerTheme, alertBannerContentStyles, alertBannerStyles } from './styles.js';
 import { Icon } from '../icon/Icon.js';
 import { IconButton } from '../icon-button/IconButton.js';
 

package/dist/components/avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { useState } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { avatarImageStyles, avatarStyles, defaultAvatarTheme } from './styles.js';
+import { defaultAvatarTheme, avatarImageStyles, avatarStyles } from './styles.js';
 import { avatarColors } from './types.js';
 
 const getColorFromString = (input) => {

package/dist/components/button/Button.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
-import { buttonStyles, defaultButtonTheme } from './styles.js';
+import { defaultButtonTheme, buttonStyles } from './styles.js';
 
 function Button({ variant = "primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
   const mergedTheme = mergeDeep(defaultButtonTheme, theme);

package/dist/components/checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
 import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { checkboxLabelStyles, checkboxStyles, defaultCheckboxTheme } from './styles.js';
+import { defaultCheckboxTheme, checkboxLabelStyles, checkboxStyles } from './styles.js';
 
 function Checkbox({ children, size = "md", isIndeterminate = false, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultCheckboxTheme, theme);

package/dist/components/checkbox/CheckboxGroup.js

@@ -4,7 +4,7 @@ import { CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
 import { Checkbox } from './Checkbox.js';
-import { checkboxGroupStyles, defaultCheckboxTheme } from './styles.js';
+import { defaultCheckboxTheme, checkboxGroupStyles } from './styles.js';
 
 function CheckboxGroup({ size = "md", theme = {}, ...props }) {
   const mergedTheme = mergeDeep(defaultCheckboxTheme, {

package/dist/components/date-picker/DatePicker.js

@@ -4,7 +4,7 @@ import { DatePicker as DatePicker$1, Group, I18nProvider, Button, Popover, DateI
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { FormInputContainer } from '../form/Form.js';
 import { Icon } from '../icon/Icon.js';
-import { dateSegmentStyles, datePickerStyles, datePickerPopoverStyles, defaultDatePickerTheme, calendarHeaderStyles, calendarCellStyles, calendarGridStyles } from './styles.js';
+import { defaultDatePickerTheme, dateSegmentStyles, datePickerStyles, datePickerPopoverStyles, calendarHeaderStyles, calendarCellStyles, calendarGridStyles } from './styles.js';
 
 const MONTHS = [
   "January",

package/dist/components/grid/Grid.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { gridStyles, itemStyles, defaultGridTheme } from './styles.js';
+import { defaultGridTheme, gridStyles, itemStyles } from './styles.js';
 
 function Grid({ children, theme = {}, cssOverrides, as: Component = "div", ...props }) {
   const mergedTheme = mergeDeep(defaultGridTheme, theme);

package/dist/components/grid/styles.cjs

@@ -8,9 +8,9 @@ const defaultGridTheme = grid.componentGrid;
 const isResponsiveGridSize = (size) => typeof size === "object";
 const isResponsiveOffset = (offset) => typeof offset === "object";
 const clampToColumns = (value, columns) => Math.max(0, Math.min(value, columns));
-const numericOffsetMargin = (offset, theme) => `calc(((100% - (${theme.shared.columns} - 1) * ${theme.shared.gap}) * ${offset} / ${theme.shared.columns}) + ${offset} * ${theme.shared.gap})`;
-const numericSizeWidth = (size, theme) => `calc(((100% - (${theme.shared.columns} - 1) * ${theme.shared.gap}) * ${size} / ${theme.shared.columns}) + (${size} - 1) * ${theme.shared.gap})`;
-const fixedSizeStyles = (size, theme) => {
+const numericOffsetMargin = (offset, columns, gap) => `calc(((100% - (${columns} - 1) * ${gap}) * ${offset} / ${columns}) + ${offset} * ${gap})`;
+const numericSizeWidth = (size, columns, gap) => `calc(((100% - (${columns} - 1) * ${gap}) * ${size} / ${columns}) + (${size} - 1) * ${gap})`;
+const fixedSizeStyles = (size, theme, breakpoint) => {
   if (size === "grow") {
     return react.css`
 			flex-basis: 0;
@@ -27,59 +27,53 @@ const fixedSizeStyles = (size, theme) => {
 			max-width: none;
 		`;
   }
-  const clampedSize = clampToColumns(size, theme.shared.columns);
-  const width = numericSizeWidth(clampedSize, theme);
+  const width = numericSizeWidth(
+    clampToColumns(size, theme[breakpoint].columns),
+    theme[breakpoint].columns,
+    theme[breakpoint].gap
+  );
   return react.css`
-		flex-basis: ${width};
 		flex-grow: 0;
+		flex-basis: ${width};
 		width: ${width};
 		max-width: ${width};
 	`;
 };
-const fixedOffsetStyles = (offset, theme) => {
+const fixedOffsetStyles = (offset, theme, breakpoint) => {
+  if (typeof offset === "undefined") {
+    return react.css``;
+  }
   if (offset === "auto") {
     return react.css`
 			margin-left: auto;
 		`;
   }
-  const clampedOffset = clampToColumns(offset, theme.shared.columns);
   return react.css`
-		margin-left: ${numericOffsetMargin(clampedOffset, theme)};
+		margin-left: ${numericOffsetMargin(
+    clampToColumns(offset, theme[breakpoint].columns),
+    theme[breakpoint].columns,
+    theme[breakpoint].gap
+  )};
 	`;
 };
-const offsetStyles = (offset, theme) => {
-  if (typeof offset === "undefined") {
-    return react.css``;
-  }
+const offsetStyles = (offset, theme, breakpoint) => {
   if (!isResponsiveOffset(offset)) {
-    return fixedOffsetStyles(offset, theme);
+    return fixedOffsetStyles(offset, theme, breakpoint);
   }
-  return react.css`
-		${Object.entries(offset).map(
-    ([breakpoint, breakpointOffset]) => react.css`
-				${mq.from[breakpoint]} {
-					${fixedOffsetStyles(breakpointOffset, theme)}
-				}
-			`
-  )}
-	`;
+  return fixedOffsetStyles(offset[breakpoint], theme, breakpoint);
 };
-const sizeStyles = (size, theme) => {
+const sizeStyles = (size, theme, breakpoint) => {
   if (typeof size === "undefined") {
-    return fixedSizeStyles(theme.shared.columns, theme);
+    size = theme[breakpoint].columns;
   }
   if (!isResponsiveGridSize(size)) {
-    return fixedSizeStyles(size, theme);
+    return fixedSizeStyles(size, theme, breakpoint);
   }
-  return react.css`
-		${Object.entries(size).map(
-    ([breakpoint, breakpointSize]) => react.css`
-				${mq.from[breakpoint]} {
-					${fixedSizeStyles(breakpointSize, theme)}
-				}
-			`
-  )}
-	`;
+  return fixedSizeStyles(
+    size[breakpoint] ?? theme[breakpoint].columns,
+    theme,
+    breakpoint
+  );
 };
 const gridStyles = (theme) => {
   return react.css`
@@ -87,17 +81,43 @@ const gridStyles = (theme) => {
 		width: ${theme.shared.width};
 		flex-direction: ${theme.shared.direction};
 		flex-wrap: ${theme.shared.wrap};
-		padding: 0 ${theme.shared.gap};
-		gap: ${theme.shared.gap};
 		justify-content: ${theme.shared.justifyContent};
 		align-items: ${theme.shared.alignItems};
+
+		${mq.from.sm} {
+			gap: ${theme.sm.gap};
+			padding: 0 ${theme.sm.padding};
+		}
+
+		${mq.from.md} {
+			gap: ${theme.md.gap};
+			padding: 0 ${theme.md.padding};
+		}
+
+		${mq.from.lg} {
+			gap: ${theme.lg.gap};
+			padding: 0 ${theme.lg.padding};
+		}
 	`;
 };
 const itemStyles = (theme, { size, offset }) => {
   return react.css`
 		min-width: 0;
-		${sizeStyles(size, theme)}
-		${offsetStyles(offset, theme)}
+
+		${mq.from.sm} {
+			${sizeStyles(size, theme, "sm")}
+			${offsetStyles(offset, theme, "sm")}
+		}
+
+		${mq.from.md} {
+			${sizeStyles(size, theme, "md")}
+			${offsetStyles(offset, theme, "md")}
+		}
+
+		${mq.from.lg} {
+			${sizeStyles(size, theme, "lg")}
+			${offsetStyles(offset, theme, "lg")}
+		}
 	`;
 };
 

package/dist/components/grid/styles.js

@@ -6,9 +6,9 @@ const defaultGridTheme = componentGrid;
 const isResponsiveGridSize = (size) => typeof size === "object";
 const isResponsiveOffset = (offset) => typeof offset === "object";
 const clampToColumns = (value, columns) => Math.max(0, Math.min(value, columns));
-const numericOffsetMargin = (offset, theme) => `calc(((100% - (${theme.shared.columns} - 1) * ${theme.shared.gap}) * ${offset} / ${theme.shared.columns}) + ${offset} * ${theme.shared.gap})`;
-const numericSizeWidth = (size, theme) => `calc(((100% - (${theme.shared.columns} - 1) * ${theme.shared.gap}) * ${size} / ${theme.shared.columns}) + (${size} - 1) * ${theme.shared.gap})`;
-const fixedSizeStyles = (size, theme) => {
+const numericOffsetMargin = (offset, columns, gap) => `calc(((100% - (${columns} - 1) * ${gap}) * ${offset} / ${columns}) + ${offset} * ${gap})`;
+const numericSizeWidth = (size, columns, gap) => `calc(((100% - (${columns} - 1) * ${gap}) * ${size} / ${columns}) + (${size} - 1) * ${gap})`;
+const fixedSizeStyles = (size, theme, breakpoint) => {
   if (size === "grow") {
     return css`
 			flex-basis: 0;
@@ -25,55 +25,41 @@ const fixedSizeStyles = (size, theme) => {
 			max-width: none;
 		`;
   }
-  const clampedSize = clampToColumns(size, theme.shared.columns);
-  const width = numericSizeWidth(clampedSize, theme);
+  const width = numericSizeWidth(clampToColumns(size, theme[breakpoint].columns), theme[breakpoint].columns, theme[breakpoint].gap);
   return css`
-		flex-basis: ${width};
 		flex-grow: 0;
+		flex-basis: ${width};
 		width: ${width};
 		max-width: ${width};
 	`;
 };
-const fixedOffsetStyles = (offset, theme) => {
+const fixedOffsetStyles = (offset, theme, breakpoint) => {
+  if (typeof offset === "undefined") {
+    return css``;
+  }
   if (offset === "auto") {
     return css`
 			margin-left: auto;
 		`;
   }
-  const clampedOffset = clampToColumns(offset, theme.shared.columns);
   return css`
-		margin-left: ${numericOffsetMargin(clampedOffset, theme)};
+		margin-left: ${numericOffsetMargin(clampToColumns(offset, theme[breakpoint].columns), theme[breakpoint].columns, theme[breakpoint].gap)};
 	`;
 };
-const offsetStyles = (offset, theme) => {
-  if (typeof offset === "undefined") {
-    return css``;
-  }
+const offsetStyles = (offset, theme, breakpoint) => {
   if (!isResponsiveOffset(offset)) {
-    return fixedOffsetStyles(offset, theme);
+    return fixedOffsetStyles(offset, theme, breakpoint);
   }
-  return css`
-		${Object.entries(offset).map(([breakpoint, breakpointOffset]) => css`
-				${from[breakpoint]} {
-					${fixedOffsetStyles(breakpointOffset, theme)}
-				}
-			`)}
-	`;
+  return fixedOffsetStyles(offset[breakpoint], theme, breakpoint);
 };
-const sizeStyles = (size, theme) => {
+const sizeStyles = (size, theme, breakpoint) => {
   if (typeof size === "undefined") {
-    return fixedSizeStyles(theme.shared.columns, theme);
+    size = theme[breakpoint].columns;
   }
   if (!isResponsiveGridSize(size)) {
-    return fixedSizeStyles(size, theme);
+    return fixedSizeStyles(size, theme, breakpoint);
   }
-  return css`
-		${Object.entries(size).map(([breakpoint, breakpointSize]) => css`
-				${from[breakpoint]} {
-					${fixedSizeStyles(breakpointSize, theme)}
-				}
-			`)}
-	`;
+  return fixedSizeStyles(size[breakpoint] ?? theme[breakpoint].columns, theme, breakpoint);
 };
 const gridStyles = (theme) => {
   return css`
@@ -81,17 +67,43 @@ const gridStyles = (theme) => {
 		width: ${theme.shared.width};
 		flex-direction: ${theme.shared.direction};
 		flex-wrap: ${theme.shared.wrap};
-		padding: 0 ${theme.shared.gap};
-		gap: ${theme.shared.gap};
 		justify-content: ${theme.shared.justifyContent};
 		align-items: ${theme.shared.alignItems};
+
+		${from.sm} {
+			gap: ${theme.sm.gap};
+			padding: 0 ${theme.sm.padding};
+		}
+
+		${from.md} {
+			gap: ${theme.md.gap};
+			padding: 0 ${theme.md.padding};
+		}
+
+		${from.lg} {
+			gap: ${theme.lg.gap};
+			padding: 0 ${theme.lg.padding};
+		}
 	`;
 };
 const itemStyles = (theme, { size, offset }) => {
   return css`
 		min-width: 0;
-		${sizeStyles(size, theme)}
-		${offsetStyles(offset, theme)}
+
+		${from.sm} {
+			${sizeStyles(size, theme, "sm")}
+			${offsetStyles(offset, theme, "sm")}
+		}
+
+		${from.md} {
+			${sizeStyles(size, theme, "md")}
+			${offsetStyles(offset, theme, "md")}
+		}
+
+		${from.lg} {
+			${sizeStyles(size, theme, "lg")}
+			${offsetStyles(offset, theme, "lg")}
+		}
 	`;
 };
 

package/dist/components/icon/Icon.js

@@ -1,6 +1,6 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 import { mergeDeep } from '../../util/mergeDeep.js';
-import { iconStyles, defaultIconTheme } from './styles.js';
+import { defaultIconTheme, iconStyles } from './styles.js';
 
 function Icon({ children, size = "md", fill, alt, symbol, theme = {}, cssOverrides, className }) {
   const mergedTheme = mergeDeep(defaultIconTheme, theme);

package/dist/components/icon-button/IconButton.js

@@ -3,7 +3,7 @@ import { useRef, useEffect } from 'react';
 import { Button, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
-import { iconButtonStyles, defaultIconButtonTheme } from './styles.js';
+import { defaultIconButtonTheme, iconButtonStyles } from './styles.js';
 
 function IconButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultIconButtonTheme, theme);

package/dist/components/icon-button/styles.js

@@ -1,4 +1,4 @@
-import { buttonStyles, defaultButtonTheme } from '../button/styles.js';
+import { defaultButtonTheme, buttonStyles } from '../button/styles.js';
 
 const defaultIconButtonTheme = defaultButtonTheme;
 const iconButtonStyles = buttonStyles;

package/dist/components/icon-link-button/IconLinkButton.js

@@ -3,7 +3,7 @@ import { useRef, useEffect } from 'react';
 import { Link, composeRenderProps } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
-import { iconLinkButtonStyles, defaultIconLinkButtonTheme } from './styles.js';
+import { defaultIconLinkButtonTheme, iconLinkButtonStyles } from './styles.js';
 
 function IconLinkButton({ variant = "primary", size = "md", symbol, ariaLabel, theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultIconLinkButtonTheme, theme);

package/dist/components/icon-link-button/styles.js

@@ -1,4 +1,4 @@
-import { buttonStyles, defaultButtonTheme } from '../button/styles.js';
+import { defaultButtonTheme, buttonStyles } from '../button/styles.js';
 
 const defaultIconLinkButtonTheme = defaultButtonTheme;
 const iconLinkButtonStyles = buttonStyles;

package/dist/components/inline-message/InlineMessage.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { Icon } from '../icon/Icon.js';
 import { Typography } from '../typography/Typography.js';
-import { inlineMessageIconStyles, inlineMessageStyles, defaultInlineMessageTheme } from './styles.js';
+import { defaultInlineMessageTheme, inlineMessageIconStyles, inlineMessageStyles } from './styles.js';
 
 function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) {
   const mergedTheme = mergeDeep(defaultInlineMessageTheme, theme);

package/dist/components/intended-audience-signifier/FlagIcons.cjs

@@ -95,28 +95,17 @@ const auFlag = /* @__PURE__ */ jsxRuntime.jsxs(
     ]
   }
 );
-const globeIcon = /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    style: { marginTop: "2px" },
-    width: "16px",
-    height: "16px",
-    fill: "#000000",
-    viewBox: "0 0 16 16",
-    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.81.81 0 0 1 1.034-.275.81.81 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34q.118.04.243.054c.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.33.33 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501" })
-  }
-);
+const globeIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12px", height: "12px", fill: "#000000", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.81.81 0 0 1 1.034-.275.81.81 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34q.118.04.243.054c.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.33.33 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501" }) });
 const DoubleChevronRightSvg = /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
-    width: "13",
-    height: "13",
+    width: "12",
+    height: "12",
     viewBox: "0 0 9 7",
-    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z", fill: "#545454" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z", fill: "#545454" })
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z" })
     ]
   }
 );

package/dist/components/intended-audience-signifier/FlagIcons.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 const ukFlag = jsxs("svg", { height: "12px", xmlns: "http://www.w3.org/2000/svg", id: "flag-icons-gb", viewBox: "0 0 640 480", children: [jsx("path", { fill: "#012169", d: "M0 0h640v480H0z" }), jsx("path", { fill: "#FFF", d: "m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z" }), jsx("path", { fill: "#C8102E", d: "m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z" }), jsx("path", { fill: "#FFF", d: "M241 0v480h160V0zM0 160v160h640V160z" }), jsx("path", { fill: "#C8102E", d: "M0 193v96h640v-96zM273 0v480h96V0z" })] });
 const usFlag = jsxs("svg", { height: "12px", xmlns: "http://www.w3.org/2000/svg", id: "flag-icons-us", viewBox: "0 0 640 480", children: [jsx("path", { fill: "#bd3d44", d: "M0 0h640v480H0" }), jsx("path", { stroke: "#fff", strokeWidth: "37", d: "M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640" }), jsx("path", { fill: "#192f5d", d: "M0 0h364.8v258.5H0" }), jsx("marker", { id: "us-a", markerHeight: "30", markerWidth: "30", children: jsx("path", { fill: "#fff", d: "m14 0 9 27L0 10h28L5 27z" }) }), jsx("path", { fill: "none", markerMid: "url(#us-a)", d: "m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60z" })] });
 const auFlag = jsxs("svg", { height: "12px", xmlns: "http://www.w3.org/2000/svg", id: "flag-icons-au", viewBox: "0 0 640 480", children: [jsx("path", { fill: "#00008B", d: "M0 0h640v480H0z" }), jsx("path", { fill: "#fff", d: "m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z" }), jsx("path", { fill: "red", d: "M212 140.5 320 220v20l-135.5-99.5zm-92 10 3 17.5-96 72H0zM320 0v1.5l-124.5 94 1-22L295 0zM0 0l119.5 88h-30L0 21z" }), jsx("path", { fill: "#fff", d: "M120.5 0v240h80V0zM0 80v80h320V80z" }), jsx("path", { fill: "red", d: "M0 96.5v48h320v-48zM136.5 0v240h48V0z" }), jsx("path", { fill: "#fff", d: "m527 396.7-20.5 2.6 2.2 20.5-14.8-14.4-14.7 14.5 2-20.5-20.5-2.4 17.3-11.2-10.9-17.5 19.6 6.5 6.9-19.5 7.1 19.4 19.5-6.7-10.7 17.6zm-3.7-117.2 2.7-13-9.8-9 13.2-1.5 5.5-12.1 5.5 12.1 13.2 1.5-9.8 9 2.7 13-11.6-6.6zm-104.1-60-20.3 2.2 1.8 20.3-14.4-14.5-14.8 14.1 2.4-20.3-20.2-2.7 17.3-10.8-10.5-17.5 19.3 6.8L387 178l6.7 19.3 19.4-6.3-10.9 17.3 17.1 11.2ZM623 186.7l-20.9 2.7 2.3 20.9-15.1-14.7-15 14.8 2.1-21-20.9-2.4 17.7-11.5-11.1-17.9 20 6.7 7-19.8 7.2 19.8 19.9-6.9-11 18zm-96.1-83.5-20.7 2.3 1.9 20.8-14.7-14.8-15.1 14.4 2.4-20.7-20.7-2.8 17.7-11L467 73.5l19.7 6.9 7.3-19.5 6.8 19.7 19.8-6.5-11.1 17.6zM234 385.7l-45.8 5.4 4.6 45.9-32.8-32.4-33 32.2 4.9-45.9-45.8-5.8 38.9-24.8-24-39.4 43.6 15 15.8-43.4 15.5 43.5 43.7-14.7-24.3 39.2 38.8 25.1Z" })] });
-const globeIcon = jsx("svg", { style: { marginTop: "2px" }, width: "16px", height: "16px", fill: "#000000", viewBox: "0 0 16 16", children: jsx("path", { d: "M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.81.81 0 0 1 1.034-.275.81.81 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34q.118.04.243.054c.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.33.33 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501" }) });
-const DoubleChevronRightSvg = jsxs("svg", { width: "13", height: "13", viewBox: "0 0 9 7", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z", fill: "#545454" }), jsx("path", { d: "M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z", fill: "#545454" })] });
+const globeIcon = jsx("svg", { width: "12px", height: "12px", fill: "#000000", viewBox: "0 0 16 16", children: jsx("path", { d: "M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.81.81 0 0 1 1.034-.275.81.81 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34q.118.04.243.054c.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.33.33 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501" }) });
+const DoubleChevronRightSvg = jsxs("svg", { width: "12", height: "12", viewBox: "0 0 9 7", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z" }), jsx("path", { d: "M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z" })] });
 
 export { DoubleChevronRightSvg, auFlag, globeIcon, ukFlag, usFlag };

package/dist/components/intended-audience-signifier/IntendedAudienceSignifier.cjs

@@ -46,6 +46,8 @@ function IntendedAudienceSignifier({
       }
     );
   }
+  const iconStyles = styles.intendedAudienceSignifierIconStyles(mergedTheme);
+  const chevronIconStyles = styles.intendedAudienceSignifierChevronIconStyles(mergedTheme);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -53,12 +55,9 @@ function IntendedAudienceSignifier({
       className,
       css: [styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: getSourceIconElement(source, intendedAudience) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          " ",
-          FlagIcons.DoubleChevronRightSvg
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: getIntendedAudienceIconElement(source, intendedAudience) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: iconStyles, children: getSourceIconElement(source, intendedAudience) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: chevronIconStyles, children: FlagIcons.DoubleChevronRightSvg }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: iconStyles, children: getIntendedAudienceIconElement(source, intendedAudience) })
       ]
     }
   );

package/dist/components/intended-audience-signifier/IntendedAudienceSignifier.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import { mergeDeep } from '../../util/mergeDeep.js';
 import { DoubleChevronRightSvg, globeIcon, auFlag, usFlag, ukFlag } from './FlagIcons.js';
-import { intendedAudienceSignifierStyles, defaultIntendedAudienceSignifierTheme } from './styles.js';
+import { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierChevronIconStyles } from './styles.js';
 
 const sourceIcons = {
   UK: ukFlag,
@@ -29,7 +29,9 @@ function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOv
   if (intendedAudience === "Don't know") {
     return jsx("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], children: jsx("span", { children: "Don\u2018t know" }) });
   }
-  return jsxs("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], children: [jsx("div", { children: getSourceIconElement(source, intendedAudience) }), jsxs("div", { children: [" ", DoubleChevronRightSvg] }), jsx("div", { children: getIntendedAudienceIconElement(source, intendedAudience) })] });
+  const iconStyles = intendedAudienceSignifierIconStyles(mergedTheme);
+  const chevronIconStyles = intendedAudienceSignifierChevronIconStyles(mergedTheme);
+  return jsxs("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], children: [jsx("div", { css: iconStyles, children: getSourceIconElement(source, intendedAudience) }), jsx("div", { css: chevronIconStyles, children: DoubleChevronRightSvg }), jsx("div", { css: iconStyles, children: getIntendedAudienceIconElement(source, intendedAudience) })] });
 }
 
 export { IntendedAudienceSignifier };

package/dist/components/intended-audience-signifier/styles.cjs

@@ -10,8 +10,7 @@ const intendedAudienceSignifierStyles = (theme) => react.css`
 	justify-content: ${theme.justifyContent};
 	align-items: ${theme.alignItems};
 	color: ${theme.color};
-	font-weight: ${theme.typography.fontWeight};
-	font-size: ${theme.typography.fontSize};
+	font: ${theme.typography.font};
 	line-height: ${theme.typography.lineHeight};
 	border-width: ${theme.borderWidth};
 	border-style: ${theme.borderStyle};
@@ -21,11 +20,26 @@ const intendedAudienceSignifierStyles = (theme) => react.css`
 	box-sizing: ${theme.boxSizing};
 	width: ${theme.width};
 	gap: ${theme.gap};
+`;
+const intendedAudienceSignifierIconStyles = (theme) => react.css`
+	display: flex;
 	svg {
 		height: ${theme.svg.height};
 		width: ${theme.svg.width};
 	}
 `;
+const intendedAudienceSignifierChevronIconStyles = (theme) => react.css`
+	display: flex;
+	svg {
+		height: ${theme.chevron.size};
+		width: ${theme.chevron.size};
+	}
+	svg path {
+		fill: ${theme.chevron.fill};
+	}
+`;
 
 exports.defaultIntendedAudienceSignifierTheme = defaultIntendedAudienceSignifierTheme;
+exports.intendedAudienceSignifierChevronIconStyles = intendedAudienceSignifierChevronIconStyles;
+exports.intendedAudienceSignifierIconStyles = intendedAudienceSignifierIconStyles;
 exports.intendedAudienceSignifierStyles = intendedAudienceSignifierStyles;

package/dist/components/intended-audience-signifier/styles.js

@@ -8,8 +8,7 @@ const intendedAudienceSignifierStyles = (theme) => css`
 	justify-content: ${theme.justifyContent};
 	align-items: ${theme.alignItems};
 	color: ${theme.color};
-	font-weight: ${theme.typography.fontWeight};
-	font-size: ${theme.typography.fontSize};
+	font: ${theme.typography.font};
 	line-height: ${theme.typography.lineHeight};
 	border-width: ${theme.borderWidth};
 	border-style: ${theme.borderStyle};
@@ -19,10 +18,23 @@ const intendedAudienceSignifierStyles = (theme) => css`
 	box-sizing: ${theme.boxSizing};
 	width: ${theme.width};
 	gap: ${theme.gap};
+`;
+const intendedAudienceSignifierIconStyles = (theme) => css`
+	display: flex;
 	svg {
 		height: ${theme.svg.height};
 		width: ${theme.svg.width};
 	}
 `;
+const intendedAudienceSignifierChevronIconStyles = (theme) => css`
+	display: flex;
+	svg {
+		height: ${theme.chevron.size};
+		width: ${theme.chevron.size};
+	}
+	svg path {
+		fill: ${theme.chevron.fill};
+	}
+`;
 
-export { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierStyles };
+export { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierChevronIconStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierStyles };