@guardian/stand 0.0.18 → 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

@@ -0,0 +1,58 @@
+'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 Form = require('../form/Form.cjs');
+var Icon = require('../icon/Icon.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({
+  isInvalid,
+  theme = {},
+  children,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultSelectTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Form.FormInputContainer,
+    {
+      as: reactAriaComponents.Select,
+      size: "md",
+      isInvalid,
+      ...props,
+      children: [
+        /* @__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.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, 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 { buttonStyles, popoverStyles, 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({ isInvalid, theme = {}, children, ...props }) {
+  const mergedTheme = mergeDeep(defaultSelectTheme, theme);
+  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

@@ -0,0 +1,101 @@
+'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 popoverStyles = (theme) => {
+  return react.css`
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+	`;
+};
+const listBoxItemStyles = (theme) => {
+  return react.css`
+		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};
+		}
+
+		/* 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.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 */
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+	`;
+};
+const listBoxStyles = (theme) => {
+  return react.css`
+		${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 buttonStyles = (theme, isInvalid) => {
+  return react.css`
+		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};
+		}
+
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.shared.button.focused.outline};
+			outline-offset: ${theme.shared.button.focused["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			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.shared.button.error.border};` : ``}
+	`;
+};
+
+exports.buttonStyles = buttonStyles;
+exports.defaultSelectTheme = defaultSelectTheme;
+exports.listBoxItemStyles = listBoxItemStyles;
+exports.listBoxStyles = listBoxStyles;
+exports.popoverStyles = popoverStyles;

package/dist/components/select/styles.js

@@ -0,0 +1,95 @@
+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 popoverStyles = (theme) => {
+  return css`
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+	`;
+};
+const listBoxItemStyles = (theme) => {
+  return css`
+		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};
+		}
+
+		/* 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.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 */
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+	`;
+};
+const listBoxStyles = (theme) => {
+  return css`
+		${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 buttonStyles = (theme, isInvalid) => {
+  return css`
+		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};
+		}
+
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.shared.button.focused.outline};
+			outline-offset: ${theme.shared.button.focused["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			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.shared.button.error.border};` : ``}
+	`;
+};
+
+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

@@ -10,8 +10,10 @@ 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 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');
@@ -34,8 +36,10 @@ 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.componentForm = form.componentForm;
 exports.baseColors = colors.baseColors;
 exports.baseTypography = typography.baseTypography;
 exports.baseSpacing = spacing.baseSpacing;

package/dist/index.js

@@ -8,8 +8,10 @@ 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 { 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/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/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;
+}

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

@@ -0,0 +1,48 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-select-shared-max-width: 320px;
+	--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-shared-button-display: flex;
+	--component-select-shared-button-justify-content: space-between;
+	--component-select-shared-button-align-items: center;
+	--component-select-shared-button-margin-top: 0.25rem;
+	--component-select-shared-button-background-color: #ffffff;
+	--component-select-shared-button-border: 0.0625rem solid #545454;
+	--component-select-shared-button-border-radius: 0.25rem;
+	--component-select-shared-button-height: 2.5rem;
+	--component-select-shared-button-padding-left: 0.75rem;
+	--component-select-shared-button-padding-right: 0.25rem;
+	--component-select-shared-button-color: #545454;
+	--component-select-shared-button-typography-font: normal 460 1rem/1.3
+		'Open Sans';
+	--component-select-shared-button-typography-letter-spacing: 0;
+	--component-select-shared-button-typography-font-width: 95;
+	--component-select-shared-button-focused-outline: 0.125rem solid #0072a9;
+	--component-select-shared-button-focused-outline-offset: 0.125rem;
+	--component-select-shared-button-disabled-background-color: #ffffff;
+	--component-select-shared-button-disabled-cursor: not-allowed;
+	--component-select-shared-button-disabled-color: #999999;
+	--component-select-shared-button-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-select-shared-button-error-border: 0.0625rem solid #b42a19;
+	--component-select-shared-option-padding-left: 1rem;
+	--component-select-shared-option-padding-right: 1rem;
+	--component-select-shared-option-padding-top: 0.75rem;
+	--component-select-shared-option-padding-bottom: 0.75rem;
+	--component-select-shared-option-focused-outline: 0.125rem solid #0072a9;
+	--component-select-shared-option-focused-outline-offset: 0;
+	--component-select-shared-option-focused-background-color: inherit;
+	--component-select-shared-list-box-typography-font: normal 460 1rem/1.3
+		'Open Sans';
+	--component-select-shared-list-box-typography-letter-spacing: 0;
+	--component-select-shared-list-box-typography-font-width: 95;
+	--component-select-shared-list-box-border: 0.0625rem solid #cccccc;
+	--component-select-shared-list-box-background-color: #ffffff;
+	--component-select-shared-list-box-shadow: 0 0.125rem 0.375rem 0
+		rgb(0% 0% 0% / 0.3);
+}

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

@@ -0,0 +1,57 @@
+'use strict';
+
+const componentForm = {
+  input: {
+    shared: {
+      container: {
+        display: "flex",
+        "flex-direction": "column",
+        gap: "0.25rem",
+        width: "100%"
+      },
+      label: {
+        color: "#000000",
+        disabled: {
+          color: "#999999"
+        }
+      },
+      description: {
+        color: "#545454",
+        typography: {
+          font: "normal 460 0.875rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        },
+        disabled: {
+          color: "#999999"
+        }
+      }
+    },
+    sm: {
+      container: {
+        "max-width": "200px"
+      },
+      label: {
+        typography: {
+          font: "normal 700 0.875rem/1.15 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      }
+    },
+    md: {
+      container: {
+        "max-width": "320px"
+      },
+      label: {
+        typography: {
+          font: "normal 700 1rem/1.15 Open Sans",
+          letterSpacing: "-0.03125rem",
+          fontWidth: 95
+        }
+      }
+    }
+  }
+};
+
+exports.componentForm = componentForm;