ab-ui-library 1.4.0 → 1.4.2

package/components/Select/NestedSelect/NestedSelect.js

@@ -1,5 +1,5 @@
-import { _ as _toConsumableArray } from '../../../toConsumableArray-3f7ebf4b.js';
-import { _ as _slicedToArray } from '../../../slicedToArray-095ba82e.js';
+import { _ as _toConsumableArray } from '../../../toConsumableArray-40cbe19c.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-71ade49c.js';
 import React, { useState, useRef, useId, useCallback } from 'react';
 import { Input } from '../../Input/Input.js';
 import '../../Input/InputPassword.js';
@@ -14,10 +14,10 @@ import '../../../hooks/useScreenSize.js';
 import 'react-hook-form';
 import { IconCaretUpFilled } from '../../SVGIcons/IconCaretUpFilled.js';
 import { IconCaretDownFilled } from '../../SVGIcons/IconCaretDownFilled.js';
-import '../../../defineProperty-ceda5d78.js';
-import '../../../typeof-79d903c6.js';
-import '../../../extends-c278f7df.js';
-import '../../../objectWithoutProperties-f4e6b43f.js';
+import '../../../defineProperty-89625732.js';
+import '../../../typeof-2ab38445.js';
+import '../../../extends-ee9d6299.js';
+import '../../../objectWithoutProperties-01db2536.js';
 import 'react-input-mask';
 import 'react-number-format';
 import '../../../helperComponents/Label/Label.js';

package/components/Select/ProfileDropdown/index.js

@@ -1,4 +1,4 @@
-import { _ as _slicedToArray } from '../../../slicedToArray-095ba82e.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-71ade49c.js';
 import React, { useRef, useId } from 'react';
 import { Text } from '../../Text/Text.js';
 import 'dayjs';
@@ -9,8 +9,8 @@ import { Link } from '../../Link/Link.js';
 import 'classnames';
 import '../../../utils/helpers.js';
 import '../../../consts/index.js';
-import '../../../defineProperty-ceda5d78.js';
-import '../../../typeof-79d903c6.js';
+import '../../../defineProperty-89625732.js';
+import '../../../typeof-2ab38445.js';
 
 var ProfileDropdown = function ProfileDropdown(props) {
   var menuRef = useRef(null);

package/components/Select/Select/Select.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty } from '../../../defineProperty-ceda5d78.js';
-import { _ as _slicedToArray } from '../../../slicedToArray-095ba82e.js';
+import { _ as _defineProperty } from '../../../defineProperty-89625732.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-71ade49c.js';
 import React, { useRef, useState, useMemo, useCallback, useEffect, useId } from 'react';
 import classNames from 'classnames';
 import { useGetElemSizes } from '../../../hooks/useGetElemSizes.js';
@@ -24,10 +24,10 @@ import { Loading } from '../SharedComponents/Loading.js';
 import { useChangePositionsOnScroll } from '../../../hooks/useChangePositionsOnScroll.js';
 import { IconCaretDownFilled } from '../../SVGIcons/IconCaretDownFilled.js';
 import { IconCaretUpFilled } from '../../SVGIcons/IconCaretUpFilled.js';
-import '../../../typeof-79d903c6.js';
+import '../../../typeof-2ab38445.js';
 import 'dayjs';
-import '../../../extends-c278f7df.js';
-import '../../../objectWithoutProperties-f4e6b43f.js';
+import '../../../extends-ee9d6299.js';
+import '../../../objectWithoutProperties-01db2536.js';
 import 'react-input-mask';
 import 'react-number-format';
 import '../../../helperComponents/Label/Label.js';
@@ -50,7 +50,7 @@ import '../../Divider/Divider.js';
 import '../../Tooltip/Tooltip.js';
 import '../../Avatar/Avatar.js';
 import '../../FileUpload/FileUpload.js';
-import '../../../toConsumableArray-3f7ebf4b.js';
+import '../../../toConsumableArray-40cbe19c.js';
 import '../../FileUpload/types.js';
 import '../../Button/Button.js';
 import '../../../helperComponents/Loader/Loader.js';

package/components/Select/SharedComponents/Actions.js

@@ -1,4 +1,4 @@
-import { _ as _slicedToArray } from '../../../slicedToArray-095ba82e.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-71ade49c.js';
 import React, { useState } from 'react';
 import { Button } from '../../Button/Button.js';
 import { Menu } from '../../Menu/Menu.js';
@@ -13,10 +13,10 @@ import '../../Collapse/CollapseGroup/CollapseGroup.js';
 import '../../Checkbox/Checkbox.js';
 import 'react-syntax-highlighter';
 import { IconMore } from '../../SVGIcons/IconMore.js';
-import '../../../extends-c278f7df.js';
-import '../../../defineProperty-ceda5d78.js';
-import '../../../typeof-79d903c6.js';
-import '../../../objectWithoutProperties-f4e6b43f.js';
+import '../../../extends-ee9d6299.js';
+import '../../../defineProperty-89625732.js';
+import '../../../typeof-2ab38445.js';
+import '../../../objectWithoutProperties-01db2536.js';
 import '../../../helperComponents/Loader/Loader.js';
 import '../../Button/consts.js';
 import '../../Popover/Popover.js';
@@ -36,7 +36,7 @@ import '../../../helperComponents/IconDynamicComponent/constants.js';
 import '../../../helperComponents/OptionItem/OptionItem.js';
 import '../../Avatar/Avatar.js';
 import '../../FileUpload/FileUpload.js';
-import '../../../toConsumableArray-3f7ebf4b.js';
+import '../../../toConsumableArray-40cbe19c.js';
 import '../../FileUpload/types.js';
 import '../../../helperComponents/Label/Label.js';
 import '../../FileUpload/UploadItems.js';

package/components/Select/SharedComponents/ButtonSelectWrapper/Button/Button.js

@@ -5,8 +5,8 @@ import { IconCaretDownFilled } from '../../../../SVGIcons/IconCaretDownFilled.js
 import { IconCaretUpFilled } from '../../../../SVGIcons/IconCaretUpFilled.js';
 import '../../../../../utils/helpers.js';
 import 'dayjs';
-import '../../../../../defineProperty-ceda5d78.js';
-import '../../../../../typeof-79d903c6.js';
+import '../../../../../defineProperty-89625732.js';
+import '../../../../../typeof-2ab38445.js';
 
 var Button = function Button(props) {
   var type = props.type,

package/components/Select/SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from '../../../../defineProperty-ceda5d78.js';
+import { _ as _defineProperty } from '../../../../defineProperty-89625732.js';
 import React, { useRef, useMemo } from 'react';
 import classNames from 'classnames';
 import { Button } from './Button/Button.js';
@@ -10,12 +10,12 @@ import '../../../../hooks/useScreenSize.js';
 import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../../hooks/useGetHasBottomSpace.js';
 import 'react-hook-form';
 import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositionsOnScroll.js';
-import '../../../../typeof-79d903c6.js';
+import '../../../../typeof-2ab38445.js';
 import '../../../Text/Text.js';
 import 'dayjs';
 import '../../../SVGIcons/IconCaretDownFilled.js';
 import '../../../SVGIcons/IconCaretUpFilled.js';
-import '../../../../slicedToArray-095ba82e.js';
+import '../../../../slicedToArray-71ade49c.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

package/components/Select/SharedComponents/ContentTop.js

@@ -1,4 +1,4 @@
-import { _ as _toConsumableArray } from '../../../toConsumableArray-3f7ebf4b.js';
+import { _ as _toConsumableArray } from '../../../toConsumableArray-40cbe19c.js';
 import React, { useRef, useMemo, useEffect } from 'react';
 import { Text } from '../../Text/Text.js';
 import { Input } from '../../Input/Input.js';
@@ -7,14 +7,14 @@ import { Actions } from './Actions.js';
 import { IconDismissFilled } from '../../SVGIcons/IconDismissFilled.js';
 import { IconSearchFilled } from '../../SVGIcons/IconSearchFilled.js';
 import { IconSelectAllOff } from '../../SVGIcons/IconSelectAllOff.js';
-import '../../../slicedToArray-095ba82e.js';
+import '../../../slicedToArray-71ade49c.js';
 import 'classnames';
 import '../../../utils/helpers.js';
 import 'dayjs';
-import '../../../defineProperty-ceda5d78.js';
-import '../../../typeof-79d903c6.js';
-import '../../../extends-c278f7df.js';
-import '../../../objectWithoutProperties-f4e6b43f.js';
+import '../../../defineProperty-89625732.js';
+import '../../../typeof-2ab38445.js';
+import '../../../extends-ee9d6299.js';
+import '../../../objectWithoutProperties-01db2536.js';
 import 'react-input-mask';
 import 'react-number-format';
 import '../../../helperComponents/Label/Label.js';

package/components/Select/SharedComponents/Footer.js

@@ -1,11 +1,11 @@
-import { _ as _extends } from '../../../extends-c278f7df.js';
-import { _ as _slicedToArray } from '../../../slicedToArray-095ba82e.js';
+import { _ as _extends } from '../../../extends-ee9d6299.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-71ade49c.js';
 import React from 'react';
 import { Button } from '../../Button/Button.js';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
-import '../../../defineProperty-ceda5d78.js';
-import '../../../typeof-79d903c6.js';
-import '../../../objectWithoutProperties-f4e6b43f.js';
+import '../../../defineProperty-89625732.js';
+import '../../../typeof-2ab38445.js';
+import '../../../objectWithoutProperties-01db2536.js';
 import 'classnames';
 import 'dayjs';
 import '../../../helperComponents/Loader/Loader.js';

package/components/Select/SharedComponents/InputSelectWrapper/InputSelectWrapper.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty } from '../../../../defineProperty-ceda5d78.js';
+import { _ as _defineProperty } from '../../../../defineProperty-89625732.js';
 import React, { useRef, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { Input } from '../../../Input/Input.js';
@@ -13,9 +13,9 @@ import 'react-hook-form';
 import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositionsOnScroll.js';
 import { IconCaretDownFilled } from '../../../SVGIcons/IconCaretDownFilled.js';
 import { IconCaretUpFilled } from '../../../SVGIcons/IconCaretUpFilled.js';
-import '../../../../typeof-79d903c6.js';
-import '../../../../extends-c278f7df.js';
-import '../../../../objectWithoutProperties-f4e6b43f.js';
+import '../../../../typeof-2ab38445.js';
+import '../../../../extends-ee9d6299.js';
+import '../../../../objectWithoutProperties-01db2536.js';
 import 'react-input-mask';
 import 'react-number-format';
 import '../../../../helperComponents/Label/Label.js';
@@ -26,7 +26,7 @@ import '../../../../helperComponents/IconDynamicComponent/IconDynamicComponent.j
 import '../../../../helperComponents/IconDynamicComponent/constants.js';
 import '../../../Checkbox/Checkbox.js';
 import '../../../Popover/Popover.js';
-import '../../../../slicedToArray-095ba82e.js';
+import '../../../../slicedToArray-71ade49c.js';
 import '../../../../hooks/useGetTooltipStyles.js';
 import '../../../../hooks/useGetTooltipPosition.js';
 import '../../../Tooltip/types.js';

package/components/Select/SharedComponents/index.js

@@ -4,13 +4,13 @@ export { ContentTop } from './ContentTop.js';
 export { Loading } from './Loading.js';
 export { InputSelectWrapper } from './InputSelectWrapper/InputSelectWrapper.js';
 export { ButtonSelectWrapper } from './ButtonSelectWrapper/ButtonSelectWrapper.js';
-import '../../../extends-c278f7df.js';
-import '../../../slicedToArray-095ba82e.js';
+import '../../../extends-ee9d6299.js';
+import '../../../slicedToArray-71ade49c.js';
 import 'react';
 import '../../Button/Button.js';
-import '../../../defineProperty-ceda5d78.js';
-import '../../../typeof-79d903c6.js';
-import '../../../objectWithoutProperties-f4e6b43f.js';
+import '../../../defineProperty-89625732.js';
+import '../../../typeof-2ab38445.js';
+import '../../../objectWithoutProperties-01db2536.js';
 import 'classnames';
 import 'dayjs';
 import '../../../helperComponents/Loader/Loader.js';
@@ -39,7 +39,7 @@ import 'react-dom';
 import '../../../helperComponents/OptionItem/OptionItem.js';
 import '../../Avatar/Avatar.js';
 import '../../FileUpload/FileUpload.js';
-import '../../../toConsumableArray-3f7ebf4b.js';
+import '../../../toConsumableArray-40cbe19c.js';
 import '../../FileUpload/types.js';
 import '../../../helperComponents/Label/Label.js';
 import '../../FileUpload/UploadItems.js';

package/components/Select/index.js

@@ -3,9 +3,9 @@ export { MultiSelect } from './MultiSelect/MultiSelect.js';
 export { NestedSelect } from './NestedSelect/NestedSelect.js';
 export { ButtonSelect } from './ButtonSelect/ButtonSelect.js';
 export { ProfileDropdown } from './ProfileDropdown/index.js';
-import '../../defineProperty-ceda5d78.js';
-import '../../typeof-79d903c6.js';
-import '../../slicedToArray-095ba82e.js';
+import '../../defineProperty-89625732.js';
+import '../../typeof-2ab38445.js';
+import '../../slicedToArray-71ade49c.js';
 import 'react';
 import 'classnames';
 import '../../hooks/useGetElemSizes.js';
@@ -18,8 +18,8 @@ import '../../hooks/useScreenSize.js';
 import '../../hooks/useGetHasBottomSpace.js';
 import 'react-hook-form';
 import '../Input/Input.js';
-import '../../extends-c278f7df.js';
-import '../../objectWithoutProperties-f4e6b43f.js';
+import '../../extends-ee9d6299.js';
+import '../../objectWithoutProperties-01db2536.js';
 import 'react-input-mask';
 import 'react-number-format';
 import '../../helperComponents/Label/Label.js';
@@ -47,7 +47,7 @@ import '../Tooltip/Tooltip.js';
 import '../../helperComponents/OptionItem/OptionItem.js';
 import '../Avatar/Avatar.js';
 import '../FileUpload/FileUpload.js';
-import '../../toConsumableArray-3f7ebf4b.js';
+import '../../toConsumableArray-40cbe19c.js';
 import '../FileUpload/types.js';
 import '../Button/Button.js';
 import '../../helperComponents/Loader/Loader.js';

package/components/SideNavigation/Block.js

@@ -13,8 +13,8 @@ var Block = function Block(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "navigation-block__label"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-    size: "standard",
     type: "tertiary",
+    weight: 'semibold',
     className: 'navigation-block__label__text'
   }, label), /*#__PURE__*/React.createElement(Divider, {
     type: 'primary',

package/components/SideNavigation/NavigationItem/index.js

@@ -1,17 +1,37 @@
-import { _ as _slicedToArray } from '../../../slicedToArray-095ba82e.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-71ade49c.js';
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import { NavigationItemTypes } from './types.js';
 import { Badge } from '../../Badge/Badge.js';
 import { IconDynamicComponent } from '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
 import { IconChevronDown } from '../../SVGIcons/IconChevronDown.js';
+import { ButtonIcon } from '../../ButtonIcon/ButtonIcon.js';
 import '../../Text/Text.js';
 import '../../../utils/helpers.js';
 import 'dayjs';
 import '../../Badge/consts.js';
 import '../../../helperComponents/IconDynamicComponent/constants.js';
-import '../../../defineProperty-ceda5d78.js';
-import '../../../typeof-79d903c6.js';
+import '../../../defineProperty-89625732.js';
+import '../../../typeof-2ab38445.js';
+import '../../../extends-ee9d6299.js';
+import '../../../objectWithoutProperties-01db2536.js';
+import '../../../helperComponents/Loader/Loader.js';
+import '../../Checkbox/Checkbox.js';
+import '../../Popover/Popover.js';
+import '../../../hooks/useGetTooltipStyles.js';
+import '../../../hooks/useGetElemSizes.js';
+import '../../../hooks/useGetElemPositions.js';
+import '../../../hooks/useGetTooltipPosition.js';
+import '../../Tooltip/types.js';
+import '../../../hooks/useHideOnScroll.js';
+import '../../../consts/index.js';
+import '../../../hooks/useOnOutsideClick.js';
+import '../../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../../Link/Link.js';
+import '../../SVGIcons/IconInfo.js';
+import 'react-syntax-highlighter';
+import '../../ButtonIcon/consts.js';
 
 var NavigationItem = function NavigationItem(props) {
   var As = props.As,
@@ -26,15 +46,14 @@ var NavigationItem = function NavigationItem(props) {
     actionElm = props.actionElm,
     _props$active = props.active,
     active = _props$active === void 0 ? false : _props$active,
-    _props$badgeType = props.badgeType,
-    badgeType = _props$badgeType === void 0 ? 'green' : _props$badgeType,
-    badgeContent = props.badgeContent,
+    badgeProps = props.badgeProps,
     _props$expandIconProp = props.expandIconProps,
     expandIconProps = _props$expandIconProp === void 0 ? {
       Component: IconChevronDown,
       size: 'medium'
     } : _props$expandIconProp,
-    children = props.children;
+    children = props.children,
+    actionsList = props.actionsList;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     childOpen = _useState2[0],
@@ -47,25 +66,38 @@ var NavigationItem = function NavigationItem(props) {
   };
   var displayHeader = isOpen && type === NavigationItemTypes.HEADER && showAction && actionElm && actionElm;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames('navigation-item', "navigation-item--".concat(type)),
+    className: classNames('navigation-item', "navigation-item--".concat(type), "".concat(expandable ? 'navigation-item--expandable' : '')),
     onClick: function onClick() {
       return setChildOpen(!childOpen);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('navigation-item__inner', active && 'active')
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, !isOpen && type === NavigationItemTypes.HEADER && As(), displayHeader, displayNavigationItem(), type === NavigationItemTypes.USER && iconName && isOpen && /*#__PURE__*/React.createElement(IconDynamicComponent, {
-    componentName: iconName
-  })), showBadge && badgeContent && isOpen && /*#__PURE__*/React.createElement(Badge, {
-    type: badgeType,
-    text: badgeContent,
-    size: "small",
-    className: 'mr-12'
-  }), expandable && isOpen && /*#__PURE__*/React.createElement("span", {
-    className: classNames('navigation-item__expandable-icon', childOpen && 'opened')
+  }, expandable || actionsList !== null && actionsList !== void 0 && actionsList.length ? /*#__PURE__*/React.createElement("div", {
+    className: 'navigation-item__actions'
+  }, expandable && /*#__PURE__*/React.createElement("span", {
+    className: classNames('navigation-item__actions__expand', childOpen && 'opened')
   }, expandIconProps.Component && /*#__PURE__*/React.createElement(expandIconProps.Component, {
     size: expandIconProps.size || 'small',
     className: 'mr-12'
-  }))), children && /*#__PURE__*/React.createElement("div", {
+  })), (actionsList === null || actionsList === void 0 ? void 0 : actionsList.length) && /*#__PURE__*/React.createElement("div", {
+    className: 'navigation-item__actions__right'
+  }, actionsList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, /*#__PURE__*/React.createElement(ButtonIcon, {
+      iconProps: {
+        Component: item.iconProps
+      },
+      size: 'small'
+    }));
+  }))) : null, /*#__PURE__*/React.createElement(React.Fragment, null, displayHeader, displayNavigationItem(), type === NavigationItemTypes.USER && iconName && isOpen && /*#__PURE__*/React.createElement(IconDynamicComponent, {
+    componentName: iconName
+  })), showBadge && (badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.text) && isOpen && /*#__PURE__*/React.createElement(Badge, {
+    type: badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.type,
+    text: badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.text,
+    size: badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.size,
+    className: 'mr-12'
+  })), children && /*#__PURE__*/React.createElement("div", {
     className: classNames('navigation-item__child', childOpen && 'active')
   }, children)));
 };

package/components/SideNavigation/NavigationItem/types.d.ts

@@ -1,5 +1,6 @@
 import type { JSX, ReactNode } from 'react';
 import type { ISVGIconProps } from '../../SVGIcons/types';
+import type { TBadgeProps } from '../../Badge/types';
 export declare enum NavigationItemTypes {
     MAIN = "main",
     SUB = "sub",
@@ -8,6 +9,10 @@ export declare enum NavigationItemTypes {
     PRODUCT = "product",
     ACTION = "action"
 }
+export type TActionItemProps = {
+    iconProps: TSVGIconComponent;
+    onClick?: () => void;
+};
 export interface TNavigationLinkPropTypes {
     As: () => JSX.Element;
     expandIconProps?: ISVGIconProps;
@@ -19,7 +24,8 @@ export interface TNavigationLinkPropTypes {
     showAction?: boolean;
     actionElm?: JSX.Element;
     active?: boolean;
-    badgeContent?: string;
-    badgeType?: 'red' | 'grey' | 'greyDark' | 'green' | 'transparent';
+    badgeProps?: TBadgeProps;
     children?: ReactNode;
+    actionsList?: TActionItemProps[];
+    className?: string;
 }

package/components/SideNavigation/SideNavigation.js

@@ -1,16 +1,18 @@
-import React from 'react';
+import { _ as _slicedToArray } from '../../slicedToArray-71ade49c.js';
+import React, { useState } from 'react';
 import classNames from 'classnames';
-import { IconChevronRight } from '../SVGIcons/IconChevronRight.js';
-import { Button } from '../Button/Button.js';
-import '../../defineProperty-ceda5d78.js';
-import '../../typeof-79d903c6.js';
-import '../../extends-c278f7df.js';
-import '../../objectWithoutProperties-f4e6b43f.js';
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon.js';
+import { IconPanelRight } from '../SVGIcons/IconPanelRight.js';
+import { IconPanelLeft } from '../SVGIcons/IconPanelLeft.js';
+import { Image } from '../Image/Image.js';
+import '../../extends-ee9d6299.js';
+import '../../objectWithoutProperties-01db2536.js';
 import 'dayjs';
 import '../../helperComponents/Loader/Loader.js';
 import '../Checkbox/Checkbox.js';
+import '../../defineProperty-89625732.js';
+import '../../typeof-2ab38445.js';
 import '../Popover/Popover.js';
-import '../../slicedToArray-095ba82e.js';
 import '../../hooks/useGetTooltipStyles.js';
 import '../../hooks/useGetElemSizes.js';
 import '../../hooks/useGetElemPositions.js';
@@ -28,30 +30,49 @@ import '../SVGIcons/IconInfo.js';
 import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
 import '../../helperComponents/IconDynamicComponent/constants.js';
 import 'react-syntax-highlighter';
-import '../Button/consts.js';
+import '../ButtonIcon/consts.js';
 
 var SideNavigation = function SideNavigation(props) {
   var children = props.children,
     _props$isOpen = props.isOpen,
     isOpen = _props$isOpen === void 0 ? true : _props$isOpen,
     setOpen = props.setOpen,
-    _props$showToggleIcon = props.showToggleIcon,
-    showToggleIcon = _props$showToggleIcon === void 0 ? true : _props$showToggleIcon,
     _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className;
-  var handleToggleOpen = function handleToggleOpen() {
-    setOpen === null || setOpen === void 0 || setOpen(!isOpen);
+    className = _props$className === void 0 ? '' : _props$className,
+    logo = props.logo,
+    logoClosed = props.logoClosed;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPined = _useState2[0],
+    setPined = _useState2[1];
+  var onMouseEnter = function onMouseEnter() {
+    if (!isPined) {
+      setOpen === null || setOpen === void 0 || setOpen(true);
+    }
+  };
+  var onMouseLeave = function onMouseLeave() {
+    if (!isPined) {
+      setOpen === null || setOpen === void 0 || setOpen(false);
+    }
+  };
+  var onPin = function onPin() {
+    setPined(!isPined);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames('side-navigation', isOpen ? 'side-navigation--opened' : null, className)
-  }, showToggleIcon && /*#__PURE__*/React.createElement(Button, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    className: classNames('side-navigation', isOpen ? 'side-navigation--opened' : null, isPined ? 'side-navigation--pin' : null, className)
+  }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement(Image, {
+    imagePath: isOpen ? logo : logoClosed,
+    isBackgroundImage: false
+  }), /*#__PURE__*/React.createElement(ButtonIcon, {
     iconProps: {
-      Component: IconChevronRight
+      Component: isPined ? IconPanelRight : IconPanelLeft
     },
-    size: 'small',
+    size: 'large',
     className: 'side-navigation__btn',
-    onClick: handleToggleOpen
-  }), children);
+    onClick: onPin
+  })), children);
 };
 
 export { SideNavigation };

package/components/SideNavigation/index.js

@@ -1,18 +1,17 @@
 export { SideNavigation } from './SideNavigation.js';
 export { NavigationItem } from './NavigationItem/index.js';
+import '../../slicedToArray-71ade49c.js';
 import 'react';
 import 'classnames';
-import '../SVGIcons/IconChevronRight.js';
-import '../../defineProperty-ceda5d78.js';
-import '../../typeof-79d903c6.js';
-import '../Button/Button.js';
-import '../../extends-c278f7df.js';
-import '../../objectWithoutProperties-f4e6b43f.js';
+import '../ButtonIcon/ButtonIcon.js';
+import '../../extends-ee9d6299.js';
+import '../../objectWithoutProperties-01db2536.js';
 import 'dayjs';
 import '../../helperComponents/Loader/Loader.js';
 import '../Checkbox/Checkbox.js';
+import '../../defineProperty-89625732.js';
+import '../../typeof-2ab38445.js';
 import '../Popover/Popover.js';
-import '../../slicedToArray-095ba82e.js';
 import '../../hooks/useGetTooltipStyles.js';
 import '../../hooks/useGetElemSizes.js';
 import '../../hooks/useGetElemPositions.js';
@@ -30,7 +29,10 @@ import '../SVGIcons/IconInfo.js';
 import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
 import '../../helperComponents/IconDynamicComponent/constants.js';
 import 'react-syntax-highlighter';
-import '../Button/consts.js';
+import '../ButtonIcon/consts.js';
+import '../SVGIcons/IconPanelRight.js';
+import '../SVGIcons/IconPanelLeft.js';
+import '../Image/Image.js';
 import './NavigationItem/types.js';
 import '../Badge/Badge.js';
 import '../Badge/consts.js';

package/components/SideNavigation/types.d.ts

@@ -2,10 +2,12 @@ import type { JSX, ReactNode } from 'react';
 import type { ISVGIconProps } from '../SVGIcons/types';
 export interface TSideNavigationPropTypes {
     className?: string;
+    logo?: string;
+    logoClosed?: string;
     actionElm?: JSX.Element;
     showAction?: boolean;
     children: ReactNode;
-    showToggleIcon?: boolean;
+    pinSidebar?: boolean;
     isOpen?: boolean;
     setOpen?: (arg: boolean) => void;
     sidebarOpenIconProps?: ISVGIconProps;
@@ -15,4 +17,5 @@ export interface TBlock {
     children: ReactNode;
     label?: string;
     isOpen?: boolean;
+    className?: string;
 }

package/components/SideSheet/Footer/Footer.js

@@ -1,11 +1,11 @@
-import { _ as _extends } from '../../../extends-c278f7df.js';
-import { _ as _slicedToArray } from '../../../slicedToArray-095ba82e.js';
+import { _ as _extends } from '../../../extends-ee9d6299.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-71ade49c.js';
 import React, { useCallback } from 'react';
 import { Button } from '../../Button/Button.js';
 import { Checkbox } from '../../Checkbox/Checkbox.js';
-import '../../../defineProperty-ceda5d78.js';
-import '../../../typeof-79d903c6.js';
-import '../../../objectWithoutProperties-f4e6b43f.js';
+import '../../../defineProperty-89625732.js';
+import '../../../typeof-2ab38445.js';
+import '../../../objectWithoutProperties-01db2536.js';
 import 'classnames';
 import 'dayjs';
 import '../../../helperComponents/Loader/Loader.js';

package/components/SideSheet/SideSheet.js

@@ -1,6 +1,6 @@
-import { _ as _extends } from '../../extends-c278f7df.js';
-import { _ as _defineProperty } from '../../defineProperty-ceda5d78.js';
-import { _ as _slicedToArray } from '../../slicedToArray-095ba82e.js';
+import { _ as _extends } from '../../extends-ee9d6299.js';
+import { _ as _defineProperty } from '../../defineProperty-89625732.js';
+import { _ as _slicedToArray } from '../../slicedToArray-71ade49c.js';
 import React, { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import classNames from 'classnames';
@@ -18,9 +18,9 @@ import { IconDismiss } from '../SVGIcons/IconDismiss.js';
 import { Heading } from '../Heading/Heading.js';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.js';
 import { Tab } from '../Tab/Tab.js';
-import '../../typeof-79d903c6.js';
+import '../../typeof-2ab38445.js';
 import '../../consts/index.js';
-import '../../objectWithoutProperties-f4e6b43f.js';
+import '../../objectWithoutProperties-01db2536.js';
 import '../../helperComponents/Loader/Loader.js';
 import '../Checkbox/Checkbox.js';
 import '../Popover/Popover.js';