@guardian/stand 0.0.21 → 0.0.23

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

@@ -0,0 +1,83 @@
+const componentRadioGroup = {
+  shared: {
+    marginTop: "0.5rem",
+    marginBottom: "0.5rem",
+    display: "flex",
+    flexDirection: "column",
+    radio: {
+      color: "#000000",
+      disabled: {
+        color: "#999999"
+      },
+      display: "flex",
+      alignItems: "center",
+      gap: "0.5rem"
+    },
+    indicator: {
+      position: "relative",
+      after: {
+        position: "absolute",
+        borderRadius: "inherit",
+        inset: "0px",
+        scale: "0"
+      },
+      borderRadius: "50%",
+      border: "0.0625rem solid #545454",
+      focused: {
+        outline: "0.125rem solid #0072a9",
+        outlineOffset: "0.125rem"
+      },
+      invalid: {
+        border: "0.0625rem solid #b42a19",
+        after: {
+          backgroundColor: "#b42a19"
+        }
+      },
+      disabled: {
+        border: "0.0625rem solid #dcdcdc"
+      },
+      selected: {
+        after: {
+          backgroundColor: "#005d8b",
+          scale: "0.6"
+        },
+        border: "0.125rem solid #0072a9",
+        invalid: {
+          border: "0.125rem solid #b42a19"
+        },
+        disabled: {
+          border: "0.125rem solid #dcdcdc",
+          after: {
+            backgroundColor: "#dcdcdc"
+          }
+        }
+      }
+    }
+  },
+  sm: {
+    gap: "1rem",
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    },
+    indicator: {
+      width: "1.25rem",
+      height: "1.25rem"
+    }
+  },
+  md: {
+    gap: "1.25rem",
+    typography: {
+      font: "normal 460 1rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    },
+    indicator: {
+      width: "1.5rem",
+      height: "1.5rem"
+    }
+  }
+};
+
+export { componentRadioGroup };

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

@@ -10,6 +10,7 @@ const semanticColors = {
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
+    "success-inverse": "#cde4c9",
     information: "#00344e",
     disabled: "#999999",
     green: "#24491d",
@@ -69,7 +70,8 @@ const semanticColors = {
     "information-weak": "#e8f0fb",
     "error-weak": "#f5c6c0",
     "error-strong": "#b42a19",
-    "success-weak": "#edf5ec"
+    "success-weak": "#cde4c9",
+    "success-strong": "#326528"
   }
 };
 

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

@@ -8,6 +8,7 @@ const semanticColors = {
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
+    "success-inverse": "#cde4c9",
     information: "#00344e",
     disabled: "#999999",
     green: "#24491d",
@@ -67,7 +68,8 @@ const semanticColors = {
     "information-weak": "#e8f0fb",
     "error-weak": "#f5c6c0",
     "error-strong": "#b42a19",
-    "success-weak": "#edf5ec"
+    "success-weak": "#cde4c9",
+    "success-strong": "#326528"
   }
 };
 

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

@@ -2,6 +2,7 @@
 
 const semanticSizing = {
   height: {
+    xxxs: "1.125rem",
     xxs: "1.25rem",
     xs: "1.5rem",
     sm: "2rem",

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

@@ -1,5 +1,6 @@
 const semanticSizing = {
   height: {
+    xxxs: "1.125rem",
     xxs: "1.25rem",
     xs: "1.5rem",
     sm: "2rem",

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

@@ -81,6 +81,11 @@ const semanticTypography = {
     letterSpacing: "-0.03125rem",
     fontWidth: 88
   },
+  "body-xs": {
+    font: "normal 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
   "body-sm": {
     font: "normal 460 0.875rem/1.3 Open Sans",
     letterSpacing: "0rem",
@@ -101,6 +106,36 @@ const semanticTypography = {
     letterSpacing: "0rem",
     fontWidth: 95
   },
+  "body-bold-xs": {
+    font: "normal 700 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-bold-sm": {
+    font: "normal 700 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-bold-md": {
+    font: "normal 700 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-bold-lg": {
+    font: "normal 700 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-bold-xl": {
+    font: "normal 700 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-xs": {
+    font: "italic 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
   "body-italic-sm": {
     font: "italic 460 0.875rem/1.3 Open Sans",
     letterSpacing: "0rem",
@@ -121,6 +156,36 @@ const semanticTypography = {
     letterSpacing: "0rem",
     fontWidth: 95
   },
+  "body-italic-bold-xs": {
+    font: "italic 700 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-bold-sm": {
+    font: "italic 700 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-bold-md": {
+    font: "italic 700 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-bold-lg": {
+    font: "italic 700 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-bold-xl": {
+    font: "italic 700 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-compact-xs": {
+    font: "normal 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
   "body-compact-sm": {
     font: "normal 460 0.875rem/1.3 Open Sans",
     letterSpacing: "0rem",
@@ -141,6 +206,36 @@ const semanticTypography = {
     letterSpacing: "0rem",
     fontWidth: 88
   },
+  "body-compact-bold-xs": {
+    font: "normal 700 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-bold-sm": {
+    font: "normal 700 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-bold-md": {
+    font: "normal 700 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-bold-lg": {
+    font: "normal 700 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-bold-xl": {
+    font: "normal 700 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-xs": {
+    font: "italic 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
   "body-compact-italic-sm": {
     font: "italic 460 0.875rem/1.3 Open Sans",
     letterSpacing: "0rem",
@@ -161,6 +256,31 @@ const semanticTypography = {
     letterSpacing: "0rem",
     fontWidth: 88
   },
+  "body-compact-italic-bold-xs": {
+    font: "italic 700 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-bold-sm": {
+    font: "italic 700 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-bold-md": {
+    font: "italic 700 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-bold-lg": {
+    font: "italic 700 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-bold-xl": {
+    font: "italic 700 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
   "meta-md": {
     font: "normal 460 0.75rem/1.3 Open Sans",
     letterSpacing: "0rem",

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

@@ -79,6 +79,11 @@ const semanticTypography = {
     letterSpacing: "-0.03125rem",
     fontWidth: 88
   },
+  "body-xs": {
+    font: "normal 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
   "body-sm": {
     font: "normal 460 0.875rem/1.3 Open Sans",
     letterSpacing: "0rem",
@@ -99,6 +104,36 @@ const semanticTypography = {
     letterSpacing: "0rem",
     fontWidth: 95
   },
+  "body-bold-xs": {
+    font: "normal 700 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-bold-sm": {
+    font: "normal 700 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-bold-md": {
+    font: "normal 700 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-bold-lg": {
+    font: "normal 700 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-bold-xl": {
+    font: "normal 700 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-xs": {
+    font: "italic 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
   "body-italic-sm": {
     font: "italic 460 0.875rem/1.3 Open Sans",
     letterSpacing: "0rem",
@@ -119,6 +154,36 @@ const semanticTypography = {
     letterSpacing: "0rem",
     fontWidth: 95
   },
+  "body-italic-bold-xs": {
+    font: "italic 700 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-bold-sm": {
+    font: "italic 700 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-bold-md": {
+    font: "italic 700 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-bold-lg": {
+    font: "italic 700 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-italic-bold-xl": {
+    font: "italic 700 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "body-compact-xs": {
+    font: "normal 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
   "body-compact-sm": {
     font: "normal 460 0.875rem/1.3 Open Sans",
     letterSpacing: "0rem",
@@ -139,6 +204,36 @@ const semanticTypography = {
     letterSpacing: "0rem",
     fontWidth: 88
   },
+  "body-compact-bold-xs": {
+    font: "normal 700 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-bold-sm": {
+    font: "normal 700 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-bold-md": {
+    font: "normal 700 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-bold-lg": {
+    font: "normal 700 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-bold-xl": {
+    font: "normal 700 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-xs": {
+    font: "italic 460 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
   "body-compact-italic-sm": {
     font: "italic 460 0.875rem/1.3 Open Sans",
     letterSpacing: "0rem",
@@ -159,6 +254,31 @@ const semanticTypography = {
     letterSpacing: "0rem",
     fontWidth: 88
   },
+  "body-compact-italic-bold-xs": {
+    font: "italic 700 0.75rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-bold-sm": {
+    font: "italic 700 0.875rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-bold-md": {
+    font: "italic 700 1rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-bold-lg": {
+    font: "italic 700 1.125rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
+  "body-compact-italic-bold-xl": {
+    font: "italic 700 1.25rem/1.3 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 88
+  },
   "meta-md": {
     font: "normal 460 0.75rem/1.3 Open Sans",
     letterSpacing: "0rem",

package/dist/types/TopBar.d.ts

@@ -5,6 +5,7 @@
  * - `@emotion/react`
  * - `react`
  * - `react-dom`
+ * - `react-aria-components`
  * - `typescript`
  *
  * See the `peerDependencies` section of package.json for compatible versions.

package/dist/types/checkbox.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Checkbox and CheckboxGroup components entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/checkbox.css),
+ * you don't need to install these.
+ */
+export { Checkbox } from './components/checkbox/Checkbox';
+export { CheckboxGroup } from './components/checkbox/CheckboxGroup';
+export type { CheckboxProps, CheckboxGroupProps, } from './components/checkbox/types';
+export type { PartialCheckboxTheme as CheckboxTheme } from './components/checkbox/styles';
+export { componentCheckbox } from './styleD/build/typescript/component/checkbox';
+export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';

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

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

package/dist/types/components/checkbox/CheckboxGroup.d.ts

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

package/dist/types/components/checkbox/CheckboxGroupSandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "CheckboxGroup";
+export declare const componentTsx = "import { Checkbox, CheckboxGroup } from '@guardian/stand/checkbox';\n\nexport const Component = () => (\n\t<>\n\t\t<CheckboxGroup label=\"Notifications\" description=\"Choose what to receive.\">\n\t\t\t<Checkbox value=\"email\">Email</Checkbox>\n\t\t\t<Checkbox value=\"sms\">SMS</Checkbox>\n\t\t\t<Checkbox value=\"push\">Push notification</Checkbox>\n\t\t</CheckboxGroup>\n\n\t\t<CheckboxGroup\n\t\t\tlabel=\"Preferences\"\n\t\t\tsize=\"sm\"\n\t\t\tisInvalid\n\t\t\terror=\"Please select at least one option.\"\n\t\t>\n\t\t\t<Checkbox value=\"news\">News</Checkbox>\n\t\t\t<Checkbox value=\"offers\">Offers</Checkbox>\n\t\t</CheckboxGroup>\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the checkbox, form, inline message styles */\n@import '@guardian/stand/component/inlineMessage.css';\n@import '@guardian/stand/component/form.css';\n@import '@guardian/stand/component/checkbox.css';\n\n/* inline message styles - error */\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/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-form-input-container.sm {\n\tmax-width: var(--component-form-input-sm-container-max-width);\n}\n\n.stand-form-input-container.md {\n\tmax-width: var(--component-form-input-md-container-max-width);\n}\n\n.stand-form-input-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > label {\n\tcolor: var(--component-form-input-shared-label-disabled-color);\n}\n\n.stand-form-input-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n.stand-form-input-container[data-disabled] > span.description {\n\tcolor: var(--component-form-input-shared-description-disabled-color);\n}\n\n/* checkbox styles */\n\n.stand-checkbox {\n  display: var(--component-checkbox-input-shared-display);\n  position: var(--component-checkbox-input-shared-position);\n  align-items: var(--component-checkbox-input-shared-align-items);\n  gap: var(--component-checkbox-input-shared-gap);\n  cursor: var(--component-checkbox-input-shared-cursor);\n  color: var(--component-checkbox-input-shared-color);\n}\n\n.stand-checkbox.md {\n  font: var(--component-checkbox-input-md-typography-font);\n  letter-spacing: var(--component-checkbox-input-md-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n    var(--component-checkbox-input-md-typography-font-width);\n}\n\n.stand-checkbox.sm {\n  font: var(--component-checkbox-input-sm-typography-font);\n  letter-spacing: var(--component-checkbox-input-sm-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n\tvar(--component-checkbox-input-sm-typography-font-width);\n}\n\n.stand-checkbox > label {\n  cursor: var(--component-checkbox-input-shared-cursor);\n}\n\n.stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: var(--component-checkbox-input-shared-cursor);\n  border: var(--component-checkbox-input-shared-indicator-border);\n  border-radius: var(--component-checkbox-input-shared-indicator-border-radius);\n  accent-color: var(\n    --component-checkbox-input-shared-indicator-selected-background-color\n  );\n}\n\n.stand-checkbox.md > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-md-indicator-size);\n  height: var(--component-checkbox-input-md-indicator-size);\n}\n\n.stand-checkbox.sm > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-sm-indicator-size);\n  height: var(--component-checkbox-input-sm-indicator-size);\n}\n\n/* CheckboxGroup styles */\n\n.stand-checkbox-group {\n\tdisplay: var(--component-checkbox-group-shared-display);\n\tflex-direction: var(--component-checkbox-group-shared-flex-direction);\n}\n\n.stand-checkbox-group.sm {\n\tgap: var(--component-checkbox-group-sm-gap);\n\tmargin-top: var(--component-checkbox-group-sm-margin-top);\n}\n\n.stand-checkbox-group.md {\n\tgap: var(--component-checkbox-group-md-gap);\n\tmargin-top: var(--component-checkbox-group-md-margin-top);\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"stand-form-input-container md\">\n\t\t<label>Notifications</label>\n\t\t<span class=\"description\">Choose what to receive.</span>\n\t\t<div class=\"stand-checkbox-group md\">\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"email\" name=\"email\" />\n\t\t\t\t<label for=\"email\">Email</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"sms\" name=\"sms\" />\n\t\t\t\t<label for=\"sms\">SMS</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox md\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"push\" name=\"push\" />\n\t\t\t\t<label for=\"push\">Push notification</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"stand-form-input-container sm\" data-invalid>\n\t\t<label>Preferences</label>\n\t\t<span class=\"description\">Please select at least one option.</span>\n\t\t<div class=\"stand-checkbox-group sm\">\n\t\t\t<div class=\"stand-checkbox sm\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"news\" name=\"news\" />\n\t\t\t\t<label for=\"news\">News</label>\n\t\t\t</div>\n\t\t\t<div class=\"stand-checkbox sm\">\n\t\t\t\t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"offers\" name=\"offers\" />\n\t\t\t\t<label for=\"offers\">Offers</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<span class=\"stand-inline-message stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentCheckbox, componentForm, 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/* inline message styles - error */\n.js-stand-inline-message {\n  display: ${componentInlineMessage.shared.display};\n  align-items: ${componentInlineMessage.shared['align-items']};\n  gap: ${componentInlineMessage.shared.gap};\n  font: ${componentInlineMessage.shared.typography.font};\n  letter-spacing: ${componentInlineMessage.shared.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentInlineMessage.shared.typography.fontWidth};\n}\n\n.js-stand-inline-message > .material-symbols {\n  font-size: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message > svg {\n  width: ${componentInlineMessage.shared.icon.size};\n  height: ${componentInlineMessage.shared.icon.size};\n}\n\n.js-stand-inline-message-error {\n  color: ${componentInlineMessage.error.color};\n  fill: ${componentInlineMessage.error.color};\n}\n\n/* form input container styles */\n\n.js-stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container[\"flex-direction\"]};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-form-input-container.sm {\n\tmax-width: ${componentForm.input.sm.container.maxWidth};\n}\n\n.js-stand-form-input-container.md {\n\tmax-width: ${componentForm.input.md.container.maxWidth};\n}\n\n.js-stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > label {\n\tcolor: ${componentForm.input.shared.label.disabledColor};\n}\n\n.js-stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.typography.font};\n\tletter-spacing: ${componentForm.input.shared.description.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.typography.fontWidth};\n}\n\n.js-stand-form-input-container[data-disabled] > span.description {\n\tcolor: ${componentForm.input.shared.description.disabledColor};\n}\n\n/* checkbox styles */\n\n.js-stand-checkbox {\n  display: ${componentCheckbox.input.shared.display};\n  position: ${componentCheckbox.input.shared.position};\n  align-items: ${componentCheckbox.input.shared['align-items']};\n  gap: ${componentCheckbox.input.shared.gap};\n  cursor: ${componentCheckbox.input.shared.cursor};\n  color: ${componentCheckbox.input.shared.color};\n  font: ${componentCheckbox.input.md.typography.font};\n  letter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n  font-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n}\n\n.js-stand-checkbox.sm {\n  font: ${componentCheckbox.input.sm.typography.font};\n  letter-spacing: ${componentCheckbox.input.sm.typography.letterSpacing};\n  font-variation-settings: \"wdth\"\n\t${componentCheckbox.input.sm.typography.fontWidth};\n}\n\n.js-stand-checkbox > label {\n  cursor: ${componentCheckbox.input.shared.cursor};\n}\n\n.js-stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: ${componentCheckbox.input.shared.cursor};\n  border: ${componentCheckbox.input.shared.indicator.border};\n  border-radius: ${componentCheckbox.input.shared.indicator['border-radius']};\n  accent-color: ${componentCheckbox.input.shared.indicator.selected['background-color']};\n}\n\n.js-stand-checkbox.md > .js-stand-checkbox-indicator {\n  width: ${componentCheckbox.input.md.indicator.size};\n  height: ${componentCheckbox.input.md.indicator.size};\n}\n\n.js-stand-checkbox.sm > .js-stand-checkbox-indicator {\n  width: ${componentCheckbox.input.sm.indicator.size};\n  height: ${componentCheckbox.input.sm.indicator.size};\n}\n\n/* CheckboxGroup styles */\n\n.js-stand-checkbox-group {\n\tdisplay: ${componentCheckbox.group.shared.display};\n\tflex-direction: ${componentCheckbox.group.shared[\"flex-direction\"]};\n}\n\n.js-stand-checkbox-group.sm {\n\tgap: ${componentCheckbox.group.sm.gap};\n\tmargin-top: ${componentCheckbox.group.sm.marginTop};\n}\n\n.js-stand-checkbox-group.md {\n\tgap: ${componentCheckbox.group.md.gap};\n\tmargin-top: ${componentCheckbox.group.md.marginTop};\n}\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<div>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"js-stand-form-input-container md\">\n\t\t<label>Notifications</label>\n\t\t<span class=\"description\">Choose what to receive.</span>\n\t\t<div class=\"js-stand-checkbox-group md\">\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"email\" name=\"email\" />\n\t\t\t\t<label for=\"email\">Email</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"sms\" name=\"sms\" />\n\t\t\t\t<label for=\"sms\">SMS</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox md\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"push\" name=\"push\" />\n\t\t\t\t<label for=\"push\">Push notification</label>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"js-stand-form-input-container sm\" data-invalid>\n\t\t<label>Preferences</label>\n\t\t<span class=\"description\">Please select at least one option.</span>\n\t\t<div class=\"js-stand-checkbox-group sm\">\n\t\t\t<div class=\"js-stand-checkbox sm\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"news\" name=\"news\" />\n\t\t\t\t<label for=\"news\">News</label>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-checkbox sm\">\n\t\t\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"offers\" name=\"offers\" />\n\t\t\t\t<label for=\"offers\">Offers</label>\n\t\t\t</div>\n\t\t</div>\n\t\t<span class=\"js-stand-inline-message js-stand-inline-message-error\"><span class=\"material-symbols\">warning</span> Username is already taken</span>\n\t</div>\n</div>\n`;\n\n";

package/dist/types/components/checkbox/CheckboxSandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "Checkbox";
+export declare const componentTsx = "import { Checkbox } from '@guardian/stand/checkbox';\n\nexport const Component = () => (\n\t<>\n\t\t<Checkbox>Accept terms and conditions</Checkbox>\n\n\t\t<Checkbox isInvalid>Required option</Checkbox>\n\n\t\t<Checkbox isDisabled>Unavailable option</Checkbox>\n\n\t\t<Checkbox size=\"sm\" isIndeterminate isSelected>\n\t\t\tSelect all\n\t\t</Checkbox>\n\t</>\n);\n";
+export declare const componentCss = "\n/* import the checkbox styles */\n@import \"@guardian/stand/component/checkbox.css\";\n\n.stand-checkbox {\n  display: var(--component-checkbox-input-shared-display);\n  position: var(--component-checkbox-input-shared-position);\n  align-items: var(--component-checkbox-input-shared-align-items);\n  gap: var(--component-checkbox-input-shared-gap);\n  cursor: var(--component-checkbox-input-shared-cursor);\n  color: var(--component-checkbox-input-shared-color);\n}\n\n.stand-checkbox.md {\n  font: var(--component-checkbox-input-md-typography-font);\n  letter-spacing: var(--component-checkbox-input-md-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n    var(--component-checkbox-input-md-typography-font-width);\n}\n\n.stand-checkbox.sm {\n  font: var(--component-checkbox-input-sm-typography-font);\n  letter-spacing: var(--component-checkbox-input-sm-typography-letter-spacing);\n  font-variation-settings: \"wdth\"\n\tvar(--component-checkbox-input-sm-typography-font-width);\n}\n\n.stand-checkbox > label {\n  cursor: var(--component-checkbox-input-shared-cursor);\n}\n\n.stand-checkbox-indicator {\n  /* Reset browser default styles for checkboxes */\n  margin: 0;\n  background-color: transparent;\n  outline: none;\n\n  /* component styles */\n  cursor: var(--component-checkbox-input-shared-cursor);\n  border: var(--component-checkbox-input-shared-indicator-border);\n  border-radius: var(--component-checkbox-input-shared-indicator-border-radius);\n  accent-color: var(\n    --component-checkbox-input-shared-indicator-selected-background-color\n  );\n}\n\n.stand-checkbox.md > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-md-indicator-size);\n  height: var(--component-checkbox-input-md-indicator-size);\n}\n\n.stand-checkbox.sm > .stand-checkbox-indicator {\n  width: var(--component-checkbox-input-sm-indicator-size);\n  height: var(--component-checkbox-input-sm-indicator-size);\n}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n\t<div>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"stand-checkbox md\">\n    \t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n    \t<label for=\"terms\">Accept terms and conditions</label>\n  \t</div>\n\t<div class=\"stand-checkbox sm\">\n    \t<input class=\"stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n    \t<label for=\"terms\">Required option</label>\n  \t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentCheckbox } 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  .js-stand-checkbox {\n\tdisplay: ${componentCheckbox.input.shared.display};\n\tposition: ${componentCheckbox.input.shared.position};\n\talign-items: ${componentCheckbox.input.shared['align-items']};\n\tgap: ${componentCheckbox.input.shared.gap};\n\tcursor: ${componentCheckbox.input.shared.cursor};\n\tcolor: ${componentCheckbox.input.shared.color};\n\tfont: ${componentCheckbox.input.md.typography.font};\n\tletter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n  }\n\n  .js-stand-checkbox.md {\n\tfont: ${componentCheckbox.input.md.typography.font};\n\tletter-spacing: ${componentCheckbox.input.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.md.typography.fontWidth};\n  }\n\n  .js-stand-checkbox.sm {\n\tfont: ${componentCheckbox.input.sm.typography.font};\n\tletter-spacing: ${componentCheckbox.input.sm.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentCheckbox.input.sm.typography.fontWidth};\n  }\n\n  .js-stand-checkbox > label {\n\tcursor: ${componentCheckbox.input.shared.cursor};\n  }\n\n  .js-stand-checkbox-indicator {\n\t/* Reset browser default styles for checkboxes */\n\tmargin: 0;\n\tbackground-color: transparent;\n\toutline: none;\n\n\t/* component styles */\n\tcursor: ${componentCheckbox.input.shared.cursor};\n\tborder: ${componentCheckbox.input.shared.indicator.border};\n\tborder-radius: ${componentCheckbox.input.shared.indicator['border-radius']};\n\taccent-color: ${componentCheckbox.input.shared.indicator.selected['background-color']};\n  }\n\n  .js-stand-checkbox.md > .js-stand-checkbox-indicator {\n\twidth: ${componentCheckbox.input.md.indicator.size};\n\theight: ${componentCheckbox.input.md.indicator.size};\n  }\n\n  .js-stand-checkbox.sm > .js-stand-checkbox-indicator {\n\twidth: ${componentCheckbox.input.sm.indicator.size};\n\theight: ${componentCheckbox.input.sm.indicator.size};\n  }\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<div>\n\t\tCheckboxes can be built with the input HTML element, but this can be difficult to style. These examples only show basic size and color customisation.\n\t</div>\n\t<div class=\"js-stand-checkbox md\">\n\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n\t\t<label for=\"terms\">Accept terms and conditions</label>\n\t</div>\n\t<div class=\"js-stand-checkbox sm\">\n\t\t<input class=\"js-stand-checkbox-indicator\" type=\"checkbox\" id=\"terms\" name=\"terms\" />\n\t\t<label for=\"terms\">Required option</label>\n\t</div>\n</div>\n`;\n\n";

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

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

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

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

package/dist/types/components/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];
+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 type AllowedContainer = (typeof ALLOWED_FORM_CONTAINERS)[number];

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

@@ -6,3 +6,4 @@ 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;
+export declare const inlineMessageIconStyles: (theme: InlineMessageTheme) => SerializedStyles;

package/dist/types/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupProps, RadioProps } from './types';
+export declare function RadioGroup({ size, isInvalid, theme, children, ...props }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Radio({ theme, size, children, isInvalid, ...props }: RadioProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/radio-group/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "RadioGroup";
+export declare const componentTsx = "import { Radio, RadioGroup } from '@guardian/stand/radio-group';\n\nexport const Component = () => (\n\t<RadioGroup\n\t\tlabel=\"Option\"\n\t\tdescription=\"This is a description for the radio button input\"\n\t>\n\t\t<Radio value=\"one\">Option 1</Radio>\n\t\t<Radio value=\"two\">Option 2</Radio>\n\t</RadioGroup>\n);\n";
+export declare const componentCss = "\n/* import the radiogroup styles */\n@import '@guardian/stand/component/radioGroup.css';\n@import '@guardian/stand/component/form.css';\n\n/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-form-input-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-form-input-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n/* radiogroup styles */\n\n.stand-radio-group {\n\tdisplay: var(--component-radio-group-shared-display);\n\tflex-direction: var(--component-radio-group-shared-flex-direction);\n\tgap: var(--component-radio-group-md-gap);\n\tmargin-top: var(--component-radio-group-shared-margin-top);\n\tmargin-bottom: var(--component-radio-group-shared-margin-bottom);\n}\n\n.stand-radio {\n\tdisplay: var(--component-radio-group-shared-radio-display);\n\talign-items: var(--component-radio-group-shared-radio-align-items);\n\tgap: var(--component-radio-group-shared-radio-gap);\n\tfont: var(--component-radio-group-md-typography-font);\n\tletter-spacing: var(--component-radio-group-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-radio-group-md-typography-font-width);\n\tcolor: var(--component-radio-group-shared-radio-color);\n}\n\n.stand-radio input {\n\tposition: var(--component-radio-group-shared-indicator-position);\n\twidth: var(--component-radio-group-md-indicator-width);\n\theight: var(--component-radio-group-md-indicator-height);\n\tborder-radius: var(--component-radio-group-shared-indicator-border-radius);\n\tborder: var(--component-radio-group-shared-indicator-border);\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: var(--component-radio-group-shared-indicator-after-position);\n\tborder-radius: var(--component-radio-group-shared-indicator-after-border-radius);\n\tinset: var(--component-radio-group-shared-indicator-after-inset);\n\tscale: var(--component-radio-group-shared-indicator-after-scale);\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentRadioGroup, componentForm } 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/* form input container styles */\n\n.stand-form-input-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.stand-form-input-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.shared.label.font};\n\tletter-spacing: ${componentForm.input.shared.label.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.label.fontWidth};\n}\n\n.stand-form-input-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.stand-radio-group {\n\tdisplay: ${componentRadioGroup.shared.display};\n\tflex-direction: ${componentRadioGroup.shared.flexDirection};\n\tgap: ${componentRadioGroup.md.gap};\n\tmargin-top: ${componentRadioGroup.shared.marginTop};\n\tmargin-bottom: ${componentRadioGroup.shared.marginBottom};\n}\n\n.stand-radio {\n\tdisplay: ${componentRadioGroup.shared.radio.display};\n\talign-items: ${componentRadioGroup.shared.radio.alignItems};\n\tgap: ${componentRadioGroup.shared.radio.gap};\n\tfont: ${componentRadioGroup.md.typography.font};\n\tletter-spacing: ${componentRadioGroup.md.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentRadioGroup.md.typography.fontWidth};\n\tcolor: ${componentRadioGroup.shared.radio.color};\n}\n\n.stand-radio input {\n\tposition: ${componentRadioGroup.shared.indicator.position};\n\twidth: ${componentRadioGroup.md.indicator.width};\n\theight: ${componentRadioGroup.md.indicator.height};\n\tborder-radius: ${componentRadioGroup.shared.indicator.borderRadius};\n\tborder: ${componentRadioGroup.shared.indicator.border};\n}\n\n.stand-radio > input::after {\n\tcontent: '';\n\tposition: ${componentRadioGroup.shared.indicator.after.position};\n\tborder-radius: ${componentRadioGroup.shared.indicator.after.borderRadius};\n\tinset: ${componentRadioGroup.shared.indicator.after.inset};\n\tscale: ${componentRadioGroup.shared.indicator.after.scale};\n}\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\">\n<div class=\"stand-form-input-container\">\n\t<label>Options</label>\n\t<span class=\"description\">This is a description for the radio group.</span>\n\t<div class=\"stand-radio-group\">\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"one\" name=\"option\" />\n\t\t\t<label>Option 1</label>\n\t\t</div>\n\t\t<div class=\"stand-radio\">\n\t\t\t<input type=\"radio\" value=\"two\" name=\"option\" />\n\t\t\t<label>Option 2</label>\n\t\t</div>\n\t</div>\n</div>\n</div>\n`;\n";

package/dist/types/components/radio-group/styles.d.ts

@@ -0,0 +1,9 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentRadioGroup } from '../../styleD/build/typescript/component/radioGroup';
+import type { Prettify } from '../../util/types';
+import type { RadioGroupProps } from './types';
+export type RadioGroupTheme = Prettify<ComponentRadioGroup>;
+export declare const defaultRadioGroupTheme: RadioGroupTheme;
+export declare const radioGroupStyles: (theme: RadioGroupTheme, { size }: Required<Pick<RadioGroupProps, 'size'>>) => SerializedStyles;
+export declare const radioStyles: (theme: RadioGroupTheme, { size, isInvalid }: Required<Pick<RadioGroupProps, 'size' | 'isInvalid'>>) => SerializedStyles;
+export declare const radioIndicatorStyles: (theme: RadioGroupTheme, { size, isInvalid }: Required<Pick<RadioGroupProps, 'size' | 'isInvalid'>>) => SerializedStyles;

package/dist/types/components/radio-group/types.d.ts

@@ -0,0 +1,10 @@
+import type { RadioGroupProps as RACRadioGroupProps, RadioProps as RACRadioProps } from 'react-aria-components';
+import type { DefaultProps } from '../../util/types';
+import type { FormInputContainerDefaultProps } from '../form/types';
+import type { RadioGroupTheme } from './styles';
+export type RadioGroupProps = FormInputContainerDefaultProps<RACRadioGroupProps, RadioGroupTheme>;
+export interface RadioProps extends DefaultProps<RadioGroupTheme, RACRadioProps['className']>, RACRadioProps {
+    size?: keyof Omit<RadioGroupTheme, 'shared'>;
+    /** Whether the input value is invalid. */
+    isInvalid?: boolean;
+}

package/dist/types/components/topbar/topBarToolName/TopBarToolName.d.ts

@@ -1,2 +1,2 @@
 import type { TopBarToolNameProps } from './types';
-export declare const TopBarToolName: ({ name, favicon, subsection, subsectionIcon, theme, cssOverrides, }: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TopBarToolName: (props: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/topbar/topBarToolName/styles.d.ts

@@ -4,6 +4,8 @@ import type { DeepPartial, Prettify } from '../../../util/types';
 export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
 export type PartialTopBarToolNameTheme = DeepPartial<TopBarToolNameTheme>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
+export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
+export declare const toolNameLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameTypography: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const dividerStyles: (theme: TopBarToolNameTheme) => SerializedStyles;