@guardian/stand 0.0.32 → 0.0.34

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/components/link/Link.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var colors = require('../../styleD/build/typescript/semantic/colors.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('../typography/styles.cjs');
+var styles$1 = require('./styles.cjs');
+
+function Link({
+  children,
+  typography = "body-sm",
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles$1.defaultLinkTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Link,
+    {
+      css: [
+        styles.typographyStyles(
+          { color: colors.semanticColors.text.strong },
+          { variant: typography }
+        ),
+        styles$1.linkStyles(mergedTheme),
+        cssOverrides
+      ],
+      className,
+      ...props,
+      children
+    }
+  );
+}
+
+exports.Link = Link;

package/dist/components/link/Link.js

@@ -0,0 +1,17 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Link as Link$1 } from 'react-aria-components';
+import { semanticColors } from '../../styleD/build/typescript/semantic/colors.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { typographyStyles } from '../typography/styles.js';
+import { linkStyles, defaultLinkTheme } from './styles.js';
+
+function Link({ children, typography = "body-sm", theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultLinkTheme, theme);
+  return jsx(Link$1, { css: [
+    typographyStyles({ color: semanticColors.text.strong }, { variant: typography }),
+    linkStyles(mergedTheme),
+    cssOverrides
+  ], className, ...props, children });
+}
+
+export { Link };

package/dist/components/link/styles.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var react = require('@emotion/react');
+var link = require('../../styleD/build/typescript/component/link.cjs');
+
+const defaultLinkTheme = link.componentLink;
+const linkStyles = (theme) => {
+  return react.css`
+		text-decoration: underline;
+		text-decoration-style: solid;
+		text-underline-offset: 8%;
+		text-decoration-thickness: 5%;
+		${theme.shared.enabled};
+		&[data-hovered] {
+			color: ${theme.shared.hover.color};
+			cursor: ${theme.shared.hover.cursor};
+		}
+		&[data-pressed] {
+			color: ${theme.shared.pressed.color};
+		}
+		&[data-disabled] {
+			color: ${theme.shared.disabled.color};
+		}
+		&[data-focus-visible] {
+			outline: ${theme.shared.focus.outline};
+		}
+	`;
+};
+
+exports.defaultLinkTheme = defaultLinkTheme;
+exports.linkStyles = linkStyles;

package/dist/components/link/styles.js

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import { componentLink } from '../../styleD/build/typescript/component/link.js';
+
+const defaultLinkTheme = componentLink;
+const linkStyles = (theme) => {
+  return css`
+		text-decoration: underline;
+		text-decoration-style: solid;
+		text-underline-offset: 8%;
+		text-decoration-thickness: 5%;
+		${theme.shared.enabled};
+		&[data-hovered] {
+			color: ${theme.shared.hover.color};
+			cursor: ${theme.shared.hover.cursor};
+		}
+		&[data-pressed] {
+			color: ${theme.shared.pressed.color};
+		}
+		&[data-disabled] {
+			color: ${theme.shared.disabled.color};
+		}
+		&[data-focus-visible] {
+			outline: ${theme.shared.focus.outline};
+		}
+	`;
+};
+
+export { defaultLinkTheme, linkStyles };

package/dist/index.cjs

@@ -4,7 +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 alertBanner = require('./styleD/build/typescript/component/alertBanner.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');
@@ -14,6 +14,8 @@ var form = require('./styleD/build/typescript/component/form.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
+var link = require('./styleD/build/typescript/component/link.cjs');
+var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
 var select = require('./styleD/build/typescript/component/select.cjs');
 var textArea = require('./styleD/build/typescript/component/textArea.cjs');
@@ -37,7 +39,7 @@ exports.componentAutocomplete = autocomplete.componentAutocomplete;
 exports.componentByline = byline.componentByline;
 exports.componentTagTable = tagTable.componentTagTable;
 exports.componentUserMenu = userMenu.componentUserMenu;
-exports.componentAlertBanner = alertBanner.componentAlertBanner;
+exports.componentIntendedAudienceSignifier = intendedAudienceSignifier.componentIntendedAudienceSignifier;
 exports.componentAvatar = avatar.componentAvatar;
 exports.componentButton = button.componentButton;
 exports.componentCheckbox = checkbox.componentCheckbox;
@@ -47,6 +49,8 @@ exports.componentForm = form.componentForm;
 exports.componentIcon = icon.componentIcon;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentMenu = menu.componentMenu;
+exports.componentLink = link.componentLink;
+exports.componentAlertBanner = alertBanner.componentAlertBanner;
 exports.componentRadioGroup = radioGroup.componentRadioGroup;
 exports.componentSelect = select.componentSelect;
 exports.componentTextArea = textArea.componentTextArea;

package/dist/index.js

@@ -2,7 +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 { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.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';
@@ -12,6 +12,8 @@ export { componentForm } from './styleD/build/typescript/component/form.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
 export { componentMenu } from './styleD/build/typescript/component/menu.js';
+export { componentLink } from './styleD/build/typescript/component/link.js';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';
 export { componentSelect } from './styleD/build/typescript/component/select.js';
 export { componentTextArea } from './styleD/build/typescript/component/textArea.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/link.cjs

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

package/dist/link.js

@@ -0,0 +1,2 @@
+export { Link } from './components/link/Link.js';
+export { componentLink } from './styleD/build/typescript/component/link.js';

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

@@ -51,9 +51,9 @@
 	--base-typography-letter-spacing-densest-px: -1px;
 	--base-typography-letter-spacing-denser-px: -0.5px;
 	--base-typography-letter-spacing-dense-px: -0.2px;
-	--base-typography-letter-spacing-default-px: 0;
+	--base-typography-letter-spacing-default-px: 0px;
 	--base-typography-letter-spacing-densest-rem: -0.0625rem;
 	--base-typography-letter-spacing-denser-rem: -0.03125rem;
 	--base-typography-letter-spacing-dense-rem: -0.0125rem;
-	--base-typography-letter-spacing-default-rem: 0;
+	--base-typography-letter-spacing-default-rem: 0rem;
 }

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

@@ -82,7 +82,7 @@
 	--component-top-bar-tool-name-gap: 8px;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--component-top-bar-tool-name-typography-letter-spacing: 0;
+	--component-top-bar-tool-name-typography-letter-spacing: 0rem;
 	--component-top-bar-tool-name-typography-font-width: 100;
 	--component-top-bar-tool-name-divider-border: 0.0625rem solid #cccccc;
 	--component-top-bar-tool-name-divider-height: 2rem;
@@ -103,7 +103,7 @@
 	--component-top-bar-tool-name-hover-link-opacity: 0;
 	--component-top-bar-tool-name-hover-link-typography-font: normal 700
 		0.875rem/1.3 'Open Sans';
-	--component-top-bar-tool-name-hover-link-typography-letter-spacing: 0;
+	--component-top-bar-tool-name-hover-link-typography-letter-spacing: 0rem;
 	--component-top-bar-tool-name-hover-link-typography-font-width: 95;
 	--component-top-bar-tool-name-hover-link-position: absolute;
 	--component-top-bar-tool-name-hover-link-width: 100%;

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

@@ -21,7 +21,7 @@
 	--component-alert-banner-shared-content-color: #000000;
 	--component-alert-banner-shared-content-typography-font: normal 460
 		0.875rem/1.3 'Open Sans';
-	--component-alert-banner-shared-content-typography-letter-spacing: 0;
+	--component-alert-banner-shared-content-typography-letter-spacing: 0rem;
 	--component-alert-banner-shared-content-typography-font-width: 95;
 	--component-alert-banner-shared-content-icon-color: #545454;
 	--component-alert-banner-information-background-color: #e8f0fb;

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

@@ -14,7 +14,7 @@
 	--component-autocomplete-listbox-border-style: solid;
 	--component-autocomplete-listbox-border-color: #8d8d8d;
 	--component-autocomplete-listbox-padding-y: 8px;
-	--component-autocomplete-listbox-padding-x: 0;
+	--component-autocomplete-listbox-padding-x: 0px;
 	--component-autocomplete-listbox-background-color: #ffffff;
 	--component-autocomplete-listbox-item-padding-y: 8px;
 	--component-autocomplete-listbox-item-padding-x: 12px;

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

@@ -76,7 +76,7 @@
 	--component-avatar-shared-button-disabled-cursor: not-allowed;
 	--component-avatar-sm-size: 2rem;
 	--component-avatar-sm-typography-font: normal 700 0.75rem/1 'Open Sans';
-	--component-avatar-sm-typography-letter-spacing: 0;
+	--component-avatar-sm-typography-letter-spacing: 0rem;
 	--component-avatar-sm-typography-font-width: 95;
 	--component-avatar-md-size: 2.5rem;
 	--component-avatar-md-typography-font: normal 700 0.875rem/1 'Open Sans';

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

@@ -33,7 +33,7 @@
 	--component-button-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-primary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-primary-xs-typography-letter-spacing: 0;
+	--component-button-primary-xs-typography-letter-spacing: 0rem;
 	--component-button-primary-xs-typography-font-width: 95;
 	--component-button-primary-xs-icon-size: 1.125rem;
 	--component-button-primary-xs-icon-gap: 0.25rem;
@@ -95,7 +95,7 @@
 	--component-button-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-secondary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-secondary-xs-typography-letter-spacing: 0;
+	--component-button-secondary-xs-typography-letter-spacing: 0rem;
 	--component-button-secondary-xs-typography-font-width: 95;
 	--component-button-secondary-xs-icon-size: 1.125rem;
 	--component-button-secondary-xs-icon-gap: 0.25rem;
@@ -157,7 +157,7 @@
 	--component-button-tertiary-xs-padding-with-icon-icon-left-left: 0.25rem;
 	--component-button-tertiary-xs-typography-font: normal 700 0.75rem/1
 		'Open Sans';
-	--component-button-tertiary-xs-typography-letter-spacing: 0;
+	--component-button-tertiary-xs-typography-letter-spacing: 0rem;
 	--component-button-tertiary-xs-typography-font-width: 95;
 	--component-button-tertiary-xs-icon-size: 1.125rem;
 	--component-button-tertiary-xs-icon-gap: 0.25rem;

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

@@ -39,11 +39,11 @@
 	--component-checkbox-input-shared-disabled-indicator-selected-background-color: #dcdcdc;
 	--component-checkbox-input-sm-typography-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--component-checkbox-input-sm-typography-letter-spacing: 0;
+	--component-checkbox-input-sm-typography-letter-spacing: 0rem;
 	--component-checkbox-input-sm-typography-font-width: 95;
 	--component-checkbox-input-sm-indicator-size: 1.25rem;
 	--component-checkbox-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
-	--component-checkbox-input-md-typography-letter-spacing: 0;
+	--component-checkbox-input-md-typography-letter-spacing: 0rem;
 	--component-checkbox-input-md-typography-font-width: 95;
 	--component-checkbox-input-md-indicator-size: 1.5rem;
 	--component-checkbox-group-shared-display: flex;

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

@@ -12,6 +12,6 @@
 	--component-favicon-user-select: none;
 	--component-favicon-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--component-favicon-typography-letter-spacing: 0;
+	--component-favicon-typography-letter-spacing: 0rem;
 	--component-favicon-typography-font-width: 100;
 }

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

@@ -12,7 +12,7 @@
 	--component-form-input-shared-description-color: #545454;
 	--component-form-input-shared-description-typography-font: normal 460
 		0.875rem/1.3 'Open Sans';
-	--component-form-input-shared-description-typography-letter-spacing: 0;
+	--component-form-input-shared-description-typography-letter-spacing: 0rem;
 	--component-form-input-shared-description-typography-font-width: 95;
 	--component-form-input-shared-description-disabled-color: #999999;
 	--component-form-input-sm-label-typography-font: normal 700 0.875rem/1.15

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

@@ -10,7 +10,7 @@
 	--component-inline-message-shared-icon-align-self: flex-start;
 	--component-inline-message-shared-typography-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--component-inline-message-shared-typography-letter-spacing: 0;
+	--component-inline-message-shared-typography-letter-spacing: 0rem;
 	--component-inline-message-shared-typography-font-width: 95;
 	--component-inline-message-error-color: #8c2113;
 	--component-inline-message-success-color: #326528;