@guardian/stand 0.0.30 → 0.0.32

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/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/components/topbar/TopBar.cjs

@@ -172,7 +172,14 @@ function TopBar({
                           size: "sm",
                           theme: mergedTheme.Item,
                           "aria-label": "Navigation Menu",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "lg", children: menuOpen ? "close" : "menu" })
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            Icon.Icon,
+                            {
+                              fill: mergedTheme.collapsedNavMenu.button.color,
+                              size: "lg",
+                              children: menuOpen ? "close" : "menu"
+                            }
+                          )
                         }
                       )
                     }

package/dist/components/topbar/TopBar.js

@@ -100,7 +100,7 @@ function TopBar({ children, collapseBelow = {
     showUntil: collapseBelow.containerLeft
   }), children: jsxs(DialogTrigger, { isOpen: menuOpen, onOpenChange: (isOpen) => {
     setMenuOpen(isOpen);
-  }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
+  }, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { fill: mergedTheme.collapsedNavMenu.button.color, size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
     collapseBelow: collapseBelow.containerLeft
   }), children: leftSide }), jsx("div", { css: [
     topBarSpacerStyles(mergedTheme),

package/dist/components/topbar/styles.cjs

@@ -9,7 +9,10 @@ const topBarStyles = (theme) => {
   return react.css`
 		background-color: ${theme["background-color"]};
 		height: ${theme.height};
-		border: ${theme.border};
+		border-top: ${theme["border-top"]};
+		border-right: ${theme["border-right"]};
+		border-bottom: ${theme["border-bottom"]};
+		border-left: ${theme["border-left"]};
 		display: ${theme.display};
 		justify-content: ${theme["justify-content"]};
 	`;

package/dist/components/topbar/styles.js

@@ -7,7 +7,10 @@ const topBarStyles = (theme) => {
   return css`
 		background-color: ${theme["background-color"]};
 		height: ${theme.height};
-		border: ${theme.border};
+		border-top: ${theme["border-top"]};
+		border-right: ${theme["border-right"]};
+		border-bottom: ${theme["border-bottom"]};
+		border-left: ${theme["border-left"]};
 		display: ${theme.display};
 		justify-content: ${theme["justify-content"]};
 	`;

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

@@ -9,6 +9,7 @@ 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');
@@ -41,6 +42,7 @@ 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;

package/dist/index.js

@@ -7,6 +7,7 @@ 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';

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

@@ -7,8 +7,12 @@
 	--component-top-bar-display: flex;
 	--component-top-bar-height: 4rem;
 	--component-top-bar-justify-content: flex-start;
-	--component-top-bar-border: 0.0625rem solid #cccccc;
+	--component-top-bar-border-right: 0.0625rem solid #cccccc;
+	--component-top-bar-border-top: 0.0625rem solid #cccccc;
+	--component-top-bar-border-bottom: 0.0625rem solid #cccccc;
+	--component-top-bar-border-left: 0.0625rem solid #cccccc;
 	--component-top-bar-spacer-margin-left: auto;
+	--component-top-bar-collapsed-nav-menu-button-color: #000000;
 	--component-top-bar-collapsed-nav-menu-button-margin: 0;
 	--component-top-bar-collapsed-nav-menu-button-padding: 0;
 	--component-top-bar-collapsed-nav-menu-button-background: none;

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/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/TopBar.cjs

@@ -5,12 +5,16 @@ const componentTopBar = {
   display: "flex",
   height: "4rem",
   "justify-content": "flex-start",
-  border: "0.0625rem solid #cccccc",
+  "border-right": "0.0625rem solid #cccccc",
+  "border-top": "0.0625rem solid #cccccc",
+  "border-bottom": "0.0625rem solid #cccccc",
+  "border-left": "0.0625rem solid #cccccc",
   spacer: {
     "margin-left": "auto"
   },
   collapsedNavMenu: {
     button: {
+      color: "#000000",
       margin: "0",
       padding: "0",
       background: "none",

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

@@ -3,12 +3,16 @@ const componentTopBar = {
   display: "flex",
   height: "4rem",
   "justify-content": "flex-start",
-  border: "0.0625rem solid #cccccc",
+  "border-right": "0.0625rem solid #cccccc",
+  "border-top": "0.0625rem solid #cccccc",
+  "border-bottom": "0.0625rem solid #cccccc",
+  "border-left": "0.0625rem solid #cccccc",
   spacer: {
     "margin-left": "auto"
   },
   collapsedNavMenu: {
     button: {
+      color: "#000000",
       margin: "0",
       padding: "0",
       background: "none",

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;