@guardian/stand 0.0.37 → 0.0.39

package/dist/components/grid/styles.js

@@ -1,98 +0,0 @@
-import { css } from '@emotion/react';
-import { componentGrid } from '../../styleD/build/typescript/component/grid.js';
-import { from } from '../../styleD/utils/semantic/mq.js';
-
-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) => {
-  if (size === "grow") {
-    return css`
-			flex-basis: 0;
-			flex-grow: 1;
-			max-width: 100%;
-		`;
-  }
-  if (size === "auto") {
-    return css`
-			flex-basis: auto;
-			flex-grow: 0;
-			flex-shrink: 0;
-			width: auto;
-			max-width: none;
-		`;
-  }
-  const clampedSize = clampToColumns(size, theme.shared.columns);
-  const width = numericSizeWidth(clampedSize, theme);
-  return css`
-		flex-basis: ${width};
-		flex-grow: 0;
-		width: ${width};
-		max-width: ${width};
-	`;
-};
-const fixedOffsetStyles = (offset, theme) => {
-  if (offset === "auto") {
-    return css`
-			margin-left: auto;
-		`;
-  }
-  const clampedOffset = clampToColumns(offset, theme.shared.columns);
-  return css`
-		margin-left: ${numericOffsetMargin(clampedOffset, theme)};
-	`;
-};
-const offsetStyles = (offset, theme) => {
-  if (typeof offset === "undefined") {
-    return css``;
-  }
-  if (!isResponsiveOffset(offset)) {
-    return fixedOffsetStyles(offset, theme);
-  }
-  return css`
-		${Object.entries(offset).map(([breakpoint, breakpointOffset]) => css`
-				${from[breakpoint]} {
-					${fixedOffsetStyles(breakpointOffset, theme)}
-				}
-			`)}
-	`;
-};
-const sizeStyles = (size, theme) => {
-  if (typeof size === "undefined") {
-    return fixedSizeStyles(theme.shared.columns, theme);
-  }
-  if (!isResponsiveGridSize(size)) {
-    return fixedSizeStyles(size, theme);
-  }
-  return css`
-		${Object.entries(size).map(([breakpoint, breakpointSize]) => css`
-				${from[breakpoint]} {
-					${fixedSizeStyles(breakpointSize, theme)}
-				}
-			`)}
-	`;
-};
-const gridStyles = (theme) => {
-  return css`
-		display: ${theme.shared.display};
-		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};
-	`;
-};
-const itemStyles = (theme, { size, offset }) => {
-  return css`
-		min-width: 0;
-		${sizeStyles(size, theme)}
-		${offsetStyles(offset, theme)}
-	`;
-};
-
-export { defaultGridTheme, gridStyles, itemStyles };

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

@@ -1,37 +0,0 @@
-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, intendedAudienceSignifierIconStyles, intendedAudienceSignifierChevronIconStyles, 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" }) });
-  }
-  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/layout/Layout.cjs

@@ -1,114 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var react = require('@emotion/react');
-var React = require('react');
-var mergeDeep = require('../../util/mergeDeep.cjs');
-var AlertBanner = require('../alert-banner/AlertBanner.cjs');
-var Grid = require('../grid/Grid.cjs');
-var TopBar = require('../topbar/TopBar.cjs');
-var styles = require('./styles.cjs');
-
-function Sidebar({
-  children,
-  layoutSmBreakpoint = "hidden",
-  theme = {},
-  cssOverrides,
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultSidebarTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "aside",
-    {
-      css: [styles.sidebarStyles(mergedTheme, { layoutSmBreakpoint }), cssOverrides],
-      ...props,
-      children
-    }
-  );
-}
-function Layout({
-  children,
-  fluid = true,
-  theme = {},
-  cssOverrides,
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultLayoutTheme, theme);
-  let alertBanner = null;
-  let topBar = null;
-  let sidebar = null;
-  let main = null;
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return;
-    }
-    if (child.type === AlertBanner.AlertBanner) {
-      const alertBannerChild = child;
-      const alertBannerCssOverrides = Array.isArray(
-        alertBannerChild.props.cssOverrides
-      ) ? alertBannerChild.props.cssOverrides : alertBannerChild.props.cssOverrides ? [alertBannerChild.props.cssOverrides] : [];
-      alertBanner ?? (alertBanner = React.cloneElement(alertBannerChild, {
-        cssOverrides: [styles.alertBannerLayoutStyles(), ...alertBannerCssOverrides]
-      }));
-      return;
-    }
-    if (child.type === TopBar.TopBar) {
-      const topBarChild = child;
-      const topBarCssOverrides = Array.isArray(topBarChild.props.cssOverrides) ? topBarChild.props.cssOverrides : topBarChild.props.cssOverrides ? [topBarChild.props.cssOverrides] : [];
-      topBar ?? (topBar = React.cloneElement(topBarChild, {
-        cssOverrides: [styles.topBarLayoutStyles(), ...topBarCssOverrides]
-      }));
-      return;
-    }
-    if (child.type === Sidebar) {
-      const sidebarChild = child;
-      const sidebarCssOverrides = Array.isArray(sidebarChild.props.cssOverrides) ? sidebarChild.props.cssOverrides : sidebarChild.props.cssOverrides ? [sidebarChild.props.cssOverrides] : [];
-      sidebar ?? (sidebar = React.cloneElement(sidebarChild, {
-        cssOverrides: [styles.sidebarLayoutStyles(), ...sidebarCssOverrides]
-      }));
-      return;
-    }
-    if (child.type === Grid.Grid) {
-      const gridChild = child;
-      const gridCssOverrides = Array.isArray(gridChild.props.cssOverrides) ? gridChild.props.cssOverrides : gridChild.props.cssOverrides ? [gridChild.props.cssOverrides] : [];
-      main ?? (main = React.cloneElement(gridChild, {
-        as: "main",
-        cssOverrides: [
-          styles.mainLayoutStyles(mergedTheme, { fluid }),
-          ...gridCssOverrides
-        ]
-      }));
-      return;
-    }
-    if (!main) {
-      const childWithProps = child;
-      if ("cssOverrides" in childWithProps.props) {
-        const childCssOverrides = Array.isArray(
-          childWithProps.props.cssOverrides
-        ) ? childWithProps.props.cssOverrides : [childWithProps.props.cssOverrides ?? react.css``];
-        main ?? (main = React.cloneElement(childWithProps, {
-          cssOverrides: [
-            styles.mainLayoutStyles(mergedTheme, { fluid }),
-            ...childCssOverrides
-          ]
-        }));
-      } else {
-        main ?? (main = React.cloneElement(childWithProps, {
-          css: [
-            styles.mainLayoutStyles(mergedTheme, { fluid }),
-            childWithProps.props.css
-          ]
-        }));
-      }
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.layoutStyles(mergedTheme), cssOverrides], ...props, children: [
-    alertBanner,
-    topBar,
-    sidebar,
-    main
-  ] });
-}
-
-exports.Layout = Layout;
-exports.Sidebar = Sidebar;

package/dist/components/layout/Layout.js

@@ -1,83 +0,0 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import React from 'react';
-import { mergeDeep } from '../../util/mergeDeep.js';
-import { AlertBanner } from '../alert-banner/AlertBanner.js';
-import { Grid } from '../grid/Grid.js';
-import { TopBar } from '../topbar/TopBar.js';
-import { alertBannerLayoutStyles, topBarLayoutStyles, sidebarLayoutStyles, mainLayoutStyles, layoutStyles, sidebarStyles, defaultSidebarTheme, defaultLayoutTheme } from './styles.js';
-
-function Sidebar({ children, layoutSmBreakpoint = "hidden", theme = {}, cssOverrides, ...props }) {
-  const mergedTheme = mergeDeep(defaultSidebarTheme, theme);
-  return jsx("aside", { css: [sidebarStyles(mergedTheme, { layoutSmBreakpoint }), cssOverrides], ...props, children });
-}
-function Layout({ children, fluid = true, theme = {}, cssOverrides, ...props }) {
-  const mergedTheme = mergeDeep(defaultLayoutTheme, theme);
-  let alertBanner = null;
-  let topBar = null;
-  let sidebar = null;
-  let main = null;
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return;
-    }
-    if (child.type === AlertBanner) {
-      const alertBannerChild = child;
-      const alertBannerCssOverrides = Array.isArray(alertBannerChild.props.cssOverrides) ? alertBannerChild.props.cssOverrides : alertBannerChild.props.cssOverrides ? [alertBannerChild.props.cssOverrides] : [];
-      alertBanner ?? (alertBanner = React.cloneElement(alertBannerChild, {
-        cssOverrides: [alertBannerLayoutStyles(), ...alertBannerCssOverrides]
-      }));
-      return;
-    }
-    if (child.type === TopBar) {
-      const topBarChild = child;
-      const topBarCssOverrides = Array.isArray(topBarChild.props.cssOverrides) ? topBarChild.props.cssOverrides : topBarChild.props.cssOverrides ? [topBarChild.props.cssOverrides] : [];
-      topBar ?? (topBar = React.cloneElement(topBarChild, {
-        cssOverrides: [topBarLayoutStyles(), ...topBarCssOverrides]
-      }));
-      return;
-    }
-    if (child.type === Sidebar) {
-      const sidebarChild = child;
-      const sidebarCssOverrides = Array.isArray(sidebarChild.props.cssOverrides) ? sidebarChild.props.cssOverrides : sidebarChild.props.cssOverrides ? [sidebarChild.props.cssOverrides] : [];
-      sidebar ?? (sidebar = React.cloneElement(sidebarChild, {
-        cssOverrides: [sidebarLayoutStyles(), ...sidebarCssOverrides]
-      }));
-      return;
-    }
-    if (child.type === Grid) {
-      const gridChild = child;
-      const gridCssOverrides = Array.isArray(gridChild.props.cssOverrides) ? gridChild.props.cssOverrides : gridChild.props.cssOverrides ? [gridChild.props.cssOverrides] : [];
-      main ?? (main = React.cloneElement(gridChild, {
-        as: "main",
-        cssOverrides: [
-          mainLayoutStyles(mergedTheme, { fluid }),
-          ...gridCssOverrides
-        ]
-      }));
-      return;
-    }
-    if (!main) {
-      const childWithProps = child;
-      if ("cssOverrides" in childWithProps.props) {
-        const childCssOverrides = Array.isArray(childWithProps.props.cssOverrides) ? childWithProps.props.cssOverrides : [childWithProps.props.cssOverrides ?? css``];
-        main ?? (main = React.cloneElement(childWithProps, {
-          cssOverrides: [
-            mainLayoutStyles(mergedTheme, { fluid }),
-            ...childCssOverrides
-          ]
-        }));
-      } else {
-        main ?? (main = React.cloneElement(childWithProps, {
-          css: [
-            mainLayoutStyles(mergedTheme, { fluid }),
-            childWithProps.props.css
-          ]
-        }));
-      }
-    }
-  });
-  return jsxs("div", { css: [layoutStyles(mergedTheme), cssOverrides], ...props, children: [alertBanner, topBar, sidebar, main] });
-}
-
-export { Layout, Sidebar };

package/dist/components/typography/styles.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var react = require('@emotion/react');
-var typography$2 = require('../../styleD/build/typescript/component/typography.cjs');
-var typography = require('../../styleD/utils/semantic/typography.cjs');
-var typography$1 = require('../../styleD/build/typescript/semantic/typography.cjs');
-
-const defaultTypographyTheme = typography$2.componentTypography;
-const typographyStyles = (theme, { variant }) => react.css`
-	${typography.convertTypographyToEmotionStringStyle(typography$1.semanticTypography[variant])}
-	color: ${theme.color};
-`;
-
-exports.defaultTypographyTheme = defaultTypographyTheme;
-exports.typographyStyles = typographyStyles;

package/dist/icon-button.cjs

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

package/dist/icon-button.js

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

package/dist/icon-link-button.cjs

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

package/dist/icon-link-button.js

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

package/dist/link-button.cjs

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

package/dist/link-button.js

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

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

@@ -1,7 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-	--component-top-bar-item-shared-display: inline-flex;
-}

package/dist/tag-picker.js

@@ -1,5 +0,0 @@
-export { Autocomplete } from './components/tag-picker/Autocomplete.js';
-export { TagAutocomplete } from './components/tag-picker/TagAutocomplete.js';
-export { TagTable } from './components/tag-picker/TagTable.js';
-export { componentAutocomplete } from './styleD/build/typescript/component/autocomplete.js';
-export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';

package/dist/types/components/date-picker/sandbox.d.ts

@@ -1,2 +0,0 @@
-export declare const componentName = "DatePicker";
-export declare const componentTsx = "import { CalendarDate } from '@internationalized/date';\nimport { DatePicker } from '@guardian/stand/date-picker';\n\nexport const Component = () => (\n\t<>\n\t\t{/* Basic usage */}\n\t\t<DatePicker\n\t\t\tlabel=\"Date of birth\"\n\t\t\tdescription=\"Enter your date of birth (e.g. 15 April 1990)\"\n\t\t/>\n\n\t\t{/* With min/max constraints and a pre-selected date */}\n\t\t<DatePicker\n\t\t\tlabel=\"Select a date\"\n\t\t\tdescription=\"Choose a date within 2026\"\n\t\t\tvalue={new CalendarDate(2026, 4, 15)}\n\t\t\tminValue={new CalendarDate(2026, 1, 1)}\n\t\t\tmaxValue={new CalendarDate(2026, 12, 31)}\n\t\t/>\n\t</>\n);\n";

package/dist/types/components/grid/sandbox.d.ts

@@ -1,5 +0,0 @@
-export declare const componentName = "Grid";
-export declare const componentTsx = "import { Grid, Item } from '@guardian/stand/grid';\n\nexport const Component = () => (\n\t<Grid>\n\t\t<Item size={{ sm: 12, md: 8, lg: 6 }}>Main content - sm:12, md:8, lg:6</Item>\n\t\t<Item size={{ sm: 12, md: 4, lg: 3 }} offset={{ md: 1, lg: 2 }}>\n\t\t\tMore content - sm:12, md:4, lg:3, offset md:1, lg:2\n\t\t</Item>\n\t\t<Item size=\"auto\">Auto width</Item>\n\t\t<Item size=\"grow\">Grows to fill</Item>\n\t</Grid>\n);\n";
-export declare const componentCss = "\n/* import the grid styles */\n@import '@guardian/stand/component/grid.css';\n\n.stand-grid-container {\n\tdisplay: var(--component-grid-shared-display);\n\tflex-direction: row;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\talign-items: stretch;\n\tgap: 16px;\n}\n\n.stand-grid-item {\n\tbox-sizing: border-box;\n\tpadding: 16px;\n\tbackground: #eff3ff;\n\tborder: 1px solid #b8c9ff;\n\tborder-radius: 6px;\n\ttext-align: center;\n}\n\n.stand-grid-item--main {\n\tflex: 0 0 calc(((100% - 11 * 16px) * 6 / 12) + 5 * 16px);\n}\n\n.stand-grid-item--sidebar {\n\tflex: 0 0 calc(((100% - 11 * 16px) * 3 / 12) + 2 * 16px);\n\tmargin-left: calc(((100% - 11 * 16px) * 1 / 12) + 1 * 16px);\n}\n\n.stand-grid-item--auto {\n\tflex: 0 0 auto;\n\twidth: auto;\n\tmax-width: none;\n\twhite-space: nowrap;\n}\n\n.stand-grid-item--grow {\n\tflex-basis: 0;\n\tflex-grow: 1;\n\tmax-width: 100%;\n}\n";
-export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-grid-container\">\n\t\t<div class=\"stand-grid-item stand-grid-item--main\">Main content</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--sidebar\">Sidebar</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--auto\">Auto width</div>\n\t\t<div class=\"stand-grid-item stand-grid-item--grow\">Grows to fill</div>\n\t</div>\n</div>\n";
-export declare const componentJs = "\nimport { componentGrid } from \"@guardian/stand\";\n\nconst containerStyle = `\n\tdisplay: ${componentGrid.shared.display};\n\tflex-direction: row;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n\talign-items: stretch;\n\tgap: 16px;\n`;\n\nconst itemStyle = `\n\tbox-sizing: border-box;\n\tpadding: 16px;\n\tbackground: #eff3ff;\n\tborder: 1px solid #b8c9ff;\n\tborder-radius: 6px;\n\ttext-align: center;\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div style=\"${containerStyle}\">\n\t\t<div style=\"${itemStyle}; flex: 0 0 calc(((100% - 11 * 16px) * 6 / 12) + 5 * 16px);\">Main content</div>\n\t\t<div style=\"${itemStyle}; flex: 0 0 calc(((100% - 11 * 16px) * 3 / 12) + 2 * 16px); margin-left: calc(((100% - 11 * 16px) * 1 / 12) + 1 * 16px);\">Sidebar</div>\n\t\t<div style=\"${itemStyle}; flex: 0 0 auto; width: auto; max-width: none; white-space: nowrap;\">Auto width</div>\n\t\t<div style=\"${itemStyle}; flex-basis: 0; flex-grow: 1; max-width: 100%;\">Grows to fill</div>\n\t</div>\n`;\n";

package/dist/types/components/icon/sandbox.d.ts

@@ -1,5 +0,0 @@
-export declare const componentName = "Icon";
-export declare const componentTsx = "import { Icon } from '@guardian/stand/icon';\nimport { baseColors } from '@guardian/stand';\n\nexport const Component = () => (\n\t<>\n\t\t<div\n\t\t\tclassName=\"container\"\n\t\t>\n\t\t\tMaterial Symbols\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Icon size=\"lg\" symbol=\"raven\" />\n\t\t\t<Icon size=\"lg\" symbol=\"owl\" fill={baseColors['warm-purple'][400]} />\n\t\t</div>\n\t\t<div\n\t\t\tclassName=\"container\"\n\t\t>\n\t\t\tSVGs\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Icon size=\"lg\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg>\n\t\t\t</Icon>\n\t\t\t<Icon size=\"lg\" fill={baseColors['warm-purple'][400]}>\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg>\n\t\t\t</Icon>\n\t\t</div>\n\t</>\n);\n\n";
-export declare const componentCss = "\n/* import the icon styles */\n@import '@guardian/stand/component/icon.css';\n/* color styles for customisation */\n@import \"@guardian/stand/base/colors.css\";\n\n.container {\n  display: flex;\n  gap: var(--base-spacing-4-rem);\n  margin-top: var(--base-spacing-4-rem);\n}\n\n.stand-icon {\n  display: var(--component-icon-shared-display);\n  user-select: var(--component-icon-shared-user-select);\n  font-size: var(--component-icon-lg-size);\n}\n\n.stand-icon-font-color {\n  color: var(--base-colors-warm-purple-400);\n}\n\n.stand-icon-svg > svg {\n  width: var(--component-icon-lg-size);\n  height: var(--component-icon-lg-size);\n}\n\n.stand-icon-svg-color > svg {\n  fill: var(--base-colors-warm-purple-400);\n}\n\n";
-export declare const componentHtml = "<div class=\"container\">Material Symbols</div>\n    <div class=\"container\">\n      <span class=\"material-symbols stand-icon\">raven</span>\n      <span class=\"material-symbols stand-icon stand-icon-font-color\">owl</span>\n    </div>\n    <div class=\"container\">SVGs</div>\n    <div class=\"container\">\n      <span class=\"material-symbols stand-icon stand-icon-svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg></span>\n      <span class=\"material-symbols stand-icon stand-icon-svg stand-icon-svg-color\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg></span>\n    </div>";
-export declare const componentJs = "// for ts/js\nimport { componentIcon, baseColors } from \"@guardian/stand\";\n\nconst iconStyles = `\n  display: ${componentIcon.shared.display};\n  user-select: ${componentIcon.shared[\"user-select\"]};\n  font-size: ${componentIcon.lg.size};\n`;\n\nconst iconFontColorStyles = `\n  ${iconStyles}\n  color: ${baseColors['warm-purple'][400]};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.lg.size};\n  height: ${componentIcon.lg.size};\n`;\n\nconst iconSvgColorStyles = `\n  ${iconSvgStyles}\n  fill: ${baseColors['warm-purple'][400]};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n  <div style=\"margin-top: 4px;\">Material Symbols</div>\n  <div class=\"container\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n    <span class=\"material-symbols\" style=\"${iconFontColorStyles}\">owl</span>\n  </div>\n  <div style=\"margin-top: 4px;\">SVGs</div>\n  <div class=\"container\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg></span>\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgColorStyles}\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg></span>\n  </div>\n`;\n";

package/dist/types/components/inline-message/sandbox.d.ts

@@ -1,5 +0,0 @@
-export declare const componentName = "InlineMessage";
-export declare const componentTsx = "import { InlineMessage } from '@guardian/stand/inline-message';\n\nexport const Component = () => (\n  <>\n\t<InlineMessage level=\"error\">Something went wrong</InlineMessage>\n\t<InlineMessage level=\"success\">Changes saved successfully</InlineMessage>\n\t<InlineMessage level=\"information\">\n\t\tYour session will expire soon\n\t</InlineMessage>\n\t<InlineMessage level=\"error\" hideIcon>\n\t\tThis message has no icon\n\t</InlineMessage>\n\t<InlineMessage\n\tlevel=\"success\"\n\ticon={\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t}\n\t>\n\tThis message uses a custom svg icon\n\t</InlineMessage>\n  </>\n);\n";
-export declare const componentCss = "\n/* import the inlinemessage styles */\n@import '@guardian/stand/component/inlineMessage.css';\n\n.stand-inline-message {\n  display: var(--component-inline-message-shared-display);\n  align-items: var(--component-inline-message-shared-align-items);\n  gap: var(--component-inline-message-shared-gap);\n  font: var(--component-inline-message-shared-typography-font);\n  letter-spacing: var(\n    --component-inline-message-shared-typography-letter-spacing\n  );\n  font-variation-settings: \"wdth\"\n    var(--component-inline-message-shared-typography-font-width);\n}\n\n.stand-inline-message > .material-symbols {\n  font-size: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message > svg {\n  width: var(--component-inline-message-shared-icon-size);\n  height: var(--component-inline-message-shared-icon-size);\n}\n\n.stand-inline-message-error {\n  color: var(--component-inline-message-error-color);\n  fill: var(--component-inline-message-error-color);\n}\n\n.stand-inline-message-success {\n  color: var(--component-inline-message-success-color);\n  fill: var(--component-inline-message-success-color);\n}\n\n.stand-inline-message-information {\n  color: var(--component-inline-message-information-color);\n  fill: var(--component-inline-message-information-color);\n}\n";
-export declare const componentHtml = "<div class=\"container flow-column\">\n\t<span class=\"stand-inline-message stand-inline-message-error\">\n\t\t<span class=\"material-symbols\">warning</span> Something went wrong\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-success\">\n\t\t<span class=\"material-symbols\">check_circle</span> Changes saved successfully\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-information\">\n\t\t<span class=\"material-symbols\">info</span> Your session will expire soon\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-error\">\n\t\tThis message has no icon\n\t</span>\n\t<span class=\"stand-inline-message stand-inline-message-success\">\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t\tThis message uses a custom svg icon\n\t</span>\n</div>\n";
-export declare const componentJs = "\nimport { componentInlineMessage } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\t.js-stand-inline-message {\n\t\tdisplay: ${componentInlineMessage.shared.display};\n\t\talign-items: ${componentInlineMessage.shared['align-items']};\n\t\tgap: ${componentInlineMessage.shared.gap};\n\t\tfont: ${componentInlineMessage.shared.typography.font};\n\t\tletter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n\t}\n\n\t.js-stand-inline-message > .material-symbols {\n\t\tfont-size: ${componentInlineMessage.shared.icon.size};\n\t}\n\n\t.js-stand-inline-message > svg {\n\t\twidth: ${componentInlineMessage.shared.icon.size};\n\t\theight: ${componentInlineMessage.shared.icon.size};\n\t}\n\n\t.js-stand-inline-message-error {\n\t\tcolor: ${componentInlineMessage.error.color};\n\t\tfill: ${componentInlineMessage.error.color};\n\t}\n\n\t.js-stand-inline-message-success {\n\t\tcolor: ${componentInlineMessage.success.color};\n\t\tfill: ${componentInlineMessage.success.color};\n\t}\n\n\t.js-stand-inline-message-information {\n\t\tcolor: ${componentInlineMessage.information.color};\n\t\tfill: ${componentInlineMessage.information.color};\n\t}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the button components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container flow-column\">\n\t<span class=\"js-stand-inline-message js-stand-inline-message-error\">\n\t\t<span class=\"material-symbols\">warning</span> Something went wrong\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-success\">\n\t\t<span class=\"material-symbols\">check_circle</span> Changes saved successfully\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-information\">\n\t\t<span class=\"material-symbols\">info</span> Your session will expire soon\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-error\">\n\t\tThis message has no icon\n\t</span>\n\t<span class=\"js-stand-inline-message js-stand-inline-message-success\">\n\t\t<svg viewBox=\"-3 -3 30 30\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.36 2.5h-.905l-7.6 7.69-.905.905v.453h.905v9.056l.904.896h5.872v-6.333h2.715V21.5h5.89l.904-.932v-9.02h.905v-.453l-1.357-1.357-.001.005zm5.97 8.447-6.412-6.34-6.254 6.326v8.758h3.158V13.81l.452-.453h5.438l.443.453v5.88h3.176z\"\n\t\t/>\n\t\t</svg>\n\t\tThis message uses a custom svg icon\n\t</span>\n</div>\n`;\n";

package/dist/types/components/layout/Layout.d.ts

@@ -1,19 +0,0 @@
-import type { LayoutProps, SidebarProps } from './types';
-/**
- * Currently a WIP (Subject to change, but usable) sidebar that can be used in the Layout, it supports two different layout behaviors at the sm breakpoint,
- * either 'above-grid' which will place the sidebar above the grid content effectively making it a horizontal bar at the top of the page,
- * or 'hidden' which will hide the sidebar entirely at the sm breakpoint.
- *
- * The consumer can choose how to make the sidebar content accessible through other means (e.g. a collapsible menu in the TopBar) when using the 'hidden' option.
- */
-export declare function Sidebar({ children, layoutSmBreakpoint, theme, cssOverrides, ...props }: SidebarProps): import("@emotion/react/jsx-runtime").JSX.Element;
-/**
- * A layout component that defines a grid structure for the page, it has specific areas for an AlertBanner, TopBar, Sidebar and Grid content.
- *
- * The layout adjusts based on the defined breakpoints in the theme, allowing for responsive design.
- *
- * The Layout component will look through its children and place them in the correct grid area based on their type (AlertBanner, TopBar, Sidebar, Grid), it ignores any children that are not of these types.
- *
- * Consumers can customize the layout by providing their own themes and CSS overrides for each of the components.
- */
-export declare function Layout({ children, fluid, theme, cssOverrides, ...props }: LayoutProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/link-button/sandbox.d.ts

@@ -1,5 +0,0 @@
-export declare const componentName = "LinkButton";
-export declare const componentTsx = "import { LinkButton } from '@guardian/stand/link-button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton href=\"#\">\n          \t\tLinkButton\n\t\t\t</LinkButton>\n\t\t\t<LinkButton isDisabled variant=\"secondary\">\n\t\t\t\tDisabled LinkButton\n\t\t\t</LinkButton>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton\n\t\t\t\thref=\"#\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tLinkButton with Icon\n\t\t\t</LinkButton>\n\t\t\t<LinkButton\n\t\t\t\tisDisabled\n\t\t\t\thref=\"#\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled LinkButton with Icon\n\t\t\t</LinkButton>\n\t\t</div>\n\t</>\n);\n\n";
-export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n    .stand-button {\n    \tdisplay: var(--component-button-shared-display);\n    \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n    \ttext-align: var(--component-button-shared-text-align);\n    \tbox-shadow: var(--component-button-shared-box-shadow);\n    \ttext-decoration: var(--component-button-shared-text-decoration);\n    \tcursor: var(--component-button-shared-cursor);\n    \tjustify-content: var(--component-button-shared-justify-content);\n    \talign-items: var(--component-button-shared-align-items);\n    }\n    .stand-button:focus-visible {\n    \toutline: var(--component-button-shared-focus-visible-outline);\n    \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n    }\n    .stand-button:disabled {\n    \tcursor: var(--component-button-shared-disabled-cursor);\n    }\n\n    /* example setup of button/link button style using md size and emphasised primary variant */\n    .stand-button-primary {\n    \tcolor: var(--component-button-primary-shared-color);\n    \tbackground: var(\n    \t\t--component-button-primary-shared-background-color\n    \t);\n    \theight: var(--component-button-primary-md-height);\n    \tpadding: var(--component-button-primary-md-padding-top)\n    \tvar(--component-button-primary-md-padding-right)\n    \tvar(--component-button-primary-md-padding-bottom)\n    \tvar(--component-button-primary-md-padding-left);\n    \tfont: var(--component-button-primary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-primary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-primary-md-typography-font-width);\n    \tborder: var(--component-button-primary-shared-border);\n    \tborder-radius: var(\n    \t\t--component-button-primary-shared-border-radius\n    \t);\n    }\n    .stand-button-primary:hover {\n    \tbackground: var(\n    \t\t--component-button-primary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-hover-border);\n    }\n    .stand-button-primary:active {\n    \tbackground: var(\n    \t\t--component-button-primary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-active-border);\n    }\n    .stand-button-primary:disabled, .stand-button-primary[data-disabled] {\n    \tcolor: var(--component-button-primary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-primary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-disabled-border);\n    \t}\n    \t.stand-button-primary > .material-symbols {\n    \tfont-size: var(--component-button-primary-md-icon-size);\n    \t}\n    \t.stand-button-primary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-primary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-primary-md-icon-gap);\n    }\n\n    /* example setup of button/link button style using md size and neutral secondary variant */\n    .stand-button-tertiary {\n    \tcolor: var(--component-button-tertiary-shared-color);\n    \tbackground: var(--component-button-tertiary-shared-background-color);\n    \theight: var(--component-button-tertiary-md-height);\n    \tpadding: var(--component-button-tertiary-md-padding-top)\n    \tvar(--component-button-tertiary-md-padding-right)\n    \tvar(--component-button-tertiary-md-padding-bottom)\n    \tvar(--component-button-tertiary-md-padding-left);\n    \tfont: var(--component-button-tertiary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-tertiary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-tertiary-md-typography-font-width);\n    \tborder: var(--component-button-tertiary-shared-border);\n    \tborder-radius: var(--component-button-tertiary-shared-border-radius);\n    }\n    .stand-button-tertiary:hover {\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-hover-border);\n    }\n    .stand-button-tertiary:active {\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-active-border);\n    }\n    .stand-button-tertiary:disabled, .stand-button-tertiary[data-disabled] {\n    \tcolor: var(--component-button-tertiary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-disabled-border);\n    }\n    .stand-button-tertiary > .material-symbols {\n    \tfont-size: var(--component-button-tertiary-md-icon-size);\n    }\n    .stand-button-tertiary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-tertiary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-tertiary-md-icon-gap);\n    }\n\n";
-export declare const componentHtml = "<div class=\"container flow-column\">\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-primary\">LinkButton</a>\n    \t<a class=\"stand-button stand-button-tertiary\" data-disabled>Disabled LinkButton</a>\n    </div>\n\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t<a class=\"stand-button stand-button-tertiary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    </div>\n\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } from \"@guardian/stand\";\n\n    \t// example of creating a stylesheet in js\n    \tconst sheet = new CSSStyleSheet();\n\n    \t// apply the rules to the sheet\n    \tsheet.replaceSync(`\n    \t/* shared button styles for all variants */\n    \t.js-stand-button {\n    \t\tdisplay: ${componentButton.shared.display};\n    \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n    \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n    \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n    \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n    \t\tcursor: ${componentButton.shared.cursor};\n    \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n    \t\talign-items: ${componentButton.shared[\"align-items\"]};\n    \t}\n    \t.js-stand-button:focus-visible {\n    \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n    \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n    \t}\n    \t.js-stand-button:disabled {\n    \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n    \t}\n\n    \t/* example setup of button/link button style using md size and emphasised primary variant */\n    \t.js-stand-button-primary {\n    \t\tcolor: ${componentButton[\"primary\"].shared.color};\n    \t\tbackground: ${componentButton[\"primary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"primary\"].md.height};\n    \t\tpadding: ${componentButton[\"primary\"].md.padding.top}\n    \t\t${componentButton[\"primary\"].md.padding.right}\n    \t\t${componentButton[\"primary\"].md.padding.bottom}\n    \t\t${componentButton[\"primary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"primary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"primary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"primary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"primary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"primary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-primary:hover {\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":hover\"].border}\n    \t}\n    \t.js-stand-button-primary:active {\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-primary:disabled, .js-stand-button-primary[data-disabled] {\n    \t\tcolor: ${componentButton[\"primary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-primary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"primary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-primary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"primary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"primary\"].md.icon.gap};\n    \t}\n\n    \t/* example setup of button/link button style using md size and neutral secondary variant */\n    \t.js-stand-button-tertiary {\n    \t\tcolor: ${componentButton[\"tertiary\"].shared.color};\n    \t\tbackground: ${componentButton[\"tertiary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"tertiary\"].md.height};\n    \t\tpadding: ${componentButton[\"tertiary\"].md.padding.top}\n    \t\t${componentButton[\"tertiary\"].md.padding.right}\n    \t\t${componentButton[\"tertiary\"].md.padding.bottom}\n    \t\t${componentButton[\"tertiary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"tertiary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"tertiary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"tertiary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"tertiary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"tertiary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-tertiary:hover {\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":hover\"].border};\n    \t}\n    \t.js-stand-button-tertiary:active {\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-tertiary:disabled, .js-stand-button-tertiary[data-disabled] {\n    \t\tcolor: ${componentButton[\"tertiary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-tertiary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"tertiary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-tertiary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"tertiary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"tertiary\"].md.icon.gap};\n    \t}\n\n    `);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the button components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-primary\">LinkButton</a>\n    \t\t<a class=\"js-stand-button js-stand-button-tertiary\" data-disabled>Disabled LinkButton</a>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t\t<a class=\"js-stand-button js-stand-button-tertiary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    \t</div>\n    </div>`;\n\n";