@guardian/stand 0.0.31 → 0.0.33

package/dist/components/form/types.js

@@ -1,10 +1,11 @@
-import { TextField, Select, RadioGroup, CheckboxGroup } from 'react-aria-components';
+import { TextField, Select, RadioGroup, CheckboxGroup, DatePicker } from 'react-aria-components';
 
 const ALLOWED_FORM_CONTAINERS = [
   TextField,
   Select,
   RadioGroup,
-  CheckboxGroup
+  CheckboxGroup,
+  DatePicker
 ];
 
 export { ALLOWED_FORM_CONTAINERS };

package/dist/components/link/Link.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var colors = require('../../styleD/build/typescript/semantic/colors.cjs');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var styles = require('../typography/styles.cjs');
+var styles$1 = require('./styles.cjs');
+
+function Link({
+  children,
+  typography = "body-sm",
+  theme = {},
+  cssOverrides,
+  className,
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles$1.defaultLinkTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Link,
+    {
+      css: [
+        styles.typographyStyles(
+          { color: colors.semanticColors.text.strong },
+          { variant: typography }
+        ),
+        styles$1.linkStyles(mergedTheme),
+        cssOverrides
+      ],
+      className,
+      ...props,
+      children
+    }
+  );
+}
+
+exports.Link = Link;

package/dist/components/link/Link.js

@@ -0,0 +1,17 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Link as Link$1 } from 'react-aria-components';
+import { semanticColors } from '../../styleD/build/typescript/semantic/colors.js';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { typographyStyles } from '../typography/styles.js';
+import { linkStyles, defaultLinkTheme } from './styles.js';
+
+function Link({ children, typography = "body-sm", theme = {}, cssOverrides, className, ...props }) {
+  const mergedTheme = mergeDeep(defaultLinkTheme, theme);
+  return jsx(Link$1, { css: [
+    typographyStyles({ color: semanticColors.text.strong }, { variant: typography }),
+    linkStyles(mergedTheme),
+    cssOverrides
+  ], className, ...props, children });
+}
+
+export { Link };

package/dist/components/link/styles.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var react = require('@emotion/react');
+var link = require('../../styleD/build/typescript/component/link.cjs');
+
+const defaultLinkTheme = link.componentLink;
+const linkStyles = (theme) => {
+  return react.css`
+		text-decoration: underline;
+		text-decoration-style: solid;
+		text-underline-offset: 8%;
+		text-decoration-thickness: 5%;
+		${theme.shared.enabled};
+		&[data-hovered] {
+			color: ${theme.shared.hover.color};
+			cursor: ${theme.shared.hover.cursor};
+		}
+		&[data-pressed] {
+			color: ${theme.shared.pressed.color};
+		}
+		&[data-disabled] {
+			color: ${theme.shared.disabled.color};
+		}
+		&[data-focus-visible] {
+			outline: ${theme.shared.focus.outline};
+		}
+	`;
+};
+
+exports.defaultLinkTheme = defaultLinkTheme;
+exports.linkStyles = linkStyles;

package/dist/components/link/styles.js

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import { componentLink } from '../../styleD/build/typescript/component/link.js';
+
+const defaultLinkTheme = componentLink;
+const linkStyles = (theme) => {
+  return css`
+		text-decoration: underline;
+		text-decoration-style: solid;
+		text-underline-offset: 8%;
+		text-decoration-thickness: 5%;
+		${theme.shared.enabled};
+		&[data-hovered] {
+			color: ${theme.shared.hover.color};
+			cursor: ${theme.shared.hover.cursor};
+		}
+		&[data-pressed] {
+			color: ${theme.shared.pressed.color};
+		}
+		&[data-disabled] {
+			color: ${theme.shared.disabled.color};
+		}
+		&[data-focus-visible] {
+			outline: ${theme.shared.focus.outline};
+		}
+	`;
+};
+
+export { defaultLinkTheme, linkStyles };

package/dist/components/select/Select.cjs

@@ -40,9 +40,9 @@ function Select({
     Form.FormInputContainer,
     {
       as: reactAriaComponents.Select,
-      size: "md",
       isInvalid,
       ...props,
+      size: "md",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Button, { css: styles.buttonStyles(mergedTheme, isInvalid), children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectValue, {}),

package/dist/components/select/Select.js

@@ -27,7 +27,13 @@ function ListBox({ children, theme = {} }) {
 }
 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 }) })] });
+  return jsxs(FormInputContainer, {
+    as: Select$1,
+    isInvalid,
+    ...props,
+    size: "md",
+    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/date-picker.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var DatePicker = require('./components/date-picker/DatePicker.cjs');
+var datePicker = require('./styleD/build/typescript/component/datePicker.cjs');
+
+
+
+exports.DatePicker = DatePicker.DatePicker;
+exports.componentDatePicker = datePicker.componentDatePicker;

package/dist/date-picker.js

@@ -0,0 +1,2 @@
+export { DatePicker } from './components/date-picker/DatePicker.js';
+export { componentDatePicker } from './styleD/build/typescript/component/datePicker.js';

package/dist/index.cjs

@@ -4,15 +4,17 @@ var autocomplete = require('./styleD/build/typescript/component/autocomplete.cjs
 var byline = require('./styleD/build/typescript/component/byline.cjs');
 var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
 var userMenu = require('./styleD/build/typescript/component/userMenu.cjs');
-var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 var avatar = require('./styleD/build/typescript/component/avatar.cjs');
 var button = require('./styleD/build/typescript/component/button.cjs');
 var checkbox = require('./styleD/build/typescript/component/checkbox.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
+var datePicker = require('./styleD/build/typescript/component/datePicker.cjs');
 var form = require('./styleD/build/typescript/component/form.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
+var link = require('./styleD/build/typescript/component/link.cjs');
+var alertBanner = require('./styleD/build/typescript/component/alertBanner.cjs');
 var radioGroup = require('./styleD/build/typescript/component/radioGroup.cjs');
 var select = require('./styleD/build/typescript/component/select.cjs');
 var textArea = require('./styleD/build/typescript/component/textArea.cjs');
@@ -36,15 +38,17 @@ exports.componentAutocomplete = autocomplete.componentAutocomplete;
 exports.componentByline = byline.componentByline;
 exports.componentTagTable = tagTable.componentTagTable;
 exports.componentUserMenu = userMenu.componentUserMenu;
-exports.componentAlertBanner = alertBanner.componentAlertBanner;
 exports.componentAvatar = avatar.componentAvatar;
 exports.componentButton = button.componentButton;
 exports.componentCheckbox = checkbox.componentCheckbox;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentDatePicker = datePicker.componentDatePicker;
 exports.componentForm = form.componentForm;
 exports.componentIcon = icon.componentIcon;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentMenu = menu.componentMenu;
+exports.componentLink = link.componentLink;
+exports.componentAlertBanner = alertBanner.componentAlertBanner;
 exports.componentRadioGroup = radioGroup.componentRadioGroup;
 exports.componentSelect = select.componentSelect;
 exports.componentTextArea = textArea.componentTextArea;

package/dist/index.js

@@ -2,15 +2,17 @@ export { componentAutocomplete } from './styleD/build/typescript/component/autoc
 export { componentByline } from './styleD/build/typescript/component/byline.js';
 export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
 export { componentUserMenu } from './styleD/build/typescript/component/userMenu.js';
-export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
 export { componentAvatar } from './styleD/build/typescript/component/avatar.js';
 export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentCheckbox } from './styleD/build/typescript/component/checkbox.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
+export { componentDatePicker } from './styleD/build/typescript/component/datePicker.js';
 export { componentForm } from './styleD/build/typescript/component/form.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
 export { componentMenu } from './styleD/build/typescript/component/menu.js';
+export { componentLink } from './styleD/build/typescript/component/link.js';
+export { componentAlertBanner } from './styleD/build/typescript/component/alertBanner.js';
 export { componentRadioGroup } from './styleD/build/typescript/component/radioGroup.js';
 export { componentSelect } from './styleD/build/typescript/component/select.js';
 export { componentTextArea } from './styleD/build/typescript/component/textArea.js';

package/dist/link.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Link = require('./components/link/Link.cjs');
+var link = require('./styleD/build/typescript/component/link.cjs');
+
+
+
+exports.Link = Link.Link;
+exports.componentLink = link.componentLink;

package/dist/link.js

@@ -0,0 +1,2 @@
+export { Link } from './components/link/Link.js';
+export { componentLink } from './styleD/build/typescript/component/link.js';

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

@@ -0,0 +1,120 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-date-picker-picker-shared-display: flex;
+	--component-date-picker-picker-shared-width: 100%;
+	--component-date-picker-picker-shared-justify-content: space-between;
+	--component-date-picker-picker-shared-align-items: center;
+	--component-date-picker-picker-shared-height: 2.5rem;
+	--component-date-picker-picker-shared-border-radius: 0.25rem;
+	--component-date-picker-picker-shared-border: 0.0625rem solid #545454;
+	--component-date-picker-picker-shared-background-color: #ffffff;
+	--component-date-picker-picker-shared-gap: 0.5rem;
+	--component-date-picker-picker-shared-padding-top: 0;
+	--component-date-picker-picker-shared-padding-right: 0.25rem;
+	--component-date-picker-picker-shared-padding-bottom: 0;
+	--component-date-picker-picker-shared-padding-left: 0.75rem;
+	--component-date-picker-picker-shared-disabled-cursor: not-allowed;
+	--component-date-picker-picker-shared-disabled-background-color: #ededed;
+	--component-date-picker-picker-shared-disabled-color: #999999;
+	--component-date-picker-picker-shared-focus-visible-outline: 0.125rem solid
+		#0072a9;
+	--component-date-picker-picker-shared-invalid-border: 0.0625rem solid #b42a19;
+	--component-date-picker-picker-shared-button-flex: 1;
+	--component-date-picker-picker-shared-button-background-color: rgba(
+		0,
+		0,
+		0,
+		0
+	);
+	--component-date-picker-picker-shared-button-border: 0 solid transparent;
+	--component-date-picker-picker-shared-button-padding-top: 0;
+	--component-date-picker-picker-shared-button-padding-right: 0;
+	--component-date-picker-picker-shared-button-padding-bottom: 0;
+	--component-date-picker-picker-shared-button-padding-left: 0;
+	--component-date-picker-picker-shared-button-margin-top: 0;
+	--component-date-picker-picker-shared-button-margin-right: 0;
+	--component-date-picker-picker-shared-button-margin-bottom: 0;
+	--component-date-picker-picker-shared-button-margin-left: 0;
+	--component-date-picker-picker-shared-button-display: flex;
+	--component-date-picker-picker-shared-button-align-items: center;
+	--component-date-picker-picker-shared-button-justify-content: flex-end;
+	--component-date-picker-picker-shared-button-color: #545454;
+	--component-date-picker-picker-shared-button-cursor: pointer;
+	--component-date-picker-picker-shared-button-disabled-color: #999999;
+	--component-date-picker-picker-shared-button-disabled-cursor: not-allowed;
+	--component-date-picker-segment-shared-placeholder-color: #545454;
+	--component-date-picker-segment-shared-placeholder-focus-visible-outline: 0.125rem
+		solid #0072a9;
+	--component-date-picker-popover-shared-offset: 8;
+	--component-date-picker-popover-shared-container-padding: 0;
+	--component-date-picker-popover-shared-background-color: #ffffff;
+	--component-date-picker-popover-shared-padding-top: 0.25rem;
+	--component-date-picker-popover-shared-padding-right: 0.25rem;
+	--component-date-picker-popover-shared-padding-bottom: 0.25rem;
+	--component-date-picker-popover-shared-padding-left: 0.25rem;
+	--component-date-picker-popover-shared-box-shadow: 0 2px 6px 0
+		rgba(0, 0, 0, 0.3);
+	--component-date-picker-calendar-header-shared-display: flex;
+	--component-date-picker-calendar-header-shared-align-items: center;
+	--component-date-picker-calendar-header-shared-justify-content: space-between;
+	--component-date-picker-calendar-header-shared-typography-font: normal 700
+		0.875rem/1.15 'Open Sans';
+	--component-date-picker-calendar-header-shared-typography-letter-spacing: -0.0125rem;
+	--component-date-picker-calendar-header-shared-typography-font-width: 95;
+	--component-date-picker-calendar-header-shared-button-background-color: rgba(
+		0,
+		0,
+		0,
+		0
+	);
+	--component-date-picker-calendar-header-shared-button-border: none;
+	--component-date-picker-calendar-header-shared-button-padding-top: 0;
+	--component-date-picker-calendar-header-shared-button-padding-right: 0;
+	--component-date-picker-calendar-header-shared-button-padding-bottom: 0;
+	--component-date-picker-calendar-header-shared-button-padding-left: 0;
+	--component-date-picker-calendar-header-shared-button-margin-top: 0;
+	--component-date-picker-calendar-header-shared-button-margin-right: 0;
+	--component-date-picker-calendar-header-shared-button-margin-bottom: 0;
+	--component-date-picker-calendar-header-shared-button-margin-left: 0;
+	--component-date-picker-calendar-header-shared-button-display: flex;
+	--component-date-picker-calendar-header-shared-button-align-items: center;
+	--component-date-picker-calendar-header-shared-button-justify-content: center;
+	--component-date-picker-calendar-header-shared-button-color: #545454;
+	--component-date-picker-calendar-header-shared-button-cursor: pointer;
+	--component-date-picker-calendar-header-shared-button-width: 2.5rem;
+	--component-date-picker-calendar-header-shared-button-height: 2.5rem;
+	--component-date-picker-calendar-header-shared-button-aspect-ratio: 1;
+	--component-date-picker-calendar-header-shared-button-hovered-background-color: #f6f6f6;
+	--component-date-picker-calendar-header-shared-button-pressed-background-color: #ededed;
+	--component-date-picker-calendar-header-shared-button-selected-background-color: #b8d8e7;
+	--component-date-picker-calendar-header-shared-button-focus-visible-outline: 0.125rem
+		solid #0072a9;
+	--component-date-picker-calendar-header-shared-button-disabled-cursor: not-allowed;
+	--component-date-picker-calendar-header-shared-button-disabled-color: #999999;
+	--component-date-picker-calendar-grid-shared-typography-font: normal 460
+		0.875rem/1.3 'Open Sans';
+	--component-date-picker-calendar-grid-shared-typography-letter-spacing: 0;
+	--component-date-picker-calendar-grid-shared-typography-font-width: 95;
+	--component-date-picker-calendar-grid-shared-border-collapse: collapse;
+	--component-date-picker-calendar-grid-shared-border-spacing: 0;
+	--component-date-picker-calendar-grid-shared-th-width: 2.5rem;
+	--component-date-picker-calendar-grid-shared-th-height: 2.5rem;
+	--component-date-picker-calendar-grid-shared-th-vertical-align: middle;
+	--component-date-picker-calendar-cell-shared-width: 2.5rem;
+	--component-date-picker-calendar-cell-shared-aspect-ratio: 1;
+	--component-date-picker-calendar-cell-shared-display: flex;
+	--component-date-picker-calendar-cell-shared-align-items: center;
+	--component-date-picker-calendar-cell-shared-justify-content: center;
+	--component-date-picker-calendar-cell-shared-cursor: pointer;
+	--component-date-picker-calendar-cell-shared-outside-month-display: none;
+	--component-date-picker-calendar-cell-shared-hovered-background-color: #f6f6f6;
+	--component-date-picker-calendar-cell-shared-pressed-background-color: #ededed;
+	--component-date-picker-calendar-cell-shared-selected-background-color: #b8d8e7;
+	--component-date-picker-calendar-cell-shared-focus-visible-outline: 0.125rem
+		solid #0072a9;
+	--component-date-picker-calendar-cell-shared-disabled-cursor: not-allowed;
+	--component-date-picker-calendar-cell-shared-disabled-color: #999999;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-link-shared-focus-outline: 1px solid #0072a9;
+	--component-link-shared-hover-color: #00344e;
+	--component-link-shared-hover-cursor: pointer;
+	--component-link-shared-enabled-color: #00496c;
+	--component-link-shared-disabled-color: #999999;
+	--component-link-shared-pressed-color: #00202f;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-template-component-color-background: #b8d8e7;
+	--component-template-component-color-text: #ffffff;
+}

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

@@ -0,0 +1,185 @@
+'use strict';
+
+const componentDatePicker = {
+  picker: {
+    shared: {
+      display: "flex",
+      width: "100%",
+      justifyContent: "space-between",
+      alignItems: "center",
+      height: "2.5rem",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #545454",
+      backgroundColor: "#ffffff",
+      gap: "0.5rem",
+      padding: {
+        top: "0",
+        right: "0.25rem",
+        bottom: "0",
+        left: "0.75rem"
+      },
+      disabled: {
+        cursor: "not-allowed",
+        backgroundColor: "#ededed",
+        color: "#999999"
+      },
+      focusVisible: {
+        outline: "0.125rem solid #0072a9"
+      },
+      invalid: {
+        border: "0.0625rem solid #b42a19"
+      },
+      button: {
+        flex: "1",
+        backgroundColor: "#00000000",
+        border: "0 solid transparent",
+        padding: {
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0"
+        },
+        margin: {
+          top: "0",
+          right: "0",
+          bottom: "0",
+          left: "0"
+        },
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        color: "#545454",
+        cursor: "pointer",
+        disabled: {
+          color: "#999999",
+          cursor: "not-allowed"
+        }
+      }
+    }
+  },
+  segment: {
+    shared: {
+      placeholder: {
+        color: "#545454",
+        focusVisible: {
+          outline: "0.125rem solid #0072a9"
+        }
+      }
+    }
+  },
+  popover: {
+    shared: {
+      offset: 8,
+      containerPadding: 0,
+      backgroundColor: "#ffffff",
+      padding: {
+        top: "0.25rem",
+        right: "0.25rem",
+        bottom: "0.25rem",
+        left: "0.25rem"
+      },
+      boxShadow: "0 2px 6px 0 rgba(0, 0, 0, 0.3)"
+    }
+  },
+  calendar: {
+    header: {
+      shared: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        typography: {
+          font: "normal 700 0.875rem/1.15 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        },
+        button: {
+          backgroundColor: "#00000000",
+          border: "none",
+          padding: {
+            top: "0",
+            right: "0",
+            bottom: "0",
+            left: "0"
+          },
+          margin: {
+            top: "0",
+            right: "0",
+            bottom: "0",
+            left: "0"
+          },
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#545454",
+          cursor: "pointer",
+          width: "2.5rem",
+          height: "2.5rem",
+          aspectRatio: "1",
+          hovered: {
+            backgroundColor: "#f6f6f6"
+          },
+          pressed: {
+            backgroundColor: "#ededed"
+          },
+          selected: {
+            backgroundColor: "#b8d8e7"
+          },
+          focusVisible: {
+            outline: "0.125rem solid #0072a9"
+          },
+          disabled: {
+            cursor: "not-allowed",
+            color: "#999999"
+          }
+        }
+      }
+    },
+    grid: {
+      shared: {
+        typography: {
+          font: "normal 460 0.875rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        },
+        borderCollapse: "collapse",
+        borderSpacing: "0",
+        th: {
+          width: "2.5rem",
+          height: "2.5rem",
+          verticalAlign: "middle"
+        }
+      }
+    },
+    cell: {
+      shared: {
+        width: "2.5rem",
+        aspectRatio: "1",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        outsideMonth: {
+          display: "none"
+        },
+        hovered: {
+          backgroundColor: "#f6f6f6"
+        },
+        pressed: {
+          backgroundColor: "#ededed"
+        },
+        selected: {
+          backgroundColor: "#b8d8e7"
+        },
+        focusVisible: {
+          outline: "0.125rem solid #0072a9"
+        },
+        disabled: {
+          cursor: "not-allowed",
+          color: "#999999"
+        }
+      }
+    }
+  }
+};
+
+exports.componentDatePicker = componentDatePicker;