@guardian/stand 0.0.40 → 0.0.41

package/dist/components/Checkbox/styles.cjs

@@ -1,21 +1,17 @@
-'use strict';
-
-var react = require('@emotion/react');
-var checkbox = require('../../styleD/build/typescript/component/checkbox.cjs');
-var typography = require('../../styleD/utils/semantic/typography.cjs');
-
-const defaultCheckboxTheme = checkbox.componentCheckbox;
-const checkboxStyles = (theme, {
-  size,
-  isIndeterminate
-}) => {
-  return react.css`
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_typography = require("../../styleD/utils/semantic/typography.cjs");
+const require_checkbox = require("../../styleD/build/typescript/component/checkbox.cjs");
+let _emotion_react = require("@emotion/react");
+//#region src/components/Checkbox/styles.ts
+const defaultCheckboxTheme = require_checkbox.componentCheckbox;
+const checkboxStyles = (theme, { size, isIndeterminate }) => {
+	return _emotion_react.css`
 		display: ${theme.input.shared.display};
 		position: ${theme.input.shared.position};
 		align-items: ${theme.input.shared.alignItems};
 		gap: ${theme.input.shared.gap};
 		cursor: ${theme.input.shared.cursor};
-		${typography.convertTypographyToEmotionStringStyle(theme.input[size].typography)}
+		${require_typography.convertTypographyToEmotionStringStyle(theme.input[size].typography)}
 		color: ${theme.input.shared.color};
 
 		.checkbox-indicator {
@@ -87,22 +83,22 @@ const checkboxStyles = (theme, {
 	`;
 };
 const checkboxLabelStyles = (theme) => {
-  return react.css`
+	return _emotion_react.css`
 		align-self: ${theme.input.shared.label.alignSelf};
 	`;
 };
 const checkboxGroupStyles = (theme, { size }, hasError) => {
-  return react.css`
+	return _emotion_react.css`
 		display: ${theme.group.shared.display};
 		flex-direction: ${theme.group.shared.flexDirection};
 		gap: ${theme.group[size].gap};
 		margin-top: ${theme.group[size].marginTop};
-		${hasError && react.css`
+		${hasError && _emotion_react.css`
 			margin-bottom: ${theme.group[size].marginBottom};
 		`}
 	`;
 };
-
+//#endregion
 exports.checkboxGroupStyles = checkboxGroupStyles;
 exports.checkboxLabelStyles = checkboxLabelStyles;
 exports.checkboxStyles = checkboxStyles;

package/dist/components/Checkbox/styles.d.cts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.cjs";
+import { ComponentCheckbox } from "../../styleD/build/typescript/component/checkbox.cjs";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Checkbox/styles.d.ts
+type CheckboxTheme = Prettify<ComponentCheckbox>;
+type PartialCheckboxTheme = Prettify<DeepPartial<CheckboxTheme>>;
+//#endregion
+export { CheckboxTheme, PartialCheckboxTheme };

package/dist/components/Checkbox/styles.d.ts

@@ -0,0 +1,9 @@
+import { DeepPartial, Prettify } from "../../util/types.js";
+import { ComponentCheckbox } from "../../styleD/build/typescript/component/checkbox.js";
+import { SerializedStyles } from "@emotion/react";
+
+//#region src/components/Checkbox/styles.d.ts
+type CheckboxTheme = Prettify<ComponentCheckbox>;
+type PartialCheckboxTheme = Prettify<DeepPartial<CheckboxTheme>>;
+//#endregion
+export { CheckboxTheme, PartialCheckboxTheme };

package/dist/components/Checkbox/styles.js

@@ -1,10 +1,10 @@
-import { css } from '@emotion/react';
-import { componentCheckbox } from '../../styleD/build/typescript/component/checkbox.js';
-import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
-
+import { convertTypographyToEmotionStringStyle } from "../../styleD/utils/semantic/typography.js";
+import { componentCheckbox } from "../../styleD/build/typescript/component/checkbox.js";
+import { css } from "@emotion/react";
+//#region src/components/Checkbox/styles.ts
 const defaultCheckboxTheme = componentCheckbox;
 const checkboxStyles = (theme, { size, isIndeterminate }) => {
-  return css`
+	return css`
 		display: ${theme.input.shared.display};
 		position: ${theme.input.shared.position};
 		align-items: ${theme.input.shared.alignItems};
@@ -82,12 +82,12 @@ const checkboxStyles = (theme, { size, isIndeterminate }) => {
 	`;
 };
 const checkboxLabelStyles = (theme) => {
-  return css`
+	return css`
 		align-self: ${theme.input.shared.label.alignSelf};
 	`;
 };
 const checkboxGroupStyles = (theme, { size }, hasError) => {
-  return css`
+	return css`
 		display: ${theme.group.shared.display};
 		flex-direction: ${theme.group.shared.flexDirection};
 		gap: ${theme.group[size].gap};
@@ -97,5 +97,5 @@ const checkboxGroupStyles = (theme, { size }, hasError) => {
 		`}
 	`;
 };
-
+//#endregion
 export { checkboxGroupStyles, checkboxLabelStyles, checkboxStyles, defaultCheckboxTheme };

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

@@ -0,0 +1,15 @@
+import { DefaultPropsWithChildren } from "../../util/types.cjs";
+import { FormInputContainerDefaultProps } from "../Form/types.cjs";
+import { CheckboxTheme } from "./styles.cjs";
+import { CheckboxGroupProps, CheckboxProps } from "react-aria-components";
+
+//#region src/components/Checkbox/types.d.ts
+interface CheckboxProps$1 extends DefaultPropsWithChildren<CheckboxTheme, CheckboxProps['className']>, Omit<CheckboxProps, 'children'> {
+  /**
+   * Size variant of the Checkbox
+   */
+  size?: keyof Omit<CheckboxTheme['input'], 'shared'>;
+}
+type CheckboxGroupProps$1 = FormInputContainerDefaultProps<CheckboxGroupProps, CheckboxTheme['group']>;
+//#endregion
+export { CheckboxGroupProps$1 as CheckboxGroupProps, CheckboxProps$1 as CheckboxProps };

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

@@ -0,0 +1,15 @@
+import { DefaultPropsWithChildren } from "../../util/types.js";
+import { FormInputContainerDefaultProps } from "../Form/types.js";
+import { CheckboxTheme } from "./styles.js";
+import { CheckboxGroupProps, CheckboxProps } from "react-aria-components";
+
+//#region src/components/Checkbox/types.d.ts
+interface CheckboxProps$1 extends DefaultPropsWithChildren<CheckboxTheme, CheckboxProps['className']>, Omit<CheckboxProps, 'children'> {
+  /**
+   * Size variant of the Checkbox
+   */
+  size?: keyof Omit<CheckboxTheme['input'], 'shared'>;
+}
+type CheckboxGroupProps$1 = FormInputContainerDefaultProps<CheckboxGroupProps, CheckboxTheme['group']>;
+//#endregion
+export { CheckboxGroupProps$1 as CheckboxGroupProps, CheckboxProps$1 as CheckboxProps };

package/dist/components/DatePicker/DatePicker.cjs

@@ -1,166 +1,173 @@
-'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 Form = require('../Form/Form.cjs');
-var Icon = require('../Icon/Icon.cjs');
-var styles = require('./styles.cjs');
-
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_mergeDeep = require("../../util/mergeDeep.cjs");
+const require_Icon = require("../Icon/Icon.cjs");
+const require_Form = require("../Form/Form.cjs");
+const require_styles = require("./styles.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let react_aria_components = require("react-aria-components");
+//#region src/components/DatePicker/DatePicker.tsx
 const MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
 ];
 const SEGMENT_PLACEHOLDERS = {
-  day: "DD",
-  month: "MMMM",
-  year: "YYYY"
+	day: "DD",
+	month: "MMMM",
+	year: "YYYY"
 };
 const CLEAR_BUFFER_DELAY_MS = 1e3;
-const MonthTextInputContext = React.createContext(true);
+const MonthTextInputContext = (0, react.createContext)(true);
+/**
+* Custom DateSegment component to handle showing full month names and keyboard navigation for month segment.
+* The default behavior of react-aria's DateSegment for month is to show numeric month and only allow numeric input,
+* so we need to implement our own logic to support showing full month names and allowing users to type the
+* first few letters of the month to select it.
+*/
 function DateSegment(props) {
-  const useMonthTextInput = React.useContext(MonthTextInputContext);
-  const state = React.useContext(reactAriaComponents.DateFieldStateContext);
-  const stateRef = React.useRef(state);
-  React.useEffect(() => {
-    stateRef.current = state;
-  });
-  const bufferRef = React.useRef("");
-  const clearTimerRef = React.useRef(null);
-  const segmentRef = React.useRef(null);
-  React.useEffect(() => {
-    if (!useMonthTextInput || props.segment.type !== "month") {
-      return;
-    }
-    const el = segmentRef.current;
-    if (!el) {
-      return;
-    }
-    const handleKeyDown = (e) => {
-      const currentState = stateRef.current;
-      if (!currentState || !/^[a-zA-Z]$/.test(e.key)) {
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-      if (clearTimerRef.current) {
-        clearTimeout(clearTimerRef.current);
-      }
-      bufferRef.current += e.key.toLowerCase();
-      const match = MONTHS.findIndex(
-        (m) => m.toLowerCase().startsWith(bufferRef.current)
-      );
-      if (match !== -1) {
-        currentState.setSegment("month", match + 1);
-        const uniqueMatch = MONTHS.filter((m) => m.toLowerCase().startsWith(bufferRef.current)).length === 1;
-        if (uniqueMatch) {
-          bufferRef.current = "";
-          if (clearTimerRef.current) {
-            clearTimeout(clearTimerRef.current);
-          }
-          const yearSegment = el.parentElement?.querySelector('[data-type="year"]');
-          yearSegment?.focus();
-        }
-      }
-      clearTimerRef.current = setTimeout(() => {
-        bufferRef.current = "";
-      }, CLEAR_BUFFER_DELAY_MS);
-    };
-    el.addEventListener("keydown", handleKeyDown, true);
-    return () => {
-      el.removeEventListener("keydown", handleKeyDown, true);
-      if (clearTimerRef.current) {
-        clearTimeout(clearTimerRef.current);
-      }
-    };
-  }, [props.segment.type, useMonthTextInput]);
-  if (useMonthTextInput && props.segment.type === "literal") {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " " });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DateSegment, { ...props, ref: segmentRef, children: (renderProps) => {
-    if (useMonthTextInput && renderProps.type === "month" && renderProps.value != null) {
-      return MONTHS[renderProps.value - 1];
-    }
-    if (useMonthTextInput && renderProps.isPlaceholder && renderProps.type in SEGMENT_PLACEHOLDERS) {
-      return SEGMENT_PLACEHOLDERS[renderProps.type];
-    }
-    return renderProps.text;
-  } });
+	const useMonthTextInput = (0, react.useContext)(MonthTextInputContext);
+	const state = (0, react.useContext)(react_aria_components.DateFieldStateContext);
+	const stateRef = (0, react.useRef)(state);
+	(0, react.useEffect)(() => {
+		stateRef.current = state;
+	});
+	const bufferRef = (0, react.useRef)("");
+	const clearTimerRef = (0, react.useRef)(null);
+	const segmentRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (!useMonthTextInput || props.segment.type !== "month") return;
+		const el = segmentRef.current;
+		if (!el) return;
+		const handleKeyDown = (e) => {
+			const currentState = stateRef.current;
+			if (!currentState || !/^[a-zA-Z]$/.test(e.key)) return;
+			e.preventDefault();
+			e.stopPropagation();
+			if (clearTimerRef.current) clearTimeout(clearTimerRef.current);
+			bufferRef.current += e.key.toLowerCase();
+			const match = MONTHS.findIndex((m) => m.toLowerCase().startsWith(bufferRef.current));
+			if (match !== -1) {
+				currentState.setSegment("month", match + 1);
+				if (MONTHS.filter((m) => m.toLowerCase().startsWith(bufferRef.current)).length === 1) {
+					bufferRef.current = "";
+					if (clearTimerRef.current) clearTimeout(clearTimerRef.current);
+					(el.parentElement?.querySelector("[data-type=\"year\"]"))?.focus();
+				}
+			}
+			clearTimerRef.current = setTimeout(() => {
+				bufferRef.current = "";
+			}, CLEAR_BUFFER_DELAY_MS);
+		};
+		el.addEventListener("keydown", handleKeyDown, true);
+		return () => {
+			el.removeEventListener("keydown", handleKeyDown, true);
+			if (clearTimerRef.current) clearTimeout(clearTimerRef.current);
+		};
+	}, [props.segment.type, useMonthTextInput]);
+	if (useMonthTextInput && props.segment.type === "literal") return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		children: " "
+	});
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.DateSegment, {
+		...props,
+		ref: segmentRef,
+		children: (renderProps) => {
+			if (useMonthTextInput && renderProps.type === "month" && renderProps.value != null) return MONTHS[renderProps.value - 1];
+			if (useMonthTextInput && renderProps.isPlaceholder && renderProps.type in SEGMENT_PLACEHOLDERS) return SEGMENT_PLACEHOLDERS[renderProps.type];
+			return renderProps.text;
+		}
+	});
 }
 function DateInput(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.DateInput, { ...props });
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.DateInput, { ...props });
 }
 function CalendarCell(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.CalendarCell, { ...props });
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.CalendarCell, { ...props });
 }
 function CalendarGrid(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.CalendarGrid, { ...props });
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.CalendarGrid, { ...props });
 }
 function Calendar({ theme = {}, ...props }) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultDatePickerTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Calendar, { ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { css: styles.calendarHeaderStyles(mergedTheme), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "previous", "aria-label": "Previous Month", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { symbol: "chevron_left", size: "lg" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "next", "aria-label": "Next Month", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { symbol: "chevron_right", size: "lg" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { css: styles.calendarGridStyles(mergedTheme), children: (date) => /* @__PURE__ */ jsxRuntime.jsx(CalendarCell, { css: styles.calendarCellStyles(mergedTheme), date }) })
-  ] });
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultDatePickerTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Calendar, {
+		...props,
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("header", {
+			css: require_styles.calendarHeaderStyles(mergedTheme),
+			children: [
+				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+					slot: "previous",
+					"aria-label": "Previous Month",
+					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+						symbol: "chevron_left",
+						size: "lg"
+					})
+				}),
+				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Heading, {}),
+				/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+					slot: "next",
+					"aria-label": "Next Month",
+					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+						symbol: "chevron_right",
+						size: "lg"
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CalendarGrid, {
+			css: require_styles.calendarGridStyles(mergedTheme),
+			children: (date) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CalendarCell, {
+				css: require_styles.calendarCellStyles(mergedTheme),
+				date
+			})
+		})]
+	});
 }
-function DatePicker({
-  isInvalid,
-  locale = "en-GB",
-  useMonthTextInput = true,
-  theme = {},
-  ...props
-}) {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultDatePickerTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Form.FormInputContainer,
-    {
-      as: reactAriaComponents.DatePicker,
-      isInvalid,
-      firstDayOfWeek: "mon",
-      shouldForceLeadingZeros: true,
-      ...props,
-      size: "md",
-      granularity: "day",
-      hideTimeZone: true,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Group, { css: styles.datePickerStyles(mergedTheme), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(MonthTextInputContext.Provider, { value: useMonthTextInput, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(DateInput, { children: (segment) => /* @__PURE__ */ jsxRuntime.jsx(
-            DateSegment,
-            {
-              css: styles.dateSegmentStyles(mergedTheme),
-              segment
-            }
-          ) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": "Open Date Picker", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { symbol: "calendar_month", size: "lg" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactAriaComponents.Popover,
-          {
-            css: styles.datePickerPopoverStyles(mergedTheme),
-            offset: mergedTheme.popover.shared.offset,
-            containerPadding: mergedTheme.popover.shared.containerPadding,
-            shouldFlip: false,
-            children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { theme: mergedTheme })
-          }
-        )
-      ]
-    }
-  );
+function DatePicker({ isInvalid, locale = "en-GB", useMonthTextInput = true, theme = {}, ...props }) {
+	const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultDatePickerTheme, theme);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_Form.FormInputContainer, {
+		as: react_aria_components.DatePicker,
+		isInvalid,
+		firstDayOfWeek: "mon",
+		shouldForceLeadingZeros: true,
+		...props,
+		size: "md",
+		granularity: "day",
+		hideTimeZone: true,
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Group, {
+			css: require_styles.datePickerStyles(mergedTheme),
+			children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(MonthTextInputContext.Provider, {
+				value: useMonthTextInput,
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.I18nProvider, {
+					locale,
+					children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DateInput, { children: (segment) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DateSegment, {
+						css: require_styles.dateSegmentStyles(mergedTheme),
+						segment
+					}) })
+				})
+			}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Button, {
+				"aria-label": "Open Date Picker",
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
+					symbol: "calendar_month",
+					size: "lg"
+				})
+			})]
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.Popover, {
+			css: require_styles.datePickerPopoverStyles(mergedTheme),
+			offset: mergedTheme.popover.shared.offset,
+			containerPadding: mergedTheme.popover.shared.containerPadding,
+			shouldFlip: false,
+			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Calendar, { theme: mergedTheme })
+		})]
+	});
 }
-
+//#endregion
 exports.DatePicker = DatePicker;

package/dist/components/DatePicker/DatePicker.d.cts

@@ -0,0 +1,12 @@
+import { DatePickerProps } from "./types.cjs";
+
+//#region src/components/DatePicker/DatePicker.d.ts
+declare function DatePicker({
+  isInvalid,
+  locale,
+  useMonthTextInput,
+  theme,
+  ...props
+}: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { DatePicker };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,12 @@
+import { DatePickerProps } from "./types.js";
+
+//#region src/components/DatePicker/DatePicker.d.ts
+declare function DatePicker({
+  isInvalid,
+  locale,
+  useMonthTextInput,
+  theme,
+  ...props
+}: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+//#endregion
+export { DatePicker };