@guardian/stand 0.0.33 → 0.0.35

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

@@ -0,0 +1,128 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+const ukFlag = /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    height: "12px",
+    xmlns: "http://www.w3.org/2000/svg",
+    id: "flag-icons-gb",
+    viewBox: "0 0 640 480",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#012169", d: "M0 0h640v480H0z" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "#FFF",
+          d: "m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "#C8102E",
+          d: "m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#FFF", d: "M241 0v480h160V0zM0 160v160h640V160z" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#C8102E", d: "M0 193v96h640v-96zM273 0v480h96V0z" })
+    ]
+  }
+);
+const usFlag = /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    height: "12px",
+    xmlns: "http://www.w3.org/2000/svg",
+    id: "flag-icons-us",
+    viewBox: "0 0 640 480",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#bd3d44", d: "M0 0h640v480H0" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          stroke: "#fff",
+          strokeWidth: "37",
+          d: "M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#192f5d", d: "M0 0h364.8v258.5H0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "us-a", markerHeight: "30", markerWidth: "30", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#fff", d: "m14 0 9 27L0 10h28L5 27z" }) }),
+      /* @__PURE__ */ jsxRuntime.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 = /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    height: "12px",
+    xmlns: "http://www.w3.org/2000/svg",
+    id: "flag-icons-au",
+    viewBox: "0 0 640 480",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#00008B", d: "M0 0h640v480H0z" }),
+      /* @__PURE__ */ jsxRuntime.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"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#fff", d: "M120.5 0v240h80V0zM0 80v80h320V80z" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "red", d: "M0 96.5v48h320v-48zM136.5 0v240h48V0z" }),
+      /* @__PURE__ */ jsxRuntime.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 = /* @__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 DoubleChevronRightSvg = /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "13",
+    height: "13",
+    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" })
+    ]
+  }
+);
+
+exports.DoubleChevronRightSvg = DoubleChevronRightSvg;
+exports.auFlag = auFlag;
+exports.globeIcon = globeIcon;
+exports.ukFlag = ukFlag;
+exports.usFlag = usFlag;

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

@@ -0,0 +1,9 @@
+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" })] });
+
+export { DoubleChevronRightSvg, auFlag, globeIcon, ukFlag, usFlag };

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

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var FlagIcons = require('./FlagIcons.cjs');
+var styles = require('./styles.cjs');
+
+const sourceIcons = {
+  UK: FlagIcons.ukFlag,
+  US: FlagIcons.usFlag,
+  AUS: FlagIcons.auFlag,
+  Global: FlagIcons.globeIcon
+};
+const getSourceIconElement = (sourceTag, audience) => {
+  if (audience === "Global") {
+    return FlagIcons.globeIcon;
+  }
+  return sourceIcons[sourceTag];
+};
+const getIntendedAudienceIconElement = (sourceTag, audience) => {
+  if (audience === "Domestic for Domestic") {
+    return getSourceIconElement(sourceTag, audience);
+  }
+  if (audience === "Global" || audience === "Domestic For Global") {
+    return FlagIcons.globeIcon;
+  }
+  return sourceIcons[audience];
+};
+function IntendedAudienceSignifier({
+  source,
+  intendedAudience,
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultIntendedAudienceSignifierTheme, theme);
+  if (intendedAudience === "Don't know") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...props,
+        className,
+        css: [styles.intendedAudienceSignifierStyles(mergedTheme), cssOverrides],
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Don\u2018t know" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...props,
+      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) })
+      ]
+    }
+  );
+}
+
+exports.IntendedAudienceSignifier = IntendedAudienceSignifier;

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

@@ -0,0 +1,35 @@
+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';
+
+const sourceIcons = {
+  UK: ukFlag,
+  US: usFlag,
+  AUS: auFlag,
+  Global: globeIcon
+};
+const getSourceIconElement = (sourceTag, audience) => {
+  if (audience === "Global") {
+    return globeIcon;
+  }
+  return sourceIcons[sourceTag];
+};
+const getIntendedAudienceIconElement = (sourceTag, audience) => {
+  if (audience === "Domestic for Domestic") {
+    return getSourceIconElement(sourceTag, audience);
+  }
+  if (audience === "Global" || audience === "Domestic For Global") {
+    return globeIcon;
+  }
+  return sourceIcons[audience];
+};
+function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultIntendedAudienceSignifierTheme, theme);
+  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) })] });
+}
+
+export { IntendedAudienceSignifier };

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var react = require('@emotion/react');
+var intendedAudienceSignifier = require('../../styleD/build/typescript/component/intendedAudienceSignifier.cjs');
+
+const defaultIntendedAudienceSignifierTheme = intendedAudienceSignifier.componentIntendedAudienceSignifier;
+const intendedAudienceSignifierStyles = (theme) => react.css`
+	display: ${theme.display};
+	flex-direction: ${theme.flexDirection};
+	justify-content: ${theme.justifyContent};
+	align-items: ${theme.alignItems};
+	color: ${theme.color};
+	font-weight: ${theme.typography.fontWeight};
+	font-size: ${theme.typography.fontSize};
+	line-height: ${theme.typography.lineHeight};
+	border-width: ${theme.borderWidth};
+	border-style: ${theme.borderStyle};
+	border-color: ${theme.borderColor};
+	border-radius: ${theme.borderRadius};
+	padding: ${theme.paddingY} ${theme.paddingX};
+	box-sizing: ${theme.boxSizing};
+	width: ${theme.width};
+	gap: ${theme.gap};
+	svg {
+		height: ${theme.svg.height};
+		width: ${theme.svg.width};
+	}
+`;
+
+exports.defaultIntendedAudienceSignifierTheme = defaultIntendedAudienceSignifierTheme;
+exports.intendedAudienceSignifierStyles = intendedAudienceSignifierStyles;

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

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import { componentIntendedAudienceSignifier } from '../../styleD/build/typescript/component/intendedAudienceSignifier.js';
+
+const defaultIntendedAudienceSignifierTheme = componentIntendedAudienceSignifier;
+const intendedAudienceSignifierStyles = (theme) => css`
+	display: ${theme.display};
+	flex-direction: ${theme.flexDirection};
+	justify-content: ${theme.justifyContent};
+	align-items: ${theme.alignItems};
+	color: ${theme.color};
+	font-weight: ${theme.typography.fontWeight};
+	font-size: ${theme.typography.fontSize};
+	line-height: ${theme.typography.lineHeight};
+	border-width: ${theme.borderWidth};
+	border-style: ${theme.borderStyle};
+	border-color: ${theme.borderColor};
+	border-radius: ${theme.borderRadius};
+	padding: ${theme.paddingY} ${theme.paddingX};
+	box-sizing: ${theme.boxSizing};
+	width: ${theme.width};
+	gap: ${theme.gap};
+	svg {
+		height: ${theme.svg.height};
+		width: ${theme.svg.width};
+	}
+`;
+
+export { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierStyles };

package/dist/index.cjs

@@ -4,6 +4,7 @@ var autocomplete = require('./styleD/build/typescript/component/autocomplete.cjs
 var byline = require('./styleD/build/typescript/component/byline.cjs');
 var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
 var userMenu = require('./styleD/build/typescript/component/userMenu.cjs');
+var intendedAudienceSignifier = require('./styleD/build/typescript/component/intendedAudienceSignifier.cjs');
 var avatar = require('./styleD/build/typescript/component/avatar.cjs');
 var button = require('./styleD/build/typescript/component/button.cjs');
 var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
@@ -38,6 +39,7 @@ exports.componentAutocomplete = autocomplete.componentAutocomplete;
 exports.componentByline = byline.componentByline;
 exports.componentTagTable = tagTable.componentTagTable;
 exports.componentUserMenu = userMenu.componentUserMenu;
+exports.componentIntendedAudienceSignifier = intendedAudienceSignifier.componentIntendedAudienceSignifier;
 exports.componentAvatar = avatar.componentAvatar;
 exports.componentButton = button.componentButton;
 exports.componentCheckbox = checkbox.componentCheckbox;

package/dist/index.js

@@ -2,6 +2,7 @@ export { componentAutocomplete } from './styleD/build/typescript/component/autoc
 export { componentByline } from './styleD/build/typescript/component/byline.js';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
 export { componentUserMenu } from './styleD/build/typescript/component/userMenu.js';
+export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier.js';
 export { componentAvatar } from './styleD/build/typescript/component/avatar.js';
 export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';

package/dist/intended-audience-signifier.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var IntendedAudienceSignifier = require('./components/intended-audience-signifier/IntendedAudienceSignifier.cjs');
+var intendedAudienceSignifier = require('./styleD/build/typescript/component/intendedAudienceSignifier.cjs');
+
+
+
+exports.IntendedAudienceSignifier = IntendedAudienceSignifier.IntendedAudienceSignifier;
+exports.componentIntendedAudienceSignifier = intendedAudienceSignifier.componentIntendedAudienceSignifier;

package/dist/intended-audience-signifier.js

@@ -0,0 +1,2 @@
+export { IntendedAudienceSignifier } from './components/intended-audience-signifier/IntendedAudienceSignifier.js';
+export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier.js';

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

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-intended-audience-signifier-display: flex;
+	--component-intended-audience-signifier-flex-direction: row;
+	--component-intended-audience-signifier-justify-content: center;
+	--component-intended-audience-signifier-align-items: center;
+	--component-intended-audience-signifier-border-color: #000000;
+	--component-intended-audience-signifier-border-width: 1px;
+	--component-intended-audience-signifier-border-style: solid;
+	--component-intended-audience-signifier-border-radius: 0.125rem;
+	--component-intended-audience-signifier-padding-y: 2px;
+	--component-intended-audience-signifier-padding-x: 4px;
+	--component-intended-audience-signifier-box-sizing: border-box;
+	--component-intended-audience-signifier-width: fit-content;
+	--component-intended-audience-signifier-gap: 8px;
+	--component-intended-audience-signifier-svg-height: unset;
+	--component-intended-audience-signifier-svg-width: unset;
+	--component-intended-audience-signifier-color: #545454;
+	--component-intended-audience-signifier-typography-font-weight: 400;
+	--component-intended-audience-signifier-typography-font-size: 0.75rem;
+	--component-intended-audience-signifier-typography-line-height: 1;
+}

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

@@ -3,7 +3,7 @@
  */
 
 :root {
-	--component-link-shared-focus-outline: 1px solid #0072a9;
+	--component-link-shared-focus-outline: 0.0625rem solid #0072a9;
 	--component-link-shared-hover-color: #00344e;
 	--component-link-shared-hover-cursor: pointer;
 	--component-link-shared-enabled-color: #00496c;

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

@@ -3,16 +3,7 @@
  */
 
 :root {
-	--semantic-breakpoints-sm-min: 0;
-	--semantic-breakpoints-sm-max: 671px;
-	--semantic-breakpoints-md-min: 672px;
-	--semantic-breakpoints-md-max: 1055px;
-	--semantic-breakpoints-lg-min: 1056px;
-	--semantic-breakpoints-lg-max: 1311px;
-	--semantic-breakpoints-xl-min: 1312px;
-	--semantic-breakpoints-xl-max: 1583px;
-	--semantic-breakpoints-max-min: 1584px;
-	--semantic-breakpoints-max-max: 1783px;
-	--semantic-breakpoints-maxplus-min: 1784px;
-	--semantic-breakpoints-maxplus-max: initial;
+	--semantic-breakpoints-sm: 0;
+	--semantic-breakpoints-md: 830px;
+	--semantic-breakpoints-lg: 1056px;
 }

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

@@ -0,0 +1,29 @@
+'use strict';
+
+const componentIntendedAudienceSignifier = {
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "center",
+  alignItems: "center",
+  borderColor: "#000000",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderRadius: "0.125rem",
+  paddingY: "2px",
+  paddingX: "4px",
+  boxSizing: "border-box",
+  width: "fit-content",
+  gap: "8px",
+  svg: {
+    height: "unset",
+    width: "unset"
+  },
+  color: "#545454",
+  typography: {
+    fontWeight: 400,
+    fontSize: "0.75rem",
+    lineHeight: 1
+  }
+};
+
+exports.componentIntendedAudienceSignifier = componentIntendedAudienceSignifier;

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

@@ -0,0 +1,27 @@
+const componentIntendedAudienceSignifier = {
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "center",
+  alignItems: "center",
+  borderColor: "#000000",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderRadius: "0.125rem",
+  paddingY: "2px",
+  paddingX: "4px",
+  boxSizing: "border-box",
+  width: "fit-content",
+  gap: "8px",
+  svg: {
+    height: "unset",
+    width: "unset"
+  },
+  color: "#545454",
+  typography: {
+    fontWeight: 400,
+    fontSize: "0.75rem",
+    lineHeight: 1
+  }
+};
+
+export { componentIntendedAudienceSignifier };

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

@@ -3,7 +3,7 @@
 const componentLink = {
   shared: {
     focus: {
-      outline: "1px solid #0072a9"
+      outline: "0.0625rem solid #0072a9"
     },
     hover: {
       color: "#00344e",

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

@@ -1,7 +1,7 @@
 const componentLink = {
   shared: {
     focus: {
-      outline: "1px solid #0072a9"
+      outline: "0.0625rem solid #0072a9"
     },
     hover: {
       color: "#00344e",

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

@@ -1,30 +1,9 @@
 'use strict';
 
 const semanticBreakpoints = {
-  sm: {
-    min: "0",
-    max: "671px"
-  },
-  md: {
-    min: "672px",
-    max: "1055px"
-  },
-  lg: {
-    min: "1056px",
-    max: "1311px"
-  },
-  xl: {
-    min: "1312px",
-    max: "1583px"
-  },
-  max: {
-    min: "1584px",
-    max: "1783px"
-  },
-  maxplus: {
-    min: "1784px",
-    max: "initial"
-  }
+  sm: "0px",
+  md: "830px",
+  lg: "1056px"
 };
 
 exports.semanticBreakpoints = semanticBreakpoints;

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

@@ -1,28 +1,7 @@
 const semanticBreakpoints = {
-  sm: {
-    min: "0",
-    max: "671px"
-  },
-  md: {
-    min: "672px",
-    max: "1055px"
-  },
-  lg: {
-    min: "1056px",
-    max: "1311px"
-  },
-  xl: {
-    min: "1312px",
-    max: "1583px"
-  },
-  max: {
-    min: "1584px",
-    max: "1783px"
-  },
-  maxplus: {
-    min: "1784px",
-    max: "initial"
-  }
+  sm: "0px",
+  md: "830px",
+  lg: "1056px"
 };
 
 export { semanticBreakpoints };

package/dist/styleD/utils/semantic/mq.cjs

@@ -8,23 +8,23 @@ const minWidthQuery = (px) => `@media (min-width: ${px}px)`;
 const maxWidthQuery = (px) => `@media (max-width: ${px - smidgen}px)`;
 const minMaxWidthQuery = (minPx, maxPx) => `@media (min-width: ${minPx}px) and (max-width: ${maxPx - smidgen}px)`;
 const from = Object.fromEntries(
-  Object.entries(breakpoints.semanticBreakpoints).map(([name, { min }]) => [
+  Object.entries(breakpoints.semanticBreakpoints).map(([name, min]) => [
     name,
     minWidthQuery(parseMinPx(min))
   ])
 );
 const until = Object.fromEntries(
-  Object.entries(breakpoints.semanticBreakpoints).map(([name, { min }]) => [
+  Object.entries(breakpoints.semanticBreakpoints).map(([name, min]) => [
     name,
     maxWidthQuery(parseMinPx(min))
   ])
 );
 const between = Object.fromEntries(
-  Object.entries(breakpoints.semanticBreakpoints).map(([fromName, { min: fromMin }]) => [
+  Object.entries(breakpoints.semanticBreakpoints).map(([fromName, fromMin]) => [
     fromName,
     {
       and: Object.fromEntries(
-        Object.entries(breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, { min: toMin }]) => [
+        Object.entries(breakpoints.semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [
           toName,
           minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
         ])

package/dist/styleD/utils/semantic/mq.js

@@ -5,18 +5,18 @@ const parseMinPx = (value) => value === "0" ? 0 : parseFloat(value);
 const minWidthQuery = (px) => `@media (min-width: ${px}px)`;
 const maxWidthQuery = (px) => `@media (max-width: ${px - smidgen}px)`;
 const minMaxWidthQuery = (minPx, maxPx) => `@media (min-width: ${minPx}px) and (max-width: ${maxPx - smidgen}px)`;
-const from = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, { min }]) => [
+const from = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [
   name,
   minWidthQuery(parseMinPx(min))
 ]));
-const until = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, { min }]) => [
+const until = Object.fromEntries(Object.entries(semanticBreakpoints).map(([name, min]) => [
   name,
   maxWidthQuery(parseMinPx(min))
 ]));
-const between = Object.fromEntries(Object.entries(semanticBreakpoints).map(([fromName, { min: fromMin }]) => [
+const between = Object.fromEntries(Object.entries(semanticBreakpoints).map(([fromName, fromMin]) => [
   fromName,
   {
-    and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, { min: toMin }]) => [
+    and: Object.fromEntries(Object.entries(semanticBreakpoints).filter(([toName]) => toName !== fromName).map(([toName, toMin]) => [
       toName,
       minMaxWidthQuery(parseMinPx(fromMin), parseMinPx(toMin))
     ]))

package/dist/types/components/intended-audience-signifier/FlagIcons.d.ts

@@ -0,0 +1,5 @@
+export declare const ukFlag: import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const usFlag: import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const auFlag: import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const globeIcon: import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DoubleChevronRightSvg: import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/intended-audience-signifier/IntendedAudienceSignifier.d.ts

@@ -0,0 +1,2 @@
+import type { IntendedAudienceSignifierProps } from './types';
+export declare function IntendedAudienceSignifier({ source, intendedAudience, theme, cssOverrides, className, ...props }: IntendedAudienceSignifierProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/intended-audience-signifier/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "IntendedAudienceSignifier";
+export declare const componentTsx = "import { IntendedAudienceSignifier } from '@guardian/stand/intended-audience-signifier';\n\nexport const Component = () => (\n\t<>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic for Domestic' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Domestic For Global' />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='Domestic For Global' theme={{ color: '#c70000' }} />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience='Global' cssOverrides={{ border-color: '#0000FF',align-items: 'flex-end' }}/>\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"AUS\" intendedAudience=\"Don't know\" />\n\t\t<IntendedAudienceSignifier source=\"UK\" intendedAudience='US' />\n\t\t<IntendedAudienceSignifier source=\"US\" intendedAudience='UK' />\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the intended audience signifier styles */\n@import '@guardian/stand/component/intendedAudienceSignifier.css';\n\n.stand-intended-audience-signifier {\n\tcolor: var(--component-intended-audience-signifier-color);\n\tfont-weight: var(--component-intended-audience-signifier-typography-font-weight);\n\tfont-size: var(--component-intended-audience-signifier-typography-font-size);\n\tline-height: var(--component-intended-audience-signifier-typography-line-height);\n\tborder-width: var(--component-intended-audience-signifier-border-width);\n\tborder-style: var(--component-intended-audience-signifier-border-style);\n\tborder-color: var(--component-intended-audience-signifier-border-color);\n\tdisplay: var(--component-intended-audience-signifier-display);\n\tflex-direction: var(--component-intended-audience-signifier-flex-direction);\n\tjustify-content: var(--component-intended-audience-signifier-justify-content);\n\talign-items: var(--component-intended-audience-signifier-align-items);\n\tborder-radius: var(--component-intended-audience-signifier-border-width);\n\tpadding: var(--component-intended-audience-signifier-padding-y) var(--component-intended-audience-signifier-padding-x);\n\tbox-sizing: var(--component-intended-audience-signifier-box-sizing);\n\twidth: var(--component-intended-audience-signifier-width);\n\tgap: var(--component-intended-audience-signifier-gap: 8px);\n}\n\n.stand-intended-audience-signifier svg {\n\twidth: var(--component-intended-audience-signifier-svg-width):\n\theight: var(--component-intended-audience-signifier-svg-height);\n}\n\n.stand-intended-audience-signifier-flag {\n\theight: 12px;\n}\n\n.stand-intended-audience-signifier-chevron {\n\twidth: 13px;\n\theight: 13px;\n\tfill: #545454;\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div class=\"stand-intended-audience-signifier\">\n\t\t<svg class=\"stand-intended-audience-signifier-flag\" viewBox=\"0 0 640 480\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t</svg>\n\t\t<svg class=\"stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t</svg>\n\t\t<svg class=\"stand-intended-audience-signifier-flag\" viewBox=\"0 0 640 480\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path fill=\"#bd3d44\" d=\"M0 0h640v480H0\" />\n\t\t</svg>\n\t</div>\n\n\t<div class=\"stand-intended-audience-signifier\" style=\"--component-intended-audience-signifier-color: #c70000;\">\n\t\t<span>AU</span>\n\t\t<svg class=\"stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t</svg>\n\t\t<span>GLOBAL</span>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentIntendedAudienceSignifier } from \"@guardian/stand\";\n\nconst sheet = new CSSStyleSheet();\n\nsheet.replaceSync(`\n\t.js-stand-intended-audience-signifier {\n\t\tcolor: ${componentIntendedAudienceSignifier.color};\n\t\tfont-weight: ${componentIntendedAudienceSignifier.typography.fontWeight};\n\t\tfont-size: ${componentIntendedAudienceSignifier.typography.fontSize};\n\t\tline-height: ${componentIntendedAudienceSignifier.typography.lineHeight};\n\t\tborder-width: ${componentIntendedAudienceSignifier.borderWidth};\n\t\tborder-style: ${componentIntendedAudienceSignifier.borderStyle};\n\t\tborder-color: ${componentIntendedAudienceSignifier.borderColor};\n\t\tdisplay: ${componentIntendedAudienceSignifier.display};\n\t\tflex-direction: ${componentIntendedAudienceSignifier.flexDirection};\n\t\tjustify-content: ${componentIntendedAudienceSignifier.justifyContent};\n\t\talign-items: ${componentIntendedAudienceSignifier.alignItems};\n\t\tborder-radius: ${componentIntendedAudienceSignifier.borderRadius};\n\t\tpadding: ${componentIntendedAudienceSignifier.paddingY} ${componentIntendedAudienceSignifier.paddingX};\n\t\tbox-sizing: ${componentIntendedAudienceSignifier.boxSizing};\n\t\twidth: ${componentIntendedAudienceSignifier.width};\n\t\tgap: ${componentIntendedAudienceSignifier.gap};\n\t}\n\n\t.js-stand-intended-audience-signifier-chevron {\n\t\twidth: 13px;\n\t\theight: 13px;\n\t\tfill: #545454;\n\t}\n\n\t.stand-intended-audience-signifier svg {\n\t\twidth: ${componentIntendedAudienceSignifier.svg.width}:\n\t\theight: ${componentIntendedAudienceSignifier.svg.height};\n\t}\n`);\n\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container flow-column\">\n\t\t<div class=\"js-stand-intended-audience-signifier\">\n\t\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-gb\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#FFF\"\n\t\t\t\t\td=\"m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#C8102E\"\n\t\t\t\t\td=\"m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#FFF\" d=\"M241 0v480h160V0zM0 160v160h640V160z\" />\n\t\t\t\t<path fill=\"#C8102E\" d=\"M0 193v96h640v-96zM273 0v480h96V0z\" />\n\t\t\t</svg>\n\t\t\t<svg class=\"js-stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-gb\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#012169\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#FFF\"\n\t\t\t\t\td=\"m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#C8102E\"\n\t\t\t\t\td=\"m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#FFF\" d=\"M241 0v480h160V0zM0 160v160h640V160z\" />\n\t\t\t\t<path fill=\"#C8102E\" d=\"M0 193v96h640v-96zM273 0v480h96V0z\" />\n\t\t\t</svg>\n\t\t</div>\n\n\t\t<div class=\"js-stand-intended-audience-signifier\" style=\"color: #c70000; border-color: #c70000;\">\n\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-au\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#00008B\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"red\"\n\t\t\t\t\td=\"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\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#fff\" d=\"M120.5 0v240h80V0zM0 80v80h320V80z\" />\n\t\t\t\t<path fill=\"red\" d=\"M0 96.5v48h320v-48zM136.5 0v240h48V0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"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\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t\t<svg class=\"js-stand-intended-audience-signifier-chevron\" viewBox=\"0 0 9 7\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n\t\t\t\t<path d=\"M5.75 0H3.5L6 3.5L3.5 7H5.75L8.25 3.5L5.75 0Z\" />\n\t\t\t\t<path d=\"M2.25 0H0L2.5 3.5L0 7H2.25L4.75 3.5L2.25 0Z\" />\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\theight=\"12px\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tid=\"flag-icons-au\"\n\t\t\t\tviewBox=\"0 0 640 480\"\n\t\t\t>\n\t\t\t\t<path fill=\"#00008B\" d=\"M0 0h640v480H0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"m37.5 0 122 90.5L281 0h39v31l-120 89.5 120 89V240h-40l-120-89.5L40.5 240H0v-30l119.5-89L0 32V0z\"\n\t\t\t\t/>\n\t\t\t\t<path\n\t\t\t\t\tfill=\"red\"\n\t\t\t\t\td=\"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\"\n\t\t\t\t/>\n\t\t\t\t<path fill=\"#fff\" d=\"M120.5 0v240h80V0zM0 80v80h320V80z\" />\n\t\t\t\t<path fill=\"red\" d=\"M0 96.5v48h320v-48zM136.5 0v240h48V0z\" />\n\t\t\t\t<path\n\t\t\t\t\tfill=\"#fff\"\n\t\t\t\t\td=\"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\"\n\t\t\t\t/>\n\t\t\t</svg>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/intended-audience-signifier/styles.d.ts

@@ -0,0 +1,6 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentIntendedAudienceSignifier } from '../../styleD/build/typescript/component/intendedAudienceSignifier';
+import type { Prettify } from '../../util/types';
+export type IntendedAudienceSignifierTheme = Prettify<ComponentIntendedAudienceSignifier>;
+export declare const defaultIntendedAudienceSignifierTheme: IntendedAudienceSignifierTheme;
+export declare const intendedAudienceSignifierStyles: (theme: IntendedAudienceSignifierTheme) => SerializedStyles;

package/dist/types/components/intended-audience-signifier/types.d.ts

@@ -0,0 +1,8 @@
+import type { DefaultProps } from '../../util/types';
+import type { IntendedAudienceSignifierTheme } from './styles';
+export type Source = 'UK' | 'US' | 'AUS';
+export type IntendedAudience = 'Global' | 'Domestic for Domestic' | 'Domestic For Global' | "Don't know" | 'UK' | 'US' | 'AUS';
+export interface IntendedAudienceSignifierProps extends DefaultProps<IntendedAudienceSignifierTheme> {
+    source: Source;
+    intendedAudience: IntendedAudience;
+}

package/dist/types/components/topbar/styles.d.ts

@@ -7,8 +7,8 @@ export type PartialTopBarTheme = Prettify<DeepPartial<TopBarTheme>>;
 export declare const defaultTopBarTheme: TopBarTheme;
 export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
 export declare const topBarContainerStyles: (theme: TopBarTheme, { collapseBelow, showUntil, }?: {
-    collapseBelow?: "sm" | "md" | "lg" | "xl" | "max" | "maxplus" | undefined;
-    showUntil?: "sm" | "md" | "lg" | "xl" | "max" | "maxplus" | undefined;
+    collapseBelow?: "sm" | "md" | "lg" | undefined;
+    showUntil?: "sm" | "md" | "lg" | undefined;
 }) => SerializedStyles;
 export declare const topBarSpacerStyles: (theme: TopBarTheme) => SerializedStyles;
 export declare const topBarCollapsedNavMenuButtonStyles: (theme: TopBarTheme, menuOpen?: boolean) => SerializedStyles;

package/dist/types/index.d.ts

@@ -13,6 +13,8 @@ export { componentTagTable } from './styleD/build/typescript/component/tagTable'
 export type { ComponentTagTable } from './styleD/build/typescript/component/tagTable';
 export { componentUserMenu } from './styleD/build/typescript/component/userMenu';
 export type { ComponentUserMenu } from './styleD/build/typescript/component/userMenu';
+export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';
+export type { ComponentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';
 /**
  * design system components tokens exports
  */

package/dist/types/intended-audience-signifier.d.ts

@@ -0,0 +1,19 @@
+/**
+ * IntendedAudienceSignifier component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/intendedAudienceSiginifier.css),
+ * you don't need to install these.
+ */
+export { IntendedAudienceSignifier } from './components/intended-audience-signifier/IntendedAudienceSignifier';
+export type { IntendedAudienceSignifierProps } from './components/intended-audience-signifier/types';
+export type { IntendedAudienceSignifierTheme } from './components/intended-audience-signifier/styles';
+export { componentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';
+export type { ComponentIntendedAudienceSignifier } from './styleD/build/typescript/component/intendedAudienceSignifier';

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

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentIntendedAudienceSignifier: {
+    display: string;
+    flexDirection: string;
+    justifyContent: string;
+    alignItems: string;
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderRadius: string;
+    paddingY: string;
+    paddingX: string;
+    boxSizing: string;
+    width: string;
+    gap: string;
+    svg: {
+        height: string;
+        width: string;
+    };
+    color: string;
+    typography: {
+        fontWeight: number;
+        fontSize: string;
+        lineHeight: number;
+    };
+};
+export type ComponentIntendedAudienceSignifier = typeof componentIntendedAudienceSignifier;

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

@@ -2,29 +2,8 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const semanticBreakpoints: {
-    sm: {
-        min: string;
-        max: string;
-    };
-    md: {
-        min: string;
-        max: string;
-    };
-    lg: {
-        min: string;
-        max: string;
-    };
-    xl: {
-        min: string;
-        max: string;
-    };
-    max: {
-        min: string;
-        max: string;
-    };
-    maxplus: {
-        min: string;
-        max: string;
-    };
+    sm: string;
+    md: string;
+    lg: string;
 };
 export type SemanticBreakpoints = typeof semanticBreakpoints;

package/dist/types/styleD/utils/semantic/mq.d.ts

@@ -12,7 +12,7 @@ export type Breakpoint = keyof typeof semanticBreakpoints;
  *   }
  * `;
  */
-export declare const from: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus", string>;
+export declare const from: Record<"sm" | "md" | "lg", string>;
 /**
  * Returns a `max-width` media query string for everything *below* the given
  * breakpoint (exclusive). Use to apply styles only on screens smaller than
@@ -26,7 +26,7 @@ export declare const from: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus",
  *   }
  * `;
  */
-export declare const until: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus", string>;
+export declare const until: Record<"sm" | "md" | "lg", string>;
 /**
  * Returns a combined `min-width` and `max-width` media query string for
  * the range starting at breakpoint A up to (but not including) breakpoint B.
@@ -41,21 +41,12 @@ export declare const until: Record<"sm" | "md" | "lg" | "xl" | "max" | "maxplus"
  */
 export declare const between: {
     sm: {
-        and: Record<"md" | "lg" | "xl" | "max" | "maxplus", string>;
+        and: Record<"md" | "lg", string>;
     };
     md: {
-        and: Record<"sm" | "lg" | "xl" | "max" | "maxplus", string>;
+        and: Record<"sm" | "lg", string>;
     };
     lg: {
-        and: Record<"sm" | "md" | "xl" | "max" | "maxplus", string>;
-    };
-    xl: {
-        and: Record<"sm" | "md" | "lg" | "max" | "maxplus", string>;
-    };
-    max: {
-        and: Record<"sm" | "md" | "lg" | "xl" | "maxplus", string>;
-    };
-    maxplus: {
-        and: Record<"sm" | "md" | "lg" | "xl" | "max", string>;
+        and: Record<"sm" | "md", string>;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -137,6 +137,11 @@
       "import": "./dist/utils.js",
       "require": "./dist/utils.cjs"
     },
+    "./intendedAudienceSignifier": {
+      "types": "./dist/types/intended-audience-signifier.d.ts",
+      "import": "./dist/intended-audience-signifier.js",
+      "require": "./dist/intended-audience-signifier.cjs"
+    },
     "./link": {
       "types": "./dist/types/link.d.ts",
       "import": "./dist/link.js",
@@ -152,6 +157,7 @@
     "./base/spacing.css": "./dist/styleD/build/css/base/spacing.css",
     "./base/sizing.css": "./dist/styleD/build/css/base/sizing.css",
     "./base/radius.css": "./dist/styleD/build/css/base/radius.css",
+    "./semantic/breakpoints.css": "./dist/styleD/build/css/semantic/breakpoints.css",
     "./semantic/colors.css": "./dist/styleD/build/css/semantic/colors.css",
     "./semantic/typography.css": "./dist/styleD/build/css/semantic/typography.css",
     "./semantic/sizing.css": "./dist/styleD/build/css/semantic/sizing.css",
@@ -176,6 +182,7 @@
     "./component/textArea.css": "./dist/styleD/build/css/component/textArea.css",
     "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css",
     "./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css",
+    "./component/intendedAudienceSignifier.css": "./dist/styleD/build/css/component/intendedAudienceSignifier.css",
     "./component/link.css": "./dist/styleD/build/css/component/link.css"
   },
   "main": "./dist/index.cjs",
@@ -258,6 +265,9 @@
       "date-picker": [
         "./dist/types/date-picker.d.ts"
       ],
+      "intendedAudienceSignifier": [
+        "./dist/types/intended-audience-signifier.d.ts"
+      ],
       "link": [
         "./dist/types/link.d.ts"
       ]