@ssa-ui-kit/core 2.30.0 → 2.32.0

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),
@@ -1100,6 +1102,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),
@@ -8224,7 +8227,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 +8246,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 +8787,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 +9564,8 @@ const useChartInfo = () => {
   const {
     filteredData,
     selected,
-    lineShape
+    lineShape,
+    data
   } = useBarLineComplexChartContext();
   const {
     isFullscreenMode,
@@ -9331,8 +9578,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 +10077,7 @@ const BarLineComplexChartView = ({
             family: FONT_FAMILY,
             size: isFullscreenMode ? 16 : 12
           },
+          traceorder: orientation === 'h' ? 'reversed' : 'normal',
           ...legend
         },
         ...layoutRest
@@ -14052,6 +14311,459 @@ const DatePickerInner = ({
 const DatePicker = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(DatePickerInner);
 ;// ./src/components/DatePicker/index.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
+
+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
+  }
+});
+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
+    }
+  }
+});
+;// ./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
+  });
+};
+;// ./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
+  } : {};
+};
+;// ./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';
@@ -17622,52 +18334,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
@@ -19254,29 +19920,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 +19952,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 +20033,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 +20352,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 +20365,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 +21247,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 +21275,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 +21311,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 +21334,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 +21350,7 @@ const SelectWidget = props => {
       isDisabled: disabled,
       name: name,
       isMultiple: isMultiple,
-      placeholder: placeholder || undefined,
+      placeholder: customPlaceholder || undefined,
       onChange: handleTypeaheadChange,
       onEmptyChange: onEmptyChange,
       onClearAll: onClearAll,
@@ -20666,15 +21359,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 +21703,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 +21818,8 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
 
 
 
+
+