@guardian/stand 0.0.38 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },
@@ -12,151 +12,151 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./avatar": {
-      "types": "./dist/types/avatar.d.ts",
-      "import": "./dist/avatar.js",
-      "require": "./dist/avatar.cjs"
+    "./Avatar": {
+      "types": "./dist/types/Avatar.d.ts",
+      "import": "./dist/Avatar.js",
+      "require": "./dist/Avatar.cjs"
     },
     "./AvatarLink": {
-      "types": "./dist/types/avatarLink.d.ts",
-      "import": "./dist/avatarLink.js",
-      "require": "./dist/avatarLink.cjs"
+      "types": "./dist/types/AvatarLink.d.ts",
+      "import": "./dist/AvatarLink.js",
+      "require": "./dist/AvatarLink.cjs"
     },
     "./AvatarButton": {
-      "types": "./dist/types/avatarButton.d.ts",
-      "import": "./dist/avatarButton.js",
-      "require": "./dist/avatarButton.cjs"
-    },
-    "./button": {
-      "types": "./dist/types/button.d.ts",
-      "import": "./dist/button.js",
-      "require": "./dist/button.cjs"
-    },
-    "./link-button": {
-      "types": "./dist/types/link-button.d.ts",
-      "import": "./dist/link-button.js",
-      "require": "./dist/link-button.cjs"
-    },
-    "./icon-button": {
-      "types": "./dist/types/icon-button.d.ts",
-      "import": "./dist/icon-button.js",
-      "require": "./dist/icon-button.cjs"
-    },
-    "./icon-link-button": {
-      "types": "./dist/types/icon-link-button.d.ts",
-      "import": "./dist/icon-link-button.js",
-      "require": "./dist/icon-link-button.cjs"
-    },
-    "./typography": {
-      "types": "./dist/types/typography.d.ts",
-      "import": "./dist/typography.js",
-      "require": "./dist/typography.cjs"
-    },
-    "./icon": {
-      "types": "./dist/types/icon.d.ts",
-      "import": "./dist/icon.js",
-      "require": "./dist/icon.cjs"
-    },
-    "./favicon": {
-      "types": "./dist/types/favicon.d.ts",
-      "import": "./dist/favicon.js",
-      "require": "./dist/favicon.cjs"
-    },
-    "./menu": {
-      "types": "./dist/types/menu.d.ts",
-      "import": "./dist/menu.js",
-      "require": "./dist/menu.cjs"
+      "types": "./dist/types/AvatarButton.d.ts",
+      "import": "./dist/AvatarButton.js",
+      "require": "./dist/AvatarButton.cjs"
+    },
+    "./Button": {
+      "types": "./dist/types/Button.d.ts",
+      "import": "./dist/Button.js",
+      "require": "./dist/Button.cjs"
+    },
+    "./LinkButton": {
+      "types": "./dist/types/LinkButton.d.ts",
+      "import": "./dist/LinkButton.js",
+      "require": "./dist/LinkButton.cjs"
+    },
+    "./IconButton": {
+      "types": "./dist/types/IconButton.d.ts",
+      "import": "./dist/IconButton.js",
+      "require": "./dist/IconButton.cjs"
+    },
+    "./IconLinkButton": {
+      "types": "./dist/types/IconLinkButton.d.ts",
+      "import": "./dist/IconLinkButton.js",
+      "require": "./dist/IconLinkButton.cjs"
+    },
+    "./Typography": {
+      "types": "./dist/types/Typography.d.ts",
+      "import": "./dist/Typography.js",
+      "require": "./dist/Typography.cjs"
+    },
+    "./Icon": {
+      "types": "./dist/types/Icon.d.ts",
+      "import": "./dist/Icon.js",
+      "require": "./dist/Icon.cjs"
+    },
+    "./Favicon": {
+      "types": "./dist/types/Favicon.d.ts",
+      "import": "./dist/Favicon.js",
+      "require": "./dist/Favicon.cjs"
+    },
+    "./Menu": {
+      "types": "./dist/types/Menu.d.ts",
+      "import": "./dist/Menu.js",
+      "require": "./dist/Menu.cjs"
     },
     "./TopBar": {
       "types": "./dist/types/TopBar.d.ts",
       "import": "./dist/TopBar.js",
       "require": "./dist/TopBar.cjs"
     },
-    "./form": {
-      "types": "./dist/types/form.d.ts",
-      "import": "./dist/form.js",
-      "require": "./dist/form.cjs"
-    },
-    "./inline-message": {
-      "types": "./dist/types/inline-message.d.ts",
-      "import": "./dist/inline-message.js",
-      "require": "./dist/inline-message.cjs"
-    },
-    "./select": {
-      "types": "./dist/types/select.d.ts",
-      "import": "./dist/select.js",
-      "require": "./dist/select.cjs"
-    },
-    "./text-input": {
-      "types": "./dist/types/text-input.d.ts",
-      "import": "./dist/text-input.js",
-      "require": "./dist/text-input.cjs"
-    },
-    "./radio-group": {
-      "types": "./dist/types/radio-group.d.ts",
-      "import": "./dist/radio-group.js",
-      "require": "./dist/radio-group.cjs"
-    },
-    "./checkbox": {
-      "types": "./dist/types/checkbox.d.ts",
-      "import": "./dist/checkbox.js",
-      "require": "./dist/checkbox.cjs"
-    },
-    "./text-area": {
-      "types": "./dist/types/text-area.d.ts",
-      "import": "./dist/text-area.js",
-      "require": "./dist/text-area.cjs"
-    },
-    "./alert-banner": {
-      "types": "./dist/types/alert-banner.d.ts",
-      "import": "./dist/alert-banner.js",
-      "require": "./dist/alert-banner.cjs"
-    },
-    "./date-picker": {
-      "types": "./dist/types/date-picker.d.ts",
-      "import": "./dist/date-picker.js",
-      "require": "./dist/date-picker.cjs"
-    },
-    "./grid": {
-      "types": "./dist/types/grid.d.ts",
-      "import": "./dist/grid.js",
-      "require": "./dist/grid.cjs"
-    },
-    "./byline": {
-      "types": "./dist/types/byline.d.ts",
-      "import": "./dist/byline.js",
-      "require": "./dist/byline.cjs"
-    },
-    "./tag-picker": {
-      "types": "./dist/types/tag-picker.d.ts",
-      "import": "./dist/tag-picker.js",
-      "require": "./dist/tag-picker.cjs"
-    },
-    "./user-menu": {
-      "types": "./dist/types/user-menu.d.ts",
-      "import": "./dist/user-menu.js",
-      "require": "./dist/user-menu.cjs"
+    "./Form": {
+      "types": "./dist/types/Form.d.ts",
+      "import": "./dist/Form.js",
+      "require": "./dist/Form.cjs"
+    },
+    "./InlineMessage": {
+      "types": "./dist/types/InlineMessage.d.ts",
+      "import": "./dist/InlineMessage.js",
+      "require": "./dist/InlineMessage.cjs"
+    },
+    "./Select": {
+      "types": "./dist/types/Select.d.ts",
+      "import": "./dist/Select.js",
+      "require": "./dist/Select.cjs"
+    },
+    "./TextInput": {
+      "types": "./dist/types/TextInput.d.ts",
+      "import": "./dist/TextInput.js",
+      "require": "./dist/TextInput.cjs"
+    },
+    "./RadioGroup": {
+      "types": "./dist/types/RadioGroup.d.ts",
+      "import": "./dist/RadioGroup.js",
+      "require": "./dist/RadioGroup.cjs"
+    },
+    "./Checkbox": {
+      "types": "./dist/types/Checkbox.d.ts",
+      "import": "./dist/Checkbox.js",
+      "require": "./dist/Checkbox.cjs"
+    },
+    "./TextArea": {
+      "types": "./dist/types/TextArea.d.ts",
+      "import": "./dist/TextArea.js",
+      "require": "./dist/TextArea.cjs"
+    },
+    "./AlertBanner": {
+      "types": "./dist/types/AlertBanner.d.ts",
+      "import": "./dist/AlertBanner.js",
+      "require": "./dist/AlertBanner.cjs"
+    },
+    "./DatePicker": {
+      "types": "./dist/types/DatePicker.d.ts",
+      "import": "./dist/DatePicker.js",
+      "require": "./dist/DatePicker.cjs"
+    },
+    "./Grid": {
+      "types": "./dist/types/Grid.d.ts",
+      "import": "./dist/Grid.js",
+      "require": "./dist/Grid.cjs"
+    },
+    "./Byline": {
+      "types": "./dist/types/Byline.d.ts",
+      "import": "./dist/Byline.js",
+      "require": "./dist/Byline.cjs"
+    },
+    "./TagPicker": {
+      "types": "./dist/types/TagPicker.d.ts",
+      "import": "./dist/TagPicker.js",
+      "require": "./dist/TagPicker.cjs"
+    },
+    "./UserMenu": {
+      "types": "./dist/types/UserMenu.d.ts",
+      "import": "./dist/UserMenu.js",
+      "require": "./dist/UserMenu.cjs"
+    },
+    "./IntendedAudienceSignifier": {
+      "types": "./dist/types/IntendedAudienceSignifier.d.ts",
+      "import": "./dist/IntendedAudienceSignifier.js",
+      "require": "./dist/IntendedAudienceSignifier.cjs"
+    },
+    "./Link": {
+      "types": "./dist/types/Link.d.ts",
+      "import": "./dist/Link.js",
+      "require": "./dist/Link.cjs"
+    },
+    "./Layout": {
+      "types": "./dist/types/Layout.d.ts",
+      "import": "./dist/Layout.js",
+      "require": "./dist/Layout.cjs"
     },
     "./utils": {
       "types": "./dist/types/utils.d.ts",
       "import": "./dist/utils.js",
       "require": "./dist/utils.cjs"
     },
-    "./intendedAudienceSignifier": {
-      "types": "./dist/types/intended-audience-signifier.d.ts",
-      "import": "./dist/intended-audience-signifier.js",
-      "require": "./dist/intended-audience-signifier.cjs"
-    },
-    "./link": {
-      "types": "./dist/types/link.d.ts",
-      "import": "./dist/link.js",
-      "require": "./dist/link.cjs"
-    },
-    "./layout": {
-      "types": "./dist/types/layout.d.ts",
-      "import": "./dist/layout.js",
-      "require": "./dist/layout.cjs"
-    },
     "./fonts/OpenSans.css": "./dist/fonts/OpenSans.css",
     "./fonts/MaterialSymbolsOutlined.css": "./dist/fonts/MaterialSymbolsOutlined.css",
     "./fonts/MaterialSymbolsRound.css": "./dist/fonts/MaterialSymbolsRound.css",
@@ -183,7 +183,7 @@
     "./component/icon.css": "./dist/styleD/build/css/component/icon.css",
     "./component/favicon.css": "./dist/styleD/build/css/component/favicon.css",
     "./component/menu.css": "./dist/styleD/build/css/component/menu.css",
-    "./component/TopBar.css": "./dist/styleD/build/css/component/TopBar.css",
+    "./component/topBar.css": "./dist/styleD/build/css/component/topBar.css",
     "./component/form.css": "./dist/styleD/build/css/component/form.css",
     "./component/inlineMessage.css": "./dist/styleD/build/css/component/inlineMessage.css",
     "./component/select.css": "./dist/styleD/build/css/component/select.css",
@@ -203,92 +203,92 @@
   "types": "./dist/types/index.d.ts",
   "typesVersions": {
     "*": {
-      "avatar": [
-        "./dist/types/avatar.d.ts"
+      "Avatar": [
+        "./dist/types/Avatar.d.ts"
       ],
       "AvatarButton": [
-        "./dist/types/avatarButton.d.ts"
+        "./dist/types/AvatarButton.d.ts"
       ],
       "AvatarLink": [
-        "./dist/types/avatarLink.d.ts"
+        "./dist/types/AvatarLink.d.ts"
       ],
-      "button": [
-        "./dist/types/button.d.ts"
+      "Button": [
+        "./dist/types/Button.d.ts"
       ],
-      "link-button": [
-        "./dist/types/link-button.d.ts"
+      "LinkButton": [
+        "./dist/types/LinkButton.d.ts"
       ],
-      "icon-button": [
-        "./dist/types/icon-button.d.ts"
+      "IconButton": [
+        "./dist/types/IconButton.d.ts"
       ],
-      "icon-link-button": [
-        "./dist/types/icon-link-button.d.ts"
+      "IconLinkButton": [
+        "./dist/types/IconLinkButton.d.ts"
       ],
-      "typography": [
-        "./dist/types/typography.d.ts"
+      "Typography": [
+        "./dist/types/Typography.d.ts"
       ],
-      "icon": [
-        "./dist/types/icon.d.ts"
+      "Icon": [
+        "./dist/types/Icon.d.ts"
       ],
-      "favicon": [
-        "./dist/types/favicon.d.ts"
+      "Favicon": [
+        "./dist/types/Favicon.d.ts"
       ],
       "TopBar": [
         "./dist/types/TopBar.d.ts"
       ],
-      "byline": [
-        "./dist/types/byline.d.ts"
+      "Byline": [
+        "./dist/types/Byline.d.ts"
       ],
-      "tag-picker": [
-        "./dist/types/tag-picker.d.ts"
+      "TagPicker": [
+        "./dist/types/TagPicker.d.ts"
       ],
-      "user-menu": [
-        "./dist/types/user-menu.d.ts"
+      "UserMenu": [
+        "./dist/types/UserMenu.d.ts"
       ],
       "utils": [
         "./dist/types/utils.d.ts"
       ],
-      "menu": [
-        "./dist/types/menu.d.ts"
+      "Menu": [
+        "./dist/types/Menu.d.ts"
       ],
-      "form": [
-        "./dist/types/form.d.ts"
+      "Form": [
+        "./dist/types/Form.d.ts"
       ],
-      "inline-message": [
-        "./dist/types/inline-message.d.ts"
+      "InlineMessage": [
+        "./dist/types/InlineMessage.d.ts"
       ],
-      "select": [
-        "./dist/types/select.d.ts"
+      "Select": [
+        "./dist/types/Select.d.ts"
       ],
-      "text-input": [
-        "./dist/types/text-input.d.ts"
+      "TextInput": [
+        "./dist/types/TextInput.d.ts"
       ],
-      "radio-group": [
-        "./dist/types/radio-group.d.ts"
+      "RadioGroup": [
+        "./dist/types/RadioGroup.d.ts"
       ],
-      "checkbox": [
-        "./dist/types/checkbox.d.ts"
+      "Checkbox": [
+        "./dist/types/Checkbox.d.ts"
       ],
-      "text-area": [
-        "./dist/types/text-area.d.ts"
+      "TextArea": [
+        "./dist/types/TextArea.d.ts"
       ],
-      "alert-banner": [
-        "./dist/types/alert-banner.d.ts"
+      "AlertBanner": [
+        "./dist/types/AlertBanner.d.ts"
       ],
-      "date-picker": [
-        "./dist/types/date-picker.d.ts"
+      "DatePicker": [
+        "./dist/types/DatePicker.d.ts"
       ],
-      "intendedAudienceSignifier": [
-        "./dist/types/intended-audience-signifier.d.ts"
+      "IntendedAudienceSignifier": [
+        "./dist/types/IntendedAudienceSignifier.d.ts"
       ],
-      "link": [
-        "./dist/types/link.d.ts"
+      "Link": [
+        "./dist/types/Link.d.ts"
       ],
-      "grid": [
-        "./dist/types/grid.d.ts"
+      "Grid": [
+        "./dist/types/Grid.d.ts"
       ],
-      "layout": [
-        "./dist/types/layout.d.ts"
+      "Layout": [
+        "./dist/types/Layout.d.ts"
       ]
     }
   },

package/dist/avatarButton.cjs

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

package/dist/avatarButton.js

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

package/dist/avatarLink.cjs

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

package/dist/avatarLink.js

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

package/dist/checkbox.js

@@ -1,3 +0,0 @@
-export { Checkbox } from './components/checkbox/Checkbox.js';
-export { CheckboxGroup } from './components/checkbox/CheckboxGroup.js';
-export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';

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

@@ -1,37 +0,0 @@
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { mergeDeep } from '../../util/mergeDeep.js';
-import { DoubleChevronRightSvg, globeIcon, auFlag, usFlag, ukFlag } from './FlagIcons.js';
-import { defaultIntendedAudienceSignifierTheme, intendedAudienceSignifierStyles, intendedAudienceSignifierIconStyles, intendedAudienceSignifierChevronIconStyles } from './styles.js';
-
-const sourceIcons = {
-  UK: ukFlag,
-  US: usFlag,
-  AUS: auFlag,
-  Global: globeIcon
-};
-const getSourceIconElement = (sourceTag, audience) => {
-  if (audience === "Global") {
-    return globeIcon;
-  }
-  return sourceIcons[sourceTag];
-};
-const getIntendedAudienceIconElement = (sourceTag, audience) => {
-  if (audience === "Domestic for Domestic") {
-    return getSourceIconElement(sourceTag, audience);
-  }
-  if (audience === "Global" || audience === "Domestic For Global") {
-    return globeIcon;
-  }
-  return sourceIcons[audience];
-};
-function IntendedAudienceSignifier({ source, intendedAudience, theme = {}, cssOverrides, className, ...props }) {
-  const mergedTheme = mergeDeep(defaultIntendedAudienceSignifierTheme, theme);
-  if (intendedAudience === "Don't know") {
-    return jsx("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], children: jsx("span", { children: "Don\u2018t know" }) });
-  }
-  const iconStyles = intendedAudienceSignifierIconStyles(mergedTheme);
-  const chevronIconStyles = intendedAudienceSignifierChevronIconStyles(mergedTheme);
-  return jsxs("div", { ...props, className, css: [intendedAudienceSignifierStyles(mergedTheme), cssOverrides], children: [jsx("div", { css: iconStyles, children: getSourceIconElement(source, intendedAudience) }), jsx("div", { css: chevronIconStyles, children: DoubleChevronRightSvg }), jsx("div", { css: iconStyles, children: getIntendedAudienceIconElement(source, intendedAudience) })] });
-}
-
-export { IntendedAudienceSignifier };

package/dist/icon-button.cjs

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

package/dist/icon-button.js

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

package/dist/icon-link-button.cjs

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

package/dist/icon-link-button.js

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

package/dist/link-button.cjs

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

package/dist/link-button.js

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

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

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

package/dist/tag-picker.js

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

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

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

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

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

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

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