@ssa-ui-kit/core 2.30.0 → 2.31.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),
@@ -8782,6 +8784,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 +9561,8 @@ const useChartInfo = () => {
   const {
     filteredData,
     selected,
-    lineShape
+    lineShape,
+    data
   } = useBarLineComplexChartContext();
   const {
     isFullscreenMode,
@@ -9331,8 +9575,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 +10074,7 @@ const BarLineComplexChartView = ({
             family: FONT_FAMILY,
             size: isFullscreenMode ? 16 : 12
           },
+          traceorder: orientation === 'h' ? 'reversed' : 'normal',
           ...legend
         },
         ...layoutRest
@@ -14052,6 +14308,301 @@ 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: "ej2kihb12"
+} : 0)( true ? {
+  name: "3w0yoi",
+  styles: "display:flex;flex-direction:column;gap:8px"
+} : 0);
+const PersonInfoHeader = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb11"
+} : 0)( true ? {
+  name: "1ocjxm6",
+  styles: "display:flex;align-items:flex-start;gap:8px"
+} : 0);
+const styles_IconWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb10"
+} : 0)( true ? {
+  name: "13ltyg2",
+  styles: "display:flex;align-items:flex-start;flex-shrink:0"
+} : 0);
+const styles_TitleWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb9"
+} : 0)( true ? {
+  name: "1tcizyl",
+  styles: "display:flex;flex-direction:column;gap:4px;flex:1"
+} : 0);
+const Title = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb8"
+} : 0)( true ? {
+  name: "edklr6",
+  styles: "font-size:14px;font-weight:600;line-height:19px"
+} : 0);
+const TextBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb7"
+} : 0)( true ? {
+  name: "1bzpq77",
+  styles: "font-size:14px;font-weight:400;line-height:19px"
+} : 0);
+const ValueWithCounter = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb6"
+} : 0)( true ? {
+  name: "1j5vobt",
+  styles: "display:flex;align-items:center;gap:4px"
+} : 0);
+const Counter = /*#__PURE__*/base_default()(TextBase.withComponent('span',  true ? {
+  target: "ej2kihb13"
+} : 0),  true ? {
+  target: "ej2kihb5"
+} : 0)("color:", ({
+  theme
+}) => theme.colors.greyDropdownFocused, ";margin-left:5px;" + ( true ? "" : 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));
+;// ./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,
+  counter,
+  css,
+  counterCss
+}) => {
+  return (0,jsx_runtime_namespaceObject.jsxs)(TextBase, {
+    css: css,
+    children: [value, counter && (0,jsx_runtime_namespaceObject.jsxs)(Counter, {
+      css: counterCss,
+      children: [" ", counter]
+    })]
+  });
+};
+;// ./src/components/PersonInfo/PersonInfoAvatar.tsx
+
+
+
+
+
+const PersonInfoAvatar = ({
+  avatar,
+  value,
+  counter,
+  styles
+}) => {
+  return (0,jsx_runtime_namespaceObject.jsxs)(styles_AvatarWrapper, {
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+      size: 24,
+      image: avatar
+    }), value && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
+      value: value,
+      counter: counter,
+      css: styles?.avatarName,
+      counterCss: styles?.counter
+    })]
+  });
+};
+;// ./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/PersonInfo/PersonInfo.tsx
+
+
+
+
+
+
+
+const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function PersonInfo({
+  title,
+  icon,
+  value,
+  badges,
+  avatar,
+  counter,
+  attributes,
+  description,
+  styles,
+  className,
+  ...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
+        }), avatar && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoAvatar, {
+          avatar: avatar,
+          value: value,
+          counter: counter,
+          styles: styles
+        }), !avatar && value && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
+          value: value,
+          counter: counter,
+          css: styles?.value,
+          counterCss: 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';
@@ -19254,29 +19805,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 +19837,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 +19918,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 +20237,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 +20250,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, {
@@ -20583,12 +21148,14 @@ const SelectWidget = props => {
     onFocus,
     value,
     onChangeOverride,
-    multiple
+    multiple,
+    uiSchema
   } = props;
   const {
     enumOptions = [],
     enumDisabled = []
   } = options;
+  const customPlaceholder = placeholder || uiSchema?.['ui:placeholder'];
   const isMultiple = !!multiple || Array.isArray(value);
   const items = Array.isArray(enumOptions) ? enumOptions : [];
   const handleChange = onChangeOverride ? onChangeOverride : value => {
@@ -20657,7 +21224,7 @@ const SelectWidget = props => {
       isDisabled: disabled,
       name: name,
       isMultiple: isMultiple,
-      placeholder: placeholder || undefined,
+      placeholder: customPlaceholder || undefined,
       onChange: handleTypeaheadChange,
       onEmptyChange: onEmptyChange,
       onClearAll: onClearAll,
@@ -21126,6 +21693,8 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
 
 
 
+
+