@guardian/stand 0.0.19 → 0.0.20

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/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;

package/dist/components/select/styles.js

@@ -3,16 +3,6 @@ import { componentSelect } from '../../styleD/build/typescript/component/select.
 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};
@@ -21,10 +11,10 @@ const popoverStyles = (theme) => {
 };
 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};
+		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};
@@ -41,9 +31,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 */
@@ -54,41 +44,29 @@ const listBoxItemStyles = (theme) => {
 };
 const listBoxStyles = (theme) => {
   return css`
-		${convertTypographyToEmotionStringStyle(theme.listBox.typography)}
-		background-color: ${theme.listBox.backgroundColor};
-		border: ${theme.listBox.border};
-		box-shadow: ${theme.listBox.shadow};
+		${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 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};
+		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};
+		${convertTypographyToEmotionStringStyle(theme.shared.button.typography)}
+		color: ${theme.shared.button.color};
 
 		&[data-hovered] {
 			background-color: ${theme.shared.hover.backgroundColor};
@@ -99,19 +77,19 @@ 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};` : ``}
 	`;
 };
 
-export { buttonStyles, defaultSelectTheme, helpTextStyles, labelStyles, listBoxItemStyles, listBoxStyles, popoverStyles, selectStyles };
+export { buttonStyles, defaultSelectTheme, listBoxItemStyles, listBoxStyles, popoverStyles };

package/dist/form.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var form = require('./styleD/build/typescript/component/form.cjs');
+
+
+
+exports.componentForm = form.componentForm;

package/dist/form.js

@@ -0,0 +1 @@
+export { componentForm } from './styleD/build/typescript/component/form.js';

package/dist/index.cjs

@@ -13,6 +13,7 @@ var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.c
 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 form = require('./styleD/build/typescript/component/form.cjs');
 var colors = require('./styleD/build/typescript/base/colors.cjs');
 var typography = require('./styleD/build/typescript/base/typography.cjs');
 var spacing = require('./styleD/build/typescript/base/spacing.cjs');
@@ -38,6 +39,7 @@ exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentSelect = select.componentSelect;
 exports.componentMenu = menu.componentMenu;
 exports.componentTopBar = TopBar.componentTopBar;
+exports.componentForm = form.componentForm;
 exports.baseColors = colors.baseColors;
 exports.baseTypography = typography.baseTypography;
 exports.baseSpacing = spacing.baseSpacing;

package/dist/index.js

@@ -11,6 +11,7 @@ export { componentInlineMessage } from './styleD/build/typescript/component/inli
 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 { componentForm } from './styleD/build/typescript/component/form.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
 export { baseSpacing } from './styleD/build/typescript/base/spacing.js';

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

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-form-input-shared-container-display: flex;
+	--component-form-input-shared-container-flex-direction: column;
+	--component-form-input-shared-container-gap: 0.25rem;
+	--component-form-input-shared-container-width: 100%;
+	--component-form-input-shared-label-color: #000000;
+	--component-form-input-shared-label-disabled-color: #999999;
+	--component-form-input-shared-description-color: #545454;
+	--component-form-input-shared-description-typography-font: normal 460
+		0.875rem/1.3 'Open Sans';
+	--component-form-input-shared-description-typography-letter-spacing: 0;
+	--component-form-input-shared-description-typography-font-width: 95;
+	--component-form-input-shared-description-disabled-color: #999999;
+	--component-form-input-sm-container-max-width: 200px;
+	--component-form-input-sm-label-typography-font: normal 700 0.875rem/1.15
+		'Open Sans';
+	--component-form-input-sm-label-typography-letter-spacing: -0.0125rem;
+	--component-form-input-sm-label-typography-font-width: 95;
+	--component-form-input-md-container-max-width: 320px;
+	--component-form-input-md-label-typography-font: normal 700 1rem/1.15
+		'Open Sans';
+	--component-form-input-md-label-typography-letter-spacing: -0.03125rem;
+	--component-form-input-md-label-typography-font-width: 95;
+}