@guardian/stand 0.0.47 → 0.0.49

package/dist/components/Form/Form.cjs

@@ -5,11 +5,11 @@ const require_types = require("./types.cjs");
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
 //#region src/components/Form/Form.tsx
-function FormInputContainer({ as: Component, size = "md", label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
+function FormInputContainer({ as: Component, size = "md", fluid = false, label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
 	if (!require_types.ALLOWED_FORM_CONTAINERS.includes(Component)) return null;
 	const mergedTheme = require_mergeDeep.mergeDeep(require_mergeDeep.mergeDeep(require_styles.defaultFormInputContainerTheme, theme), formInputContainerTheme ?? {});
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Component, {
-		css: [require_styles.formInputContainerStyles(mergedTheme), cssOverrides],
+		css: [require_styles.formInputContainerStyles(mergedTheme, { fluid }), cssOverrides],
 		isDisabled,
 		...props,
 		children: [

package/dist/components/Form/Form.js

@@ -5,11 +5,11 @@ import { ALLOWED_FORM_CONTAINERS } from "./types.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { FieldError, Label } from "react-aria-components";
 //#region src/components/Form/Form.tsx
-function FormInputContainer({ as: Component, size = "md", label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
+function FormInputContainer({ as: Component, size = "md", fluid = false, label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
 	if (!ALLOWED_FORM_CONTAINERS.includes(Component)) return null;
 	const mergedTheme = mergeDeep(mergeDeep(defaultFormInputContainerTheme, theme), formInputContainerTheme ?? {});
 	return /* @__PURE__ */ jsxs(Component, {
-		css: [formInputContainerStyles(mergedTheme), cssOverrides],
+		css: [formInputContainerStyles(mergedTheme, { fluid }), cssOverrides],
 		isDisabled,
 		...props,
 		children: [

package/dist/components/Form/styles.cjs

@@ -3,12 +3,15 @@ const require_form = require("../../styleD/build/typescript/component/form.cjs")
 let _emotion_react = require("@emotion/react");
 //#region src/components/Form/styles.ts
 const defaultFormInputContainerTheme = require_form.componentForm.input;
-const formInputContainerStyles = (theme) => {
+const formInputContainerStyles = (theme, { fluid }) => {
 	return _emotion_react.css`
 		display: ${theme.shared.container.display};
 		flex-direction: ${theme.shared.container.flexDirection};
 		gap: ${theme.shared.container.gap};
 		width: ${theme.shared.container.width};
+		${!fluid && _emotion_react.css`
+			max-width: ${theme.shared.container.maxWidth};
+		`}
 	`;
 };
 const formInputLabelStyles = (theme, { isDisabled, size }) => {

package/dist/components/Form/styles.js

@@ -3,12 +3,15 @@ import { componentForm } from "../../styleD/build/typescript/component/form.js";
 import { css } from "@emotion/react";
 //#region src/components/Form/styles.ts
 const defaultFormInputContainerTheme = componentForm.input;
-const formInputContainerStyles = (theme) => {
+const formInputContainerStyles = (theme, { fluid }) => {
 	return css`
 		display: ${theme.shared.container.display};
 		flex-direction: ${theme.shared.container.flexDirection};
 		gap: ${theme.shared.container.gap};
 		width: ${theme.shared.container.width};
+		${!fluid && css`
+			max-width: ${theme.shared.container.maxWidth};
+		`}
 	`;
 };
 const formInputLabelStyles = (theme, { isDisabled, size }) => {

package/dist/components/Form/types.d.cts

@@ -10,6 +10,10 @@ type FormInputContainerDefaultProps<ReactAriaInput extends {
    * The size of the form input, 'md' (default) or 'sm'.
    */
   size?: keyof Omit<ComponentTheme, 'shared'>;
+  /**
+   * Whether the form input should take up the full width of its container. Defaults to false, which applies a max-width to the input for better readability.
+   */
+  fluid?: boolean;
   /**
    * The label text for the form field.
    */

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

@@ -10,6 +10,10 @@ type FormInputContainerDefaultProps<ReactAriaInput extends {
    * The size of the form input, 'md' (default) or 'sm'.
    */
   size?: keyof Omit<ComponentTheme, 'shared'>;
+  /**
+   * Whether the form input should take up the full width of its container. Defaults to false, which applies a max-width to the input for better readability.
+   */
+  fluid?: boolean;
   /**
    * The label text for the form field.
    */

package/dist/components/Select/Select.cjs

@@ -8,18 +8,26 @@ react = require_runtime.__toESM(react);
 let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
 let react_aria_components = require("react-aria-components");
 //#region src/components/Select/Select.tsx
-function Option({ children, theme = {} }) {
+function Option({ children, theme = {}, id, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
+	const resolvedId = id ?? children;
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBoxItem, {
-		css: require_styles.listBoxItemStyles(require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme)),
+		css: require_styles.listBoxItemStyles(mergedTheme),
+		id: resolvedId,
+		...props,
 		children
 	});
 }
 function ListBox({ children, theme = {} }) {
 	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
 	const items = [];
-	react.default.Children.forEach(children, (child, i) => {
+	react.default.Children.forEach(children, (child, index) => {
 		if (!react.default.isValidElement(child)) return;
-		if (child.type === Option) items.push(react.default.cloneElement(child, { key: `${child.key}-${i}` }));
+		if (child.type === Option) {
+			const optionChild = child;
+			const key = `${optionChild.props.id ?? optionChild.props.children}-${index}`;
+			items.push(react.default.cloneElement(optionChild, { key }));
+		}
 	});
 	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBox, {
 		css: require_styles.listBoxStyles(mergedTheme),
@@ -40,8 +48,13 @@ function Select({ isInvalid, theme = {}, children, ...props }) {
 				size: "lg"
 			})]
 		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
-			css: require_styles.popoverStyles(mergedTheme),
-			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, { children })
+			css: require_styles.popoverStyles(),
+			offset: mergedTheme.shared.offset,
+			containerPadding: mergedTheme.shared.containerPadding,
+			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, {
+				theme: mergedTheme,
+				children
+			})
 		})]
 	});
 }

package/dist/components/Select/Select.d.cts

@@ -3,7 +3,9 @@ import { OptionProps, SelectProps } from "./types.cjs";
 //#region src/components/Select/Select.d.ts
 declare function Option({
   children,
-  theme
+  theme,
+  id,
+  ...props
 }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function Select({
   isInvalid,

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

@@ -3,7 +3,9 @@ import { OptionProps, SelectProps } from "./types.js";
 //#region src/components/Select/Select.d.ts
 declare function Option({
   children,
-  theme
+  theme,
+  id,
+  ...props
 }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare function Select({
   isInvalid,

package/dist/components/Select/Select.js

@@ -6,18 +6,26 @@ import React from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Button, ListBox, ListBoxItem, Popover, Select, SelectValue } from "react-aria-components";
 //#region src/components/Select/Select.tsx
-function Option({ children, theme = {} }) {
+function Option({ children, theme = {}, id, ...props }) {
+	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
+	const resolvedId = id ?? children;
 	return /* @__PURE__ */ jsx(ListBoxItem, {
-		css: listBoxItemStyles(mergeDeep(defaultSelectTheme, theme)),
+		css: listBoxItemStyles(mergedTheme),
+		id: resolvedId,
+		...props,
 		children
 	});
 }
 function ListBox$1({ children, theme = {} }) {
 	const mergedTheme = mergeDeep(defaultSelectTheme, theme);
 	const items = [];
-	React.Children.forEach(children, (child, i) => {
+	React.Children.forEach(children, (child, index) => {
 		if (!React.isValidElement(child)) return;
-		if (child.type === Option) items.push(React.cloneElement(child, { key: `${child.key}-${i}` }));
+		if (child.type === Option) {
+			const optionChild = child;
+			const key = `${optionChild.props.id ?? optionChild.props.children}-${index}`;
+			items.push(React.cloneElement(optionChild, { key }));
+		}
 	});
 	return /* @__PURE__ */ jsx(ListBox, {
 		css: listBoxStyles(mergedTheme),
@@ -38,8 +46,13 @@ function Select$1({ isInvalid, theme = {}, children, ...props }) {
 				size: "lg"
 			})]
 		}), /* @__PURE__ */ jsx(Popover, {
-			css: popoverStyles(mergedTheme),
-			children: /* @__PURE__ */ jsx(ListBox$1, { children })
+			css: popoverStyles(),
+			offset: mergedTheme.shared.offset,
+			containerPadding: mergedTheme.shared.containerPadding,
+			children: /* @__PURE__ */ jsx(ListBox$1, {
+				theme: mergedTheme,
+				children
+			})
 		})]
 	});
 }

package/dist/components/Select/styles.cjs

@@ -3,9 +3,10 @@ const require_select = require("../../styleD/build/typescript/component/select.c
 let _emotion_react = require("@emotion/react");
 //#region src/components/Select/styles.ts
 const defaultSelectTheme = require_select.componentSelect;
-const popoverStyles = (theme) => {
+const popoverStyles = () => {
 	return _emotion_react.css`
-		width: ${theme.shared.width};
+		/* width must be determined by the react-aria popover --trigger-width variable */
+		width: var(--trigger-width);
 	`;
 };
 const listBoxItemStyles = (theme) => {

package/dist/components/Select/styles.js

@@ -3,9 +3,10 @@ import { componentSelect } from "../../styleD/build/typescript/component/select.
 import { css } from "@emotion/react";
 //#region src/components/Select/styles.ts
 const defaultSelectTheme = componentSelect;
-const popoverStyles = (theme) => {
+const popoverStyles = () => {
 	return css`
-		width: ${theme.shared.width};
+		/* width must be determined by the react-aria popover --trigger-width variable */
+		width: var(--trigger-width);
 	`;
 };
 const listBoxItemStyles = (theme) => {

package/dist/components/Select/types.d.cts

@@ -4,7 +4,7 @@ import { SelectTheme } from "./styles.cjs";
 import { ListBoxItemProps, SelectProps } from "react-aria-components";
 
 //#region src/components/Select/types.d.ts
-interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className']>, Omit<ListBoxItemProps, 'children'> {}
+interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className'], string>, Omit<ListBoxItemProps, 'children'> {}
 type SelectProps$1 = FormInputContainerDefaultProps<SelectProps<object, 'single' | 'multiple'>, SelectTheme>;
 //#endregion
 export { OptionProps, SelectProps$1 as SelectProps };

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

@@ -4,7 +4,7 @@ import { SelectTheme } from "./styles.js";
 import { ListBoxItemProps, SelectProps } from "react-aria-components";
 
 //#region src/components/Select/types.d.ts
-interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className']>, Omit<ListBoxItemProps, 'children'> {}
+interface OptionProps extends DefaultPropsWithChildren<SelectTheme, ListBoxItemProps['className'], string>, Omit<ListBoxItemProps, 'children'> {}
 type SelectProps$1 = FormInputContainerDefaultProps<SelectProps<object, 'single' | 'multiple'>, SelectTheme>;
 //#endregion
 export { OptionProps, SelectProps$1 as SelectProps };

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

@@ -7,6 +7,7 @@
 	--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-container-max-width: 450px;
 	--component-form-input-shared-label-color: #000000;
 	--component-form-input-shared-label-disabled-color: #999999;
 	--component-form-input-shared-description-color: #545454;

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

@@ -21,7 +21,5 @@
 	--component-intended-audience-signifier-chevron-fill: #545454;
 	--component-intended-audience-signifier-chevron-size: 10px;
 	--component-intended-audience-signifier-color: #545454;
-	--component-intended-audience-signifier-typography-font: normal 460
-		0.75rem/1.3 'Open Sans';
 	--component-intended-audience-signifier-typography-line-height: 1;
 }

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

@@ -4,6 +4,8 @@
 
 :root {
 	--component-select-shared-width: 100%;
+	--component-select-shared-offset: 8;
+	--component-select-shared-container-padding: 0;
 	--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;

package/dist/styleD/build/css/semantic/colors.css

@@ -28,6 +28,10 @@
 	--semantic-colors-bg-raised-level1: #f6f6f6;
 	--semantic-colors-bg-raised-level2: #ededed;
 	--semantic-colors-bg-raised-level3: #e6e6e6;
+	--semantic-colors-bg-base-inverse: #000000;
+	--semantic-colors-bg-raised-level1-inverse: #333333;
+	--semantic-colors-bg-raised-level2-inverse: #545454;
+	--semantic-colors-bg-raised-level3-inverse: #666666;
 	--semantic-colors-border-stronger: #545454;
 	--semantic-colors-border-strong: #8d8d8d;
 	--semantic-colors-border-weak: #cccccc;

package/dist/styleD/build/css/semantic/sizing.css

@@ -18,4 +18,5 @@
 	--semantic-sizing-sidebar-md-px: 200px;
 	--semantic-sizing-sidebar-lg-px: 280px;
 	--semantic-sizing-layout-max-width-px: 1584px;
+	--semantic-sizing-input-max-width-px: 450px;
 }

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

@@ -8,7 +8,8 @@ const componentForm = { input: {
 			display: "flex",
 			flexDirection: "column",
 			gap: "0.25rem",
-			width: "100%"
+			width: "100%",
+			maxWidth: "450px"
 		},
 		label: {
 			color: "#000000",

package/dist/styleD/build/typescript/component/form.d.cts

@@ -10,6 +10,7 @@ declare const componentForm: {
         flexDirection: string;
         gap: string;
         width: string;
+        maxWidth: string;
       };
       label: {
         color: string;

package/dist/styleD/build/typescript/component/form.d.ts

@@ -10,6 +10,7 @@ declare const componentForm: {
         flexDirection: string;
         gap: string;
         width: string;
+        maxWidth: string;
       };
       label: {
         color: string;

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

@@ -8,7 +8,8 @@ const componentForm = { input: {
 			display: "flex",
 			flexDirection: "column",
 			gap: "0.25rem",
-			width: "100%"
+			width: "100%",
+			maxWidth: "450px"
 		},
 		label: {
 			color: "#000000",

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

@@ -4,6 +4,8 @@
 */
 const componentSelect = { shared: {
 	width: "100%",
+	offset: 8,
+	containerPadding: 0,
 	hover: {
 		backgroundColor: "#f6f6f6",
 		outline: "none"

package/dist/styleD/build/typescript/component/select.d.cts

@@ -5,6 +5,8 @@
 declare const componentSelect: {
   shared: {
     width: string;
+    offset: number;
+    containerPadding: number;
     hover: {
       backgroundColor: string;
       outline: string;

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

@@ -5,6 +5,8 @@
 declare const componentSelect: {
   shared: {
     width: string;
+    offset: number;
+    containerPadding: number;
     hover: {
       backgroundColor: string;
       outline: string;

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

@@ -4,6 +4,8 @@
 */
 const componentSelect = { shared: {
 	width: "100%",
+	offset: 8,
+	containerPadding: 0,
 	hover: {
 		backgroundColor: "#f6f6f6",
 		outline: "none"

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -30,7 +30,11 @@ const semanticColors = {
 		base: "#ffffff",
 		raisedLevel1: "#f6f6f6",
 		raisedLevel2: "#ededed",
-		raisedLevel3: "#e6e6e6"
+		raisedLevel3: "#e6e6e6",
+		baseInverse: "#000000",
+		raisedLevel1Inverse: "#333333",
+		raisedLevel2Inverse: "#545454",
+		raisedLevel3Inverse: "#666666"
 	},
 	border: {
 		stronger: "#545454",

package/dist/styleD/build/typescript/semantic/colors.d.cts

@@ -31,6 +31,10 @@ declare const semanticColors: {
     raisedLevel1: string;
     raisedLevel2: string;
     raisedLevel3: string;
+    baseInverse: string;
+    raisedLevel1Inverse: string;
+    raisedLevel2Inverse: string;
+    raisedLevel3Inverse: string;
   };
   border: {
     stronger: string;

package/dist/styleD/build/typescript/semantic/colors.d.ts

@@ -31,6 +31,10 @@ declare const semanticColors: {
     raisedLevel1: string;
     raisedLevel2: string;
     raisedLevel3: string;
+    baseInverse: string;
+    raisedLevel1Inverse: string;
+    raisedLevel2Inverse: string;
+    raisedLevel3Inverse: string;
   };
   border: {
     stronger: string;

package/dist/styleD/build/typescript/semantic/colors.js

@@ -30,7 +30,11 @@ const semanticColors = {
 		base: "#ffffff",
 		raisedLevel1: "#f6f6f6",
 		raisedLevel2: "#ededed",
-		raisedLevel3: "#e6e6e6"
+		raisedLevel3: "#e6e6e6",
+		baseInverse: "#000000",
+		raisedLevel1Inverse: "#333333",
+		raisedLevel2Inverse: "#545454",
+		raisedLevel3Inverse: "#666666"
 	},
 	border: {
 		stronger: "#545454",

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -25,7 +25,8 @@ const semanticSizing = {
 		mdPx: "200px",
 		lgPx: "280px"
 	},
-	layout: { maxWidthPx: "1584px" }
+	layout: { maxWidthPx: "1584px" },
+	input: { maxWidthPx: "450px" }
 };
 //#endregion
 exports.semanticSizing = semanticSizing;

package/dist/styleD/build/typescript/semantic/sizing.d.cts

@@ -28,6 +28,9 @@ declare const semanticSizing: {
   layout: {
     maxWidthPx: string;
   };
+  input: {
+    maxWidthPx: string;
+  };
 };
 type SemanticSizing = typeof semanticSizing;
 //#endregion

package/dist/styleD/build/typescript/semantic/sizing.d.ts

@@ -28,6 +28,9 @@ declare const semanticSizing: {
   layout: {
     maxWidthPx: string;
   };
+  input: {
+    maxWidthPx: string;
+  };
 };
 type SemanticSizing = typeof semanticSizing;
 //#endregion

package/dist/styleD/build/typescript/semantic/sizing.js

@@ -25,7 +25,8 @@ const semanticSizing = {
 		mdPx: "200px",
 		lgPx: "280px"
 	},
-	layout: { maxWidthPx: "1584px" }
+	layout: { maxWidthPx: "1584px" },
+	input: { maxWidthPx: "450px" }
 };
 //#endregion
 export { semanticSizing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "repository": {
     "url": "https://github.com/guardian/stand"
   },