@guardian/stand 0.0.19 → 0.0.21

package/dist/TopBar.cjs

@@ -13,3 +13,5 @@ exports.TopBarToolName = TopBarToolName.TopBarToolName;
 exports.TopBarNavigation = TopBarNavigation.TopBarNavigation;
 exports.TopBarItem = TopBarItem.TopBarItem;
 exports.TopBar = TopBar.TopBar;
+exports.TopBarContainerLeft = TopBar.TopBarContainerLeft;
+exports.TopBarContainerRight = TopBar.TopBarContainerRight;

package/dist/TopBar.js

@@ -2,4 +2,4 @@ export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
 export { TopBarToolName } from './components/topbar/topBarToolName/TopBarToolName.js';
 export { TopBarNavigation } from './components/topbar/topBarNavigation/TopBarNavigation.js';
 export { TopBarItem } from './components/topbar/topBarItem/TopBarItem.js';
-export { TopBar } from './components/topbar/TopBar.js';
+export { TopBar, TopBarContainerLeft, TopBarContainerRight } from './components/topbar/TopBar.js';

package/dist/components/form/Form.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('./styles.cjs');
+var types = require('./types.cjs');
+var InlineMessage = require('../inline-message/InlineMessage.cjs');
+
+function FormInputContainer({
+  as: Component,
+  size = "md",
+  label,
+  description,
+  error,
+  isDisabled = false,
+  theme = {},
+  formInputContainerTheme,
+  cssOverrides,
+  children,
+  ...props
+}) {
+  if (!types.ALLOWED_FORM_CONTAINERS.includes(Component)) {
+    return null;
+  }
+  const mergedTheme = mergeDeep.mergeDeep(
+    mergeDeep.mergeDeep(styles.defaultFormInputContainerTheme, theme),
+    formInputContainerTheme ?? {}
+  );
+  const Tag = Component;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Tag,
+    {
+      css: [styles.formInputContainerStyles(mergedTheme, { size }), cssOverrides],
+      isDisabled,
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { css: styles.formInputLabelStyles(mergedTheme, { size, isDisabled }), children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.formInputDescriptionStyles(mergedTheme, { isDisabled }), children: description }),
+        children,
+        error && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { children: /* @__PURE__ */ jsxRuntime.jsx(InlineMessage.InlineMessage, { level: "error", children: error }) })
+      ]
+    }
+  );
+}
+
+exports.FormInputContainer = FormInputContainer;

package/dist/components/form/Form.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Label, FieldError } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { defaultFormInputContainerTheme, formInputLabelStyles, formInputDescriptionStyles, formInputContainerStyles } from './styles.js';
+import { ALLOWED_FORM_CONTAINERS } from './types.js';
+import { InlineMessage } from '../inline-message/InlineMessage.js';
+
+function FormInputContainer({ as: Component, size = "md", label, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
+  if (!ALLOWED_FORM_CONTAINERS.includes(Component)) {
+    return null;
+  }
+  const mergedTheme = mergeDeep(mergeDeep(defaultFormInputContainerTheme, theme), formInputContainerTheme ?? {});
+  const Tag = Component;
+  return jsxs(Tag, { css: [formInputContainerStyles(mergedTheme, { size }), cssOverrides], isDisabled, ...props, children: [label && jsx(Label, { css: formInputLabelStyles(mergedTheme, { size, isDisabled }), children: label }), description && jsx("div", { css: formInputDescriptionStyles(mergedTheme, { isDisabled }), children: description }), children, error && jsx(FieldError, { children: jsx(InlineMessage, { level: "error", children: error }) })] });
+}
+
+export { FormInputContainer };

package/dist/components/form/styles.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+var react = require('@emotion/react');
+var form = require('../../styleD/build/typescript/component/form.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultFormInputContainerTheme = form.componentForm.input;
+const formInputContainerStyles = (theme, {
+  size
+}) => {
+  return react.css`
+		display: ${theme.shared.container.display};
+		flex-direction: ${theme.shared.container["flex-direction"]};
+		gap: ${theme.shared.container.gap};
+		width: ${theme.shared.container.width};
+		max-width: ${theme[size].container["max-width"]};
+	`;
+};
+const formInputLabelStyles = (theme, {
+  isDisabled,
+  size
+}) => {
+  return react.css`
+		color: ${theme.shared.label.color};
+		${typography.convertTypographyToEmotionStringStyle(theme[size].label.typography)}
+
+		${isDisabled && react.css`
+			color: ${theme.shared.label.disabled.color};
+		`}
+	`;
+};
+const formInputDescriptionStyles = (theme, {
+  isDisabled
+}) => {
+  return react.css`
+		color: ${theme.shared.description.color};
+		${typography.convertTypographyToEmotionStringStyle(
+    theme.shared.description.typography
+  )}
+		${isDisabled && react.css`
+			color: ${theme.shared.description.disabled.color};
+		`}
+	`;
+};
+
+exports.defaultFormInputContainerTheme = defaultFormInputContainerTheme;
+exports.formInputContainerStyles = formInputContainerStyles;
+exports.formInputDescriptionStyles = formInputDescriptionStyles;
+exports.formInputLabelStyles = formInputLabelStyles;

package/dist/components/form/styles.js

@@ -0,0 +1,35 @@
+import { css } from '@emotion/react';
+import { componentForm } from '../../styleD/build/typescript/component/form.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultFormInputContainerTheme = componentForm.input;
+const formInputContainerStyles = (theme, { size }) => {
+  return css`
+		display: ${theme.shared.container.display};
+		flex-direction: ${theme.shared.container["flex-direction"]};
+		gap: ${theme.shared.container.gap};
+		width: ${theme.shared.container.width};
+		max-width: ${theme[size].container["max-width"]};
+	`;
+};
+const formInputLabelStyles = (theme, { isDisabled, size }) => {
+  return css`
+		color: ${theme.shared.label.color};
+		${convertTypographyToEmotionStringStyle(theme[size].label.typography)}
+
+		${isDisabled && css`
+			color: ${theme.shared.label.disabled.color};
+		`}
+	`;
+};
+const formInputDescriptionStyles = (theme, { isDisabled }) => {
+  return css`
+		color: ${theme.shared.description.color};
+		${convertTypographyToEmotionStringStyle(theme.shared.description.typography)}
+		${isDisabled && css`
+			color: ${theme.shared.description.disabled.color};
+		`}
+	`;
+};
+
+export { defaultFormInputContainerTheme, formInputContainerStyles, formInputDescriptionStyles, formInputLabelStyles };

package/dist/components/form/types.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var reactAriaComponents = require('react-aria-components');
+
+const ALLOWED_FORM_CONTAINERS = [reactAriaComponents.TextField, reactAriaComponents.Select];
+
+exports.ALLOWED_FORM_CONTAINERS = ALLOWED_FORM_CONTAINERS;

package/dist/components/form/types.js

@@ -0,0 +1,5 @@
+import { TextField, Select } from 'react-aria-components';
+
+const ALLOWED_FORM_CONTAINERS = [TextField, Select];
+
+export { ALLOWED_FORM_CONTAINERS };

package/dist/components/menu/Menu.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var focus = require('@react-aria/focus');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
@@ -83,15 +82,10 @@ function MenuItem({
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultMenuItemTheme, theme);
   const textValue = props.textValue ?? (typeof label === "string" ? label : void 0);
-  const { isFocusVisible, focusProps } = focus.useFocusRing();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.MenuItem,
     {
-      ...focusProps,
-      css: [
-        styles.menuItemStyles(mergedTheme, { description }, isFocusVisible),
-        cssOverrides
-      ],
+      css: [styles.menuItemStyles(mergedTheme, { description }), cssOverrides],
       ...props,
       textValue,
       children: ({ isSelected, selectionMode }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/components/menu/Menu.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { useFocusRing } from '@react-aria/focus';
 import React from 'react';
 import { MenuTrigger, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, Separator, Popover as Popover$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
@@ -36,14 +35,7 @@ function MenuSection({ name, size = "md", theme = {}, cssOverrides, children, ..
 function MenuItem({ label, description, aside, icon, size = "md", theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultMenuItemTheme, theme);
   const textValue = props.textValue ?? (typeof label === "string" ? label : void 0);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  return jsx(
-    MenuItem$1,
-    { ...focusProps, css: [
-      menuItemStyles(mergedTheme, { description }, isFocusVisible),
-      cssOverrides
-    ], ...props, textValue, children: ({ isSelected, selectionMode }) => jsxs(Fragment, { children: [icon && selectionMode === "none" ? jsx(Icon, { size, cssOverrides: menuItemIconStyles(mergedTheme, { size }), children: icon }) : null, isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box_outline_blank", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_checked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_unchecked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, jsx("div", { css: menuItemLabelStyles(mergedTheme), children: label }), description && jsx("div", { css: menuItemDescriptionStyles(mergedTheme), children: description }), aside && jsx("div", { css: menuItemAsideStyles(mergedTheme), children: aside })] }) }
-  );
+  return jsx(MenuItem$1, { css: [menuItemStyles(mergedTheme, { description }), cssOverrides], ...props, textValue, children: ({ isSelected, selectionMode }) => jsxs(Fragment, { children: [icon && selectionMode === "none" ? jsx(Icon, { size, cssOverrides: menuItemIconStyles(mergedTheme, { size }), children: icon }) : null, isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box_outline_blank", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_checked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_unchecked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, jsx("div", { css: menuItemLabelStyles(mergedTheme), children: label }), description && jsx("div", { css: menuItemDescriptionStyles(mergedTheme), children: description }), aside && jsx("div", { css: menuItemAsideStyles(mergedTheme), children: aside })] }) });
 }
 function Menu({ theme = {}, size = "md", popoverProps, menuTriggerProps, children, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultMenuTheme, theme);

package/dist/components/menu/styles.cjs

@@ -24,7 +24,7 @@ const menuSectionHeaderStyles = (theme, { size }) => react.css`
 	${typography.convertTypographyToEmotionStringStyle(theme.header[size].typography)}
 `;
 const defaultMenuItemTheme = menu.componentMenu.menuItem;
-const menuItemStyles = (theme, { description }, isFocusVisible = false) => react.css`
+const menuItemStyles = (theme, { description }) => react.css`
 	display: ${theme.shared.display};
 	grid-template-columns: ${theme.shared["grid-template-columns"]};
 	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
@@ -37,17 +37,31 @@ const menuItemStyles = (theme, { description }, isFocusVisible = false) => react
 	&:last-child {
 		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
 	}
-	&[data-hovered],
-	&:hover {
-		background: ${theme.shared[":hover"]["background-color"]};
+
+	/* Hovering adds data-focused and the item stays focused after hovering away */
+	&[data-focused] {
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+	&[data-hovered] {
+		outline: ${theme.shared[":hover"].outline};
+	}
+
+	/* Override default browser focus behaviour */
+	:focus-visible {
+		outline: none;
+	}
+
+	/* focus visible used for keyboard focus */
+	&[data-focus-visible] {
+		outline: ${theme.shared[":focus-visible"]["outline"]};
+		outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+
+	/* Must be last to take precedence */
+	&[data-pressed] {
+		background-color: ${theme.shared[":pressed"]["background-color"]};
 	}
-	${isFocusVisible ? react.css`
-				outline: ${theme.shared[":focus-visible"]["outline"]};
-				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
-				background: ${theme.shared[":hover"]["background-color"]};
-			` : react.css`
-				outline: none;
-			`}
 `;
 const menuItemIconStyles = (theme, { size }) => react.css`
 	grid-area: ${theme.shared.icon["grid-area"]};

package/dist/components/menu/styles.js

@@ -22,7 +22,7 @@ const menuSectionHeaderStyles = (theme, { size }) => css`
 	${convertTypographyToEmotionStringStyle(theme.header[size].typography)}
 `;
 const defaultMenuItemTheme = componentMenu.menuItem;
-const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
+const menuItemStyles = (theme, { description }) => css`
 	display: ${theme.shared.display};
 	grid-template-columns: ${theme.shared["grid-template-columns"]};
 	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
@@ -35,17 +35,31 @@ const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
 	&:last-child {
 		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
 	}
-	&[data-hovered],
-	&:hover {
-		background: ${theme.shared[":hover"]["background-color"]};
+
+	/* Hovering adds data-focused and the item stays focused after hovering away */
+	&[data-focused] {
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+	&[data-hovered] {
+		outline: ${theme.shared[":hover"].outline};
+	}
+
+	/* Override default browser focus behaviour */
+	:focus-visible {
+		outline: none;
+	}
+
+	/* focus visible used for keyboard focus */
+	&[data-focus-visible] {
+		outline: ${theme.shared[":focus-visible"]["outline"]};
+		outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+
+	/* Must be last to take precedence */
+	&[data-pressed] {
+		background-color: ${theme.shared[":pressed"]["background-color"]};
 	}
-	${isFocusVisible ? css`
-				outline: ${theme.shared[":focus-visible"]["outline"]};
-				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
-				background: ${theme.shared[":hover"]["background-color"]};
-			` : css`
-				outline: none;
-			`}
 `;
 const menuItemIconStyles = (theme, { size }) => css`
 	grid-area: ${theme.shared.icon["grid-area"]};

package/dist/components/select/Select.cjs

@@ -4,8 +4,8 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
+var Form = require('../form/Form.cjs');
 var Icon = require('../icon/Icon.cjs');
-var InlineMessage = require('../inline-message/InlineMessage.cjs');
 var styles = require('./styles.cjs');
 
 function Option({ children, theme = {} }) {
@@ -30,33 +30,24 @@ function ListBox({ children, theme = {} }) {
   return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.ListBox, { css: styles.listBoxStyles(mergedTheme), children: items });
 }
 function Select({
-  children,
-  label,
-  contextualHelpText,
-  theme = {},
-  cssOverrides,
-  className,
   isInvalid,
-  errorMessage,
+  theme = {},
+  children,
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultSelectTheme, theme);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactAriaComponents.Select,
+    Form.FormInputContainer,
     {
-      css: [styles.selectStyles(mergedTheme), cssOverrides],
-      className,
+      as: reactAriaComponents.Select,
+      size: "md",
       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 }) })
       ]
     }

package/dist/components/select/Select.js

@@ -1,10 +1,10 @@
 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 { Select as Select$1, Button, SelectValue, Popover, ListBox as ListBox$1, ListBoxItem } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
+import { FormInputContainer } from '../form/Form.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';
+import { buttonStyles, popoverStyles, defaultSelectTheme, listBoxStyles, listBoxItemStyles } from './styles.js';
 
 function Option({ children, theme = {} }) {
   const mergedTheme = mergeDeep(defaultSelectTheme, theme);
@@ -25,9 +25,9 @@ function ListBox({ children, theme = {} }) {
   });
   return jsx(ListBox$1, { css: listBoxStyles(mergedTheme), children: items });
 }
-function Select({ children, label, contextualHelpText, theme = {}, cssOverrides, className, isInvalid, errorMessage, ...props }) {
+function Select({ isInvalid, theme = {}, children, ...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 }) })] });
+  return jsxs(FormInputContainer, { as: Select$1, size: "md", isInvalid, ...props, children: [jsxs(Button, { css: buttonStyles(mergedTheme, isInvalid), children: [jsx(SelectValue, {}), jsx(Icon, { symbol: "keyboard_arrow_down", size: "lg" })] }), jsx(Popover, { css: popoverStyles(mergedTheme), children: jsx(ListBox, { children }) })] });
 }
 
 export { Option, Select };

package/dist/components/select/styles.cjs

@@ -5,16 +5,6 @@ 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};
@@ -23,10 +13,10 @@ const popoverStyles = (theme) => {
 };
 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};
+		padding-left: ${theme.shared.option.paddingLeft};
+		padding-right: ${theme.shared.option.paddingRight};
+		padding-top: ${theme.shared.option.paddingTop};
+		padding-bottom: ${theme.shared.option.paddingBottom};
 
 		&[data-hovered] {
 			outline: ${theme.shared.hover.outline};
@@ -43,9 +33,9 @@ const listBoxItemStyles = (theme) => {
 		}
 
 		&[data-focus-visible] {
-			outline: ${theme.option.focused.outline};
-			outline-offset: ${theme.option.focused["outline-offset"]};
-			background-color: ${theme.option.focused.backgroundColor};
+			outline: ${theme.shared.option.focused.outline};
+			outline-offset: ${theme.shared.option.focused["outline-offset"]};
+			background-color: ${theme.shared.option.focused.backgroundColor};
 		}
 
 		/* Must be last to take precedence */
@@ -56,41 +46,29 @@ const listBoxItemStyles = (theme) => {
 };
 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};
+		${typography.convertTypographyToEmotionStringStyle(theme.shared.listBox.typography)}
+		background-color: ${theme.shared.listBox.backgroundColor};
+		border: ${theme.shared.listBox.border};
+		box-shadow: ${theme.shared.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};
+		display: ${theme.shared.button.display};
+		justify-content: ${theme.shared.button.justifyContent};
+		align-items: ${theme.shared.button.alignItems};
+		background-color: ${theme.shared.button.backgroundColor};
+		border: ${theme.shared.button.border};
+		border-radius: ${theme.shared.button.borderRadius};
+		height: ${theme.shared.button.height};
+		padding-left: ${theme.shared.button.paddingLeft};
+		padding-right: ${theme.shared.button.paddingRight};
+		margin-top: ${theme.shared.button.marginTop};
+		${typography.convertTypographyToEmotionStringStyle(theme.shared.button.typography)}
+		color: ${theme.shared.button.color};
 
 		&[data-hovered] {
 			background-color: ${theme.shared.hover.backgroundColor};
@@ -101,26 +79,23 @@ const buttonStyles = (theme, isInvalid) => {
 		}
 
 		&[data-focus-visible] {
-			outline: ${theme.button.focused.outline};
-			outline-offset: ${theme.button.focused["outline-offset"]};
+			outline: ${theme.shared.button.focused.outline};
+			outline-offset: ${theme.shared.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};
+			cursor: ${theme.shared.button.disabled.cursor};
+			background-color: ${theme.shared.button.disabled.backgroundColor};
+			color: ${theme.shared.button.disabled.color};
+			border: ${theme.shared.button.disabled.border};
 		}
 
-		${isInvalid ? `border: ${theme.button.error.border};` : ``}
+		${isInvalid ? `border: ${theme.shared.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;