@guardian/stand 0.0.17 → 0.0.19

package/dist/avatarButton.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var AvatarButton = require('./components/avatar-button/AvatarButton.cjs');
+
+
+
+exports.AvatarButton = AvatarButton.AvatarButton;

package/dist/avatarButton.js

@@ -0,0 +1 @@
+export { AvatarButton } from './components/avatar-button/AvatarButton.js';

package/dist/avatarLink.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var AvatarLink = require('./components/avatar-link/AvatarLink.cjs');
+
+
+
+exports.AvatarLink = AvatarLink.AvatarLink;

package/dist/avatarLink.js

@@ -0,0 +1 @@
+export { AvatarLink } from './components/avatar-link/AvatarLink.js';

package/dist/components/avatar/styles.cjs

@@ -25,6 +25,30 @@ const avatarStyles = (theme, { size, color }) => {
 		user-select: ${theme.shared["user-select"]};
 		color: ${theme.shared.color[color].text};
 		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+
+		&[data-avatar-context='interactive']:hover {
+			background-color: ${theme.shared.color[color][":hover"].background};
+
+			:has(> img) {
+				background-color: black;
+			}
+
+			img {
+				mask-image: linear-gradient(rgb(0 0 0 / 70%), rgb(0 0 0 / 70%));
+			}
+		}
+
+		&[data-avatar-context='interactive']:active {
+			background-color: ${theme.shared.color[color][":active"].background};
+
+			:has(> img) {
+				background-color: black;
+			}
+
+			img {
+				mask-image: linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%));
+			}
+		}
 	`;
 };
 

package/dist/components/avatar/styles.js

@@ -23,6 +23,30 @@ const avatarStyles = (theme, { size, color }) => {
 		user-select: ${theme.shared["user-select"]};
 		color: ${theme.shared.color[color].text};
 		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+
+		&[data-avatar-context='interactive']:hover {
+			background-color: ${theme.shared.color[color][":hover"].background};
+
+			:has(> img) {
+				background-color: black;
+			}
+
+			img {
+				mask-image: linear-gradient(rgb(0 0 0 / 70%), rgb(0 0 0 / 70%));
+			}
+		}
+
+		&[data-avatar-context='interactive']:active {
+			background-color: ${theme.shared.color[color][":active"].background};
+
+			:has(> img) {
+				background-color: black;
+			}
+
+			img {
+				mask-image: linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 60%));
+			}
+		}
 	`;
 };
 

package/dist/components/avatar-button/AvatarButton.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Avatar = require('../avatar/Avatar.cjs');
+var styles = require('./styles.cjs');
+
+function AvatarButton(props) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultAvatarButtonTheme, props.theme ?? {});
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { css: styles.avatarButtonStyles(mergedTheme), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { ...props, "data-avatar-context": "interactive" }) });
+}
+
+exports.AvatarButton = AvatarButton;

package/dist/components/avatar-button/AvatarButton.js

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Button } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Avatar } from '../avatar/Avatar.js';
+import { defaultAvatarButtonTheme, avatarButtonStyles } from './styles.js';
+
+function AvatarButton(props) {
+  const mergedTheme = mergeDeep(defaultAvatarButtonTheme, props.theme ?? {});
+  return jsx(Button, { css: avatarButtonStyles(mergedTheme), ...props, children: jsx(Avatar, { ...props, "data-avatar-context": "interactive" }) });
+}
+
+export { AvatarButton };

package/dist/components/avatar-button/styles.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var react = require('@emotion/react');
+var styles = require('../avatar/styles.cjs');
+
+const defaultAvatarButtonTheme = styles.defaultAvatarTheme;
+const avatarButtonStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.link.width};
+		background: ${theme.shared.button.background};
+		border: ${theme.shared.button.border};
+		padding: ${theme.shared.button.padding};
+		cursor: ${theme.shared.button.cursor};
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared.link[":focus-visible"].outline};
+			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
+			border-radius: ${theme.shared["border-radius"]};
+		}
+		&[data-disabled],
+		&:disabled {
+			cursor: ${theme.shared.button[":disabled"].cursor};
+		}
+	`;
+};
+
+exports.avatarButtonStyles = avatarButtonStyles;
+exports.defaultAvatarButtonTheme = defaultAvatarButtonTheme;

package/dist/components/avatar-button/styles.js

@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+import { defaultAvatarTheme } from '../avatar/styles.js';
+
+const defaultAvatarButtonTheme = defaultAvatarTheme;
+const avatarButtonStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.link.width};
+		background: ${theme.shared.button.background};
+		border: ${theme.shared.button.border};
+		padding: ${theme.shared.button.padding};
+		cursor: ${theme.shared.button.cursor};
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared.link[":focus-visible"].outline};
+			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
+			border-radius: ${theme.shared["border-radius"]};
+		}
+		&[data-disabled],
+		&:disabled {
+			cursor: ${theme.shared.button[":disabled"].cursor};
+		}
+	`;
+};
+
+export { avatarButtonStyles, defaultAvatarButtonTheme };

package/dist/components/avatar-link/AvatarLink.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Avatar = require('../avatar/Avatar.cjs');
+var styles = require('./styles.cjs');
+
+function AvatarLink(props) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultAvatarLinkTheme, props.theme ?? {});
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Link, { css: styles.avatarLinkStyles(mergedTheme), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { ...props, "data-avatar-context": "interactive" }) });
+}
+
+exports.AvatarLink = AvatarLink;

package/dist/components/avatar-link/AvatarLink.js

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Link } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Avatar } from '../avatar/Avatar.js';
+import { defaultAvatarLinkTheme, avatarLinkStyles } from './styles.js';
+
+function AvatarLink(props) {
+  const mergedTheme = mergeDeep(defaultAvatarLinkTheme, props.theme ?? {});
+  return jsx(Link, { css: avatarLinkStyles(mergedTheme), ...props, children: jsx(Avatar, { ...props, "data-avatar-context": "interactive" }) });
+}
+
+export { AvatarLink };

package/dist/components/avatar-link/styles.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var react = require('@emotion/react');
+var styles = require('../avatar/styles.cjs');
+
+const defaultAvatarLinkTheme = styles.defaultAvatarTheme;
+const avatarLinkStyles = (theme) => {
+  return react.css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.link.width};
+
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared.link[":focus-visible"].outline};
+			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
+			border-radius: ${theme.shared["border-radius"]};
+		}
+
+		text-decoration: ${theme.shared.link["text-decoration"]};
+	`;
+};
+
+exports.avatarLinkStyles = avatarLinkStyles;
+exports.defaultAvatarLinkTheme = defaultAvatarLinkTheme;

package/dist/components/avatar-link/styles.js

@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+import { defaultAvatarTheme } from '../avatar/styles.js';
+
+const defaultAvatarLinkTheme = defaultAvatarTheme;
+const avatarLinkStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		width: ${theme.shared.link.width};
+
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared.link[":focus-visible"].outline};
+			outline-offset: ${theme.shared.link[":focus-visible"]["outline-offset"]};
+			border-radius: ${theme.shared["border-radius"]};
+		}
+
+		text-decoration: ${theme.shared.link["text-decoration"]};
+	`;
+};
+
+export { avatarLinkStyles, defaultAvatarLinkTheme };

package/dist/components/inline-message/InlineMessage.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Icon = require('../icon/Icon.cjs');
+var Typography = require('../typography/Typography.cjs');
+var styles = require('./styles.cjs');
+
+function InlineMessage({
+  children,
+  level,
+  hideIcon = false,
+  icon,
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultInlineMessageTheme, theme);
+  const determinedIcon = React.useMemo(() => {
+    if (icon) {
+      return icon;
+    }
+    switch (level) {
+      case "error":
+        return "warning";
+      case "success":
+        return "check_circle";
+      case "information":
+      default:
+        return "info";
+    }
+  }, [icon, level]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      css: [styles.inlineMessageStyles(mergedTheme, { level }), cssOverrides],
+      className,
+      ...props,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { fill: mergedTheme[level].color, size: "md", children: determinedIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.Typography,
+          {
+            variant: "help-text-form-md",
+            theme: { color: mergedTheme[level].color },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.InlineMessage = InlineMessage;

package/dist/components/inline-message/InlineMessage.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useMemo } from 'react';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { Icon } from '../icon/Icon.js';
+import { Typography } from '../typography/Typography.js';
+import { inlineMessageStyles, defaultInlineMessageTheme } from './styles.js';
+
+function InlineMessage({ children, level, hideIcon = false, icon, theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultInlineMessageTheme, theme);
+  const determinedIcon = useMemo(() => {
+    if (icon) {
+      return icon;
+    }
+    switch (level) {
+      case "error":
+        return "warning";
+      case "success":
+        return "check_circle";
+      case "information":
+      default:
+        return "info";
+    }
+  }, [icon, level]);
+  return jsxs("div", { css: [inlineMessageStyles(mergedTheme, { level }), cssOverrides], className, ...props, children: [!hideIcon && jsx(Icon, { fill: mergedTheme[level].color, size: "md", children: determinedIcon }), jsx(Typography, { variant: "help-text-form-md", theme: { color: mergedTheme[level].color }, children })] });
+}
+
+export { InlineMessage };

package/dist/components/inline-message/styles.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var react = require('@emotion/react');
+var inlineMessage = require('../../styleD/build/typescript/component/inlineMessage.cjs');
+
+const defaultInlineMessageTheme = inlineMessage.componentInlineMessage;
+const inlineMessageStyles = (theme, { level }) => {
+  return react.css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared["align-items"]};
+		gap: ${theme.shared.gap};
+		color: ${theme[level].color};
+	`;
+};
+
+exports.defaultInlineMessageTheme = defaultInlineMessageTheme;
+exports.inlineMessageStyles = inlineMessageStyles;

package/dist/components/inline-message/styles.js

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import { componentInlineMessage } from '../../styleD/build/typescript/component/inlineMessage.js';
+
+const defaultInlineMessageTheme = componentInlineMessage;
+const inlineMessageStyles = (theme, { level }) => {
+  return css`
+		display: ${theme.shared.display};
+		align-items: ${theme.shared["align-items"]};
+		gap: ${theme.shared.gap};
+		color: ${theme[level].color};
+	`;
+};
+
+export { defaultInlineMessageTheme, inlineMessageStyles };

package/dist/components/select/Select.cjs

@@ -0,0 +1,67 @@
+'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 Icon = require('../icon/Icon.cjs');
+var InlineMessage = require('../inline-message/InlineMessage.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({
+  children,
+  label,
+  contextualHelpText,
+  theme = {},
+  cssOverrides,
+  className,
+  isInvalid,
+  errorMessage,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultSelectTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Select,
+    {
+      css: [styles.selectStyles(mergedTheme), cssOverrides],
+      className,
+      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 }) })
+      ]
+    }
+  );
+}
+
+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, Label, Button, SelectValue, FieldError, Popover, ListBox as ListBox$1, ListBoxItem } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.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';
+
+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({ children, label, contextualHelpText, theme = {}, cssOverrides, className, isInvalid, errorMessage, ...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 }) })] });
+}
+
+export { Option, Select };

package/dist/components/select/styles.cjs

@@ -0,0 +1,126 @@
+'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 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};
+		width: ${theme.shared.width};
+	`;
+};
+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};
+
+		&[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.option.focused.outline};
+			outline-offset: ${theme.option.focused["outline-offset"]};
+			background-color: ${theme.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.listBox.typography)}
+		background-color: ${theme.listBox.backgroundColor};
+		border: ${theme.listBox.border};
+		box-shadow: ${theme.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};
+
+		&[data-hovered] {
+			background-color: ${theme.shared.hover.backgroundColor};
+		}
+
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.button.focused.outline};
+			outline-offset: ${theme.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};
+		}
+
+		${isInvalid ? `border: ${theme.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;