@guardian/stand 0.0.31 → 0.0.33

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

@@ -0,0 +1,183 @@
+const componentDatePicker = {
+  picker: {
+    shared: {
+      display: "flex",
+      width: "100%",
+      justifyContent: "space-between",
+      alignItems: "center",
+      height: "2.5rem",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #545454",
+      backgroundColor: "#ffffff",
+      gap: "0.5rem",
+      padding: {
+        top: "0",
+        right: "0.25rem",
+        bottom: "0",
+        left: "0.75rem"
+      },
+      disabled: {
+        cursor: "not-allowed",
+        backgroundColor: "#ededed",
+        color: "#999999"
+      },
+      focusVisible: {
+        outline: "0.125rem solid #0072a9"
+      },
+      invalid: {
+        border: "0.0625rem solid #b42a19"
+      },
+      button: {
+        flex: "1",
+        backgroundColor: "#00000000",
+        border: "0 solid transparent",
+        padding: {
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0"
+        },
+        margin: {
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0"
+        },
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        color: "#545454",
+        cursor: "pointer",
+        disabled: {
+          color: "#999999",
+          cursor: "not-allowed"
+        }
+      }
+    }
+  },
+  segment: {
+    shared: {
+      placeholder: {
+        color: "#545454",
+        focusVisible: {
+          outline: "0.125rem solid #0072a9"
+        }
+      }
+    }
+  },
+  popover: {
+    shared: {
+      offset: 8,
+      containerPadding: 0,
+      backgroundColor: "#ffffff",
+      padding: {
+        top: "0.25rem",
+        right: "0.25rem",
+        bottom: "0.25rem",
+        left: "0.25rem"
+      },
+      boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.3)"
+    }
+  },
+  calendar: {
+    header: {
+      shared: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        typography: {
+          font: "normal 700 0.875rem/1.15 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        },
+        button: {
+          backgroundColor: "#00000000",
+          border: "none",
+          padding: {
+            top: "0",
+            right: "0",
+            bottom: "0",
+            left: "0"
+          },
+          margin: {
+            top: "0",
+            right: "0",
+            bottom: "0",
+            left: "0"
+          },
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#545454",
+          cursor: "pointer",
+          width: "2.5rem",
+          height: "2.5rem",
+          aspectRatio: "1",
+          hovered: {
+            backgroundColor: "#f6f6f6"
+          },
+          pressed: {
+            backgroundColor: "#ededed"
+          },
+          selected: {
+            backgroundColor: "#b8d8e7"
+          },
+          focusVisible: {
+            outline: "0.125rem solid #0072a9"
+          },
+          disabled: {
+            cursor: "not-allowed",
+            color: "#999999"
+          }
+        }
+      }
+    },
+    grid: {
+      shared: {
+        typography: {
+          font: "normal 460 0.875rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        },
+        borderCollapse: "collapse",
+        borderSpacing: "0",
+        th: {
+          width: "2.5rem",
+          height: "2.5rem",
+          verticalAlign: "middle"
+        }
+      }
+    },
+    cell: {
+      shared: {
+        width: "2.5rem",
+        aspectRatio: "1",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        outsideMonth: {
+          display: "none"
+        },
+        hovered: {
+          backgroundColor: "#f6f6f6"
+        },
+        pressed: {
+          backgroundColor: "#ededed"
+        },
+        selected: {
+          backgroundColor: "#b8d8e7"
+        },
+        focusVisible: {
+          outline: "0.125rem solid #0072a9"
+        },
+        disabled: {
+          cursor: "not-allowed",
+          color: "#999999"
+        }
+      }
+    }
+  }
+};
+
+export { componentDatePicker };

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

@@ -0,0 +1,24 @@
+'use strict';
+
+const componentLink = {
+  shared: {
+    focus: {
+      outline: "1px solid #0072a9"
+    },
+    hover: {
+      color: "#00344e",
+      cursor: "pointer"
+    },
+    enabled: {
+      color: "#00496c"
+    },
+    disabled: {
+      color: "#999999"
+    },
+    pressed: {
+      color: "#00202f"
+    }
+  }
+};
+
+exports.componentLink = componentLink;

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

@@ -0,0 +1,22 @@
+const componentLink = {
+  shared: {
+    focus: {
+      outline: "1px solid #0072a9"
+    },
+    hover: {
+      color: "#00344e",
+      cursor: "pointer"
+    },
+    enabled: {
+      color: "#00496c"
+    },
+    disabled: {
+      color: "#999999"
+    },
+    pressed: {
+      color: "#00202f"
+    }
+  }
+};
+
+export { componentLink };

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

@@ -0,0 +1,2 @@
+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/date-picker/sandbox.d.ts

@@ -0,0 +1,2 @@
+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/date-picker/styles.d.ts

@@ -0,0 +1,11 @@
+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/date-picker/types.d.ts

@@ -0,0 +1,21 @@
+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/form/types.d.ts

@@ -36,5 +36,5 @@ export type FormInputContainerDefaultProps<ReactAriaInput extends {
  * 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];
+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/link/Link.d.ts

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

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Link";
+export declare const componentTsx = "import { Link } from '@guardian/stand/link';\n\nexport const Component = () => (\n\t<Link href=\"#\">Hello</Link>\n);\n";
+export declare const componentCss = "\n/* import the link styles */\n@import '@guardian/stand/component/link.css';\n\n.stand-typography-body-sm {\n\tfont: var(--semantic-typography-body-sm-font);\n\tletter-spacing: var(--semantic-typography-body-sm-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-sm-font-width);\n}\n.stand-link {\n\ttext-decoration: underline;\n\ttext-decoration-style: solid;\n\ttext-underline-offset: 8%;\n\ttext-decoration-thickness: 5%;\n\tcolor: var(--component-link-shared-enabled-color);\n}\n\n.stand-link[data-hovered] {\n\tcolor: var(--component-link-shared-hover-color);\n\tcursor: var(--component-link-shared-hover-cursor);\n}\n\n.stand-link[data-pressed] {\n\tcolor: var(--component-link-shared-pressed-color);\n}\n\n.stand-link[data-disabled] {\n\tcolor: var(--component-link-shared-disabled-color);\n}\n\n.stand-link[data-focus-visible] {\n\toutline: var(--component-link-shared-focus-outline);\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\">Default link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-hovered>Hovered link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-pressed>Pressed link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-disabled>Disabled link</a></br>\n\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-focus-visible>Focused link</a>\n</div>\n";
+export declare const componentJs = "\nimport { componentLink, semanticTypography } from \"@guardian/stand\";\n\nconst semanticTypographyBodySm = `\n\t\tfont: ${semanticTypography['body-sm'].font};\n\t\tletter-spacing: ${semanticTypography['body-sm'].letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-sm'].fontWidth};\n`;\n\nconst baseStyle = `\n\ttext-decoration: underline;\n\ttext-decoration-style: solid;\n\ttext-underline-offset: 8%;\n\ttext-decoration-thickness: 5%;\n\tcolor: ${componentLink.shared.enabled.color};\n`;\n\nconst hoverStyle = `\n\tcolor: ${componentLink.shared.hover.color};\n\tcursor: ${componentLink.shared.hover.cursor};\n`;\n\nconst pressedStyle = `\n\tcolor: ${componentLink.shared.pressed.color};\n`;\n\nconst disabledStyle = `\n\tcolor: ${componentLink.shared.disabled.color};\n`;\n\nconst focusVisibleStyle = `\n\toutline: ${componentLink.shared.focus.outline};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<style>\n\t\t.stand-typography-body-sm { ${semanticTypographyBodySm} }\n\t\t.stand-link { ${baseStyle} }\n\t\t.stand-link[data-hovered] { ${hoverStyle} }\n\t\t.stand-link[data-pressed] { ${pressedStyle} }\n\t\t.stand-link[data-disabled] { ${disabledStyle} }\n\t\t.stand-link[data-focus-visible] { ${focusVisibleStyle} }\n\t</style>\n\t<div class=\"container\">\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\">Default link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-hovered>Hovered link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-pressed>Pressed link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-disabled>Disabled link</a></br>\n\t\t<a class=\"stand-link stand-typography-body-sm\" href=\"#\" data-focus-visible>Focused link</a>\n\t</div>\n`;\n";

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

@@ -0,0 +1,7 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentLink } from '../../styleD/build/typescript/component/link';
+import type { DeepPartial, Prettify } from '../../util/types';
+export type LinkTheme = Prettify<ComponentLink>;
+export type PartialLinkTheme = DeepPartial<LinkTheme>;
+export declare const defaultLinkTheme: LinkTheme;
+export declare const linkStyles: (theme: LinkTheme) => SerializedStyles;

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

@@ -0,0 +1,11 @@
+import type { LinkProps as RACLinkProps } from 'react-aria-components';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { TypographyVariant } from '../typography/types';
+import type { LinkTheme } from './styles';
+export interface LinkProps extends Omit<RACLinkProps, 'children'>, DefaultPropsWithChildren<LinkTheme, RACLinkProps['className']> {
+    /**
+     * to change the typography of the link, you can pass a variant from semanticTypography.
+     * By default, it is set to "body-sm".
+     */
+    typography?: TypographyVariant;
+}

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

@@ -1,6 +1,7 @@
-import type { SemanticTypography } from '../..';
+import type { SemanticTypography } from '../../styleD/build/typescript/semantic/typography';
 import type { DefaultPropsWithChildren } from '../../util/types';
 import type { TypographyTheme } from './styles';
+export type TypographyVariant = keyof SemanticTypography;
 export interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
     /**
      * HTML element to render with font applied to
@@ -9,5 +10,5 @@ export interface TypographyProps extends DefaultPropsWithChildren<TypographyThem
     /**
      * Font variant to apply as a CSS style to the element
      */
-    variant?: keyof SemanticTypography;
+    variant?: TypographyVariant;
 }

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

@@ -0,0 +1,21 @@
+/**
+ * DatePicker component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ * - `@internationalized/date`
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/datePicker.css),
+ * you don't need to install these.
+ */
+export { DatePicker } from './components/date-picker/DatePicker';
+export type { DatePickerProps } from './components/date-picker/types';
+export type { DatePickerTheme } from './components/date-picker/styles';
+export { componentDatePicker } from './styleD/build/typescript/component/datePicker';
+export type { ComponentDatePicker } from './styleD/build/typescript/component/datePicker';

package/dist/types/index.d.ts

@@ -16,8 +16,6 @@ export type { ComponentUserMenu } from './styleD/build/typescript/component/user
 /**
  * design system components tokens exports
  */
-export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
-export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
 export { componentAvatar } from './styleD/build/typescript/component/avatar';
 export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';
 export { componentButton } from './styleD/build/typescript/component/button';
@@ -26,6 +24,8 @@ export { componentCheckbox } from './styleD/build/typescript/component/checkbox'
 export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
+export { componentDatePicker } from './styleD/build/typescript/component/datePicker';
+export type { ComponentDatePicker } from './styleD/build/typescript/component/datePicker';
 export { componentForm } from './styleD/build/typescript/component/form';
 export type { ComponentForm } from './styleD/build/typescript/component/form';
 export { componentIcon } from './styleD/build/typescript/component/icon';
@@ -34,6 +34,10 @@ export { componentInlineMessage } from './styleD/build/typescript/component/inli
 export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
 export { componentMenu } from './styleD/build/typescript/component/menu';
 export type { ComponentMenu } from './styleD/build/typescript/component/menu';
+export { componentLink } from './styleD/build/typescript/component/link';
+export type { ComponentLink } from './styleD/build/typescript/component/link';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner';
+export type { ComponentAlertBanner } from './styleD/build/typescript/component/alertBanner';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export type { ComponentRadioGroup } from './styleD/build/typescript/component/radioGroup';
 export { componentSelect } from './styleD/build/typescript/component/select';

package/dist/types/link.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Link component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/link.css),
+ * you don't need to install these.
+ */
+export { Link } from './components/link/Link';
+export type { LinkProps } from './components/link/types';
+export type { PartialLinkTheme as LinkTheme } from './components/link/styles';
+export { componentLink } from './styleD/build/typescript/component/link';
+export type { ComponentLink } from './styleD/build/typescript/component/link';

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

@@ -0,0 +1,185 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentDatePicker: {
+    picker: {
+        shared: {
+            display: string;
+            width: string;
+            justifyContent: string;
+            alignItems: string;
+            height: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            gap: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            disabled: {
+                cursor: string;
+                backgroundColor: string;
+                color: string;
+            };
+            focusVisible: {
+                outline: string;
+            };
+            invalid: {
+                border: string;
+            };
+            button: {
+                flex: string;
+                backgroundColor: string;
+                border: string;
+                padding: {
+                    top: string;
+                    right: string;
+                    bottom: string;
+                    left: string;
+                };
+                margin: {
+                    top: string;
+                    right: string;
+                    bottom: string;
+                    left: string;
+                };
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                color: string;
+                cursor: string;
+                disabled: {
+                    color: string;
+                    cursor: string;
+                };
+            };
+        };
+    };
+    segment: {
+        shared: {
+            placeholder: {
+                color: string;
+                focusVisible: {
+                    outline: string;
+                };
+            };
+        };
+    };
+    popover: {
+        shared: {
+            offset: number;
+            containerPadding: number;
+            backgroundColor: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            boxShadow: string;
+        };
+    };
+    calendar: {
+        header: {
+            shared: {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+                button: {
+                    backgroundColor: string;
+                    border: string;
+                    padding: {
+                        top: string;
+                        right: string;
+                        bottom: string;
+                        left: string;
+                    };
+                    margin: {
+                        top: string;
+                        right: string;
+                        bottom: string;
+                        left: string;
+                    };
+                    display: string;
+                    alignItems: string;
+                    justifyContent: string;
+                    color: string;
+                    cursor: string;
+                    width: string;
+                    height: string;
+                    aspectRatio: string;
+                    hovered: {
+                        backgroundColor: string;
+                    };
+                    pressed: {
+                        backgroundColor: string;
+                    };
+                    selected: {
+                        backgroundColor: string;
+                    };
+                    focusVisible: {
+                        outline: string;
+                    };
+                    disabled: {
+                        cursor: string;
+                        color: string;
+                    };
+                };
+            };
+        };
+        grid: {
+            shared: {
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+                borderCollapse: string;
+                borderSpacing: string;
+                th: {
+                    width: string;
+                    height: string;
+                    verticalAlign: string;
+                };
+            };
+        };
+        cell: {
+            shared: {
+                width: string;
+                aspectRatio: string;
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                cursor: string;
+                outsideMonth: {
+                    display: string;
+                };
+                hovered: {
+                    backgroundColor: string;
+                };
+                pressed: {
+                    backgroundColor: string;
+                };
+                selected: {
+                    backgroundColor: string;
+                };
+                focusVisible: {
+                    outline: string;
+                };
+                disabled: {
+                    cursor: string;
+                    color: string;
+                };
+            };
+        };
+    };
+};
+export type ComponentDatePicker = typeof componentDatePicker;

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

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentLink: {
+    shared: {
+        focus: {
+            outline: string;
+        };
+        hover: {
+            color: string;
+            cursor: string;
+        };
+        enabled: {
+            color: string;
+        };
+        disabled: {
+            color: string;
+        };
+        pressed: {
+            color: string;
+        };
+    };
+};
+export type ComponentLink = typeof componentLink;

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

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentTemplateComponent: {
+    color: {
+        background: string;
+        text: string;
+    };
+};
+export type ComponentTemplateComponent = typeof componentTemplateComponent;

package/dist/types/templates/component/TemplateComponent.d.ts

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

package/dist/types/templates/component/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "TemplateComponent";
+export declare const componentTsx = "import { TemplateComponent } from '@guardian/stand/template-component';\n\nexport const Component = () => (\n\t<>\n\t\t{/* default example */}\n\t\t<TemplateComponent />\n\n\t\t{/* custom message example */}\n\t\t<TemplateComponent message=\"hi there\" />\n\n);\n\n";
+export declare const componentCss = "\n/* import the templateComponent styles */\n@import '@guardian/stand/component/templateComponent.css';\n/* import the icon styles if using the icon variant of the templateComponent component */\n@import \"@guardian/stand/component/icon.css\";\n\n/* example setup of templateComponent style */\n.stand-template-component {\n\tbackground-color: var(--component-template-component-color-background);\n\tdisplay: var(--component-template-component-display);\n\talign-items: var(--component-template-component-align-items);\n\tjustify-content: var(--component-template-component-justify-content);\n\twidth: var(--component-template-component-size);\n\theight: var(--component-template-component-size);\n\tuser-select: var(--component-template-component-user-select);\n\tcolor: var(--component-template-component-color-text);\n\tfont: var(--component-template-component-typography-font);\n\tletter-spacing: var(--component-template-component-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-template-component-typography-font-width);\n}\n\n.stand-template-component-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-template-component-icon-color-svg > svg {\n\twidth: var(--component-icon-md-size);\n\theight: var(--component-icon-md-size);\n\tfill: var(--component-template-component-color-text);\n}\n\n/* example setup for templateComponent image */\n.stand-template-component > 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-template-component\">C</div>\n    <div class=\"stand-template-component\">\n\t\t<span class=\"material-symbols stand-template-component-icon\">raven</span>\n    </div>\n    <div class=\"stand-template-component\">\n        <span class=\"stand-template-component-icon stand-template-component-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-template-component\">\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 { componentTemplateComponent, componentIcon } from \"@guardian/stand\";\n\nconst templateComponentStyles = `\n    background-color: ${componentTemplateComponent.color.background};\n    display: ${componentTemplateComponent.display};\n    align-items: ${componentTemplateComponent[\"align-items\"]};\n    justify-content: ${componentTemplateComponent[\"justify-content\"]};\n    width: ${componentTemplateComponent.size};\n    height: ${componentTemplateComponent.size};\n    user-select: ${componentTemplateComponent[\"user-select\"]};\n`;\n\nconst typographyStyle = `\n    color: ${componentTemplateComponent.color.text};\n    font: ${componentTemplateComponent.typography.font};\n    letter-spacing: ${componentTemplateComponent.typography.letterSpacing};\n    font-variation-settings: 'wdth' ${componentTemplateComponent.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[\"user-select\"]};\n  font-size: ${componentIcon.md.size};\n  color: ${componentTemplateComponent.color.text};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.md.size};\n  height: ${componentIcon.md.size};\n  fill:  ${componentTemplateComponent.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=\"${templateComponentStyles}${typographyStyle}\">C</div>\n  <div style=\"${templateComponentStyles}\">\n\t<span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n  </div>\n  <div style=\"${templateComponentStyles}\">\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=\"${templateComponentStyles}\">\n    <img style=\"${imgStyle}\" src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n  </div>\n`;\n";