@ssa-ui-kit/core 2.0.0 → 2.1.0-canary-afe713f-20250306

package/dist/index.js

@@ -91,7 +91,18 @@ __webpack_require__.d(__webpack_exports__, {
   DropdownOption: () => (/* reexport */ DropdownOption_DropdownOption),
   DropdownOptions: () => (/* reexport */ DropdownOptions_DropdownOptions),
   DropdownToggle: () => (/* reexport */ DropdownToggle_DropdownToggle),
+  FieldControlProps: () => (/* reexport */ FieldControl_namespaceObject.FieldControlProps),
+  FieldLabelProps: () => (/* reexport */ FieldLabel_namespaceObject.FieldLabelProps),
+  FieldProps: () => (/* reexport */ FieldRoot_namespaceObject.FieldRootProps),
+  Filter: () => (/* reexport */ useFiltersMultiSelect_namespaceObject.Filter),
   Filters: () => (/* reexport */ Filters),
+  FiltersMultiSelect: () => (/* reexport */ FiltersMultiSelect),
+  FiltersMultiSelectEmpty: () => (/* reexport */ FiltersMultiSelectEmpty),
+  FiltersMultiSelectEmptyProps: () => (/* reexport */ FiltersMultiSelectEmpty_namespaceObject.FiltersMultiSelectEmptyProps),
+  FiltersMultiSelectOption: () => (/* reexport */ FiltersMultiSelectOption),
+  FiltersMultiSelectOptionProps: () => (/* reexport */ FiltersMultiSelectOption_namespaceObject.FiltersMultiSelectOptionProps),
+  FiltersMultiSelectOptions: () => (/* reexport */ FiltersMultiSelectOptions),
+  FiltersMultiSelectProps: () => (/* reexport */ FiltersMultiSelect_namespaceObject.FiltersMultiSelectProps),
   Form: () => (/* reexport */ Form_Form),
   FormAction: () => (/* reexport */ FormAction_FormAction),
   FormCheckbox: () => (/* reexport */ FormCheckbox_FormCheckbox),
@@ -129,6 +140,7 @@ __webpack_require__.d(__webpack_exports__, {
   PaginationContext: () => (/* reexport */ PaginationContext),
   PaginationContextProvider: () => (/* reexport */ PaginationContextProvider),
   PieChart: () => (/* reexport */ PieChart),
+  PieChartComponent: () => (/* reexport */ PieChartComponent),
   PieChartLegend: () => (/* reexport */ PieChartLegend),
   Popover: () => (/* reexport */ Popover),
   PopoverClose: () => (/* reexport */ PopoverClose),
@@ -154,6 +166,8 @@ __webpack_require__.d(__webpack_exports__, {
   SearchBoxInput: () => (/* reexport */ SearchBoxInput),
   SearchBoxWrapper: () => (/* reexport */ SearchBoxWrapper),
   SegmentedPieChart: () => (/* reexport */ SegmentedPieChart),
+  SegmentedPieChartComponent: () => (/* reexport */ SegmentedPieChartComponent),
+  SelectedFilter: () => (/* reexport */ useFiltersMultiSelect_namespaceObject.SelectedFilter),
   SimpleChartTooltip: () => (/* reexport */ SimpleChartTooltip),
   Step: () => (/* reexport */ Step_Step),
   StepConnector: () => (/* reexport */ StepConnector_StepConnector),
@@ -223,6 +237,8 @@ __webpack_require__.d(__webpack_exports__, {
   styles: () => (/* reexport */ Tooltip_styles_namespaceObject),
   useAccordionGroupContext: () => (/* reexport */ useAccordionGroupContext),
   useCollapsibleNavBarContext: () => (/* reexport */ useCollapsibleNavBarContext),
+  useFieldContext: () => (/* reexport */ useFieldContext),
+  useFilterMultiSelect: () => (/* reexport */ useFilterMultiSelect),
   useFullscreenMode: () => (/* reexport */ useFullscreenMode),
   useNestedTableRowContext: () => (/* reexport */ useNestedTableRowContext),
   usePaginationContext: () => (/* reexport */ usePaginationContext),
@@ -331,6 +347,22 @@ __webpack_require__.d(Plus_namespaceObject, {
   Plus: () => (Plus)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/PlusCircle.tsx
+var PlusCircle_namespaceObject = {};
+__webpack_require__.r(PlusCircle_namespaceObject);
+__webpack_require__.d(PlusCircle_namespaceObject, {
+  ICON_NAME: () => (PlusCircle_ICON_NAME),
+  PlusCircle: () => (PlusCircle)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/PlusCircleInverted.tsx
+var PlusCircleInverted_namespaceObject = {};
+__webpack_require__.r(PlusCircleInverted_namespaceObject);
+__webpack_require__.d(PlusCircleInverted_namespaceObject, {
+  ICON_NAME: () => (PlusCircleInverted_ICON_NAME),
+  PlusCircleInverted: () => (PlusCircleInverted)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/Minus.tsx
 var Minus_namespaceObject = {};
 __webpack_require__.r(Minus_namespaceObject);
@@ -339,6 +371,22 @@ __webpack_require__.d(Minus_namespaceObject, {
   Minus: () => (Minus)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/MinusCircle.tsx
+var MinusCircle_namespaceObject = {};
+__webpack_require__.r(MinusCircle_namespaceObject);
+__webpack_require__.d(MinusCircle_namespaceObject, {
+  ICON_NAME: () => (MinusCircle_ICON_NAME),
+  MinusCircle: () => (MinusCircle)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/MinusCircleInverted.tsx
+var MinusCircleInverted_namespaceObject = {};
+__webpack_require__.r(MinusCircleInverted_namespaceObject);
+__webpack_require__.d(MinusCircleInverted_namespaceObject, {
+  ICON_NAME: () => (MinusCircleInverted_ICON_NAME),
+  MinusCircleInverted: () => (MinusCircleInverted)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/Cross.tsx
 var Cross_namespaceObject = {};
 __webpack_require__.r(Cross_namespaceObject);
@@ -363,6 +411,14 @@ __webpack_require__.d(CheckCircle_namespaceObject, {
   ICON_NAME: () => (CheckCircle_ICON_NAME)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/CheckCircleInverted.tsx
+var CheckCircleInverted_namespaceObject = {};
+__webpack_require__.r(CheckCircleInverted_namespaceObject);
+__webpack_require__.d(CheckCircleInverted_namespaceObject, {
+  CheckCircleInverted: () => (CheckCircleInverted),
+  ICON_NAME: () => (CheckCircleInverted_ICON_NAME)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/More.tsx
 var More_namespaceObject = {};
 __webpack_require__.r(More_namespaceObject);
@@ -750,6 +806,7 @@ __webpack_require__.d(all_namespaceObject, {
   Chart: () => (Chart_namespaceObject),
   Check: () => (Check_namespaceObject),
   CheckCircle: () => (CheckCircle_namespaceObject),
+  CheckCircleInverted: () => (CheckCircleInverted_namespaceObject),
   Circle: () => (Circle_namespaceObject),
   Circular: () => (Circular_namespaceObject),
   Clock: () => (Clock_namespaceObject),
@@ -774,11 +831,15 @@ __webpack_require__.d(all_namespaceObject, {
   Measurements: () => (Measurements_namespaceObject),
   Message: () => (Message_namespaceObject),
   Minus: () => (Minus_namespaceObject),
+  MinusCircle: () => (MinusCircle_namespaceObject),
+  MinusCircleInverted: () => (MinusCircleInverted_namespaceObject),
   More: () => (More_namespaceObject),
   MoreVertical: () => (MoreVertical_namespaceObject),
   Notification: () => (Notification_namespaceObject),
   Pages: () => (Pages_namespaceObject),
   Plus: () => (Plus_namespaceObject),
+  PlusCircle: () => (PlusCircle_namespaceObject),
+  PlusCircleInverted: () => (PlusCircleInverted_namespaceObject),
   RadioOn: () => (RadioOn_namespaceObject),
   Report: () => (Report_namespaceObject),
   Robot: () => (Robot_namespaceObject),
@@ -827,6 +888,55 @@ __webpack_require__.d(Tooltip_styles_namespaceObject, {
   small: () => (Tooltip_styles_small)
 });
 
+// NAMESPACE OBJECT: ./src/components/Field/FieldRoot.tsx
+var FieldRoot_namespaceObject = {};
+__webpack_require__.r(FieldRoot_namespaceObject);
+__webpack_require__.d(FieldRoot_namespaceObject, {
+  X: () => (FieldRoot)
+});
+
+// NAMESPACE OBJECT: ./src/components/Field/FieldLabel.tsx
+var FieldLabel_namespaceObject = {};
+__webpack_require__.r(FieldLabel_namespaceObject);
+__webpack_require__.d(FieldLabel_namespaceObject, {
+  d: () => (FieldLabel)
+});
+
+// NAMESPACE OBJECT: ./src/components/Field/FieldControl.tsx
+var FieldControl_namespaceObject = {};
+__webpack_require__.r(FieldControl_namespaceObject);
+__webpack_require__.d(FieldControl_namespaceObject, {
+  s: () => (FieldControl)
+});
+
+// NAMESPACE OBJECT: ./src/components/FiltersMultiSelect/useFiltersMultiSelect.tsx
+var useFiltersMultiSelect_namespaceObject = {};
+__webpack_require__.r(useFiltersMultiSelect_namespaceObject);
+__webpack_require__.d(useFiltersMultiSelect_namespaceObject, {
+  j: () => (useFilterMultiSelect)
+});
+
+// NAMESPACE OBJECT: ./src/components/FiltersMultiSelect/components/FiltersMultiSelectEmpty.tsx
+var FiltersMultiSelectEmpty_namespaceObject = {};
+__webpack_require__.r(FiltersMultiSelectEmpty_namespaceObject);
+__webpack_require__.d(FiltersMultiSelectEmpty_namespaceObject, {
+  S: () => (FiltersMultiSelectEmpty)
+});
+
+// NAMESPACE OBJECT: ./src/components/FiltersMultiSelect/FiltersMultiSelect.tsx
+var FiltersMultiSelect_namespaceObject = {};
+__webpack_require__.r(FiltersMultiSelect_namespaceObject);
+__webpack_require__.d(FiltersMultiSelect_namespaceObject, {
+  p: () => (FiltersMultiSelect)
+});
+
+// NAMESPACE OBJECT: ./src/components/FiltersMultiSelect/components/FiltersMultiSelectOption.tsx
+var FiltersMultiSelectOption_namespaceObject = {};
+__webpack_require__.r(FiltersMultiSelectOption_namespaceObject);
+__webpack_require__.d(FiltersMultiSelectOption_namespaceObject, {
+  u: () => (FiltersMultiSelectOption)
+});
+
 // NAMESPACE OBJECT: ./src/components/Charts/PieChart/colorPalettes.ts
 var colorPalettes_namespaceObject = {};
 __webpack_require__.r(colorPalettes_namespaceObject);
@@ -921,14 +1031,22 @@ const main = {
     // #656567
     redLighter: 'rgba(242, 136, 142, 1)',
     // #f2888e
+    redLighter6: 'rgba(242, 136, 142, 0.06)',
+    // #f2888e
     redLighter40: 'rgba(242, 136, 142, 0.4)',
     // #f2888e
     red: 'rgba(235, 117, 86, 1)',
     // #eb7556
+    red6: 'rgba(235, 117, 86, 0.06)',
+    // #eb7556
+    redDark: 'rgba(229, 53, 14, 1)',
+    // #e5350e
     red40: 'rgba(235, 117, 86, 0.4)',
     // #eb7556
     greenLighter: 'rgba(137, 217, 150, 1)',
     // #89d996
+    greenLighter6: 'rgba(137, 217, 150, 0.06)',
+    // #89d996
     greenLighter20: 'rgba(137, 217, 150, 0.2)',
     // #89d996
     greenLighter40: 'rgba(137, 217, 150, 0.4)',
@@ -937,6 +1055,8 @@ const main = {
     // #89d996
     green: 'rgba(82, 197, 135, 1)',
     // #52c587
+    green6: 'rgba(82, 197, 135, 0.06)',
+    // #52c587
     green20: 'rgba(82, 197, 135, 0.2)',
     // #52c587
     green40: 'rgba(82, 197, 135, 0.4)',
@@ -1007,6 +1127,8 @@ const main = {
     // #9c7aeb
     blue: 'rgba(65, 120, 225, 1)',
     // #4178e1
+    blue6: 'rgba(65, 120, 225, 0.06)',
+    // #4178e1
     blue20: 'rgba(65, 120, 225, 0.2)',
     // #4178e1
     blueDark: 'rgba(36, 101, 227, 1)',
@@ -1019,6 +1141,8 @@ const main = {
     // #A6D5F4
     blueLighter: 'rgba(117, 153, 222, 1)',
     // #7599de
+    blueLighter6: 'rgba(117, 153, 222, 0.06)',
+    // #7599de
     blueLighter20: 'rgba(117, 153, 222, 0.2)',
     // #7599de
     blueLighter40: 'rgba(117, 153, 222, 0.4)',
@@ -1047,6 +1171,8 @@ const main = {
     //#0745bd
     blueRoyal: 'rgba(72, 125, 225, 1)',
     //#487de1
+    blueRoyal6: 'rgba(72, 125, 225, 0.06)',
+    //#487DE1
     blueRoyal12: 'rgba(72, 125, 225, 0.12)',
     //#487DE1
     dangerShades300: 'rgb(253, 128, 122)',
@@ -1159,11 +1285,12 @@ const Badge = /*#__PURE__*/external_react_default().forwardRef(function Badge({
   children,
   ...props
 }, ref) {
+  const sizeProps = mapSizes[size];
   return (0,jsx_runtime_namespaceObject.jsx)(Badge_BadgeBase, {
     ref: ref,
     css: [color in mapColors ? mapColors[color] : {
       background: color
-    }, mapSizes[size],  true ? "" : 0,  true ? "" : 0],
+    }, sizeProps,  true ? "" : 0,  true ? "" : 0],
     ...props,
     children: children ? children : null
   });
@@ -1729,6 +1856,59 @@ const Plus = ({
   })]
 });
 const Plus_ICON_NAME = 'plus';
+;// ./src/components/Icon/icons/PlusCircle.tsx
+
+const PlusCircle = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Plus circle',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M5.96667 9.99999C5.96667 9.61339 6.28008 9.29999 6.66667 9.29999H9.30005V6.66667C9.30005 6.28008 9.61345 5.96667 10 5.96667C10.3866 5.96667 10.7 6.28008 10.7 6.66667V9.29999H13.3333C13.7199 9.29999 14.0333 9.61339 14.0333 9.99999C14.0333 10.3866 13.7199 10.7 13.3333 10.7H10.7V13.3333C10.7 13.7199 10.3866 14.0333 10 14.0333C9.61345 14.0333 9.30005 13.7199 9.30005 13.3333V10.7H6.66667C6.28008 10.7 5.96667 10.3866 5.96667 9.99999Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M0.966675 10C0.966675 5.03008 5.03008 0.966675 10 0.966675C14.9699 0.966675 19.0333 5.03008 19.0333 10C19.0333 14.9699 14.9699 19.0333 10 19.0333C5.03008 19.0333 0.966675 14.9699 0.966675 10ZM10 2.36667C5.80327 2.36667 2.36667 5.80327 2.36667 10C2.36667 14.1967 5.80327 17.6333 10 17.6333C14.1967 17.6333 17.6333 14.1967 17.6333 10C17.6333 5.80327 14.1967 2.36667 10 2.36667Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: fill
+  })]
+});
+const PlusCircle_ICON_NAME = 'plus-circle';
+;// ./src/components/Icon/icons/PlusCircleInverted.tsx
+
+const PlusCircleInverted = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Plus circle inverted',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M1.66663 10C1.66663 5.40835 5.40829 1.66669 9.99996 1.66669C14.5916 1.66669 18.3333 5.40835 18.3333 10C18.3333 14.5917 14.5916 18.3334 9.99996 18.3334C5.40829 18.3334 1.66663 14.5917 1.66663 10ZM9.99996 13.9584C10.3416 13.9584 10.625 13.675 10.625 13.3334V10.625H13.3333C13.675 10.625 13.9583 10.3417 13.9583 10C13.9583 9.65835 13.675 9.37502 13.3333 9.37502H10.625V6.66669C10.625 6.32502 10.3416 6.04169 9.99996 6.04169C9.65829 6.04169 9.37496 6.32502 9.37496 6.66669V9.37502H6.66663C6.32496 9.37502 6.04163 9.65835 6.04163 10C6.04163 10.3417 6.32496 10.625 6.66663 10.625H9.37496V13.3334C9.37496 13.675 9.65829 13.9584 9.99996 13.9584Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: fill
+  })]
+});
+const PlusCircleInverted_ICON_NAME = 'plus-circle-inverted';
 ;// ./src/components/Icon/icons/Minus.tsx
 
 const Minus = ({
@@ -1755,6 +1935,59 @@ const Minus = ({
   })]
 });
 const Minus_ICON_NAME = 'minus';
+;// ./src/components/Icon/icons/MinusCircle.tsx
+
+const MinusCircle = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Minus circle',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M5.8999 10C5.8999 9.61341 6.2133 9.30001 6.5999 9.30001H13.2666C13.6532 9.30001 13.9666 9.61341 13.9666 10C13.9666 10.3866 13.6532 10.7 13.2666 10.7H6.5999C6.2133 10.7 5.8999 10.3866 5.8999 10Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M0.899902 10C0.899902 5.03008 4.9633 0.966675 9.93324 0.966675C14.9032 0.966675 18.9666 5.03008 18.9666 10C18.9666 14.9699 14.9032 19.0333 9.93324 19.0333C4.9633 19.0333 0.899902 14.9699 0.899902 10ZM9.93324 2.36667C5.7365 2.36667 2.2999 5.80327 2.2999 10C2.2999 14.1967 5.7365 17.6333 9.93324 17.6333C14.13 17.6333 17.5666 14.1967 17.5666 10C17.5666 5.80327 14.13 2.36667 9.93324 2.36667Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: fill
+  })]
+});
+const MinusCircle_ICON_NAME = 'minus-circle';
+;// ./src/components/Icon/icons/MinusCircleInverted.tsx
+
+const MinusCircleInverted = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Minus circle inverted',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M1.66663 10C1.66663 5.40835 5.40829 1.66669 9.99996 1.66669C14.5916 1.66669 18.3333 5.40835 18.3333 10C18.3333 14.5917 14.5916 18.3334 9.99996 18.3334C5.40829 18.3334 1.66663 14.5917 1.66663 10ZM5.97496 10C5.97496 10.3417 6.25829 10.625 6.59996 10.625H13.2666C13.6166 10.625 13.8916 10.3417 13.8916 10C13.8916 9.65835 13.6083 9.37502 13.2666 9.37502H6.59996C6.25829 9.37502 5.97496 9.65835 5.97496 10Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    fill: fill
+  })]
+});
+const MinusCircleInverted_ICON_NAME = 'minus-circle-inverted';
 ;// ./src/components/Icon/icons/Cross.tsx
 
 const Cross = ({
@@ -1844,6 +2077,35 @@ const CheckCircle = ({
   })]
 });
 const CheckCircle_ICON_NAME = 'check-circle';
+;// ./src/components/Icon/icons/CheckCircleInverted.tsx
+
+const CheckCircleInverted = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Check circle inverted',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.966675 10C0.966675 5.03008 5.03008 0.966675 10 0.966675C14.9699 0.966675 19.0333 5.03008 19.0333 10C19.0333 14.9699 14.9699 19.0333 10 19.0333C5.03008 19.0333 0.966675 14.9699 0.966675 10ZM10 2.36667C5.80327 2.36667 2.36667 5.80327 2.36667 10C2.36667 14.1967 5.80327 17.6333 10 17.6333C14.1967 17.6333 17.6333 14.1967 17.6333 10C17.6333 5.80327 14.1967 2.36667 10 2.36667Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.36667 10C2.36667 5.80327 5.80327 2.36667 10 2.36667C14.1967 2.36667 17.6333 5.80327 17.6333 10C17.6333 14.1967 14.1967 17.6333 10 17.6333C5.80327 17.6333 2.36667 14.1967 2.36667 10ZM14.037 7.14705C14.3102 7.42066 14.3098 7.86388 14.0362 8.137L9.31117 12.8537C9.03773 13.1266 8.59486 13.1264 8.32166 12.8532L5.96333 10.4949C5.68996 10.2215 5.68996 9.77831 5.96333 9.50495C6.23669 9.23158 6.67991 9.23158 6.95328 9.50495L8.81707 11.3687L13.0471 7.14618C13.3207 6.87305 13.7639 6.87344 14.037 7.14705Z",
+    fill: fill
+  })]
+});
+const CheckCircleInverted_ICON_NAME = 'check-circle-inverted';
 ;// ./src/components/Icon/icons/More.tsx
 
 const More = ({
@@ -3443,6 +3705,16 @@ const Report_ICON_NAME = 'report';
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -3857,16 +4129,16 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
-/**
- * The structure of the component:
- *
- * Dropdown
- *   DropdownToggle
- *   DropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+/**
+ * The structure of the component:
+ *
+ * Dropdown
+ *   DropdownToggle
+ *   DropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
 
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
@@ -4970,16 +5242,16 @@ const DropdownPlaceholderLabel = /*#__PURE__*/base_default()("div",  true ? {
   styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
 } : 0);
 
-/**
- * The structure of the component:
- *
- * MultipleDropdown
- *   DropdownToggle
- *   MultipleDropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+/**
+ * The structure of the component:
+ *
+ * MultipleDropdown
+ *   DropdownToggle
+ *   MultipleDropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
 function MultipleDropdownInner({
   selectedItems = [],
@@ -5224,8 +5496,8 @@ const NavToggle = ({
 
 
 
-/**
- * UI Component that shows the navigation bar
+/**
+ * UI Component that shows the navigation bar
  */
 const NavBar = ({
   items
@@ -5673,8 +5945,8 @@ const PieChartBase = /*#__PURE__*/base_default()("div",  true ? {
 const PieChartTextBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "eq9zdmm0"
 } : 0)( true ? {
-  name: "boy8rj",
-  styles: "position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;width:calc(100% - 34px);height:calc(100% - 34px);left:17px;top:17px;border-radius:50%"
+  name: "1e5nn9x",
+  styles: "position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;width:calc(100% - 34px);height:calc(100% - 34px);left:17px;top:17px;border-radius:50%;pointer-events:none"
 } : 0);
 ;// ./src/components/Charts/PieChart/styles.ts
 
@@ -6475,12 +6747,12 @@ const ProgressVertical = ({
 /* harmony default export */ const ProgressVertical_ProgressVertical = (ProgressVertical);
 ;// ./src/components/ResponsiveImage/ResponsiveImage.tsx
 
-/**
- * A simple wrapper over the `<img />` tag.
- *
- * Don't forget to adjust Device Pixel Ratio in DevTools
- * when testing srcSet, and use Hard Reload to force the
- * browser to load an image of another resolution.
+/**
+ * A simple wrapper over the `<img />` tag.
+ *
+ * Don't forget to adjust Device Pixel Ratio in DevTools
+ * when testing srcSet, and use Hard Reload to force the
+ * browser to load an image of another resolution.
  * */
 const ResponsiveImage = ({
   src,
@@ -6891,12 +7163,12 @@ const TabBarBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1hg26v10"
 } : 0)( true ? "" : 0);
 
-/**
- * This component doesn't show contents of the selected tab,
- * however it accepts a required `renderContent()` render
- * prop and stores it into the Context. This lets the parent
- * component to decide where to render the contents of the
- * selected tab.
+/**
+ * This component doesn't show contents of the selected tab,
+ * however it accepts a required `renderContent()` render
+ * prop and stores it into the Context. This lets the parent
+ * component to decide where to render the contents of the
+ * selected tab.
  * */
 const TabBar = ({
   children
@@ -7213,13 +7485,13 @@ const useTooltipContext = () => {
 
 
 
-/*
- * <Tooltip>
- *   <TooltipTrigger>
- *     <Button />
- *   </TooltipTrigger>
- *   <TooltipContent>Tooltip</TooltipContent>
- * </Tooltip>
+/*
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button />
+ *   </TooltipTrigger>
+ *   <TooltipContent>Tooltip</TooltipContent>
+ * </Tooltip>
  * */
 const Tooltip = ({
   children,
@@ -7693,9 +7965,9 @@ var CardList_ref =  true ? {
   name: "1fgo50s",
   styles: "list-style:none;padding:0;li{margin-bottom:15px;}"
 } : 0;
-/**
- *
- * UI Component that renders a list of items with a custom render function
+/**
+ *
+ * UI Component that renders a list of items with a custom render function
  */
 const CardList = ({
   title,
@@ -8565,8 +8837,8 @@ const SCREEN_SIZES = {
 
 
 
-/**
- * UI Component that shows the collapsible navigation bar
+/**
+ * UI Component that shows the collapsible navigation bar
  */
 
 const CollapsibleNavBar = ({
@@ -9638,6 +9910,135 @@ const DatePickerInner = ({
 const DatePicker = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(DatePickerInner);
 ;// ./src/components/DatePicker/index.ts
 
+;// ./src/components/Field/FieldProvider.ts
+
+const [FieldProvider, useFieldContext] = (0,hooks_namespaceObject.createSafeContext)('useFieldContext must be used within a FieldProvider');
+;// ./src/components/Field/FieldRoot.tsx
+
+
+const FieldRoot = ({
+  children,
+  ...props
+}) => {
+  const {
+    disabled = false,
+    status = 'basic',
+    forwardFocus = true,
+    ...divProps
+  } = props;
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    ...divProps,
+    children: (0,jsx_runtime_namespaceObject.jsx)(FieldProvider, {
+      value: {
+        disabled,
+        status,
+        forwardFocus
+      },
+      children: children
+    })
+  });
+};
+;// ./src/components/Field/FieldLabel.tsx
+
+
+
+const FieldLabel = ({
+  children,
+  ...props
+}) => {
+  const ctx = useFieldContext();
+  return (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
+    isDisabled: ctx.disabled,
+    ...props,
+    children: children
+  });
+};
+;// ./src/components/Field/FieldControl.tsx
+
+
+
+
+const FieldControlBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1lr2tz0"
+} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:8px;overflow:hidden;border:1px solid ", ({
+  status,
+  theme
+}) => {
+  if (status === 'error') return theme.colors.red;
+  if (status === 'success') return theme.colors.greenLighter;
+  return theme.colors.grey;
+}, ";background:", ({
+  disabled,
+  theme
+}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";&>*{background:transparent;}&:active,&:hover{background:", ({
+  disabled,
+  theme
+}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";box-shadow:none;}&:hover{cursor:", ({
+  disabled
+}) => disabled ? 'default' : 'pointer', ";}&:focus-within,&:active{border-color:", ({
+  status,
+  disabled,
+  theme
+}) => {
+  if (disabled) return theme.colors.grey;
+  if (status === 'error') return theme.colors.red;
+  if (status === 'success') return theme.colors.greenLighter;
+  return theme.colors.blueRoyal;
+}, ";}" + ( true ? "" : 0));
+const isForwardRefComponent = component => {
+  if (typeof component.type === 'object' && component.type.$$typeof?.toString() === 'Symbol(react.forward_ref)') {
+    return true;
+  }
+  return false;
+};
+const FieldControl = /*#__PURE__*/external_react_default().forwardRef(function FieldControl({
+  children,
+  controlRef,
+  ...props
+}, ref) {
+  const ctx = useFieldContext();
+  const baseProps = {
+    ...props,
+    ...ctx
+  };
+  const internalRef = (0,external_react_namespaceObject.useRef)(null);
+  let _children = typeof children === 'function' ? children(ctx) : children;
+  if (ctx.forwardFocus && /*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(_children) && isForwardRefComponent(_children)) {
+    const setRef = defaultRef => element => {
+      internalRef.current = element;
+      if (defaultRef) {
+        if (typeof defaultRef === 'function') {
+          defaultRef(element);
+        } else {
+          defaultRef.current = element;
+        }
+      }
+    };
+    _children = /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(_children, {
+      ref: setRef(children.ref)
+    });
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FieldControlBase, {
+    ...baseProps,
+    ref: ref,
+    onClick: event => {
+      baseProps.onClick?.(event);
+      if (controlRef) {
+        controlRef.current?.focus?.();
+      } else if (internalRef.current) {
+        internalRef.current?.focus?.();
+      }
+    },
+    children: _children
+  });
+});
+;// ./src/components/Field/index.ts
+
+
+
+
+
+
 ;// ./src/components/TableFilters/styles.ts
 function TableFilters_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)."; }
 
@@ -10540,6 +10941,522 @@ const Filters = ({
 };
 ;// ./src/components/Filters/index.ts
 
+;// ./src/components/Field/FieldDescription.tsx
+
+
+
+const FieldDescription = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'basic') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "basic",
+    children: children
+  });
+};
+;// ./src/components/Field/FieldError.tsx
+
+
+
+const FieldError = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'error') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "error",
+    children: children
+  });
+};
+;// ./src/components/Field/FieldSuccess.tsx
+
+
+
+const FieldSuccess = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'success') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "success",
+    children: children
+  });
+};
+;// ./src/components/FiltersMultiSelect/useFiltersMultiSelect.tsx
+
+function useFilterMultiSelect({
+  opened,
+  defaultOpened,
+  selectedFilters,
+  defaultSelectedFilters,
+  search,
+  defaultSearch,
+  onChange,
+  onOpenedChange,
+  onDropdownClose,
+  onDropdownOpen,
+  onSearchChange
+} = {}) {
+  const [_opened, setOpened] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: opened,
+    defaultValue: defaultOpened,
+    finalValue: false,
+    onChange: onOpenedChange
+  });
+  const [_selectedFilters, setSelectedFilters] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: selectedFilters,
+    defaultValue: defaultSelectedFilters,
+    finalValue: [],
+    onChange
+  });
+  const [_search, setSearch] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: search,
+    defaultValue: defaultSearch,
+    finalValue: '',
+    onChange: onSearchChange
+  });
+  const toggleDropdown = open => {
+    const _open = open ?? !_opened;
+    setOpened(_open);
+    if (_open) {
+      onDropdownOpen?.();
+    } else {
+      onDropdownClose?.();
+    }
+  };
+  const selectFilters = (...filters) => {
+    const filtersArray = Array.isArray(filters) ? filters : [filters];
+    const newFilters = [..._selectedFilters];
+    filtersArray.forEach(filter => {
+      const index = newFilters.findIndex(f => f.id === filter.id);
+      if (index === -1) {
+        newFilters.push(filter);
+      } else if (newFilters[index].type !== filter.type) {
+        newFilters[index] = filter;
+      }
+    });
+    setSelectedFilters(newFilters);
+  };
+  const unselectFilters = (...filters) => {
+    const filtersArray = Array.isArray(filters) ? filters : [filters];
+    const newFilters = _selectedFilters.filter(f => !filtersArray.includes(f));
+    setSelectedFilters(newFilters);
+  };
+  const isSelected = id => _selectedFilters.find(f => f.id === id);
+  return {
+    opened: _opened,
+    selectedFilters: _selectedFilters,
+    search: _search,
+    toggleDropdown,
+    selectFilters,
+    unselectFilters,
+    isSelected,
+    setSearch
+  };
+}
+;// ./src/components/FiltersMultiSelect/FiltersMultiSelectProvider.tsx
+
+const [FiltersMultiSelectProvider, useFiltersMultiSelectContext] = (0,hooks_namespaceObject.createSafeContext)('useFiltersMultiSelect must be used within a FiltersMultiSelectProvider');
+;// ./src/components/FiltersMultiSelect/components/FilterBadge.tsx
+
+
+
+
+
+const FilterBadge = ({
+  type,
+  disabled,
+  className,
+  withRemoveButton,
+  onRemove,
+  children
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const colors = {
+    include: {
+      light: theme.colors.greenLighter,
+      main: theme.colors.green,
+      text: theme.colors.greenDark
+    },
+    exclude: {
+      light: theme.colors.redLighter,
+      main: theme.colors.red,
+      text: theme.colors.redDark
+    },
+    group: {
+      light: theme.colors.blueLighter,
+      main: theme.colors.blue,
+      text: theme.colors.blue
+    }
+  };
+  const mixTarget = disabled ? theme.colors.greyLighter : theme.colors.white;
+  const mixIfDisabled = color => disabled ? `color-mix(in srgb, ${color}, ${mixTarget})` : color;
+  return (0,jsx_runtime_namespaceObject.jsxs)(Badge_Badge, {
+    className: className,
+    "data-filter-type": type,
+    css: /*#__PURE__*/(0,react_namespaceObject.css)("cursor:default;font-weight:500;font-size:14px;display:flex;align-items:center;gap:10px;padding:0 12px;height:32px;border-radius:24px;border:1px solid transparent;box-shadow:none;background:linear-gradient(\n              295.98deg,\n              color-mix(in srgb, ", colors[type].light, " 6%, ", mixTarget, ") 16.38%,\n              color-mix(in srgb, ", colors[type].main, " 6%, ", mixTarget, ") 83.62%\n            ) padding-box,linear-gradient(\n              295.98deg,\n              ", mixIfDisabled(colors[type].light), " 16.38%,\n              ", mixIfDisabled(colors[type].main), " 83.62%\n            ) border-box;color:", mixIfDisabled(colors[type].text), ";& svg{path{stroke:", mixIfDisabled(colors[type].text), ";stroke-width:1;}}" + ( true ? "" : 0),  true ? "" : 0),
+    children: [children, withRemoveButton && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+      variant: "tertiary",
+      isDisabled: disabled,
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        padding: 0,
+        cursor: disabled ? 'default' : 'pointer'
+      },  true ? "" : 0,  true ? "" : 0),
+      onClick: e => {
+        e.stopPropagation();
+        onRemove?.();
+      },
+      endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: "cross",
+        role: "button",
+        size: 12
+      })
+    })]
+  });
+};
+;// ./src/components/FiltersMultiSelect/components/FiltersMultiSelectEmpty.tsx
+
+function FiltersMultiSelectEmpty_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 FiltersMultiSelectEmptyBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1ldbojn0"
+} : 0)( true ? {
+  name: "var55v",
+  styles: "padding:12px;text-align:center;font-weight:500;font-size:13.33px"
+} : 0);
+const FiltersMultiSelectEmpty = ({
+  children,
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsx)(FiltersMultiSelectEmptyBase, {
+  ...props,
+  children: children
+});
+;// ./src/components/FiltersMultiSelect/FiltersMultiSelect.tsx
+
+function FiltersMultiSelect_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 FiltersMultiSelect_ref =  true ? {
+  name: "w1nxbg",
+  styles: "padding:6px 14px"
+} : 0;
+var FiltersMultiSelect_ref2 =  true ? {
+  name: "1a5utpy",
+  styles: "gap:8px;flex-wrap:wrap;flex-grow:1"
+} : 0;
+var FiltersMultiSelect_ref3 =  true ? {
+  name: "chpy5q",
+  styles: "with:auto;border:0 !important;padding:2px 0;height:32px;border-radius:0"
+} : 0;
+var FiltersMultiSelect_ref4 =  true ? {
+  name: "2f908b",
+  styles: "& path{stroke-width:1;}"
+} : 0;
+var FiltersMultiSelect_ref5 =  true ? {
+  name: "1d3w5wq",
+  styles: "width:100%"
+} : 0;
+const FiltersMultiSelect = ({
+  children,
+  description,
+  disabled,
+  emptyNode: controlledEmptyNode,
+  error,
+  icon,
+  inputProps,
+  label,
+  placeholder,
+  searchable = true,
+  selectedFilters: controlledSelectedFilters,
+  status,
+  store: controlledStore,
+  success,
+  badgeClassName,
+  inputClassName,
+  wrapperClassName,
+  onChange,
+  register
+}) => {
+  const id = (0,external_react_namespaceObject.useId)();
+  const [wrapperRef] = (0,hooks_namespaceObject.useResizeObserver)();
+  const inputRef = (0,external_react_namespaceObject.useRef)(null);
+  const uncontrolledStore = useFilterMultiSelect({
+    selectedFilters: controlledSelectedFilters,
+    onChange
+  });
+  const store = controlledStore || uncontrolledStore;
+  const {
+    selectedFilters
+  } = store;
+  const emptyNode = controlledEmptyNode || (0,jsx_runtime_namespaceObject.jsx)(FiltersMultiSelectEmpty, {
+    children: "No Items Found"
+  });
+  return (0,jsx_runtime_namespaceObject.jsx)(FiltersMultiSelectProvider, {
+    value: {
+      store,
+      emptyNode
+    },
+    children: (0,jsx_runtime_namespaceObject.jsxs)(FieldRoot, {
+      disabled: disabled,
+      status: status,
+      children: [label && (0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+        htmlFor: `formElement-search-${id}`,
+        children: label
+      }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
+        controlRef: inputRef,
+        children: (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+          floatingOptions: {
+            onOpenChange: (open, event, reason) => {
+              if (disabled) return;
+              if (reason === 'click' && event?.target === wrapperRef.current || ['outside-press', 'escape-key'].includes(reason || '')) {
+                store.toggleDropdown(open);
+              }
+            },
+            open: store.opened
+          },
+          children: [(0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+            asChild: true,
+            children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+              css: FiltersMultiSelect_ref,
+              ref: wrapperRef,
+              className: wrapperClassName,
+              children: [(0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+                css: FiltersMultiSelect_ref2,
+                children: [icon, selectedFilters.map(filter => (0,jsx_runtime_namespaceObject.jsx)(FilterBadge, {
+                  className: badgeClassName,
+                  type: filter.type,
+                  disabled: disabled,
+                  withRemoveButton: true,
+                  onRemove: () => store.unselectFilters(filter),
+                  children: filter.label
+                }, filter.id)), searchable && (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
+                  className: inputClassName,
+                  name: `search-${id}`,
+                  register: register,
+                  placeholder: placeholder,
+                  disabled: disabled,
+                  status: "custom",
+                  inputProps: {
+                    onChange: e => store.setSearch(e.target.value),
+                    onFocus: () => store.toggleDropdown(true),
+                    onKeyUp: e => {
+                      if (e.key === 'Escape') {
+                        inputRef.current?.blur();
+                      }
+                    },
+                    autoComplete: 'off',
+                    ...inputProps
+                  },
+                  ref: inputRef,
+                  wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+                    name: "1sblf6",
+                    styles: "width:auto!important;flex-grow:1"
+                  } : 0),
+                  css: FiltersMultiSelect_ref3
+                })]
+              }), (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+                "data-testid": "clear-all-filters",
+                variant: "tertiary",
+                isDisabled: disabled,
+                css: /*#__PURE__*/(0,react_namespaceObject.css)({
+                  height: '32px',
+                  display: disabled || !store.selectedFilters.length ? 'none' : 'inline-flex',
+                  cursor: disabled ? 'default' : 'pointer'
+                },  true ? "" : 0,  true ? "" : 0),
+                onClick: () => store.unselectFilters(...store.selectedFilters),
+                endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+                  name: "cross",
+                  role: "button",
+                  size: 12,
+                  css: FiltersMultiSelect_ref4
+                })
+              }), store.opened ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+                name: "carrot-up",
+                size: 12
+              }) : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+                name: "carrot-down",
+                size: 12
+              })]
+            })
+          }), (0,jsx_runtime_namespaceObject.jsx)(PopoverContent, {
+            css: /*#__PURE__*/(0,react_namespaceObject.css)({
+              width: wrapperRef.current?.clientWidth,
+              zIndex: 100
+            },  true ? "" : 0,  true ? "" : 0),
+            isFocusManagerDisabled: true,
+            children: (0,jsx_runtime_namespaceObject.jsx)(PopoverDescription, {
+              css: FiltersMultiSelect_ref5,
+              children: children
+            })
+          })]
+        })
+      }), (0,jsx_runtime_namespaceObject.jsx)(FieldDescription, {
+        children: description
+      }), (0,jsx_runtime_namespaceObject.jsx)(FieldError, {
+        children: error
+      }), (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
+        children: success
+      })]
+    })
+  });
+};
+;// ./src/components/FiltersMultiSelect/components/FiltersMultiSelectOption.tsx
+
+function FiltersMultiSelectOption_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 FiltersMultiSelectOptionBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1a919p41"
+} : 0)("padding:12px;height:42px;font-weight:500;font-size:13.33px;display:flex;align-items:center;justify-content:space-between;&:hover{background:", ({
+  theme
+}) => theme.colors.blueRoyal6, ";}" + ( true ? "" : 0));
+const FilterButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "e1a919p40"
+} : 0)( true ? {
+  name: "hgien2",
+  styles: "padding:0 4px;&:not(:disabled):hover{svg{path{stroke-width:2;}}}"
+} : 0);
+var FiltersMultiSelectOption_ref =  true ? {
+  name: "1eoy87d",
+  styles: "display:flex;justify-content:space-between"
+} : 0;
+const FiltersMultiSelectOption = ({
+  filter,
+  children,
+  selected
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const {
+    store
+  } = useFiltersMultiSelectContext();
+  const {
+    id,
+    label,
+    group
+  } = filter;
+  const selectedFilter = store.isSelected(filter.id);
+  const selectFilters = type => {
+    store.selectFilters({
+      id,
+      label,
+      type
+    });
+  };
+  const getIconName = type => {
+    let iconName;
+    switch (type) {
+      case 'group':
+        iconName = 'check-circle';
+        break;
+      case 'include':
+        iconName = 'plus-circle';
+        break;
+      case 'exclude':
+        iconName = 'minus-circle';
+        break;
+    }
+    if (selectedFilter?.type === type) {
+      iconName += '-inverted';
+    }
+    return iconName;
+  };
+  const Controls = () => (0,jsx_runtime_namespaceObject.jsx)("div", {
+    css: FiltersMultiSelectOption_ref,
+    children: group ? (0,jsx_runtime_namespaceObject.jsx)(FilterButton, {
+      variant: "tertiary",
+      isDisabled: selectedFilter?.type === 'group',
+      endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: getIconName('group'),
+        color: theme.colors.blue,
+        size: 20,
+        tooltip: "Add filter group"
+      }),
+      onClick: () => selectFilters('group')
+    }) : (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+      children: [(0,jsx_runtime_namespaceObject.jsx)(FilterButton, {
+        variant: "tertiary",
+        isDisabled: selectedFilter?.type === 'include',
+        endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: getIconName('include'),
+          color: theme.colors.greenDark,
+          size: 20,
+          tooltip: "Add include filter"
+        }),
+        onClick: () => selectFilters('include')
+      }), (0,jsx_runtime_namespaceObject.jsx)(FilterButton, {
+        variant: "tertiary",
+        isDisabled: selectedFilter?.type === 'exclude',
+        endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: getIconName('exclude'),
+          color: theme.colors.redDark,
+          size: 20,
+          tooltip: "Add exclude filter"
+        }),
+        onClick: () => selectFilters('exclude')
+      })]
+    })
+  });
+  return (0,jsx_runtime_namespaceObject.jsxs)(FiltersMultiSelectOptionBase, {
+    "aria-selected": selected ?? !!selectedFilter,
+    role: "option",
+    children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+      css: true,
+      children: children
+    }), (0,jsx_runtime_namespaceObject.jsx)(Controls, {})]
+  });
+};
+;// ./src/components/FiltersMultiSelect/components/FiltersMultiSelectOptions.tsx
+
+
+
+
+const FiltersMultiselectOptionsBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e4b1h580"
+} : 0)("display:flex;flex-direction:column;background:", ({
+  theme
+}) => theme.colors.white, ";border-radius:8px;overflow:hidden;box-shadow:-4px 4px 14px 0 ", ({
+  theme
+}) => theme.colors.greyDarker14, ";" + ( true ? "" : 0));
+const FiltersMultiSelectOptions = ({
+  children,
+  ...props
+}) => {
+  const ctx = useFiltersMultiSelectContext();
+  const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
+  return (0,jsx_runtime_namespaceObject.jsx)(FiltersMultiselectOptionsBase, {
+    role: "listbox",
+    ...props,
+    children: childrenArray.length ? childrenArray : ctx.emptyNode
+  });
+};
+;// ./src/components/FiltersMultiSelect/index.ts
+
+
+
+
+
 ;// ./src/components/Icon/index.ts
 
 
@@ -11643,62 +12560,79 @@ const LegendItem = ({
 ;// ./src/components/Charts/SegmentedPieChart/hooks/useData.ts
 
 
+
 const useData = ({
   data,
   pieChartColors = defaultPieChartColors,
-  legendValueRoundingDigits
+  legendValueRoundingDigits,
+  legendBackgrounds
 }) => {
-  let calculatedTotalAmount = 0;
-  const dataLocal = Array.isArray(data) ? data : [];
-  const pieChartColorsLocal = Array.isArray(pieChartColors) ? pieChartColors : [[]];
-  dataLocal?.forEach(item => {
-    calculatedTotalAmount += Number(item.value);
-  });
+  const {
+    isFullscreenMode
+  } = useFullscreenMode();
+  const safeData = Array.isArray(data) ? data : [];
+  const safeColors = Array.isArray(pieChartColors) ? pieChartColors : [[]];
+  const totalAmount = safeData.reduce((acc, item) => acc + Number(item.value), 0);
+  const getRoundingDigits = item => (0,utils_namespaceObject.propOr)(legendValueRoundingDigits, 'legendValueRoundingDigits')(item);
   const balanceDataForTheGraph = [];
   const balanceDataForTheLegend = [];
-  dataLocal?.forEach((item, itemIndex) => {
-    const mainPercentage = Number(item.value) * 100 / calculatedTotalAmount;
-    const newMainItem = {
-      value: item.value,
+  safeData.forEach((item, itemIndex) => {
+    const mainValue = Number(item.value);
+    const mainPercentage = totalAmount ? mainValue * 100 / totalAmount : 0;
+    const mainSlice = {
+      value: mainValue,
       label: item.label,
       percentage: mainPercentage,
       mainId: Number(item.id),
-      mainValue: item.value,
+      mainValue,
       legendLabel: item.legendLabel,
       legendValue: item.legendValue,
-      legendValueRoundingDigits: (0,utils_namespaceObject.propOr)(legendValueRoundingDigits, 'legendValueRoundingDigits')(item),
-      color: pieChartColorsLocal?.[itemIndex]?.[0],
+      legendValueRoundingDigits: getRoundingDigits(item),
+      color: safeColors?.[itemIndex]?.[0],
       id: `${itemIndex}0`
     };
-    balanceDataForTheLegend.push(newMainItem);
-    if (item.parts?.length) {
-      item.parts?.filter(part => !!part.value).forEach((part, partIndex) => {
-        const partPercentage = part.value * 100 / calculatedTotalAmount;
-        balanceDataForTheGraph.push({
-          value: part.value,
-          label: item.label,
-          percentage: mainPercentage,
-          mainId: Number(item.id),
-          mainValue: item.value,
-          legendLabel: item.legendLabel,
-          legendValue: item.legendValue,
-          legendValueRoundingDigits: (0,utils_namespaceObject.propOr)(legendValueRoundingDigits, 'legendValueRoundingDigits')(item),
-          color: pieChartColorsLocal?.[itemIndex]?.[partIndex],
-          id: `${itemIndex}${partIndex}`,
-          partIndex,
-          partLabel: part.label,
-          partPercentage: Number(partPercentage),
-          partValue: part.value,
-          partLegendValue: part.legendValue
-        });
-      });
+    const partedSlices = (item.parts || []).filter(part => !!part.value).map((part, partIndex) => {
+      const partValue = Number(part.value);
+      const partPercentage = totalAmount ? partValue * 100 / totalAmount : 0;
+      return {
+        value: partValue,
+        label: `${item.label}, ${part.label}`,
+        percentage: partPercentage,
+        mainId: Number(item.id),
+        mainValue: Number(item.value),
+        legendLabel: item.legendLabel,
+        legendValue: part.legendValue,
+        legendValueRoundingDigits: getRoundingDigits(item),
+        color: safeColors?.[itemIndex]?.[partIndex],
+        id: `${itemIndex}${partIndex}`,
+        partIndex,
+        partLabel: part.label,
+        partPercentage,
+        partValue,
+        partLegendValue: part.legendValue
+      };
+    });
+    if (partedSlices.length) {
+      balanceDataForTheGraph.push(...partedSlices);
+    } else {
+      balanceDataForTheGraph.push(mainSlice);
+    }
+    if (isFullscreenMode && partedSlices.length) {
+      balanceDataForTheLegend.push(...partedSlices);
     } else {
-      balanceDataForTheGraph.push(newMainItem);
+      balanceDataForTheLegend.push(mainSlice);
     }
   });
+  let legendColors;
+  if (isFullscreenMode) {
+    legendColors = balanceDataForTheLegend.map(item => item.color);
+  } else {
+    legendColors = legendBackgrounds || [];
+  }
   return {
     balanceDataForTheGraph,
-    balanceDataForTheLegend
+    balanceDataForTheLegend,
+    legendColors
   };
 };
 ;// ./src/components/Charts/SegmentedPieChart/SegmentedPieChart.tsx
@@ -11710,6 +12644,7 @@ function SegmentedPieChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have t
 
 
 
+
 var SegmentedPieChart_ref =  true ? {
   name: "1h72o96",
   styles: "h6{font-weight:700;}"
@@ -11718,11 +12653,7 @@ var SegmentedPieChart_ref2 =  true ? {
   name: "fddz1h",
   styles: "width:10px;height:10px"
 } : 0;
-var SegmentedPieChart_ref3 =  true ? {
-  name: "14q9ynm",
-  styles: "width:400px;margin:40px 120px"
-} : 0;
-const SegmentedPieChart = ({
+const SegmentedPieChartComponent = ({
   data,
   pieChartProps,
   pieChartLegendProps,
@@ -11741,13 +12672,18 @@ const SegmentedPieChart = ({
   renderTitleTooltipContent
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
+  const {
+    isFullscreenMode
+  } = useFullscreenMode();
   const {
     balanceDataForTheGraph,
-    balanceDataForTheLegend
+    balanceDataForTheLegend,
+    legendColors
   } = useData({
     data,
     legendValueRoundingDigits,
-    pieChartColors
+    pieChartColors,
+    legendBackgrounds
   });
   return (0,jsx_runtime_namespaceObject.jsx)(SegmentedPieChartProvider, {
     legendPercentageRoundingDigits: legendPercentageRoundingDigits,
@@ -11761,10 +12697,16 @@ const SegmentedPieChart = ({
     currency: currency,
     renderTitleTooltipContent: renderTitleTooltipContent,
     tooltipConfig: tooltipConfig,
-    children: (0,jsx_runtime_namespaceObject.jsx)(PieChart, {
+    children: (0,jsx_runtime_namespaceObject.jsx)(PieChartComponent, {
       data: balanceDataForTheGraph,
       animate: true,
-      css: SegmentedPieChart_ref3,
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        ...(isFullscreenMode ? {
+          padding: '20px'
+        } : {
+          margin: '40px 120px'
+        })
+      },  true ? "" : 0,  true ? "" : 0),
       isInteractive: true,
       activeInnerRadiusOffset: 0,
       activeOuterRadiusOffset: 0,
@@ -11775,7 +12717,7 @@ const SegmentedPieChart = ({
       ...pieChartProps,
       children: (0,jsx_runtime_namespaceObject.jsx)(PieChartLegend, {
         data: balanceDataForTheLegend,
-        backgroundColors: legendBackgrounds,
+        backgroundColors: legendColors,
         renderValue: props => (0,jsx_runtime_namespaceObject.jsx)(LegendItem, {
           ...props,
           legendValueRoundingDigits: props.legendValueRoundingDigits
@@ -11788,6 +12730,7 @@ const SegmentedPieChart = ({
     })
   });
 };
+const SegmentedPieChart = WithFullscreenMode(SegmentedPieChartComponent);
 ;// ./src/components/Charts/SegmentedPieChart/index.ts
 
 ;// ./src/components/Charts/BarLineComplexChart/colorPalette.ts
@@ -12270,29 +13213,29 @@ const BarLineComplexChartView = ({
     debouncedFn();
   };
   const handleHover = () => {
-    /**
-     * Show tooltip on hover
-     * event: Readonly<Plotly.PlotHoverEvent>
-     * - event = {}
-     * - points:
-     * Array<{
-     *   bbox: { x0: number; x1: number; y0: number; y1: number; };
-     *   curveNumber: number;
-     *   data: Plotly.Data;
-     *   fullData: Plotly.Data;
-     *   label: number;
-     *   pointIndex: number;
-     *   pointNumber: number;
-     *   value: number;
-     *   x: number;
-     *   y: number;
-     *   xaxis: string;
-     *   yaxis: string;
-     * }>
-     * - xaxes: Array<{}>
-     * - xvals: Array<number>
-     * - yaxes: Array<{}>
-     * - yvals: Array<number>
+    /**
+     * Show tooltip on hover
+     * event: Readonly<Plotly.PlotHoverEvent>
+     * - event = {}
+     * - points:
+     * Array<{
+     *   bbox: { x0: number; x1: number; y0: number; y1: number; };
+     *   curveNumber: number;
+     *   data: Plotly.Data;
+     *   fullData: Plotly.Data;
+     *   label: number;
+     *   pointIndex: number;
+     *   pointNumber: number;
+     *   value: number;
+     *   x: number;
+     *   y: number;
+     *   xaxis: string;
+     *   yaxis: string;
+     * }>
+     * - xaxes: Array<{}>
+     * - xvals: Array<number>
+     * - yaxes: Array<{}>
+     * - yvals: Array<number>
      */
     setIsOpen(false);
   };
@@ -13468,14 +14411,14 @@ var Typeahead_ref =  true ? {
   name: "1d3w5wq",
   styles: "width:100%"
 } : 0;
-/**
- * The structure of the component:
- * - TypeaheadTrigger
- * - TypeaheadOptions
- * - FormHelperText
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+/**
+ * The structure of the component:
+ * - TypeaheadTrigger
+ * - TypeaheadOptions
+ * - FormHelperText
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  **/
 const Typeahead = ({
   name = 'typeahead-search',
@@ -13906,6 +14849,8 @@ const WithVisibleUpToLG = (Component, styles) => {
 
 
 
+
+