@ssa-ui-kit/core 3.16.1 → 3.16.3

package/dist/index.js

@@ -10356,6 +10356,8 @@ const main = {
     //#eef1f766
     greyLighter60: 'rgba(238, 241, 247, 0.6)',
     //#eef1f766
+    greyPale16: 'rgba(244, 245, 249, 0.16)',
+    // #f4f5f9 — palette.secondary.light at 16%
     greySelectedMenuItem: 'rgba(222, 225, 236, 1)',
     //  #dee1ec
     greyFocused: 'rgba(210, 212, 219, 1)',
@@ -20590,12 +20592,35 @@ const RadioGroup = ({
 
 
 
-/** Single-select dropdown: input-like look (white bg, palette borders, primary when open) */
+/** Border colors per status, mirroring Input's basic/error/success maps */
+const statusBorderColors = theme => ({
+  basic: {
+    default: theme.colors.grey,
+    hover: theme.colors.greyDarker80,
+    accent: theme.palette.primary.light
+  },
+  error: {
+    default: theme.palette.error.light,
+    hover: theme.palette.error.main,
+    accent: theme.palette.error.dark
+  },
+  success: {
+    default: theme.palette.success.light,
+    hover: theme.palette.success.main,
+    accent: theme.palette.success.dark
+  }
+});
+
+/** Single-select dropdown: input-like look (white bg, palette borders, accent when open/focused) */
 const singleDropdownStyles = ({
   theme,
   isOpen,
-  disabled
-}) => /*#__PURE__*/(0,react_namespaceObject.css)("border:1px solid ", isOpen ? theme.palette.primary.main : theme.colors.grey, ";background:", disabled ? theme.colors.greyLighter : theme.colors.white, ";color:", theme.colors.greyDarker, ";&:disabled{border-color:", theme.colors.grey, ";color:", theme.colors.greyDarker60, ";cursor:default;svg path{stroke:", theme.colors.grey, ";}}&:focus:not(:disabled){border-color:", theme.palette.primary.main, ";background:", theme.colors.white, ";}&:hover:not(:disabled){border-color:", isOpen ? theme.palette.primary.main : theme.colors.greyDarker80, ";}" + ( true ? "" : 0),  true ? "" : 0);
+  disabled,
+  status = 'basic'
+}) => {
+  const colors = statusBorderColors(theme)[status];
+  return /*#__PURE__*/(0,react_namespaceObject.css)("border:1px solid ", isOpen ? colors.accent : colors.default, ";background:", disabled ? theme.palette.secondary.light : theme.colors.white, ";color:", theme.colors.greyDarker, ";svg path{stroke:", theme.colors.greyDarker80, ";}&:disabled{border-color:", theme.colors.grey, ";color:", theme.colors.grey, ";cursor:default;svg path{stroke:", theme.colors.grey, ";}}&:focus:not(:disabled){border-color:", colors.accent, ";background:", theme.colors.white, ";svg path{stroke:", theme.colors.greyDarker, ";}}&:hover:not(:disabled){border-color:", isOpen ? colors.accent : colors.hover, ";svg path{stroke:", theme.colors.greyDarker, ";}}" + ( true ? "" : 0),  true ? "" : 0);
+};
 const multipleStyles = ({
   theme,
   isOpen
@@ -20605,15 +20630,17 @@ const multipleStyles = ({
 };
 const DropdownToggleBase = /*#__PURE__*/base_default()("button",  true ? {
   target: "er3kf7h0"
-} : 0)("display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:10px;position:relative;width:auto;padding:8px 14px;font:inherit;font-size:13px;text-align:left;line-height:18px;cursor:pointer;outline:inherit;border-radius:12px;", ({
+} : 0)("display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start;gap:8px;position:relative;width:auto;height:44px;padding:0 14px;font:inherit;font-size:14px;font-weight:500;text-align:left;line-height:18px;cursor:pointer;outline:inherit;border-radius:12px;", ({
   isMultiple,
   isOpen,
   disabled,
+  status,
   theme
 }) => !isMultiple && singleDropdownStyles({
   theme,
   isOpen,
-  disabled
+  disabled,
+  status
 }), ({
   isMultiple,
   isOpen,
@@ -20621,10 +20648,7 @@ const DropdownToggleBase = /*#__PURE__*/base_default()("button",  true ? {
 }) => isMultiple && multipleStyles({
   theme,
   isOpen
-}), ({
-  isMultiple,
-  theme
-}) => !isMultiple && /*#__PURE__*/(0,react_namespaceObject.css)("color:", theme.colors.greyDarker, ";svg path{stroke:", theme.colors.greyDarker, ";}" + ( true ? "" : 0),  true ? "" : 0), ";" + ( true ? "" : 0));
+}), ";" + ( true ? "" : 0));
 const DropdownToggle = ({
   onClick,
   onFocus,
@@ -20636,6 +20660,7 @@ const DropdownToggle = ({
   ariaLabelledby,
   ariaControls,
   colors,
+  status,
   className,
   ...restProps
 }) => (0,jsx_runtime_namespaceObject.jsx)(DropdownToggleBase, {
@@ -20646,6 +20671,7 @@ const DropdownToggle = ({
   type: "button",
   isMultiple: isMultiple,
   selectedCount: selectedCount,
+  status: status,
   onClick: e => {
     // Safari doesn't support focus on buttons 🤔
     e.currentTarget.focus();
@@ -20680,7 +20706,7 @@ const DropdownArrow = ({
 }) => (0,jsx_runtime_namespaceObject.jsx)(DropdownArrowBase, {
   children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
     name: `carrot-${isUp ? 'up' : 'down'}`,
-    size: 12,
+    size: 16,
     "data-testid": `dropdown-arrow-${isUp ? 'up' : 'down'}`,
     ...restProps
   })
@@ -20712,7 +20738,7 @@ const DropdownOption_multipleStyles = ({
 };
 const DropdownOption = /*#__PURE__*/base_default()("li",  true ? {
   target: "e784n6w0"
-} : 0)("overflow:hidden;height:34px;padding:8px 16px;border:none;background:", ({
+} : 0)("overflow:hidden;height:40px;padding:8px 12px;border:none;background:", ({
   isActive,
   theme
 }) => isActive ? theme.colors.greySelectedMenuItem : 'inherit', ";&:hover{background:", ({
@@ -20736,7 +20762,7 @@ function DropdownOptions_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tri
 
 const DropdownOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
   target: "e1qg2z4z0"
-} : 0)("position:absolute;width:100%;min-width:max-content;list-style:none;padding:0;", ({
+} : 0)("position:absolute;width:100%;min-width:max-content;list-style:none;padding:4px;", ({
   placement = 'bottom'
 }) => placement === 'top' ? 'bottom: 100%; top: auto; margin: 0 0 4px;' : 'top: 100%; bottom: auto; margin: 4px 0 0;', " background:", ({
   theme
@@ -20748,8 +20774,8 @@ const DropdownOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
   theme
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";" + ( true ? "" : 0));
 const dropdownOptionButton =  true ? {
-  name: "1bqnd8x",
-  styles: "display:flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-size:0.813rem;outline:inherit;text-align:left;width:100%;padding:0;margin:0;background:none;color:inherit;border:none"
+  name: "x6i489",
+  styles: "display:flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-size:0.875rem;font-weight:500;outline:inherit;text-align:left;width:100%;padding:0;margin:0;background:none;color:inherit;border:none"
 } : 0;
 const avatarWrapper =  true ? {
   name: "1z0rm8f",
@@ -21084,6 +21110,15 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
+
+
+
+const DropdownFieldWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eizhqtp2"
+} : 0)( true ? {
+  name: "1bj7yge",
+  styles: "display:inline-flex;flex-direction:column;align-items:flex-start"
+} : 0);
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "eizhqtp1"
 } : 0)( true ? {
@@ -21201,8 +21236,14 @@ const Dropdown = ({
   placeholder = 'Select something',
   maxHeight = 200,
   avatarBorder = false,
+  label,
+  helperText,
+  errors,
+  success,
+  icon,
   dropdownProps: componentProps
 }) => {
+  const status = success ? 'success' : errors ? 'error' : 'basic';
   const {
     dropdownPosition = DropdownPositions.auto
   } = componentProps ?? {};
@@ -21284,38 +21325,54 @@ const Dropdown = ({
     image: rawAvatar,
     border: avatarBorder
   }) : /*#__PURE__*/external_react_default().isValidElement(rawAvatar) ? rawAvatar : null : null;
-  const toggleContent = !(0,utils_namespaceObject.isNill)(selectedAvatar) ? (0,jsx_runtime_namespaceObject.jsxs)(SelectedContent, {
-    children: [selectedAvatar, (0,jsx_runtime_namespaceObject.jsx)("span", {
+  const leadingElement = !(0,utils_namespaceObject.isNill)(selectedAvatar) ? selectedAvatar : icon ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+    name: icon,
+    size: 16,
+    color: isDisabled ? theme.colors.grey : theme.colors.greyDarker80
+  }) : null;
+  const toggleContent = !(0,utils_namespaceObject.isNill)(leadingElement) ? (0,jsx_runtime_namespaceObject.jsxs)(SelectedContent, {
+    children: [leadingElement, (0,jsx_runtime_namespaceObject.jsx)("span", {
       style: {
         minWidth: 0
       },
       children: value
     })]
   }) : value;
-  return (0,jsx_runtime_namespaceObject.jsx)(Dropdown_context.Provider, {
-    value: contextValue,
-    children: (0,jsx_runtime_namespaceObject.jsxs)(DropdownBase, {
-      ...componentProps?.base,
-      ref: dropdownRef,
-      "data-testid": "dropdown",
-      children: [(0,jsx_runtime_namespaceObject.jsxs)(DropdownToggle_DropdownToggle, {
-        ...componentProps?.toggleButton,
-        className: className,
-        isOpen: isOpen,
-        disabled: isDisabled,
-        onClick: setIsOpen.bind(null, !isOpen),
-        onFocus: setIsFocused.bind(null, true),
-        colors: colors,
-        ariaLabelledby: `dropdown-label-${dropdownId}`,
-        ariaControls: `dropdown-popup-${dropdownId}`,
-        children: [toggleContent, (0,jsx_runtime_namespaceObject.jsx)(DropdownArrow_DropdownArrow, {
-          ...componentProps?.toggleButtonArrow,
-          isUp: isOpen
-        })]
-      }), isOpen ? (0,jsx_runtime_namespaceObject.jsx)(DropdownOptions_DropdownOptions, {
-        children: items
-      }) : null]
-    })
+  return (0,jsx_runtime_namespaceObject.jsxs)(DropdownFieldWrapper, {
+    children: [label ? (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
+      isDisabled: isDisabled,
+      children: label
+    }) : null, (0,jsx_runtime_namespaceObject.jsx)(Dropdown_context.Provider, {
+      value: contextValue,
+      children: (0,jsx_runtime_namespaceObject.jsxs)(DropdownBase, {
+        ...componentProps?.base,
+        ref: dropdownRef,
+        "data-testid": "dropdown",
+        children: [(0,jsx_runtime_namespaceObject.jsxs)(DropdownToggle_DropdownToggle, {
+          ...componentProps?.toggleButton,
+          className: className,
+          isOpen: isOpen,
+          disabled: isDisabled,
+          status: status,
+          onClick: setIsOpen.bind(null, !isOpen),
+          onFocus: setIsFocused.bind(null, true),
+          colors: colors,
+          ariaLabelledby: `dropdown-label-${dropdownId}`,
+          ariaControls: `dropdown-popup-${dropdownId}`,
+          children: [toggleContent, (0,jsx_runtime_namespaceObject.jsx)(DropdownArrow_DropdownArrow, {
+            ...componentProps?.toggleButtonArrow,
+            isUp: isOpen
+          })]
+        }), isOpen ? (0,jsx_runtime_namespaceObject.jsx)(DropdownOptions_DropdownOptions, {
+          children: items
+        }) : null]
+      })
+    }), helperText || errors ? (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+      role: "status",
+      status: status,
+      disabled: isDisabled,
+      children: errors?.message || helperText
+    }) : null]
   });
 };
 /* harmony default export */ const Dropdown_Dropdown = (Dropdown);
@@ -23384,15 +23441,99 @@ const highlightInputMatch = (item, keyword) => {
 const external_luxon_namespaceObject = require("luxon");
 ;// ./src/components/DatePicker/styles.ts
 
+function DatePicker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+/*
+ * Calendar cell styles shared by **DatePicker** and **DateRangePicker**.
+ *
+ * `DateRangePicker/styles.ts` re-exports the three cell components from here
+ * rather than redeclaring them, so a token or geometry fix only has to be made
+ * once. Both pickers drive the "selected" look through the same
+ * `isCalendarDateSelected` prop — the single-date pickers pass their
+ * `isCalendarYear` / `isCalendarMonth` flag into it.
+ */
+
+/**
+ * Which edge of a highlighted range a cell sits on. Drives the cell's corner
+ * rounding so start/end cells form a single connected pill with the range
+ * cells between them, matching the Figma `Range Selected Start/End` variants.
+ *
+ * - **`start`** — rounded on the left only
+ * - **`end`** — rounded on the right only
+ * - **`both`** — a standalone selection (or a one-cell range), fully rounded
+ */
+
+const getCellRadius = (rangeEdge, isHighlighted) => {
+  if (rangeEdge === 'start') return '6px 0 0 6px';
+  if (rangeEdge === 'end') return '0 6px 6px 0';
+  if (rangeEdge === 'both') return '6px';
+  return isHighlighted ? '0' : '6px';
+};
 
+/**
+ * Works out which edge of a highlighted range a selected cell sits on.
+ *
+ * A range only has distinct edges when both anchors exist, so without an
+ * active range (or when both anchors land on the same cell) the cell is
+ * fully rounded. `mode` says which anchor *this* picker holds, which is what
+ * decides whether its own value rounds on the left or the right.
+ */
+const getRangeEdge = ({
+  isFirstSelected,
+  isSecondSelected,
+  isRangeActive,
+  mode
+}) => {
+  if (!isFirstSelected && !isSecondSelected) return undefined;
+  if (!isRangeActive || isFirstSelected && isSecondSelected) return 'both';
+  const isStart = mode === 'dateFrom' ? isFirstSelected : isSecondSelected;
+  return isStart ? 'start' : 'end';
+};
+
+/**
+ * Time panel shown beside the calendar. Figma lays the hours and minutes out
+ * as rows of two 56×40 cells with an 8px gap; two scrolling columns in one
+ * scroll container produce the same result while keeping the lists independent.
+ */
+const TimePanel = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e19kqgld5"
+} : 0)( true ? {
+  name: "1xp7lsd",
+  styles: "display:flex;gap:8px;align-self:stretch;padding:24px 24px 0 0;height:100%;overflow:hidden"
+} : 0);
+
+/**
+ * Each column scrolls on its own so the hours list can be moved without
+ * dragging the minutes along with it.
+ */
+const TimeColumn = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e19kqgld4"
+} : 0)( true ? {
+  name: "1m7q518",
+  styles: "display:flex;flex-direction:column;flex-shrink:0;height:100%;overflow-y:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none;}"
+} : 0);
+const TimeCell = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e19kqgld3"
+} : 0)("display:flex;align-items:center;justify-content:center;flex-shrink:0;width:56px;height:40px;border-radius:6px;font-size:14px;font-weight:500;line-height:18px;cursor:pointer;user-select:none;color:", ({
+  theme,
+  isSelected
+}) => isSelected ? theme.colors.white : theme.colors.greyDarker, ";background:", ({
+  theme,
+  isSelected
+}) => isSelected ? theme.palette.primary.main : 'none', ";&:hover{background:", ({
+  theme,
+  isSelected
+}) => isSelected ? theme.palette.primary.main : theme.palette.secondary.light, ";}" + ( true ? "" : 0));
 const DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   target: "e19kqgld2"
-} : 0)("position:relative;width:40px;height:40px;justify-content:center;font-size:14px;font-weight:500;border-radius:", ({
+} : 0)("position:relative;width:40px;height:40px;justify-content:center;font-size:14px;font-weight:500;line-height:18px;border-radius:", ({
+  rangeEdge,
   isHighlighted
-}) => isHighlighted ? 0 : '6px', ";border:", ({
+}) => getCellRadius(rangeEdge, isHighlighted), ";border:", ({
   theme,
   isCalendarDateNow
-}) => isCalendarDateNow ? `1px solid ${theme.colors.greyFocused}` : 'none', ";color:", ({
+}) => isCalendarDateNow ? `1px solid ${theme.colors.grey}` : 'none', ";color:", ({
   theme,
   isCalendarDateSelected
 }) => isCalendarDateSelected ? theme.colors.white : theme.colors.greyDarker, ";background:", ({
@@ -23404,90 +23545,58 @@ const DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   theme,
   isCalendarDateSelected,
   isHighlighted
-}) => isHighlighted && !isCalendarDateSelected && theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";&:hover{background:", ({
-  theme
-}) => theme.colors.greyLighter, ";color:", ({
+}) => isHighlighted && !isCalendarDateSelected && theme.colors.blueLighter20, ";&:hover{background:", ({
   theme
-}) => theme.colors.greyDarker, ";}&::before{content:'';display:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
-  isCalendarFirstDateSelected
-}) => isCalendarFirstDateSelected ? '0' : 'auto', ";right:", ({
-  isCalendarSecondDateSelected
-}) => isCalendarSecondDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
+}) => theme.palette.secondary.light, ";color:", ({
   theme
-}) => theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";}}&:hover{border:", ({
+}) => theme.colors.greyDarker, ";}}&:hover{border:", ({
   theme,
   isCalendarDateNow
-}) => isCalendarDateNow && `1px solid ${theme.colors.greyFocused}`, ";}" + ( true ? "" : 0));
+}) => isCalendarDateNow && `1px solid ${theme.colors.grey}`, ";}" + ( true ? "" : 0));
 const YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
   target: "e19kqgld1"
 } : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:70px;height:40px;border-radius:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? '6px' : 0, ";font-size:14px;font-weight:500px;user-select:none;cursor:pointer;color:", ({
-  theme,
-  isCalendarYear,
-  isCalendarSecondDateSelected
-}) => (isCalendarYear || isCalendarSecondDateSelected) && theme.colors.white, ";background:", ({
+  rangeEdge,
+  isHighlighted
+}) => getCellRadius(rangeEdge, isHighlighted), ";font-size:14px;font-weight:500;line-height:18px;user-select:none;cursor:pointer;color:", ({
   theme,
-  isCalendarYear,
-  isCalendarSecondDateSelected
-}) => isCalendarYear || isCalendarSecondDateSelected ? theme.palette.primary.main : 'none', ";background:", ({
+  isCalendarDateSelected
+}) => isCalendarDateSelected ? theme.colors.white : theme.colors.greyDarker, ";background:", ({
   theme,
-  isHighlighted,
-  isCalendarYear
-}) => isHighlighted && !isCalendarYear && theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";&:hover{background:", ({
-  theme
-}) => theme.colors.greyLighter, ";color:", ({
+  isCalendarDateSelected,
+  isHighlighted
+}) => {
+  if (isCalendarDateSelected) return theme.palette.primary.main;
+  return isHighlighted ? theme.colors.blueLighter20 : 'none';
+}, ";&:hover{background:", ({
   theme
-}) => theme.colors.greyDarker, ";}&::before{content:'';display:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
-  isCalendarSecondDateSelected
-}) => isCalendarSecondDateSelected ? '0' : 'auto', ";right:", ({
-  isCalendarFirstDateSelected
-}) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
+}) => theme.palette.secondary.light, ";color:", ({
   theme
-}) => theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";}" + ( true ? "" : 0));
+}) => theme.colors.greyDarker, ";border-radius:6px;}" + ( true ? "" : 0));
 const MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
   target: "e19kqgld0"
-} : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:99px;height:40px;border-radius:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? '6px' : 0, ";font-size:14px;font-weight:500;cursor:pointer;color:", ({
+} : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:93.33px;height:40px;border-radius:", ({
+  rangeEdge,
+  isHighlighted
+}) => getCellRadius(rangeEdge, isHighlighted), ";font-size:14px;font-weight:500;line-height:18px;cursor:pointer;color:", ({
   theme,
-  isCalendarMonth,
-  isCalendarSecondDateSelected
-}) => (isCalendarMonth || isCalendarSecondDateSelected) && theme.colors.white, ";user-select:none;background:", ({
+  isCalendarDateSelected
+}) => isCalendarDateSelected ? theme.colors.white : theme.colors.greyDarker, ";user-select:none;background:", ({
   theme,
-  isCalendarMonth,
-  isCalendarSecondDateSelected
-}) => isCalendarMonth || isCalendarSecondDateSelected ? theme.palette.primary.main : 'none', ";&[aria-disabled='true']{cursor:default;pointer-events:none;color:", ({
+  isCalendarDateSelected
+}) => isCalendarDateSelected ? theme.palette.primary.main : 'none', ";&[aria-disabled='true']{cursor:default;pointer-events:none;color:", ({
   theme
 }) => theme.colors.greyDarker, ";background:", ({
   theme
 }) => theme.colors.grey, ";}&[aria-disabled='false']{background:", ({
   theme,
   isHighlighted,
-  isCalendarMonth,
-  isCalendarSecondDateSelected
-}) => isHighlighted && !isCalendarMonth && !isCalendarSecondDateSelected && theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";&:hover{background:", ({
-  theme
-}) => theme.colors.greyLighter, ";color:", ({
+  isCalendarDateSelected
+}) => isHighlighted && !isCalendarDateSelected && theme.colors.blueLighter20, ";&:hover{background:", ({
   theme
-}) => theme.colors.greyDarker, ";}&::before{content:'';display:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
-  isCalendarSecondDateSelected
-}) => isCalendarSecondDateSelected ? '0' : 'auto', ";right:", ({
-  isCalendarFirstDateSelected
-}) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
+}) => theme.palette.secondary.light, ";color:", ({
   theme
-}) => theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";}}" + ( true ? "" : 0));
+}) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
 ;// ./src/components/DatePicker/utils/dates.ts
 
 const getDaysForCalendarMonth = date => {
@@ -23588,6 +23697,20 @@ const INVALID_DATE = 'Invalid date';
 const FULL_DATE_LENGTH = 10;
 const FULL_MONTH_DATE_LENGTH = 7;
 const FULL_YEAR_DATE_LENGTH = 4;
+
+/**
+ * Time support is layered on top of a date format rather than being a separate
+ * set of formats, so `showTimePicker` works with any picker type without
+ * widening the shared `DateFormat` union (which `JsonSchemaForm` validates
+ * against).
+ */
+const TIME_MASK_FORMAT_SUFFIX = ' HH:mm';
+const TIME_MASK_SUFFIX = ' __:__';
+const TIME_LENGTH = 6;
+const HOURS_IN_DAY = 24;
+const MINUTES_IN_HOUR = 60;
+/** 15-minute steps by default; pass `minuteStep={1}` for the Figma-literal list. */
+const DEFAULT_MINUTE_STEP = 15;
 const PICKER_TYPE = {
   DAYS: 'days',
   MONTHS: 'months',
@@ -23626,13 +23749,16 @@ const useDatePickerMask = ({
       selectionEnd,
       value: currentValue
     }) => {
-      if (mask === DEFAULT_MASK || mask === DEFAULT_MONTH_MASK || mask === DEFAULT_YEAR_MASK) {
+      // `showTimePicker` appends a ` __:__` suffix onto the date mask, so
+      // strip it before comparing against the bare date masks below.
+      const dateMask = mask.split(' ')[0];
+      if (dateMask === DEFAULT_MASK || dateMask === DEFAULT_MONTH_MASK || dateMask === DEFAULT_YEAR_MASK) {
         const newValue = currentValue.slice(0, selectionStart) + data + currentValue.slice(selectionEnd);
         const updatedValue = (0,mask_namespaceObject.format)(newValue, {
           mask,
           replacement
         });
-        const splittedValue = updatedValue.split('/');
+        const splittedValue = updatedValue.split(' ')[0].split('/');
         const isChecked = processDate({
           day: formatIndexes['day'] !== -1 ? splittedValue[formatIndexes['day']] : '',
           month: formatIndexes['month'] !== -1 ? splittedValue[formatIndexes['month']] : '',
@@ -23696,7 +23822,8 @@ const useDatePicker = ({
   onClose,
   onError,
   onChange,
-  value: externalValue
+  value: externalValue,
+  showTimePicker = false
 }) => {
   const {
     clearErrors,
@@ -23706,9 +23833,31 @@ const useDatePicker = ({
   const inputValue = (0,external_react_hook_form_namespaceObject.useWatch)({
     name
   });
-  const config = (0,external_react_namespaceObject.useMemo)(() => CONFIG[pickerType] || CONFIG[PICKER_TYPE.DAYS], [pickerType]);
-  const format = propFormat || config.format;
-  const luxonFormat = (0,external_react_namespaceObject.useMemo)(() => format.replace(/mm/gi, 'MM'), [format]);
+  const config = (0,external_react_namespaceObject.useMemo)(() => {
+    const base = CONFIG[pickerType] || CONFIG[PICKER_TYPE.DAYS];
+    if (!showTimePicker) return base;
+
+    // Time is layered onto the picker's own config rather than being a fourth
+    // picker type, so `HH:mm` composes with days, months, or years. The unit
+    // moves to 'minute' so emitted values stop being floored to midnight.
+    return {
+      ...base,
+      mask: `${base.mask}${TIME_MASK_SUFFIX}`,
+      length: base.length + TIME_LENGTH,
+      unit: 'minute'
+    };
+  }, [pickerType, showTimePicker]);
+
+  // The date half of the format, kept separate because `formatIndexes` and the
+  // min/max parsing below both split on '/' and would choke on a time suffix.
+  const dateFormat = propFormat || config.format;
+  const format = showTimePicker ? `${dateFormat}${TIME_MASK_FORMAT_SUFFIX}` : dateFormat;
+  const luxonFormat = (0,external_react_namespaceObject.useMemo)(() => {
+    // Only the date half may be uppercased — `mm` in `HH:mm` is minutes, and
+    // a blanket /mm/gi replace would turn it into a month token.
+    const luxonDate = dateFormat.replace(/mm/gi, 'MM');
+    return showTimePicker ? `${luxonDate}${TIME_MASK_FORMAT_SUFFIX}` : luxonDate;
+  }, [dateFormat, showTimePicker]);
   const [isLoading, setLoading] = (0,external_react_namespaceObject.useState)(true);
   const [dateTime, setDateTime] = (0,external_react_namespaceObject.useState)();
   const [lastChangedDate, setLastChangedDate] = (0,external_react_namespaceObject.useState)();
@@ -23724,7 +23873,7 @@ const useDatePicker = ({
   });
   const wasOpenRef = (0,external_react_namespaceObject.useRef)(undefined);
   const formatIndexes = (0,external_react_namespaceObject.useMemo)(() => {
-    const parts = format.split('/').map(p => p.trim().toLowerCase()).filter(Boolean);
+    const parts = dateFormat.split('/').map(p => p.trim().toLowerCase()).filter(Boolean);
     const year = parts.findIndex(p => p === 'yyyy');
     if (year === -1) throw new Error('DatePicker format must contain year');
     return {
@@ -23732,7 +23881,7 @@ const useDatePicker = ({
       month: parts.findIndex(p => p === 'mm'),
       year
     };
-  }, [format]);
+  }, [dateFormat]);
   const {
     dateMinDT,
     dateMaxDT,
@@ -23748,11 +23897,13 @@ const useDatePicker = ({
     });
     return {
       dateMinDT: toDT(minP),
-      dateMaxDT: toDT(maxP),
+      // With a time component, the max day itself must stay selectable for
+      // any time up to its last minute, not just 00:00.
+      dateMaxDT: showTimePicker ? toDT(maxP).endOf('day') : toDT(maxP),
       dateMinParts: minP,
       dateMaxParts: maxP
     };
-  }, [dateMin, dateMax, config, formatIndexes]);
+  }, [dateMin, dateMax, config, formatIndexes, showTimePicker]);
   const maskInputRef = useDatePickerMask({
     maskOptions: {
       mask: config.mask,
@@ -23848,6 +23999,51 @@ const useDatePicker = ({
       return newDT;
     });
   }, [config.length, luxonFormat, dateMinDT, dateMaxDT, name, setError, clearErrors, safeOnChange, safeOnError]);
+
+  // The value the clear button restores. With no `defaultValue` this is the
+  // empty string, so "reset" and "clear" collapse into the same behaviour.
+  const resetValue = defaultValue ?? '';
+
+  // Drives the clear button's visibility: there is nothing to undo while the
+  // field still holds its default.
+  const isDirty = (inputValue ?? '') !== resetValue;
+  const resetToDefault = (0,external_react_namespaceObject.useCallback)(() => {
+    const nextDT = resetValue ? external_luxon_namespaceObject.DateTime.fromFormat(resetValue, luxonFormat) : undefined;
+    const validDT = nextDT?.isValid ? nextDT : undefined;
+
+    // Keep the processing refs in step with the value we're writing, so the
+    // input-sync effect doesn't re-process a stale string and undo the reset.
+    lastProcessedValueRef.current = resetValue;
+    lastExternalValueRef.current = resetValue;
+    clearErrors(name);
+    setValue(name, resetValue);
+    setDateTime(validDT);
+    safeOnChange(validDT);
+    safeOnError(null);
+  }, [resetValue, luxonFormat, name, clearErrors, setValue, safeOnChange, safeOnError]);
+
+  /**
+   * Commits an hour/minute pick from the time panel, keeping the currently
+   * selected day. Falls back to the visible calendar day (then today) so a
+   * time can be chosen before a date.
+   */
+  const setTime = (0,external_react_namespaceObject.useCallback)(({
+    hour,
+    minute
+  }) => {
+    const base = dateTime ?? calendarViewDateTime ?? external_luxon_namespaceObject.DateTime.now();
+    const next = base.set({
+      hour: hour ?? base.hour,
+      minute: minute ?? base.minute,
+      second: 0,
+      millisecond: 0
+    });
+    if (!next.isValid || next < dateMinDT || next > dateMaxDT) return;
+    clearErrors(name);
+    setDateTime(next);
+    setCalendarViewDateTime(next);
+    safeOnChange(next);
+  }, [dateTime, calendarViewDateTime, dateMinDT, dateMaxDT, name, clearErrors, safeOnChange]);
   const handleBlur = e => {
     // Force validation on blur - catches incomplete inputs when user leaves the field
     processValue(e.currentTarget.value, true);
@@ -23936,7 +24132,11 @@ const useDatePicker = ({
     dateMaxDT,
     dateTime,
     isOpen,
+    isDirty,
     inputValue,
+    resetToDefault,
+    setTime,
+    showTimePicker,
     calendarViewDateTime,
     maskInputRef,
     calendarType,
@@ -24016,6 +24216,8 @@ const DatePickerProvider = ({
       ...rest,
       ...restHook,
       pickerType: hookPickerType || rest.pickerType || PICKER_TYPE.DAYS,
+      // Resolved by the hook and may carry a ` HH:mm` suffix, so it is a
+      // plain string rather than the date-only `DatePickerFormat` union.
       format: hookFormat || rest.format || DEFAULT_MASK_FORMAT,
       formatIndexes,
       inputRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, rest.inputRef]),
@@ -24029,6 +24231,7 @@ const DatePickerProvider = ({
 
 const useDatePickerContext = () => (0,external_react_namespaceObject.useContext)(DatePickerContext);
 ;// ./src/components/DatePicker/components/DaysView.tsx
+
 function DaysView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
@@ -24037,20 +24240,14 @@ function DaysView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
+
 var DaysView_ref =  true ? {
-  name: "hisq2i",
-  styles: "padding-left:9px"
-} : 0;
-var DaysView_ref2 =  true ? {
-  name: "yzljcr",
-  styles: "width:40px;height:40px;justify-content:center;font-size:12px;font-weight:600;cursor:default;user-select:none"
-} : 0;
-var _ref3 =  true ? {
-  name: "1pxryto",
-  styles: "flex-wrap:wrap;padding-left:9px"
+  name: "1qemjat",
+  styles: "flex-wrap:wrap"
 } : 0;
 const DaysView = () => {
   const weekDays = getWeekDays();
+  const theme = (0,react_namespaceObject.useTheme)();
   const {
     dateTime,
     calendarViewDateTime,
@@ -24058,6 +24255,7 @@ const DaysView = () => {
     dateMaxDT,
     lastChangedDate,
     highlightDates,
+    showTimePicker,
     setCalendarViewDateTime,
     setDateTime,
     setIsOpen,
@@ -24086,18 +24284,32 @@ const DaysView = () => {
       setCalendarViewDateTime(newDate);
       setDateTime(newDate);
       safeOnChange?.(newDate);
-      setIsOpen(false);
+
+      // With a time panel open, closing here would make the hours/minutes
+      // unreachable — the popover closes on outside click instead.
+      if (!showTimePicker) {
+        setIsOpen(false);
+      }
     }
   };
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
     children: [(0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
-      css: DaysView_ref,
       children: weekDays.map((weekDay, index) => (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
-        css: DaysView_ref2,
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          width: 40,
+          height: 40,
+          justifyContent: 'center',
+          fontSize: 12,
+          fontWeight: 600,
+          lineHeight: '16px',
+          color: theme.colors.greyDarker80,
+          cursor: 'default',
+          userSelect: 'none'
+        },  true ? "" : 0,  true ? "" : 0),
         children: weekDay
       }, `week-day-${weekDay}-${index}`))
     }), (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
-      css: _ref3,
+      css: DaysView_ref,
       onClick: handleDaySelect,
       children: dates.map((currentDate, index) => {
         const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate);
@@ -24125,13 +24337,18 @@ const DaysView = () => {
             isAriaDisabled = currentDT > dateMaxDT || !isCalendarMonth;
           }
         }
+        const rangeEdge = getRangeEdge({
+          isFirstSelected: isCalendarFirstDateSelected,
+          isSecondSelected: isCalendarSecondDateSelected,
+          isRangeActive: isHighlightEnabled && !!otherDateDT && !!dateTime,
+          mode: highlightDates?.mode
+        });
         return (0,jsx_runtime_namespaceObject.jsx)(DaysViewCell, {
           "aria-disabled": isAriaDisabled,
           "aria-label": ariaLabel,
           isCalendarDateNow: isCalendarDateNow,
           isCalendarDateSelected: isCalendarDateSelected,
-          isCalendarFirstDateSelected: isCalendarFirstDateSelected,
-          isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+          rangeEdge: rangeEdge,
           isHighlighted: isHighlightDate,
           children: calendarDay
         }, `day-${currentDate.getFullYear()}-${currentDate.getMonth()}-${currentDate.getDate()}-${index}`);
@@ -24204,7 +24421,6 @@ const MonthsView = () => {
     css: MonthsView_ref,
     onClick: handleMonthSelect,
     children: MONTHS.map((month, index) => {
-      const isCalendarMonth = calendarViewDateTime ? calendarViewDateTime.month === index + 1 : false;
       const currentMonthDT = external_luxon_namespaceObject.DateTime.fromObject({
         year: calendarViewDateTime?.year,
         month: index + 1,
@@ -24215,16 +24431,22 @@ const MonthsView = () => {
       const isAriaDisabled = isMinMonthReached || isMaxMonthReached;
       const isCalendarFirstDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime?.toFormat('yyyy-MM');
       const isCalendarSecondDateSelected = currentMonthDT.toFormat('yyyy-MM') === otherDateDT?.toFormat('yyyy-MM');
+      const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
       let isHighlightDate = false;
       if (isHighlightEnabled && lastChangedDate && otherDateDT && dateTime) {
         isHighlightDate = highlightDates.mode === 'dateTo' ? otherDateDT < currentMonthDT && currentMonthDT < dateTime : dateTime < currentMonthDT && currentMonthDT < otherDateDT;
       }
+      const rangeEdge = getRangeEdge({
+        isFirstSelected: isCalendarFirstDateSelected,
+        isSecondSelected: isCalendarSecondDateSelected,
+        isRangeActive: isHighlightEnabled && !!otherDateDT && !!dateTime,
+        mode: highlightDates?.mode
+      });
       return (0,jsx_runtime_namespaceObject.jsx)(MonthsViewCell, {
-        isCalendarMonth: isCalendarMonth,
+        isCalendarDateSelected: isCalendarDateSelected,
         "aria-disabled": isAriaDisabled,
         "aria-label": `${month}, ${calendarViewDateTime?.year}`,
-        isCalendarFirstDateSelected: isCalendarFirstDateSelected,
-        isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+        rangeEdge: rangeEdge,
         isHighlighted: isHighlightDate,
         children: month
       }, month);
@@ -24333,14 +24555,20 @@ const YearsView = () => {
       }
       const isCalendarFirstDateSelected = year.toString() === dateTime?.toFormat('yyyy');
       const isCalendarSecondDateSelected = year.toString() === otherDateDT?.toFormat('yyyy');
+      const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
       let isHighlightDate = false;
       if (isHighlightEnabled && lastChangedDate && otherDateDT && dateTime) {
         isHighlightDate = highlightDates.mode === 'dateTo' ? otherDateDT.year < year && year < dateTime.year : dateTime.year < year && year < otherDateDT.year;
       }
+      const rangeEdge = getRangeEdge({
+        isFirstSelected: isCalendarFirstDateSelected,
+        isSecondSelected: isCalendarSecondDateSelected,
+        isRangeActive: isHighlightEnabled && !!otherDateDT && !!dateTime,
+        mode: highlightDates?.mode
+      });
       return (0,jsx_runtime_namespaceObject.jsx)(YearsViewCell, {
-        isCalendarYear: isCalendarYear,
-        isCalendarFirstDateSelected: isCalendarFirstDateSelected,
-        isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+        isCalendarDateSelected: isCalendarDateSelected,
+        rangeEdge: rangeEdge,
         isHighlighted: isHighlightDate,
         ...additionalProps,
         children: year
@@ -24447,7 +24675,7 @@ const DatePickerMonthsSwitch = () => {
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-left",
-        size: 14,
+        size: 18,
         tooltip: "Previous month",
         color: isMinMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
@@ -24468,7 +24696,7 @@ const DatePickerMonthsSwitch = () => {
     }), (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-right",
-        size: 14,
+        size: 18,
         tooltip: "Next month",
         color: isMaxMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
@@ -24498,8 +24726,8 @@ function DatePickerHeader_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 
 
 var DatePickerHeader_ref =  true ? {
-  name: "ugcp8m",
-  styles: "display:flex;justify-content:space-between;width:100%;height:32px;margin-bottom:12px"
+  name: "148aj7w",
+  styles: "display:flex;justify-content:space-between;width:100%;height:32px;margin-bottom:8px"
 } : 0;
 const DatePickerHeader = () => {
   const {
@@ -24539,7 +24767,7 @@ const DatePickerHeader = () => {
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: pickerType !== PICKER_TYPE.YEARS ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: calendarType === CALENDAR_TYPE.DAYS || calendarType === CALENDAR_TYPE.MONTHS ? 'carrot-down' : 'carrot-up',
-        size: 14,
+        size: 16,
         tooltip: ""
       }) : null,
       variant: "tertiary",
@@ -24547,11 +24775,11 @@ const DatePickerHeader = () => {
       "data-testid": "calendar-type-change-button",
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
         padding: 0,
-        fontSize: 18,
+        fontSize: 16,
         fontWeight: 700,
-        lineHeight: '24px',
+        lineHeight: '20px',
         height: 32,
-        gap: 16,
+        gap: 8,
         cursor: pickerType === PICKER_TYPE.YEARS ? 'default' : 'pointer',
         '&:focus::before': {
           display: 'none'
@@ -24561,6 +24789,94 @@ const DatePickerHeader = () => {
     }), (0,jsx_runtime_namespaceObject.jsx)(DatePickerMonthsSwitch, {})]
   });
 };
+;// ./src/components/DatePicker/components/DatePickerTimePanel.tsx
+
+
+
+
+
+const pad = value => String(value).padStart(2, '0');
+
+/**
+ * Centres a column on its selected cell by scrolling the column itself —
+ * `scrollIntoView` can bubble up and scroll the whole page (same reason as
+ * YearsView).
+ */
+const centreOnSelected = container => {
+  if (!container) return;
+  const selectedEl = container.querySelector('[aria-selected=true]');
+  if (!selectedEl) return;
+  const containerRect = container.getBoundingClientRect();
+  const elRect = selectedEl.getBoundingClientRect();
+  container.scrollTop += elRect.top - containerRect.top - container.clientHeight / 2 + elRect.height / 2;
+};
+
+/**
+ * Hours and minutes columns shown beside the calendar when `showTimePicker`
+ * is set, matching the Figma `Day & Time Picker` pop-up.
+ *
+ * The hours and minutes columns scroll independently, so reaching a late hour
+ * doesn't drag the minutes list out of view. Each is centred on its own
+ * selected value when the popover opens.
+ */
+const DatePickerTimePanel = () => {
+  const {
+    dateTime,
+    isOpen,
+    minuteStep = DEFAULT_MINUTE_STEP,
+    setTime
+  } = useDatePickerContext();
+  const hoursRef = (0,external_react_namespaceObject.useRef)(null);
+  const minutesRef = (0,external_react_namespaceObject.useRef)(null);
+  const step = Number.isFinite(minuteStep) && minuteStep > 0 && minuteStep <= 60 ? Math.floor(minuteStep) : DEFAULT_MINUTE_STEP;
+  const hours = Array.from({
+    length: HOURS_IN_DAY
+  }, (_, index) => index);
+  const minutes = Array.from({
+    length: Math.ceil(MINUTES_IN_HOUR / step)
+  }, (_, index) => index * step);
+  const selectedHour = dateTime?.hour;
+  // The selected minute rarely lands exactly on a step, so highlight the step
+  // it belongs to rather than nothing at all.
+  const selectedMinute = dateTime && Number.isFinite(dateTime.minute) ? Math.floor(dateTime.minute / step) * step : undefined;
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (!isOpen) return;
+    centreOnSelected(hoursRef.current);
+    centreOnSelected(minutesRef.current);
+  }, [isOpen, selectedHour, selectedMinute]);
+  return (0,jsx_runtime_namespaceObject.jsxs)(TimePanel, {
+    "data-testid": "datepicker-time-panel",
+    children: [(0,jsx_runtime_namespaceObject.jsx)(TimeColumn, {
+      ref: hoursRef,
+      role: "listbox",
+      "aria-label": "Hours",
+      children: hours.map(hour => (0,jsx_runtime_namespaceObject.jsx)(TimeCell, {
+        role: "option",
+        "aria-selected": selectedHour === hour,
+        "aria-label": `${pad(hour)} hours`,
+        isSelected: selectedHour === hour,
+        onClick: () => setTime?.({
+          hour
+        }),
+        children: pad(hour)
+      }, `hour-${hour}`))
+    }), (0,jsx_runtime_namespaceObject.jsx)(TimeColumn, {
+      ref: minutesRef,
+      role: "listbox",
+      "aria-label": "Minutes",
+      children: minutes.map(minute => (0,jsx_runtime_namespaceObject.jsx)(TimeCell, {
+        role: "option",
+        "aria-selected": selectedMinute === minute,
+        "aria-label": `${pad(minute)} minutes`,
+        isSelected: selectedMinute === minute,
+        onClick: () => setTime?.({
+          minute
+        }),
+        children: pad(minute)
+      }, `minute-${minute}`))
+    })]
+  });
+};
 ;// ./src/components/DatePicker/components/DatePickerCalendar.tsx
 function DatePickerCalendar_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -24570,8 +24886,8 @@ function DatePickerCalendar_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have
 
 
 var DatePickerCalendar_ref =  true ? {
-  name: "14ggdrv",
-  styles: "height:100%;display:flex;flex-direction:column;justify-content:space-between"
+  name: "16fpk5u",
+  styles: "height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between"
 } : 0;
 const DatePickerCalendar = () => {
   const theme = (0,react_namespaceObject.useTheme)();
@@ -24582,7 +24898,8 @@ const DatePickerCalendar = () => {
   };
   const {
     calendarType,
-    classNames
+    classNames,
+    showTimePicker
   } = useDatePickerContext();
   const Component = components[calendarType];
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
@@ -24591,18 +24908,59 @@ const DatePickerCalendar = () => {
       background: theme.colors.white,
       boxShadow: `-4px 4px 14px 0px ${theme.colors.greyDarker14}`,
       borderRadius: 16,
-      padding: 24,
-      paddingTop: 16,
-      width: 346,
-      height: 370,
+      // The calendar keeps its own 24px padding; the time panel brings its
+      // own, so the padding moves inside when both are shown.
+      padding: showTimePicker ? 0 : 24,
+      paddingTop: showTimePicker ? 0 : 16,
+      // 328 calendar + 144 time panel, per the Figma Day & Time pop-up.
+      width: showTimePicker ? 472 : 328,
+      height: 368,
+      flexDirection: 'row',
       alignItems: 'flex-start',
       zIndex: 100
     },  true ? "" : 0,  true ? "" : 0),
-    children: [(0,jsx_runtime_namespaceObject.jsx)(DatePickerHeader, {}), (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
-      as: "div",
-      css: DatePickerCalendar_ref,
-      children: (0,jsx_runtime_namespaceObject.jsx)(Component, {})
-    })]
+    children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        flexShrink: 0,
+        width: showTimePicker ? 328 : '100%',
+        height: '100%',
+        padding: showTimePicker ? '16px 24px 24px' : 0
+      },  true ? "" : 0,  true ? "" : 0),
+      children: [(0,jsx_runtime_namespaceObject.jsx)(DatePickerHeader, {}), (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
+        as: "div",
+        css: DatePickerCalendar_ref,
+        children: (0,jsx_runtime_namespaceObject.jsx)(Component, {})
+      })]
+    }), showTimePicker && (0,jsx_runtime_namespaceObject.jsx)(DatePickerTimePanel, {})]
+  });
+};
+;// ./src/components/DatePicker/components/ClearButton.tsx
+
+
+
+const ClearButton = ({
+  onClick,
+  ariaLabel,
+  dataTestId,
+  className,
+  css: cssProp
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+    endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+      name: "cross",
+      size: 16,
+      color: theme.colors.greyDarker80
+    }),
+    "data-testid": dataTestId,
+    onClick: onClick,
+    variant: "tertiary",
+    "aria-label": ariaLabel,
+    className: className,
+    css: ["padding:0;&:focus::before{display:none;}", cssProp,  true ? "" : 0,  true ? "" : 0]
   });
 };
 ;// ./src/components/DatePicker/components/DatePickerTrigger.tsx
@@ -24615,6 +24973,11 @@ function DatePickerTrigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have t
 
 
 
+
+var DatePickerTrigger_ref =  true ? {
+  name: "sbd56d",
+  styles: "gap:16px;align-items:center"
+} : 0;
 const DatePickerTrigger = () => {
   const {
     format,
@@ -24626,7 +24989,11 @@ const DatePickerTrigger = () => {
     inputProps,
     disabled,
     helperText,
+    success,
     showCalendarIcon,
+    showClearButton,
+    isDirty,
+    resetToDefault,
     onBlur: handleBlur,
     setIsOpen,
     validationSchema
@@ -24646,7 +25013,12 @@ const DatePickerTrigger = () => {
     }
   } = hookFormResult;
   const fieldError = errors[name];
-  const fieldStatus = fieldError?.message ? 'error' : 'basic';
+  let fieldStatus = 'basic';
+  if (fieldError?.message) {
+    fieldStatus = 'error';
+  } else if (success) {
+    fieldStatus = 'success';
+  }
   const toggleOpen = () => {
     setIsOpen(current => !current);
   };
@@ -24679,6 +25051,20 @@ const DatePickerTrigger = () => {
       }
     },  true ? "" : 0,  true ? "" : 0)
   }) : undefined;
+  const clearButton = showClearButton && isDirty && !disabled ? (0,jsx_runtime_namespaceObject.jsx)(ClearButton, {
+    dataTestId: "datepicker-clear-button",
+    onClick: () => resetToDefault?.(),
+    ariaLabel: "Clear date",
+    className: classNames?.trigger?.clearButton
+  }) : undefined;
+
+  // Figma groups the trailing actions with a 16px gap; rendering them as a
+  // single `endElement` keeps Input's absolute positioning applying to the
+  // group rather than to each button.
+  const actions = clearButton || calendarButton ? (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+    css: DatePickerTrigger_ref,
+    children: [clearButton, calendarButton]
+  }) : undefined;
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
     children: [label && (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
       htmlFor: name,
@@ -24711,7 +25097,7 @@ const DatePickerTrigger = () => {
           name: "lhoo11",
           styles: "&>span::first-letter{text-transform:uppercase;}"
         } : 0),
-        endElement: calendarButton
+        endElement: actions
       })
     })]
   });
@@ -24914,132 +25300,33 @@ const getFormatForRangePickerType = rangePickerType => {
 ;// ./src/components/DateRangePicker/components/DatesListWrapper.tsx
 
 
+
+/**
+ * Wraps the date grid and styles the "range you are about to pick" preview
+ * band that appears between a selected anchor and the currently hovered cell.
+ *
+ * The band is a translucent fill with a hairline top/bottom rule, capped with
+ * a rounded corner at each end — so which cell is the left cap and which is
+ * the right depends on the direction being previewed:
+ *
+ * - **`hover-range-from`** — hovering *before* the start anchor, so the
+ *   hovered cell is the left cap and the selected anchor is the right.
+ * - **`hover-range-to`** — hovering *after* the end anchor, so the selected
+ *   anchor is the left cap and the hovered cell is the right.
+ */
 const DatesListWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   target: "e10i52w40"
-} : 0)("flex-wrap:wrap;&>div.hover-range-from.date-hovered,&>div.hover-range-to.date-hovered{background:", ({
-  theme
-}) => theme.colors.greyLighter, ";border-left:none;border-top-left-radius:6px;border-bottom-left-radius:6px;}&>div.hover-range-from:not(.selected-range-from, .date-hovered),&>div.hover-range-to:not(.selected-range-to, .date-hovered){background:", ({
-  theme
-}) => theme.colors.greyLighter60, ";border-radius:0;}&>div.hover-range-from.selected-range-from::after,&>div.hover-range-from.date-hovered::after,&>div.hover-range-to.selected-range-to::after,&>div.hover-range-to.date-hovered::after{content:'';position:absolute;width:10px;height:40px;z-index:-1;background:", ({
-  theme
-}) => theme.colors.greyLighter60, ";}&>div.hover-range-from.selected-range-from::after,&>div.hover-range-to.date-hovered::after{left:0;}&>div.hover-range-from.date-hovered::after,&>div.hover-range-to.selected-range-to::after{right:0;}&>div.hover-range-form.selected-range-from:has(~ div.date-hovered)::after,&>div.hover-range-to.selected-range-to:has(+ div.date-hovered)::after,&>div.date-hovered:has(+ div.selected-range-from)::after,&>div.hover-range-to.selected-range-to+div.date-hovered::after,&>div.date-hovered+div.selected-range-from::after{background:", ({
-  theme
-}) => theme.colors.greyLighter, ";}" + ( true ? "" : 0));
-;// ./src/components/DateRangePicker/styles.ts
-
-function DateRangePicker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-const styles_DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
-  target: "e19l41fq3"
-} : 0)("position:relative;width:40px;height:40px;justify-content:center;font-size:14px;font-weight:500;border-radius:", ({
-  isHighlighted
-}) => isHighlighted ? 0 : '6px', ";border:", ({
-  theme,
-  isCalendarDateNow
-}) => isCalendarDateNow ? `1px solid ${theme.colors.greyFocused}` : 'none', ";color:", ({
-  theme,
-  isCalendarDateSelected
-}) => isCalendarDateSelected ? theme.colors.white : theme.colors.greyDarker, ";background:", ({
-  theme,
-  isCalendarDateSelected
-}) => isCalendarDateSelected && theme.palette.primary.main, ";cursor:pointer;user-select:none;&[aria-disabled='true']{color:", ({
-  theme
-}) => theme.colors.grey, ";cursor:default;pointer-events:none;}&[aria-disabled='false']{background:", ({
-  theme,
-  isCalendarDateSelected,
-  isHighlighted
-}) => isHighlighted && !isCalendarDateSelected && theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";&:hover{background:", ({
+} : 0)("flex-wrap:wrap;&>div.hover-range-from:not(.selected-range-from),&>div.hover-range-to:not(.selected-range-to){background:", ({
   theme
-}) => theme.colors.greyLighter, ";color:", ({
+}) => theme.colors.greyPale16, ";border-top:1px solid ", ({
   theme
-}) => theme.colors.greyDarker, ";}&::before{content:'';display:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
-  isCalendarSecondDateSelected
-}) => isCalendarSecondDateSelected ? '0' : 'auto', ";right:", ({
-  isCalendarFirstDateSelected
-}) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
-  theme
-}) => theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";}}&:hover{border:", ({
-  theme,
-  isCalendarDateNow
-}) => isCalendarDateNow && `1px solid ${theme.colors.greyFocused}`, ";}" + ( true ? "" : 0));
-const styles_YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e19l41fq2"
-} : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:70px;height:40px;border-radius:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? '6px' : 0, ";font-size:14px;font-weight:500px;user-select:none;cursor:pointer;color:", ({
-  theme,
-  isCalendarYear,
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => (isCalendarYear || isCalendarFirstDateSelected || isCalendarSecondDateSelected) && theme.colors.white, ";background:", ({
-  theme,
-  isCalendarYear,
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarYear || isCalendarFirstDateSelected || isCalendarSecondDateSelected ? theme.palette.primary.main : 'none', ";background:", ({
-  theme,
-  isHighlighted,
-  isCalendarYear,
-  isCalendarSecondDateSelected
-}) => isHighlighted && !isCalendarYear && !isCalendarSecondDateSelected && theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";&:hover{background:", ({
-  theme
-}) => theme.colors.greyLighter, ";color:", ({
-  theme
-}) => theme.colors.greyDarker, ";border-radius:6px;}&::before{content:'';display:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
-  isCalendarSecondDateSelected
-}) => isCalendarSecondDateSelected ? '0' : 'auto', ";right:", ({
-  isCalendarFirstDateSelected
-}) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
-  theme
-}) => theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";}" + ( true ? "" : 0));
-const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e19l41fq1"
-} : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:99px;height:40px;border-radius:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? '6px' : 0, ";font-size:14px;font-weight:500;cursor:pointer;color:", ({
-  theme,
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => (isCalendarFirstDateSelected || isCalendarSecondDateSelected) && theme.colors.white, ";user-select:none;background:", ({
-  theme,
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? theme.palette.primary.main : 'none', ";&[aria-disabled='true']{cursor:default;pointer-events:none;color:", ({
-  theme
-}) => theme.colors.greyDarker, ";background:", ({
-  theme
-}) => theme.colors.grey, ";}&[aria-disabled='false']{background:", ({
-  theme,
-  isHighlighted,
-  isCalendarSecondDateSelected
-}) => isHighlighted && !isCalendarSecondDateSelected && theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";&:hover{background:", ({
+}) => theme.palette.secondary.light, ";border-bottom:1px solid ", ({
   theme
-}) => theme.colors.greyLighter, ";color:", ({
+}) => theme.palette.secondary.light, ";border-radius:0;}&>div.hover-range-from.date-hovered,&>div.hover-range-to.selected-range-to{border-left:1px solid ", ({
   theme
-}) => theme.colors.greyDarker, ";}&::before{content:'';display:", ({
-  isCalendarFirstDateSelected,
-  isCalendarSecondDateSelected
-}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
-  isCalendarSecondDateSelected
-}) => isCalendarSecondDateSelected ? '0' : 'auto', ";right:", ({
-  isCalendarFirstDateSelected
-}) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
+}) => theme.palette.secondary.light, ";border-top-left-radius:6px;border-bottom-left-radius:6px;}&>div.hover-range-from.selected-range-from,&>div.hover-range-to.date-hovered{border-right:1px solid ", ({
   theme
-}) => theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";}}" + ( true ? "" : 0));
-const TriggerWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
-  target: "e19l41fq0"
-} : 0)( true ? {
-  name: "1h91tay",
-  styles: "padding:14px;cursor:default"
-} : 0);
+}) => theme.palette.secondary.light, ";border-top-right-radius:6px;border-bottom-right-radius:6px;}" + ( true ? "" : 0));
 ;// ./src/components/DateRangePicker/utils/dates.ts
 
 const dates_getDaysForCalendarMonth = date => {
@@ -25329,13 +25616,16 @@ const useRangeSelection = ({
       isCalendarDateSelected
     };
   };
+
+  // A range only has distinct start/end edges once both anchors are set.
+  const isRangeActive = !!(dateTime[0] && dateTime[1]);
   return {
     handleRangeSelect,
-    getDateSelectionState
+    getDateSelectionState,
+    isRangeActive
   };
 };
 ;// ./src/components/DateRangePicker/components/DaysView.tsx
-function components_DaysView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
 
@@ -25345,20 +25635,12 @@ function components_DaysView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have
 
 
 
-var components_DaysView_ref =  true ? {
-  name: "hisq2i",
-  styles: "padding-left:9px"
-} : 0;
-var components_DaysView_ref2 =  true ? {
-  name: "yzljcr",
-  styles: "width:40px;height:40px;justify-content:center;font-size:12px;font-weight:600;cursor:default;user-select:none"
-} : 0;
-var DaysView_ref3 =  true ? {
-  name: "hisq2i",
-  styles: "padding-left:9px"
-} : 0;
+
+
+
 const DaysView_DaysView = () => {
   const weekDays = dates_getWeekDays();
+  const theme = (0,react_namespaceObject.useTheme)();
   const {
     dateMinDT,
     dateMaxDT,
@@ -25375,7 +25657,8 @@ const DaysView_DaysView = () => {
   } = useRangeHighlighting();
   const {
     handleRangeSelect,
-    getDateSelectionState
+    getDateSelectionState,
+    isRangeActive
   } = useRangeSelection({
     createNewDate: selectedDay => currentCalendarViewDT.set({
       day: Number(selectedDay)
@@ -25394,13 +25677,21 @@ const DaysView_DaysView = () => {
   };
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
     children: [(0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
-      css: components_DaysView_ref,
       children: weekDays.map((weekDay, index) => (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
-        css: components_DaysView_ref2,
+        css: /*#__PURE__*/(0,react_namespaceObject.css)({
+          width: 40,
+          height: 40,
+          justifyContent: 'center',
+          fontSize: 12,
+          fontWeight: 600,
+          lineHeight: '16px',
+          color: theme.colors.greyDarker80,
+          cursor: 'default',
+          userSelect: 'none'
+        },  true ? "" : 0,  true ? "" : 0),
         children: weekDay
       }, `week-day-${weekDay}-${index}`))
     }), (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
-      css: DaysView_ref3,
       onClick: handleDaySelect,
       children: dates.map((currentDate, index) => {
         const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate).startOf('day');
@@ -25430,14 +25721,18 @@ const DaysView_DaysView = () => {
           isCalendarFirstDateSelected,
           isCalendarSecondDateSelected
         });
-        return (0,jsx_runtime_namespaceObject.jsx)(styles_DaysViewCell, {
+        return (0,jsx_runtime_namespaceObject.jsx)(DaysViewCell, {
           "aria-disabled": isAriaDisabled,
           "aria-label": ariaLabel,
           "data-day": calendarDate,
           isCalendarDateNow: isCalendarDateNow,
           isCalendarDateSelected: isCalendarDateSelected,
-          isCalendarFirstDateSelected: isCalendarFirstDateSelected,
-          isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+          rangeEdge: getRangeEdge({
+            isFirstSelected: isCalendarFirstDateSelected,
+            isSecondSelected: isCalendarSecondDateSelected,
+            isRangeActive,
+            mode: 'dateFrom'
+          }),
           isHighlighted: isHighlightDate(currentDT),
           className: classNames.join(' '),
           onMouseEnter: () => handleDateHover(currentDT),
@@ -25457,6 +25752,7 @@ function components_MonthsView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You ha
 
 
 
+
 var components_MonthsView_ref =  true ? {
   name: "icns00",
   styles: "padding-top:10px"
@@ -25480,7 +25776,8 @@ const MonthsView_MonthsView = () => {
   } = useRangeHighlighting();
   const {
     handleRangeSelect,
-    getDateSelectionState
+    getDateSelectionState,
+    isRangeActive
   } = useRangeSelection({
     createNewDate: selectedMonth => {
       const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
@@ -25539,11 +25836,16 @@ const MonthsView_MonthsView = () => {
         isCalendarFirstDateSelected,
         isCalendarSecondDateSelected
       });
-      return (0,jsx_runtime_namespaceObject.jsx)(styles_MonthsViewCell, {
+      return (0,jsx_runtime_namespaceObject.jsx)(MonthsViewCell, {
         "aria-disabled": isAriaDisabled,
         "aria-label": `${month}, ${currentCalendarViewDT?.year}`,
-        isCalendarFirstDateSelected: isCalendarFirstDateSelected,
-        isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+        isCalendarDateSelected: isCalendarFirstDateSelected || isCalendarSecondDateSelected,
+        rangeEdge: getRangeEdge({
+          isFirstSelected: isCalendarFirstDateSelected,
+          isSecondSelected: isCalendarSecondDateSelected,
+          isRangeActive,
+          mode: 'dateFrom'
+        }),
         isHighlighted: isHighlightDate(currentMonthDT),
         className: classNames.join(' '),
         onMouseEnter: () => handleDateHover(currentMonthDT),
@@ -25563,6 +25865,7 @@ function components_YearsView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You hav
 
 
 
+
 var components_YearsView_ref =  true ? {
   name: "1lqam8u",
   styles: "overflow-y:auto;height:280px;align-content:flex-start"
@@ -25595,7 +25898,8 @@ const YearsView_YearsView = () => {
   } = useRangeHighlighting();
   const {
     handleRangeSelect,
-    getDateSelectionState
+    getDateSelectionState,
+    isRangeActive
   } = useRangeSelection({
     createNewDate: selectedYear => {
       const newYear = currentCalendarViewDT?.set({
@@ -25691,11 +25995,15 @@ const YearsView_YearsView = () => {
         isCalendarFirstDateSelected,
         isCalendarSecondDateSelected
       });
-      return (0,jsx_runtime_namespaceObject.jsx)(styles_YearsViewCell, {
+      return (0,jsx_runtime_namespaceObject.jsx)(YearsViewCell, {
         className: classNames.join(' '),
-        isCalendarYear: isCalendarYear,
-        isCalendarFirstDateSelected: isCalendarFirstDateSelected,
-        isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+        isCalendarDateSelected: isCalendarFirstDateSelected || isCalendarSecondDateSelected,
+        rangeEdge: getRangeEdge({
+          isFirstSelected: isCalendarFirstDateSelected,
+          isSecondSelected: isCalendarSecondDateSelected,
+          isRangeActive,
+          mode: 'dateFrom'
+        }),
         isHighlighted: isHighlightDate(currentYearDT),
         onMouseEnter: () => handleDateHover(currentYearDT),
         onMouseLeave: () => handleDateHover(null),
@@ -25766,7 +26074,7 @@ const YearsMonthsSwitch = () => {
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-left",
-        size: 14,
+        size: 18,
         tooltip: `Previous ${rangePickerType === 'days' ? 'month' : 'year'}`,
         color: isMinMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
@@ -25786,7 +26094,7 @@ const YearsMonthsSwitch = () => {
     }), (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-right",
-        size: 14,
+        size: 18,
         tooltip: `Next ${rangePickerType === 'days' ? 'month' : 'year'}`,
         color: isMaxMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
@@ -25813,12 +26121,12 @@ function Header_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to str
 
 
 var Header_ref =  true ? {
-  name: "ugcp8m",
-  styles: "display:flex;justify-content:space-between;width:100%;height:32px;margin-bottom:12px"
+  name: "148aj7w",
+  styles: "display:flex;justify-content:space-between;width:100%;height:32px;margin-bottom:8px"
 } : 0;
 var Header_ref2 =  true ? {
-  name: "1bk2bba",
-  styles: "padding:0;font-size:18px;font-weight:700;line-height:24px;height:32px;gap:16px;&:focus::before{display:none;}"
+  name: "15si1yg",
+  styles: "padding:0;font-size:16px;font-weight:700;line-height:20px;height:32px;gap:8px;&:focus::before{display:none;}"
 } : 0;
 const Header = () => {
   const {
@@ -25836,7 +26144,7 @@ const Header = () => {
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: rangePickerType !== 'years' ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: calendarType === 'days' || calendarType === 'months' ? 'carrot-down' : 'carrot-up',
-        size: 14,
+        size: 16,
         tooltip: ""
       }) : null,
       variant: "tertiary",
@@ -26076,8 +26384,8 @@ const Calendar_DatePickerCalendar = () => {
       borderRadius: 16,
       padding: 24,
       paddingTop: 16,
-      width: 346,
-      height: showPresentOption ? 412 : 370,
+      width: 328,
+      height: showPresentOption ? 410 : 368,
       alignItems: 'flex-start',
       margin: '14px 0 0 -14px',
       zIndex: 100
@@ -26289,6 +26597,24 @@ const TriggerStatusArea = () => {
     })]
   });
 };
+;// ./src/components/DateRangePicker/styles.ts
+
+function DateRangePicker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+/*
+ * The calendar cells are identical to the single-date picker's, so they live in
+ * `DatePicker/styles.ts` and are re-exported here. Keeping one definition means
+ * a token, geometry, or range-edge fix lands in both pickers at once — the two
+ * files having drifted apart is exactly what this avoids.
+ */
+
+const TriggerWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
+  target: "e19l41fq0"
+} : 0)( true ? {
+  name: "1h91tay",
+  styles: "padding:14px;cursor:default"
+} : 0);
 ;// ./src/components/DateRangePicker/components/Trigger.tsx
 
 function Trigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -26301,10 +26627,15 @@ function Trigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to st
 
 
 
+
 var Trigger_ref =  true ? {
   name: "cx8u11",
   styles: "margin:0 3px;cursor:pointer"
 } : 0;
+var Trigger_ref2 =  true ? {
+  name: "oc2msk",
+  styles: "margin:0 0 0 10px;height:auto;cursor:pointer"
+} : 0;
 const Trigger = () => {
   const {
     nameFrom,
@@ -26315,7 +26646,10 @@ const Trigger = () => {
     status,
     isOpen,
     showCalendarIcon,
+    showClearButton,
     showStatusArea,
+    isDirty,
+    resetToDefault,
     classNames,
     setIsOpen,
     handleToggleOpen
@@ -26361,6 +26695,12 @@ const Trigger = () => {
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
           className: classNames?.trigger?.inputTo
+        }), showClearButton && isDirty && !disabled && (0,jsx_runtime_namespaceObject.jsx)(ClearButton, {
+          dataTestId: "daterangepicker-clear-button",
+          onClick: () => resetToDefault?.(),
+          ariaLabel: "Clear dates",
+          className: classNames?.trigger?.clearButton,
+          css: Trigger_ref2
         }), showCalendarIcon && (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
           asChild: true,
           children: (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
@@ -26964,29 +27304,48 @@ const useDateRangePicker = ({
       setIsOpen(isOpenState);
     }
   }, [isOpenState]);
+
+  /**
+   * Applies **`defaultValue`** to every piece of range state at once. Shared
+   * by the mount effect and the clear button, so resetting lands the picker in
+   * exactly the state it booted in — including the "Present" end date.
+   */
+  const applyDefaultValue = (0,external_react_namespaceObject.useCallback)(() => {
+    const defaultDateTimeFrom = typeof defaultValue?.[0] === 'string' && defaultValue[0].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(defaultValue[0], luxonFormat) : undefined;
+    const defaultDateTimeTo = typeof defaultValue?.[1] === 'string' && defaultValue[1].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(defaultValue[1], luxonFormat) : undefined;
+
+    // Handle null end date (represents "Present")
+    const isEndPresent = defaultValue?.[1] === null;
+    setIsEndDatePresent(isEndPresent);
+    const newDateTime = [defaultDateTimeFrom?.isValid ? defaultDateTimeFrom.startOf('day') : undefined, isEndPresent ? undefined : defaultDateTimeTo?.isValid ? defaultDateTimeTo.startOf('day') : undefined];
+    setDateTime(newDateTime);
+    setLastChangedDate([newDateTime[0]?.toJSDate(), isEndPresent ? null : newDateTime[1]?.toJSDate()]);
+    // Sync calendar view with default dates so they're visible when calendar opens
+    setCalendarViewDateTime([newDateTime[0] || newDateTime[1] || undefined, newDateTime[1] || newDateTime[0] || undefined]);
+    setValue(nameFrom, newDateTime[0]?.toFormat(luxonFormat) ?? '');
+    // Keep form value empty when "Present" to avoid mask errors
+    // "Present" is displayed via displayValue override in TriggerInput
+    setValue(nameTo, isEndPresent ? '' : newDateTime[1]?.toFormat(luxonFormat) ?? '');
+    return newDateTime;
+  }, [defaultValue, expectedDateLength, luxonFormat, nameFrom, nameTo, setCalendarViewDateTime, setValue]);
+
+  // Whether either field has moved away from its default, which is what makes
+  // the clear button meaningful.
+  const isDirty = (inputValueFrom ?? '') !== (defaultValue?.[0] ?? '') || (inputValueTo ?? '') !== (defaultValue?.[1] === null ? '' : defaultValue?.[1] ?? '');
+  const resetToDefault = (0,external_react_namespaceObject.useCallback)(() => {
+    const newDateTime = applyDefaultValue();
+    // A reset restarts range selection from the beginning.
+    setRangeSelectionStep(newDateTime[0] && newDateTime[1] ? null : 'start');
+    setLastFocusedElement('from');
+    onChange?.([newDateTime[0]?.toJSDate(), defaultValue?.[1] === null ? null : newDateTime[1]?.toJSDate()]);
+  }, [applyDefaultValue, defaultValue, onChange]);
   (0,external_react_namespaceObject.useEffect)(() => {
     // Only process defaultValue once on mount to avoid re-processing
     if (Array.isArray(defaultValue) && !defaultValueProcessed.current) {
-      const defaultDateTimeFrom = typeof defaultValue[0] === 'string' && defaultValue[0].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(defaultValue[0], luxonFormat) : undefined;
-      const defaultDateTimeTo = typeof defaultValue[1] === 'string' && defaultValue[1].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(defaultValue[1], luxonFormat) : undefined;
-
-      // Handle null end date (represents "Present")
-      const isEndPresent = defaultValue[1] === null;
-      if (isEndPresent) {
-        setIsEndDatePresent(true);
-      }
-      const newDateTime = [defaultDateTimeFrom?.isValid ? defaultDateTimeFrom.startOf('day') : undefined, isEndPresent ? undefined : defaultDateTimeTo?.isValid ? defaultDateTimeTo.startOf('day') : undefined];
-      setDateTime(newDateTime);
-      setLastChangedDate([newDateTime[0]?.toJSDate(), isEndPresent ? null : newDateTime[1]?.toJSDate()]);
-      // Sync calendar view with default dates so they're visible when calendar opens
-      setCalendarViewDateTime([newDateTime[0] || newDateTime[1] || undefined, newDateTime[1] || newDateTime[0] || undefined]);
-      setValue(nameFrom, newDateTime[0]?.toFormat(luxonFormat));
-      // Keep form value empty when "Present" to avoid mask errors
-      // "Present" is displayed via displayValue override in TriggerInput
-      setValue(nameTo, isEndPresent ? '' : newDateTime[1]?.toFormat(luxonFormat));
+      applyDefaultValue();
       defaultValueProcessed.current = true;
     }
-  }, [defaultValue, expectedDateLength, luxonFormat, nameFrom, nameTo, setCalendarViewDateTime, setValue, _name]);
+  }, [defaultValue, applyDefaultValue]);
   return {
     formatIndexes,
     dateMinParts,
@@ -27006,6 +27365,8 @@ const useDateRangePicker = ({
     currentIndex,
     currentCalendarViewDT,
     isOpen,
+    isDirty,
+    resetToDefault,
     status,
     inputFromRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRefFrom, inputFromRef]),
     inputToRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRefTo, inputToRef]),
@@ -30273,7 +30634,7 @@ var FiltersMultiSelect_ref2 =  true ? {
   name: "1a5utpy",
   styles: "gap:8px;flex-wrap:wrap;flex-grow:1"
 } : 0;
-var FiltersMultiSelect_ref3 =  true ? {
+var _ref3 =  true ? {
   name: "chpy5q",
   styles: "with:auto;border:0 !important;padding:2px 0;height:32px;border-radius:0"
 } : 0;
@@ -30384,7 +30745,7 @@ const FiltersMultiSelect = ({
                     name: "1sblf6",
                     styles: "width:auto!important;flex-grow:1"
                   } : 0),
-                  css: FiltersMultiSelect_ref3
+                  css: _ref3
                 })]
               }), (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
                 "data-testid": "clear-all-filters",
@@ -41764,7 +42125,7 @@ var pads = {"-": "", "_": " ", "0": "0"},
     percentRe = /^%/,
     requoteRe = /[\\^$*+?|[\]().{}]/g;
 
-function pad(value, fill, width) {
+function locale_pad(value, fill, width) {
   var sign = value < 0 ? "-" : "",
       string = (sign ? -value : value) + "",
       length = string.length;
@@ -41884,23 +42245,23 @@ function parseUnixTimestampSeconds(d, string, i) {
 }
 
 function formatDayOfMonth(d, p) {
-  return pad(d.getDate(), p, 2);
+  return locale_pad(d.getDate(), p, 2);
 }
 
 function formatHour24(d, p) {
-  return pad(d.getHours(), p, 2);
+  return locale_pad(d.getHours(), p, 2);
 }
 
 function formatHour12(d, p) {
-  return pad(d.getHours() % 12 || 12, p, 2);
+  return locale_pad(d.getHours() % 12 || 12, p, 2);
 }
 
 function formatDayOfYear(d, p) {
-  return pad(1 + src_day.count(src_year(d), d), p, 3);
+  return locale_pad(1 + src_day.count(src_year(d), d), p, 3);
 }
 
 function formatMilliseconds(d, p) {
-  return pad(d.getMilliseconds(), p, 3);
+  return locale_pad(d.getMilliseconds(), p, 3);
 }
 
 function formatMicroseconds(d, p) {
@@ -41908,15 +42269,15 @@ function formatMicroseconds(d, p) {
 }
 
 function formatMonthNumber(d, p) {
-  return pad(d.getMonth() + 1, p, 2);
+  return locale_pad(d.getMonth() + 1, p, 2);
 }
 
 function formatMinutes(d, p) {
-  return pad(d.getMinutes(), p, 2);
+  return locale_pad(d.getMinutes(), p, 2);
 }
 
 function formatSeconds(d, p) {
-  return pad(d.getSeconds(), p, 2);
+  return locale_pad(d.getSeconds(), p, 2);
 }
 
 function formatWeekdayNumberMonday(d) {
@@ -41925,7 +42286,7 @@ function formatWeekdayNumberMonday(d) {
 }
 
 function formatWeekNumberSunday(d, p) {
-  return pad(sunday.count(src_year(d) - 1, d), p, 2);
+  return locale_pad(sunday.count(src_year(d) - 1, d), p, 2);
 }
 
 function dISO(d) {
@@ -41935,7 +42296,7 @@ function dISO(d) {
 
 function formatWeekNumberISO(d, p) {
   d = dISO(d);
-  return pad(thursday.count(src_year(d), d) + (src_year(d).getDay() === 4), p, 2);
+  return locale_pad(thursday.count(src_year(d), d) + (src_year(d).getDay() === 4), p, 2);
 }
 
 function formatWeekdayNumberSunday(d) {
@@ -41943,53 +42304,53 @@ function formatWeekdayNumberSunday(d) {
 }
 
 function formatWeekNumberMonday(d, p) {
-  return pad(monday.count(src_year(d) - 1, d), p, 2);
+  return locale_pad(monday.count(src_year(d) - 1, d), p, 2);
 }
 
 function formatYear(d, p) {
-  return pad(d.getFullYear() % 100, p, 2);
+  return locale_pad(d.getFullYear() % 100, p, 2);
 }
 
 function formatYearISO(d, p) {
   d = dISO(d);
-  return pad(d.getFullYear() % 100, p, 2);
+  return locale_pad(d.getFullYear() % 100, p, 2);
 }
 
 function formatFullYear(d, p) {
-  return pad(d.getFullYear() % 10000, p, 4);
+  return locale_pad(d.getFullYear() % 10000, p, 4);
 }
 
 function formatFullYearISO(d, p) {
   var day = d.getDay();
   d = (day >= 4 || day === 0) ? thursday(d) : thursday.ceil(d);
-  return pad(d.getFullYear() % 10000, p, 4);
+  return locale_pad(d.getFullYear() % 10000, p, 4);
 }
 
 function formatZone(d) {
   var z = d.getTimezoneOffset();
   return (z > 0 ? "-" : (z *= -1, "+"))
-      + pad(z / 60 | 0, "0", 2)
-      + pad(z % 60, "0", 2);
+      + locale_pad(z / 60 | 0, "0", 2)
+      + locale_pad(z % 60, "0", 2);
 }
 
 function formatUTCDayOfMonth(d, p) {
-  return pad(d.getUTCDate(), p, 2);
+  return locale_pad(d.getUTCDate(), p, 2);
 }
 
 function formatUTCHour24(d, p) {
-  return pad(d.getUTCHours(), p, 2);
+  return locale_pad(d.getUTCHours(), p, 2);
 }
 
 function formatUTCHour12(d, p) {
-  return pad(d.getUTCHours() % 12 || 12, p, 2);
+  return locale_pad(d.getUTCHours() % 12 || 12, p, 2);
 }
 
 function formatUTCDayOfYear(d, p) {
-  return pad(1 + src_utcDay.count(src_utcYear(d), d), p, 3);
+  return locale_pad(1 + src_utcDay.count(src_utcYear(d), d), p, 3);
 }
 
 function formatUTCMilliseconds(d, p) {
-  return pad(d.getUTCMilliseconds(), p, 3);
+  return locale_pad(d.getUTCMilliseconds(), p, 3);
 }
 
 function formatUTCMicroseconds(d, p) {
@@ -41997,15 +42358,15 @@ function formatUTCMicroseconds(d, p) {
 }
 
 function formatUTCMonthNumber(d, p) {
-  return pad(d.getUTCMonth() + 1, p, 2);
+  return locale_pad(d.getUTCMonth() + 1, p, 2);
 }
 
 function formatUTCMinutes(d, p) {
-  return pad(d.getUTCMinutes(), p, 2);
+  return locale_pad(d.getUTCMinutes(), p, 2);
 }
 
 function formatUTCSeconds(d, p) {
-  return pad(d.getUTCSeconds(), p, 2);
+  return locale_pad(d.getUTCSeconds(), p, 2);
 }
 
 function formatUTCWeekdayNumberMonday(d) {
@@ -42014,7 +42375,7 @@ function formatUTCWeekdayNumberMonday(d) {
 }
 
 function formatUTCWeekNumberSunday(d, p) {
-  return pad(utcSunday.count(src_utcYear(d) - 1, d), p, 2);
+  return locale_pad(utcSunday.count(src_utcYear(d) - 1, d), p, 2);
 }
 
 function UTCdISO(d) {
@@ -42024,7 +42385,7 @@ function UTCdISO(d) {
 
 function formatUTCWeekNumberISO(d, p) {
   d = UTCdISO(d);
-  return pad(utcThursday.count(src_utcYear(d), d) + (src_utcYear(d).getUTCDay() === 4), p, 2);
+  return locale_pad(utcThursday.count(src_utcYear(d), d) + (src_utcYear(d).getUTCDay() === 4), p, 2);
 }
 
 function formatUTCWeekdayNumberSunday(d) {
@@ -42032,26 +42393,26 @@ function formatUTCWeekdayNumberSunday(d) {
 }
 
 function formatUTCWeekNumberMonday(d, p) {
-  return pad(utcMonday.count(src_utcYear(d) - 1, d), p, 2);
+  return locale_pad(utcMonday.count(src_utcYear(d) - 1, d), p, 2);
 }
 
 function formatUTCYear(d, p) {
-  return pad(d.getUTCFullYear() % 100, p, 2);
+  return locale_pad(d.getUTCFullYear() % 100, p, 2);
 }
 
 function formatUTCYearISO(d, p) {
   d = UTCdISO(d);
-  return pad(d.getUTCFullYear() % 100, p, 2);
+  return locale_pad(d.getUTCFullYear() % 100, p, 2);
 }
 
 function formatUTCFullYear(d, p) {
-  return pad(d.getUTCFullYear() % 10000, p, 4);
+  return locale_pad(d.getUTCFullYear() % 10000, p, 4);
 }
 
 function formatUTCFullYearISO(d, p) {
   var day = d.getUTCDay();
   d = (day >= 4 || day === 0) ? utcThursday(d) : utcThursday.ceil(d);
-  return pad(d.getUTCFullYear() % 10000, p, 4);
+  return locale_pad(d.getUTCFullYear() % 10000, p, 4);
 }
 
 function formatUTCZone() {
@@ -53992,10 +54353,47 @@ const ROWS_PER_PAGE_LIST = [{
 }];
 const DEFAULT_SELECTED_INDEX = 1;
 const DEFAULT_PER_PAGE_VALUE = ROWS_PER_PAGE_LIST[DEFAULT_SELECTED_INDEX].value;
+;// ./src/components/Pagination/hooks/useControllableState.ts
+
+/**
+ * useControllableState - Backs a value that can be either controlled by a
+ * parent (via `value`/`onChange`) or managed internally (via `defaultValue`).
+ *
+ * Mirrors the standard React controlled/uncontrolled input pattern: passing
+ * `value` opts into controlled mode, where the returned value always matches
+ * the prop and the setter only calls `onChange` (no internal state is
+ * written). Omitting `value` falls back to internal state seeded from
+ * `defaultValue`.
+ *
+ * @internal
+ */
+const useControllableState = ({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  name = 'value'
+}) => {
+  const [uncontrolledValue, setUncontrolledValue] = (0,external_react_namespaceObject.useState)(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const isControlledRef = (0,external_react_namespaceObject.useRef)(isControlled);
+  if (false) // removed by dead control flow
+{}
+  isControlledRef.current = isControlled;
+  const setValue = (0,external_react_namespaceObject.useCallback)(next => {
+    const resolved = typeof next === 'function' ? next(value) : next;
+    if (!isControlled) {
+      setUncontrolledValue(resolved);
+    }
+    onChange?.(resolved);
+  }, [isControlled, onChange, value]);
+  return [value, setValue];
+};
 ;// ./src/components/Pagination/PaginationContext.tsx
 
 
 
+
 /**
  * Pagination context
  * Provides page state and navigation functions to child components
@@ -54023,21 +54421,53 @@ const usePaginationContext = () => (0,external_react_namespaceObject.useContext)
  *
  * @example
  * ```tsx
+ * // Uncontrolled
  * <PaginationContextProvider selectedPage={1} defaultPerPage={25}>
  *   <Pagination pagesCount={10} />
  * </PaginationContextProvider>
  * ```
  *
+ * @example
+ * ```tsx
+ * // Controlled - parent owns page/perPage state
+ * const [page, setPage] = useState(1);
+ * <PaginationContextProvider page={page} onPageChange={setPage}>
+ *   <Pagination pagesCount={10} />
+ * </PaginationContextProvider>
+ * ```
+ *
  * @see {@link Pagination} - Child component that uses this context
  * @see {@link usePaginationContext} - Hook to access context values
  */
 const PaginationContextProvider = ({
   selectedPage,
   defaultPerPage = DEFAULT_PER_PAGE_VALUE,
+  page: controlledPage,
+  perPage: controlledPerPage,
+  onPageChange,
+  onPerPageChange,
   children
 }) => {
-  const [perPage, setPerPage] = (0,external_react_namespaceObject.useState)(defaultPerPage);
-  const [page, setPage] = (0,external_react_namespaceObject.useState)(selectedPage);
+  // `page` can be `undefined` (no page selected yet), but the public
+  // `onPageChange` callback only ever needs to handle real page numbers -
+  // Pagination never navigates to an undefined page.
+  const handlePageChange = (0,external_react_namespaceObject.useCallback)(value => {
+    if (value !== undefined) {
+      onPageChange?.(value);
+    }
+  }, [onPageChange]);
+  const [page, setPage] = useControllableState({
+    value: controlledPage,
+    defaultValue: selectedPage,
+    onChange: handlePageChange,
+    name: 'page'
+  });
+  const [perPage, setPerPage] = useControllableState({
+    value: controlledPerPage,
+    defaultValue: defaultPerPage,
+    onChange: onPerPageChange,
+    name: 'perPage'
+  });
   return (0,jsx_runtime_namespaceObject.jsx)(PaginationContext.Provider, {
     value: {
       page,
@@ -54100,7 +54530,7 @@ const PaginationContextProvider = ({
  */
 
 const RowsPerPageDropdown = ({
-  selectedItem = DEFAULT_PER_PAGE_VALUE,
+  selectedItem,
   rowsPerPageList = ROWS_PER_PAGE_LIST,
   rowsPerPageText = 'Rows per page',
   dropdownPosition,
@@ -54108,11 +54538,12 @@ const RowsPerPageDropdown = ({
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const {
+    perPage,
     setPerPage
   } = usePaginationContext();
   const selectedItemForDropdown = rowsPerPageList.find(({
     value
-  }) => value === selectedItem) || rowsPerPageList[0];
+  }) => value === (selectedItem ?? perPage)) || rowsPerPageList[0];
   const onChange = ({
     value
   }) => {