@ssa-ui-kit/core 3.16.0 → 3.16.2

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)',
@@ -12147,7 +12149,7 @@ const Chart = ({
     stroke: fill,
     strokeWidth: "0.2"
   }), (0,jsx_runtime_namespaceObject.jsx)("path", {
-    d: "M18.0192 19.3336L18.0189 19.3339C17.9231 19.4225 17.7972 19.4721 17.6668 19.4721L18.0192 19.3336ZM18.0192 19.3336C19.9769 17.5072 21.1001 14.9258 21.1001 12.2497C21.1001 11.9645 20.8687 11.733 20.5835 11.733H12.2501M18.0192 19.3336L12.2501 11.733M12.2501 11.733C12.0517 11.733 11.8691 11.8475 11.7832 12.0274M12.2501 11.733L11.7832 12.0274M11.7832 12.0274C11.6974 12.2073 11.7232 12.4202 11.8482 12.5743M11.7832 12.0274L11.8482 12.5743M11.8482 12.5743C11.8483 12.5743 11.8483 12.5743 11.8483 12.5744M11.8482 12.5743L11.8483 12.5744M11.8483 12.5744L17.2645 19.2795C17.2645 19.2796 17.2646 19.2797 17.2647 19.2797C17.3549 19.3926 17.4872 19.4606 17.63 19.471C17.6298 19.471 17.6296 19.471 17.6295 19.471L11.8483 12.5744ZM20.0512 12.7664C19.9288 14.7847 19.0958 16.7118 17.7089 18.185L13.332 12.7664H20.0512Z",
+    d: "M18.0192 19.3336L18.0189 19.3339C17.9231 19.4225 17.7972 19.4721 17.6668 19.4721L18.0192 19.3336ZM18.0192 19.3336C19.9769 17.5072 21.1001 14.9258 21.1001 12.2497C21.1001 11.9645 20.8687 11.733 20.5835 11.733H12.2501C12.0517 11.733 11.8691 11.8475 11.7832 12.0274C11.6974 12.2073 11.7232 12.4202 11.8482 12.5743C11.8483 12.5743 11.8483 12.5743 11.8483 12.5744L17.2645 19.2795C17.2645 19.2796 17.2646 19.2797 17.2647 19.2797C17.3549 19.3926 17.4872 19.4606 17.63 19.471C17.6298 19.471 17.6296 19.471 17.6295 19.471ZM20.0512 12.7664C19.9288 14.7847 19.0958 16.7118 17.7089 18.185L13.332 12.7664H20.0512Z",
     fill: fill,
     stroke: fill,
     strokeWidth: "0.2"
@@ -14486,15 +14488,10 @@ const TechnicalReview = ({
   fill: "none",
   ...props,
   children: [(0,jsx_runtime_namespaceObject.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12.0234 11.5312C12.9958 11.5316 13.7734 12.3206 13.7607 13.293C13.7479 14.2654 12.9491 15.0536 11.9766 15.0537C11.0042 15.0534 10.2257 14.2653 10.2383 13.293C10.2511 12.3205 11.0509 11.5314 12.0234 11.5312ZM12.0098 12.5166C11.5816 12.5169 11.2293 12.8648 11.2236 13.293C11.2182 13.7212 11.5619 14.0683 11.9902 14.0684C12.4183 14.068 12.7696 13.7211 12.7754 13.293C12.7809 12.8647 12.4381 12.5167 12.0098 12.5166Z",
-    fill: fill
-  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12.3076 8.59961C12.7457 8.59961 13.1314 8.88039 13.2646 9.2959L13.418 9.77148C13.4711 9.93709 13.5981 10.0786 13.7695 10.1748C13.8031 10.1936 13.8373 10.2126 13.8701 10.2324C14.0385 10.3343 14.2256 10.3768 14.3975 10.3418L14.8896 10.2412C15.32 10.1534 15.7555 10.3503 15.9697 10.7295L16.2178 11.1699C16.4317 11.5494 16.377 12.0267 16.082 12.3545L15.7441 12.7305C15.6266 12.8612 15.5669 13.044 15.5674 13.2412C15.5675 13.2801 15.5666 13.3195 15.5654 13.3584C15.5598 13.5555 15.6155 13.7385 15.7295 13.8691L16.0576 14.2451C16.3436 14.5728 16.3858 15.0495 16.1621 15.4287L15.9023 15.8691C15.6782 16.2485 15.2377 16.4452 14.8096 16.3574L14.3203 16.2568C14.1494 16.2218 13.9611 16.2644 13.79 16.3662C13.7565 16.3862 13.7217 16.4049 13.6875 16.4238C13.5136 16.5201 13.3827 16.6616 13.3252 16.8271L13.1602 17.3027C13.0161 17.7184 12.6228 17.999 12.1846 17.999H11.6768C11.2388 17.9988 10.8539 17.7182 10.7207 17.3027L10.5674 16.8271C10.5142 16.6616 10.3863 16.52 10.2148 16.4238C10.1814 16.405 10.147 16.386 10.1143 16.3662C9.94603 16.2646 9.75951 16.2219 9.58789 16.2568L9.09473 16.3574C8.66443 16.4451 8.22977 16.2484 8.01562 15.8691L7.76758 15.4287C7.55373 15.0493 7.60843 14.5729 7.90332 14.2451L8.24121 13.8691C8.35879 13.7385 8.41745 13.5556 8.41699 13.3584C8.41689 13.3195 8.41783 13.2801 8.41895 13.2412C8.42461 13.0441 8.36992 12.8612 8.25586 12.7305L7.92773 12.3545C7.64146 12.0267 7.59929 11.5493 7.82324 11.1699L8.08301 10.7295C8.30707 10.3503 8.74685 10.1536 9.1748 10.2412L9.66504 10.3418C9.83584 10.3768 10.0233 10.3341 10.1943 10.2324C10.2278 10.2125 10.2628 10.1937 10.2969 10.1748C10.471 10.0785 10.6027 9.93727 10.6602 9.77148L10.8252 9.2959C10.9693 8.88048 11.3618 8.59981 11.7998 8.59961H12.3076Z",
-    fill: fill
+    d: "M9.09668 1.25781C9.46843 0.514309 10.5286 0.514329 10.9004 1.25781L12.6406 4.73828C12.9075 5.27115 13.4163 5.64255 14.0059 5.7334L18.4395 6.41504C19.2563 6.54082 19.5836 7.54149 19 8.125L16.0127 11.1123C15.5986 11.5264 15.4061 12.1136 15.4951 12.6924L16.1787 17.1348C16.3041 17.9516 15.4482 18.5637 14.7158 18.1816L10.8496 16.165H10.8486C10.3821 15.9224 9.83845 15.8921 9.35254 16.0742L9.14746 16.165L5.28223 18.1816C4.54927 18.5639 3.693 17.9516 3.81836 17.1348L4.50195 12.6924C4.59093 12.1136 4.39847 11.5264 3.98437 11.1123L0.99707 8.125C0.413213 7.54068 0.74073 6.54078 1.55762 6.41504L5.99121 5.7334C6.50714 5.65392 6.96097 5.35995 7.24512 4.93066L7.35645 4.73828L9.09668 1.25781Z",
+    stroke: fill,
+    strokeWidth: 3.5,
+    transform: "translate(8, 9.54) scale(0.4)"
   }), (0,jsx_runtime_namespaceObject.jsx)("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
@@ -17187,27 +17184,24 @@ const ClientFeedback = ({
   fill = '#000',
   size = 24,
   ...props
-}) => (0,jsx_runtime_namespaceObject.jsx)("svg", {
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
   width: `${size}px`,
   height: `${size}px`,
   viewBox: "0 0 24 24",
   fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
   ...props,
-  children: (0,jsx_runtime_namespaceObject.jsxs)("g", {
-    transform: "translate(4, 2)",
-    children: [(0,jsx_runtime_namespaceObject.jsx)("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M8 7C8.22918 7.00008 8.43942 7.12061 8.54688 7.3125L9.58496 9.16992C9.59674 9.19147 9.61417 9.21022 9.63477 9.22461C9.65537 9.23897 9.67986 9.24891 9.70508 9.25293L11.8867 9.61523C12.1126 9.65283 12.2979 9.80595 12.3691 10.0127C12.4399 10.2195 12.3853 10.4471 12.2256 10.6035L10.6846 12.1143C10.6669 12.1318 10.6525 12.1531 10.6445 12.1758C10.6366 12.1989 10.6353 12.2237 10.6387 12.248L10.9492 14.3301C10.981 14.545 10.8853 14.7598 10.7002 14.8877C10.5148 15.0156 10.2695 15.036 10.0635 14.9404L8.07324 14.0166C8.05059 14.0059 8.02557 14 8 14C7.97442 14 7.94886 14.0053 7.92578 14.0156L5.93555 14.9395C5.72964 15.0349 5.48516 15.015 5.2998 14.8877C5.11439 14.7597 5.01784 14.5446 5.0498 14.3291L5.36133 12.2471C5.365 12.2234 5.36233 12.1987 5.35449 12.1758C5.34655 12.1528 5.33332 12.1314 5.31543 12.1143L3.77441 10.6025C3.6152 10.4462 3.55929 10.2194 3.62988 10.0127C3.70069 9.80593 3.88642 9.65285 4.1123 9.61523L6.29492 9.25195C6.31988 9.24754 6.34382 9.23838 6.36426 9.22461C6.38487 9.21024 6.40226 9.19147 6.41406 9.16992L7.45312 7.3125C7.5606 7.12061 7.77081 7.00006 8 7Z",
-      fill: fill
-    }), (0,jsx_runtime_namespaceObject.jsx)("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M10.6318 0C11.1749 0 11.6563 0.269158 11.9326 0.672852H13.5801C14.9194 0.672852 15.9998 1.6888 16 2.9502V17.7227C15.9997 18.984 14.9194 20 13.5801 20H2.41992C1.08062 20 0.000265598 18.984 0 17.7227V2.9502C0.000160771 1.71644 1.03337 0.717969 2.33203 0.674805L4.06445 0.677734C4.34027 0.271405 4.82297 0 5.36816 0H10.6318ZM2.41992 1.94531C1.82377 1.94531 1.35172 2.39002 1.35156 2.9502V17.7227C1.35182 18.2828 1.82383 18.7275 2.41992 18.7275H13.5801C14.1762 18.7275 14.6482 18.2828 14.6484 17.7227V2.9502C14.6483 2.39002 14.1762 1.94531 13.5801 1.94531H12.1797V2.55273C12.1797 3.35395 11.481 4.0127 10.6318 4.0127H5.36816C4.51897 4.0127 3.82129 3.35395 3.82129 2.55273V1.94434L2.41992 1.94531ZM5.36816 1.19824C5.36816 1.19824 5.26284 1.18155 5.13281 1.26758C5.0076 1.35051 5.00309 1.45187 5.00293 1.45898V2.55273C5.00293 2.55273 5.00289 2.66179 5.08203 2.72559C5.22217 2.83854 5.36816 2.81445 5.36816 2.81445H10.6318C10.6318 2.81445 10.7372 2.83017 10.8672 2.74414C10.9969 2.65815 10.9971 2.55273 10.9971 2.55273V1.45898C10.997 1.45175 10.9941 1.34866 10.918 1.28711C10.7778 1.17415 10.6318 1.19824 10.6318 1.19824H5.36816Z",
-      fill: fill
-    })]
-  })
+  children: [(0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M9.09668 1.25781C9.46843 0.514309 10.5286 0.514329 10.9004 1.25781L12.6406 4.73828C12.9075 5.27115 13.4163 5.64255 14.0059 5.7334L18.4395 6.41504C19.2563 6.54082 19.5836 7.54149 19 8.125L16.0127 11.1123C15.5986 11.5264 15.4061 12.1136 15.4951 12.6924L16.1787 17.1348C16.3041 17.9516 15.4482 18.5637 14.7158 18.1816L10.8496 16.165H10.8486C10.3821 15.9224 9.83845 15.8921 9.35254 16.0742L9.14746 16.165L5.28223 18.1816C4.54927 18.5639 3.693 17.9516 3.81836 17.1348L4.50195 12.6924C4.59093 12.1136 4.39847 11.5264 3.98437 11.1123L0.99707 8.125C0.413213 7.54068 0.74073 6.54078 1.55762 6.41504L5.99121 5.7334C6.50714 5.65392 6.96097 5.35995 7.24512 4.93066L7.35645 4.73828L9.09668 1.25781Z",
+    stroke: fill,
+    strokeWidth: 3.5,
+    transform: "translate(8, 9.54) scale(0.4)"
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.6318 2C15.1749 2 15.6563 2.26916 15.9326 2.67285H17.5801C18.9194 2.67285 19.9998 3.6888 20 4.9502V19.7227C19.9997 20.984 18.9194 22 17.5801 22H6.41992C5.08062 22 4.00027 20.984 4 19.7227V4.9502C4.00016 3.71644 5.03337 2.71797 6.33203 2.6748L8.06445 2.67773C8.34027 2.2714 8.82297 2 9.36816 2H14.6318ZM6.41992 3.94531C5.82377 3.94531 5.35172 4.39002 5.35156 4.9502V19.7227C5.35182 20.2828 5.82383 20.7275 6.41992 20.7275H17.5801C18.1762 20.7275 18.6482 20.2828 18.6484 19.7227V4.9502C18.6483 4.39002 18.1762 3.94531 17.5801 3.94531H16.1797V4.55273C16.1797 5.35395 15.481 6.0127 14.6318 6.0127H9.36816C8.51897 6.0127 7.82129 5.35395 7.82129 4.55273V3.94434L6.41992 3.94531ZM9.36816 3.19824C9.36816 3.19824 9.26284 3.18155 9.13281 3.26758C9.0076 3.35051 9.00309 3.45187 9.00293 3.45898V4.55273C9.00293 4.55273 9.00289 4.66179 9.08203 4.72559C9.22217 4.83854 9.36816 4.81445 9.36816 4.81445H14.6318C14.6318 4.81445 14.7372 4.83017 14.8672 4.74414C14.9969 4.65815 14.9971 4.55273 14.9971 4.55273V3.45898C14.997 3.45175 14.9941 3.34866 14.918 3.28711C14.7778 3.17415 14.6318 3.19824 14.6318 3.19824H9.36816Z",
+    fill: fill
+  })]
 });
 const ClientFeedback_ICON_NAME = 'client-feedback';
 ;// ./src/components/Icon/icons/Expertise.tsx
@@ -20598,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
@@ -20613,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,
@@ -20629,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,
@@ -20644,6 +20660,7 @@ const DropdownToggle = ({
   ariaLabelledby,
   ariaControls,
   colors,
+  status,
   className,
   ...restProps
 }) => (0,jsx_runtime_namespaceObject.jsx)(DropdownToggleBase, {
@@ -20654,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();
@@ -20688,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
   })
@@ -20720,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:", ({
@@ -20744,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
@@ -20756,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",
@@ -21092,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 ? {
@@ -21209,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 ?? {};
@@ -21292,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);
@@ -23392,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:", ({
@@ -23412,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 => {
@@ -23596,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',
@@ -23634,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']] : '',
@@ -23704,7 +23822,8 @@ const useDatePicker = ({
   onClose,
   onError,
   onChange,
-  value: externalValue
+  value: externalValue,
+  showTimePicker = false
 }) => {
   const {
     clearErrors,
@@ -23714,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)();
@@ -23732,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 {
@@ -23740,7 +23881,7 @@ const useDatePicker = ({
       month: parts.findIndex(p => p === 'mm'),
       year
     };
-  }, [format]);
+  }, [dateFormat]);
   const {
     dateMinDT,
     dateMaxDT,
@@ -23756,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,
@@ -23856,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);
@@ -23944,7 +24132,11 @@ const useDatePicker = ({
     dateMaxDT,
     dateTime,
     isOpen,
+    isDirty,
     inputValue,
+    resetToDefault,
+    setTime,
+    showTimePicker,
     calendarViewDateTime,
     maskInputRef,
     calendarType,
@@ -24024,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]),
@@ -24037,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)."; }
 
 
@@ -24045,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,
@@ -24066,6 +24255,7 @@ const DaysView = () => {
     dateMaxDT,
     lastChangedDate,
     highlightDates,
+    showTimePicker,
     setCalendarViewDateTime,
     setDateTime,
     setIsOpen,
@@ -24094,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);
@@ -24133,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}`);
@@ -24212,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,
@@ -24223,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);
@@ -24341,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
@@ -24455,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
       }),
@@ -24476,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
       }),
@@ -24506,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 {
@@ -24547,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",
@@ -24555,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'
@@ -24569,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)."; }
 
@@ -24578,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)();
@@ -24590,7 +24898,8 @@ const DatePickerCalendar = () => {
   };
   const {
     calendarType,
-    classNames
+    classNames,
+    showTimePicker
   } = useDatePickerContext();
   const Component = components[calendarType];
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
@@ -24599,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
@@ -24623,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,
@@ -24634,7 +24989,11 @@ const DatePickerTrigger = () => {
     inputProps,
     disabled,
     helperText,
+    success,
     showCalendarIcon,
+    showClearButton,
+    isDirty,
+    resetToDefault,
     onBlur: handleBlur,
     setIsOpen,
     validationSchema
@@ -24654,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);
   };
@@ -24687,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,
@@ -24719,7 +25097,7 @@ const DatePickerTrigger = () => {
           name: "lhoo11",
           styles: "&>span::first-letter{text-transform:uppercase;}"
         } : 0),
-        endElement: calendarButton
+        endElement: actions
       })
     })]
   });
@@ -24922,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:", ({
-  theme
-}) => theme.colors.greyLighter, ";color:", ({
-  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:", ({
+} : 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, ";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.palette.secondary.light, ";border-bottom:1px solid ", ({
   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.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, ";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.colors.grey, ";}&[aria-disabled='false']{background:", ({
-  theme,
-  isHighlighted,
-  isCalendarSecondDateSelected
-}) => isHighlighted && !isCalendarSecondDateSelected && theme.palette.primary.main.replace('rgb(', 'rgba(').replace(')', ', 0.2)'), ";&:hover{background:", ({
-  theme
-}) => theme.colors.greyLighter, ";color:", ({
-  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)'), ";}}" + ( 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 => {
@@ -25337,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)."; }
 
 
 
@@ -25353,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,
@@ -25383,7 +25657,8 @@ const DaysView_DaysView = () => {
   } = useRangeHighlighting();
   const {
     handleRangeSelect,
-    getDateSelectionState
+    getDateSelectionState,
+    isRangeActive
   } = useRangeSelection({
     createNewDate: selectedDay => currentCalendarViewDT.set({
       day: Number(selectedDay)
@@ -25402,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');
@@ -25438,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),
@@ -25465,6 +25752,7 @@ function components_MonthsView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You ha
 
 
 
+
 var components_MonthsView_ref =  true ? {
   name: "icns00",
   styles: "padding-top:10px"
@@ -25488,7 +25776,8 @@ const MonthsView_MonthsView = () => {
   } = useRangeHighlighting();
   const {
     handleRangeSelect,
-    getDateSelectionState
+    getDateSelectionState,
+    isRangeActive
   } = useRangeSelection({
     createNewDate: selectedMonth => {
       const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
@@ -25547,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),
@@ -25571,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"
@@ -25603,7 +25898,8 @@ const YearsView_YearsView = () => {
   } = useRangeHighlighting();
   const {
     handleRangeSelect,
-    getDateSelectionState
+    getDateSelectionState,
+    isRangeActive
   } = useRangeSelection({
     createNewDate: selectedYear => {
       const newYear = currentCalendarViewDT?.set({
@@ -25699,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),
@@ -25774,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
       }),
@@ -25794,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
       }),
@@ -25821,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 {
@@ -25844,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",
@@ -26084,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
@@ -26297,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)."; }
@@ -26309,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,
@@ -26323,7 +26646,10 @@ const Trigger = () => {
     status,
     isOpen,
     showCalendarIcon,
+    showClearButton,
     showStatusArea,
+    isDirty,
+    resetToDefault,
     classNames,
     setIsOpen,
     handleToggleOpen
@@ -26369,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, {
@@ -26972,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,
@@ -27014,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]),
@@ -30281,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;
@@ -30392,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",
@@ -41772,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;
@@ -41892,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) {
@@ -41916,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) {
@@ -41933,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) {
@@ -41943,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) {
@@ -41951,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) {
@@ -42005,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) {
@@ -42022,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) {
@@ -42032,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) {
@@ -42040,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() {
@@ -57846,6 +58199,10 @@ const UserInfo =  true ? {
   name: "fwy071",
   styles: "gap:2px;width:100%;padding:10px"
 } : 0;
+const TruncatedText =  true ? {
+  name: "1boj65s",
+  styles: "max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+} : 0;
 const LogoutWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:100%;padding:10px 10px 18px 10px;border-top:0.5px solid ", theme.colors.greyGraphite70, ";" + ( true ? "" : 0),  true ? "" : 0);
 const CustomButton =  true ? {
   name: "1t1u438",
@@ -57864,7 +58221,9 @@ const CustomContentWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true
   theme
 }) => theme.colors.greyGraphite70, ";" + ( true ? "" : 0));
 ;// ./src/components/UserProfile/UserProfile.tsx
-function UserProfile_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)."; }
+
+
+
 
 
 
@@ -57948,10 +58307,6 @@ function UserProfile_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried t
  * - Semantic heading structure
  */
 
-var UserProfile_ref =  true ? {
-  name: "gxlp6o",
-  styles: "font-size:14px;margin-top:6px"
-} : 0;
 const UserProfile = ({
   name,
   email,
@@ -57974,15 +58329,38 @@ const UserProfile = ({
       className: className,
       children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
         css: UserInfo,
-        children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverHeading, {
-          variant: "h5",
-          weight: "bold",
-          children: name
-        }), (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
-          css: UserProfile_ref,
-          weight: "regular",
-          color: theme.colors.greyDropdownFocused,
-          children: email
+        children: [(0,jsx_runtime_namespaceObject.jsxs)(Tooltip_Tooltip, {
+          enableHover: true,
+          enableClick: false,
+          placement: "top",
+          size: "small",
+          hoverOpenDelay: 1000,
+          children: [(0,jsx_runtime_namespaceObject.jsx)(TooltipTrigger_TooltipTrigger, {
+            children: (0,jsx_runtime_namespaceObject.jsx)(PopoverHeading, {
+              css: TruncatedText,
+              variant: "h5",
+              weight: "bold",
+              children: name
+            })
+          }), (0,jsx_runtime_namespaceObject.jsx)(TooltipContent_TooltipContent, {
+            children: name
+          })]
+        }), (0,jsx_runtime_namespaceObject.jsxs)(Tooltip_Tooltip, {
+          enableHover: true,
+          enableClick: false,
+          placement: "top",
+          size: "small",
+          hoverOpenDelay: 1000,
+          children: [(0,jsx_runtime_namespaceObject.jsx)(TooltipTrigger_TooltipTrigger, {
+            children: (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
+              css: ["font-size:14px;margin-top:6px;", TruncatedText,  true ? "" : 0,  true ? "" : 0],
+              weight: "regular",
+              color: theme.colors.greyDropdownFocused,
+              children: email
+            })
+          }), (0,jsx_runtime_namespaceObject.jsx)(TooltipContent_TooltipContent, {
+            children: email
+          })]
         }), additionalInfo && additionalInfo.length > 0 && (0,jsx_runtime_namespaceObject.jsx)(AdditionalInfoWrapper, {
           children: additionalInfo.map((item, index) => (0,jsx_runtime_namespaceObject.jsx)("div", {
             children: item