@guardian/stand 0.0.30 → 0.0.32

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

@@ -0,0 +1,183 @@
+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"
+        }
+      }
+    }
+  }
+};
+
+export { componentDatePicker };

package/dist/types/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerProps } from './types';
+export declare function DatePicker({ isInvalid, locale, useMonthTextInput, theme, ...props }: DatePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/date-picker/sandbox.d.ts

@@ -0,0 +1,2 @@
+export declare const componentName = "DatePicker";
+export declare const componentTsx = "import { CalendarDate } from '@internationalized/date';\nimport { DatePicker } from '@guardian/stand/date-picker';\n\nexport const Component = () => (\n\t<>\n\t\t{/* Basic usage */}\n\t\t<DatePicker\n\t\t\tlabel=\"Date of birth\"\n\t\t\tdescription=\"Enter your date of birth (e.g. 15 April 1990)\"\n\t\t/>\n\n\t\t{/* With min/max constraints and a pre-selected date */}\n\t\t<DatePicker\n\t\t\tlabel=\"Select a date\"\n\t\t\tdescription=\"Choose a date within 2026\"\n\t\t\tvalue={new CalendarDate(2026, 4, 15)}\n\t\t\tminValue={new CalendarDate(2026, 1, 1)}\n\t\t\tmaxValue={new CalendarDate(2026, 12, 31)}\n\t\t/>\n\t</>\n);\n";

package/dist/types/components/date-picker/styles.d.ts

@@ -0,0 +1,11 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentDatePicker } from '../../styleD/build/typescript/component/datePicker';
+import type { Prettify } from '../../util/types';
+export type DatePickerTheme = Prettify<ComponentDatePicker>;
+export declare const defaultDatePickerTheme: DatePickerTheme;
+export declare const datePickerStyles: (theme: DatePickerTheme) => SerializedStyles;
+export declare const dateSegmentStyles: (theme: DatePickerTheme) => SerializedStyles;
+export declare const datePickerPopoverStyles: (theme: DatePickerTheme) => SerializedStyles;
+export declare const calendarHeaderStyles: (theme: DatePickerTheme) => SerializedStyles;
+export declare const calendarGridStyles: (theme: DatePickerTheme) => SerializedStyles;
+export declare const calendarCellStyles: (theme: DatePickerTheme) => SerializedStyles;

package/dist/types/components/date-picker/types.d.ts

@@ -0,0 +1,21 @@
+import type { DateValue, CalendarProps as RACCalendarProps, DatePickerProps as RACDatePickerProps } from 'react-aria-components';
+import type { DefaultProps } from '../../util/types';
+import type { FormInputContainerDefaultProps } from '../form/types';
+import type { DatePickerTheme } from './styles';
+export interface DatePickerProps extends FormInputContainerDefaultProps<Omit<RACDatePickerProps<DateValue>, 'granularity' | 'hideTimeZone'>, DatePickerTheme> {
+    /**
+     * When true (default), the month segment displays full month names (e.g. "April") and
+     * supports typing the first letters of a month name to select it.
+     * Set to false to revert to React Aria's default numeric month behaviour.
+     */
+    useMonthTextInput?: boolean;
+    /**
+     * Locale to use for formatting the date. By default, it uses en-GB,
+     * you shouldn't need to set this prop in most scenarios,
+     * if you need low level control use this along with useMonthTextInput prop
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale for more details on supported locales and formatting options.
+     */
+    locale?: string;
+}
+export type CalendarProps = DefaultProps<DatePickerTheme, RACCalendarProps<DateValue>['className']> & Omit<RACCalendarProps<DateValue>, 'className'>;

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

@@ -36,5 +36,5 @@ export type FormInputContainerDefaultProps<ReactAriaInput extends {
  * The React Aria form container components FormInputContainer supports.
  * Add new components here
  */
-export declare const ALLOWED_FORM_CONTAINERS: readonly [(props: import("react-aria-components").TextFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T extends object = {}, M extends "single" | "multiple" = "single">(props: import("react-aria-components").SelectProps<T, M> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
+export declare const ALLOWED_FORM_CONTAINERS: readonly [(props: import("react-aria-components").TextFieldProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T extends object = {}, M extends "single" | "multiple" = "single">(props: import("react-aria-components").SelectProps<T, M> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, (props: import("react-aria-components").CheckboxGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null, <T_1 extends import("react-aria-components").DateValue>(props: import("react-aria-components").DatePickerProps<T_1> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null];
 export type AllowedContainer = (typeof ALLOWED_FORM_CONTAINERS)[number];

package/dist/types/date-picker.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DatePicker component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ * - `@internationalized/date`
+ * - `react-aria-components`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/datePicker.css),
+ * you don't need to install these.
+ */
+export { DatePicker } from './components/date-picker/DatePicker';
+export type { DatePickerProps } from './components/date-picker/types';
+export type { DatePickerTheme } from './components/date-picker/styles';
+export { componentDatePicker } from './styleD/build/typescript/component/datePicker';
+export type { ComponentDatePicker } from './styleD/build/typescript/component/datePicker';

package/dist/types/index.d.ts

@@ -26,6 +26,8 @@ export { componentCheckbox } from './styleD/build/typescript/component/checkbox'
 export type { ComponentCheckbox } from './styleD/build/typescript/component/checkbox';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
+export { componentDatePicker } from './styleD/build/typescript/component/datePicker';
+export type { ComponentDatePicker } from './styleD/build/typescript/component/datePicker';
 export { componentForm } from './styleD/build/typescript/component/form';
 export type { ComponentForm } from './styleD/build/typescript/component/form';
 export { componentIcon } from './styleD/build/typescript/component/icon';

package/dist/types/styleD/build/typescript/component/TopBar.d.ts

@@ -6,12 +6,16 @@ export declare const componentTopBar: {
     display: string;
     height: string;
     'justify-content': string;
-    border: string;
+    'border-right': string;
+    'border-top': string;
+    'border-bottom': string;
+    'border-left': string;
     spacer: {
         'margin-left': string;
     };
     collapsedNavMenu: {
         button: {
+            color: string;
             margin: string;
             padding: string;
             background: string;

package/dist/types/styleD/build/typescript/component/datePicker.d.ts

@@ -0,0 +1,185 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentDatePicker: {
+    picker: {
+        shared: {
+            display: string;
+            width: string;
+            justifyContent: string;
+            alignItems: string;
+            height: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            gap: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            disabled: {
+                cursor: string;
+                backgroundColor: string;
+                color: string;
+            };
+            focusVisible: {
+                outline: string;
+            };
+            invalid: {
+                border: string;
+            };
+            button: {
+                flex: string;
+                backgroundColor: string;
+                border: string;
+                padding: {
+                    top: string;
+                    right: string;
+                    bottom: string;
+                    left: string;
+                };
+                margin: {
+                    top: string;
+                    right: string;
+                    bottom: string;
+                    left: string;
+                };
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                color: string;
+                cursor: string;
+                disabled: {
+                    color: string;
+                    cursor: string;
+                };
+            };
+        };
+    };
+    segment: {
+        shared: {
+            placeholder: {
+                color: string;
+                focusVisible: {
+                    outline: string;
+                };
+            };
+        };
+    };
+    popover: {
+        shared: {
+            offset: number;
+            containerPadding: number;
+            backgroundColor: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            boxShadow: string;
+        };
+    };
+    calendar: {
+        header: {
+            shared: {
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+                button: {
+                    backgroundColor: string;
+                    border: string;
+                    padding: {
+                        top: string;
+                        right: string;
+                        bottom: string;
+                        left: string;
+                    };
+                    margin: {
+                        top: string;
+                        right: string;
+                        bottom: string;
+                        left: string;
+                    };
+                    display: string;
+                    alignItems: string;
+                    justifyContent: string;
+                    color: string;
+                    cursor: string;
+                    width: string;
+                    height: string;
+                    aspectRatio: string;
+                    hovered: {
+                        backgroundColor: string;
+                    };
+                    pressed: {
+                        backgroundColor: string;
+                    };
+                    selected: {
+                        backgroundColor: string;
+                    };
+                    focusVisible: {
+                        outline: string;
+                    };
+                    disabled: {
+                        cursor: string;
+                        color: string;
+                    };
+                };
+            };
+        };
+        grid: {
+            shared: {
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+                borderCollapse: string;
+                borderSpacing: string;
+                th: {
+                    width: string;
+                    height: string;
+                    verticalAlign: string;
+                };
+            };
+        };
+        cell: {
+            shared: {
+                width: string;
+                aspectRatio: string;
+                display: string;
+                alignItems: string;
+                justifyContent: string;
+                cursor: string;
+                outsideMonth: {
+                    display: string;
+                };
+                hovered: {
+                    backgroundColor: string;
+                };
+                pressed: {
+                    backgroundColor: string;
+                };
+                selected: {
+                    backgroundColor: string;
+                };
+                focusVisible: {
+                    outline: string;
+                };
+                disabled: {
+                    cursor: string;
+                    color: string;
+                };
+            };
+        };
+    };
+};
+export type ComponentDatePicker = typeof componentDatePicker;

package/dist/types/styleD/build/typescript/component/templateComponent.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentTemplateComponent: {
+    color: {
+        background: string;
+        text: string;
+    };
+};
+export type ComponentTemplateComponent = typeof componentTemplateComponent;

package/dist/types/templates/component/TemplateComponent.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateComponentProps } from './types';
+export declare const TemplateComponent: (props: TemplateComponentProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/templates/component/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "TemplateComponent";
+export declare const componentTsx = "import { TemplateComponent } from '@guardian/stand/template-component';\n\nexport const Component = () => (\n\t<>\n\t\t{/* default example */}\n\t\t<TemplateComponent />\n\n\t\t{/* custom message example */}\n\t\t<TemplateComponent message=\"hi there\" />\n\n);\n\n";
+export declare const componentCss = "\n/* import the templateComponent styles */\n@import '@guardian/stand/component/templateComponent.css';\n/* import the icon styles if using the icon variant of the templateComponent component */\n@import \"@guardian/stand/component/icon.css\";\n\n/* example setup of templateComponent style */\n.stand-template-component {\n\tbackground-color: var(--component-template-component-color-background);\n\tdisplay: var(--component-template-component-display);\n\talign-items: var(--component-template-component-align-items);\n\tjustify-content: var(--component-template-component-justify-content);\n\twidth: var(--component-template-component-size);\n\theight: var(--component-template-component-size);\n\tuser-select: var(--component-template-component-user-select);\n\tcolor: var(--component-template-component-color-text);\n\tfont: var(--component-template-component-typography-font);\n\tletter-spacing: var(--component-template-component-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-template-component-typography-font-width);\n}\n\n.stand-template-component-icon {\n\tdisplay: var(--component-icon-shared-display);\n\tuser-select: var(--component-icon-shared-user-select);\n\tfont-size: var(--component-icon-md-size);\n}\n\n.stand-template-component-icon-color-svg > svg {\n\twidth: var(--component-icon-md-size);\n\theight: var(--component-icon-md-size);\n\tfill: var(--component-template-component-color-text);\n}\n\n/* example setup for templateComponent image */\n.stand-template-component > img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-template-component\">C</div>\n    <div class=\"stand-template-component\">\n\t\t<span class=\"material-symbols stand-template-component-icon\">raven</span>\n    </div>\n    <div class=\"stand-template-component\">\n        <span class=\"stand-template-component-icon stand-template-component-icon-color-svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"/></svg></span>\n    </div>\n    <div class=\"stand-template-component\">\n    \t<img src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n    </div>\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentTemplateComponent, componentIcon } from \"@guardian/stand\";\n\nconst templateComponentStyles = `\n    background-color: ${componentTemplateComponent.color.background};\n    display: ${componentTemplateComponent.display};\n    align-items: ${componentTemplateComponent[\"align-items\"]};\n    justify-content: ${componentTemplateComponent[\"justify-content\"]};\n    width: ${componentTemplateComponent.size};\n    height: ${componentTemplateComponent.size};\n    user-select: ${componentTemplateComponent[\"user-select\"]};\n`;\n\nconst typographyStyle = `\n    color: ${componentTemplateComponent.color.text};\n    font: ${componentTemplateComponent.typography.font};\n    letter-spacing: ${componentTemplateComponent.typography.letterSpacing};\n    font-variation-settings: 'wdth' ${componentTemplateComponent.typography.fontWidth};\n`;\n\nconst imgStyle = `\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst iconStyles = `\n  display: ${componentIcon.shared.display};\n  user-select: ${componentIcon.shared[\"user-select\"]};\n  font-size: ${componentIcon.md.size};\n  color: ${componentTemplateComponent.color.text};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.md.size};\n  height: ${componentIcon.md.size};\n  fill:  ${componentTemplateComponent.color.text};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container\">\n  <div style=\"${templateComponentStyles}${typographyStyle}\">C</div>\n  <div style=\"${templateComponentStyles}\">\n\t<span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n  </div>\n  <div style=\"${templateComponentStyles}\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgStyles}\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"/></svg></span>\n  </div>\n  <div style=\"${templateComponentStyles}\">\n    <img style=\"${imgStyle}\" src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n  </div>\n`;\n";

package/dist/types/templates/component/styles.d.ts

@@ -0,0 +1,7 @@
+import type { SerializedStyles } from '@emotion/react';
+import { type ComponentTemplateComponent } from '../../styleD/build/typescript/component/templateComponent';
+import type { DeepPartial, Prettify } from '../../util/types';
+export type TemplateComponentTheme = Prettify<ComponentTemplateComponent>;
+export type PartialTemplateComponentTheme = Prettify<DeepPartial<TemplateComponentTheme>>;
+export declare const defaultTemplateComponentTheme: TemplateComponentTheme;
+export declare const templateComponentStyles: (theme: TemplateComponentTheme) => SerializedStyles;

package/dist/types/templates/component/types.d.ts

@@ -0,0 +1,5 @@
+import type { DefaultProps } from '../../util/types';
+import type { TemplateComponentTheme } from './styles';
+export type TemplateComponentProps = DefaultProps<TemplateComponentTheme> & {
+    message?: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "type": "module",
   "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
   "exports": {
@@ -109,6 +109,11 @@
       "import": "./dist/alert-banner.js",
       "require": "./dist/alert-banner.cjs"
     },
+    "./date-picker": {
+      "types": "./dist/types/date-picker.d.ts",
+      "import": "./dist/date-picker.js",
+      "require": "./dist/date-picker.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -161,7 +166,8 @@
     "./component/radioGroup.css": "./dist/styleD/build/css/component/radioGroup.css",
     "./component/checkbox.css": "./dist/styleD/build/css/component/checkbox.css",
     "./component/textArea.css": "./dist/styleD/build/css/component/textArea.css",
-    "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css"
+    "./component/alertBanner.css": "./dist/styleD/build/css/component/alertBanner.css",
+    "./component/datePicker.css": "./dist/styleD/build/css/component/datePicker.css"
   },
   "//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
   "typesVersions": {
@@ -237,6 +243,9 @@
       ],
       "alert-banner": [
         "./dist/types/alert-banner.d.ts"
+      ],
+      "date-picker": [
+        "./dist/types/date-picker.d.ts"
       ]
     }
   },
@@ -259,6 +268,7 @@
     "@guardian/prettier": "10.0.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
     "@guardian/tsconfig": "1.0.1",
+    "@internationalized/date": "3.12.1",
     "@material-design-icons/svg": "^0.14.15",
     "@playwright/experimental-ct-react17": "^1.59.1",
     "@rollup/plugin-commonjs": "29.0.2",
@@ -306,6 +316,7 @@
   "peerDependencies": {
     "@emotion/react": ">=11.11.4 <=11.14.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
+    "@internationalized/date": "^3.12.1",
     "prosemirror-dropcursor": "1.8.2",
     "prosemirror-history": "1.4.1",
     "prosemirror-keymap": "1.2.2",
@@ -324,6 +335,9 @@
     "@guardian/prosemirror-invisibles": {
       "optional": true
     },
+    "@internationalized/date": {
+      "optional": true
+    },
     "prosemirror-dropcursor": {
       "optional": true
     },
@@ -368,6 +382,7 @@
     "test": "jest",
     "test:setup-e2e": "playwright install --with-deps",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
+    "create-component": "npx ts-node ./scripts/create-component.ts",
     "test:react-matrix": "./scripts/test-deps-matrix.sh"
   }
 }