@geotab/zenith 3.0.1 → 3.1.0

package/dist/groupsFilter/groupsFilter.js

@@ -29,23 +29,30 @@ const skeletonList_1 = require("../skeletonList/skeletonList");
 const chip_1 = require("../chip/chip");
 const searchInput_1 = require("../searchInput/searchInput");
 const chipStatusProvider_1 = require("../chip/chipStatusProvider");
+const mobileSheet_1 = require("../mobileSheet/mobileSheet");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const button_1 = require("../button/button");
+const footerButtons_1 = require("../footerButtons/footerButtons");
+const buttonType_1 = require("../button/buttonType");
 exports.groupsFilterTotalStateDefault = { groups: (0, groupsHelper_1.getDefaultFilterState)(), sideWide: false };
 // eslint-disable-next-line complexity
 const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithColor, onChange, initialFilterState, listLimit = 500, chip, chipIcon, chipId, chipName }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
+    const isMobile = (0, useMobile_1.useMobile)();
     const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
     const [groupPlaceHolder, setGroupPlaceHolder] = (0, react_1.useState)(translate("Groups"));
     const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.getInitialState)(translate, initialFilterState));
     const [uiState, dispatchUiState] = (0, react_1.useReducer)(uiStateReducer_1.uiStateReducer, uiStateReducer_1.uiInitialGroupsFilterState);
     const [dataItems, setDataItems] = (0, react_1.useState)([]);
     const inputRef = (0, react_1.useRef)(null);
+    const emptyInputRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const prevInitialState = (0, react_1.useRef)(initialFilterState);
     const prevSearchField = (0, react_1.useRef)("");
     const groupsFilterId = (0, react_1.useId)();
     const blocksMap = (0, react_1.useMemo)(() => [["builtInGroups", "userGroups"], ["advancedGroups", "builtInGroups", "userGroups"], ["builtInGroups", "userGroups"]], []);
-    const onOptionsToggle = () => { dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ToggleOpen, payload: undefined }); };
+    const onOptionsToggle = (0, react_1.useCallback)(() => { dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ToggleOpen, payload: undefined }); }, []);
     const handleSetStep = (0, react_1.useCallback)((newStep) => {
         var _a;
         uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
@@ -66,16 +73,24 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: true });
         uiState.step !== groupsFilterInterfaces_1.FilterMenuStep.Initial && handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
     }, [handleSetStep, uiState.step]);
-    const handleCancel = () => {
-        var _a;
+    const handleFocusOnClose = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        if (chip) {
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            !isMobile && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus());
+            isMobile && ((_c = emptyInputRef.current) === null || _c === void 0 ? void 0 : _c.focus());
+        }
+    }, [chip, isMobile]);
+    const handleCancel = (0, react_1.useCallback)(() => {
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
         dispatchState({ type: stateActionType_1.StateActionType.SetState, payload: state.frozenState });
         dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: state.frozenSideWideState });
         handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleApply = () => {
-        var _a;
+        handleFocusOnClose();
+    }, [state.frozenState, state.frozenSideWideState, handleSetStep, handleFocusOnClose]);
+    const handleApply = (0, react_1.useCallback)(() => {
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: "" });
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ClearUncheckedState, payload: undefined });
@@ -85,12 +100,12 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
         dispatchState({ type: stateActionType_1.StateActionType.FreezeState, payload: (0, stateReducerHelper_1.getCurrentState)(state) });
         dispatchState({ type: stateActionType_1.StateActionType.FreezeSideWide, payload: state.sideWideState });
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const handleReset = () => {
+        handleFocusOnClose();
+    }, [handleSetStep, state, handleFocusOnClose]);
+    const handleReset = (0, react_1.useCallback)(() => {
         dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
-    };
-    const handleChipClose = () => {
+    }, []);
+    const handleChipClose = (0, react_1.useCallback)(() => {
         dispatchState({ type: stateActionType_1.StateActionType.ResetSelection, payload: undefined });
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetIsOpen, payload: false });
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetSearchValue, payload: "" });
@@ -101,20 +116,20 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
         dispatchState({ type: stateActionType_1.StateActionType.FreezeState, payload: stateReducer_1.defaultPreparedFilterState });
         dispatchState({ type: stateActionType_1.StateActionType.FreezeSideWide, payload: false });
-    };
-    const handleCheckboxChange = (value) => {
+    }, [handleSetStep]);
+    const handleCheckboxChange = (0, react_1.useCallback)((value) => {
         if (value.partial) {
             dispatchState({ type: stateActionType_1.StateActionType.DeselectAllChildren, payload: value.id });
         }
         else {
             dispatchState({ type: stateActionType_1.StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
         }
-    };
-    const handleCheckboxItemClick = (id) => {
+    }, [dispatchState]);
+    const handleCheckboxItemClick = (0, react_1.useCallback)((id) => {
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: id });
         handleSetStep(id ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
-    };
-    const handleCheckboxItemAdjustmentClick = (value) => {
+    }, [dispatchUiState, handleSetStep]);
+    const handleCheckboxItemAdjustmentClick = (0, react_1.useCallback)((value) => {
         if (value.id === groupsFilterBox_1.ADVANCED_FILTER_ID) {
             const currentVal = value.state ? uiState.uncheckedAdvancedState : state.advancedFilterState;
             !value.state && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetUncheckedAdvancedState, payload: currentVal });
@@ -125,11 +140,11 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetUncheckedAdjustmentIds, payload: !value.state ?
                 [...uiState.uncheckedAdjustmentIds, value.id] : uiState.uncheckedAdjustmentIds.filter(id => id !== value.id) });
         dispatchState({ type: stateActionType_1.StateActionType.ChangeSelection, payload: { value: value.state, itemId: value.id } });
-    };
-    const basicHandleBackButtonClick = () => {
+    }, [dispatchState, dispatchUiState, state.advancedFilterState, state.frozenState.advancedFilterState, uiState.uncheckedAdvancedState, uiState.uncheckedAdjustmentIds]);
+    const basicHandleBackButtonClick = (0, react_1.useCallback)(() => {
         handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
-    };
-    const handleBackButtonClick = () => {
+    }, [handleSetStep]);
+    const handleBackButtonClick = (0, react_1.useCallback)(() => {
         const currentEl = uiState.currentAdjustmentId ? (0, stateReducerHelper_1.getGroupsTreeItem)(state, uiState.currentAdjustmentId) : undefined;
         if (!uiState.currentAdjustmentId || !(currentEl === null || currentEl === void 0 ? void 0 : currentEl.parent)) {
             basicHandleBackButtonClick();
@@ -138,20 +153,20 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         const isNotRoot = currentEl.parent.id && currentEl.parent.id !== groupsHelper_1.ENTIRE_ORGANIZATION_GROUP_ID;
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: isNotRoot ? currentEl.parent.id : undefined });
         handleSetStep(isNotRoot ? groupsFilterInterfaces_1.FilterMenuStep.Adjustment : groupsFilterInterfaces_1.FilterMenuStep.Initial);
-    };
-    const handleHomeButtonClick = () => {
+    }, [basicHandleBackButtonClick, handleSetStep, state, uiState.currentAdjustmentId]);
+    const handleHomeButtonClick = (0, react_1.useCallback)(() => {
         handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.Initial);
         uiState.currentAdjustmentId && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetCurrentAdjustmentId, payload: undefined });
-    };
-    const handleCurrentlySelectedClick = () => {
+    }, [handleSetStep, uiState.currentAdjustmentId, dispatchUiState]);
+    const handleCurrentlySelectedClick = (0, react_1.useCallback)(() => {
         handleSetStep(groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected);
-    };
-    const selectAllHandler = (isAllSelected) => {
+    }, [handleSetStep]);
+    const selectAllHandler = (0, react_1.useCallback)((isAllSelected) => {
         if (!uiState.currentAdjustmentId) {
             return;
         }
         dispatchState({ type: isAllSelected ? stateActionType_1.StateActionType.DeselectAllChildren : stateActionType_1.StateActionType.SelectAllChildren, payload: uiState.currentAdjustmentId });
-    };
+    }, [uiState.currentAdjustmentId, dispatchState]);
     const handleTriggerClick = () => {
         dispatchUiState({ type: uiStateActionType_1.UiStateActionType.ToggleOpen, payload: undefined });
     };
@@ -203,14 +218,15 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
         setGroupPlaceHolder(`${label}${separator}${selectedValuesLabel}`);
     }, [uiState.searchValue, uiState.step, blocksMap, state, isWithColor, listLimit, uiState.currentAdjustmentId,
         uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState, dataItems, translate]);
-    const getGroupsBox = () => (0, jsx_runtime_1.jsx)(groupsFilterBox_1.GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined, listLimit: listLimit });
+    const getGroupsBox = (0, react_1.useCallback)(() => (0, jsx_runtime_1.jsx)(groupsFilterBox_1.GroupsFilterBox, { step: uiState.step, currentId: uiState.currentAdjustmentId, isWithColor: isWithColor || false, state: state, search: uiState.searchValue, blocks: uiState.searchValue && uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial ? [] : blocksMap[uiState.step], onChange: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? handleCheckboxItemAdjustmentClick : handleCheckboxChange, onClick: handleCheckboxItemClick, uncheckedItems: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdjustmentIds : [], uncheckedAdvancedState: uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected ? uiState.uncheckedAdvancedState : undefined, listLimit: listLimit }), [blocksMap, handleCheckboxChange, handleCheckboxItemAdjustmentClick, handleCheckboxItemClick, isWithColor, listLimit, state, uiState.currentAdjustmentId, uiState.searchValue, uiState.step,
+        uiState.uncheckedAdjustmentIds, uiState.uncheckedAdvancedState]);
     const onSideWideChange = (newState) => { dispatchState({ type: stateActionType_1.StateActionType.SideWide, payload: newState }); };
     const onRelationChange = (newRelation) => { dispatchState({ type: stateActionType_1.StateActionType.Relation, payload: newRelation }); };
-    const getSearchResult = () => {
+    const getSearchResult = (0, react_1.useCallback)(() => {
         const result = (0, stateReducerHelper_1.getSearchResultFromObject)(state, uiState.searchValue);
         return result ? (result.builtInGroups.length + result.userGroups.length).toString() : "0";
-    };
-    const getAdvancedDialog = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(advancedGroupsFilter_1.AdvancedGroupsFilter, { isOpen: uiState.isOpenAdvancedFilter, onClose: handleAdvancedDialogClose, onApply: handleAdvancedDialogApply, state: state.advancedFilterState, getData: getAdvancedData, errorHandler: errorHandler, dataItems: dataItems }), [uiState.isOpenAdvancedFilter, handleAdvancedDialogClose, handleAdvancedDialogApply, dataItems, state.advancedFilterState, getAdvancedData, errorHandler]);
+    }, [state, uiState.searchValue]);
+    const getAdvancedDialog = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(advancedGroupsFilter_1.AdvancedGroupsFilter, { isOpen: uiState.isOpenAdvancedFilter, onClose: handleAdvancedDialogClose, onApply: handleAdvancedDialogApply, state: state.advancedFilterState, getData: getAdvancedData, errorHandler: errorHandler, dataItems: dataItems, isMobile: isMobile }), [uiState.isOpenAdvancedFilter, handleAdvancedDialogClose, handleAdvancedDialogApply, dataItems, state.advancedFilterState, getAdvancedData, errorHandler, isMobile]);
     (0, react_1.useEffect)(() => {
         if (!state.globalChanges) {
             return;
@@ -241,8 +257,19 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
             !(initialFilterState === null || initialFilterState === void 0 ? void 0 : initialFilterState.groups) && dispatchUiState({ type: uiStateActionType_1.UiStateActionType.SetStep, payload: groupsFilterInterfaces_1.FilterMenuStep.Initial });
         }
     }, [initialFilterState, state.groupsMap]);
-    (0, react_1.useEffect)(() => {
+    const handleReadyForFocus = (0, react_1.useCallback)((isCurrentOpen) => {
         var _a, _b, _c;
+        if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+            return;
+        }
+        if (!isCurrentOpen) {
+            (_b = emptyInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            return;
+        }
+        (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+    }, [inputRef]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
         if (!uiState.isOpen) {
             return;
         }
@@ -252,9 +279,9 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
             prevSearchField.current = uiState.searchValue;
         }
         else {
-            const firstFocusable = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
+            const firstFocusable = chip ? (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)[1] : (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.querySelector(focusableSelector_1.FOCUSABLE_SELECTOR);
             prevSearchField.current = "";
-            if (firstFocusable && !((_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.value)) {
+            if (firstFocusable && !((_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.value)) {
                 firstFocusable.focus();
             }
         }
@@ -285,8 +312,16 @@ const GroupsFilter = ({ fullSize, className, dataLoader, errorHandler, isWithCol
     (0, useEscape_1.useEscape)(triggerRef, handleEscape, uiState.isOpen);
     const selectedCount = (0, stateReducerHelper_1.getFrozenCount)(state);
     const isStateHasData = Object.keys(state.groupsMap).length > 0;
+    const isApplyDisabled = !(0, stateReducerHelper_1.isStateChanged)(state);
+    const memoizedContent = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-groups-filter-menu", isMobile ? "zen-groups-filter-menu--mobile" : ""]), ref: menuRef, children: [(chip || isMobile) ? (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-groups-filter__chip-input", onChange: onSearchChipChange, value: uiState.searchValue, ref: inputRef, id: groupsFilterId, placeholder: translate("Filter by group") }) }) : null, isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: isApplyDisabled, hasFooter: !isMobile, children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-groups-filter__waiting" })] }), [isMobile, chip, onSearchChipChange, uiState.searchValue, uiState.isLoadWithError, uiState.step, uiState.currentAdjustmentId, groupsFilterId, translate,
+        isStateHasData, handleCancel, handleApply, handleReset, isApplyDisabled, state, handleAdvancedDialogOpen, handleCurrentlySelectedClick, getSearchResult,
+        getGroupsBox, handleBackButtonClick, handleHomeButtonClick, selectAllHandler, basicHandleBackButtonClick]);
+    const memoizedFooterButtons = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(footerButtons_1.FooterButtons, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleApply, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: handleCancel, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: buttonType_1.ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", onClick: handleReset, children: translate("Clear") })] }), [handleApply, handleCancel, handleReset, isApplyDisabled, translate]);
+    const memoizedMobileView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsxs)(mobileSheet_1.MobileSheet, { label: translate("Organization groups filter"), triggerRef: triggerRef, isOpen: uiState.isOpen, onHidePanel: onOptionsToggle, onCloseClick: onOptionsToggle, preventFirstFocus: true, onReadyForFocus: handleReadyForFocus, children: [(0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Title, { children: translate("Filter by group") }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Content, { children: memoizedContent }), (0, jsx_runtime_1.jsx)(mobileSheet_1.MobileSheet.Footer, { children: memoizedFooterButtons })] }), [translate, uiState.isOpen, onOptionsToggle, handleReadyForFocus, memoizedContent, memoizedFooterButtons]);
+    const memoizedDesktopView = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup",
+            uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: memoizedContent }), [className, memoizedContent, onOptionsToggle, translate, uiState.isOpen, uiState.isOpenAdvancedFilter]);
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [chip ? (0, jsx_runtime_1.jsx)(chip_1.Chip, { status: selectedCount ? chipStatus || "active" : undefined, isOpen: uiState.isOpen, disabled: false, onClick: handleTriggerClick, onClose: selectedCount ? handleChipClose : undefined, triggerRef: triggerRef, icon: chipIcon, id: chipId, children: groupPlaceHolder !== translate("Groups") ? groupPlaceHolder : chipName })
-                : (0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), (0, jsx_runtime_1.jsx)(controlledPopup_1.ControlledPopup, { isOpen: uiState.isOpen, className: (0, classNames_1.classNames)(["zen-groups-filter__popup", uiState.isOpenAdvancedFilter ? "zen-groups-filter__popup--inactive" : "", className ? className : ""]), onOpenChange: onOptionsToggle, useTrapFocusWithTrigger: uiState.isOpenAdvancedFilter ? "off" : "withTrigger", shouldHoldScroll: true, triggerRef: triggerRef, ariaLabel: translate("Organization groups filter"), recalculateOnScroll: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu", ref: menuRef, children: [chip && (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", children: (0, jsx_runtime_1.jsx)(searchInput_1.SearchInput, { className: "zen-groups-filter__chip-input", onChange: onSearchChipChange, value: uiState.searchValue, ref: inputRef, id: groupsFilterId, placeholder: translate("Filter by group") }) }), isStateHasData && !uiState.isLoadWithError && (0, jsx_runtime_1.jsxs)(groupsFilterMenu_1.GroupsFilterMenu, { onCancelClick: handleCancel, onApplyClick: handleApply, onResetClick: handleReset, isApplyDisabled: !(0, stateReducerHelper_1.isStateChanged)(state), children: [uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Initial && (0, jsx_runtime_1.jsx)(groupsFilterInitialState_1.GroupsFilterInitialState, { siteWideState: state.sideWideState, onDialogButtonClick: handleAdvancedDialogOpen, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onSiteWideChange: onSideWideChange, onCurrentlySelectedClick: handleCurrentlySelectedClick, searchResult: uiState.searchValue ? getSearchResult() : "", children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.Adjustment && (0, jsx_runtime_1.jsx)(groupsFilterAdjustmentState_1.GroupsFilterAdjustmentState, { onBackButtonClick: handleBackButtonClick, onHomeButtonClick: handleHomeButtonClick, onSelectAllClick: selectAllHandler, backButtonName: (0, groupsFilterStatesHelper_1.getBackButtonName)(state, uiState.currentAdjustmentId), isAllSelected: (0, groupsFilterStatesHelper_1.isAllChildrenSelected)(state, uiState.currentAdjustmentId), children: getGroupsBox() }), uiState.step === groupsFilterInterfaces_1.FilterMenuStep.CurrentlySelected && (0, jsx_runtime_1.jsx)(groupsFilterCurrentlySelectedState_1.GroupsFilterCurrentlySelectedState, { siteWideState: state.sideWideState, relation: state.relation, count: (0, stateReducerHelper_1.getCurrentlySelectedCount)(state), onBackButtonClick: basicHandleBackButtonClick, onSiteWideChange: onSideWideChange, onRelationChange: onRelationChange, children: getGroupsBox() })] }), !uiState.isLoadWithError && !isStateHasData && !Object.keys(state.groupsMap).length && (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-groups-filter__waiting" })] }) }), uiState.isOpenAdvancedFilter && getAdvancedDialog] });
+                : (0, jsx_runtime_1.jsx)(groupsFilterTrigger_1.GroupsFilterTrigger, { value: uiState.searchValue, onChange: onSearchChange, isOpenPopup: uiState.isOpen, count: selectedCount, withGlobeIcon: state.frozenSideWideState && selectedCount > 0, inputRef: isMobile ? emptyInputRef : inputRef, handleClick: handleTriggerClick, ref: triggerRef, fullSize: fullSize, placeholder: groupPlaceHolder }), isMobile ? memoizedMobileView : memoizedDesktopView, uiState.isOpenAdvancedFilter && getAdvancedDialog] });
 };
 exports.GroupsFilter = GroupsFilter;
 exports.TRANSLATIONS = [

package/dist/groupsFilter/groupsFilterMenu.d.ts

@@ -6,6 +6,7 @@ export interface IGroupsFilterMenu extends IZenComponentProps {
     onApplyClick: () => void;
     onResetClick: () => void;
     isApplyDisabled: boolean;
+    hasFooter?: boolean;
 }
 export declare const GroupsFilterMenu: React.FC<IGroupsFilterMenu>;
 export declare const TRANSLATIONS: string[];

package/dist/groupsFilter/groupsFilterMenu.js

@@ -5,9 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const button_1 = require("../button/button");
 const buttonType_1 = require("../button/buttonType");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-const GroupsFilterMenu = ({ children, onCancelClick, onApplyClick, onResetClick, isApplyDisabled }) => {
+const GroupsFilterMenu = ({ children, onCancelClick, onApplyClick, onResetClick, isApplyDisabled, hasFooter }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__main-container body-04", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter-menu__content", children: children }), (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter-menu__separator zen-groups-filter-menu__separator--footer" }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onResetClick, type: buttonType_1.ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", title: translate("Clear"), children: translate("Clear") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancelClick, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] })] });
+    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__main-container body-04", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter-menu__content", children: children }), hasFooter ? (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter-menu__separator zen-groups-filter-menu__separator--footer" }) : null, hasFooter ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__footer", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onResetClick, type: buttonType_1.ButtonType.Tertiary, className: "zen-groups-filter-menu__reset-button zen-ellipsis", title: translate("Clear"), children: translate("Clear") }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-groups-filter-menu__button-group", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancelClick, className: "zen-groups-filter-menu__cancel-button zen-ellipsis", title: translate("Cancel"), children: translate("Cancel") }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onApplyClick, type: buttonType_1.ButtonType.Primary, disabled: isApplyDisabled, className: "zen-groups-filter-menu__apply-button zen-ellipsis", title: translate("Apply"), children: translate("Apply") })] })] }) : null] });
 };
 exports.GroupsFilterMenu = GroupsFilterMenu;
 exports.TRANSLATIONS = [

package/dist/groupsFilter/groupsFilterTrigger.js

@@ -38,7 +38,7 @@ const GroupsFilterTrigger = (_a) => {
         }
         handleClick();
     };
-    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-groups-filter__search-container", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: (0, classNames_1.classNames)(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: (0, jsx_runtime_1.jsx)(groupsFilterLabelBox_1.GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, "aria-hidden": "true", type: "button", className: "zen-groups-filter__popup-trigger", title: translate("Open filter"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
+    return (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classNames_1.classNames)(["zen-groups-filter"]), ref: ref }, otherProps, { onClick: clickHandler, role: "combobox", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-groups-filter__search-container", fullSize ? "zen-groups-filter__search-container--full-size" : "", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__input-container", onKeyDown: handleKeydown, children: (0, jsx_runtime_1.jsx)(textInputRaw_1.TextInputRaw, { value: value, placeholder: placeholder || translate("Filter by group"), className: (0, classNames_1.classNames)(["zen-groups-filter__input", count > 0 ? "zen-groups-filter__input--selected" : ""]), onChange: onChange, disabled: false, type: "text", ref: inputRef, id: groupsFilterId }) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-groups-filter__search-input zen-groups-filter__search-input--post", children: (0, jsx_runtime_1.jsx)(groupsFilterLabelBox_1.GroupsFilterLabelBox, { count: count, withGlobeIcon: withGlobeIcon }) })] }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onMouseDown: e => e.preventDefault(), "aria-hidden": "true", type: "button", className: "zen-groups-filter__popup-trigger", title: translate("Open filter"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpenPopup ? "zen-groups-filter__arrow-icon--up" : "zen-groups-filter__arrow-icon--down", size: "large" }) })] }));
 };
 exports.GroupsFilterTrigger = GroupsFilterTrigger;
 exports.GroupsFilterTrigger.displayName = "GroupsFilterTrigger";

package/dist/images/imageLooking.d.ts

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

package/dist/images/imageLooking.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageLooking = 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 ImageLooking = ({ className, title, description, focusable = false }) => {
+    const uniqueId = (0, useUniqueId_1.useUniqueId)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
+        "zen-svg-image",
+        className !== null && className !== void 0 ? className : ""
+    ]), [className]);
+    return (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 629 350", fill: "none", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "ImageLooking", 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.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("path", { id: "b", fill: "#FAFBFB", d: "M505.06 295.04c-67.58-27.57-85.23-53.95-135.16-54.22-19.17-.1-33.6 3.7-47.98 9.92 26.88-5.26 54.8-6.02 54.8 11.76.01 15.8-45.78 25.14-49.34 43.91-1.07 5.64 1.75 12.67 11.24 21.56a79.37 79.37 0 0 0 55.8 21.2 1381.31 1381.31 0 0 0 228.73-23.44c-51.28-6.64-90.47-19.42-118.1-30.7Z" }), (0, jsx_runtime_1.jsx)("path", { id: "c", fill: "#EBEDF0", d: "M86.84 308.45h2.4v5.71a1.2 1.2 0 0 1-2.4 0v-5.7Z" }), (0, jsx_runtime_1.jsx)("path", { id: "d", fill: "#EBEDF0", d: "M110.16 291.86c-.23-.2-.44-.42-.61-.67h.06c.06 0 .11-.02.16-.06a.28.28 0 0 0 0-.45 7.6 7.6 0 0 1-1.3-1.26h.59c.04 0 .09-.02.12-.04a.22.22 0 0 0 .08-.11.22.22 0 0 0-.08-.24 5.9 5.9 0 0 1-.97-.95l.25.01h.19c.03 0 .07-.02.1-.04a.18.18 0 0 0 .06-.2.18.18 0 0 0-.06-.08 4.72 4.72 0 0 1-1.54-2.07.2.2 0 0 0-.2-.14.2.2 0 0 0-.2.14 4.72 4.72 0 0 1-1.53 2.07.18.18 0 0 0-.06.2.18.18 0 0 0 .16.12 3 3 0 0 0 .43 0c-.28.34-.6.66-.97.93a.22.22 0 0 0 .13.4 4.63 4.63 0 0 0 .57 0c-.38.47-.81.9-1.3 1.26a.28.28 0 0 0 .17.51h.06c-.17.25-.38.48-.61.67a.27.27 0 0 0-.1.18.25.25 0 0 0 .06.2l.12.1a1 1 0 0 0 .84.23.28.28 0 0 1 .3.16 1.17 1.17 0 0 0 .68.6 1.02 1.02 0 0 0 1.06-.3.26.26 0 0 1 .2-.09.26.26 0 0 1 .19.09 1.03 1.03 0 0 0 1.46.06c.12-.1.22-.22.29-.36a.28.28 0 0 1 .3-.17 1.02 1.02 0 0 0 .95-.32.26.26 0 0 0-.04-.38Z" }), (0, jsx_runtime_1.jsx)("path", { id: "o", fill: "#EBEDF0", d: "M340.32 31.3h-.42a.41.41 0 0 0-.41.42v2.75c0 .23.18.41.41.41h.42c.23 0 .42-.18.42-.41v-2.75a.41.41 0 0 0-.42-.41Zm33.8-3.5h-.86a.47.47 0 0 0-.47.47v9.65c0 .26.2.47.47.47h.86c.26 0 .47-.21.47-.47v-9.65a.47.47 0 0 0-.47-.47Z" })] }), (0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#a)", children: [(0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M409.65 170.36c-34.48-40.83-45.98-67.01-71.45-68.22-31.2-1.47-48.26 36.2-99.65 88.26a565.12 565.12 0 0 1-91.53 75 832.64 832.64 0 0 0 212.52 27.41 835 835 0 0 0 169.01-17.2c-57.04-38.15-94.74-76.63-118.9-105.25Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FAFBFB", d: "M315.36 137.06c12.32 2.67 13.68 21.46 23.49 21.38 9.07-.07 11.51-16.18 22.27-16.74 8.57-.45 12.05 9.52 20.47 9.02 3.3-.2 6.23-1.94 8.77-4.39-20.73-26.83-32.13-43.24-52.16-44.19-22-1.04-36.97 17.4-61.91 46.6a9.9 9.9 0 0 0 3.3 1.98c11.18 3.9 22.06-16.62 35.77-13.66Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M528.55 275.62c-57.04-38.16-94.74-76.63-118.9-105.26-34.48-40.83-45.98-67.01-71.45-68.22a34.9 34.9 0 0 0-13.94 2.15c6.93.52 12.36 2.42 16.67 4.94 32.27 18.85 33.57 90.12 8.05 183.5a835 835 0 0 0 179.58-17.12Z", opacity: ".5", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M81.8 294.63c-.78-.07-1.56-.08-2.34-.04a10.64 10.64 0 0 0-11-14.32c-2.4.23-4.66 1.27-6.4 2.94a13.68 13.68 0 0 0-26.16 2.91 11.35 11.35 0 0 0-14.89 6.78 5.61 5.61 0 0 0-8.93 5.1h-.04A11.19 11.19 0 0 0 .87 309.59c.07 2.01.69 3.96 1.78 5.65 30.26 3.41 60.82 5.84 91.66 7.27a17.42 17.42 0 0 0-12.52-27.88Zm94.77 4a288 288 0 0 0 161.38-49.15c-12.9-.57-25.72-3.39-37.78-9.52-41.73-21.2-47.16-68.04-76.59-68.6-17.44-.34-26.14 15.9-63.72 54.52a844.44 844.44 0 0 1-65.74 60.83 289.43 289.43 0 0 0 82.45 11.92Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M300.17 239.96c-41.72-21.2-47.16-68.04-76.59-68.6-2.3-.07-4.62.21-6.85.83 4.19.97 8.14 2.78 11.6 5.31 21.6 16.02 22.01 62.1-.57 116.6a287.62 287.62 0 0 0 110.19-44.62c-12.9-.57-25.72-3.39-37.78-9.52Z", opacity: ".5", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("path", { fill: "#F4F6F7", d: "M439.35 201.27c-68.64-18.32-127.29 25.04-192.52 57.9a654.98 654.98 0 0 1-74.68 31.95A1380.57 1380.57 0 0 0 472.47 324c51.52 0 103-2.85 154.2-8.55-32.9-11.5-58.9-25.59-79.33-39.15-52.85-35.08-63.12-63.06-108-75.03Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M626.68 315.45c-32.9-11.5-58.9-25.59-79.34-39.15-52.85-35.08-63.12-63.06-108-75.03a127.84 127.84 0 0 0-23.24-3.97c24.4 8.63 29.27 15.46 29.27 20.16 0 16.92-53.09 26.39-107.42 37.57-53.28 10.97-57.8 43.6-114.51 46.48A1383.7 1383.7 0 0 0 472.47 324c51.52 0 103-2.85 154.2-8.55Z", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("path", { fill: "#F4F6F7", d: "M292.3 302.65c-53.86-18.83-66.8-58.85-114.46-57.56-33.2.9-41.99 23.35-107.61 47.73a953.58 953.58 0 0 1-67.91 22.37 1390.75 1390.75 0 0 0 156.52 8.8c63.71.02 127.34-4.35 190.45-13.07-23.15.78-41.92-3-57-8.27Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M349.3 310.92c-23.16.78-41.93-3-57-8.27-53.86-18.83-66.8-58.85-114.47-57.56a60.91 60.91 0 0 0-16.96 2.75c15.42 6.22 19.36 11.58 19.4 15.7.13 14.73-49.61 17.61-63.17 50.53a43.52 43.52 0 0 0-2.64 9.22 1388.06 1388.06 0 0 0 234.83-12.37Z", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M621 307.5a14.32 14.32 0 0 0-10.55-13.3c-1.96-.53-4-.65-6-.34a9.45 9.45 0 0 0-14.61-4.51 11.28 11.28 0 0 0-18.7-1.06 11.27 11.27 0 0 0-2.27 7.67 10.2 10.2 0 0 0-11.68 8.02 12.3 12.3 0 0 0-16.06 11.1c-.12 2.51.55 5 1.9 7.14 28.61-1.45 56.98-3.76 85.11-6.94a8.95 8.95 0 0 0-7.15-7.78Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M560.99 303.6c-.63 0-1.25.05-1.87.14v-.14a10.29 10.29 0 0 0-9.27-10.26c-1.68-.17-3.38.08-4.95.72a7.86 7.86 0 0 0-12.55-5.22 10.31 10.31 0 0 0-18.5 6.28v.03c-.2-.01-.4-.03-.62-.03a7.48 7.48 0 0 0-7.47 7.47l.01.22a12.65 12.65 0 0 0-14.91 13.95 12.62 12.62 0 0 0 3.3 7.06c26.44-.4 52.7-1.55 78.76-3.44A12.61 12.61 0 0 0 561 303.6Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M369.9 240.83c-49.05-.26-67.02 25.02-132.94 50.89-33.37 13.1-80.08 26.75-141.03 30.88a1382.25 1382.25 0 0 0 271.7 26.83c85.72.03 171.26-7.9 255.51-23.7-51.27-6.64-90.46-19.42-118.08-30.7-67.58-27.56-85.23-53.94-135.16-54.2Z" }), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#b" }), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#b", opacity: ".33", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsxs)("g", { fill: "#EBEDF0", style: { mixBlendMode: "multiply" }, children: [(0, jsx_runtime_1.jsx)("path", { d: "M417.26 327.42a26.4 26.4 0 0 1-3.81-5.23h.38c.46 0 .9 0 1.35-.03a1.28 1.28 0 0 0 1.15-.9 1.29 1.29 0 0 0-.43-1.38c-1.62-1.25-3.12-3.12-4.49-4.73h.2c.36 0 .71 0 1.06-.02a1 1 0 0 0 .57-1.79 26.46 26.46 0 0 1-4.32-4.2 15.28 15.28 0 0 0 1.91.03.8.8 0 0 0 .45-1.43 21.07 21.07 0 0 1-6.86-9.24.94.94 0 0 0-1.74 0 21.06 21.06 0 0 1-6.86 9.24.8.8 0 0 0 .44 1.43 15.73 15.73 0 0 0 1.92-.02 26.43 26.43 0 0 1-4.32 4.2 1 1 0 0 0 .56 1.78c.35.02.7.03 1.06.03h.2c-1.36 1.6-2.86 3.47-4.48 4.72a1.28 1.28 0 0 0 .72 2.28c.44.02.9.04 1.34.04l.39-.01a26.36 26.36 0 0 1-3.82 5.23 1.1 1.1 0 0 0 .02 1.58c.32.28.69.5 1.08.65.7.25 1.45.27 2.15.08a.97.97 0 0 1 1.16.61 3.54 3.54 0 0 0 3.2 2.44c.73 0 1.45-.21 2.06-.63a.95.95 0 0 1 1.28.2 3.4 3.4 0 0 0 5.54 0 .95.95 0 0 1 1.28-.2c.6.42 1.33.63 2.06.63a3.55 3.55 0 0 0 3.2-2.44.97.97 0 0 1 1.15-.61 3.51 3.51 0 0 0 3.23-.73 1.13 1.13 0 0 0 .34-.78 1.1 1.1 0 0 0-.32-.8Z", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("path", { d: "M400.79 324.54h5.52v13.12a2.75 2.75 0 0 1-2.76 2.76 2.77 2.77 0 0 1-2.76-2.76v-13.12Z", style: { mixBlendMode: "multiply" } })] }), (0, jsx_runtime_1.jsxs)("g", { fill: "#EBEDF0", style: { mixBlendMode: "multiply" }, children: [(0, jsx_runtime_1.jsx)("path", { d: "M382.67 294.3h2.4v5.72a1.2 1.2 0 0 1-2.4 0v-5.71Z", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("path", { d: "M390.92 295.04a7.54 7.54 0 0 1-1.37-1.49h.13a.64.64 0 0 0 .36-1.14 16.92 16.92 0 0 1-2.88-2.83 10.24 10.24 0 0 0 1.27.01.5.5 0 0 0 .45-.34.5.5 0 0 0-.17-.55c-.8-.62-1.52-1.32-2.16-2.1a8 8 0 0 0 .96.01.4.4 0 0 0 .22-.71 10.53 10.53 0 0 1-3.43-4.63.47.47 0 0 0-.87 0 10.52 10.52 0 0 1-3.43 4.63.4.4 0 0 0-.13.43.4.4 0 0 0 .36.28 7.35 7.35 0 0 0 .96 0c-.64.77-1.37 1.47-2.16 2.09a.5.5 0 0 0-.17.54.5.5 0 0 0 .45.35 10.29 10.29 0 0 0 1.27-.01c-.84 1.05-1.81 2-2.88 2.83a.63.63 0 0 0 0 1c.1.08.22.13.35.14h.14a7.59 7.59 0 0 1-1.37 1.49.57.57 0 0 0-.22.4.58.58 0 0 0 .14.45 2.64 2.64 0 0 0 1.14.69c.32.08.66.1 1 .03a.62.62 0 0 1 .66.36 2.62 2.62 0 0 0 1.53 1.34 2.3 2.3 0 0 0 2.37-.66.59.59 0 0 1 .43-.2.6.6 0 0 1 .43.2 2.3 2.3 0 0 0 3.27.15c.26-.23.48-.51.63-.83a.62.62 0 0 1 .67-.36 2.28 2.28 0 0 0 2.13-.72.57.57 0 0 0 .14-.44.6.6 0 0 0-.22-.4Z", style: { mixBlendMode: "multiply" } })] }), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#c" }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M95.09 309.19a7.58 7.58 0 0 1-1.37-1.5h.13a.64.64 0 0 0 .58-.44.64.64 0 0 0-.22-.7 16.87 16.87 0 0 1-2.88-2.83 9.67 9.67 0 0 0 1.27.02.5.5 0 0 0 .45-.35.5.5 0 0 0-.17-.55c-.8-.61-1.52-1.31-2.16-2.1a7.95 7.95 0 0 0 .96.01.4.4 0 0 0 .22-.7 10.54 10.54 0 0 1-3.43-4.63.47.47 0 0 0-.7-.22.47.47 0 0 0-.17.22 10.53 10.53 0 0 1-3.43 4.62.4.4 0 0 0-.13.44.4.4 0 0 0 .36.27 7.34 7.34 0 0 0 .96 0 14.3 14.3 0 0 1-2.16 2.1.5.5 0 0 0 0 .78c.08.07.17.1.28.1a9.16 9.16 0 0 0 1.27 0c-.84 1.05-1.81 2-2.88 2.82a.64.64 0 0 0 .35 1.14h.14a7.58 7.58 0 0 1-1.37 1.5.59.59 0 0 0-.23.4.58.58 0 0 0 .15.45 2.6 2.6 0 0 0 1.14.68c.32.09.66.1 1 .04a.62.62 0 0 1 .66.36 2.61 2.61 0 0 0 1.53 1.34 2.32 2.32 0 0 0 2.37-.66.57.57 0 0 1 .43-.2.57.57 0 0 1 .43.2 2.3 2.3 0 0 0 3.27.14c.26-.23.48-.5.63-.82a.62.62 0 0 1 .67-.36 2.28 2.28 0 0 0 2.12-.72.58.58 0 0 0 .08-.67.58.58 0 0 0-.15-.18Zm11.38-17.66h1.07v2.56a.54.54 0 0 1-1.08 0v-2.56Z" }), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#d" }), (0, jsx_runtime_1.jsxs)("g", { fill: "#EBEDF0", style: { mixBlendMode: "multiply" }, children: [(0, jsx_runtime_1.jsx)("path", { d: "M435.98 314.65h3.03v7.2a1.51 1.51 0 0 1-1.51 1.52 1.51 1.51 0 0 1-1.52-1.51v-7.2Z", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("path", { d: "M446.4 315.58a9.48 9.48 0 0 1-1.74-1.88h.18a.81.81 0 0 0 .72-.56.8.8 0 0 0-.27-.88 21.32 21.32 0 0 1-3.64-3.57 12.23 12.23 0 0 0 1.6.02.63.63 0 0 0 .36-1.13 16.7 16.7 0 0 1-2.73-2.65 10.14 10.14 0 0 0 1.21.01.5.5 0 0 0 .46-.35.5.5 0 0 0-.18-.55 13.27 13.27 0 0 1-4.32-5.83.59.59 0 0 0-1.1 0 13.27 13.27 0 0 1-4.33 5.83.5.5 0 0 0-.18.55.5.5 0 0 0 .46.35 9.37 9.37 0 0 0 1.2 0 16.7 16.7 0 0 1-2.72 2.64.64.64 0 0 0-.21.69.63.63 0 0 0 .57.44 12.3 12.3 0 0 0 1.6-.02 21.32 21.32 0 0 1-3.64 3.57.8.8 0 0 0 0 1.27c.13.1.3.16.45.17h.18a9.48 9.48 0 0 1-1.73 1.88.74.74 0 0 0-.29.52.72.72 0 0 0 .2.55 3.29 3.29 0 0 0 1.43.87c.4.1.83.12 1.25.05a.78.78 0 0 1 .84.45 3.3 3.3 0 0 0 1.93 1.69 2.91 2.91 0 0 0 2.99-.83.73.73 0 0 1 1.09 0 2.91 2.91 0 0 0 4.12.18c.34-.3.6-.64.8-1.04a.78.78 0 0 1 .84-.45 2.88 2.88 0 0 0 2.68-.92.73.73 0 0 0-.09-1.07Z", style: { mixBlendMode: "multiply" } })] }), (0, jsx_runtime_1.jsxs)("g", { style: { mixBlendMode: "multiply" }, children: [(0, jsx_runtime_1.jsx)("use", { xlinkHref: "#c", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M95.09 309.19a7.58 7.58 0 0 1-1.37-1.5h.13a.64.64 0 0 0 .58-.44.64.64 0 0 0-.22-.7 16.87 16.87 0 0 1-2.88-2.83 9.67 9.67 0 0 0 1.27.02.5.5 0 0 0 .45-.35.5.5 0 0 0-.17-.55c-.8-.61-1.52-1.31-2.16-2.1a7.95 7.95 0 0 0 .96.01.4.4 0 0 0 .22-.7 10.54 10.54 0 0 1-3.43-4.63.47.47 0 0 0-.7-.22.47.47 0 0 0-.17.22 10.53 10.53 0 0 1-3.43 4.62.4.4 0 0 0-.13.44.4.4 0 0 0 .36.27 7.34 7.34 0 0 0 .96 0 14.3 14.3 0 0 1-2.16 2.1.5.5 0 0 0 0 .78c.08.07.17.1.28.1a9.16 9.16 0 0 0 1.27 0c-.84 1.05-1.81 2-2.88 2.82a.64.64 0 0 0 .35 1.14h.14a7.58 7.58 0 0 1-1.37 1.5.59.59 0 0 0-.23.4.58.58 0 0 0 .15.45 2.6 2.6 0 0 0 1.14.68c.32.09.66.1 1 .04a.62.62 0 0 1 .66.36 2.61 2.61 0 0 0 1.53 1.34 2.32 2.32 0 0 0 2.37-.66.57.57 0 0 1 .43-.2.57.57 0 0 1 .43.2 2.3 2.3 0 0 0 3.27.14c.26-.23.48-.5.63-.82a.62.62 0 0 1 .67-.36 2.28 2.28 0 0 0 2.12-.72.58.58 0 0 0 .08-.67.58.58 0 0 0-.15-.18Z", style: { mixBlendMode: "multiply" } })] }), (0, jsx_runtime_1.jsxs)("g", { style: { mixBlendMode: "multiply" }, children: [(0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M106.47 291.53h1.07v2.56a.54.54 0 0 1-1.08 0v-2.56Z", style: { mixBlendMode: "multiply" } }), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#d", style: { mixBlendMode: "multiply" } })] }), (0, jsx_runtime_1.jsx)("path", { stroke: "#F4F6F7", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.11", d: "M81.69 217.76v12.28m-6.07-6.07H87.9m473.34-30.59v14.4m-7.2-7.2h14.4M118.7 228.13a4.23 4.23 0 1 0 0-8.47 4.23 4.23 0 0 0 0 8.47Zm335.28-52.1a4.23 4.23 0 1 0 0-8.47 4.23 4.23 0 0 0 0 8.47Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#F4F6F7", d: "M12.36 266.61a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Zm506.79-44.54a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Zm-383.51-62.73a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FAFBFB", d: "M166.14 52.35a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8ZM437.3 76.48a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8ZM51.75 86.85a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#F4F6F7", d: "M617.96 266.61a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" }), (0, jsx_runtime_1.jsx)("path", { stroke: "#FAFBFB", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.78", d: "M503.68 122.84a7.73 7.73 0 1 0 .01-15.47 7.73 7.73 0 0 0-.01 15.47ZM276.29 17.2a7.73 7.73 0 1 0 0-15.47 7.73 7.73 0 0 0 0 15.46ZM75.62 104.52a5.47 5.47 0 1 0 0-10.93 5.47 5.47 0 0 0 0 10.93Zm157.75 1.79v15.76m-7.89-7.87h15.78m327.19-45.1v25.92m-12.99-12.96h25.97M426.4 108.98v10.42m-5.2-5.2h10.42M133.24 79.25v10.41m-5.21-5.2h10.43" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FAFBFB", d: "M276.29 99.88a3.01 3.01 0 1 0 0-6.03 3.01 3.01 0 0 0 0 6.03Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#00AEEF", d: "m357.06 39.4-2.07-.93s-.94 9.57-12.2 8.07c-9.4-5.26-24.06-5.26-24.06-5.26s-17.1 6.57-16.72 16.7c.5 13.5 12.16 11.82 12.16 11.82l-.32-1.87c-12.92-7.61.44-15.22 3.79-16.91l-2.29 20.28a27.85 27.85 0 0 0 11.74 2.78 3.91 3.91 0 0 0 3.53-2.22l7.85-16.35c1.58.38 20.39 4.39 18.59-16.1Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#0097E8", d: "m357.06 39.4-2.07-.93s-.94 9.57-12.2 8.07l-4.32 8.97c1.58.38 20.39 4.39 18.59-16.1Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#e)", d: "M313.4 119.75c-.75-4.15-7.08-4.64-7.08-4.64l-1.13.09a.91.91 0 0 0-.8.66 9.9 9.9 0 0 0-.46 3.7 1.5 1.5 0 0 0 1.4 1.4c2.37.15 4.74.16 7.1.03a1.08 1.08 0 0 0 .75-.4 1.08 1.08 0 0 0 .22-.84Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#f)", d: "m307.3 115.75 1.1-3.74h-2.88l-.63 3.14a1.25 1.25 0 0 0 1.11 1.49 1.24 1.24 0 0 0 1.3-.9Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#g)", d: "M343.26 101.59c-1.09-1.84-3.74-3.13-7.33-3.99l-1.56-.05a.68.68 0 0 0-.65.42c-.42 1.28-.65 2.6-.7 3.95a.77.77 0 0 0 .6.79c.8.16 1.63.24 2.45.25 1.9.05 4.99-.1 6.6-.2a.77.77 0 0 0 .6-1.17Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#h)", d: "m336.57 98.2.86-3.28-2.64-.23-.5 3.02a1.16 1.16 0 0 0 .96 1.33 1.16 1.16 0 0 0 1.32-.85Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#i)", d: "M315.35 71.3a22.4 22.4 0 0 0-3 8.26c-.7 4.49-6.58 29.68-7.52 33.68a.56.56 0 0 0 .43.68c.74.18 1.5.27 2.26.27a1.05 1.05 0 0 0 .92-.64l14.05-32.5s9.34-1.79 12.78 2.26c2.05 2.43.7 6.7-1.13 12.76 0 0 2.25 1.12 3.75.37 0 0 7.01-10.93 4.14-17.63-1.33-3.1-7.07-6.17-12.78-6.76l-13.9-.75Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#j)", d: "M313.85 67.93s1.5-2.63 3.76-2.26c2.25.38 3.38 2.63 3.38 2.63l-3.76 1.88c-1.5.75-4.13 0-3.38-2.25Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#k)", d: "m330.68 36.78-2.76 5.9s3.07 2.25 6.2 1.37l.8-8.37-4.24 1.1Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#l)", d: "M337.48 30.36c.06.11 1.22 7.99 1.22 7.99l-4.52.57-2.21-7.3s4.56-3.03 5.5-1.26Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#m)", d: "M333.63 32.35a.66.66 0 0 0-.13.56l.85 3.88c0 .06.03.12.06.17.16.3.73 1.18 1.63.54.61-.52 1.32-.9 2.1-1.14a.65.65 0 0 1 .74.56c.17 1.19.26 2.39.26 3.59a.65.65 0 0 1-.61.63c-1.37.1-2.74.05-4.1-.16a.65.65 0 0 1-.5-.45 57.5 57.5 0 0 0-1.6-4.6c-.35-.71-1.4-.84-1.88-.86a.66.66 0 0 1-.48-.24 1.43 1.43 0 0 1 .19-2.25.65.65 0 0 0 .09-.9 1.44 1.44 0 0 1 .13-2.13 2.04 2.04 0 0 1 2.44-.32.68.68 0 0 0 .8-.14.43.43 0 0 1 .4-.15.63.63 0 0 0 .73-.54 1.67 1.67 0 0 1 1.5-1.52c1.99-.36 2.95 1.64 2.9 3.03-.06 1.4-2.23 1.66-3.46 1.41-.9-.18-1.7.6-2.06 1.03Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#n)", d: "M332.84 37.23s-.2-2.31-1.18-2.55c-.98-.24-2.05.45-1.23 1.92 1.03 1.82 2.41.63 2.41.63Z" }), (0, jsx_runtime_1.jsx)("path", { fill: "#EBEDF0", d: "M372.79 28.3v9.59l-32.05-3.36v-2.87l32.05-3.36Z" }), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#o" }), (0, jsx_runtime_1.jsx)("path", { fill: "url(#p)", d: "M355 38.47s.16-2.17.45-2.4c.3-.23 2.55-2.48 2.92-2.48.38 0 .76.76 0 1.13-.75.37-.9 1.56-.9 1.56l2.3.24s-1.77 2.7-2.52 3.07c-.75.38-2.26-1.12-2.26-1.12Z" }), (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#o", style: { mixBlendMode: "multiply" } })] }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "e", x1: "303.9", x2: "313.41", y1: "118.1", y2: "118.1", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#0078D3" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#25477B" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "f", x1: "307.29", x2: "305.53", y1: "107.92", y2: "123.33", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#F8B676" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#F37960" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "g", x1: "6278.42", x2: "6463.32", y1: "1035.38", y2: "1035.38", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#0078D3" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#25477B" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "h", x1: "21195.2", x2: "21155.8", y1: "5052.18", y2: "5137.86", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#F8B676" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#F37960" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "i", x1: "20216.7", x2: "22693.1", y1: "6935.19", y2: "6935.19", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#0078D3" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#25477B" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "j", x1: "4333.49", x2: "4218.15", y1: "602.68", y2: "780.96", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#F8B676" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#F37960" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "k", x1: "4319.87", x2: "4374.59", y1: "692.77", y2: "588.76", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#F8B676" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#F37960" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "l", x1: "4247.57", x2: "4181.79", y1: "564.47", y2: "578.04", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#F8B676" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#F37960" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "m", x1: "5799.54", x2: "5959.55", y1: "869.21", y2: "869.21", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#0078D3" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#25477B" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "n", x1: "1884.5", x2: "1866.37", y1: "231.72", y2: "215.86", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#F8B676" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#F37960" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "p", x1: "3274.11", x2: "3313.35", y1: "416.62", y2: "416.62", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#F8B676" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#F37960" })] }), (0, jsx_runtime_1.jsx)("clipPath", { id: "a", children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M0 0h629v350H0z" }) })] })] });
+};
+exports.ImageLooking = ImageLooking;