@guardian/stand 0.0.19 → 0.0.21

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/components/text-input/TextInput.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Form = require('../form/Form.cjs');
+var styles = require('./styles.cjs');
+
+function TextInput({
+  size = "md",
+  isInvalid = false,
+  theme = {},
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTextInputTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form.FormInputContainer,
+    {
+      as: reactAriaComponents.TextField,
+      size,
+      isInvalid,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Input, { css: styles.textInputStyles(mergedTheme, { size, isInvalid }) })
+    }
+  );
+}
+
+exports.TextInput = TextInput;

package/dist/components/text-input/TextInput.js

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { TextField, Input } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { FormInputContainer } from '../form/Form.js';
+import { textInputStyles, defaultTextInputTheme } from './styles.js';
+
+function TextInput({ size = "md", isInvalid = false, theme = {}, ...props }) {
+  const mergedTheme = mergeDeep(defaultTextInputTheme, theme);
+  return jsx(FormInputContainer, { as: TextField, size, isInvalid, ...props, children: jsx(Input, { css: textInputStyles(mergedTheme, { size, isInvalid }) }) });
+}
+
+export { TextInput };

package/dist/components/text-input/styles.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var react = require('@emotion/react');
+var textInput = require('../../styleD/build/typescript/component/textInput.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultTextInputTheme = textInput.componentTextInput;
+const textInputStyles = (theme, { size, isInvalid }) => {
+  return react.css`
+		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+		background-color: ${theme.shared["background-color"]};
+		border-radius: ${theme.shared["border-radius"]};
+		border: ${theme.shared.border};
+		color: ${theme.shared.color};
+		cursor: ${theme.shared.cursor};
+		height: ${theme[size].height};
+		margin-top: ${theme.shared["margin-top"]};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		&[data-disabled] {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+		}
+
+		${isInvalid && react.css`
+			border: ${theme.shared.error.border};
+		`}
+	`;
+};
+
+exports.defaultTextInputTheme = defaultTextInputTheme;
+exports.textInputStyles = textInputStyles;

package/dist/components/text-input/styles.js

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import { componentTextInput } from '../../styleD/build/typescript/component/textInput.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultTextInputTheme = componentTextInput;
+const textInputStyles = (theme, { size, isInvalid }) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+		background-color: ${theme.shared["background-color"]};
+		border-radius: ${theme.shared["border-radius"]};
+		border: ${theme.shared.border};
+		color: ${theme.shared.color};
+		cursor: ${theme.shared.cursor};
+		height: ${theme[size].height};
+		margin-top: ${theme.shared["margin-top"]};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		&[data-disabled] {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+		}
+
+		${isInvalid && css`
+			border: ${theme.shared.error.border};
+		`}
+	`;
+};
+
+export { defaultTextInputTheme, textInputStyles };

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

@@ -9,10 +9,12 @@ var button = require('./styleD/build/typescript/component/button.cjs');
 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 textInput = require('./styleD/build/typescript/component/textInput.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,10 +36,12 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentTextInput = textInput.componentTextInput;
 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

@@ -7,10 +7,12 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
+export { componentTextInput } from './styleD/build/typescript/component/textInput.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/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/menu.css

@@ -63,9 +63,11 @@
 	--component-menu-menu-item-shared-aside-typography-font-width: 95;
 	--component-menu-menu-item-shared-last-child-border-bottom: none;
 	--component-menu-menu-item-shared-hover-background-color: #f6f6f6;
+	--component-menu-menu-item-shared-hover-outline: none; /** Override outline focus styles on hover */
 	--component-menu-menu-item-shared-focus-visible-outline: 0.125rem solid
 		#0072a9;
 	--component-menu-menu-item-shared-focus-visible-outline-offset: -0.125rem;
+	--component-menu-menu-item-shared-pressed-background-color: #ededed;
 	--component-menu-menu-item-sm-icon-size: 1.125rem;
 	--component-menu-menu-item-sm-icon-line-height: 1.3;
 	--component-menu-menu-item-md-icon-size: 1.25rem;

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

@@ -3,55 +3,46 @@
  */
 
 :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-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-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
+	--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-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);
+	--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/css/component/textInput.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-text-input-shared-color: #000000;
+	--component-text-input-shared-cursor: text;
+	--component-text-input-shared-padding-top: 0;
+	--component-text-input-shared-padding-right: 0.75rem;
+	--component-text-input-shared-padding-bottom: 0;
+	--component-text-input-shared-padding-left: 0.75rem;
+	--component-text-input-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-text-input-shared-border-radius: 0.25rem;
+	--component-text-input-shared-border: 0.0625rem solid #545454;
+	--component-text-input-shared-background-color: #ffffff;
+	--component-text-input-shared-disabled-background-color: #ffffff;
+	--component-text-input-shared-disabled-cursor: not-allowed;
+	--component-text-input-shared-disabled-color: #999999;
+	--component-text-input-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-text-input-shared-error-border: 0.0625rem solid #b42a19;
+	--component-text-input-sm-height: 2rem;
+	--component-text-input-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
+	--component-text-input-sm-typography-letter-spacing: 0;
+	--component-text-input-sm-typography-font-width: 95;
+	--component-text-input-md-height: 2.5rem;
+	--component-text-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-text-input-md-typography-letter-spacing: 0;
+	--component-text-input-md-typography-font-width: 95;
+}

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;

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

@@ -0,0 +1,55 @@
+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
+        }
+      }
+    }
+  }
+};
+
+export { componentForm };

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

@@ -95,11 +95,15 @@ const componentMenu = {
         "border-bottom": "none"
       },
       ":hover": {
-        "background-color": "#f6f6f6"
+        "background-color": "#f6f6f6",
+        outline: "none"
       },
       ":focus-visible": {
         outline: "0.125rem solid #0072a9",
         "outline-offset": "-0.125rem"
+      },
+      ":pressed": {
+        "background-color": "#ededed"
       }
     },
     sm: {

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

@@ -93,11 +93,15 @@ const componentMenu = {
         "border-bottom": "none"
       },
       ":hover": {
-        "background-color": "#f6f6f6"
+        "background-color": "#f6f6f6",
+        outline: "none"
       },
       ":focus-visible": {
         outline: "0.125rem solid #0072a9",
         "outline-offset": "-0.125rem"
+      },
+      ":pressed": {
+        "background-color": "#ededed"
       }
     },
     sm: {