@guardian/stand 0.0.18 → 0.0.19

package/dist/components/select/Select.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var InlineMessage = require('../inline-message/InlineMessage.cjs');
+var styles = require('./styles.cjs');
+
+function Option({ children, theme = {} }) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultSelectTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.ListBoxItem, { css: styles.listBoxItemStyles(mergedTheme), children });
+}
+function ListBox({ children, theme = {} }) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultSelectTheme, theme);
+  const items = [];
+  React.Children.forEach(children, (child, i) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === Option) {
+      items.push(
+        React.cloneElement(child, {
+          key: `${child.key}-${i}`
+        })
+      );
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.ListBox, { css: styles.listBoxStyles(mergedTheme), children: items });
+}
+function Select({
+  children,
+  label,
+  contextualHelpText,
+  theme = {},
+  cssOverrides,
+  className,
+  isInvalid,
+  errorMessage,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultSelectTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Select,
+    {
+      css: [styles.selectStyles(mergedTheme), cssOverrides],
+      className,
+      isInvalid,
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { css: styles.labelStyles(mergedTheme), children: label }),
+        " ",
+        contextualHelpText && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.helpTextStyles(mergedTheme), children: contextualHelpText }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Button, { css: styles.buttonStyles(mergedTheme, isInvalid), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectValue, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { symbol: "keyboard_arrow_down", size: "lg" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { children: /* @__PURE__ */ jsxRuntime.jsx(InlineMessage.InlineMessage, { level: "error", children: errorMessage }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { css: styles.popoverStyles(mergedTheme), children: /* @__PURE__ */ jsxRuntime.jsx(ListBox, { children }) })
+      ]
+    }
+  );
+}
+
+exports.Option = Option;
+exports.Select = Select;

package/dist/components/select/Select.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React from 'react';
+import { Select as Select$1, Label, Button, SelectValue, FieldError, Popover, ListBox as ListBox$1, ListBoxItem } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
+import { InlineMessage } from '../inline-message/InlineMessage.js';
+import { labelStyles, helpTextStyles, buttonStyles, popoverStyles, selectStyles, defaultSelectTheme, listBoxStyles, listBoxItemStyles } from './styles.js';
+
+function Option({ children, theme = {} }) {
+  const mergedTheme = mergeDeep(defaultSelectTheme, theme);
+  return jsx(ListBoxItem, { css: listBoxItemStyles(mergedTheme), children });
+}
+function ListBox({ children, theme = {} }) {
+  const mergedTheme = mergeDeep(defaultSelectTheme, theme);
+  const items = [];
+  React.Children.forEach(children, (child, i) => {
+    if (!React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === Option) {
+      items.push(React.cloneElement(child, {
+        key: `${child.key}-${i}`
+      }));
+    }
+  });
+  return jsx(ListBox$1, { css: listBoxStyles(mergedTheme), children: items });
+}
+function Select({ children, label, contextualHelpText, theme = {}, cssOverrides, className, isInvalid, errorMessage, ...props }) {
+  const mergedTheme = mergeDeep(defaultSelectTheme, theme);
+  return jsxs(Select$1, { css: [selectStyles(mergedTheme), cssOverrides], className, isInvalid, ...props, children: [label && jsx(Label, { css: labelStyles(mergedTheme), children: label }), " ", contextualHelpText && jsx("div", { css: helpTextStyles(mergedTheme), children: contextualHelpText }), jsxs(Button, { css: buttonStyles(mergedTheme, isInvalid), children: [jsx(SelectValue, {}), jsx(Icon, { symbol: "keyboard_arrow_down", size: "lg" })] }), jsx(FieldError, { children: jsx(InlineMessage, { level: "error", children: errorMessage }) }), jsx(Popover, { css: popoverStyles(mergedTheme), children: jsx(ListBox, { children }) })] });
+}
+
+export { Option, Select };

package/dist/components/select/styles.cjs

@@ -0,0 +1,126 @@
+'use strict';
+
+var react = require('@emotion/react');
+var select = require('../../styleD/build/typescript/component/select.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultSelectTheme = select.componentSelect;
+const selectStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.display};
+		flex-direction: ${theme.shared.flexDirection};
+		gap: ${theme.shared.gap};
+
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+	`;
+};
+const popoverStyles = (theme) => {
+  return react.css`
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+	`;
+};
+const listBoxItemStyles = (theme) => {
+  return react.css`
+		padding-left: ${theme.option.paddingLeft};
+		padding-right: ${theme.option.paddingRight};
+		padding-top: ${theme.option.paddingTop};
+		padding-bottom: ${theme.option.paddingBottom};
+
+		&[data-hovered] {
+			outline: ${theme.shared.hover.outline};
+		}
+
+		/* Hovering adds data-focused and the item stays focused after hovering away */
+		&[data-focused] {
+			background-color: ${theme.shared.hover.backgroundColor};
+		}
+
+		/* Override default browser focus behaviour */
+		:focus-visible {
+			outline: none;
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.option.focused.outline};
+			outline-offset: ${theme.option.focused["outline-offset"]};
+			background-color: ${theme.option.focused.backgroundColor};
+		}
+
+		/* Must be last to take precedence */
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+	`;
+};
+const listBoxStyles = (theme) => {
+  return react.css`
+		${typography.convertTypographyToEmotionStringStyle(theme.listBox.typography)}
+		background-color: ${theme.listBox.backgroundColor};
+		border: ${theme.listBox.border};
+		box-shadow: ${theme.listBox.shadow};
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+		outline: none;
+	`;
+};
+const labelStyles = (theme) => {
+  return react.css`
+		color: ${theme.label.color};
+		${typography.convertTypographyToEmotionStringStyle(theme.label.typography)};
+	`;
+};
+const helpTextStyles = (theme) => {
+  return react.css`
+		color: ${theme.helpText.color};
+		${typography.convertTypographyToEmotionStringStyle(theme.helpText.typography)}
+	`;
+};
+const buttonStyles = (theme, isInvalid) => {
+  return react.css`
+		display: ${theme.button.display};
+		justify-content: ${theme.button.justifyContent};
+		align-items: ${theme.button.alignItems};
+		background-color: ${theme.button.backgroundColor};
+		border: ${theme.button.border};
+		border-radius: ${theme.button.borderRadius};
+		height: ${theme.button.height};
+		padding-left: ${theme.button.paddingLeft};
+		padding-right: ${theme.button.paddingRight};
+		margin-top: ${theme.button.marginTop};
+		${typography.convertTypographyToEmotionStringStyle(theme.button.typography)}
+		color: ${theme.button.color};
+
+		&[data-hovered] {
+			background-color: ${theme.shared.hover.backgroundColor};
+		}
+
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.button.focused.outline};
+			outline-offset: ${theme.button.focused["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.button.disabled.cursor};
+			background-color: ${theme.button.disabled.backgroundColor};
+			color: ${theme.button.disabled.color};
+			border: ${theme.button.disabled.border};
+		}
+
+		${isInvalid ? `border: ${theme.button.error.border};` : ``}
+	`;
+};
+
+exports.buttonStyles = buttonStyles;
+exports.defaultSelectTheme = defaultSelectTheme;
+exports.helpTextStyles = helpTextStyles;
+exports.labelStyles = labelStyles;
+exports.listBoxItemStyles = listBoxItemStyles;
+exports.listBoxStyles = listBoxStyles;
+exports.popoverStyles = popoverStyles;
+exports.selectStyles = selectStyles;

package/dist/components/select/styles.js

@@ -0,0 +1,117 @@
+import { css } from '@emotion/react';
+import { componentSelect } from '../../styleD/build/typescript/component/select.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultSelectTheme = componentSelect;
+const selectStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		flex-direction: ${theme.shared.flexDirection};
+		gap: ${theme.shared.gap};
+
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+	`;
+};
+const popoverStyles = (theme) => {
+  return css`
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+	`;
+};
+const listBoxItemStyles = (theme) => {
+  return css`
+		padding-left: ${theme.option.paddingLeft};
+		padding-right: ${theme.option.paddingRight};
+		padding-top: ${theme.option.paddingTop};
+		padding-bottom: ${theme.option.paddingBottom};
+
+		&[data-hovered] {
+			outline: ${theme.shared.hover.outline};
+		}
+
+		/* Hovering adds data-focused and the item stays focused after hovering away */
+		&[data-focused] {
+			background-color: ${theme.shared.hover.backgroundColor};
+		}
+
+		/* Override default browser focus behaviour */
+		:focus-visible {
+			outline: none;
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.option.focused.outline};
+			outline-offset: ${theme.option.focused["outline-offset"]};
+			background-color: ${theme.option.focused.backgroundColor};
+		}
+
+		/* Must be last to take precedence */
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+	`;
+};
+const listBoxStyles = (theme) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme.listBox.typography)}
+		background-color: ${theme.listBox.backgroundColor};
+		border: ${theme.listBox.border};
+		box-shadow: ${theme.listBox.shadow};
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+		outline: none;
+	`;
+};
+const labelStyles = (theme) => {
+  return css`
+		color: ${theme.label.color};
+		${convertTypographyToEmotionStringStyle(theme.label.typography)};
+	`;
+};
+const helpTextStyles = (theme) => {
+  return css`
+		color: ${theme.helpText.color};
+		${convertTypographyToEmotionStringStyle(theme.helpText.typography)}
+	`;
+};
+const buttonStyles = (theme, isInvalid) => {
+  return css`
+		display: ${theme.button.display};
+		justify-content: ${theme.button.justifyContent};
+		align-items: ${theme.button.alignItems};
+		background-color: ${theme.button.backgroundColor};
+		border: ${theme.button.border};
+		border-radius: ${theme.button.borderRadius};
+		height: ${theme.button.height};
+		padding-left: ${theme.button.paddingLeft};
+		padding-right: ${theme.button.paddingRight};
+		margin-top: ${theme.button.marginTop};
+		${convertTypographyToEmotionStringStyle(theme.button.typography)}
+		color: ${theme.button.color};
+
+		&[data-hovered] {
+			background-color: ${theme.shared.hover.backgroundColor};
+		}
+
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.button.focused.outline};
+			outline-offset: ${theme.button.focused["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.button.disabled.cursor};
+			background-color: ${theme.button.disabled.backgroundColor};
+			color: ${theme.button.disabled.color};
+			border: ${theme.button.disabled.border};
+		}
+
+		${isInvalid ? `border: ${theme.button.error.border};` : ``}
+	`;
+};
+
+export { buttonStyles, defaultSelectTheme, helpTextStyles, labelStyles, listBoxItemStyles, listBoxStyles, popoverStyles, selectStyles };

package/dist/index.cjs

@@ -10,6 +10,7 @@ var typography$1 = require('./styleD/build/typescript/component/typography.cjs')
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
+var select = require('./styleD/build/typescript/component/select.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
 var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
 var colors = require('./styleD/build/typescript/base/colors.cjs');
@@ -34,6 +35,7 @@ exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
+exports.componentSelect = select.componentSelect;
 exports.componentMenu = menu.componentMenu;
 exports.componentTopBar = TopBar.componentTopBar;
 exports.baseColors = colors.baseColors;

package/dist/index.js

@@ -8,6 +8,7 @@ export { componentTypography } from './styleD/build/typescript/component/typogra
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
+export { componentSelect } from './styleD/build/typescript/component/select.js';
 export { componentMenu } from './styleD/build/typescript/component/menu.js';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';

package/dist/select.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Select = require('./components/select/Select.cjs');
+var select = require('./styleD/build/typescript/component/select.cjs');
+
+
+
+exports.Select = Select.Select;
+exports.componentSelect = select.componentSelect;

package/dist/select.js

@@ -0,0 +1,2 @@
+export { Select } from './components/select/Select.js';
+export { componentSelect } from './styleD/build/typescript/component/select.js';

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

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-select-shared-display: flex;
+	--component-select-shared-flex-direction: column;
+	--component-select-shared-gap: 0.25rem;
+	--component-select-shared-max-width: 333px;
+	--component-select-shared-width: 100%;
+	--component-select-shared-hover-background-color: #f6f6f6;
+	--component-select-shared-hover-outline: none; /** Override outline focus styles on hover */
+	--component-select-shared-pressed-background-color: #ededed;
+	--component-select-label-color: #000000;
+	--component-select-label-typography-font: normal 700 1rem/1.15 'Open Sans';
+	--component-select-label-typography-letter-spacing: -0.03125rem;
+	--component-select-label-typography-font-width: 95;
+	--component-select-help-text-color: #545454;
+	--component-select-help-text-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-select-help-text-typography-letter-spacing: 0;
+	--component-select-help-text-typography-font-width: 95;
+	--component-select-button-display: flex;
+	--component-select-button-justify-content: space-between;
+	--component-select-button-align-items: center;
+	--component-select-button-margin-top: 0.25rem;
+	--component-select-button-background-color: #ffffff;
+	--component-select-button-border: 0.0625rem solid #545454;
+	--component-select-button-border-radius: 0.25rem;
+	--component-select-button-height: 2.5rem;
+	--component-select-button-padding-left: 0.75rem;
+	--component-select-button-padding-right: 0.25rem;
+	--component-select-button-color: #545454;
+	--component-select-button-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-select-button-typography-letter-spacing: 0;
+	--component-select-button-typography-font-width: 95;
+	--component-select-button-focused-outline: 0.125rem solid #0072a9;
+	--component-select-button-focused-outline-offset: 0.125rem;
+	--component-select-button-disabled-background-color: #ffffff;
+	--component-select-button-disabled-cursor: not-allowed;
+	--component-select-button-disabled-color: #999999;
+	--component-select-button-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-select-button-error-border: 0.0625rem solid #b42a19;
+	--component-select-option-padding-left: 1rem;
+	--component-select-option-padding-right: 1rem;
+	--component-select-option-padding-top: 0.75rem;
+	--component-select-option-padding-bottom: 0.75rem;
+	--component-select-option-focused-outline: 0.125rem solid #0072a9;
+	--component-select-option-focused-outline-offset: 0;
+	--component-select-option-focused-background-color: inherit;
+	--component-select-list-box-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-select-list-box-typography-letter-spacing: 0;
+	--component-select-list-box-typography-font-width: 95;
+	--component-select-list-box-border: 0.0625rem solid #cccccc;
+	--component-select-list-box-background-color: #ffffff;
+	--component-select-list-box-shadow: 0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3);
+}

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Select";
+export declare const componentTsx = "import { Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
+export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n\n.stand-select-container {\n\tdisplay: var(--component-select-shared-display);\n\tflex-direction: var(--component-select-shared-flex-direction);\n\tgap: var(--component-select-shared-gap);\n\n\tmax-width: var(--component-select-shared-maxWidth);\n\twidth: var(--component-select-shared-width);\n}\n\n.stand-select {\n\t\tdisplay: var(--component-select-button-display);\n\t\tjustify-content: var(--component-select-button-justify-content);\n\t\talign-items: var(--component-select-button-align-items);\n\t\tbackground-color: var(--component-select-button-background-color);\n\t\tborder: var(--component-select-button-border);\n\t\tborder-radius: var(--component-select-button-border-radius);\n\t\theight: var(--component-select-button-height);\n\t\tpadding-left: var(--component-select-button-padding-left);\n\t\tpadding-right: var(--component-select-button-padding-right);\n\t\tmargin-top: var(--component-select-button-margin-top);\n\t\tcolor: var(--component-select-button-color);\n\n\t\tfont: var(--component-select-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-button-body-md-typography-font-width);\n\n\n\t\t&:hover {\n\t\t\tbackground: var(--component-select-shared-hover-background-color);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--component-select-shared-active-background-color);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: var(--component-select-button-focused-outline);\n\t\t\toutline-offset: var(--component-select-button-focused-outline-offset);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: var(--component-select-button-disabled-cursor);\n\t\t\tbackground-color: var(--component-select-button-disabled-background-color);\n\t\t\tcolor: var(--component-select-button-disabled-color);\n\t\t\tborder: var(--component-select-button-disabled-border);\n\t\t}\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentSelect } 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\n.js-stand-select-container {\n\tdisplay: ${componentSelect.shared.display};\n\tflex-direction: ${componentSelect.shared.flexDirection};\n\tgap: ${componentSelect.shared.gap};\n\n\tmax-width: ${componentSelect.shared.maxWidth};\n\twidth: ${componentSelect.shared.width};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.button.display};\n\tjustify-content: ${componentSelect.button.justifyContent};\n\talign-items: ${componentSelect.button.alignItems};\n\tbackground-color: ${componentSelect.button.backgroundColor};\n\tborder: ${componentSelect.button.border};\n\tborder-radius: ${componentSelect.button.borderRadius};\n\theight: ${componentSelect.button.height};\n\tpadding-left: ${componentSelect.button.paddingLeft};\n\tpadding-right: ${componentSelect.button.paddingRight};\n\tmargin-top: ${componentSelect.button.marginTop};\n\tcolor: ${componentSelect.button.color};\n\n\tfont: ${componentSelect.button.typography.font};\n\tletter-spacing: ${componentSelect.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.button.focused.outline};\n\t\toutline-offset: ${componentSelect.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.button.disabled.color};\n\t\tborder: ${componentSelect.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";

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

@@ -0,0 +1,13 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentSelect } from '../../styleD/build/typescript/component/select';
+import type { DeepPartial, Prettify } from '../../util/types';
+export type SelectTheme = Prettify<ComponentSelect>;
+export type PartialSelectTheme = DeepPartial<SelectTheme>;
+export declare const defaultSelectTheme: SelectTheme;
+export declare const selectStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const popoverStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const listBoxItemStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const listBoxStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const labelStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const helpTextStyles: (theme: SelectTheme) => SerializedStyles;
+export declare const buttonStyles: (theme: SelectTheme, isInvalid?: boolean) => SerializedStyles;

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

@@ -0,0 +1,21 @@
+import type { ListBoxItemProps as RACListBoxItemProps, ListBoxProps as RACListBoxProps, SelectProps as RACSelectProps } from 'react-aria-components';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { SelectTheme } from './styles';
+export interface OptionProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxItemProps['className']>, Omit<RACListBoxItemProps, 'children'> {
+}
+export interface ListBoxProps extends DefaultPropsWithChildren<SelectTheme, RACListBoxProps<object>['className']>, Omit<RACListBoxProps<object>, 'children'> {
+}
+export interface SelectProps extends DefaultPropsWithChildren<SelectTheme, RACSelectProps<object>['className']>, Omit<RACSelectProps<object>, 'children'> {
+    /**
+     * The label text of the select box
+     */
+    label: string;
+    /**
+     * Validation error message
+     */
+    errorMessage?: string;
+    /**
+     * Optional contextual help text
+     */
+    contextualHelpText?: string;
+}

package/dist/types/index.d.ts

@@ -28,6 +28,8 @@ export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
 export type { ComponentInlineMessage } from './styleD/build/typescript/component/inlineMessage';
+export { componentSelect } from './styleD/build/typescript/component/select';
+export type { ComponentSelect } from './styleD/build/typescript/component/select';
 export { componentMenu } from './styleD/build/typescript/component/menu';
 export type { ComponentMenu } from './styleD/build/typescript/component/menu';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar';

package/dist/types/select.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Select component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/select.css),
+ * you don't need to install these.
+ */
+export { Select } from './components/select/Select';
+export type { SelectProps } from './components/select/types';
+export type { PartialSelectTheme as SelectTheme } from './components/select/styles';
+export { componentSelect } from './styleD/build/typescript/component/select';
+export type { ComponentSelect } from './styleD/build/typescript/component/select';

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

@@ -0,0 +1,88 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentSelect: {
+    shared: {
+        display: string;
+        flexDirection: string;
+        gap: string;
+        maxWidth: string;
+        width: string;
+        hover: {
+            backgroundColor: string;
+            outline: string;
+        };
+        pressed: {
+            backgroundColor: string;
+        };
+    };
+    label: {
+        color: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+    helpText: {
+        color: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+    };
+    button: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        marginTop: string;
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        height: string;
+        paddingLeft: string;
+        paddingRight: string;
+        color: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+        focused: {
+            outline: string;
+            'outline-offset': string;
+        };
+        disabled: {
+            backgroundColor: string;
+            cursor: string;
+            color: string;
+            border: string;
+        };
+        error: {
+            border: string;
+        };
+    };
+    option: {
+        paddingLeft: string;
+        paddingRight: string;
+        paddingTop: string;
+        paddingBottom: string;
+        focused: {
+            outline: string;
+            'outline-offset': string;
+            backgroundColor: string;
+        };
+    };
+    listBox: {
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+        border: string;
+        backgroundColor: string;
+        shadow: string;
+    };
+};
+export type ComponentSelect = typeof componentSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
   "exports": {
@@ -14,15 +14,15 @@
       "import": "./dist/avatar.js",
       "require": "./dist/avatar.cjs"
     },
-    "./avatar-link": {
-      "types": "./dist/types/avatar-link.d.ts",
-      "import": "./dist/avatar-link.js",
-      "require": "./dist/avatar-link.cjs"
+    "./AvatarLink": {
+      "types": "./dist/types/avatarLink.d.ts",
+      "import": "./dist/avatarLink.js",
+      "require": "./dist/avatarLink.cjs"
     },
-    "./avatar-button": {
-      "types": "./dist/types/avatar-button.d.ts",
-      "import": "./dist/avatar-button.js",
-      "require": "./dist/avatar-button.cjs"
+    "./AvatarButton": {
+      "types": "./dist/types/avatarButton.d.ts",
+      "import": "./dist/avatarButton.js",
+      "require": "./dist/avatarButton.cjs"
     },
     "./button": {
       "types": "./dist/types/button.d.ts",
@@ -74,6 +74,11 @@
       "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"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -119,7 +124,8 @@
     "./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/inlineMessage.css": "./dist/styleD/build/css/component/inlineMessage.css"
+    "./component/inlineMessage.css": "./dist/styleD/build/css/component/inlineMessage.css",
+    "./component/select.css": "./dist/styleD/build/css/component/select.css"
   },
   "//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
   "typesVersions": {
@@ -127,6 +133,12 @@
       "avatar": [
         "./dist/types/avatar.d.ts"
       ],
+      "AvatarButton": [
+        "./dist/types/avatarButton.d.ts"
+      ],
+      "AvatarLink": [
+        "./dist/types/avatarLink.d.ts"
+      ],
       "button": [
         "./dist/types/button.d.ts"
       ],
@@ -168,6 +180,9 @@
       ],
       "inline-message": [
         "./dist/types/inline-message.d.ts"
+      ],
+      "select": [
+        "./dist/types/select.d.ts"
       ]
     }
   },