@guardian/stand 0.0.17 → 0.0.19

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

@@ -4,57 +4,123 @@ const componentAvatar = {
       green: {
         text: "#24491d",
         background: "#cde4c9",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#aed2a6"
+        },
+        ":active": {
+          background: "#8ec183"
+        }
       },
       blue: {
         text: "#092f62",
         background: "#c5d9f4",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#93b9ec"
+        },
+        ":active": {
+          background: "#699ee5"
+        }
       },
       red: {
         text: "#65170e",
         background: "#f5c6c0",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#eea198"
+        },
+        ":active": {
+          background: "#e87c6f"
+        }
       },
       cyan: {
         text: "#00344e",
         background: "#b8d8e7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#8abed7"
+        },
+        ":active": {
+          background: "#5ca5c8"
+        }
       },
       teal: {
         text: "#0e2729",
         background: "#c5dfe1",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#a0cace"
+        },
+        ":active": {
+          background: "#7bb5bb"
+        }
       },
       "cool-purple": {
         text: "#394069",
         background: "#dbdff7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#c3caf3"
+        },
+        ":active": {
+          background: "#acb5ee"
+        }
       },
       "warm-purple": {
         text: "#381350",
         background: "#dac3e8",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#c29dd9"
+        },
+        ":active": {
+          background: "#aa76cb"
+        }
       },
       magenta: {
         text: "#581734",
         background: "#edc6d7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#e2a1be"
+        },
+        ":active": {
+          background: "#d67ca4"
+        }
       },
       orange: {
         text: "#693c16",
         background: "#fcddc6",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#fac7a1"
+        },
+        ":active": {
+          background: "#f9b27c"
+        }
       },
       yellow: {
         text: "#5b4a0b",
         background: "#fbeebf",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#f9e396"
+        },
+        ":active": {
+          background: "#f6d86d"
+        }
       },
       outlined: {
         text: "#000000",
         background: "none",
-        border: "0.0625rem solid #8d8d8d"
+        border: "0.0625rem solid #8d8d8d",
+        ":hover": {
+          background: "#ededed"
+        },
+        ":active": {
+          background: "#dcdcdc"
+        }
       }
     },
     display: "inline-flex",
@@ -63,7 +129,24 @@ const componentAvatar = {
     overflow: "hidden",
     "flex-shrink": "0",
     "border-radius": "50%",
-    "user-select": "none"
+    "user-select": "none",
+    link: {
+      width: "fit-content",
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0.125rem"
+      },
+      "text-decoration": "none"
+    },
+    button: {
+      background: "none",
+      border: "none",
+      padding: "0",
+      cursor: "pointer",
+      ":disabled": {
+        cursor: "not-allowed"
+      }
+    }
   },
   sm: {
     size: "2rem",

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

@@ -0,0 +1,28 @@
+'use strict';
+
+const componentInlineMessage = {
+  shared: {
+    display: "inline-flex",
+    gap: "0.25rem",
+    "align-items": "center",
+    icon: {
+      size: "1.25rem"
+    },
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  error: {
+    color: "#8c2113"
+  },
+  success: {
+    color: "#326528"
+  },
+  information: {
+    color: "#00344e"
+  }
+};
+
+exports.componentInlineMessage = componentInlineMessage;

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

@@ -0,0 +1,26 @@
+const componentInlineMessage = {
+  shared: {
+    display: "inline-flex",
+    gap: "0.25rem",
+    "align-items": "center",
+    icon: {
+      size: "1.25rem"
+    },
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  error: {
+    color: "#8c2113"
+  },
+  success: {
+    color: "#326528"
+  },
+  information: {
+    color: "#00344e"
+  }
+};
+
+export { componentInlineMessage };

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

@@ -0,0 +1,88 @@
+'use strict';
+
+const componentSelect = {
+  shared: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem",
+    maxWidth: "333px",
+    width: "100%",
+    hover: {
+      backgroundColor: "#f6f6f6",
+      outline: "none"
+    },
+    pressed: {
+      backgroundColor: "#ededed"
+    }
+  },
+  label: {
+    color: "#000000",
+    typography: {
+      font: "normal 700 1rem/1.15 Open Sans",
+      letterSpacing: "-0.03125rem",
+      fontWidth: 95
+    }
+  },
+  helpText: {
+    color: "#545454",
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  button: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: "0.25rem",
+    backgroundColor: "#ffffff",
+    border: "0.0625rem solid #545454",
+    borderRadius: "0.25rem",
+    height: "2.5rem",
+    paddingLeft: "0.75rem",
+    paddingRight: "0.25rem",
+    color: "#545454",
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    },
+    focused: {
+      outline: "0.125rem solid #0072a9",
+      "outline-offset": "0.125rem"
+    },
+    disabled: {
+      backgroundColor: "#ffffff",
+      cursor: "not-allowed",
+      color: "#999999",
+      border: "0.0625rem solid #dcdcdc"
+    },
+    error: {
+      border: "0.0625rem solid #b42a19"
+    }
+  },
+  option: {
+    paddingLeft: "1rem",
+    paddingRight: "1rem",
+    paddingTop: "0.75rem",
+    paddingBottom: "0.75rem",
+    focused: {
+      outline: "0.125rem solid #0072a9",
+      "outline-offset": "0",
+      backgroundColor: "inherit"
+    }
+  },
+  listBox: {
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    },
+    border: "0.0625rem solid #cccccc",
+    backgroundColor: "#ffffff",
+    shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+  }
+};
+
+exports.componentSelect = componentSelect;

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

@@ -0,0 +1,86 @@
+const componentSelect = {
+  shared: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem",
+    maxWidth: "333px",
+    width: "100%",
+    hover: {
+      backgroundColor: "#f6f6f6",
+      outline: "none"
+    },
+    pressed: {
+      backgroundColor: "#ededed"
+    }
+  },
+  label: {
+    color: "#000000",
+    typography: {
+      font: "normal 700 1rem/1.15 Open Sans",
+      letterSpacing: "-0.03125rem",
+      fontWidth: 95
+    }
+  },
+  helpText: {
+    color: "#545454",
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  button: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: "0.25rem",
+    backgroundColor: "#ffffff",
+    border: "0.0625rem solid #545454",
+    borderRadius: "0.25rem",
+    height: "2.5rem",
+    paddingLeft: "0.75rem",
+    paddingRight: "0.25rem",
+    color: "#545454",
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    },
+    focused: {
+      outline: "0.125rem solid #0072a9",
+      "outline-offset": "0.125rem"
+    },
+    disabled: {
+      backgroundColor: "#ffffff",
+      cursor: "not-allowed",
+      color: "#999999",
+      border: "0.0625rem solid #dcdcdc"
+    },
+    error: {
+      border: "0.0625rem solid #b42a19"
+    }
+  },
+  option: {
+    paddingLeft: "1rem",
+    paddingRight: "1rem",
+    paddingTop: "0.75rem",
+    paddingBottom: "0.75rem",
+    focused: {
+      outline: "0.125rem solid #0072a9",
+      "outline-offset": "0",
+      backgroundColor: "inherit"
+    }
+  },
+  listBox: {
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    },
+    border: "0.0625rem solid #cccccc",
+    backgroundColor: "#ffffff",
+    shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+  }
+};
+
+export { componentSelect };

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

@@ -205,6 +205,56 @@ const semanticTypography = {
     font: "normal 700 1rem/1 Open Sans",
     letterSpacing: "-0.0125rem",
     fontWidth: 95
+  },
+  "label-form-sm": {
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
+  },
+  "label-form-md": {
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
+    fontWidth: 95
+  },
+  "label-form-inline-sm": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "label-form-inline-md": {
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "label-form-compact-sm": {
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "label-form-compact-md": {
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 88
+  },
+  "label-form-inline-compact-sm": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "label-form-inline-compact-md": {
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "help-text-form-md": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "help-text-form-compact-md": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
   }
 };
 

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

@@ -203,6 +203,56 @@ const semanticTypography = {
     font: "normal 700 1rem/1 Open Sans",
     letterSpacing: "-0.0125rem",
     fontWidth: 95
+  },
+  "label-form-sm": {
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
+  },
+  "label-form-md": {
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.03125rem",
+    fontWidth: 95
+  },
+  "label-form-inline-sm": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "label-form-inline-md": {
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "label-form-compact-sm": {
+    font: "normal 700 0.875rem/1.15 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "label-form-compact-md": {
+    font: "normal 700 1rem/1.15 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 88
+  },
+  "label-form-inline-compact-sm": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "label-form-inline-compact-md": {
+    font: "normal 460 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "help-text-form-md": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "help-text-form-compact-md": {
+    font: "normal 460 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
   }
 };
 

package/dist/types/avatar-button.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Avatar button component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/avatar.css),
+ * you don't need to install these.
+ */
+export { AvatarButton } from './components/avatar-button/AvatarButton';
+export type { AvatarButtonProps } from './components/avatar-button/types';
+export type { PartialAvatarButtonTheme as AvatarButtonTheme } from './components/avatar-button/styles';

package/dist/types/avatar-link.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Avatar link component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/avatar.css),
+ * you don't need to install these.
+ */
+export { AvatarLink } from './components/avatar-link/AvatarLink';
+export type { AvatarLinkProps } from './components/avatar-link/types';
+export type { PartialAvatarLinkTheme as AvatarLinkTheme } from './components/avatar-link/styles';

package/dist/types/components/avatar-button/AvatarButton.d.ts

@@ -0,0 +1,2 @@
+import { type AvatarButtonProps } from './types';
+export declare function AvatarButton(props: AvatarButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const componentName = "AvatarButton";
+export declare const componentTsx = "import { AvatarButton } from '@guardian/stand/AvatarButton';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<AvatarButton initials=\"AB\" color=\"blue\" />\n\t\t\t<AvatarButton\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t\tinitials=\"MM\"\n\t\t\t\tcolor=\"blue\"\n\t\t\t\tsize=\"md\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
+export declare const componentCss = "@import \"@guardian/stand/component/avatar.css\";\n\n    /* example setup of AvatarButton style using md size and blue color */\n    .stand-AvatarButton {\n    \tdisplay: var(--component-avatar-shared-display);\n    \talign-items: var(--component-avatar-shared-align-items);\n    \tjustify-content: var(--component-avatar-shared-justify-content);\n    \toverflow: var(--component-avatar-shared-overflow);\n    \tflex-shrink: var(--component-avatar-shared-flex-shrink);\n    \tborder-radius: var(--component-avatar-shared-border-radius);\n    \tbackground-color: var(--component-avatar-shared-color-blue-background);\n    \twidth: var(--component-avatar-md-size);\n    \theight: var(--component-avatar-md-size);\n    \tborder: var(--component-avatar-shared-color-blue-border);\n    \tcolor: var(--component-avatar-shared-color-blue-text);\n    \tfont: var(--component-avatar-md-typography-font);\n    \tletter-spacing: var(--component-avatar-md-typography-letter-spacing);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-avatar-md-typography-font-width);\n\n\t\tborder:\t var(--component-avatar-shared-button-border);\n\t\tpadding: var(--component-avatar-shared-button-padding);\n\t\tcursor: var(--component-avatar-shared-button-cursor);\n    }\n\n    /* example setup for AvatarButton image */\n    .stand-AvatarButton > img {\n    \twidth: 100%;\n    \theight: 100%;\n    \tobject-fit: cover;\n    }";
+export declare const componentHtml = "<div class=\"container\">\n\t<button href=\"#\" class=\"stand-AvatarButton\">AB</button>\n\t<button href=\"#\" class=\"stand-AvatarButton\">\n\t\t<img\n\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\talt=\"Mahesh Makani\"\n\t\t/>\n\t</button>\n</div>";
+export declare const componentJs = "\n\t// for ts/js\n\timport { componentAvatar } from \"@guardian/stand\";\n\n\tconst style = `\n\tdisplay: ${componentAvatar.shared.display};\n\talign-items: ${componentAvatar.shared[\"align-items\"]};\n\tjustify-content: ${componentAvatar.shared[\"justify-content\"]};\n\toverflow: ${componentAvatar.shared.overflow};\n\tflex-shrink: ${componentAvatar.shared[\"flex-shrink\"]};\n\tborder-radius: ${componentAvatar.shared[\"border-radius\"]};\n\tbackground-color: ${componentAvatar.shared.color.blue.background};\n\twidth: ${componentAvatar.md.size};\n\theight: ${componentAvatar.md.size};\n\tborder: ${componentAvatar.shared.color.blue.border};\n\tcolor: ${componentAvatar.shared.color.blue.text};\n\tfont: ${componentAvatar.md.typography.font};\n\tletter-spacing: ${componentAvatar.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth' ${componentAvatar.md.typography.fontWidth};\n\n\tbackground: ${componentAvatar.shared.button.background};\n\tborder: ${componentAvatar.shared.button.border};\n\tpadding: ${componentAvatar.shared.button.padding};\n\tcursor: ${componentAvatar.shared.button.cursor};\n\t`;\n\n\tconst imgStyle = `\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<button style=\"${style}\">AB</button>\n\t\t<button style=\"${style}\">\n\t\t\t<img\n\t\t\t\tstyle=\"${imgStyle}\"\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t/>\n\t\t</button>\n\t</div>\n`;\n";

package/dist/types/components/avatar-button/styles.d.ts

@@ -0,0 +1,6 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { AvatarTheme, PartialAvatarTheme } from '../avatar/styles';
+export type AvatarButtonTheme = AvatarTheme;
+export type PartialAvatarButtonTheme = PartialAvatarTheme;
+export declare const defaultAvatarButtonTheme: AvatarButtonTheme;
+export declare const avatarButtonStyles: (theme: AvatarButtonTheme) => SerializedStyles;

package/dist/types/components/avatar-button/types.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonProps as RACButtonProps } from 'react-aria-components';
+import type { AvatarProps } from '../avatar/types';
+export type AvatarButtonProps = AvatarProps & Omit<RACButtonProps, 'children'>;

package/dist/types/components/avatar-link/AvatarLink.d.ts

@@ -0,0 +1,2 @@
+import { type AvatarLinkProps } from './types';
+export declare function AvatarLink(props: AvatarLinkProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const componentName = "AvatarLink";
+export declare const componentTsx = "import { AvatarLink } from '@guardian/stand/AvatarLink';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<AvatarLink initials=\"AB\" color=\"blue\" />\n\t\t\t<AvatarLink\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t\tinitials=\"MM\"\n\t\t\t\tcolor=\"blue\"\n\t\t\t\tsize=\"md\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
+export declare const componentCss = "@import \"@guardian/stand/component/avatar.css\";\n\n    /* example setup of AvatarLink style using md size and blue color */\n    .stand-AvatarLink {\n    \tdisplay: var(--component-avatar-shared-display);\n    \talign-items: var(--component-avatar-shared-align-items);\n    \tjustify-content: var(--component-avatar-shared-justify-content);\n    \toverflow: var(--component-avatar-shared-overflow);\n    \tflex-shrink: var(--component-avatar-shared-flex-shrink);\n    \tborder-radius: var(--component-avatar-shared-border-radius);\n    \tbackground-color: var(--component-avatar-shared-color-blue-background);\n    \twidth: var(--component-avatar-md-size);\n    \theight: var(--component-avatar-md-size);\n    \tborder: var(--component-avatar-shared-color-blue-border);\n    \tcolor: var(--component-avatar-shared-color-blue-text);\n    \tfont: var(--component-avatar-md-typography-font);\n    \tletter-spacing: var(--component-avatar-md-typography-letter-spacing);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-avatar-md-typography-font-width);\n\n\t\ttext-decoration: var(--component-avatar-shared-link-text-decoration);\n    }\n\n    /* example setup for AvatarLink image */\n    .stand-AvatarLink > img {\n    \twidth: 100%;\n    \theight: 100%;\n    \tobject-fit: cover;\n    }";
+export declare const componentHtml = "<div class=\"container\">\n\t<a href=\"#\" class=\"stand-AvatarLink\">AB</a>\n\t<a href=\"#\" class=\"stand-AvatarLink\">\n\t\t<img\n\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\talt=\"Mahesh Makani\"\n\t\t/>\n\t</a>\n</div>";
+export declare const componentJs = "\n\t// for ts/js\n\timport { componentAvatar } from \"@guardian/stand\";\n\n\tconst style = `\n\tdisplay: ${componentAvatar.shared.display};\n\talign-items: ${componentAvatar.shared[\"align-items\"]};\n\tjustify-content: ${componentAvatar.shared[\"justify-content\"]};\n\toverflow: ${componentAvatar.shared.overflow};\n\tflex-shrink: ${componentAvatar.shared[\"flex-shrink\"]};\n\tborder-radius: ${componentAvatar.shared[\"border-radius\"]};\n\tbackground-color: ${componentAvatar.shared.color.blue.background};\n\twidth: ${componentAvatar.md.size};\n\theight: ${componentAvatar.md.size};\n\tborder: ${componentAvatar.shared.color.blue.border};\n\tcolor: ${componentAvatar.shared.color.blue.text};\n\tfont: ${componentAvatar.md.typography.font};\n\tletter-spacing: ${componentAvatar.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth' ${componentAvatar.md.typography.fontWidth};\n\n\ttext-decoration: ${componentAvatar.shared.link.textDecoration};\n\t`;\n\n\tconst imgStyle = `\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<a href=\"#\" style=\"${style}\">AB</a>\n\t\t<a href=\"#\" style=\"${style}\">\n\t\t\t<img\n\t\t\t\tstyle=\"${imgStyle}\"\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t/>\n\t\t</a>\n\t</div>\n`;\n";

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

@@ -0,0 +1,6 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { AvatarTheme, PartialAvatarTheme } from '../avatar/styles';
+export type AvatarLinkTheme = AvatarTheme;
+export type PartialAvatarLinkTheme = PartialAvatarTheme;
+export declare const defaultAvatarLinkTheme: AvatarTheme;
+export declare const avatarLinkStyles: (theme: AvatarLinkTheme) => SerializedStyles;

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

@@ -0,0 +1,3 @@
+import type { LinkProps as RACLinkProps } from 'react-aria-components';
+import type { AvatarProps } from '../avatar/types';
+export type AvatarLinkProps = AvatarProps & RACLinkProps;

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

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

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

@@ -0,0 +1,5 @@
+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/inline-message/styles.d.ts

@@ -0,0 +1,8 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentInlineMessage } from '../../styleD/build/typescript/component/inlineMessage';
+import type { DeepPartial, Prettify } from '../../util/types';
+import type { InlineMessageProps } from './types';
+export type InlineMessageTheme = Prettify<ComponentInlineMessage>;
+export type PartialInlineMessageTheme = DeepPartial<InlineMessageTheme>;
+export declare const defaultInlineMessageTheme: InlineMessageTheme;
+export declare const inlineMessageStyles: (theme: InlineMessageTheme, { level }: Required<Pick<InlineMessageProps, 'level'>>) => SerializedStyles;

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

@@ -0,0 +1,21 @@
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { IconProps } from '../icon/types';
+import type { InlineMessageTheme } from './styles';
+export interface InlineMessageProps extends DefaultPropsWithChildren<InlineMessageTheme> {
+    /**
+     * The severity level of the message, which determines its styling.
+     * This is a required prop.
+     * Levels: 'error', 'success', 'information'
+     */
+    level: keyof Omit<InlineMessageTheme, 'shared'>;
+    /**
+     * Optional prop to hide the default icon associated with the message level.
+     */
+    hideIcon?: boolean;
+    /**
+     * Override the default icon for the message by providing a custom icon, for example when not using material symbols.
+     * This can be either a string (for material symbols) or an SVG element.
+     * Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
+     */
+    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+}

package/dist/types/components/select/Select.d.ts

@@ -0,0 +1,3 @@
+import type { OptionProps, SelectProps } from './types';
+export declare function Option({ children, theme }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Select({ children, label, contextualHelpText, theme, cssOverrides, className, isInvalid, errorMessage, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;