@geotab/zenith 1.19.0 → 1.20.0-beta.0

package/README.md

@@ -40,6 +40,15 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+## 1.20.0
+
+ * Add feature to detect range value in DateRange
+ * Add possibility to prevent unchecking selection in SelectField
+ * Add icon IconLaptop and deprecated duplicated
+ * Audit: Feedback (Modal and Banner)
+ * Fix GroupsButton positioning
+ * Fix sort indicator in Table
+
 ## 1.19.0
 
  * New interface for dropdown component. For flat data displayed in dropdowns, you can now specify that all items in the dataset are considered selected

package/dist/banner/bannerMultipLine.js

@@ -20,6 +20,7 @@ const BannerMultiline = ({ children, header, type = "warning", icon, action, onC
     const { translate } = (0, useLanguage_1.useLanguage)();
     const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
     const bannerMessageClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__message");
+    const closeButtonClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__close-button");
     const contentRef = (0, react_1.useRef)(null);
     const text = (0, useNodeText_1.useNodeText)(contentRef);
     const linkClasses = (0, classNames_1.classNames)(["zen-banner__link", "zen-banner__link--" + type]);
@@ -30,6 +31,6 @@ const BannerMultiline = ({ children, header, type = "warning", icon, action, onC
         "zen-banner__block--multiline",
         "zen-banner__block--" + size
     ]);
-    return (0, jsx_runtime_1.jsx)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__multiline-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__header-container", children: [icon && header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__message-container", children: [icon && !header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { className: "zen-banner__icon-block--top-gap", type: type }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, title: text, className: (0, classNames_1.classNames)(["zen-banner__message", "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button zen-banner__close-button--top-gap", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), action && (0, jsx_runtime_1.jsx)("div", { className: "zen-banner__action zen-banner__action--multiline", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, onClick: action.onClick, children: action.text }) })] }) });
+    return (0, jsx_runtime_1.jsx)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__multiline-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__header-container", children: [icon && header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__message-container", children: [icon && !header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { className: "zen-banner__icon-block--top-gap", type: type }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, title: text, className: (0, classNames_1.classNames)(["zen-banner__message", "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button zen-banner__close-button--top-gap", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) }), action && (0, jsx_runtime_1.jsx)("div", { className: "zen-banner__action zen-banner__action--multiline", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, onClick: action.onClick, children: action.text }) })] })] }) });
 };
 exports.BannerMultiline = BannerMultiline;

package/dist/banner/bannerSingleLine.js

@@ -21,11 +21,12 @@ const BannerSingleLine = ({ children, header, type = "warning", icon, action, on
     const { translate } = (0, useLanguage_1.useLanguage)();
     const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
     const bannerMessageClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__message");
+    const closeButtonClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__close-button");
     const isMobile = (0, useMobile_1.useMobile)();
     const contentRef = (0, react_1.useRef)(null);
     const text = (0, useNodeText_1.useNodeText)(contentRef);
     const linkClasses = (0, classNames_1.classNames)(["zen-banner__link", "zen-banner__link--" + type]);
     const blockClassNames = (0, classNames_1.classNames)(["zen-banner", "zen-banner__block", bannerOptions.blockClassName, className || "", "zen-banner__block--" + size]);
-    return (0, jsx_runtime_1.jsx)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), action && (0, jsx_runtime_1.jsx)("div", { className: "zen-banner__action", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, onClick: action.onClick, children: action.text }) }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }) });
+    return (0, jsx_runtime_1.jsxs)("div", { className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), action && (0, jsx_runtime_1.jsx)("div", { className: "zen-banner__action", children: (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, onClick: action.onClick, children: action.text }) })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
 };
 exports.BannerSingleLine = BannerSingleLine;

package/dist/banner/typeIcon.js

@@ -17,7 +17,7 @@ const TypeIcon = ({ type, className }) => {
     }), []);
     const bannerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__icon-block");
     return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__icon-block", className || ""]), children: (0, react_1.createElement)(iconsByType[type], {
-            size: bannerDriveClassName ? "huger" : "huge",
+            size: bannerDriveClassName ? "huge" : "large",
             className: `zen-push__icon--${type}`
         }) });
 };

package/dist/dataGrid/withSortableColumns/columns/sortableColumnWrapper.js

@@ -16,25 +16,45 @@ const getSortButtonTitle = (sortDirection, title, translate) => {
 };
 const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
-    const iconTitle = getSortButtonTitle(sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending ? columnSortDirection_1.ColumnSortDirection.Descending : columnSortDirection_1.ColumnSortDirection.Ascending, tooltip, translate);
-    const icon = (0, react_1.useMemo)(() => sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending ? iconFilter3Asc_1.IconFilter3Asc : iconFilter3Desc_1.IconFilter3Desc, [sortDirection]);
-    const iconButton = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? textIconButton_1.ButtonIconPosition.Start : textIconButton_1.ButtonIconPosition.End, type: buttonType_1.ButtonType.Light, title: iconTitle });
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const isActive = isHovered || isFocused;
+    const iconTitle = getSortButtonTitle(isActive
+        ? sortDirection
+        : sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
+            ? columnSortDirection_1.ColumnSortDirection.Descending
+            : columnSortDirection_1.ColumnSortDirection.Ascending, tooltip, translate);
+    const icon = (0, react_1.useMemo)(() => {
+        if (isActive) {
+            return sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
+                ? iconFilter3Desc_1.IconFilter3Desc
+                : iconFilter3Asc_1.IconFilter3Asc;
+        }
+        return sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
+            ? iconFilter3Asc_1.IconFilter3Asc
+            : iconFilter3Desc_1.IconFilter3Desc;
+    }, [sortDirection, isActive]);
+    const iconButton = ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? textIconButton_1.ButtonIconPosition.Start : textIconButton_1.ButtonIconPosition.End, type: buttonType_1.ButtonType.Light, title: iconTitle }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
             "zen-sortable-column",
             isSortedBy ? `zen-sortable-column--active` : "",
             isMobile ? `zen-sortable-column--mobile` : ""
-        ]), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+        ]), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                 "zen-caption",
                 "zen-sortable-column__button",
                 "zen-sortable-column-button",
                 isSortedBy ? `zen-sortable-column-button--active` : "",
-                sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending ? "zen-sortable-column-button--dir-asc" : "zen-sortable-column-button--dir-desc"
+                sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
+                    ? "zen-sortable-column-button--dir-asc"
+                    : "zen-sortable-column-button--dir-desc"
             ]), title: iconTitle, "aria-label": iconTitle, onClick: () => {
                 onSortChange({
                     sortColumn: columnName,
-                    sortDirection: sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending ? columnSortDirection_1.ColumnSortDirection.Descending : columnSortDirection_1.ColumnSortDirection.Ascending
+                    sortDirection: sortDirection === columnSortDirection_1.ColumnSortDirection.Ascending
+                        ? columnSortDirection_1.ColumnSortDirection.Descending
+                        : columnSortDirection_1.ColumnSortDirection.Ascending
                 });
-            }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile ? iconButton : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-sortable-column-button__content zen-caption__content", children: title }), isMobile ? null : iconButton] }) }) });
+            }, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile ? iconButton : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-sortable-column-button__content zen-caption__content", children: title }), isMobile ? null : iconButton] }) }) }));
 };
 exports.SortableHeaderCell = SortableHeaderCell;
 class SortableColumnWrapper {

package/dist/dateRange/dateRange.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "./dateRange.less";
 import { IZenComponentProps } from "./../commonHelpers/zenComponent";
-import { IDateRangeValue, TDateRangeOption } from "./dateRangeUtils";
+import { IDateRangeValue, IDateRangeValueOptionalLabel, TDateRangeOption } from "./dateRangeUtils";
 import { TButton } from "../button/buttonType";
 interface IDateRangeBase extends IZenComponentProps {
     options: TDateRangeOption[];
@@ -24,13 +24,13 @@ interface IDateRangeBase extends IZenComponentProps {
 }
 export interface IDateRange extends IDateRangeBase {
     defaultValue: IDateRangeValue;
-    value: IDateRangeValue;
+    value: IDateRangeValueOptionalLabel;
     onChange: (value: IDateRangeValue) => void;
     allowUnsetValue?: false;
 }
 export interface IDateRangeUnsetValue extends IDateRangeBase {
     defaultValue?: IDateRangeValue;
-    value: IDateRangeValue | undefined;
+    value: IDateRangeValueOptionalLabel | undefined;
     onChange: (value: IDateRangeValue | undefined) => void;
     allowUnsetValue: true;
 }

package/dist/dateRange/dateRange.js

@@ -33,30 +33,33 @@ const parseLabel = (option, dateFormat, translate, toLacalFn) => {
 };
 exports.parseLabel = parseLabel;
 const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, options: optionsArg, type, id, disabled, dropDownTitle, hasApplyButton, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, withCalendar, lockStartDate, lockEndDate, timeSelect, error, allowUnsetValue = false }) => {
+    var _a;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isMobile = (0, useMobile_1.useMobile)();
     const drivePopupClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup");
     const driveWrapperClassName = (0, useDriveClassName_1.useDriveClassName)("zen-date-range-popup-wrapper");
     const [showMobileCalendar, setShowMobileCalendar] = (0, react_1.useState)(false);
     const { dateFormat, toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
-    const [selectedRange, setSelectedRange] = (0, react_1.useState)(value);
+    const optionsMap = (0, react_1.useMemo)(() => (0, getRangeOption_1.getOptionsPeriodMap)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
+    const [selectedRange, setSelectedRange] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value));
     const isDefaultState = !defaultValue && !selectedRange || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label);
     const isCustomDateOption = (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const prevIsOpenRef = (0, react_1.useRef)(false);
     const [customDate, setCustomDate] = (0, react_1.useState)((0, normalizeDates_1.normalizeDates)(value === null || value === void 0 ? void 0 : value.from.toISOString(), value === null || value === void 0 ? void 0 : value.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter));
     const triggerRef = (0, react_1.useRef)(null);
-    const [prevSelection, setPrevSelection] = (0, react_1.useState)(value);
+    const [prevSelection, setPrevSelection] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value));
     const componentId = (0, useUniqueId_1.useUniqueId)();
     const calendarLabel = translate(dateRangeInner_1.CUSTOM_CALENDAR_ID);
     const getCustomRange = (0, react_1.useCallback)(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
     const options = (0, react_1.useMemo)(() => (0, getRangeOption_1.getRangeOptionsArray)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === dateRangeInner_1.CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);
     const hasCustomOption = (0, react_1.useMemo)(() => options.find(option => option.id === dateRangeInner_1.CUSTOM_CALENDAR_ID) !== undefined, [options]);
+    const currentLabel = (_a = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)) === null || _a === void 0 ? void 0 : _a.label;
     const cssClass = (0, classNames_1.classNames)([
         "zen-date-range",
         error ? "zen-date-range--error" : "",
         className !== null && className !== void 0 ? className : "",
-        !defaultValue && !value || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === (value === null || value === void 0 ? void 0 : value.label) || type && type !== buttonType_1.ButtonType.Secondary ? "" : "zen-date-range--active"
+        !defaultValue && !value || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) === currentLabel || type && type !== buttonType_1.ButtonType.Secondary ? "" : "zen-date-range--active"
     ]);
     const title = (0, react_1.useMemo)(() => dropDownTitle || translate("Date range"), [dropDownTitle, translate]);
     const toggleVisibility = (0, react_1.useCallback)(() => setIsOpen(currentIsOpen => !currentIsOpen), []);
@@ -72,11 +75,12 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         return (0, exports.parseLabel)(rangeValue, dateFormat, translate, toLocalDateTime);
     }, [dateFormat, options, translate, toLocalDateTime]);
     (0, react_1.useEffect)(() => {
-        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (value === null || value === void 0 ? void 0 : value.label)) {
-            setSelectedRange(value);
-            setPrevSelection(value);
+        const currentValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value);
+        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentValue === null || currentValue === void 0 ? void 0 : currentValue.label)) {
+            setSelectedRange(currentValue);
+            setPrevSelection(currentValue);
         }
-    }, [prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, value]);
+    }, [optionsMap, prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, value]);
     const handleDateRangeSelection = (0, react_1.useCallback)((newVal) => {
         var _a, _b;
         const selection = options.find(option => option.id === newVal);
@@ -144,8 +148,9 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
     }, []);
     (0, react_1.useEffect)(() => {
         setCustomDate({ from: value === null || value === void 0 ? void 0 : value.from.toISOString(), to: value === null || value === void 0 ? void 0 : value.to.toISOString() });
-        setPrevSelection(value);
-    }, [value]);
+        const currentValue = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value);
+        setPrevSelection(currentValue);
+    }, [optionsMap, value]);
     const range = (0, react_1.useMemo)(() => ({ from: customDate.from, to: customDate.to }), [customDate.from, customDate.to]);
     const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(dateRangeInner_1.DateRangeInner, { id: id || componentId, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? (val) => {
             setCustomDate({ from: lockStartDate || val.from, to: lockEndDate || (lockStartDate ? val.to || val.from : val.to) });
@@ -183,7 +188,7 @@ const DateRange = ({ className, classNamePopup, defaultValue, value, onChange, o
         }
         prevIsOpenRef.current = isOpen;
     }, [isOpen]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { htmlType: "button", icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, type: type, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: getButtonLabel(value) }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { htmlType: "button", icon: iconCalendar_1.IconCalendar, iconPosition: textIconButton_1.ButtonIconPosition.Start, className: cssClass, type: type, disabled: disabled, onClick: toggleVisibility, ref: triggerRef, children: getButtonLabel((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, value)) }), isMobile ? memoizedMobileView : memoizedDesktopView, (0, jsx_runtime_1.jsx)(formFieldError_1.FormFieldError, { error: error })] });
 };
 exports.DateRange = DateRange;
 exports.TRANSLATIONS = [

package/dist/dateRange/dateRangeUtils.d.ts

@@ -7,6 +7,9 @@ interface IDateRange {
 export interface IDateRangeValue extends IDateRange {
     label: string;
 }
+export interface IDateRangeValueOptionalLabel extends IDateRange {
+    label?: string;
+}
 export interface IDateRangeOption {
     label: string;
     getRange: () => IDateRange;

package/dist/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import "./filtersBarPeriodPicker.less";
 import { IFiltersBarItem } from "../interfaces";
-import { IDateRangeValue, TDateRangeOption } from "../../../dateRange/dateRangeUtils";
+import { IDateRangeValue, IDateRangeValueOptionalLabel, TDateRangeOption } from "../../../dateRange/dateRangeUtils";
 import { IButton } from "../../../button/button";
 import { TDateDeformatter, TDateFormatter } from "../../../dateInputInner/dateInputInner";
 interface IFiltersBarDateRangePickerBase extends Pick<IButton, "type" | "disabled"> {
@@ -32,7 +32,7 @@ interface IFiltersBarDateRangePicker extends IFiltersBarDateRangePickerBase {
 interface IFiltersBarDateRangePickerUnsetValue extends IFiltersBarDateRangePickerBase {
     allowUnsetValue: true;
 }
-export interface IFiltersBarPeriodPicker extends IFiltersBarItem<IDateRangeValue, IFiltersBarDateRangePicker> {
+interface IFiltersBarPeriodPickerImp extends IFiltersBarItem<IDateRangeValueOptionalLabel | IDateRangeValue, IFiltersBarDateRangePicker> {
     props: IFiltersBarDateRangePicker;
     defaultState: IDateRangeValue;
     className?: string;
@@ -43,8 +43,11 @@ export interface IFiltersBarPeriodPicker extends IFiltersBarItem<IDateRangeValue
     */
     hasApplyButton?: boolean;
 }
-export type IPeriodPickerUnsetValue = IDateRangeValue | undefined;
-export interface IFiltersBarPeriodPickerUnsetValue extends IFiltersBarItem<IPeriodPickerUnsetValue, IFiltersBarDateRangePickerUnsetValue> {
+export interface IFiltersBarPeriodPicker extends Omit<IFiltersBarPeriodPickerImp, "onChange"> {
+    onChange: (state: IDateRangeValue) => void;
+}
+export type IPeriodPickerUnsetValue = IDateRangeValueOptionalLabel | IDateRangeValue | undefined;
+interface IFiltersBarPeriodPickerUnsetValueImp extends IFiltersBarItem<IPeriodPickerUnsetValue, IFiltersBarDateRangePickerUnsetValue> {
     props: IFiltersBarDateRangePickerUnsetValue;
     defaultState: IPeriodPickerUnsetValue;
     className?: string;
@@ -55,6 +58,9 @@ export interface IFiltersBarPeriodPickerUnsetValue extends IFiltersBarItem<IPeri
     */
     hasApplyButton?: boolean;
 }
+export interface IFiltersBarPeriodPickerUnsetValue extends Omit<IFiltersBarPeriodPickerUnsetValueImp, "onChange"> {
+    onChange: (state: IDateRangeValue | undefined) => void;
+}
 export declare const FiltersBarPeriodPicker: React.FC<IFiltersBarPeriodPicker | IFiltersBarPeriodPickerUnsetValue>;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/filtersBar/components/filtersBarPeriodPicker/filtersBarPeriodPicker.js

@@ -18,9 +18,10 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
     const { translate } = (0, useLanguage_1.useLanguage)();
     const { toLocalDateTime, toReverseOffsetDateTime, weekStartsOnSunday } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
     const id = (0, useUniqueId_1.useUniqueId)();
-    const [selectedRange, setSelectedRange] = (0, react_1.useState)(state);
+    const optionsMap = (0, react_1.useMemo)(() => (0, getRangeOption_1.getOptionsPeriodMap)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime), [optionsArg, toLocalDateTime, toReverseOffsetDateTime, translate, weekStartsOnSunday]);
+    const [selectedRange, setSelectedRange] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state));
     const filterBarLabelledId = (0, useUniqueId_1.useUniqueId)();
-    const [prevSelection, setPrevSelection] = (0, react_1.useState)(state);
+    const [prevSelection, setPrevSelection] = (0, react_1.useState)((0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state));
     const getCustomRange = (0, react_1.useCallback)(() => ({ from: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.from) || new Date(), to: (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.to) || new Date() }), [prevSelection]);
     const options = (0, react_1.useMemo)(() => (0, getRangeOption_1.getRangeOptionsArray)(optionsArg, translate, toLocalDateTime, weekStartsOnSunday ? "Sunday" : "Monday", toReverseOffsetDateTime, withCalendar || false, prevSelection && prevSelection.label === dateRangeInner_1.CUSTOM_CALENDAR_ID, prevSelection ? getCustomRange : undefined), [optionsArg, translate, toLocalDateTime, weekStartsOnSunday, toReverseOffsetDateTime, withCalendar, prevSelection, getCustomRange]);
     const hasCustomOption = (0, react_1.useMemo)(() => options.find(option => option.id === dateRangeInner_1.CUSTOM_CALENDAR_ID) !== undefined, [options]);
@@ -54,13 +55,14 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
         }
     }, [options, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, checkError, onChange, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, state === null || state === void 0 ? void 0 : state.from, state === null || state === void 0 ? void 0 : state.to]);
     (0, react_1.useEffect)(() => {
-        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (state === null || state === void 0 ? void 0 : state.label)) {
-            setSelectedRange(state);
-            setPrevSelection(state);
+        const currentState = (0, getRangeOption_1.getSelectedRangeFromValue)(optionsMap, state);
+        if ((prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) !== (currentState === null || currentState === void 0 ? void 0 : currentState.label)) {
+            setSelectedRange(currentState);
+            setPrevSelection(currentState);
         }
-        if (useSidePanelView && (defaultState === null || defaultState === void 0 ? void 0 : defaultState.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID && (state === null || state === void 0 ? void 0 : state.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID &&
+        if (useSidePanelView && (defaultState === null || defaultState === void 0 ? void 0 : defaultState.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID && (currentState === null || currentState === void 0 ? void 0 : currentState.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID &&
             (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label) === dateRangeInner_1.CUSTOM_CALENDAR_ID &&
-            defaultState.from.toISOString() === state.from.toISOString() && defaultState.to.toISOString() === state.to.toISOString()
+            defaultState.from.toISOString() === currentState.from.toISOString() && defaultState.to.toISOString() === currentState.to.toISOString()
             && customDate.from && customDate.to && (customDate.from !== defaultState.from.toISOString() || customDate.to !== defaultState.to.toISOString())) {
             const normalizedDates = (0, normalizeDates_1.normalizeDates)(defaultState.from.toISOString(), defaultState.to.toISOString(), disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter);
             const newRange = { from: new Date(normalizedDates.from), to: new Date(normalizedDates.to) };
@@ -69,21 +71,23 @@ const FiltersBarPeriodPicker = ({ props, hasApplyButton, className, useSidePanel
             setPrevSelection(updatedState);
             setCustomDate({ from: newRange.from.toISOString(), to: newRange.to.toISOString() });
         }
-    }, [prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, state, state === null || state === void 0 ? void 0 : state.label, defaultState, useSidePanelView, customDate.from, customDate.to, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
+    }, [prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.label, state, defaultState, useSidePanelView, customDate.from, customDate.to,
+        disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter, optionsMap]);
     const handleCustomDate = (0, react_1.useCallback)((value) => {
         const isHasError = !value.from || !value.to;
         checkError && checkError(isHasError);
         setSelectedRange({ label: dateRangeInner_1.CUSTOM_CALENDAR_ID, from: lockStartDate || value.from, to: lockEndDate || (lockStartDate ? value.to || value.from : value.to) });
         setCustomDate({ from: lockStartDate || value.from, to: lockEndDate || (lockStartDate ? value.to || value.from : value.to) });
         !isHasError && onChange({
-            label: dateRangeInner_1.CUSTOM_CALENDAR_ID, from: new Date((lockStartDate || value.from)), to: new Date((lockEndDate || (lockStartDate ? value.to || value.from : value.to)))
+            label: dateRangeInner_1.CUSTOM_CALENDAR_ID,
+            from: new Date((lockStartDate || value.from)),
+            to: new Date((lockEndDate || (lockStartDate ? value.to || value.from : value.to)))
         });
     }, [checkError, lockEndDate, lockStartDate, onChange]);
     const range = (0, react_1.useMemo)(() => ({ from: customDate.from, to: customDate.to }), [customDate.from, customDate.to]);
     const component = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(DateRangeInnerMemo, { id: `${id}-daterange`, options: options, onOptionSelect: handleDateRangeSelection, onCalendarSelect: hasCustomOption ? handleCustomDate : undefined, selection: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range: range, timeSelect: timeSelect, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter }) }), [id, options, handleDateRangeSelection, hasCustomOption, handleCustomDate, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.label, range, timeSelect, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter]);
     const popup = (0, react_1.useMemo)(() => {
         const commonProps = Object.assign(Object.assign({}, props), { hasApplyButton: useSidePanelView ? false : props.hasApplyButton || hasApplyButton, id: id, className: (0, classNames_1.classNames)(["zen-filters-bar-period-picker", useSidePanelView ? "zen-filters-bar-period-picker--full-width" : "", className !== null && className !== void 0 ? className : ""]), classNamePopup: (0, classNames_1.classNames)(["zen-filters-bar-period-picker__popup", useSidePanelView ? "zen-filters-bar-period-picker__popup--full-width" : "", classNamePopup || ""]), options: optionsArg });
-        // @ts-expect-error: Let's ignore a compile error. if value undefined, and a value is passed to the function undefined, it can be passed because the interface is IDateRangeUnsetValue
         return props.allowUnsetValue ? (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: true })) : (0, jsx_runtime_1.jsx)(dateRange_1.DateRange, Object.assign({}, commonProps, { value: state, onChange: onChange, defaultValue: defaultState, allowUnsetValue: false }));
     }, [props, useSidePanelView, id, className, classNamePopup, optionsArg, state, onChange, defaultState, hasApplyButton]);
     if (!options.length && !hasCustomOption) {

package/dist/filtersBar/components/filtersBarPeriodPicker/getRangeOption.d.ts

@@ -1,5 +1,5 @@
 import { TDayName } from "../../../calendar/dateUtils";
-import { IDateRangeOption, TDateRangeOption } from "../../../dateRange/dateRangeUtils";
+import { IDateRangeOption, TDateRangeOption, IDateRangeValueOptionalLabel } from "../../../dateRange/dateRangeUtils";
 export interface IDateRangeOptionId extends IDateRangeOption {
     id: string;
 }
@@ -34,4 +34,10 @@ export interface IDateRangeOptionsItem {
     hasSecondaryLabel: boolean;
 }
 export declare const getRangeOptionsArray: (initialOptions: TDateRangeOption[], translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date, customLabel?: boolean, isPrevRangeCustom?: boolean, customGetRangeOptions?: () => IDateRange) => IDateRangeOptionsItem[];
+export declare const getOptionsPeriodMap: (initialOptions: TDateRangeOption[], translate: (s: string) => string, toLocalDateTime: (date: Date | string) => Date, firstDayOfWeek?: TDayName, toReverseOffsetDateTime?: (date: Date | string) => Date) => Map<string, IDateRangeOptionId>;
+export declare const getSelectedRangeFromValue: (optionsMap: Map<string, IDateRangeOptionId>, value?: IDateRangeValueOptionalLabel) => {
+    label: string;
+    from: Date;
+    to: Date;
+} | undefined;
 export {};

package/dist/filtersBar/components/filtersBarPeriodPicker/getRangeOption.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRangeOptionsArray = exports.getRangeOption = void 0;
+exports.getSelectedRangeFromValue = exports.getOptionsPeriodMap = exports.getRangeOptionsArray = exports.getRangeOption = void 0;
 const dateRangeUtils_1 = require("../../../dateRange/dateRangeUtils");
+const dateRangeInner_1 = require("../../../dateRangeInner/dateRangeInner");
 const options = {
     "Today": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_TODAY_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
     "Yesterday": (translate, toLocalDateTime, _firstDayOfWeek, toReverseOffsetDateTime) => (0, dateRangeUtils_1.GET_YESTERDAY_OPTION)(toLocalDateTime, translate, toReverseOffsetDateTime),
@@ -55,3 +56,60 @@ const getRangeOptionsArray = (initialOptions, translate, toLocalDateTime, firstD
     return preparedOptions;
 };
 exports.getRangeOptionsArray = getRangeOptionsArray;
+const getOptionsPeriodMap = (initialOptions, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime) => {
+    const optionsArray = initialOptions.map(opt => getRangeOption(opt, translate, toLocalDateTime, firstDayOfWeek, toReverseOffsetDateTime))
+        .filter(option => !!option && option.id !== dateRangeInner_1.CUSTOM_CALENDAR_ID);
+    const optionsMap = new Map();
+    optionsArray.forEach(opt => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (opt.getRange) {
+            const range = opt.getRange();
+            const key = `${range.from.toISOString()}_${range.to.toISOString()}`;
+            if (optionsMap.has(key)) {
+                optionsMap.set(`${key}_${opt.id}`, Object.assign(Object.assign({}, opt), { getRange: () => range }));
+            }
+            else {
+                optionsMap.set(`${key}`, Object.assign(Object.assign({}, opt), { getRange: () => range }));
+            }
+            return;
+        }
+    });
+    return optionsMap;
+};
+exports.getOptionsPeriodMap = getOptionsPeriodMap;
+const getSelectedRangeFromValue = (optionsMap, value) => {
+    if (!value) {
+        return undefined;
+    }
+    const currentOption = optionsMap.get(`${value.from.toISOString()}_${value.to.toISOString()}`);
+    if (!currentOption || value.label === dateRangeInner_1.CUSTOM_CALENDAR_ID) {
+        return {
+            label: dateRangeInner_1.CUSTOM_CALENDAR_ID,
+            from: value.from,
+            to: value.to
+        };
+    }
+    function findValueByLabel(val) {
+        for (const [_, mapVal] of optionsMap.entries()) {
+            if (mapVal.id === val.label) {
+                const mapValRange = mapVal.getRange();
+                return mapValRange.from.getTime() === val.from.getTime() && mapValRange.to.getTime() === val.to.getTime() ? { id: mapVal.id, from: mapValRange.from, to: mapValRange.to } : undefined;
+            }
+        }
+        return undefined;
+    }
+    const optionToReturn = value.label && currentOption.id && value.label !== currentOption.id ? findValueByLabel(value) : undefined;
+    if (optionToReturn) {
+        return {
+            label: optionToReturn.id,
+            from: value.from,
+            to: value.to
+        };
+    }
+    return {
+        label: currentOption.id,
+        from: value.from,
+        to: value.to
+    };
+};
+exports.getSelectedRangeFromValue = getSelectedRangeFromValue;

package/dist/icons/iconAddPeople2.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import "./icon.less";
 import { IIcon } from "./icon";
+/**
+    @deprecated - will be removed in future releases
+    duplicate of **IconRemovePeople**, please use that instead
+*/
 export declare const IconAddPeople2: React.FC<IIcon>;

package/dist/icons/iconAddPeople2.js

@@ -5,6 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useUniqueId_1 = require("../commonHelpers/useUniqueId");
+/**
+    @deprecated - will be removed in future releases
+    duplicate of **IconRemovePeople**, please use that instead
+*/
 const IconAddPeople2 = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, useUniqueId_1.useUniqueId)();
     const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([

package/dist/icons/iconLaptop.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconLaptop: React.FC<IIcon>;

package/dist/icons/iconLaptop.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconLaptop = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useUniqueId_1 = require("../commonHelpers/useUniqueId");
+const IconLaptop = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = (0, useUniqueId_1.useUniqueId)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
+        "zen-icon",
+        (size ? `zen-icon--${size}` : ""),
+        className !== null && className !== void 0 ? className : ""
+    ]), [size, className]);
+    return (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconLaptop", children: [title ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v11h1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h1zm2 11h14V5H5zm-2 2v2h18v-2z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.25 13.063c0 .517-.403.937-.9.937s-.9-.42-.9-.937V7.437c0-.517.403-.937.9-.937s.9.42.9.938zM14.25 13.063c0 .517-.403.937-.9.937s-.9-.42-.9-.937v-4.22c0-.517.403-.937.9-.937s.9.42.9.938zM11.25 13.063c0 .517-.403.937-.9.937s-.9-.42-.9-.937V10.25c0-.518.403-.937.9-.937s.9.42.9.937z" })] });
+};
+exports.IconLaptop = IconLaptop;

package/dist/icons/iconRemovePeople.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconRemovePeople: React.FC<IIcon>;

package/dist/icons/iconRemovePeople.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconRemovePeople = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useUniqueId_1 = require("../commonHelpers/useUniqueId");
+const IconRemovePeople = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = (0, useUniqueId_1.useUniqueId)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
+        "zen-icon",
+        (size ? `zen-icon--${size}` : ""),
+        className !== null && className !== void 0 ? className : ""
+    ]), [size, className]);
+    return (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconRemovePeople", children: [title ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0M5.678 19c.71-2.909 3.092-5 6.322-5q.453 0 .879.053a1 1 0 0 0 .242-1.985A9 9 0 0 0 12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H12a1 1 0 1 0 0-2zm9.615-3.707a1 1 0 0 1 1.414 0L18 16.586l1.293-1.293a1 1 0 0 1 1.414 1.414L19.414 18l1.293 1.293a1 1 0 0 1-1.414 1.414L18 19.414l-1.293 1.293a1 1 0 0 1-1.414-1.414L16.586 18l-1.293-1.293a1 1 0 0 1 0-1.414", clipRule: "evenodd" })] });
+};
+exports.IconRemovePeople = IconRemovePeople;