@guardian/stand 0.0.40 → 0.0.42

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

@@ -1,10 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentCheckbox } from '../../styleD/build/typescript/component/checkbox';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { CheckboxGroupProps, CheckboxProps } from './types';
-export type CheckboxTheme = Prettify<ComponentCheckbox>;
-export type PartialCheckboxTheme = Prettify<DeepPartial<CheckboxTheme>>;
-export declare const defaultCheckboxTheme: CheckboxTheme;
-export declare const checkboxStyles: (theme: CheckboxTheme, { size, isIndeterminate, }: Required<Pick<CheckboxProps, 'size' | 'isIndeterminate'>>) => SerializedStyles;
-export declare const checkboxLabelStyles: (theme: CheckboxTheme) => SerializedStyles;
-export declare const checkboxGroupStyles: (theme: CheckboxTheme, { size }: Required<Pick<CheckboxGroupProps, 'size'>>, hasError?: boolean) => SerializedStyles;

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

@@ -1,11 +0,0 @@
-import type { CheckboxGroupProps as RACCheckboxGroupProps, CheckboxProps as RACCheckboxProps } from 'react-aria-components';
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { FormInputContainerDefaultProps } from '../Form/types';
-import type { CheckboxTheme } from './styles';
-export interface CheckboxProps extends DefaultPropsWithChildren<CheckboxTheme, RACCheckboxProps['className']>, Omit<RACCheckboxProps, 'children'> {
-    /**
-     * Size variant of the Checkbox
-     */
-    size?: keyof Omit<CheckboxTheme['input'], 'shared'>;
-}
-export type CheckboxGroupProps = FormInputContainerDefaultProps<RACCheckboxGroupProps, CheckboxTheme['group']>;

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

@@ -1,2 +0,0 @@
-import type { DatePickerProps } from './types';
-export declare function DatePicker({ isInvalid, locale, useMonthTextInput, theme, ...props }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/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/DatePicker';\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/DatePicker/styles.d.ts

@@ -1,11 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentDatePicker } from '../../styleD/build/typescript/component/datePicker';
-import type { Prettify } from '../../util/types';
-export type DatePickerTheme = Prettify<ComponentDatePicker>;
-export declare const defaultDatePickerTheme: DatePickerTheme;
-export declare const datePickerStyles: (theme: DatePickerTheme) => SerializedStyles;
-export declare const dateSegmentStyles: (theme: DatePickerTheme) => SerializedStyles;
-export declare const datePickerPopoverStyles: (theme: DatePickerTheme) => SerializedStyles;
-export declare const calendarHeaderStyles: (theme: DatePickerTheme) => SerializedStyles;
-export declare const calendarGridStyles: (theme: DatePickerTheme) => SerializedStyles;
-export declare const calendarCellStyles: (theme: DatePickerTheme) => SerializedStyles;

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

@@ -1,21 +0,0 @@
-import type { DateValue, CalendarProps as RACCalendarProps, DatePickerProps as RACDatePickerProps } from 'react-aria-components';
-import type { DefaultProps } from '../../util/types';
-import type { FormInputContainerDefaultProps } from '../Form/types';
-import type { DatePickerTheme } from './styles';
-export interface DatePickerProps extends FormInputContainerDefaultProps<Omit<RACDatePickerProps<DateValue>, 'granularity' | 'hideTimeZone'>, DatePickerTheme> {
-    /**
-     * When true (default), the month segment displays full month names (e.g. "April") and
-     * supports typing the first letters of a month name to select it.
-     * Set to false to revert to React Aria's default numeric month behaviour.
-     */
-    useMonthTextInput?: boolean;
-    /**
-     * Locale to use for formatting the date. By default, it uses en-GB,
-     * you shouldn't need to set this prop in most scenarios,
-     * if you need low level control use this along with useMonthTextInput prop
-     *
-     * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale for more details on supported locales and formatting options.
-     */
-    locale?: string;
-}
-export type CalendarProps = DefaultProps<DatePickerTheme, RACCalendarProps<DateValue>['className']> & Omit<RACCalendarProps<DateValue>, 'className'>;

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

@@ -1,2 +0,0 @@
-import type { FaviconProps } from './types';
-export declare const Favicon: (props: FaviconProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;

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

@@ -1,5 +0,0 @@
-export declare const componentName = "Favicon";
-export declare const componentTsx = "import { Favicon } from '@guardian/stand/Favicon';\n\nexport const Component = () => (\n\t<>\n\t\t{/* letter example */}\n\t\t<Favicon letter=\"C\" />\n\n\t\t{/* icon example */}\n\t\t<Favicon icon=\"raven\" />\n\n\t\t{/* svg icon example */}\n\t\t<Favicon\n          icon={\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24px\"\n              viewBox=\"0 -960 960 960\"\n              width=\"24px\"\n              fill=\"#1f1f1f\"\n            >\n              <path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\" />\n            </svg>\n          }\n        />\n\n\t\t{/* image example */}\n\t\t<Favicon\n          src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n          alt=\"Mahesh Makani\"\n        />\n\t</>\n);\n\n";
-export declare const componentCss = "\n/* import the favicon styles */\n@import '@guardian/stand/component/favicon.css';\n/* import the icon styles if using the icon variant of the favicon component */\n@import \"@guardian/stand/component/icon.css\";\n\n/* example setup of favicon style */\n.stand-favicon {\n\tbackground-color: var(--component-favicon-color-background);\n\tdisplay: var(--component-favicon-display);\n\talign-items: var(--component-favicon-align-items);\n\tjustify-content: var(--component-favicon-justify-content);\n\twidth: var(--component-favicon-size);\n\theight: var(--component-favicon-size);\n\tuser-select: var(--component-favicon-user-select);\n\tcolor: var(--component-favicon-color-text);\n\tfont: var(--component-favicon-typography-font);\n\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n}\n\n.stand-favicon-icon {\n\tdisplay: var(--component-icon-shared-display);\n\tuser-select: var(--component-icon-shared-user-select);\n\tfont-size: var(--component-icon-md-size);\n}\n\n.stand-favicon-icon-color-svg > svg {\n\twidth: var(--component-icon-md-size);\n\theight: var(--component-icon-md-size);\n\tfill: var(--component-favicon-color-text);\n}\n\n/* example setup for favicon image */\n.stand-favicon > img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n";
-export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-favicon\">C</div>\n    <div class=\"stand-favicon\">\n\t\t<span class=\"material-symbols stand-favicon-icon\">raven</span>\n    </div>\n    <div class=\"stand-favicon\">\n        <span class=\"stand-favicon-icon stand-favicon-icon-color-svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"/></svg></span>\n    </div>\n    <div class=\"stand-favicon\">\n    \t<img src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n    </div>\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\t\timport { componentFavicon, componentIcon } from \"@guardian/stand\";\n\nconst faviconStyles = `\n    background-color: ${componentFavicon.color.background};\n    display: ${componentFavicon.display};\n    align-items: ${componentFavicon.alignItems};\n    justify-content: ${componentFavicon.justifyContent};\n    width: ${componentFavicon.size};\n    height: ${componentFavicon.size};\n    user-select: ${componentFavicon.userSelect};\n`;\n\nconst typographyStyle = `\n    color: ${componentFavicon.color.text};\n    font: ${componentFavicon.typography.font};\n    letter-spacing: ${componentFavicon.typography.letterSpacing};\n    font-variation-settings: 'wdth' ${componentFavicon.typography.fontWidth};\n`;\n\nconst imgStyle = `\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst iconStyles = `\n  display: ${componentIcon.shared.display};\n  user-select: ${componentIcon.shared.userSelect};\n  font-size: ${componentIcon.md.size};\n  color: ${componentFavicon.color.text};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.md.size};\n  height: ${componentIcon.md.size};\n  fill:  ${componentFavicon.color.text};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container\">\n  <div style=\"${faviconStyles}${typographyStyle}\">C</div>\n  <div style=\"${faviconStyles}\">\n\t<span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n  </div>\n  <div style=\"${faviconStyles}\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgStyles}\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"/></svg></span>\n  </div>\n  <div style=\"${faviconStyles}\">\n    <img style=\"${imgStyle}\" src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n  </div>\n`;\n";

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

@@ -1,9 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { type ComponentFavicon } from '../../styleD/build/typescript/component/favicon';
-import type { DeepPartial, Prettify } from '../../util/types';
-export type FaviconTheme = Prettify<ComponentFavicon>;
-export type PartialFaviconTheme = Prettify<DeepPartial<FaviconTheme>>;
-export declare const defaultFaviconTheme: FaviconTheme;
-export declare const faviconStyles: (theme: FaviconTheme) => SerializedStyles;
-export declare const faviconTypographyStyles: (theme: FaviconTheme) => SerializedStyles;
-export declare const faviconImageStyles: SerializedStyles;

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

@@ -1,38 +0,0 @@
-import type { DefaultProps } from '../../util/types';
-import type { IconProps } from '../Icon/types';
-import type { FaviconTheme } from './styles';
-interface FaviconWithLetter extends DefaultProps<FaviconTheme> {
-    /**
-     * Letter to render in the favicon
-     */
-    letter: string;
-    icon?: never;
-    src?: never;
-    alt?: never;
-}
-interface FaviconWithIcon extends DefaultProps<FaviconTheme> {
-    /**
-     * Icon to display in the favicon
-     */
-    icon: IconProps['symbol'] | Exclude<IconProps['children'], string>;
-    letter?: never;
-    src?: never;
-    alt?: never;
-}
-interface FaviconWithImage extends DefaultProps<FaviconTheme> {
-    /**
-     * Image URL for the favicon
-     */
-    src: string;
-    /**
-     * Alternative text for the image (required when src is provided)
-     */
-    alt: string;
-    /**
-     * Letter to display when image fails to load (optional)
-     */
-    letter?: string;
-    icon?: never;
-}
-export type FaviconProps = FaviconWithLetter | FaviconWithIcon | FaviconWithImage;
-export {};

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

@@ -1,5 +0,0 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { AllowedContainer, FormInputContainerDefaultProps } from './types';
-export declare function FormInputContainer<C extends AllowedContainer>({ as: Component, size, label, description, error, isDisabled, theme, formInputContainerTheme, cssOverrides, children, ...props }: FormInputContainerDefaultProps<ComponentPropsWithRef<C>> & {
-    as: C;
-}): import("@emotion/react/jsx-runtime").JSX.Element | null;

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

@@ -1,13 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentForm } from '../../styleD/build/typescript/component/form';
-import type { Prettify } from '../../util/types';
-export type FormInputContainerTheme = Prettify<ComponentForm['input']>;
-export declare const defaultFormInputContainerTheme: FormInputContainerTheme;
-export declare const formInputContainerStyles: (theme: FormInputContainerTheme) => SerializedStyles;
-export declare const formInputLabelStyles: (theme: FormInputContainerTheme, { isDisabled, size, }: {
-    size: keyof Omit<FormInputContainerTheme, 'shared'>;
-    isDisabled?: boolean | undefined;
-}) => SerializedStyles;
-export declare const formInputDescriptionStyles: (theme: FormInputContainerTheme, { isDisabled, }: {
-    isDisabled?: boolean | undefined;
-}) => SerializedStyles;

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

@@ -1,40 +0,0 @@
-import type { ReactNode } from 'react';
-import type { DeepPartial, DefaultProps } from '../../util/types';
-import type { FormInputContainerTheme } from './styles';
-export type FormInputContainerDefaultProps<ReactAriaInput extends {
-    className?: unknown;
-}, ComponentTheme = FormInputContainerTheme> = DefaultProps<ComponentTheme, ReactAriaInput['className']> & Omit<ReactAriaInput, 'children' | 'className'> & {
-    /**
-     * The size of the form input, 'md' (default) or 'sm'.
-     */
-    size?: keyof Omit<ComponentTheme, 'shared'>;
-    /**
-     * The label text for the form field
-     */
-    label?: string;
-    /**
-     * The description text for the form field
-     */
-    description?: string;
-    /**
-     * Validation error message
-     */
-    error?: string;
-    /**
-     * Theme overrides for the FormInputContainer container, label, and description styles.
-     * Use this when the component has its own `theme` prop for component-specific styles.
-     */
-    formInputContainerTheme?: DeepPartial<FormInputContainerTheme>;
-    /**
-     * The content of the form field (e.g. Input, Button, Popover) should always be plain React nodes.
-     * RAC render-prop children (present on Select etc.) are intentionally excluded to
-     * preserve React 18/19 compatibility where functions are not assignable to ReactNode.
-     */
-    children?: ReactNode;
-};
-/**
- * The React Aria form container components FormInputContainer supports.
- * Add new components here
- */
-export declare const ALLOWED_FORM_CONTAINERS: readonly [(props: import("react-aria-components").TextFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T extends object = {}, M extends "single" | "multiple" = "single">(props: import("react-aria-components").SelectProps<T, M> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T_1 extends import("react-aria-components").DateValue>(props: import("react-aria-components").DatePickerProps<T_1> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
-export type AllowedContainer = (typeof ALLOWED_FORM_CONTAINERS)[number];

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

@@ -1,3 +0,0 @@
-import type { GridProps, ItemProps } from './types';
-export declare function Grid({ children, theme, cssOverrides, as: Component, ...props }: GridProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function Item({ children, theme, cssOverrides, size, offset, ...props }: ItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

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\t--gap: var(--component-grid-sm-gap);\n\tdisplay: var(--component-grid-shared-display);\n\tflex-direction: var(--component-grid-shared-direction);\n\tflex-wrap: var(--component-grid-shared-wrap);\n\tjustify-content: var(--component-grid-shared-justify-content);\n\talign-items: var(--component-grid-shared-align-items);\n\tgap: var(--gap);\n\tpadding: 0 var(--component-grid-sm-padding);\n}\n\n@media (min-width: 830px) {\n\t.stand-grid-container {\n\t\t--gap: var(--component-grid-md-gap);\n\t\tpadding: 0 var(--component-grid-md-padding);\n\t}\n}\n\n@media (min-width: 1056px) {\n\t.stand-grid-container {\n\t\t--gap: var(--component-grid-lg-gap);\n\t\tpadding: 0 var(--component-grid-lg-padding);\n\t}\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/* 6-column span: ((100% - 11 * gap) * 6 / 12) + 5 * gap */\n.stand-grid-item--main {\n\tflex: 0 0 calc(((100% - 11 * var(--gap)) * 6 / 12) + 5 * var(--gap));\n}\n\n/* 3-column span with 1-column offset */\n.stand-grid-item--sidebar {\n\tflex: 0 0 calc(((100% - 11 * var(--gap)) * 3 / 12) + 2 * var(--gap));\n\tmargin-left: calc(((100% - 11 * var(--gap)) * 1 / 12) + 1 * var(--gap));\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 { shared, sm } = componentGrid;\n\nconst containerStyle = `\n\tdisplay: ${shared.display};\n\tflex-direction: ${shared.direction};\n\tflex-wrap: ${shared.wrap};\n\tjustify-content: ${shared.justifyContent};\n\talign-items: ${shared.alignItems};\n\tgap: ${sm.gap};\n\tpadding: 0 ${sm.padding};\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\n// 6-column span: ((100% - (columns - 1) * gap) * size / columns) + (size - 1) * gap\nconst mainWidth = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 6 / ${sm.columns}) + 5 * ${sm.gap})`;\n// 3-column span with 1-column offset\nconst sidebarWidth = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 3 / ${sm.columns}) + 2 * ${sm.gap})`;\nconst sidebarOffset = `calc(((100% - (${sm.columns} - 1) * ${sm.gap}) * 1 / ${sm.columns}) + 1 * ${sm.gap})`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div style=\"${containerStyle}\">\n\t\t<div style=\"${itemStyle}; flex: 0 0 ${mainWidth};\">Main content</div>\n\t\t<div style=\"${itemStyle}; flex: 0 0 ${sidebarWidth}; margin-left: ${sidebarOffset};\">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/Grid/styles.d.ts

@@ -1,11 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import type { ComponentGrid } from '../../styleD/build/typescript/component/grid';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { ItemProps } from './types';
-export type GridTheme = Prettify<ComponentGrid>;
-export type PartialGridTheme = Prettify<DeepPartial<GridTheme>>;
-export declare const defaultGridTheme: GridTheme;
-type GridItemOwnerState = Pick<ItemProps, 'size' | 'offset'>;
-export declare const gridStyles: (theme: GridTheme) => SerializedStyles;
-export declare const itemStyles: (theme: GridTheme, { size, offset }: GridItemOwnerState) => SerializedStyles;
-export {};

package/dist/types/components/Grid/styles.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,25 +0,0 @@
-import type { ElementType, HTMLAttributes } from 'react';
-import type { Breakpoint } from '../../styleD/utils/semantic/mq';
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { GridTheme } from './styles';
-export type ResponsiveGridValue<T> = Partial<Record<Breakpoint, T>>;
-export type GridSizeValue = number | 'auto' | 'grow';
-export type GridOffsetValue = number | 'auto';
-export interface GridProps extends DefaultPropsWithChildren<GridTheme>, Omit<HTMLAttributes<HTMLElement>, 'children'> {
-    /**
-     * Element used to render the Grid container.
-     */
-    as?: ElementType;
-}
-export interface ItemProps extends DefaultPropsWithChildren<GridTheme>, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-    /**
-     * Number of columns the item should span, or responsive values keyed by breakpoint.
-     */
-    size?: GridSizeValue | ResponsiveGridValue<GridSizeValue>;
-    /**
-     * Columns to offset the item from the left. Numbers push the item that many columns
-     * to the right. 'auto' pushes it to the far right of the row.
-     * Responsive values keyed by breakpoint are also accepted.
-     */
-    offset?: GridOffsetValue | ResponsiveGridValue<GridOffsetValue>;
-}

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

@@ -1,2 +0,0 @@
-import type { IconProps } from './types';
-export declare function Icon({ children, size, fill, alt, symbol, theme, cssOverrides, className, }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

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.warmPurple[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.warmPurple[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.userSelect};\n  font-size: ${componentIcon.lg.size};\n`;\n\nconst iconFontColorStyles = `\n  ${iconStyles}\n  color: ${baseColors.warmPurple[400]};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.lg.size};\n  height: ${componentIcon.lg.size};\n`;\n\nconst iconSvgColorStyles = `\n  ${iconSvgStyles}\n  fill: ${baseColors.warmPurple[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/Icon/styles.d.ts

@@ -1,9 +0,0 @@
-import type { ComponentIcon } from '../../styleD/build/typescript/component/icon';
-import type { DeepPartial, Prettify } from '../../util/types';
-import type { IconProps } from './types';
-export type IconTheme = Prettify<ComponentIcon>;
-export type PartialIconTheme = Prettify<DeepPartial<IconTheme>>;
-export declare const defaultIconTheme: IconTheme;
-export declare const iconStyles: (theme: IconTheme, { size, fill, mode, }: Required<Pick<IconProps, "size">> & Pick<IconProps, "fill"> & {
-    mode: 'text' | 'svg';
-}) => import("@emotion/react").SerializedStyles;

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

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import type { MaterialSymbol } from '../../fonts/material-symbols-types';
-import type { DefaultPropsWithChildren } from '../../util/types';
-import type { IconTheme } from './styles';
-export type { MaterialSymbol } from '../../fonts/material-symbols-types';
-export interface IconProps extends DefaultPropsWithChildren<IconTheme, undefined, MaterialSymbol | Exclude<React.ReactNode, string>> {
-    /**
-     * Size variant of the icon
-     */
-    size?: keyof Omit<IconTheme, 'shared'>;
-    /**
-     * Fill/color of the icon. Default is to inherit from text color or icon defaults.
-     */
-    fill?: string;
-    /**
-     * Alternative text for the icon, used for accessibility.
-     * This must be provided if the icon is not purely decorative, and should describe the meaning or function of the icon.
-     */
-    alt?: string;
-    /**
-     * Alternative to using the `children` prop for rendering Material Symbol icons,
-     * you can use the `symbol` prop to specify the icon by its symbol name.
-     * This is a convenience for font icons, allowing you to simply provide the symbol name in a type-safe way without needing to pass it as a child string.
-     * For example, instead of `<Icon>home</Icon>`, you can use `<Icon symbol="home" />`.
-     * This prop is mutually exclusive with `children` when rendering font icons, and takes precedence over `children` if both are provided.
-     */
-    symbol?: MaterialSymbol;
-}

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

@@ -1,2 +0,0 @@
-import type { IconButtonProps } from './types';
-export declare function IconButton({ variant, size, symbol, ariaLabel, theme, cssOverrides, ...props }: IconButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,5 +0,0 @@
-export declare const componentName = "IconButton";
-export declare const componentTsx = "import { IconButton } from \"@guardian/stand/IconButton\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconButton\n          onPress={() => alert(\"You summoned a raven!\")}\n          symbol=\"raven\"\n          ariaLabel=\"Summon a raven\"\n        />\n        <IconButton\n          isDisabled\n          onPress={() => alert(\"You consulted with an owl!\")}\n          symbol=\"owl\"\n          ariaLabel=\"Consult with an owl\"\n\t\t  variant=\"tertiary\"\n        />\n\t</>\n);\n\n";
-export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-primary {\n\t\tcolor: var(--component-button-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-primary-md-icon-button-width);\n\t\theight: var(--component-button-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-primary-md-typography-font-width);\n\t\tborder: var(--component-button-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-active-border);\n\t}\n\t.stand-icon-button-primary:disabled {\n\t\tcolor: var(--component-button-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-primary > .material-symbols {\n\t\tfont-size: var(--component-button-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-tertiary {\n\t\tcolor: var(--component-button-tertiary-shared-color);\n\t\tbackground: var(--component-button-tertiary-shared-background-color);\n\t\twidth: var(--component-button-tertiary-md-icon-button-width);\n\t\theight: var(--component-button-tertiary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-tertiary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-tertiary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-tertiary-md-typography-font-width);\n\t\tborder: var(--component-button-tertiary-shared-border);\n\t\tborder-radius: var(--component-button-tertiary-shared-border-radius);\n\t}\n\t.stand-icon-button-tertiary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-hover-border);\n\t}\n\t.stand-icon-button-tertiary:active {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-active-border);\n\t}\n\t.stand-icon-button-tertiary:disabled, .stand-icon-button-tertiary[data-disabled] {\n\t\tcolor: var(--component-button-tertiary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-disabled-border);\n\t}\n\t.stand-icon-button-tertiary > .material-symbols {\n\t\tfont-size: var(--component-button-tertiary-md-icon-size);\n\t}\n\n";
-export declare const componentHtml = "<div class=\"container\">\n    <button class=\"stand-icon-button stand-icon-button-primary\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></button>\n    <button class=\"stand-icon-button stand-icon-button-tertiary\" disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></button>\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\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-icon-button {\n\t\tdisplay: ${componentButton.shared.display};\n\t\t-webkit-appearance: ${componentButton.shared.webkitAppearance};\n\t\ttext-align: ${componentButton.shared.textAlign};\n\t\tbox-shadow: ${componentButton.shared.boxShadow};\n\t\ttext-decoration: ${componentButton.shared.textDecoration};\n\t\tcursor: ${componentButton.shared.cursor};\n\t\tjustify-content: ${componentButton.shared.justifyContent};\n\t\talign-items: ${componentButton.shared.alignItems};\n\t}\n\t.js-stand-icon-button:focus-visible {\n\t\toutline: ${componentButton.shared.focusVisible.outline};\n\t\toutline-offset: ${componentButton.shared.focusVisible.outlineOffset};\n\t}\n\t.js-stand-icon-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-icon-button-primary {\n\t\tcolor: ${componentButton.primary.shared.color};\n\t\tbackground: ${componentButton.primary.shared.backgroundColor};\n\t\twidth: ${componentButton.primary.md.iconButton.width};\n\t\theight: ${componentButton.primary.md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-primary: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-icon-button-primary > .material-symbols {\n\t\tfont-size: ${componentButton.primary.md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-tertiary {\n\t\tcolor: ${componentButton.tertiary.shared.color};\n\t\tbackground: ${componentButton.tertiary.shared.backgroundColor};\n\t\twidth: ${componentButton.tertiary.md.iconButton.width};\n\t\theight: ${componentButton.tertiary.md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-tertiary:disabled, .js-stand-icon-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-icon-button-tertiary > .material-symbols {\n\t\tfont-size: ${componentButton.tertiary.md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-primary\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></button>\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-tertiary\" disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></button>\n\t</div>\n\t`;\n\n";