@opengovsg/oui 0.0.20 → 0.0.22

package/dist/cjs/file-dropzone/file-info.cjs

@@ -0,0 +1,146 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var $670gB$react = require('react');
+var ouiTheme = require('@opengovsg/oui-theme');
+var contexts = require('./contexts.cjs');
+var utils = require('./utils.cjs');
+var trash2 = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.cjs');
+var button = require('../button/button.cjs');
+
+const FileInfo = ({ file, imagePreview, classNames }) => {
+  const {
+    handleRemoveFile,
+    handleRemoveRejection,
+    formatError,
+    isDisabled,
+    isReadOnly
+  } = contexts.useFileDropzoneStateContext();
+  const { size, variant, itemClassNames } = contexts.useFileDropzoneStyleContext();
+  const readableFileSize = utils.formatBytes(file.size, 2);
+  const styles = ouiTheme.fileInfoDropzoneStyles({
+    size,
+    variant,
+    imagePreview: imagePreview ?? void 0
+  });
+  const [previewSrc, setPreviewSrc] = $670gB$react.useState("");
+  $670gB$react.useEffect(() => {
+    let objectUrl = "";
+    if (file.type.startsWith("image/")) {
+      objectUrl = URL.createObjectURL(file);
+      setPreviewSrc(objectUrl);
+    }
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: styles.base({
+        className: ouiTheme.cn(itemClassNames?.base, classNames?.base)
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sr-only", children: [
+          "File attached: ",
+          file.name,
+          " with file size of ",
+          readableFileSize
+        ] }),
+        imagePreview && previewSrc && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles.imageContainer({
+              className: ouiTheme.cn(
+                itemClassNames?.imageContainer,
+                classNames?.imageContainer
+              )
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: previewSrc,
+                alt: `Image preview of uploaded file: ${file.name}`,
+                className: styles.image({
+                  className: ouiTheme.cn(itemClassNames?.image, classNames?.image)
+                })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles.container({
+              className: ouiTheme.cn(itemClassNames?.container, classNames?.container)
+            }),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: styles.textContainer({
+                    className: ouiTheme.cn(
+                      itemClassNames?.textContainer,
+                      classNames?.textContainer
+                    )
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        title: file.name,
+                        className: styles.name({
+                          className: ouiTheme.cn(itemClassNames?.name, classNames?.name)
+                        }),
+                        children: file.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: styles.size({
+                          className: ouiTheme.cn(itemClassNames?.size, classNames?.size)
+                        }),
+                        children: readableFileSize
+                      }
+                    ),
+                    file.errors?.length && /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: styles.error({
+                          className: ouiTheme.cn(itemClassNames?.error, classNames?.error)
+                        }),
+                        children: file.errors.map(formatError).join(", ")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  isDisabled: isDisabled || isReadOnly,
+                  isIconOnly: !file.errors?.length,
+                  size: size === "md" ? "md" : "xs",
+                  variant: "clear",
+                  color: file.errors?.length ? "main" : "critical",
+                  "aria-label": "Remove file",
+                  className: styles.actionButton({
+                    className: ouiTheme.cn(
+                      itemClassNames?.actionButton,
+                      classNames?.actionButton
+                    )
+                  }),
+                  onPress: () => file.errors?.length ? handleRemoveRejection(file.name) : handleRemoveFile(file.name),
+                  children: file.errors?.length ? "Dismiss" : /* @__PURE__ */ jsxRuntime.jsx(trash2.default, {})
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.FileInfo = FileInfo;

package/dist/cjs/file-dropzone/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+'use strict';
+
+var fileDropzone = require('./file-dropzone.cjs');
+var fileInfo = require('./file-info.cjs');
+var utils = require('./utils.cjs');
+
+
+
+exports.FileDropzone = fileDropzone.FileDropzone;
+exports.FileInfo = fileInfo.FileInfo;
+exports.formatBytes = utils.formatBytes;
+exports.formatErrorMessage = utils.formatErrorMessage;

package/dist/cjs/file-dropzone/types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+'use strict';
+

package/dist/cjs/file-dropzone/utils.cjs

@@ -0,0 +1,31 @@
+"use strict";
+'use strict';
+
+var reactDropzone = require('react-dropzone');
+
+const formatBytes = (bytes, decimals = 2, size) => {
+  const k = 1e3;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  if (bytes === 0 || bytes === void 0)
+    return size !== void 0 ? `0 ${size}` : "0 bytes";
+  const i = size !== void 0 ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+const formatErrorMessage = (error, config) => {
+  const { maxFileSize, minFileSize, maxFiles } = config;
+  switch (error.code) {
+    case reactDropzone.ErrorCode.FileTooLarge:
+      return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2)}`;
+    case reactDropzone.ErrorCode.FileTooSmall:
+      return `Please upload a file above ${formatBytes(minFileSize, 2)}`;
+    case reactDropzone.ErrorCode.TooManyFiles:
+      return `Maximum number of files allowed is ${maxFiles}.`;
+    default: {
+      return error.message;
+    }
+  }
+};
+
+exports.formatBytes = formatBytes;
+exports.formatErrorMessage = formatErrorMessage;

package/dist/cjs/index.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var useControllableState = require('./hooks/use-controllable-state.cjs');
+var button = require('./button/button.cjs');
 var govtBanner = require('./govt-banner/govt-banner.cjs');
 var ripple = require('./ripple/ripple.cjs');
 var useRipple = require('./ripple/use-ripple.cjs');
@@ -18,16 +19,17 @@ var comboBox = require('./combo-box/combo-box.cjs');
 var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
 var comboBoxItem = require('./combo-box/combo-box-item.cjs');
 var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
+var banner = require('./banner/banner.cjs');
 var tagField = require('./tag-field/tag-field.cjs');
 var tagFieldItem = require('./tag-field/tag-field-item.cjs');
 var select = require('./select/select.cjs');
 var selectItem = require('./select/select-item.cjs');
 var selectVariantContext = require('./select/select-variant-context.cjs');
 var badge = require('./badge/badge.cjs');
+var date = require('@internationalized/date');
 var calendar = require('./calendar/calendar.cjs');
 var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
 var utils = require('./calendar/utils.cjs');
-var date = require('@internationalized/date');
 var rangeCalendar = require('./range-calendar/range-calendar.cjs');
 var menu = require('./menu/menu.cjs');
 var popover = require('./popover/popover.cjs');
@@ -37,17 +39,19 @@ var datePicker = require('./date-picker/date-picker.cjs');
 var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
 var checkbox = require('./checkbox/checkbox.cjs');
 var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
+var usePagination = require('./pagination/hooks/use-pagination.cjs');
 var pagination = require('./pagination/pagination.cjs');
 var paginationCursor = require('./pagination/pagination-cursor.cjs');
 var paginationItem = require('./pagination/pagination-item.cjs');
-var usePagination = require('./pagination/hooks/use-pagination.cjs');
 var usePagination$1 = require('./pagination/use-pagination.cjs');
-var button = require('./button/button.cjs');
-var banner = require('./banner/banner.cjs');
+var fileDropzone = require('./file-dropzone/file-dropzone.cjs');
+var fileInfo = require('./file-dropzone/file-info.cjs');
+var utils$1 = require('./file-dropzone/utils.cjs');
 
 
 
 exports.useControllableState = useControllableState.useControllableState;
+exports.Button = button.Button;
 exports.GovtBanner = govtBanner.GovtBanner;
 exports.Ripple = ripple.Ripple;
 exports.useRipple = useRipple.useRipple;
@@ -59,6 +63,7 @@ exports.Input = input.Input;
 exports.TextField = textField.TextField;
 exports.Description = field.Description;
 exports.FieldError = field.FieldError;
+exports.FieldErrorIcon = field.FieldErrorIcon;
 exports.FieldGroup = field.FieldGroup;
 exports.Label = field.Label;
 exports.TextArea = textArea.TextArea;
@@ -69,6 +74,7 @@ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
 exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
 exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
 exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
+exports.Banner = banner.Banner;
 exports.TagField = tagField.TagField;
 exports.TagFieldItem = tagFieldItem.TagFieldItem;
 exports.Select = select.Select;
@@ -76,6 +82,10 @@ exports.SelectItem = selectItem.SelectItem;
 exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
 exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
 exports.Badge = badge.Badge;
+Object.defineProperty(exports, "CalendarDate", {
+	enumerable: true,
+	get: function () { return date.CalendarDate; }
+});
 exports.Calendar = calendar.Calendar;
 exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
 exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
@@ -84,10 +94,6 @@ exports.getEraFormat = utils.getEraFormat;
 exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
 exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
 exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
-Object.defineProperty(exports, "CalendarDate", {
-	enumerable: true,
-	get: function () { return date.CalendarDate; }
-});
 exports.RangeCalendar = rangeCalendar.RangeCalendar;
 exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
 exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -114,11 +120,13 @@ exports.Checkbox = checkbox.Checkbox;
 exports.CheckboxGroup = checkbox.CheckboxGroup;
 exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
 exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
+exports.PaginationItemType = usePagination.PaginationItemType;
 exports.Pagination = pagination.Pagination;
 exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
-exports.PaginationItemType = usePagination.PaginationItemType;
 exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
 exports.usePagination = usePagination$1.usePagination;
-exports.Button = button.Button;
-exports.Banner = banner.Banner;
+exports.FileDropzone = fileDropzone.FileDropzone;
+exports.FileInfo = fileInfo.FileInfo;
+exports.formatBytes = utils$1.formatBytes;
+exports.formatErrorMessage = utils$1.formatErrorMessage;

package/dist/cjs/menu/menu.cjs

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
 var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
 var context = require('../system/react-utils/context.cjs');
+var popover = require('../popover/popover.cjs');
 
 const [MenuVariantContext, useMenuVariantContext] = context.createContext({
   name: "MenuVariantContext",

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createLucideIcon = require('../createLucideIcon.cjs');
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
+  ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
+  ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
+];
+const Trash2 = createLucideIcon.default("Trash2", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = Trash2;

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createLucideIcon = require('../createLucideIcon.cjs');
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
+  ["polyline", { points: "17 8 12 3 7 8", key: "t8dd8p" }],
+  ["line", { x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" }]
+];
+const Upload = createLucideIcon.default("Upload", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = Upload;

package/dist/cjs/range-calendar/range-calendar.cjs

@@ -8,12 +8,12 @@ var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var useDeepCompare = require('use-deep-compare');
 var ouiTheme = require('@opengovsg/oui-theme');
-var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
 var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
 var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
 var calendarHeader = require('../calendar/calendar-header.cjs');
 var utils = require('../system/utils.cjs');
+var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 
 const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
   const [props, variantProps] = utils.mapPropsVariants(

package/dist/cjs/select/select.cjs

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
-var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
+var field = require('../field/field.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+var popover = require('../popover/popover.cjs');
 var button = require('../button/button.cjs');
 
 const calculateEstimatedRowHeight = (size) => {

package/dist/cjs/tag-field/tag-field.cjs

@@ -6,15 +6,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
-var input = require('../input/input.cjs');
-var popover = require('../popover/popover.cjs');
 var tagFieldItem = require('./tag-field-item.cjs');
 var tagFieldList = require('./tag-field-list.cjs');
 var tagFieldRoot = require('./tag-field-root.cjs');
 var tagFieldTagList = require('./tag-field-tag-list.cjs');
 var tagFieldTrigger = require('./tag-field-trigger.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
+var popover = require('../popover/popover.cjs');
 
 function TagField({
   classNames,

package/dist/cjs/text-area-field/text-area-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 var textArea = require('../text-area/text-area.cjs');
+var field = require('../field/field.cjs');
 
 function TextAreaField({
   label,

package/dist/cjs/text-field/text-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 var input = require('../input/input.cjs');
+var field = require('../field/field.cjs');
 
 function TextField({
   label,

package/dist/esm/button/button.js

@@ -5,9 +5,9 @@ import { forwardRef, useMemo } from 'react';
 import { chain } from '@react-aria/utils';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
 import { buttonStyles } from '@opengovsg/oui-theme';
-import { Ripple } from '../ripple/ripple.js';
 import { useRipple } from '../ripple/use-ripple.js';
 import { Spinner } from '../spinner/spinner.js';
+import { Ripple } from '../ripple/ripple.js';
 
 const Button = forwardRef(
   ({

package/dist/esm/calendar/calendar-month-day-selector.js

@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { Group } from 'react-aria-components';
-import { Select } from '../select/select.js';
-import { SelectItem } from '../select/select-item.js';
 import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
 import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
+import { Select } from '../select/select.js';
+import { SelectItem } from '../select/select-item.js';
 import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
 
 const CalendarMonthDaySelector = () => {
@@ -61,7 +61,8 @@ const CalendarMonthDaySelector = () => {
           list: slots.yearList({ className: classNames?.yearList }),
           selectedText: slots.selectorText({
             className: classNames?.selectorText
-          })
+          }),
+          popover: "min-w-[8ch]"
         },
         selectedKey: state.visibleRange.start.year,
         "aria-label": formatMessage("selectYear"),

package/dist/esm/checkbox/checkbox.js

@@ -3,11 +3,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
-import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
 import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
 import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
+import { Label, Description, FieldError } from '../field/field.js';
 
 const Checkbox = ({
   classNames,

package/dist/esm/combo-box/combo-box.js

@@ -5,13 +5,13 @@ import { useMemo, useCallback } from 'react';
 import { useMessageFormatter } from 'react-aria';
 import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
 import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
+import { Popover } from '../popover/popover.js';
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

package/dist/esm/date-field/date-field.js

@@ -4,12 +4,20 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
 import { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } from '@opengovsg/oui-theme';
-import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
+import { Label, Description, FieldError } from '../field/field.js';
 
 function DateField(originalProps) {
   const [
-    { label, description, errorMessage, className, classNames, ...props },
+    {
+      inputProps,
+      label,
+      description,
+      errorMessage,
+      className,
+      classNames,
+      ...props
+    },
     variantProps
   ] = useMemo(
     () => mapPropsVariants(originalProps, dateFieldStyles.variantKeys),
@@ -26,11 +34,11 @@ function DateField(originalProps) {
       isDisabled: variantProps.isDisabled,
       className: composeTailwindRenderProps(
         className ?? classNames?.base,
-        "flex flex-col gap-2"
+        "flex w-full flex-col gap-2"
       ),
       children: [
         label && /* @__PURE__ */ jsx(Label, { size: variantProps.size, className: classNames?.label, children: label }),
-        /* @__PURE__ */ jsx(DateInput, { size: variantProps.size, className: styles }),
+        /* @__PURE__ */ jsx(DateInput, { size: variantProps.size, className: styles, ...inputProps }),
         description && /* @__PURE__ */ jsx(
           Description,
           {
@@ -65,6 +73,7 @@ function DateInput(originalProps) {
           className: composeRenderProps(
             classNames?.segment,
             (className2, renderProps) => styles.segment({
+              isEditable: segment.isEditable,
               ...renderProps,
               className: className2
             })

package/dist/esm/date-picker/date-picker.js

@@ -4,14 +4,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
 import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { Calendar as Calendar$1 } from '../calendar/calendar.js';
-import '@internationalized/date';
-import { DateInput } from '../date-field/date-field.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
+import { DateInput } from '../date-field/date-field.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
+import { Calendar as Calendar$1 } from '../calendar/calendar.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Button } from '../button/button.js';
+import { Popover } from '../popover/popover.js';
 
 function DatePicker(originalProps) {
   const [
@@ -24,6 +23,7 @@ function DatePicker(originalProps) {
       calendarProps,
       popoverProps,
       calendarButtonProps,
+      selectorIcon,
       ...props
     },
     variantProps
@@ -62,20 +62,44 @@ function DatePicker(originalProps) {
                 className: classNames?.calendarButton
               }),
               ...calendarButtonProps,
-              children: /* @__PURE__ */ jsx(Calendar, { "aria-hidden": true })
+              children: selectorIcon ?? /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  className: styles.selectorIcon({
+                    className: classNames?.selectorIcon
+                  }),
+                  "aria-hidden": true
+                }
+              )
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsx(Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsx(
-          Calendar$1,
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            placement: "bottom end",
+            classNames: classNames?.popover,
+            ...popoverProps,
+            children: /* @__PURE__ */ jsx(Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsx(
+              Calendar$1,
+              {
+                size: variantProps.size === "xs" ? "sm" : variantProps.size,
+                classNames: classNames?.calendar,
+                pageBehavior: props.pageBehavior,
+                ...calendarProps
+              }
+            ) })
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          Description,
           {
-            size: variantProps.size === "xs" ? "sm" : variantProps.size,
-            classNames: classNames?.calendar,
-            ...calendarProps
+            className: classNames?.description,
+            size: variantProps.size,
+            children: description
           }
-        ) }) }),
-        description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
-        /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage })
+        ),
+        /* @__PURE__ */ jsx(FieldError, { classNames: classNames?.error, size: variantProps.size, children: errorMessage })
       ]
     }
   );

package/dist/esm/date-range-picker/date-range-picker.js

@@ -5,13 +5,13 @@ import { useMemo } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
 import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
-import { DateInput } from '../date-field/date-field.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Popover } from '../popover/popover.js';
-import { RangeCalendar } from '../range-calendar/range-calendar.js';
 import { mapPropsVariants } from '../system/utils.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
+import { RangeCalendar } from '../range-calendar/range-calendar.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import { DateInput } from '../date-field/date-field.js';
 import { Button } from '../button/button.js';
+import { Popover } from '../popover/popover.js';
 
 function DateRangePicker(originalProps) {
   const [