@guardian/stand 0.0.37 → 0.0.39

package/dist/types/styleD/build/typescript/semantic/typography.d.ts

@@ -2,377 +2,377 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const semanticTypography: {
-    'title-sm': {
+    titleSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'title-md': {
+    titleMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'title-lg': {
+    titleLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'title-xl': {
+    titleXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-xs': {
+    headingXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-sm': {
+    headingSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-md': {
+    headingMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-lg': {
+    headingLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-xl': {
+    headingXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-2xl': {
+    heading2Xl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-compact-xs': {
+    headingCompactXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-compact-sm': {
+    headingCompactSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-compact-md': {
+    headingCompactMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-compact-lg': {
+    headingCompactLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-compact-xl': {
+    headingCompactXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'heading-compact-2xl': {
+    headingCompact2Xl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-xs': {
+    bodyXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-sm': {
+    bodySm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-md': {
+    bodyMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-lg': {
+    bodyLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-xl': {
+    bodyXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-bold-xs': {
+    bodyBoldXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-bold-sm': {
+    bodyBoldSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-bold-md': {
+    bodyBoldMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-bold-lg': {
+    bodyBoldLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-bold-xl': {
+    bodyBoldXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-xs': {
+    bodyItalicXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-sm': {
+    bodyItalicSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-md': {
+    bodyItalicMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-lg': {
+    bodyItalicLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-xl': {
+    bodyItalicXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-bold-xs': {
+    bodyItalicBoldXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-bold-sm': {
+    bodyItalicBoldSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-bold-md': {
+    bodyItalicBoldMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-bold-lg': {
+    bodyItalicBoldLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-italic-bold-xl': {
+    bodyItalicBoldXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-xs': {
+    bodyCompactXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-sm': {
+    bodyCompactSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-md': {
+    bodyCompactMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-lg': {
+    bodyCompactLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-xl': {
+    bodyCompactXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-bold-xs': {
+    bodyCompactBoldXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-bold-sm': {
+    bodyCompactBoldSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-bold-md': {
+    bodyCompactBoldMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-bold-lg': {
+    bodyCompactBoldLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-bold-xl': {
+    bodyCompactBoldXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-xs': {
+    bodyCompactItalicXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-sm': {
+    bodyCompactItalicSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-md': {
+    bodyCompactItalicMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-lg': {
+    bodyCompactItalicLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-xl': {
+    bodyCompactItalicXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-bold-xs': {
+    bodyCompactItalicBoldXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-bold-sm': {
+    bodyCompactItalicBoldSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-bold-md': {
+    bodyCompactItalicBoldMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-bold-lg': {
+    bodyCompactItalicBoldLg: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'body-compact-italic-bold-xl': {
+    bodyCompactItalicBoldXl: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'meta-md': {
+    metaMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'meta-compact-md': {
+    metaCompactMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'article-body-md': {
+    articleBodyMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'article-body-bold-md': {
+    articleBodyBoldMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'article-body-italic-md': {
+    articleBodyItalicMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'article-body-bold-italic-md': {
+    articleBodyBoldItalicMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'interactive-xs': {
+    interactiveXs: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'interactive-sm': {
+    interactiveSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'interactive-md': {
+    interactiveMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'label-form-sm': {
+    labelFormSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'label-form-md': {
+    labelFormMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'label-form-inline-sm': {
+    labelFormInlineSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'label-form-inline-md': {
+    labelFormInlineMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'label-form-compact-sm': {
+    labelFormCompactSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'label-form-compact-md': {
+    labelFormCompactMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'label-form-inline-compact-sm': {
+    labelFormInlineCompactSm: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'label-form-inline-compact-md': {
+    labelFormInlineCompactMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'help-text-form-md': {
+    helpTextFormMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;
     };
-    'help-text-form-compact-md': {
+    helpTextFormCompactMd: {
         font: string;
         letterSpacing: string;
         fontWidth: number;

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

@@ -1,5 +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 componentTsx = "import { TemplateComponent } from '@guardian/stand/TemplateComponent';\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";