@itcase/ui 1.1.8 → 1.1.9

package/dist/{Avatar-diLCwtnd.js → Avatar-DB6Si0s1.js}

@@ -7,17 +7,7 @@ import { Image } from './components/Image.js';
 import { T as Text } from './Text-BcGbRc14.js';
 
 function Avatar(props) {
-    var className = props.className, Dot = props.Dot, icon = props.icon, 
-    // Размер аватара
-    _a = props.size, 
-    // Размер аватара
-    size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, 
-    // Тип аватара
-    type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, 
-    // Цвет текста
-    _c = props.textColor, 
-    // Цвет текста
-    textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconStroke = props.iconStroke, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;
+    var className = props.className, Dot = props.Dot, icon = props.icon, _a = props.size, size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, _c = props.textColor, textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconStroke = props.iconStroke, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -37,13 +27,5 @@ function Avatar(props) {
     }, [firstName, secondName]);
     return (jsxRuntimeExports.jsx("div", { className: clsx(className, 'avatar', shapeClass, mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntimeExports.jsxs("div", { className: clsx('avatar__wrapper', fillClass, fillHoverClass), children: [before, src ? (jsxRuntimeExports.jsx(Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntimeExports.jsx(Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntimeExports.jsx(Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, stroke: iconStroke, SvgImage: icon })), Dot, after] }) }));
 }
-Avatar.defaultProps = {
-    size: '96',
-    textSize: 'l',
-    textColor: 'surfaceTextTertiary',
-    textWeight: 600,
-    firstName: '',
-    secondName: '',
-};
 
 export { Avatar as A };

package/dist/cjs/{Avatar-DQ5fNpnO.js → Avatar-C8tufLEH.js}

@@ -13,17 +13,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Avatar(props) {
-    var className = props.className, Dot = props.Dot, icon = props.icon, 
-    // Размер аватара
-    _a = props.size, 
-    // Размер аватара
-    size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, 
-    // Тип аватара
-    type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, 
-    // Цвет текста
-    _c = props.textColor, 
-    // Цвет текста
-    textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconStroke = props.iconStroke, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;
+    var className = props.className, Dot = props.Dot, icon = props.icon, _a = props.size, size = _a === void 0 ? '96' : _a, after = props.after, before = props.before, src = props.src, type = props.type, mode = props.mode, onClick = props.onClick, _b = props.textSize, textSize = _b === void 0 ? 'l' : _b, _c = props.textColor, textColor = _c === void 0 ? 'surfaceTextTertiary' : _c, _d = props.textWeight, textWeight = _d === void 0 ? '600' : _d, iconSrc = props.iconSrc, iconItemFill = props.iconItemFill, iconShape = props.iconShape, iconSize = props.iconSize, iconStroke = props.iconStroke, iconFill = props.iconFill, iconFillHover = props.iconFillHover, iconFillSize = props.iconFillSize, _e = props.firstName, firstName = _e === void 0 ? '' : _e, _f = props.secondName, secondName = _f === void 0 ? '' : _f;
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',
@@ -43,13 +33,5 @@ function Avatar(props) {
     }, [firstName, secondName]);
     return (jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default(className, 'avatar', shapeClass, mode && "avatar_mode_".concat(mode), size && "avatar_size_".concat(size), type && "avatar_type_".concat(type), Dot && 'avatar_status', onClick && 'cursor_type_pointer'), onClick: onClick, children: jsxRuntime.jsxRuntimeExports.jsxs("div", { className: clsx__default.default('avatar__wrapper', fillClass, fillHoverClass), children: [before, src ? (jsxRuntime.jsxRuntimeExports.jsx(index.Image, { className: "avatar__image", shape: "geometric", src: src })) : (jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "avatar__name", size: textSize, textColor: textColor, textWeight: textWeight, children: avatarChars })), (icon || iconSrc) && (jsxRuntime.jsxRuntimeExports.jsx(Icon.Icon, { className: "avatar__icon", fill: iconFill, fillHover: iconFillHover, fillSize: iconFillSize, iconFill: iconItemFill, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, stroke: iconStroke, SvgImage: icon })), Dot, after] }) }));
 }
-Avatar.defaultProps = {
-    size: '96',
-    textSize: 'l',
-    textColor: 'surfaceTextTertiary',
-    textWeight: 600,
-    firstName: '',
-    secondName: '',
-};
 
 exports.Avatar = Avatar;

package/dist/cjs/components/Avatar/Avatar.d.ts

@@ -1,13 +1,3 @@
 import { IAvatarProps } from './Avatar.interface';
 declare function Avatar(props: IAvatarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Avatar {
-    var defaultProps: {
-        size: string;
-        textSize: string;
-        textColor: string;
-        textWeight: number;
-        firstName: string;
-        secondName: string;
-    };
-}
 export { Avatar };

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../Avatar-DQ5fNpnO.js');
+var Avatar = require('../Avatar-C8tufLEH.js');
 require('../jsx-runtime-BCmQOGxJ.js');
 require('react');
 require('clsx');

package/dist/cjs/components/Pagination.js

@@ -52,8 +52,6 @@ function Pagination(props) {
     perPageCount,
     allItemsCount,
     className,
-    forcePage,
-    pageCount,
     marginPagesDisplayed,
     pageRangeDisplayed,
     previousLabel,
@@ -63,11 +61,9 @@ function Pagination(props) {
     pageCountDesc,
     pageCountDescTextColor,
     pageCountDescTextSize,
-    pageCountInput,
     pageCountInputTextColor,
     pageCountInputTextSize,
     pageCountInputIcon,
-    pageCountInputIconFill,
     pageCountInputIconFillSize,
     pageCountInputIconColor,
     pageCountDropdownAlignment,
@@ -84,7 +80,6 @@ function Pagination(props) {
     pageCountDropdownItemFillActive,
     pageCountDropdownItemFillActiveHover,
     pageCountDropdownItemFillHover,
-    pageCountDropdownItemLabel,
     pageCountDropdownItemLabelColor,
     pageCountDropdownItemLabelColorActive,
     pageCountDropdownItemLabelSize,
@@ -95,12 +90,14 @@ function Pagination(props) {
   } = props;
   const [isOpenDropdown, setIsOpenDropdown] = React.useState(false);
   const [showPagination, setShowPagination] = React.useState(true);
+  const [pageCountDropdownArray, setPageCountDropdownArray] = React.useState([]);
   const [activeDropdownItem, setActiveDropdownItem] = React.useState(10);
   // Toggle command menu
   const onClickCommandMenuButton = React.useCallback(event => {
     setIsOpenDropdown(state => !state);
   }, []);
-  const handleDropdownItemClick = React.useCallback(item => {
+  const handleDropdownItemClick = React.useCallback((event, item) => {
+    event.stopPropagation();
     onPerPageCountChange(item);
     setActiveDropdownItem(item);
     setIsOpenDropdown(false);
@@ -113,6 +110,14 @@ function Pagination(props) {
     prefix: 'gap_',
     propsKey: 'gap'
   });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
 
   // Calculate count of pages for all items
   const paginationPagesCount = React.useMemo(() => {
@@ -133,12 +138,8 @@ function Pagination(props) {
     return 0;
   }, [pageNumber]);
   React.useEffect(() => {
-    if (paginationPagesCount <= 1) {
-      setShowPagination(false);
-      return;
-    }
-    setShowPagination(true);
-  }, [paginationPagesCount]);
+    setPageCountDropdownArray(isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray);
+  }, [pageCountArray, isPageCountDropdownReversed]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: "pagination"
   }, showPagination && /*#__PURE__*/React__default.default.createElement(ReactPaginate__default.default, {
@@ -179,13 +180,12 @@ function Pagination(props) {
     size: pageCountDescTextSize,
     textColor: pageCountDescTextColor
   }, pageCountDesc), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "pagination__input",
+    className: clsx__default.default('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass),
     onClick: onClickCommandMenuButton
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: pageCountInputTextSize,
     textColor: pageCountInputTextColor
   }, activeDropdownItem), /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
-    fill: pageCountInputIconFill,
     fillSize: pageCountInputIconFillSize,
     iconFill: pageCountInputIconColor,
     SvgImage: pageCountInputIcon
@@ -197,7 +197,7 @@ function Pagination(props) {
     set: pageCountDropdownSet,
     setIsOpen: setIsOpenDropdown,
     shape: pageCountDropdownShape
-  }, (isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray).map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.default.createElement(DropdownItem.DropdownItem, {
+  }, pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.default.createElement(DropdownItem.DropdownItem, {
     dividerDirection: pageCountDropdownItemDividerDirection,
     dividerFill: pageCountDropdownItemDividerFill,
     dividerSize: pageCountDropdownItemDividerSize,
@@ -214,7 +214,7 @@ function Pagination(props) {
     labelTextWrap: pageCountDropdownItemLabelWrap,
     set: pageCountDropdownItemSet,
     showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
-    onClick: () => handleDropdownItemClick(item)
+    onClick: event => handleDropdownItemClick(event, item)
   }) : /*#__PURE__*/React__default.default.createElement(DropdownItem.DropdownItem, {
     dividerDirection: pageCountDropdownItemDividerDirection,
     dividerFill: pageCountDropdownItemDividerFill,
@@ -230,7 +230,7 @@ function Pagination(props) {
     labelTextWrap: pageCountDropdownItemLabelWrap,
     set: pageCountDropdownItemSet,
     showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
-    onClick: () => handleDropdownItemClick(item)
+    onClick: event => handleDropdownItemClick(event, item)
   }))))));
 }
 Pagination.propTypes = {

package/dist/cjs/components/Panel/Panel.d.ts

@@ -0,0 +1,7 @@
+import { IPanelConfig, IPanelProps } from './Panel.interface';
+declare const panelConfig: IPanelConfig;
+declare function Panel(props: IPanelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Panel {
+    var defaultProps: {};
+}
+export { Panel, panelConfig };

package/dist/cjs/components/Panel/Panel.interface.d.ts

@@ -0,0 +1,56 @@
+import React, { CSSProperties } from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { alignDirectionPropsType, borderColorPropsType, borderTypePropsType, borderWidthPropsType, elevationPropsType, fillHoverPropsType, fillPropsType, flexAlignPropsType, flexJustifyContentPropsType, flexWrapPropsType, heightPropsType, positionPropsType, shapePropsType, textColorPropsType, textSizePropsType, textWeightPropsType, widthPropsType } from '../../types';
+import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
+interface ThemeColor {
+    fill?: string;
+    fillHover?: string;
+    labelTextColor?: string;
+    border?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    direction?: alignDirectionPropsType;
+}
+type appearanceKeysType = appearanceKeysDefaultType & {};
+type appearanceType = {
+    [key in appearanceKeysType]: ThemeColor;
+};
+export interface IPanelConfig {
+    appearance: appearanceType | undefined;
+    setAppearance: (newComponent: appearanceType) => void;
+}
+export interface IPanelProps extends TypeStyleAttributes {
+    appearance?: appearanceKeysType;
+    children?: React.ReactNode;
+    className?: string;
+    horizontalScroll?: boolean;
+    verticalScroll?: boolean;
+    htmlFor?: string;
+    set?: string;
+    style?: CSSProperties;
+    dataTour?: string;
+    alignContent?: flexJustifyContentPropsType;
+    alignItems?: flexAlignPropsType;
+    justifyContent?: flexJustifyContentPropsType;
+    wrap?: flexWrapPropsType;
+    direction?: alignDirectionPropsType;
+    fill?: fillPropsType;
+    fillHover?: fillHoverPropsType;
+    shape?: shapePropsType;
+    width?: widthPropsType;
+    height?: heightPropsType;
+    borderColor?: borderColorPropsType;
+    borderWidth?: borderWidthPropsType;
+    borderType?: borderTypePropsType;
+    elevation?: elevationPropsType;
+    position?: positionPropsType;
+    title?: string;
+    titleTextSize?: textSizePropsType;
+    titleTextColor?: textColorPropsType;
+    titleTextWeight?: textWeightPropsType;
+    desc?: string;
+    descTextSize?: textSizePropsType;
+    descTextColor?: textColorPropsType;
+    descTextWeight?: textWeightPropsType;
+}
+export {};

package/dist/cjs/components/Panel/index.d.ts

@@ -0,0 +1 @@
+export { Panel, panelConfig } from './Panel';

package/dist/cjs/components/Panel.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var jsxRuntime = require('../jsx-runtime-BCmQOGxJ.js');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+var Group = require('../Group-4zWTDvKx.js');
+var Text = require('../Text-D7Aq1i5R.js');
+require('react');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('prop-types');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var panelConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        panelConfig.appearance = newComponent;
+    },
+};
+function Panel(props) {
+    var appearance = props.appearance, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, set = props.set, dataTour = props.dataTour, title = props.title, titleTextSize = props.titleTextSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, desc = props.desc, descTextSize = props.descTextSize, descTextColor = props.descTextColor, descTextWeight = props.descTextWeight, verticalScroll = props.verticalScroll;
+    var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_align-content_',
+        propsKey: 'alignContent',
+    });
+    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_wrap_',
+        propsKey: 'wrap',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var _a = useStyles.useStyles(props), panelStyles = _a.styles, panelWrapperStyles = _a.wrapper;
+    var appearanceConfig = appearance && panelConfig.appearance && panelConfig.appearance[appearance];
+    return (jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { className: clsx__default.default(className, 'panel', widthClass, heightClass, fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "panel_set_".concat(set), wrapClass, shapeClass, borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderWidthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
+                "border-width_".concat(appearanceConfig.borderWidth)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "panel__header", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "panel__footer", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
+}
+Panel.defaultProps = {};
+
+exports.Panel = Panel;
+exports.panelConfig = panelConfig;

package/dist/cjs/components/Select.js

@@ -8,8 +8,8 @@ var clsx = require('clsx');
 var ReactDOM = require('react-dom');
 var floatingUi_dom = require('../floating-ui.dom-C34fOuI9.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index$1 = require('./Badge.js');
 var Text = require('../Text-D7Aq1i5R.js');
+var index$1 = require('./Badge.js');
 var Group$2 = require('../Group-4zWTDvKx.js');
 var Divider = require('../Divider-CIYsHYud.js');
 require('../Link-BoShjCEw.js');
@@ -7452,45 +7452,29 @@ SelectControl.__docgenInfo = {
   }
 };
 
-const SelectIndicatorsContainer = props => {
-  const {
-    badgeAppearance,
-    badgeSize,
-    badgeTextSize,
-    showBadge,
-    value
-  } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React__namespace.default.createElement(index$1.Badge, {
-    appearance: badgeAppearance,
-    size: badgeSize,
-    textSize: badgeTextSize,
-    value: value.length
-  }) : null, props.children);
-};
-SelectIndicatorsContainer.propTypes = {};
-SelectIndicatorsContainer.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectIndicatorsContainer"
-};
-
 const SelectDropdownIndicator = props => {
   const {
+    dropdownFillHover,
     dropdownIcon,
     dropdownIconFill,
+    dropdownIconShape,
     dropdownIconStroke
   } = props.selectProps;
   return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
     SvgImage: dropdownIcon,
     iconFill: dropdownIconFill,
-    iconStroke: dropdownIconStroke
+    fillHover: dropdownFillHover,
+    iconStroke: dropdownIconStroke,
+    shape: dropdownIconShape
   }) : props.children);
 };
 SelectDropdownIndicator.propTypes = {
   selectProps: PropTypes__default.default.shape({
     // "dropdownIcon" is SvgImage(file.svg)
+    dropdownFillHover: PropTypes__default.default.string,
     dropdownIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.element]),
     dropdownIconFill: PropTypes__default.default.string,
+    dropdownIconShape: PropTypes__default.default.string,
     dropdownIconStroke: PropTypes__default.default.string
   })
 };
@@ -7504,6 +7488,10 @@ SelectDropdownIndicator.__docgenInfo = {
       "type": {
         "name": "shape",
         "value": {
+          "dropdownFillHover": {
+            "name": "string",
+            "required": false
+          },
           "dropdownIcon": {
             "name": "union",
             "value": [{
@@ -7517,6 +7505,10 @@ SelectDropdownIndicator.__docgenInfo = {
             "name": "string",
             "required": false
           },
+          "dropdownIconShape": {
+            "name": "string",
+            "required": false
+          },
           "dropdownIconStroke": {
             "name": "string",
             "required": false
@@ -7563,6 +7555,28 @@ SelectGroupHeading.__docgenInfo = {
   }
 };
 
+const SelectIndicatorsContainer = props => {
+  const {
+    badgeAppearance,
+    badgeSize,
+    badgeTextSize,
+    showBadge,
+    value
+  } = props.selectProps;
+  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React__namespace.default.createElement(index$1.Badge, {
+    appearance: badgeAppearance,
+    size: badgeSize,
+    textSize: badgeTextSize,
+    value: value.length
+  }) : null, props.children);
+};
+SelectIndicatorsContainer.propTypes = {};
+SelectIndicatorsContainer.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SelectIndicatorsContainer"
+};
+
 const SelectInput = props => {
   const {
     inputTextSize,
@@ -8065,8 +8079,10 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     dividerDirection,
     dividerFill,
     dividerSize,
+    dropdownFillHover,
     dropdownIcon,
     dropdownIconFill,
+    dropdownIconShape,
     dropdownIconStroke,
     multipleItemIcon,
     multipleItemIconFill,
@@ -8249,8 +8265,10 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     dividerDirection: dividerDirection,
     dividerFill: dividerFill,
     dividerSize: dividerSize,
+    dropdownFillHover: dropdownFillHover,
     dropdownIcon: dropdownIcon,
     dropdownIconFill: dropdownIconFill,
+    dropdownIconShape: dropdownIconShape,
     dropdownIconStroke: dropdownIconStroke,
     elevation: elevation || selectAppearanceItem.elevation,
     filterOption: filterOption,
@@ -8319,8 +8337,10 @@ SelectContainer.propTypes = {
   clearIconStroke: PropTypes__default.default.string,
   closeMenuOnSelect: PropTypes__default.default.bool,
   // "dropdownIcon" is SvgImage(file.svg)
+  dropdownFillHover: PropTypes__default.default.string,
   dropdownIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.element]),
   dropdownIconFill: PropTypes__default.default.string,
+  dropdownIconShape: PropTypes__default.default.string,
   dropdownIconStroke: PropTypes__default.default.string,
   filterOption: PropTypes__default.default.func,
   initialValue: PropTypes__default.default.any,
@@ -8397,6 +8417,13 @@ SelectContainer.__docgenInfo = {
       },
       "required": false
     },
+    "dropdownFillHover": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "dropdownIcon": {
       "description": "",
       "type": {
@@ -8416,6 +8443,13 @@ SelectContainer.__docgenInfo = {
       },
       "required": false
     },
+    "dropdownIconShape": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "dropdownIconStroke": {
       "description": "",
       "type": {

package/dist/cjs/components.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var Accordion = require('./Accordion-DcZ9P5kP.js');
-var Avatar = require('./Avatar-DQ5fNpnO.js');
+var Avatar = require('./Avatar-C8tufLEH.js');
 var index = require('./components/Badge.js');
 var Breadcrumbs = require('./Breadcrumbs-HubY1qZQ.js');
 var Button = require('./Button-3GkRq8Pv.js');

package/dist/cjs/hooks/styleAttributes.interface.d.ts

@@ -1,3 +1,4 @@
+import { overflowPropsType } from '../types';
 export interface TypeStyleAttributes {
     /**
      * Layout
@@ -40,7 +41,7 @@ export interface TypeStyleAttributes {
     minHeight?: string;
     minWidth?: string;
     order?: string;
-    overflow?: string;
+    overflow?: overflowPropsType;
     padding?: string;
     paddingBottom?: string;
     paddingEnd?: string;

package/dist/cjs/types/componentProps/overflow.d.ts

@@ -0,0 +1 @@
+export type overflowPropsType = null | 'visible' | 'hidden' | 'scroll';

package/dist/cjs/types/index.d.ts

@@ -28,6 +28,7 @@ export type { iconFillSizePropsType } from './componentProps/iconFillSize';
 export type { iconSizePropsType } from './componentProps/iconSize';
 export type { itemColorPropsType } from './componentProps/itemColor';
 export type { justifyContentPropsType } from './componentProps/justifyContent';
+export type { overflowPropsType } from './componentProps/overflow.ts';
 export type { positionPropsType } from './componentProps/position';
 export type { resizeModePropsType } from './componentProps/resizeMode';
 export type { shapePropsType } from './componentProps/shape';

package/dist/components/Avatar/Avatar.d.ts

@@ -1,13 +1,3 @@
 import { IAvatarProps } from './Avatar.interface';
 declare function Avatar(props: IAvatarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Avatar {
-    var defaultProps: {
-        size: string;
-        textSize: string;
-        textColor: string;
-        textWeight: number;
-        firstName: string;
-        secondName: string;
-    };
-}
 export { Avatar };

package/dist/components/Avatar.js

@@ -1,4 +1,4 @@
-export { A as Avatar } from '../Avatar-diLCwtnd.js';
+export { A as Avatar } from '../Avatar-DB6Si0s1.js';
 import '../jsx-runtime-ClDdVO4Q.js';
 import 'react';
 import 'clsx';

package/dist/components/Pagination.js

@@ -42,8 +42,6 @@ function Pagination(props) {
     perPageCount,
     allItemsCount,
     className,
-    forcePage,
-    pageCount,
     marginPagesDisplayed,
     pageRangeDisplayed,
     previousLabel,
@@ -53,11 +51,9 @@ function Pagination(props) {
     pageCountDesc,
     pageCountDescTextColor,
     pageCountDescTextSize,
-    pageCountInput,
     pageCountInputTextColor,
     pageCountInputTextSize,
     pageCountInputIcon,
-    pageCountInputIconFill,
     pageCountInputIconFillSize,
     pageCountInputIconColor,
     pageCountDropdownAlignment,
@@ -74,7 +70,6 @@ function Pagination(props) {
     pageCountDropdownItemFillActive,
     pageCountDropdownItemFillActiveHover,
     pageCountDropdownItemFillHover,
-    pageCountDropdownItemLabel,
     pageCountDropdownItemLabelColor,
     pageCountDropdownItemLabelColorActive,
     pageCountDropdownItemLabelSize,
@@ -85,12 +80,14 @@ function Pagination(props) {
   } = props;
   const [isOpenDropdown, setIsOpenDropdown] = useState(false);
   const [showPagination, setShowPagination] = useState(true);
+  const [pageCountDropdownArray, setPageCountDropdownArray] = useState([]);
   const [activeDropdownItem, setActiveDropdownItem] = useState(10);
   // Toggle command menu
   const onClickCommandMenuButton = useCallback(event => {
     setIsOpenDropdown(state => !state);
   }, []);
-  const handleDropdownItemClick = useCallback(item => {
+  const handleDropdownItemClick = useCallback((event, item) => {
+    event.stopPropagation();
     onPerPageCountChange(item);
     setActiveDropdownItem(item);
     setIsOpenDropdown(false);
@@ -103,6 +100,14 @@ function Pagination(props) {
     prefix: 'gap_',
     propsKey: 'gap'
   });
+  const fillClass = useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
 
   // Calculate count of pages for all items
   const paginationPagesCount = useMemo(() => {
@@ -123,12 +128,8 @@ function Pagination(props) {
     return 0;
   }, [pageNumber]);
   useEffect(() => {
-    if (paginationPagesCount <= 1) {
-      setShowPagination(false);
-      return;
-    }
-    setShowPagination(true);
-  }, [paginationPagesCount]);
+    setPageCountDropdownArray(isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray);
+  }, [pageCountArray, isPageCountDropdownReversed]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "pagination"
   }, showPagination && /*#__PURE__*/React__default.createElement(ReactPaginate, {
@@ -169,13 +170,12 @@ function Pagination(props) {
     size: pageCountDescTextSize,
     textColor: pageCountDescTextColor
   }, pageCountDesc), /*#__PURE__*/React__default.createElement("div", {
-    className: "pagination__input",
+    className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass),
     onClick: onClickCommandMenuButton
   }, /*#__PURE__*/React__default.createElement(Text, {
     size: pageCountInputTextSize,
     textColor: pageCountInputTextColor
   }, activeDropdownItem), /*#__PURE__*/React__default.createElement(Icon, {
-    fill: pageCountInputIconFill,
     fillSize: pageCountInputIconFillSize,
     iconFill: pageCountInputIconColor,
     SvgImage: pageCountInputIcon
@@ -187,7 +187,7 @@ function Pagination(props) {
     set: pageCountDropdownSet,
     setIsOpen: setIsOpenDropdown,
     shape: pageCountDropdownShape
-  }, (isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray).map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.createElement(DropdownItem, {
+  }, pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.createElement(DropdownItem, {
     dividerDirection: pageCountDropdownItemDividerDirection,
     dividerFill: pageCountDropdownItemDividerFill,
     dividerSize: pageCountDropdownItemDividerSize,
@@ -204,7 +204,7 @@ function Pagination(props) {
     labelTextWrap: pageCountDropdownItemLabelWrap,
     set: pageCountDropdownItemSet,
     showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
-    onClick: () => handleDropdownItemClick(item)
+    onClick: event => handleDropdownItemClick(event, item)
   }) : /*#__PURE__*/React__default.createElement(DropdownItem, {
     dividerDirection: pageCountDropdownItemDividerDirection,
     dividerFill: pageCountDropdownItemDividerFill,
@@ -220,7 +220,7 @@ function Pagination(props) {
     labelTextWrap: pageCountDropdownItemLabelWrap,
     set: pageCountDropdownItemSet,
     showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
-    onClick: () => handleDropdownItemClick(item)
+    onClick: event => handleDropdownItemClick(event, item)
   }))))));
 }
 Pagination.propTypes = {

package/dist/components/Panel/Panel.d.ts

@@ -0,0 +1,7 @@
+import { IPanelConfig, IPanelProps } from './Panel.interface';
+declare const panelConfig: IPanelConfig;
+declare function Panel(props: IPanelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Panel {
+    var defaultProps: {};
+}
+export { Panel, panelConfig };

package/dist/components/Panel/Panel.interface.d.ts

@@ -0,0 +1,56 @@
+import React, { CSSProperties } from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { alignDirectionPropsType, borderColorPropsType, borderTypePropsType, borderWidthPropsType, elevationPropsType, fillHoverPropsType, fillPropsType, flexAlignPropsType, flexJustifyContentPropsType, flexWrapPropsType, heightPropsType, positionPropsType, shapePropsType, textColorPropsType, textSizePropsType, textWeightPropsType, widthPropsType } from '../../types';
+import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
+interface ThemeColor {
+    fill?: string;
+    fillHover?: string;
+    labelTextColor?: string;
+    border?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    direction?: alignDirectionPropsType;
+}
+type appearanceKeysType = appearanceKeysDefaultType & {};
+type appearanceType = {
+    [key in appearanceKeysType]: ThemeColor;
+};
+export interface IPanelConfig {
+    appearance: appearanceType | undefined;
+    setAppearance: (newComponent: appearanceType) => void;
+}
+export interface IPanelProps extends TypeStyleAttributes {
+    appearance?: appearanceKeysType;
+    children?: React.ReactNode;
+    className?: string;
+    horizontalScroll?: boolean;
+    verticalScroll?: boolean;
+    htmlFor?: string;
+    set?: string;
+    style?: CSSProperties;
+    dataTour?: string;
+    alignContent?: flexJustifyContentPropsType;
+    alignItems?: flexAlignPropsType;
+    justifyContent?: flexJustifyContentPropsType;
+    wrap?: flexWrapPropsType;
+    direction?: alignDirectionPropsType;
+    fill?: fillPropsType;
+    fillHover?: fillHoverPropsType;
+    shape?: shapePropsType;
+    width?: widthPropsType;
+    height?: heightPropsType;
+    borderColor?: borderColorPropsType;
+    borderWidth?: borderWidthPropsType;
+    borderType?: borderTypePropsType;
+    elevation?: elevationPropsType;
+    position?: positionPropsType;
+    title?: string;
+    titleTextSize?: textSizePropsType;
+    titleTextColor?: textColorPropsType;
+    titleTextWeight?: textWeightPropsType;
+    desc?: string;
+    descTextSize?: textSizePropsType;
+    descTextColor?: textColorPropsType;
+    descTextWeight?: textWeightPropsType;
+}
+export {};

package/dist/components/Panel/index.d.ts

@@ -0,0 +1 @@
+export { Panel, panelConfig } from './Panel';

package/dist/components/Panel.js

@@ -0,0 +1,105 @@
+import { j as jsxRuntimeExports } from '../jsx-runtime-ClDdVO4Q.js';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { G as Group } from '../Group-fbVPmr8W.js';
+import { T as Text } from '../Text-BcGbRc14.js';
+import 'react';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import 'prop-types';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+
+var panelConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        panelConfig.appearance = newComponent;
+    },
+};
+function Panel(props) {
+    var appearance = props.appearance, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, set = props.set, dataTour = props.dataTour, title = props.title, titleTextSize = props.titleTextSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, desc = props.desc, descTextSize = props.descTextSize, descTextColor = props.descTextColor, descTextWeight = props.descTextWeight, verticalScroll = props.verticalScroll;
+    var alignContentClass = useDeviceTargetClass(props, {
+        prefix: 'panel_align-content_',
+        propsKey: 'alignContent',
+    });
+    var alignItemsClass = useDeviceTargetClass(props, {
+        prefix: 'panel_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'panel_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'panel_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass(props, {
+        prefix: 'flex_wrap_',
+        propsKey: 'wrap',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'panel_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    var positionClass = useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var _a = useStyles(props), panelStyles = _a.styles, panelWrapperStyles = _a.wrapper;
+    var appearanceConfig = appearance && panelConfig.appearance && panelConfig.appearance[appearance];
+    return (jsxRuntimeExports.jsxs(Group, { className: clsx(className, 'panel', widthClass, heightClass, fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "panel_set_".concat(set), wrapClass, shapeClass, borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderWidthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
+                "border-width_".concat(appearanceConfig.borderWidth)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntimeExports.jsx("div", { className: "panel__header", children: jsxRuntimeExports.jsx(Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntimeExports.jsx("div", { className: clsx('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsxRuntimeExports.jsx("div", { className: "panel__footer", children: jsxRuntimeExports.jsx(Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
+}
+Panel.defaultProps = {};
+
+export { Panel, panelConfig };

package/dist/components/Select.js

@@ -7,8 +7,8 @@ import clsx from 'clsx';
 import { createPortal } from 'react-dom';
 import { a as autoUpdate } from '../floating-ui.dom-BQ7wiYTi.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { Badge } from './Badge.js';
 import { T as Text } from '../Text-BcGbRc14.js';
+import { Badge } from './Badge.js';
 import { G as Group$2 } from '../Group-fbVPmr8W.js';
 import { D as Divider } from '../Divider-BlBwMHgl.js';
 import '../Link-ByBzBRDH.js';
@@ -7426,45 +7426,29 @@ SelectControl.__docgenInfo = {
   }
 };
 
-const SelectIndicatorsContainer = props => {
-  const {
-    badgeAppearance,
-    badgeSize,
-    badgeTextSize,
-    showBadge,
-    value
-  } = props.selectProps;
-  return /*#__PURE__*/React__default.createElement(components$1.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React__default.createElement(Badge, {
-    appearance: badgeAppearance,
-    size: badgeSize,
-    textSize: badgeTextSize,
-    value: value.length
-  }) : null, props.children);
-};
-SelectIndicatorsContainer.propTypes = {};
-SelectIndicatorsContainer.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "SelectIndicatorsContainer"
-};
-
 const SelectDropdownIndicator = props => {
   const {
+    dropdownFillHover,
     dropdownIcon,
     dropdownIconFill,
+    dropdownIconShape,
     dropdownIconStroke
   } = props.selectProps;
   return /*#__PURE__*/React__default.createElement(components$1.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     SvgImage: dropdownIcon,
     iconFill: dropdownIconFill,
-    iconStroke: dropdownIconStroke
+    fillHover: dropdownFillHover,
+    iconStroke: dropdownIconStroke,
+    shape: dropdownIconShape
   }) : props.children);
 };
 SelectDropdownIndicator.propTypes = {
   selectProps: PropTypes.shape({
     // "dropdownIcon" is SvgImage(file.svg)
+    dropdownFillHover: PropTypes.string,
     dropdownIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
     dropdownIconFill: PropTypes.string,
+    dropdownIconShape: PropTypes.string,
     dropdownIconStroke: PropTypes.string
   })
 };
@@ -7478,6 +7462,10 @@ SelectDropdownIndicator.__docgenInfo = {
       "type": {
         "name": "shape",
         "value": {
+          "dropdownFillHover": {
+            "name": "string",
+            "required": false
+          },
           "dropdownIcon": {
             "name": "union",
             "value": [{
@@ -7491,6 +7479,10 @@ SelectDropdownIndicator.__docgenInfo = {
             "name": "string",
             "required": false
           },
+          "dropdownIconShape": {
+            "name": "string",
+            "required": false
+          },
           "dropdownIconStroke": {
             "name": "string",
             "required": false
@@ -7537,6 +7529,28 @@ SelectGroupHeading.__docgenInfo = {
   }
 };
 
+const SelectIndicatorsContainer = props => {
+  const {
+    badgeAppearance,
+    badgeSize,
+    badgeTextSize,
+    showBadge,
+    value
+  } = props.selectProps;
+  return /*#__PURE__*/React__default.createElement(components$1.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React__default.createElement(Badge, {
+    appearance: badgeAppearance,
+    size: badgeSize,
+    textSize: badgeTextSize,
+    value: value.length
+  }) : null, props.children);
+};
+SelectIndicatorsContainer.propTypes = {};
+SelectIndicatorsContainer.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SelectIndicatorsContainer"
+};
+
 const SelectInput = props => {
   const {
     inputTextSize,
@@ -8039,8 +8053,10 @@ const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectCo
     dividerDirection,
     dividerFill,
     dividerSize,
+    dropdownFillHover,
     dropdownIcon,
     dropdownIconFill,
+    dropdownIconShape,
     dropdownIconStroke,
     multipleItemIcon,
     multipleItemIconFill,
@@ -8223,8 +8239,10 @@ const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectCo
     dividerDirection: dividerDirection,
     dividerFill: dividerFill,
     dividerSize: dividerSize,
+    dropdownFillHover: dropdownFillHover,
     dropdownIcon: dropdownIcon,
     dropdownIconFill: dropdownIconFill,
+    dropdownIconShape: dropdownIconShape,
     dropdownIconStroke: dropdownIconStroke,
     elevation: elevation || selectAppearanceItem.elevation,
     filterOption: filterOption,
@@ -8293,8 +8311,10 @@ SelectContainer.propTypes = {
   clearIconStroke: PropTypes.string,
   closeMenuOnSelect: PropTypes.bool,
   // "dropdownIcon" is SvgImage(file.svg)
+  dropdownFillHover: PropTypes.string,
   dropdownIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   dropdownIconFill: PropTypes.string,
+  dropdownIconShape: PropTypes.string,
   dropdownIconStroke: PropTypes.string,
   filterOption: PropTypes.func,
   initialValue: PropTypes.any,
@@ -8371,6 +8391,13 @@ SelectContainer.__docgenInfo = {
       },
       "required": false
     },
+    "dropdownFillHover": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "dropdownIcon": {
       "description": "",
       "type": {
@@ -8390,6 +8417,13 @@ SelectContainer.__docgenInfo = {
       },
       "required": false
     },
+    "dropdownIconShape": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "dropdownIconStroke": {
       "description": "",
       "type": {

package/dist/components.js

@@ -1,5 +1,5 @@
 export { A as Accordion, a as AccordionItem } from './Accordion-CqPVnTKh.js';
-export { A as Avatar } from './Avatar-diLCwtnd.js';
+export { A as Avatar } from './Avatar-DB6Si0s1.js';
 export { Badge, badgeConfig } from './components/Badge.js';
 export { B as Breadcrumbs, a as BreadcrumbsItem } from './Breadcrumbs-B79kOtMG.js';
 export { B as Button, b as buttonConfig } from './Button-B7vbiqrJ.js';

package/dist/css/components/Link/Link.css

@@ -1,5 +1,9 @@
 .link {
   color: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
 }
 .link {
   &_underline {

package/dist/css/components/Pagination/Pagination.css

@@ -21,6 +21,8 @@
     border-radius: 8px;
     position: relative;
     display: flex;
+    justify-content: center;
+    align-items: center;
     gap: 4px;
   }
 }

package/dist/css/components/Panel/Panel.css

@@ -0,0 +1,107 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  &__wrapper {
+    align-items: stretch;
+  }
+}
+.panel {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+    }
+    &_horizontal-reverse {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+    &_vertical-reverse {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+  }
+}
+.panel {
+  @each $val in flex-start, flex-end, center, space-between, space-around, stretch {
+    &_align-content_$(val) {
+      align-content: $(val);
+    }
+  }
+}
+.panel {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-self_$(val) {
+      align-self: $(val);
+    }
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}
+.panel {
+  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly, flexStart,
+    flexEnd, center, spaceBetween, spaceAround, spaceEvenly {
+    &_justify-content_$(val) {
+      justify-content: $(val);
+    }
+  }
+}
+.panel {
+  &_shape {
+    &_rounded {
+      border-radius: var(--panel-shape-rounded, 12px);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.panel {
+  &_wrap {
+    &_wrap {
+      flex-wrap: wrap;
+    }
+    &_nowrap {
+      flex-wrap: nowrap;
+    }
+    &_wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
+.panel {
+  &_type {
+    &_scroll {
+      &_vertical {
+        /* ^^^&& {
+          max-height: 80%;
+        } */
+        ^^^&__wrapper {
+          max-height: 100%;
+          overflow: auto;
+          scrollbar-width: thin;
+        }
+      }
+      &_horizontal {
+        /* ^^^&& {
+          max-width: 80%;
+        } */
+        ^^^&__wrapper {
+          max-width: 100%;
+          overflow: auto;
+          scrollbar-width: thin;
+        }
+      }
+    }
+  }
+}

package/dist/hooks/styleAttributes.interface.d.ts

@@ -1,3 +1,4 @@
+import { overflowPropsType } from '../types';
 export interface TypeStyleAttributes {
     /**
      * Layout
@@ -40,7 +41,7 @@ export interface TypeStyleAttributes {
     minHeight?: string;
     minWidth?: string;
     order?: string;
-    overflow?: string;
+    overflow?: overflowPropsType;
     padding?: string;
     paddingBottom?: string;
     paddingEnd?: string;

package/dist/types/componentProps/overflow.d.ts

@@ -0,0 +1 @@
+export type overflowPropsType = null | 'visible' | 'hidden' | 'scroll';

package/dist/types/index.d.ts

@@ -28,6 +28,7 @@ export type { iconFillSizePropsType } from './componentProps/iconFillSize';
 export type { iconSizePropsType } from './componentProps/iconSize';
 export type { itemColorPropsType } from './componentProps/itemColor';
 export type { justifyContentPropsType } from './componentProps/justifyContent';
+export type { overflowPropsType } from './componentProps/overflow.ts';
 export type { positionPropsType } from './componentProps/position';
 export type { resizeModePropsType } from './componentProps/resizeMode';
 export type { shapePropsType } from './componentProps/shape';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -90,7 +90,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.16",
+    "@itcase/common": "^1.2.0",
     "clsx": "^2.1.0",
     "html5-boilerplate": "^9.0.0",
     "js-cookie": "^3.0.5",