@ssa-ui-kit/core 2.30.0 → 2.32.0-canary-b64be64-20251219

package/dist/index.js

@@ -86,6 +86,7 @@ __webpack_require__.d(__webpack_exports__, {
   CardList: () => (/* reexport */ CardList),
   ChartBackground: () => (/* reexport */ ChartBackground),
   Checkbox: () => (/* reexport */ Checkbox_Checkbox),
+  Chip: () => (/* reexport */ Chip),
   CollapsibleNavBar: () => (/* reexport */ CollapsibleNavBar),
   CollapsibleNavBarContext: () => (/* reexport */ CollapsibleNavBarContext),
   CollapsibleNavBarCustomIconSVG: () => (/* reexport */ CollapsibleNavBarCustomIconSVG),
@@ -148,6 +149,7 @@ __webpack_require__.d(__webpack_exports__, {
   Pagination: () => (/* reexport */ Pagination_Pagination),
   PaginationContext: () => (/* reexport */ PaginationContext),
   PaginationContextProvider: () => (/* reexport */ PaginationContextProvider),
+  PersonInfo: () => (/* reexport */ PersonInfo),
   PieChart: () => (/* reexport */ PieChart),
   PieChartComponent: () => (/* reexport */ PieChartComponent),
   PieChartLegend: () => (/* reexport */ PieChartLegend),
@@ -246,6 +248,7 @@ __webpack_require__.d(__webpack_exports__, {
   iconsList: () => (/* reexport */ iconsList),
   mainTheme: () => (/* reexport */ themes_main),
   pieChartPalettes: () => (/* reexport */ colorPalettes_namespaceObject),
+  setHocDisplayName: () => (/* reexport */ setHocDisplayName),
   styleUtils: () => (/* reexport */ safari_focus_outline_namespaceObject),
   styles: () => (/* reexport */ Tooltip_styles_namespaceObject),
   useAccordionGroupContext: () => (/* reexport */ useAccordionGroupContext),
@@ -265,7 +268,8 @@ __webpack_require__.d(__webpack_exports__, {
   useTooltip: () => (/* reexport */ useTooltip),
   useTooltipContext: () => (/* reexport */ useTooltipContext),
   useTranslation: () => (/* reexport */ useTranslation),
-  useTypeaheadContext: () => (/* reexport */ useTypeaheadContext)
+  useTypeaheadContext: () => (/* reexport */ useTypeaheadContext),
+  wrapNivoResponsiveComponent: () => (/* reexport */ wrapNivoResponsiveComponent)
 });
 
 // NAMESPACE OBJECT: ./src/styles/global.ts
@@ -1100,6 +1104,7 @@ __webpack_require__.d(Field_index_parts_namespaceObject, {
 var JsonSchemaForm_namespaceObject = {};
 __webpack_require__.r(JsonSchemaForm_namespaceObject);
 __webpack_require__.d(JsonSchemaForm_namespaceObject, {
+  DEFAULT_AVATAR_SIZE: () => (DEFAULT_AVATAR_SIZE),
   Fields: () => (fields),
   Form: () => (JsonSchemaForm_Form),
   Templates: () => (templates),
@@ -4764,6 +4769,8 @@ const DropdownOptions = ({
     activeItem
   } = useDropdownContext();
   const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const options = childrenArray.map(child => {
     const isActive = activeItem?.value === child.props.value;
     return /*#__PURE__*/external_react_default().cloneElement(child, {
@@ -4879,6 +4886,8 @@ const Dropdown = ({
     }
   }, [isDisabled]);
   const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const items = childrenArray.map((child, index) => {
     options.push(child.props);
     return /*#__PURE__*/external_react_default().cloneElement(child, {
@@ -5231,7 +5240,9 @@ const Indicator = ({
       background: background,
       children: text
     }) : null, /*#__PURE__*/external_react_default().cloneElement(children, {
-      ref: ref => childrenRef.current = ref
+      ref: ref => {
+        childrenRef.current = ref;
+      }
     })]
   });
 };
@@ -5850,6 +5861,8 @@ const MultipleDropdownOptions = ({
     }
   };
   const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const options = childrenArray.map(child => {
     const element = allItems[child.props.value];
     const isActive = Boolean(element?.isSelected);
@@ -6820,6 +6833,38 @@ const getRoundedNumber = (number, roundingDigits) => Number(Number(number).toFix
 const getFixedNumber = (number, roundingDigits) => Number(number).toFixed(roundingDigits);
 ;// ./src/components/Charts/PieChart/constants.ts
 const TOOLTIP_HEIGHT = 30;
+;// ./src/components/Charts/utils/nivoReact19Compat.tsx
+
+
+/**
+ * React 19 compatibility wrapper for Nivo responsive components.
+ *
+ * @nivo/core's ResponsiveWrapper returns an object in React 19, which causes
+ * type checking issues. This utility wraps any Nivo responsive component
+ * with forwardRef to ensure it's recognized as a proper React component.
+ *
+ * @param Component - The Nivo responsive component to wrap (e.g., ResponsiveLine, ResponsivePie)
+ * @param displayName - The display name for the wrapped component
+ * @returns A React 19 compatible version of the component
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function wrapNivoResponsiveComponent(Component, displayName) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const WrappedComponent = /*#__PURE__*/external_react_default().forwardRef((props, ref) => {
+    // Force React.createElement to handle the component, even if it's an object
+    // This works around React 19's stricter type checking
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return /*#__PURE__*/external_react_default().createElement(Component, {
+      ...props,
+      ref
+    });
+  });
+  WrappedComponent.displayName = displayName;
+
+  // Type assertion needed for React 19 compatibility
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return WrappedComponent;
+}
 ;// ./src/components/Charts/PieChart/PieChartInternal.tsx
 function PieChartInternal_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)."; }
 
@@ -6835,6 +6880,8 @@ function PieChartInternal_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 
 
 
+
+const ResponsivePie = wrapNivoResponsiveComponent(pie_namespaceObject.ResponsivePie, 'ResponsivePie');
 var PieChartInternal_ref =  true ? {
   name: "1jvc3zp",
   styles: "width:95%!important;height:95%!important;top:2.5%!important;left:2.5%!important"
@@ -6963,7 +7010,7 @@ const PieChartInternal = ({
           className: "pie-chart-wrapper",
           ref: refs.setReference,
           ...getReferenceProps(),
-          children: [(0,jsx_runtime_namespaceObject.jsx)(pie_namespaceObject.ResponsivePie, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)(ResponsivePie, {
             margin: {
               top: internalOffset,
               right: internalOffset,
@@ -8224,7 +8271,8 @@ const useTooltip = props => {
     size = 'small',
     hasArrow = true,
     arrowProps = {},
-    isOpen: isInitOpen = false
+    isOpen: isInitOpen = false,
+    allowHoverContent = false
   } = props || {};
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
   const arrowRef = (0,external_react_namespaceObject.useRef)(null);
@@ -8242,7 +8290,8 @@ const useTooltip = props => {
   } = floatingData;
   const hover = (0,external_floating_ui_react_namespaceObject.useHover)(context, {
     enabled: enableHover,
-    move: true
+    move: true,
+    handleClose: allowHoverContent ? (0,external_floating_ui_react_namespaceObject.safePolygon)() : undefined
   });
   const click = (0,external_floating_ui_react_namespaceObject.useClick)(context, {
     enabled: enableClick
@@ -8782,6 +8831,247 @@ const CardList = ({
 ;// ./src/components/CardList/index.ts
 
 
+;// ./src/components/Chip/styles.tsx
+
+function Chip_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 ChipBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ea97dtp5"
+} : 0)( true ? {
+  name: "1crjacs",
+  styles: "display:inline-flex;align-items:center;justify-content:center;font-family:Manrope,sans-serif;font-weight:500;border-radius:24px;white-space:nowrap;user-select:none;outline:none"
+} : 0);
+const Chip_styles_small =  true ? {
+  name: "17p2qgf",
+  styles: "height:24px;padding:2px 8px;font-size:12px;line-height:16px"
+} : 0;
+const Chip_styles_medium =  true ? {
+  name: "sge2fk",
+  styles: "height:32px;padding:4px 12px;font-size:14px;line-height:20px"
+} : 0;
+const Chip_styles_large =  true ? {
+  name: "7ik91b",
+  styles: "height:40px;padding:6px 16px;font-size:16px;line-height:24px"
+} : 0;
+const baseFilled = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", theme.colors.greyLighter, ";border:none;" + ( true ? "" : 0),  true ? "" : 0);
+const baseOutlined = theme => /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";" + ( true ? "" : 0),  true ? "" : 0);
+const filled = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseFilled(theme), ";color:", theme.colors.greyDarker, ";" + ( true ? "" : 0),  true ? "" : 0);
+const filledDisabled = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseFilled(theme), ";color:", theme.colors.greyDisabled, ";opacity:0.6;" + ( true ? "" : 0),  true ? "" : 0);
+const outlined = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseOutlined(theme), ";color:", theme.colors.greyDarker, ";" + ( true ? "" : 0),  true ? "" : 0);
+const outlinedDisabled = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseOutlined(theme), ";color:", theme.colors.greyDisabled, ";opacity:0.6;" + ( true ? "" : 0),  true ? "" : 0);
+const clickable =  true ? {
+  name: "1q9v0e",
+  styles: "cursor:pointer;transition:all 0.2s ease;&:hover{opacity:0.8;}&:active{opacity:0.7;}"
+} : 0;
+const clickableDisabled =  true ? {
+  name: "1sfig4b",
+  styles: "cursor:not-allowed"
+} : 0;
+const IconWrapper = /*#__PURE__*/base_default()("span",  true ? {
+  target: "ea97dtp4"
+} : 0)( true ? {
+  name: "ltz2qk",
+  styles: "display:flex;align-items:center;margin-right:7px;& svg path{stroke-width:1;}"
+} : 0);
+const AvatarWrapper = /*#__PURE__*/base_default()("span",  true ? {
+  target: "ea97dtp3"
+} : 0)( true ? {
+  name: "1twmlgg",
+  styles: "display:flex;align-items:center;margin-right:7px"
+} : 0);
+const TitleWrapper = /*#__PURE__*/base_default()("span",  true ? {
+  target: "ea97dtp2"
+} : 0)( true ? {
+  name: "xltcoo",
+  styles: "color:inherit;font-weight:700;margin-right:4px"
+} : 0);
+const LabelWrapper = /*#__PURE__*/base_default()("span",  true ? {
+  target: "ea97dtp1"
+} : 0)( true ? {
+  name: "opde7s",
+  styles: "color:inherit"
+} : 0);
+const DeleteIconButton = /*#__PURE__*/base_default()("button",  true ? {
+  target: "ea97dtp0"
+} : 0)( true ? {
+  name: "eddkk8",
+  styles: "display:flex;align-items:center;justify-content:center;margin-left:7px;padding:0;padding-top:1px;cursor:pointer;border:none;background:none;color:inherit;transition:opacity 0.2s ease;& svg path{stroke-width:1;}&:hover{opacity:0.7;}&:active{opacity:0.5;}&:disabled{cursor:not-allowed;pointer-events:none;}"
+} : 0);
+;// ./src/components/Chip/constants.ts
+
+const VARIANTS = {
+  OUTLINED: 'outlined',
+  FILLED: 'filled'
+};
+const COLORS = {
+  DEFAULT: 'default',
+  PRIMARY: 'primary',
+  SUCCESS: 'success',
+  ERROR: 'error',
+  INFO: 'info',
+  WARNING: 'warning'
+};
+const constants_mapSizes = {
+  small: Chip_styles_small,
+  medium: Chip_styles_medium,
+  large: Chip_styles_large
+};
+const ICON_SIZES = {
+  small: 12,
+  medium: 14,
+  large: 16
+};
+;// ./src/components/Chip/helpers.ts
+
+
+
+const colorMap = theme => ({
+  primary: {
+    main: theme.colors.blue,
+    bg: theme.colors.blue20
+  },
+  success: {
+    main: theme.colors.green,
+    bg: theme.colors.green20
+  },
+  error: {
+    main: theme.colors.red,
+    bg: theme.colors.red40
+  },
+  info: {
+    main: theme.colors.blueLight,
+    bg: theme.colors.blueLight20
+  },
+  warning: {
+    main: theme.colors.yellow,
+    bg: theme.colors.yellow20
+  }
+});
+const getVariantColorBlock = (theme, variant, colorConfig, disabled) => {
+  if (variant === 'outlined') {
+    return /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", colorConfig.bg, ";border:1px solid ", colorConfig.main, ";color:", colorConfig.main, ";", disabled ? 'opacity: 0.5;' : '', ";" + ( true ? "" : 0),  true ? "" : 0);
+  }
+  return /*#__PURE__*/(0,react_namespaceObject.css)("background-color:", colorConfig.main, ";border:1px solid ", colorConfig.bg, ";color:", theme.colors.white, ";", disabled ? 'opacity: 0.5;' : '', ";" + ( true ? "" : 0),  true ? "" : 0);
+};
+const getVariantColors = (theme, variant, color, disabled) => {
+  const variantKey = variant ?? VARIANTS.FILLED;
+  const colorKey = color ?? COLORS.DEFAULT;
+  const paletteMap = colorMap(theme);
+  const palette = colorKey === COLORS.DEFAULT ? null : paletteMap[colorKey];
+  const chipStyles = colorKey === COLORS.DEFAULT ? variantKey === VARIANTS.OUTLINED ? disabled ? outlinedDisabled(theme) : outlined(theme) : disabled ? filledDisabled(theme) : filled(theme) : palette ? getVariantColorBlock(theme, variantKey, palette, disabled) : variantKey === VARIANTS.OUTLINED ? outlined(theme) : filled(theme);
+  const iconColor = (() => {
+    if (!palette) {
+      return disabled ? theme.colors.greyDisabled : theme.colors.greyDarker;
+    }
+    if (variantKey === VARIANTS.OUTLINED) {
+      return palette.main;
+    }
+    return theme.colors.white;
+  })();
+  return {
+    chipStyles,
+    iconColor
+  };
+};
+;// ./src/components/Chip/Chip.tsx
+
+
+
+
+
+
+
+const Chip = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function Chip({
+  label,
+  title,
+  variant = VARIANTS.FILLED,
+  color = COLORS.DEFAULT,
+  size = 'medium',
+  disabled = false,
+  icon,
+  avatar,
+  onDelete,
+  deleteIcon,
+  showIcon = true,
+  onClick,
+  clickable: clickableProp,
+  className,
+  css: customCss,
+  ...props
+}, ref) {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const isClickable = !disabled && (onClick || clickableProp);
+  const hasDeleteIcon = Boolean(onDelete);
+  const {
+    chipStyles,
+    iconColor
+  } = getVariantColors(theme, variant, color, disabled);
+  const sizeStyles = constants_mapSizes[size];
+  const iconName = showIcon ? icon ?? 'plus' : null;
+  const deleteIconName = deleteIcon ?? 'cross';
+  const leadingIcon = iconName ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+    name: iconName,
+    color: iconColor,
+    size: ICON_SIZES[size]
+  }) : null;
+  const handleDeleteClick = event => {
+    event.stopPropagation();
+    if (onDelete && !disabled) {
+      onDelete(event);
+    }
+  };
+  const handleKeyDown = event => {
+    if (disabled) return;
+    if (event.key === 'Backspace' || event.key === 'Delete') {
+      if (onDelete) {
+        event.preventDefault();
+        const syntheticEvent = {
+          ...event,
+          stopPropagation: () => {},
+          currentTarget: event.currentTarget,
+          target: event.target
+        };
+        onDelete(syntheticEvent);
+      }
+    }
+    if (event.key === 'Escape') {
+      event.currentTarget.blur();
+    }
+  };
+  return (0,jsx_runtime_namespaceObject.jsxs)(ChipBase, {
+    ...props,
+    ref: ref,
+    role: isClickable ? 'button' : undefined,
+    tabIndex: !disabled && (isClickable || hasDeleteIcon) ? 0 : undefined,
+    "aria-disabled": disabled ? 'true' : 'false',
+    className: className,
+    css: [sizeStyles, chipStyles, isClickable && !disabled ? clickable : undefined, disabled ? clickableDisabled : undefined, customCss,  true ? "" : 0,  true ? "" : 0],
+    onClick: disabled ? undefined : onClick,
+    onKeyDown: handleKeyDown,
+    children: [avatar && (0,jsx_runtime_namespaceObject.jsx)(AvatarWrapper, {
+      children: avatar
+    }), leadingIcon && !avatar && (0,jsx_runtime_namespaceObject.jsx)(IconWrapper, {
+      children: leadingIcon
+    }), title && (0,jsx_runtime_namespaceObject.jsx)(TitleWrapper, {
+      children: title
+    }), (0,jsx_runtime_namespaceObject.jsx)(LabelWrapper, {
+      children: label
+    }), hasDeleteIcon && (0,jsx_runtime_namespaceObject.jsx)(DeleteIconButton, {
+      type: "button",
+      onClick: handleDeleteClick,
+      "aria-label": "Delete",
+      disabled: disabled,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: deleteIconName,
+        color: iconColor,
+        size: ICON_SIZES[size]
+      })
+    })]
+  });
+});
+;// ./src/components/Chip/index.ts
+
+
 ;// ./src/components/Charts/PieChart/colorPalettes.ts
 const getBalancePalette = theme => {
   const legendColorNames = ['yellow', 'blue', 'green', 'yellowWarm', 'blueLight', 'turquoise', 'pink', 'purple', 'blueCool', 'cyanTeal'];
@@ -9318,7 +9608,8 @@ const useChartInfo = () => {
   const {
     filteredData,
     selected,
-    lineShape
+    lineShape,
+    data
   } = useBarLineComplexChartContext();
   const {
     isFullscreenMode,
@@ -9331,8 +9622,19 @@ const useChartInfo = () => {
       context.refs.setFloating(null);
     };
   }, []);
-  const transformedChartData = filteredData.map((item, index) => {
-    const markerColor = (0,utils_namespaceObject.pathOr)(colorPalette[index], ['marker', 'color'])(item);
+
+  // Get orientation from data to determine if we need to reverse the order
+  const orientation = (0,utils_namespaceObject.pathOr)('v', [0, 'orientation'])(data);
+
+  // For horizontal charts, reverse the data order so lines render in the correct direction
+  // Plotly renders horizontal charts from bottom to top, so we reverse to match legend order
+  // The legend will be reversed back using traceorder: 'reversed' in the layout
+  const orderedData = orientation === 'h' ? [...filteredData].reverse() : filteredData;
+  const transformedChartData = orderedData.map((item, index) => {
+    // Calculate the original index in filteredData for color assignment
+    // When reversed, the item at position 'index' was originally at position 'filteredData.length - 1 - index'
+    const originalIndex = orientation === 'h' ? filteredData.length - 1 - index : index;
+    const markerColor = (0,utils_namespaceObject.pathOr)(colorPalette[originalIndex], ['marker', 'color'])(item);
     const valueDimension = item.valueDimension === null || item.valueDimension === undefined ? '' : item.valueDimension;
     const extraParams = {
       mode: 'markers',
@@ -9819,6 +10121,7 @@ const BarLineComplexChartView = ({
             family: FONT_FAMILY,
             size: isFullscreenMode ? 16 : 12
           },
+          traceorder: orientation === 'h' ? 'reversed' : 'normal',
           ...legend
         },
         ...layoutRest
@@ -10050,6 +10353,8 @@ function TreeMapChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 
 
+
+const ResponsiveTreeMap = wrapNivoResponsiveComponent(treemap_namespaceObject.ResponsiveTreeMap, 'ResponsiveTreeMap');
 var TreeMapChart_ref =  true ? {
   name: "1qkt16r",
   styles: "position:relative;height:100%;width:100%"
@@ -10080,7 +10385,7 @@ const TreeMapChartComponent = ({
       css: TreeMapChart_ref,
       children: (0,jsx_runtime_namespaceObject.jsx)("div", {
         css: TreeMapChart_ref2,
-        children: (0,jsx_runtime_namespaceObject.jsx)(treemap_namespaceObject.ResponsiveTreeMap, {
+        children: (0,jsx_runtime_namespaceObject.jsx)(ResponsiveTreeMap, {
           borderWidth: 0,
           colors: colors,
           data: data,
@@ -10181,11 +10486,13 @@ const GaugeChartLayer = /*#__PURE__*/base_default()("div",  true ? {
 
 
 
+
+const GaugeChartBase_ResponsivePie = wrapNivoResponsiveComponent(pie_namespaceObject.ResponsivePie, 'ResponsivePie');
 const GaugeChartBase = ({
   ...props
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
-  return (0,jsx_runtime_namespaceObject.jsx)(pie_namespaceObject.ResponsivePie, {
+  return (0,jsx_runtime_namespaceObject.jsx)(GaugeChartBase_ResponsivePie, {
     startAngle: -90,
     endAngle: 90,
     innerRadius: 0.8,
@@ -10777,7 +11084,7 @@ const line_namespaceObject = require("@nivo/line");
 
 const TrendLineTooltipStyled = /*#__PURE__*/base_default()("div",  true ? {
   target: "e19yhkwp0"
-} : 0)("background:", ({
+} : 0)("white-space:nowrap;background:", ({
   theme
 }) => theme.colors.white, ";border:1px solid ", ({
   theme
@@ -10786,6 +11093,7 @@ const TrendLineTooltipStyled = /*#__PURE__*/base_default()("div",  true ? {
 }) => theme.colors.greyDarker, ";font-weight:600;line-height:12px;font-size:10px;padding:0.5rem;" + ( true ? "" : 0));
 const TrendLineTooltip = ({
   point,
+  css,
   valueFormat
 }) => {
   const {
@@ -10796,6 +11104,7 @@ const TrendLineTooltip = ({
     yFormatted
   } = point.data;
   return (0,jsx_runtime_namespaceObject.jsx)(TrendLineTooltipStyled, {
+    css: css,
     children: valueFormat?.(data) ?? `${xFormatted} - ${yFormatted}`
   });
 };
@@ -10805,6 +11114,8 @@ const TrendLineTooltip = ({
 
 
 
+
+const ResponsiveLine = wrapNivoResponsiveComponent(line_namespaceObject.ResponsiveLine, 'ResponsiveLine');
 const ActivePoint = ({
   currentPoint,
   lastActivePoint,
@@ -10834,7 +11145,7 @@ const TrendLine = ({
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const _color = color ?? theme.colors.purpleDark;
-  return (0,jsx_runtime_namespaceObject.jsx)(line_namespaceObject.ResponsiveLine, {
+  return (0,jsx_runtime_namespaceObject.jsx)(ResponsiveLine, {
     axisBottom: null,
     axisLeft: null,
     axisRight: null,
@@ -10909,12 +11220,8 @@ var BigNumberChart_ref2 =  true ? {
   styles: "font-size:32px;font-weight:700"
 } : 0;
 var BigNumberChart_ref3 =  true ? {
-  name: "26qidl",
-  styles: "position:relative;width:100%;height:50%"
-} : 0;
-var BigNumberChart_ref4 =  true ? {
-  name: "19s8nj4",
-  styles: "position:absolute;width:100%;height:100%"
+  name: "195w1i9",
+  styles: "position:relative;width:100%;height:50%;min-height:100px"
 } : 0;
 const BigNumberChartComponent = ({
   data,
@@ -10926,6 +11233,11 @@ const BigNumberChartComponent = ({
   valueFormat
 }) => {
   const [hoveredValue, setHoveredValue] = (0,external_react_namespaceObject.useState)(null);
+  const {
+    ref: chartContainerRef,
+    width,
+    height
+  } = (0,hooks_namespaceObject.useElementSize)();
   const lastValue = data.sort((a, b) => {
     const ax = a.x ?? 0;
     const bx = b.x ?? 0;
@@ -10934,9 +11246,11 @@ const BigNumberChartComponent = ({
   const setHoveredValueThrottled = (0,hooks_namespaceObject.useThrottledCallback)(value => {
     setHoveredValue(value);
   }, 100);
-  const handleMouseMove = data => {
+  const handleMouseMove = datum => {
     if (!interactive) return;
-    setHoveredValueThrottled(data.data);
+    if ('data' in datum) {
+      setHoveredValueThrottled(datum.data);
+    }
   };
   const value = hoveredValue ?? lastValue;
   return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
@@ -10958,18 +11272,18 @@ const BigNumberChartComponent = ({
           children: value && (valueFormat?.(value) ?? value?.y?.toString())
         })
       }), (0,jsx_runtime_namespaceObject.jsx)("div", {
+        ref: chartContainerRef,
         css: BigNumberChart_ref3,
-        children: (0,jsx_runtime_namespaceObject.jsx)("div", {
-          css: BigNumberChart_ref4,
-          children: (0,jsx_runtime_namespaceObject.jsx)(TrendLine, {
-            ...trendLineProps,
-            data: [{
-              id: 'trend-line',
-              data
-            }],
-            onMouseMove: handleMouseMove,
-            lastActivePoint: value
-          })
+        children: width > 0 && height > 0 && (0,jsx_runtime_namespaceObject.jsx)(TrendLine, {
+          ...trendLineProps,
+          data: [{
+            id: 'trend-line',
+            data
+          }],
+          onMouseMove: handleMouseMove,
+          lastActivePoint: value,
+          height: height,
+          width: width
         })
       })]
     })
@@ -11225,6 +11539,7 @@ const CandlestickChart = WithFullscreenMode(CandlestickChartComponent);
 
 
 
+
 ;// ./src/components/Checkbox/index.ts
 
 
@@ -11652,10 +11967,12 @@ const PopoverTrigger = /*#__PURE__*/external_react_namespaceObject.forwardRef(fu
 
   // `asChild` allows the user to pass any element as the anchor
   if (asChild && /*#__PURE__*/external_react_namespaceObject.isValidElement(children)) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const childrenElement = children;
     return /*#__PURE__*/external_react_namespaceObject.cloneElement(children, context?.getReferenceProps({
       ref,
       ...props,
-      ...children.props,
+      ...childrenElement.props,
       'data-state': context.open ? 'open' : 'closed'
     }));
   }
@@ -11900,14 +12217,15 @@ const TriggerIcon = ({
   iconName,
   iconSize,
   className,
-  CustomIcon
+  CustomIcon,
+  css: cssProp
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const {
     showIconTooltip
   } = useCollapsibleNavBarContext();
   return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
-    css: TriggerIcon_ref,
+    css: [TriggerIcon_ref, cssProp,  true ? "" : 0,  true ? "" : 0],
     className: "trigger-icon",
     children: CustomIcon ? (0,jsx_runtime_namespaceObject.jsx)(CustomIcon, {
       size: iconSize,
@@ -11935,7 +12253,6 @@ const TriggerIcon = ({
 
 
 
-
 const ItemAccordionTitle_Link = CollapsibleNavBarLink.withComponent('div',  true ? {
   target: "e69hc760"
 } : 0);
@@ -11971,9 +12288,7 @@ const ItemAccordionTitle = ({
   const Icon = () => (0,jsx_runtime_namespaceObject.jsx)(TriggerIcon, {
     iconName: item.iconName,
     iconSize: item.iconSize,
-    css: /*#__PURE__*/(0,react_namespaceObject.css)({
-      ...item.css
-    },  true ? "" : 0,  true ? "" : 0)
+    css: item.css
   });
   return (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarItemProvider, {
     isActive: isActive,
@@ -12097,7 +12412,6 @@ const Item = ({
 
 
 
-
 const ItemWithoutSubMenu_Item = ({
   item,
   onClick
@@ -12139,9 +12453,7 @@ const ItemWithoutSubMenu_Item = ({
     iconName: iconName,
     iconSize: iconSize,
     CustomIcon: CustomIcon,
-    css: /*#__PURE__*/(0,react_namespaceObject.css)({
-      ...css
-    },  true ? "" : 0,  true ? "" : 0)
+    css: css
   });
   return (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarItemProvider, {
     isActive: isActive,
@@ -14052,73 +14364,526 @@ const DatePickerInner = ({
 const DatePicker = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(DatePickerInner);
 ;// ./src/components/DatePicker/index.ts
 
-;// ./src/components/DateRangePicker/constants.ts
-const constants_DEFAULT_MASK_FORMAT = 'mm/dd/yyyy';
-const DEFAULT_MONTH_MASK_FORMAT = 'mm/yyyy';
-const DEFAULT_YEAR_MASK_FORMAT = 'yyyy';
-const constants_DEFAULT_MASK = '__/__/____';
-const DEFAULT_MONTH_MASK = '__/____';
-const DEFAULT_YEAR_MASK = '____';
-const constants_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-const constants_DATE_MIN = '01/01/1900';
-const constants_DATE_MAX = '01/01/2150';
-const MONTH_DATE_MIN = '01/1900';
-const MONTH_DATE_MAX = '01/2150';
-const YEAR_DATE_MIN = '1900';
-const YEAR_DATE_MAX = '2150';
-const constants_OUT_OF_RANGE = 'The date is out of the defined range';
-const constants_INVALID_DATE = 'Invalid date';
-const FULL_DATE_LENGTH = 10;
-const FULL_MONTH_DATE_LENGTH = 7;
-const FULL_YEAR_DATE_LENGTH = 4;
-;// ./src/components/DateRangePicker/utils/format.ts
+;// ./src/components/PersonInfo/constants.ts
+const DEFAULT_BADGE_COLORS = ['purple', 'blueLight', 'green', 'blue', 'pink', 'turquoise', 'yellow', 'yellowWarm'];
+const BADGE_COLORS = theme => ({
+  purple: {
+    text: theme.colors.purple,
+    bg: theme.colors.purple20
+  },
+  blueLight: {
+    text: theme.colors.blueLight,
+    bg: theme.colors.blueLight20
+  },
+  green: {
+    text: theme.colors.green,
+    bg: theme.colors.green20
+  },
+  blue: {
+    text: theme.colors.blue,
+    bg: theme.colors.blue20
+  },
+  pink: {
+    text: theme.colors.pink,
+    bg: theme.colors.pink20
+  },
+  turquoise: {
+    text: theme.colors.turquoise,
+    bg: theme.colors.turquoise20
+  },
+  yellow: {
+    text: theme.colors.yellow,
+    bg: theme.colors.yellow20
+  },
+  yellowWarm: {
+    text: theme.colors.yellowLighter,
+    bg: theme.colors.yellowLighter20
+  }
+});
+;// ./src/components/PersonInfo/styles.ts
 
-const isMonthOnlyFormat = format => {
-  if (!format) return false;
-  const lowerFormat = format.toLowerCase();
-  const hasMonth = lowerFormat.includes('mm');
-  const hasYear = lowerFormat.includes('yyyy');
-  const hasDay = lowerFormat.includes('dd');
-  return hasMonth && hasYear && !hasDay;
-};
-const isYearOnlyFormat = format => {
-  if (!format) return false;
-  const lowerFormat = format.toLowerCase();
-  const hasYear = lowerFormat.includes('yyyy');
-  const hasMonth = lowerFormat.includes('mm');
-  const hasDay = lowerFormat.includes('dd');
-  return hasYear && !hasMonth && !hasDay;
-};
-const getExpectedDateLength = format => {
-  if (!format) return FULL_DATE_LENGTH;
-  if (isYearOnlyFormat(format)) {
-    return FULL_YEAR_DATE_LENGTH;
+function PersonInfo_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 PersonInfoBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb15"
+} : 0)( true ? {
+  name: "3w0yoi",
+  styles: "display:flex;flex-direction:column;gap:8px"
+} : 0);
+const PersonInfoHeader = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb14"
+} : 0)( true ? {
+  name: "1ocjxm6",
+  styles: "display:flex;align-items:flex-start;gap:8px"
+} : 0);
+const styles_IconWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb13"
+} : 0)( true ? {
+  name: "13ltyg2",
+  styles: "display:flex;align-items:flex-start;flex-shrink:0"
+} : 0);
+const styles_TitleWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb12"
+} : 0)( true ? {
+  name: "1tcizyl",
+  styles: "display:flex;flex-direction:column;gap:4px;flex:1"
+} : 0);
+const Title = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb11"
+} : 0)( true ? {
+  name: "edklr6",
+  styles: "font-size:14px;font-weight:600;line-height:19px"
+} : 0);
+const Row = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb10"
+} : 0)( true ? {
+  name: "1j5vobt",
+  styles: "display:flex;align-items:center;gap:4px"
+} : 0);
+const TextBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb9"
+} : 0)( true ? {
+  name: "1bzpq77",
+  styles: "font-size:14px;font-weight:400;line-height:19px"
+} : 0);
+const ValueWithCounter = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb8"
+} : 0)( true ? {
+  name: "1j5vobt",
+  styles: "display:flex;align-items:center;gap:4px"
+} : 0);
+const Counter = /*#__PURE__*/base_default()(TextBase.withComponent('span',  true ? {
+  target: "ej2kihb16"
+} : 0),  true ? {
+  target: "ej2kihb7"
+} : 0)("color:", ({
+  theme
+}) => theme.colors.greyDropdownFocused, ";margin-left:5px;cursor:pointer;" + ( true ? "" : 0));
+const CounterTooltipContent = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb6"
+} : 0)( true ? {
+  name: "1oeds5o",
+  styles: "min-width:220px;padding:12px"
+} : 0);
+const CounterTooltipList = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb5"
+} : 0)( true ? {
+  name: "1acx518",
+  styles: "display:flex;flex-direction:column;gap:8px;height:auto;max-height:220px;overflow:hidden;overflow-y:auto;padding-right:4px"
+} : 0);
+const AttributesList = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb4"
+} : 0)( true ? {
+  name: "urqszi",
+  styles: "display:flex;flex-direction:column;gap:4px"
+} : 0);
+const styles_AvatarWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb3"
+} : 0)( true ? {
+  name: "1yydxi7",
+  styles: "display:flex;align-items:center;gap:8px"
+} : 0);
+const BadgeWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb2"
+} : 0)( true ? {
+  name: "mwxihw",
+  styles: "display:flex;align-items:center;gap:8px;flex-wrap:wrap"
+} : 0);
+const StyledBadge = /*#__PURE__*/base_default()(Badge_Badge,  true ? {
+  target: "ej2kihb1"
+} : 0)( true ? {
+  name: "tv444a",
+  styles: "padding:4px 8px;border-radius:20px"
+} : 0);
+const CustomBadge = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb0"
+} : 0)("display:inline-block;padding:2px 8px;border-radius:24px;font-weight:500;font-size:14px;color:", ({
+  theme,
+  colorName
+}) => {
+  const {
+    text
+  } = BADGE_COLORS(theme)[colorName];
+  return text;
+}, ";background-color:", ({
+  theme,
+  colorName
+}) => {
+  const {
+    bg
+  } = BADGE_COLORS(theme)[colorName];
+  return bg;
+}, ";" + ( true ? "" : 0));
+const personInfoValueLinkStyles = theme => ({
+  textDecoration: 'none',
+  color: theme.colors.greyDarker,
+  cursor: 'pointer',
+  transition: 'color 0.2s ease',
+  display: 'inline-flex',
+  alignItems: 'center',
+  '&:hover': {
+    color: theme.colors.blue
   }
-  if (isMonthOnlyFormat(format)) {
-    return FULL_MONTH_DATE_LENGTH;
+});
+const avatarWrapperLinkStyles = theme => ({
+  textDecoration: 'none',
+  color: theme.colors.greyDarker,
+  cursor: 'pointer',
+  transition: 'color 0.2s ease',
+  '&:hover': {
+    color: theme.colors.blue,
+    '& > div:last-child': {
+      color: theme.colors.blue
+    }
   }
-  return FULL_DATE_LENGTH;
+});
+;// ./src/components/PersonInfo/PersonInfoIcon.tsx
+
+
+
+
+
+const PersonInfoIcon = ({
+  icon
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(styles_IconWrapper, {
+    children: typeof icon === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+      name: icon,
+      size: 16,
+      color: theme.colors.greyDarker
+    }) : icon
+  });
 };
-const getMaskForFormat = format => {
-  if (isYearOnlyFormat(format)) {
-    return DEFAULT_YEAR_MASK;
-  }
-  if (isMonthOnlyFormat(format)) {
-    return DEFAULT_MONTH_MASK;
-  }
-  return constants_DEFAULT_MASK;
+;// ./src/components/PersonInfo/PersonInfoValue.tsx
+
+
+
+const PersonInfoValue = ({
+  value,
+  css,
+  linkAttributes
+}) => {
+  const isLink = Boolean(linkAttributes?.href);
+  return (0,jsx_runtime_namespaceObject.jsx)(TextBase, {
+    css: [isLink ? personInfoValueLinkStyles : undefined, css,  true ? "" : 0,  true ? "" : 0],
+    ...(linkAttributes ?? {}),
+    children: value
+  });
+};
+;// ./src/components/PersonInfo/helpers.ts
+const getLinkAttributes = (link, openLinkInNewTab) => {
+  const isLink = Boolean(link);
+  return isLink ? {
+    as: 'a',
+    href: link,
+    target: openLinkInNewTab ? '_blank' : undefined,
+    rel: openLinkInNewTab ? 'noreferrer' : undefined
+  } : {};
 };
-const getDefaultDateRange = format => {
-  if (isYearOnlyFormat(format)) {
-    return {
-      defaultMin: YEAR_DATE_MIN,
-      defaultMax: YEAR_DATE_MAX
-    };
-  }
-  if (isMonthOnlyFormat(format)) {
-    return {
-      defaultMin: MONTH_DATE_MIN,
-      defaultMax: MONTH_DATE_MAX
+;// ./src/components/PersonInfo/PersonInfoAvatar.tsx
+
+
+
+
+
+
+const PersonInfoAvatar = ({
+  avatar,
+  value,
+  styles,
+  link,
+  openLinkInNewTab
+}) => {
+  const hasAvatar = Boolean(avatar);
+  const hasValue = Boolean(value);
+  const isLink = Boolean(link);
+  const linkAttributes = getLinkAttributes(link, openLinkInNewTab);
+  if (!hasAvatar && !hasValue) return null;
+  const valueNode = hasValue ? (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
+    value: value,
+    css: hasAvatar ? styles?.avatarName : styles?.value,
+    linkAttributes: !hasAvatar ? linkAttributes : undefined
+  }) : null;
+  if (!hasAvatar) {
+    return valueNode;
+  }
+  return (0,jsx_runtime_namespaceObject.jsxs)(styles_AvatarWrapper, {
+    css: isLink ? avatarWrapperLinkStyles : undefined,
+    ...linkAttributes,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+      size: 24,
+      image: avatar
+    }), valueNode]
+  });
+};
+;// ./src/components/PersonInfo/PersonInfoBadges.tsx
+
+
+
+
+const PersonInfoBadges = ({
+  badges,
+  styles
+}) => {
+  if (!badges) return null;
+  if (!Array.isArray(badges)) {
+    return (0,jsx_runtime_namespaceObject.jsx)(BadgeWrapper, {
+      css: styles?.badge,
+      children: badges
+    });
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(BadgeWrapper, {
+    css: styles?.badge,
+    children: badges.map((badgeItem, index) => {
+      if (typeof badgeItem === 'string') {
+        const colorIndex = index % DEFAULT_BADGE_COLORS.length;
+        const colorName = DEFAULT_BADGE_COLORS[colorIndex];
+        return (0,jsx_runtime_namespaceObject.jsx)(CustomBadge, {
+          colorName: colorName,
+          css: styles?.badgeItem,
+          children: badgeItem
+        }, index);
+      }
+      return (0,jsx_runtime_namespaceObject.jsx)((external_react_default()).Fragment, {
+        children: badgeItem
+      }, index);
+    })
+  });
+};
+;// ./src/components/ImageItem/ImageItem.tsx
+function ImageItem_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)."; }
+
+
+
+
+var ImageItem_ref =  true ? {
+  name: "c5ejfv",
+  styles: "gap:8px;text-decoration:none"
+} : 0;
+const ImageItem = ({
+  children,
+  image,
+  avatarSize = 24,
+  link = '',
+  openLinkInNewTab = false,
+  className
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const additionalProps = link ? {
+    href: link,
+    target: openLinkInNewTab ? '_blank' : undefined
+  } : {};
+  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+    css: ImageItem_ref,
+    as: link ? 'a' : 'div',
+    className: className,
+    "data-testid": "image-item",
+    ...additionalProps,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+      size: avatarSize,
+      image: image
+    }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        color: theme.colors.greyDarker,
+        fontSize: 14,
+        fontWeight: 500,
+        cursor: link ? 'pointer' : 'default',
+        '&:hover': {
+          color: link ? theme.colors.blue : theme.colors.greyDarker
+        }
+      },  true ? "" : 0,  true ? "" : 0),
+      children: children
+    })]
+  });
+};
+;// ./src/components/PersonInfo/PersonInfoCounter.tsx
+
+
+
+
+
+
+
+const PersonInfoCounter = ({
+  counterTooltip,
+  css
+}) => {
+  const tooltipUsers = counterTooltip?.users ?? [];
+  const hasTooltipUsers = tooltipUsers.length > 0;
+  const counterValue = hasTooltipUsers ? `+${tooltipUsers.length}` : null;
+  if (!counterValue) {
+    return null;
+  }
+  const tooltipBody = (0,jsx_runtime_namespaceObject.jsx)(CounterTooltipList, {
+    "data-testid": "person-info-counter-tooltip-list",
+    children: tooltipUsers.map(user => (0,jsx_runtime_namespaceObject.jsx)(ImageItem, {
+      image: user.avatar,
+      link: user.link,
+      openLinkInNewTab: user.openLinkInNewTab,
+      children: user.name
+    }, user.id))
+  });
+  const counterNode = (0,jsx_runtime_namespaceObject.jsx)(Counter, {
+    css: css,
+    "data-testid": "person-info-counter",
+    children: counterValue
+  });
+  return (0,jsx_runtime_namespaceObject.jsxs)(Tooltip_Tooltip, {
+    enableHover: true,
+    enableClick: false,
+    allowHoverContent: true,
+    placement: "top",
+    size: "medium",
+    hasArrow: true,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(TooltipTrigger_TooltipTrigger, {
+      children: counterNode
+    }), (0,jsx_runtime_namespaceObject.jsx)(TooltipContent_TooltipContent, {
+      children: (0,jsx_runtime_namespaceObject.jsx)(CounterTooltipContent, {
+        children: tooltipBody
+      })
+    })]
+  });
+};
+;// ./src/components/PersonInfo/PersonInfo.tsx
+
+
+
+
+
+
+
+const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function PersonInfo({
+  title,
+  icon,
+  value,
+  badges,
+  avatar,
+  counterTooltip,
+  attributes,
+  description,
+  styles,
+  className,
+  link,
+  openLinkInNewTab,
+  ...props
+}, ref) {
+  return (0,jsx_runtime_namespaceObject.jsx)(PersonInfoBase, {
+    ref: ref,
+    className: className,
+    ...props,
+    children: (0,jsx_runtime_namespaceObject.jsxs)(PersonInfoHeader, {
+      children: [icon && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoIcon, {
+        icon: icon
+      }), (0,jsx_runtime_namespaceObject.jsxs)(styles_TitleWrapper, {
+        children: [(0,jsx_runtime_namespaceObject.jsx)(Title, {
+          css: styles?.title,
+          children: title
+        }), (0,jsx_runtime_namespaceObject.jsxs)(Row, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)(PersonInfoAvatar, {
+            avatar: avatar,
+            value: value,
+            styles: styles,
+            link: link,
+            openLinkInNewTab: openLinkInNewTab
+          }), counterTooltip && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoCounter, {
+            counterTooltip: counterTooltip,
+            css: styles?.counter
+          })]
+        }), badges && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoBadges, {
+          badges: badges,
+          styles: styles
+        }), attributes && attributes.length > 0 && (0,jsx_runtime_namespaceObject.jsx)(AttributesList, {
+          children: attributes.map((attr, index) => {
+            if (typeof attr === 'string') {
+              return (0,jsx_runtime_namespaceObject.jsx)(TextBase, {
+                css: styles?.attributes,
+                children: attr
+              }, index);
+            }
+            return (0,jsx_runtime_namespaceObject.jsx)((external_react_default()).Fragment, {
+              children: attr
+            }, index);
+          })
+        }), description && (0,jsx_runtime_namespaceObject.jsx)(TextBase, {
+          css: styles?.description,
+          children: description
+        })]
+      })]
+    })
+  });
+});
+;// ./src/components/PersonInfo/index.ts
+
+
+;// ./src/components/DateRangePicker/constants.ts
+const constants_DEFAULT_MASK_FORMAT = 'mm/dd/yyyy';
+const DEFAULT_MONTH_MASK_FORMAT = 'mm/yyyy';
+const DEFAULT_YEAR_MASK_FORMAT = 'yyyy';
+const constants_DEFAULT_MASK = '__/__/____';
+const DEFAULT_MONTH_MASK = '__/____';
+const DEFAULT_YEAR_MASK = '____';
+const constants_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const constants_DATE_MIN = '01/01/1900';
+const constants_DATE_MAX = '01/01/2150';
+const MONTH_DATE_MIN = '01/1900';
+const MONTH_DATE_MAX = '01/2150';
+const YEAR_DATE_MIN = '1900';
+const YEAR_DATE_MAX = '2150';
+const constants_OUT_OF_RANGE = 'The date is out of the defined range';
+const constants_INVALID_DATE = 'Invalid date';
+const FULL_DATE_LENGTH = 10;
+const FULL_MONTH_DATE_LENGTH = 7;
+const FULL_YEAR_DATE_LENGTH = 4;
+;// ./src/components/DateRangePicker/utils/format.ts
+
+const isMonthOnlyFormat = format => {
+  if (!format) return false;
+  const lowerFormat = format.toLowerCase();
+  const hasMonth = lowerFormat.includes('mm');
+  const hasYear = lowerFormat.includes('yyyy');
+  const hasDay = lowerFormat.includes('dd');
+  return hasMonth && hasYear && !hasDay;
+};
+const isYearOnlyFormat = format => {
+  if (!format) return false;
+  const lowerFormat = format.toLowerCase();
+  const hasYear = lowerFormat.includes('yyyy');
+  const hasMonth = lowerFormat.includes('mm');
+  const hasDay = lowerFormat.includes('dd');
+  return hasYear && !hasMonth && !hasDay;
+};
+const getExpectedDateLength = format => {
+  if (!format) return FULL_DATE_LENGTH;
+  if (isYearOnlyFormat(format)) {
+    return FULL_YEAR_DATE_LENGTH;
+  }
+  if (isMonthOnlyFormat(format)) {
+    return FULL_MONTH_DATE_LENGTH;
+  }
+  return FULL_DATE_LENGTH;
+};
+const getMaskForFormat = format => {
+  if (isYearOnlyFormat(format)) {
+    return DEFAULT_YEAR_MASK;
+  }
+  if (isMonthOnlyFormat(format)) {
+    return DEFAULT_MONTH_MASK;
+  }
+  return constants_DEFAULT_MASK;
+};
+const getDefaultDateRange = format => {
+  if (isYearOnlyFormat(format)) {
+    return {
+      defaultMin: YEAR_DATE_MIN,
+      defaultMax: YEAR_DATE_MAX
+    };
+  }
+  if (isMonthOnlyFormat(format)) {
+    return {
+      defaultMin: MONTH_DATE_MIN,
+      defaultMax: MONTH_DATE_MAX
     };
   }
   return {
@@ -14263,8 +15028,8 @@ const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
 const TriggerWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   target: "e19l41fq0"
 } : 0)( true ? {
-  name: "1utaypi",
-  styles: "padding:14px"
+  name: "1h91tay",
+  styles: "padding:14px;cursor:default"
 } : 0);
 ;// ./src/components/DateRangePicker/utils/dates.ts
 
@@ -14356,7 +15121,6 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   nameFrom: '',
   nameTo: '',
   maskOptions: {},
-  openCalendarMode: 'icon',
   inputFromRef: {
     current: null
   },
@@ -14385,9 +15149,6 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
     day: 1
   }),
   currentIndex: 0,
-  handleSetIsOpen: () => {
-    // no-op
-  },
   handleToggleOpen: () => {
     // no-op
   },
@@ -14397,6 +15158,13 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   setCalendarType: () => {
     // no-op
   },
+  rangeSelectionStep: null,
+  setRangeSelectionStep: () => {
+    // no-op
+  },
+  clearInputValue: () => {
+    // no-op
+  },
   setCalendarViewDateTime: () => {
     // no-op
   },
@@ -14405,7 +15173,8 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   },
   setLastFocusedElement: () => {
     // no-op
-  }
+  },
+  allowReverseSelection: false
 });
 ;// ./src/components/DateRangePicker/useDateRangePickerContext.tsx
 
@@ -14463,6 +15232,88 @@ const useRangeHighlighting = () => {
     hoveredDate
   };
 };
+;// ./src/components/DateRangePicker/hooks/useRangeSelection.ts
+
+const useRangeSelection = ({
+  createNewDate,
+  getComparisonFormat
+}) => {
+  const {
+    dateTime,
+    calendarViewDateTime,
+    setCalendarViewDateTime,
+    setDateTime,
+    setIsOpen,
+    setLastFocusedElement,
+    rangeSelectionStep,
+    setRangeSelectionStep,
+    clearInputValue,
+    allowReverseSelection = false,
+    onChange
+  } = useDateRangePickerContext();
+  const handleRangeSelect = selectedValue => {
+    const newDate = createNewDate(selectedValue);
+    if (!newDate) return;
+
+    // Range selection logic
+    const isSelectingStart = rangeSelectionStep === 'start';
+    if (isSelectingStart) {
+      clearInputValue('to');
+      setLastFocusedElement('to');
+      setRangeSelectionStep('end');
+    }
+    let newDateTuple = isSelectingStart ? [newDate, undefined] : [dateTime[0], newDate];
+    setCalendarViewDateTime(isSelectingStart ? [newDate, newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
+
+    // Check if dates are in reverse order
+    const isReversed = newDateTuple[0] && newDateTuple[1] && newDateTuple[0].toMillis() > newDateTuple[1].toMillis();
+    if (isReversed) {
+      if (allowReverseSelection) {
+        // Auto-swap dates when reverse selection is allowed
+        newDateTuple = [newDateTuple[1], newDateTuple[0]];
+      } else if (!isSelectingStart) {
+        // User selected an earlier date - update start date
+        newDateTuple = [newDateTuple[1], undefined];
+        setLastFocusedElement('to');
+        setRangeSelectionStep('end');
+        setCalendarViewDateTime([newDateTuple[0], newDateTuple[0]]);
+      }
+    }
+    setDateTime(newDateTuple);
+    const normalizeToMidnight = dt => dt.set({
+      hour: 0,
+      minute: 0,
+      second: 0,
+      millisecond: 0
+    }).toJSDate();
+
+    // Call onChange when a date is selected from calendar
+    if (isSelectingStart && newDateTuple[0]) {
+      // First date selected
+      onChange?.([normalizeToMidnight(newDateTuple[0]), null]);
+    } else if (newDateTuple[0] && newDateTuple[1] && newDateTuple[0].toMillis() <= newDateTuple[1].toMillis()) {
+      // Both dates selected and in correct order
+      onChange?.([normalizeToMidnight(newDateTuple[0]), normalizeToMidnight(newDateTuple[1])]);
+      setRangeSelectionStep(null);
+      setIsOpen(false);
+    }
+  };
+  const getDateSelectionState = currentDT => {
+    const comparisonFormat = getComparisonFormat();
+    const isCalendarFirstDateSelected = currentDT.toFormat(comparisonFormat) === dateTime[0]?.toFormat(comparisonFormat);
+    const isCalendarSecondDateSelected = currentDT.toFormat(comparisonFormat) === dateTime[1]?.toFormat(comparisonFormat);
+    const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
+    return {
+      isCalendarFirstDateSelected,
+      isCalendarSecondDateSelected,
+      isCalendarDateSelected
+    };
+  };
+  return {
+    handleRangeSelect,
+    getDateSelectionState
+  };
+};
 ;// ./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)."; }
 
@@ -14489,15 +15340,9 @@ var components_DaysView_ref3 =  true ? {
 const DaysView_DaysView = () => {
   const weekDays = dates_getWeekDays();
   const {
-    dateTime,
-    calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
-    lastFocusedElement,
-    currentCalendarViewDT,
-    setCalendarViewDateTime,
-    setDateTime,
-    setIsOpen
+    currentCalendarViewDT
   } = useDateRangePickerContext();
   const currentDate = currentCalendarViewDT.toJSDate();
   const currentMonth = currentDate?.getMonth();
@@ -14508,22 +15353,23 @@ const DaysView_DaysView = () => {
     getClassNames,
     isHighlightDate
   } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedDay => currentCalendarViewDT.set({
+      day: Number(selectedDay)
+    }),
+    getComparisonFormat: () => 'D'
+  });
   const handleDaySelect = event => {
     const {
       target
     } = event;
-    const selectedDay = Number(target.innerHTML);
+    const selectedDay = target.innerHTML;
     const isEnabled = target.getAttribute('aria-disabled') === 'false';
     if (isEnabled) {
-      const newDate = currentCalendarViewDT.set({
-        day: selectedDay
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      handleRangeSelect(selectedDay);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
@@ -14537,16 +15383,18 @@ const DaysView_DaysView = () => {
       css: components_DaysView_ref3,
       onClick: handleDaySelect,
       children: dates.map((currentDate, index) => {
-        const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate);
+        const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate).startOf('day');
         const calendarDate = currentDT.toFormat('D');
         const calendarDay = currentDate.getDate();
         const calendarMonth = currentDate.getMonth();
         const ariaLabel = currentDT.toLocaleString(external_luxon_namespaceObject.DateTime.DATE_HUGE);
         const isCalendarDateNow = nowDate === calendarDate;
         const isCalendarMonth = currentMonth === calendarMonth;
-        const isCalendarFirstDateSelected = calendarDate === dateTime[0]?.toFormat('D');
-        const isCalendarSecondDateSelected = calendarDate === dateTime[1]?.toFormat('D');
-        const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
+        const {
+          isCalendarFirstDateSelected,
+          isCalendarSecondDateSelected,
+          isCalendarDateSelected
+        } = getDateSelectionState(currentDT);
         let isAriaDisabled = false;
         if (dateMinDT && dateMaxDT) {
           isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
@@ -14595,24 +15443,36 @@ var components_MonthsView_ref =  true ? {
 } : 0;
 const MonthsView_MonthsView = () => {
   const {
-    dateTime,
-    calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
     lastFocusedElement,
     currentCalendarViewDT,
+    calendarViewDateTime,
     rangePickerType,
     setCalendarType,
     setCalendarViewDateTime,
-    onMonthChange,
-    setDateTime,
-    setIsOpen
+    onMonthChange
   } = useDateRangePickerContext();
   const {
     handleDateHover,
     getClassNames,
     isHighlightDate
   } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedMonth => {
+      const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
+      const newMonth = currentCalendarViewDT?.set({
+        month: monthNumber + 1
+      });
+      return newMonth?.set({
+        day: lastFocusedElement === 'from' ? 1 : newMonth.daysInMonth
+      });
+    },
+    getComparisonFormat: () => 'yyyy-MM'
+  });
   const handleMonthSelect = event => {
     const {
       target
@@ -14623,29 +15483,20 @@ const MonthsView_MonthsView = () => {
       return;
     }
     const selectedMonth = target.innerHTML;
-    const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
     if (rangePickerType === 'days') {
+      // Navigation case: selecting month navigates to days view
+      const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
       const newDate = currentCalendarViewDT?.set({
         month: monthNumber + 1
       });
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
       if (newDate) {
+        setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
         onMonthChange?.(newDate.toJSDate());
+        setCalendarType('days');
       }
-      setCalendarType('days');
     } else {
-      const newMonth = currentCalendarViewDT?.set({
-        month: monthNumber + 1
-      });
-      const newDate = newMonth?.set({
-        day: lastFocusedElement === 'from' ? 1 : newMonth.daysInMonth
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      // Range selection case: selecting month completes the range
+      handleRangeSelect(selectedMonth);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
@@ -14660,8 +15511,10 @@ const MonthsView_MonthsView = () => {
       const isMinMonthReached = dateMinDT ? currentMonthDT.month < dateMinDT.month && currentMonthDT.year === dateMinDT.year : false;
       const isMaxMonthReached = dateMaxDT ? currentMonthDT.month > dateMaxDT.month && currentMonthDT.year === dateMaxDT.year : false;
       const isAriaDisabled = isMinMonthReached || isMaxMonthReached;
-      const isCalendarFirstDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime[0]?.toFormat('yyyy-MM');
-      const isCalendarSecondDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime[1]?.toFormat('yyyy-MM');
+      const {
+        isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected
+      } = getDateSelectionState(currentMonthDT);
       const classNames = getClassNames(currentMonthDT, {
         isCalendarFirstDateSelected,
         isCalendarSecondDateSelected
@@ -14697,7 +15550,6 @@ var components_YearsView_ref =  true ? {
 const YearsView_YearsView = () => {
   const {
     rangePickerType,
-    dateTime,
     calendarViewDateTime,
     currentCalendarViewDT,
     dateMinParts,
@@ -14706,20 +15558,36 @@ const YearsView_YearsView = () => {
     lastFocusedElement,
     setCalendarType,
     setCalendarViewDateTime,
-    onYearChange,
-    setDateTime,
-    setIsOpen
+    onYearChange
   } = useDateRangePickerContext();
   const wrapper = (0,external_react_namespaceObject.useRef)(null);
   const yearsList = dates_getYearsList({
     yearsFrom: dateMinParts[formatIndexes['year']],
     yearsCount: dateMaxParts[formatIndexes['year']] - dateMinParts[formatIndexes['year']] + 1
   });
-  const {
-    handleDateHover,
-    getClassNames,
-    isHighlightDate
-  } = useRangeHighlighting();
+  const {
+    handleDateHover,
+    getClassNames,
+    isHighlightDate
+  } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedYear => {
+      const newYear = currentCalendarViewDT?.set({
+        year: Number(selectedYear)
+      });
+      return newYear?.set(lastFocusedElement === 'from' ? {
+        day: 1,
+        month: 1
+      } : {
+        day: 31,
+        month: 12
+      });
+    },
+    getComparisonFormat: () => 'yyyy'
+  });
   (0,external_react_namespaceObject.useEffect)(() => {
     if (currentCalendarViewDT && wrapper.current) {
       wrapper.current.querySelector('[aria-current=date]')?.scrollIntoView({
@@ -14727,15 +15595,16 @@ const YearsView_YearsView = () => {
         block: 'center'
       });
     }
-  }, [calendarViewDateTime, lastFocusedElement]);
+  }, [calendarViewDateTime, lastFocusedElement, currentCalendarViewDT]);
   const handleYearSelect = event => {
     const {
       target
     } = event;
-    const selectedYear = Number(target.innerHTML);
+    const selectedYear = target.innerHTML;
     if (rangePickerType !== 'years') {
+      // Navigation case: selecting year navigates to months view
       const newDate = currentCalendarViewDT.set({
-        year: selectedYear
+        year: Number(selectedYear)
       });
       setCalendarType('months');
       setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
@@ -14743,22 +15612,8 @@ const YearsView_YearsView = () => {
         onYearChange?.(newDate.toJSDate());
       }
     } else {
-      const newYear = currentCalendarViewDT?.set({
-        year: selectedYear
-      });
-      const newDate = newYear?.set(lastFocusedElement === 'from' ? {
-        day: 1,
-        month: 1
-      } : {
-        day: 31,
-        month: 12
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      // Range selection case: selecting year completes the range
+      handleRangeSelect(selectedYear);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
@@ -14776,8 +15631,10 @@ const YearsView_YearsView = () => {
       if (isCalendarYear) {
         additionalProps['aria-current'] = 'date';
       }
-      const isCalendarFirstDateSelected = year.toString() === dateTime[0]?.toFormat('yyyy');
-      const isCalendarSecondDateSelected = year.toString() === dateTime[1]?.toFormat('yyyy');
+      const {
+        isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected
+      } = getDateSelectionState(currentYearDT);
       const classNames = getClassNames(currentYearDT, {
         isCalendarFirstDateSelected,
         isCalendarSecondDateSelected
@@ -15117,24 +15974,9 @@ function TriggerInput_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 
 
-const WithTriggerPopover = ({
-  isEnabled,
-  children
-}) => {
-  return isEnabled ? (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
-    asChild: true,
-    children: /*#__PURE__*/external_react_default().cloneElement(children, {
-      ...children.props
-    })
-  }) : (/*#__PURE__*/external_react_default().cloneElement(children, {
-    ...children.props
-  }));
-};
 const TriggerInput = ({
   datepickerType,
-  withPopover = false,
-  className,
-  onClick
+  className
 }) => {
   const {
     format,
@@ -15147,7 +15989,9 @@ const TriggerInput = ({
     messages,
     setLastFocusedElement,
     classNames,
-    onBlur: handleBlur
+    onBlur: handleBlur,
+    isOpen,
+    setIsOpen
   } = useDateRangePickerContext();
   const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)(); // Using FormProvider from react-hook-form
   const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
@@ -15169,42 +16013,55 @@ const TriggerInput = ({
     setLastFocusedElement(datepickerType);
     inputProps?.inputProps?.onFocus?.(e);
   };
-  const handleOpen = event => {
-    onClick?.(event);
-  };
-  return (0,jsx_runtime_namespaceObject.jsx)(WithTriggerPopover, {
-    isEnabled: withPopover,
-    children: (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
-      name: currentName,
-      placeholder: format,
-      ref: datepickerType === 'from' ? inputFromRef : inputToRef,
-      disabled: disabled,
-      register: register,
-      className: className,
-      wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)("display:flex;padding-left:", datepickerType === 'from' ? 0 : 14, "px;" + ( true ? "" : 0),  true ? "" : 0),
-      inputProps: {
-        onBlur: handleBlur,
-        onClick: handleOpen,
-        onFocus: handleFocus,
-        id: inputProps?.inputProps?.id || currentName,
-        'data-testid': `daterangepicker-input-${datepickerType}`,
-        autoComplete: 'off',
-        className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-          name: "15obm9d",
-          styles: "border:none!important;height:auto!important;padding:0!important;min-width:75px;line-height:16px;max-height:16px;letter-spacing:0.8px;border-radius:0!important;&::placeholder{letter-spacing:normal;}"
-        } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
-        ...inputElementProps
+  return (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
+    name: currentName,
+    placeholder: format,
+    ref: datepickerType === 'from' ? inputFromRef : inputToRef,
+    disabled: disabled,
+    register: register,
+    className: className,
+    wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)("display:flex;padding-left:", datepickerType === 'from' ? 0 : 14, "px;" + ( true ? "" : 0),  true ? "" : 0),
+    inputProps: {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onClick: e => {
+        if (isOpen) {
+          setIsOpen(false);
+        }
+        inputProps?.inputProps?.onClick?.(e);
       },
-      showStatusIcon: false,
-      errors: fieldError,
-      status: fieldStatus,
-      helperText: fieldStatus === 'basic' ? messages?.description : messages?.error,
-      helperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-        name: "lhoo11",
-        styles: "&>span::first-letter{text-transform:uppercase;}"
-      } : 0),
-      ...restInputProps
-    })
+      onKeyDown: e => {
+        inputProps?.inputProps?.onKeyDown?.(e);
+      },
+      onBeforeInput: e => {
+        // pass-through
+        inputProps?.inputProps?.onBeforeInput?.(e);
+      },
+      onInput: e => {
+        // pass-through
+        inputProps?.inputProps?.onInput?.(e);
+      },
+      onChange: e => {
+        inputProps?.inputProps?.onChange?.(e);
+      },
+      id: inputProps?.inputProps?.id || currentName,
+      'data-testid': `daterangepicker-input-${datepickerType}`,
+      autoComplete: 'off',
+      className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+        name: "15obm9d",
+        styles: "border:none!important;height:auto!important;padding:0!important;min-width:75px;line-height:16px;max-height:16px;letter-spacing:0.8px;border-radius:0!important;&::placeholder{letter-spacing:normal;}"
+      } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
+      ...inputElementProps
+    },
+    showStatusIcon: false,
+    errors: fieldError,
+    status: fieldStatus,
+    helperText: fieldStatus === 'basic' ? messages?.description : messages?.error,
+    helperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+      name: "lhoo11",
+      styles: "&>span::first-letter{text-transform:uppercase;}"
+    } : 0),
+    ...restInputProps
   });
 };
 ;// ./src/components/Field/FieldDescription.tsx
@@ -15304,8 +16161,8 @@ function Trigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to st
 
 
 var Trigger_ref =  true ? {
-  name: "1ldd2k6",
-  styles: "margin:0 3px"
+  name: "cx8u11",
+  styles: "margin:0 3px;cursor:pointer"
 } : 0;
 const Trigger = () => {
   const {
@@ -15315,7 +16172,6 @@ const Trigger = () => {
     lastFocusedElement,
     disabled,
     status,
-    openCalendarMode,
     isOpen,
     showCalendarIcon,
     showStatusArea,
@@ -15348,49 +16204,46 @@ const Trigger = () => {
         ref: wrapperRef,
         className: classNames?.trigger?.controlsWrapper,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
-          withPopover: true,
           datepickerType: "from",
-          className: classNames?.trigger?.inputFrom,
-          onClick: () => {
-            if (!isOpen) {
-              setIsOpen(true);
-            }
-          }
+          className: classNames?.trigger?.inputFrom
         }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
           name: "carrot-right",
           size: 16,
           color: disabled ? theme.colors.grey : theme.colors.greyDarker,
           className: classNames?.trigger?.arrowIcon,
+          onClick: () => {
+            if (isOpen) {
+              setIsOpen(false);
+            }
+          },
           css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
-          className: classNames?.trigger?.inputTo,
-          onClick: () => {
-            if (!isOpen) {
-              setIsOpen(true);
-            }
-          }
-        }), showCalendarIcon && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
-          endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-            name: "calendar",
-            size: 16,
-            color: disabled ? theme.colors.grey : theme.colors.greyDarker
-          }),
-          "data-testid": 'daterangepicker-button',
-          onClick: handleToggleOpen,
-          variant: "tertiary",
-          "aria-label": "Calendar",
-          isDisabled: disabled,
-          className: classNames?.trigger?.calendarIcon,
-          css: /*#__PURE__*/(0,react_namespaceObject.css)({
-            padding: 0,
-            margin: '0 0 0 10px',
-            height: 'auto',
-            cursor: openCalendarMode === 'input' || disabled ? 'default' : 'pointer',
-            '&:focus::before': {
-              display: 'none'
-            }
-          },  true ? "" : 0,  true ? "" : 0)
+          className: classNames?.trigger?.inputTo
+        }), showCalendarIcon && (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+          asChild: true,
+          children: (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+            endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+              name: "calendar",
+              size: 16,
+              color: disabled ? theme.colors.grey : theme.colors.greyDarker
+            }),
+            "data-testid": 'daterangepicker-button',
+            onClick: handleToggleOpen,
+            variant: "tertiary",
+            "aria-label": "Calendar",
+            isDisabled: disabled,
+            className: classNames?.trigger?.calendarIcon,
+            css: /*#__PURE__*/(0,react_namespaceObject.css)({
+              padding: 0,
+              margin: '0 0 0 10px',
+              height: 'auto',
+              cursor: disabled ? 'default' : 'pointer',
+              '&:focus::before': {
+                display: 'none'
+              }
+            },  true ? "" : 0,  true ? "" : 0)
+          })
         })]
       })
     }), showStatusArea && (0,jsx_runtime_namespaceObject.jsx)(TriggerStatusArea, {})]
@@ -15415,12 +16268,8 @@ const Content_DatePickerContent = () => {
 };
 ;// ./src/components/DateRangePicker/hooks/useDatePickerMask.tsx
 
-
 const useDatePickerMask_useDatePickerMask = ({
-  maskOptions,
-  formatIndexes,
-  dateMinParts,
-  dateMaxParts
+  maskOptions
 }) => {
   const {
     mask,
@@ -15433,28 +16282,13 @@ const useDatePickerMask_useDatePickerMask = ({
     mask,
     replacement,
     track: ({
-      data,
-      selectionStart,
-      selectionEnd,
-      value: currentValue
+      data
     }) => {
-      const isDateMask = typeof mask === 'string' && /^[_/]+$/.test(mask);
-      if (isDateMask) {
-        const newValue = currentValue.slice(0, selectionStart) + data + currentValue.slice(selectionEnd);
-        const updatedValue = (0,mask_namespaceObject.format)(newValue, {
-          mask,
-          replacement
-        });
-        const splittedValue = updatedValue.split('/');
-        const isChecked = dates_processDate({
-          day: splittedValue[formatIndexes['day']],
-          month: splittedValue[formatIndexes['month']],
-          year: splittedValue[formatIndexes['year']]
-        }, dateMinParts[formatIndexes['year']], dateMaxParts[formatIndexes['year']]);
-        return isChecked ? data : '';
-      } else {
-        return data;
-      }
+      // The mask should only format input, not validate it
+      // Validation happens on blur in useDateRangePicker.handleBlur
+      // This allows users to freely type and edit dates without blocking
+      // Return data as-is (string for insertions, null/undefined for deletions)
+      return data;
     },
     ...restMaskOptions
   });
@@ -15496,15 +16330,12 @@ const useDateRangePicker = ({
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isOpenState);
   const [status, setStatus] = (0,external_react_namespaceObject.useState)(rest.status);
   const previousOpenState = (0,external_react_namespaceObject.useRef)(isOpenState);
-  const handleSetIsOpen = open => {
-    setIsOpen(open);
-  };
+  const previousDateTime = (0,external_react_namespaceObject.useRef)([undefined, undefined]);
+  const defaultValueProcessed = (0,external_react_namespaceObject.useRef)(false);
   const {
     clearErrors,
     setError,
-    setValue,
-    resetField,
-    setFocus
+    setValue
   } = (0,external_react_hook_form_namespaceObject.useFormContext)();
   const nameFrom = `${_name}From`;
   const nameTo = `${_name}To`;
@@ -15518,7 +16349,6 @@ const useDateRangePicker = ({
   const [lastChangedDate, setLastChangedDate] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const [lastFocusedElement, setLastFocusedElement] = (0,external_react_namespaceObject.useState)('from');
   const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
-  const currentName = lastFocusedElement === 'from' ? nameFrom : nameTo;
   const [dateTimeForChangeEvent, setDateTimeForChangeEvent] = (0,external_react_namespaceObject.useState)(undefined);
   const [currentError, setCurrentError] = (0,external_react_namespaceObject.useState)({
     date: null,
@@ -15531,6 +16361,7 @@ const useDateRangePicker = ({
     year: splittedFormat.findIndex(item => item === 'yyyy')
   });
   const [calendarType, setCalendarType] = (0,external_react_namespaceObject.useState)(rangePickerType);
+  const [rangeSelectionStep, setRangeSelectionStep] = (0,external_react_namespaceObject.useState)(null);
   const [calendarViewDateTime, setCalendarViewDateTime] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const currentCalendarViewDT = calendarViewDateTime[currentIndex] || external_luxon_namespaceObject.DateTime.now().set({
     day: 1
@@ -15540,14 +16371,18 @@ const useDateRangePicker = ({
   const dateMinParts = finalDateMin.split('/').map(Number);
   const dateMaxParts = finalDateMax.split('/').map(Number);
   const defaultMask = getMaskForFormat(format);
-  const maskInputRef = useDatePickerMask_useDatePickerMask({
+  // separate mask refs per input to prevent focus/typing conflicts
+  const maskInputRefFrom = useDatePickerMask_useDatePickerMask({
     maskOptions: {
       mask: defaultMask,
-      ...maskOptions
-    },
-    dateMaxParts,
-    dateMinParts,
-    formatIndexes
+      ...(maskOptions || {})
+    }
+  });
+  const maskInputRefTo = useDatePickerMask_useDatePickerMask({
+    maskOptions: {
+      mask: defaultMask,
+      ...(maskOptions || {})
+    }
   });
   const dateMaxDT = external_luxon_namespaceObject.DateTime.fromObject({
     year: dateMaxParts[formatIndexes['year']],
@@ -15601,7 +16436,7 @@ const useDateRangePicker = ({
       setError(currentName, {
         message: errorMessage
       }, {
-        shouldFocus: true
+        shouldFocus: false
       });
       setStatus('error');
       setDateTime(newDateTimeIfInvalid);
@@ -15613,7 +16448,7 @@ const useDateRangePicker = ({
         setError(currentName, {
           message: errorMessage
         }, {
-          shouldFocus: true
+          shouldFocus: false
         });
         setStatus('error');
         setDateTime(newDateTimeIfInvalid);
@@ -15621,6 +16456,33 @@ const useDateRangePicker = ({
         safeOnChange();
       } else {
         setDateTime(newDateTimeIfValid);
+        // Update calendar view to reflect the manually entered date
+        let adjustedDateTime = newDateTime.startOf('day');
+        if (adjustedDateTime < dateMinDT) {
+          const {
+            year,
+            month,
+            day
+          } = dateMinDT;
+          adjustedDateTime = adjustedDateTime.set({
+            year,
+            month,
+            day
+          });
+        }
+        if (adjustedDateTime > dateMaxDT) {
+          const {
+            year,
+            month,
+            day
+          } = dateMaxDT;
+          adjustedDateTime = adjustedDateTime.set({
+            year,
+            month,
+            day
+          });
+        }
+        setCalendarViewDateTime(currentElementType === 'from' ? [adjustedDateTime, calendarViewDateTime[1] || adjustedDateTime] : [calendarViewDateTime[0] || adjustedDateTime, adjustedDateTime]);
         clearErrors();
         setStatus('basic');
         safeOnError?.(null);
@@ -15629,26 +16491,35 @@ const useDateRangePicker = ({
     }
   };
   const handleBlur = event => {
-    event.preventDefault();
     const blurredValue = event.currentTarget.value;
+    const fieldName = event.currentTarget.name;
+    const isFromField = fieldName === nameFrom;
     if (blurredValue.length > 0) {
-      processValue(blurredValue);
+      processValue(blurredValue, isFromField ? 'from' : 'to');
+    } else {
+      // User cleared the field - clear the corresponding dateTime
+      setDateTime(prev => isFromField ? [undefined, prev[1]] : [prev[0], undefined]);
+      setLastChangedDate(prev => isFromField ? [undefined, prev[1]] : [prev[0], undefined]);
+      setValue(fieldName, undefined);
+      clearErrors(fieldName);
     }
   };
   const processInputValue = (inputValue, elementName) => {
     const currentElementType = elementName || lastFocusedElement;
     const currentName = currentElementType === 'from' ? nameFrom : nameTo;
+    const currentWatchedValue = currentElementType === 'from' ? inputValueFrom : inputValueTo;
     if (typeof inputValue === 'string' && inputValue.length && inputValue.length < expectedDateLength) {
       setIsOpen(false);
-      setTimeout(() => {
-        maskInputRef.current.focus();
-      }, 10);
     }
     let newDateTime;
     if (typeof inputValue === 'string' && inputValue.length === expectedDateLength) {
       newDateTime = external_luxon_namespaceObject.DateTime.fromFormat(inputValue, luxonFormat);
-      setValue(currentName, inputValue);
-      processValue(inputValue, elementName);
+      // Avoid redundant setValue to prevent React Hook Form update loops
+      if (currentWatchedValue !== inputValue) {
+        setValue(currentName, inputValue);
+      }
+      // Do NOT validate immediately here to avoid blocking mid-edit scenarios and feedback loops.
+      // Validation will happen on blur explicitly.
     }
     const newCalendarViewDateTime = newDateTime && newDateTime.isValid ? newDateTime : undefined;
     if (newCalendarViewDateTime) {
@@ -15696,56 +16567,95 @@ const useDateRangePicker = ({
     }
   }, [inputValueTo]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
-    const currentInputValue = currentIndex === 0 ? inputValueFrom : inputValueTo;
-    if (dateTime?.[currentIndex]) {
-      const newValue = dateTime[currentIndex].toFormat(luxonFormat);
-      if (currentInputValue !== newValue) {
-        setValue(currentName, newValue);
+    // Only sync when dateTime actually changes (from calendar selection or programmatic change)
+    // Don't sync when only inputValue changes (user typing)
+    const dateTimeChanged = previousDateTime.current[0]?.toMillis() !== dateTime[0]?.toMillis() || previousDateTime.current[1]?.toMillis() !== dateTime[1]?.toMillis();
+
+    // Initialize on first run
+    if (previousDateTime.current[0] === undefined && previousDateTime.current[1] === undefined && (dateTime[0] !== undefined || dateTime[1] !== undefined)) {
+      previousDateTime.current = [dateTime[0], dateTime[1]];
+      // Continue to sync on initialization
+    } else if (!dateTimeChanged) {
+      // dateTime hasn't changed, don't sync (user is typing)
+      return;
+    } else {
+      // Update previous dateTime
+      previousDateTime.current = [dateTime[0], dateTime[1]];
+    }
+    const nextFromValue = dateTime[0]?.toFormat(luxonFormat);
+    if (nextFromValue) {
+      // Sync dateTime to form when dateTime changed (calendar selection)
+      // Don't overwrite if user is actively typing (input is focused and partial)
+      const isInputFocused = inputFromRef.current && document.activeElement === inputFromRef.current || inputToRef.current && document.activeElement === inputToRef.current;
+      if (!inputValueFrom) {
+        // Input is empty - sync from dateTime
+        setValue(nameFrom, nextFromValue);
+      } else if (inputValueFrom === nextFromValue) {
+        // Already in sync - no action needed
+      } else if (inputValueFrom.length < expectedDateLength && isInputFocused) {
+        // User is actively typing partial input - don't overwrite
+      } else {
+        // dateTime changed (calendar selection) - sync to form
+        setValue(nameFrom, nextFromValue);
       }
     }
-  }, [dateTime, lastFocusedElement, currentName]);
+    const nextToValue = dateTime[1]?.toFormat(luxonFormat);
+    if (nextToValue) {
+      // Sync dateTime to form when dateTime changed (calendar selection)
+      // Don't overwrite if user is actively typing (input is focused and partial)
+      const isInputFocused = inputFromRef.current && document.activeElement === inputFromRef.current || inputToRef.current && document.activeElement === inputToRef.current;
+      if (!inputValueTo) {
+        // Input is empty - sync from dateTime
+        setValue(nameTo, nextToValue);
+      } else if (inputValueTo === nextToValue) {
+        // Already in sync - no action needed
+      } else if (inputValueTo.length < expectedDateLength && isInputFocused) {
+        // User is actively typing partial input - don't overwrite
+      } else {
+        // dateTime changed (calendar selection) - sync to form
+        setValue(nameTo, nextToValue);
+      }
+    }
+  }, [dateTime, inputValueFrom, inputValueTo, luxonFormat, nameFrom, nameTo, setValue, expectedDateLength, inputFromRef, inputToRef]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (dateTime[0] && dateTime[1] && dateTime[0] > dateTime[1]) {
+      // When dates are in reverse order, swap them silently
+      // Calendar only opens via user click on icon button, not automatically
       if (lastFocusedElement === 'from') {
-        resetField(nameTo);
         setDateTime([dateTime[0], undefined]);
         setLastChangedDate([dateTime[0].toJSDate(), undefined]);
         setValue(nameTo, undefined);
-        setLastFocusedElement('to');
-        setTimeout(() => {
-          setFocus(nameTo, {
-            shouldSelect: true
-          });
-        }, 50);
-        setIsOpen(true);
       } else {
-        resetField(nameFrom);
         setDateTime([undefined, dateTime[1]]);
         setLastChangedDate([undefined, dateTime[1].toJSDate()]);
         setValue(nameFrom, undefined);
-        setLastFocusedElement('from');
-        setTimeout(() => {
-          setFocus(nameFrom, {
-            shouldSelect: true
-          });
-        }, 50);
-        setIsOpen(true);
       }
     }
-  }, [dateTime]);
+  }, [dateTime, lastFocusedElement, nameFrom, nameTo, setValue]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (previousOpenState.current !== isOpen) {
       if (isOpen) {
         onOpen?.();
+        setRangeSelectionStep('start');
+        setLastFocusedElement('from');
+        // Sync calendar view with current dateTime when opening
+        // This ensures preselected dates are visible in the calendar
+        if (dateTime[0] || dateTime[1]) {
+          setCalendarViewDateTime([dateTime[0] || dateTime[1] || external_luxon_namespaceObject.DateTime.now().set({
+            day: 1
+          }), dateTime[1] || dateTime[0] || external_luxon_namespaceObject.DateTime.now().set({
+            day: 1
+          })]);
+        }
       } else {
         onClose?.();
+        setRangeSelectionStep(null);
         setCalendarType(rangePickerType);
         setCalendarViewDateTime([dateTime[0], dateTime[1]]);
       }
       previousOpenState.current = isOpen;
     }
-  }, [isOpen]);
+  }, [isOpen, dateTime, rangePickerType, onOpen, onClose]);
   (0,external_react_namespaceObject.useEffect)(() => {
     const splittedFormat = format.split('/');
     setFormatIndexes({
@@ -15772,27 +16682,18 @@ const useDateRangePicker = ({
     if (Array.isArray(rest.value)) {
       const newDateTimeFrom = typeof rest.value[0] === 'string' && rest.value[0].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[0], luxonFormat) : undefined;
       const newDateTimeTo = typeof rest.value[1] === 'string' && rest.value[1].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[1], luxonFormat) : undefined;
-      const newDateTime = [newDateTimeFrom?.isValid ? newDateTimeFrom : undefined, newDateTimeTo?.isValid ? newDateTimeTo : undefined];
+      const newDateTime = [newDateTimeFrom?.isValid ? newDateTimeFrom.startOf('day') : undefined, newDateTimeTo?.isValid ? newDateTimeTo.startOf('day') : undefined];
       setDateTime(newDateTime);
       setLastChangedDate([newDateTime[0]?.toJSDate(), newDateTime[1]?.toJSDate()]);
+      // Sync calendar view with the new 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));
       setValue(nameTo, newDateTime[1]?.toFormat(luxonFormat));
     }
-  }, [rest.value]);
+  }, [rest.value, expectedDateLength, luxonFormat, nameFrom, nameTo, setValue, _name]);
   (0,external_react_namespaceObject.useEffect)(() => {
     setStatus(rest.status);
   }, [rest.status]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (lastChangedDate[0] || lastChangedDate[1]) {
-      if (lastFocusedElement === 'from' && !lastChangedDate[1]) {
-        setFocus(nameTo);
-      }
-      if (lastFocusedElement === 'to' && !lastChangedDate[0]) {
-        setFocus(nameFrom);
-        inputFromRef.current?.focus();
-      }
-    }
-  }, [lastChangedDate]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (calendarViewDateTime[0] && !calendarViewDateTime[1]) {
       setCalendarViewDateTime([calendarViewDateTime[0], calendarViewDateTime[0]]);
@@ -15807,11 +16708,20 @@ const useDateRangePicker = ({
     }
   }, [isOpenState]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (defaultValue) {
-      setValue(nameFrom, defaultValue[0]);
-      setValue(nameTo, defaultValue[1]);
+    // 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;
+      const newDateTime = [defaultDateTimeFrom?.isValid ? defaultDateTimeFrom.startOf('day') : undefined, defaultDateTimeTo?.isValid ? defaultDateTimeTo.startOf('day') : undefined];
+      setDateTime(newDateTime);
+      setLastChangedDate([newDateTime[0]?.toJSDate(), 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));
+      setValue(nameTo, newDateTime[1]?.toFormat(luxonFormat));
+      defaultValueProcessed.current = true;
     }
-  }, []);
+  }, [defaultValue, expectedDateLength, luxonFormat, nameFrom, nameTo, setCalendarViewDateTime, setValue, _name]);
   return {
     formatIndexes,
     dateMinParts,
@@ -15822,7 +16732,6 @@ const useDateRangePicker = ({
     inputValueFrom,
     inputValueTo,
     calendarViewDateTime,
-    maskInputRef,
     calendarType,
     lastChangedDate,
     luxonFormat,
@@ -15833,16 +16742,24 @@ const useDateRangePicker = ({
     currentCalendarViewDT,
     isOpen,
     status,
-    inputFromRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, inputFromRef]),
-    inputToRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, inputToRef]),
+    inputFromRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRefFrom, inputFromRef]),
+    inputToRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRefTo, inputToRef]),
     setIsOpen,
-    handleSetIsOpen,
     setLastFocusedElement,
     safeOnChange,
     setCalendarType,
     setCalendarViewDateTime,
     setDateTime,
-    handleBlur
+    handleBlur,
+    rangeSelectionStep,
+    setRangeSelectionStep,
+    clearInputValue: field => {
+      const targetName = field === 'from' ? nameFrom : nameTo;
+      clearErrors(targetName);
+      setValue(targetName, undefined);
+      setDateTime(prev => field === 'from' ? [undefined, prev[1]] : [prev[0], undefined]);
+      setLastChangedDate(prev => field === 'from' ? [undefined, prev[1]] : [prev[0], undefined]);
+    }
   };
 };
 ;// ./src/components/DateRangePicker/DateRangePickerProvider.tsx
@@ -15871,7 +16788,7 @@ const DateRangePickerProvider = ({
   };
   const handleToggleOpen = e => {
     const tagName = e.currentTarget.tagName.toLowerCase();
-    if (rest.openCalendarMode === 'both' || rest.openCalendarMode === 'input' && tagName === 'input' || rest.openCalendarMode === 'icon' && tagName === 'button') {
+    if (tagName === 'button') {
       toggleOpen();
     }
     if (tagName === 'input' && rest.inputProps?.inputProps?.onClick) {
@@ -15898,7 +16815,6 @@ const DateRangePickerProvider = ({
 
 const DateRangePicker = ({
   format,
-  openCalendarMode = 'icon',
   showCalendarIcon = true,
   showStatusArea = true,
   rangePickerType = 'days',
@@ -15907,7 +16823,6 @@ const DateRangePicker = ({
   const actualFormat = format || getFormatForRangePickerType(rangePickerType);
   return (0,jsx_runtime_namespaceObject.jsx)(DateRangePickerProvider, {
     format: actualFormat,
-    openCalendarMode: openCalendarMode,
     showCalendarIcon: showCalendarIcon,
     showStatusArea: showStatusArea,
     rangePickerType: rangePickerType,
@@ -17622,52 +18537,6 @@ const FiltersMultiSelectOptions = ({
 ;// ./src/components/Icon/index.ts
 
 
-;// ./src/components/ImageItem/ImageItem.tsx
-function ImageItem_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)."; }
-
-
-
-
-var ImageItem_ref =  true ? {
-  name: "c5ejfv",
-  styles: "gap:8px;text-decoration:none"
-} : 0;
-const ImageItem = ({
-  children,
-  image,
-  avatarSize = 24,
-  link = '',
-  openLinkInNewTab = false,
-  className
-}) => {
-  const theme = (0,react_namespaceObject.useTheme)();
-  const additionalProps = link ? {
-    href: link,
-    target: openLinkInNewTab ? '_blank' : undefined
-  } : {};
-  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
-    css: ImageItem_ref,
-    as: link ? 'a' : 'div',
-    className: className,
-    "data-testid": "image-item",
-    ...additionalProps,
-    children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
-      size: avatarSize,
-      image: image
-    }), (0,jsx_runtime_namespaceObject.jsx)("span", {
-      css: /*#__PURE__*/(0,react_namespaceObject.css)({
-        color: theme.colors.greyDarker,
-        fontSize: 14,
-        fontWeight: 500,
-        cursor: link ? 'pointer' : 'default',
-        '&:hover': {
-          color: link ? theme.colors.blue : theme.colors.greyDarker
-        }
-      },  true ? "" : 0,  true ? "" : 0),
-      children: children
-    })]
-  });
-};
 ;// ./src/components/ImageItem/index.ts
 
 ;// ./src/components/LinksTabBar/LinksTabBarBase.tsx
@@ -18589,18 +19458,47 @@ const Pagination = ({
   });
 };
 /* harmony default export */ const Pagination_Pagination = (Pagination);
+;// ./src/utils/react19HocCompat.tsx
+/**
+ * React 19 compatibility helper for Higher-Order Components (HOCs).
+ *
+ * React 19 has stricter requirements for component identification.
+ * This utility ensures HOCs properly set displayName for better debugging
+ * and React DevTools integration.
+ *
+ * @param hocName - The name of the HOC (e.g., 'WithPagination', 'WithLayout')
+ * @param Component - The component being wrapped
+ * @param WrappedComponent - The wrapper component function
+ * @returns The wrapper component with proper displayName set
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function setHocDisplayName(hocName,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+Component, WrappedComponent) {
+  const componentName = typeof Component === 'function' ?
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component.displayName ||
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Component.name || 'Component' : 'Component';
+  WrappedComponent.displayName = `${hocName}(${componentName})`;
+  return WrappedComponent;
+}
 ;// ./src/components/Pagination/WithPagination.tsx
 
 
+
+
 const WithPagination = Component => {
-  const decoratedComp = props => (0,jsx_runtime_namespaceObject.jsx)(PaginationContextProvider, {
-    selectedPage: 1,
-    children: (0,jsx_runtime_namespaceObject.jsx)(Component, {
-      ...props
-    })
-  });
-  decoratedComp.displayName = `WithPagination(${Component.displayName})`;
-  return decoratedComp;
+  function WrappedComponent(props) {
+    return (0,jsx_runtime_namespaceObject.jsx)(PaginationContextProvider, {
+      selectedPage: 1,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Component, {
+        ...props
+      })
+    });
+  }
+  return setHocDisplayName('WithPagination', Component, WrappedComponent);
 };
 ;// ./src/components/Pagination/index.ts
 
@@ -19024,15 +19922,17 @@ const useTypeahead = ({
   const items = (0,external_react_namespaceObject.useMemo)(() => {
     return filteredChildren.map((child, index) => {
       if (! /*#__PURE__*/external_react_default().isValidElement(child)) return null;
-      const isActive = selectedItems.includes(child.props.value);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const childElement = child;
+      const isActive = selectedItems.includes(childElement.props.value);
       const {
         value,
         label,
         id,
         isDisabled
-      } = child.props;
-      return /*#__PURE__*/external_react_default().cloneElement(child, {
-        ...child.props,
+      } = childElement.props;
+      return /*#__PURE__*/external_react_default().cloneElement(childElement, {
+        ...childElement.props,
         index,
         isActive,
         isDisabled,
@@ -19053,7 +19953,7 @@ const useTypeahead = ({
           value: id || value,
           input: inputValue,
           label
-        }) ?? child.props.children ?? label ?? value
+        }) ?? childElement.props.children ?? label ?? value
       });
     });
   }, [children, selectedItems, inputValue]);
@@ -19062,7 +19962,9 @@ const useTypeahead = ({
     const needle = inputValue.toLowerCase();
     for (const child of filteredChildren) {
       if (! /*#__PURE__*/external_react_default().isValidElement(child)) continue;
-      const labelText = (child.props.label ?? child.props.value).toString();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const childElement = child;
+      const labelText = (childElement.props.label ?? childElement.props.value).toString();
       if (labelText.toLowerCase().startsWith(needle)) {
         return inputValue + labelText.slice(inputValue.length);
       }
@@ -19254,29 +20156,29 @@ function Typeahead_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 // TODO: automatically calculate max-height
 // https://github.com/ssagroup/ui-kit/issues/385
 const TypeaheadOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
-  target: "e1vig1dw6"
+  target: "e1vig1dw7"
 } : 0)("padding:0;margin:0;list-style:none;background:#fff;border-radius:8px;filter:", ({
   theme
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";backdrop-filter:", ({
   theme
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";overflow-y:auto;max-height:350px;" + ( true ? "" : 0));
 const TypeaheadOption = /*#__PURE__*/base_default()("li",  true ? {
-  target: "e1vig1dw5"
+  target: "e1vig1dw6"
 } : 0)("display:flex;align-items:center;padding:0 16px;border:none;cursor:pointer;font-size:14px;gap:8px;padding:10px 12px;min-height:40px;line-height:20px;justify-content:space-between;overflow:hidden;text-overflow:ellipsis;background:", ({
   isActive,
   theme
 }) => isActive ? theme.colors.blueRoyal12 : 'none', ";&:hover{background:rgba(72, 125, 225, 0.06);}" + ( true ? "" : 0));
-const TypeaheadInput = theme => /*#__PURE__*/(0,css_namespaceObject.css)("&.typeahead-input{color:", theme.colors.greyDarker, ";border:none;border-radius:0;height:32px;cursor:pointer;padding:0;background:transparent;text-indent:8px;&:active,&:focus{min-width:100%;}}" + ( true ? "" : 0),  true ? "" : 0);
+const TypeaheadInput = theme => /*#__PURE__*/(0,css_namespaceObject.css)("&.typeahead-input{flex:1;width:100%;color:", theme.colors.greyDarker, ";border:none;border-radius:0;height:32px;cursor:pointer;padding:0;background:transparent;text-indent:8px;&:active,&:focus{min-width:100%;}}" + ( true ? "" : 0),  true ? "" : 0);
 const TypeaheadInputPlaceholder = /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
   name: "1kivhs5",
   styles: "position:absolute;top:0;left:-4px;font-weight:400;font-size:0.875rem;line-height:1rem;color:rgba(0, 0, 0, 0.54);&:disabled:hover{cursor:default;}"
 } : 0);
 const TypeaheadInputWrapper = /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-  name: "1f6chlt",
-  styles: "height:32px;z-index:5;background:transparent;margin-left:-8px;&:active,&:focus{min-width:100%;}"
+  name: "16adhtk",
+  styles: "flex:1;width:100%;height:32px;z-index:5;background:transparent;margin-left:-8px;&:active,&:focus{min-width:100%;}"
 } : 0);
 const TypeaheadItem = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1vig1dw4"
+  target: "e1vig1dw5"
 } : 0)("display:flex;gap:6px;background:", ({
   theme,
   isDisabled
@@ -19286,15 +20188,21 @@ const TypeaheadItem = /*#__PURE__*/base_default()("div",  true ? {
   theme,
   isDisabled
 }) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-weight:500;font-size:14px;min-height:20px;align-items:center;padding:6px;user-select:none;overflow:hidden;" + ( true ? "" : 0));
+const TypeaheadItemAvatar = /*#__PURE__*/base_default()("span",  true ? {
+  target: "e1vig1dw4"
+} : 0)( true ? {
+  name: "za0kxg",
+  styles: "display:flex;align-items:center;flex-shrink:0"
+} : 0);
 const TypeaheadItemLabel = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1vig1dw3"
 } : 0)("color:", ({
   theme,
   isDisabled
-}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-size:14px;font-weight:500;display:block;gap:6px;align-items:center;cursor:default;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0));
+}) => isDisabled ? theme.colors.grey : theme.colors.greyDarker, ";font-size:14px;font-weight:500;display:flex;align-items:center;cursor:default;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0));
 const TypeaheadItemCross = /*#__PURE__*/base_default()(Button_Button,  true ? {
   target: "e1vig1dw2"
-} : 0)("background:none;padding:0;padding-right:5;height:auto;&:active,&:focus,&:hover{cursor:", ({
+} : 0)("background:none;padding:0;padding-right:5px;height:auto;&:active,&:focus,&:hover{cursor:", ({
   isDisabled
 }) => isDisabled ? 'default' : 'pointer', ";background:none;box-shadow:none;}&:disabled{background:none;}" + ( true ? "" : 0));
 const TypeaheadInputsGroupWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
@@ -19361,10 +20269,14 @@ const MultipleTrigger = () => {
     children: [Object.values(context.optionsWithKey).length > 0 && context.selectedItems.map((selectedItem, index) => {
       const currentOption = context.optionsWithKey[selectedItem];
       const optionText = currentOption ? currentOption.children || currentOption.label || currentOption.value : '';
+      const avatar = currentOption?.avatar;
       return (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadItem, {
         onClick: e => e.stopPropagation(),
         isDisabled: context.isDisabled,
-        children: [(0,jsx_runtime_namespaceObject.jsx)(TypeaheadItemLabel, {
+        children: [avatar && (0,jsx_runtime_namespaceObject.jsx)(TypeaheadItemAvatar, {
+          "data-testid": "typeahead-item-avatar",
+          children: avatar
+        }), (0,jsx_runtime_namespaceObject.jsx)(TypeaheadItemLabel, {
           isDisabled: context.isDisabled,
           children: optionText
         }), (0,jsx_runtime_namespaceObject.jsx)(TypeaheadItemCross, {
@@ -19676,8 +20588,8 @@ function TypeaheadOption_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tri
 
 
 var TypeaheadOption_ref =  true ? {
-  name: "1gz2b5f",
-  styles: "overflow:hidden;text-overflow:ellipsis"
+  name: "szjn6i",
+  styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1"
 } : 0;
 var TypeaheadOption_ref2 =  true ? {
   name: "1kqn2f4",
@@ -19689,10 +20601,14 @@ var TypeaheadOption_ref3 =  true ? {
 } : 0;
 const TypeaheadOption_TypeaheadOption = ({
   children,
+  avatar,
   ...rest
 }) => (0,jsx_runtime_namespaceObject.jsxs)(TypeaheadOption, {
   ...rest,
-  children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
+  children: [avatar && (0,jsx_runtime_namespaceObject.jsx)(TypeaheadItemAvatar, {
+    "data-testid": "typeahead-option-avatar",
+    children: avatar
+  }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
     css: TypeaheadOption_ref,
     children: [children, ' ']
   }), rest.isActive && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
@@ -20567,10 +21483,22 @@ const RadioWidget = props => {
     }, i)) : undefined
   });
 };
+;// ./src/components/JsonSchemaForm/constants.ts
+const DEFAULT_AVATAR_SIZE = 24;
 ;// ./src/components/JsonSchemaForm/widgets/SelectWidget.tsx
 
 
 
+
+const getAvatarNode = (option, uiOptions) => {
+  const avatar = option.schema?.avatar;
+  if (!avatar) return;
+  const avatarSize = uiOptions.typeaheadAvatarSize ?? DEFAULT_AVATAR_SIZE;
+  return (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+    size: avatarSize,
+    image: avatar
+  });
+};
 const SelectWidget = props => {
   const {
     id,
@@ -20583,12 +21511,15 @@ const SelectWidget = props => {
     onFocus,
     value,
     onChangeOverride,
-    multiple
+    multiple,
+    uiSchema
   } = props;
   const {
     enumOptions = [],
     enumDisabled = []
   } = options;
+  const customPlaceholder = placeholder || uiSchema?.['ui:placeholder'];
+  const selectUiOptions = uiSchema?.['ui:options'] || {};
   const isMultiple = !!multiple || Array.isArray(value);
   const items = Array.isArray(enumOptions) ? enumOptions : [];
   const handleChange = onChangeOverride ? onChangeOverride : value => {
@@ -20616,8 +21547,7 @@ const SelectWidget = props => {
   };
   const handleTypeaheadChange = (changedValue, isAdded) => {
     if (isMultiple) {
-      const currentSelected = Array.isArray(selectedItems) ? selectedItems : [];
-      const newSelected = isAdded ? [...currentSelected, changedValue] : currentSelected.filter(item => item !== changedValue);
+      const newSelected = isAdded ? [...selectedItems, changedValue] : selectedItems.filter(item => item !== changedValue);
       handleFormChange(newSelected);
     } else {
       const newValue = isAdded ? changedValue : undefined;
@@ -20640,8 +21570,7 @@ const SelectWidget = props => {
   };
   const onRemoveSelectedClick = removedValue => {
     if (isMultiple) {
-      const currentSelected = Array.isArray(selectedItems) ? selectedItems : [];
-      const newSelected = currentSelected.filter(item => item !== removedValue);
+      const newSelected = selectedItems.filter(item => item !== removedValue);
       handleChange(newSelected);
     } else {
       handleChange(undefined);
@@ -20657,7 +21586,7 @@ const SelectWidget = props => {
       isDisabled: disabled,
       name: name,
       isMultiple: isMultiple,
-      placeholder: placeholder || undefined,
+      placeholder: customPlaceholder || undefined,
       onChange: handleTypeaheadChange,
       onEmptyChange: onEmptyChange,
       onClearAll: onClearAll,
@@ -20666,15 +21595,13 @@ const SelectWidget = props => {
         label,
         input
       }) => highlightInputMatch(label, input),
-      children: items.map(({
-        label,
-        value
-      }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
-        value: value,
-        label: label || value,
-        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
-        children: label || value
-      }, value))
+      children: items.map(item => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
+        value: item.value,
+        label: item.label || item.value,
+        avatar: getAvatarNode(item, selectUiOptions),
+        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(item.value),
+        children: item.label || item.value
+      }, item.value))
     })
   });
 };
@@ -21012,6 +21939,7 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
   styles: ".form-group{margin-bottom:16px;}.form-group:last-child{margin-bottom:0;}"
 } : 0);
 
+
 ;// ./src/components/index.ts
 
 
@@ -21126,6 +22054,8 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
 
 
 
+
+
 
 
 
@@ -21190,6 +22120,7 @@ const useTranslation = () => (0,external_react_namespaceObject.useContext)(Trans
 
 
 
+
 /******/ 	return __webpack_exports__;
 /******/ })()
 ;