@itcase/ui 1.1.25 → 1.2.0

package/dist/cjs/components/Video.js

@@ -1,10 +1,9 @@
 'use strict';
 
-var Video = require('../Video-B_xqvgag.js');
-require('../jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('clsx');
-require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -14,6 +13,17 @@ require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 
+function Video(props) {
+    var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;
+    // @ts-expect-error
+    var videoStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxRuntime.jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && jsxRuntime.jsx("source", { src: webm, type: "video/webm", 
+                        // @ts-expect-error
+                        codecs: "vp8, vorbis" }), ogv && jsxRuntime.jsx("source", { src: ogv, type: "video/ogg", 
+                        // @ts-expect-error
+                        codecs: "theora, vorbis" }), mp4 && jsxRuntime.jsx("source", { src: mp4, type: "video/mp4", 
+                        // @ts-expect-error
+                        codecs: "avc1.42E01E, mp4a.40.2" })] }), children] }));
+}
 
-
-exports.Video = Video.Video;
+exports.Video = Video;

package/dist/cjs/components/Wrapper.js

@@ -1,21 +1,57 @@
 'use strict';
 
-var Wrapper = require('../Wrapper-DravIzND.js');
-require('../jsx-runtime-BBxmckJR.js');
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
 require('react');
-require('clsx');
-require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 
+function Wrapper(props) {
+    var after = props.after, before = props.before, children = props.children, className = props.className, id = props.id, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, type = props.type;
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var resizeHorizontalClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'wrapper_resize-horizontal_',
+        propsKey: 'horizontalResizing',
+    });
+    var resizeVerticalClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'wrapper_resize-vertical_',
+        propsKey: 'verticalResizing',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    var wrapperPositionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'wrapperPosition',
+    });
+    // @ts-expect-error
+    var _b = useStyles.useStyles(props), wrapperStyles = _b.styles, innerStyles = _b.inner;
+    return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), style: wrapperStyles, children: jsxRuntime.jsxs("div", { className: clsx("".concat(className, "__inner"), alignDirectionClass, alignClass, wrapperPositionClass), style: innerStyles, children: [before, children, after] }) }));
+}
+Wrapper.defaultProps = {
+    className: 'wrapper',
+    tag: 'div',
+};
 
-
-exports.Wrapper = Wrapper.Wrapper;
+exports.Wrapper = Wrapper;

package/dist/cjs/components.js

@@ -1,215 +1,3 @@
 'use strict';
+'use strict';
 
-var Accordion = require('./Accordion-Ba4Use_H.js');
-var Avatar = require('./Avatar-BKK80aBG.js');
-var Badge = require('./Badge-C_bYrtVY.js');
-var Breadcrumbs = require('./Breadcrumbs-B7F96CYT.js');
-var Button = require('./Button-DH5f_2bV.js');
-var Caption = require('./Caption-f-OM1D-G.js');
-var Card = require('./Card-BhnTRJN5.js');
-var Cell = require('./Cell-Bc4BC1e3.js');
-var Checkbox = require('./Checkbox-C5EikmBn.js');
-var Chips = require('./Chips-wl8WgeWZ.js');
-var Choice = require('./Choice-DJOKyu8I.js');
-var Code = require('./Code-BJFoJBYh.js');
-var ContextMenuItem = require('./ContextMenuItem-CLU1xPrC.js');
-var CookiesWarning = require('./CookiesWarning-C-6cEf16.js');
-var DadataHintField = require('./DadataHintField-z7Mw-xDn.js');
-var DatePicker = require('./DatePicker-4tMTL9Nx.js');
-var Divider = require('./Divider-D92wY8Fn.js');
-var Dot = require('./Dot-CKWexdtn.js');
-var Drawer = require('./Drawer-AQqI18ra.js');
-var DropdownItem = require('./DropdownItem-2Nqtx3Vi.js');
-var FlexItem = require('./FlexItem-2KlvlTJY.js');
-var SwitchField = require('./SwitchField-C31Nbyyn.js');
-var GridRow = require('./GridRow-CAqZZGge.js');
-var Group = require('./Group-EFTg84wP.js');
-var HTMLContent = require('./HTMLContent-4vI2pdQC.js');
-var Icon = require('./Icon-C7ZJyN5o.js');
-var Image = require('./Image-CCx6QWZj.js');
-var Input = require('./Input-vwyG3XF0.js');
-var InputPassword = require('./InputPassword-CbrEhEJB.js');
-var Label = require('./Label-C2uLpNrU.js');
-var LanguageSelector = require('./LanguageSelector-DZC_wwP6.js');
-var Link = require('./Link-DRV1vzHd.js');
-var ListItem = require('./ListItem-B5rYml7Y.js');
-var Loader = require('./Loader-C2D6fJk1.js');
-var Logo = require('./Logo-CsOCRB7d.js');
-var Menu = require('./Menu-KYRzB912.js');
-var MenuItem = require('./MenuItem-D6T9WRQk.js');
-var ModalLoader = require('./ModalLoader-DRt-18Tr.js');
-var NotificationList = require('./NotificationList-DETpx50O.js');
-var index = require('./components/Page.js');
-var Pagination = require('./Pagination-DuykmIqr.js');
-var Radio = require('./Radio-Bvv59nEV.js');
-var RangeSlider = require('./RangeSlider-Dy53bTyY.js');
-var ScrollToView = require('./ScrollToView-DPhR0AQC.js');
-var Response = require('./Response-CTawELy2.js');
-var Scrollbar = require('./Scrollbar-DOujlQOb.js');
-var SearchResult = require('./SearchResult-CfZvZ2Rg.js');
-var Segmented = require('./Segmented-D9L6q-Sa.js');
-var index$1 = require('./components/Select.js');
-var SiteMenuButton = require('./SiteMenuButton-CC0QccWu.js');
-var Swiper = require('./Swiper-Zh5xaPu3.js');
-var Switch = require('./Switch-K1p9h3aF.js');
-var TabGroup = require('./TabGroup-BKWkofWW.js');
-var Text = require('./Text-B0SULA92.js');
-var Textarea = require('./Textarea-tng0D_n7.js');
-var Tile = require('./Tile-bPw3x_en.js');
-var Title = require('./Title-Ckp30YSI.js');
-var Tooltip = require('./Tooltip-DREz-tP6.js');
-var Video = require('./Video-B_xqvgag.js');
-var Wrapper = require('./Wrapper-DravIzND.js');
-require('./_tslib-CKiUdo7p.js');
-require('./jsx-runtime-BBxmckJR.js');
-require('react');
-require('clsx');
-require('lodash/castArray');
-require('./hooks/useDeviceTargetClass.js');
-require('lodash/camelCase');
-require('./context/UIContext.js');
-require('prop-types');
-require('./hooks/useMediaQueries.js');
-require('react-responsive');
-require('./hooks/useStyles.js');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('./hooks/styleAttributes.js');
-require('js-cookie');
-require('crypto');
-require('react-dom');
-require('./floating-ui.dom-ma2MDAMT.js');
-require('react-inlinesvg');
-require('./Overlay-CkN2X1BM.js');
-require('./context/Notifications.js');
-require('uuid');
-require('./constants/componentProps/alignDirection.js');
-require('./constants/componentProps/align.js');
-require('./constants/componentProps/fill.js');
-require('./constants/componentProps/horizontalResizeMode.js');
-require('./constants/componentProps/position.js');
-require('./constants/componentProps/verticalResizeMode.js');
-require('lodash/ceil');
-require('react-paginate');
-require('rc-slider');
-require('lodash.throttle');
-require('react-scrollbars-custom');
-require('react-select');
-
-
-
-exports.Accordion = Accordion.Accordion;
-exports.AccordionItem = Accordion.AccordionItem;
-exports.Avatar = Avatar.Avatar;
-exports.Badge = Badge.Badge;
-exports.badgeConfig = Badge.badgeConfig;
-exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
-exports.BreadcrumbsItem = Breadcrumbs.BreadcrumbsItem;
-exports.Button = Button.Button;
-exports.buttonConfig = Button.buttonConfig;
-exports.Caption = Caption.Caption;
-exports.Card = Card.Card;
-exports.Cell = Cell.Cell;
-exports.Checkbox = Checkbox.Checkbox;
-exports.checkboxConfig = Checkbox.checkboxConfig;
-exports.Chips = Chips.Chips;
-exports.chipsConfig = Chips.chipsConfig;
-exports.Choice = Choice.Choice;
-exports.choiceConfig = Choice.choiceConfig;
-exports.Code = Code.Code;
-exports.ContextMenu = ContextMenuItem.ContextMenu;
-exports.ContextMenuItem = ContextMenuItem.ContextMenuItem;
-exports.CookiesWarning = CookiesWarning.CookiesWarning;
-exports.DadataHintField = DadataHintField.DadataHintField;
-exports.DatePickerInput = DatePicker.DatePickerInput;
-exports.Divider = Divider.Divider;
-exports.Dot = Dot.Dot;
-exports.Drawer = Drawer.Drawer;
-exports.Dropdown = DropdownItem.Dropdown;
-exports.DropdownItem = DropdownItem.DropdownItem;
-exports.Flex = FlexItem.Flex;
-exports.FlexItem = FlexItem.FlexItem;
-exports.ChoiceField = SwitchField.ChoiceField;
-exports.FormField = SwitchField.FormField;
-exports.PasswordField = SwitchField.PasswordField;
-exports.SelectField = SwitchField.SelectField;
-exports.SwitchField = SwitchField.SwitchField;
-exports.Grid = GridRow.Grid;
-exports.GridItem = GridRow.GridItem;
-exports.GridRow = GridRow.GridRow;
-exports.Group = Group.Group;
-exports.groupConfig = Group.groupConfig;
-exports.HTMLContent = HTMLContent.HTMLContent;
-exports.Icon = Icon.Icon;
-exports.iconConfig = Icon.iconConfig;
-exports.Image = Image.Image;
-exports.Input = Input.Input;
-exports.inputConfig = Input.inputConfig;
-exports.inputPasswordConfig = InputPassword.inputPasswordConfig;
-exports.Label = Label.Label;
-exports.labelConfig = Label.labelConfig;
-exports.LanguageSelector = LanguageSelector.LanguageSelector;
-exports.Link = Link.Link;
-exports.LinkWrapper = Link.LinkWrapper;
-exports.linkConfig = Link.linkConfig;
-exports.List = ListItem.List;
-exports.ListItem = ListItem.ListItem;
-exports.Loader = Loader.Loader;
-exports.loaderConfig = Loader.loaderConfig;
-exports.Logo = Logo.Logo;
-exports.logoConfig = Logo.logoConfig;
-exports.Menu = Menu.Menu;
-exports.MenuItem = MenuItem.MenuItem;
-exports.menuItemConfig = MenuItem.menuItemConfig;
-exports.Modal = ModalLoader.Modal;
-exports.ModalLoader = ModalLoader.ModalLoader;
-exports.NotificationItem = NotificationList.NotificationItem;
-exports.NotificationList = NotificationList.NotificationList;
-exports.notificationItemConfig = NotificationList.notificationItemConfig;
-exports.Page = index.Page;
-exports.Pagination = Pagination.Pagination;
-exports.Radio = Radio.Radio;
-exports.radioConfig = Radio.radioConfig;
-exports.RangeSlider = RangeSlider.RangeSlider;
-exports.ScrollToView = ScrollToView.ScrollToView;
-exports.Response = Response.Response;
-exports.responseConfig = Response.responseConfig;
-exports.Scrollbar = Scrollbar.Scrollbar;
-exports.SearchInput = SearchResult.SearchInput;
-exports.SearchResult = SearchResult.SearchResult;
-exports.Segmented = Segmented.Segmented;
-exports.segmentedConfig = Segmented.segmentedConfig;
-exports.Select = index$1.Select;
-exports.SelectClearIndicator = index$1.SelectClearIndicator;
-exports.SelectControl = index$1.SelectControl;
-exports.SelectDropdownIndicator = index$1.SelectDropdownIndicator;
-exports.SelectGroupHeading = index$1.SelectGroupHeading;
-exports.SelectIndicatorsContainer = index$1.SelectIndicatorsContainer;
-exports.SelectInput = index$1.SelectInput;
-exports.SelectMenu = index$1.SelectMenu;
-exports.SelectMultiValueContainer = index$1.SelectMultiValueContainer;
-exports.SelectMultiValueLabel = index$1.SelectMultiValueLabel;
-exports.SelectMultiValueRemove = index$1.SelectMultiValueRemove;
-exports.SelectOption = index$1.SelectOption;
-exports.SelectPlaceholder = index$1.SelectPlaceholder;
-exports.SelectSingleValue = index$1.SelectSingleValue;
-exports.SelectValueContainer = index$1.SelectValueContainer;
-exports.selectConfig = index$1.selectConfig;
-exports.SiteMenu = SiteMenuButton.SiteMenu;
-exports.SiteMenuButton = SiteMenuButton.SiteMenuButton;
-exports.Swiper = Swiper.Swiper;
-exports.Switch = Switch.Switch;
-exports.Tab = TabGroup.Tab;
-exports.TabGroup = TabGroup.TabGroup;
-exports.tabConfig = TabGroup.tabConfig;
-exports.Text = Text.Text;
-exports.textConfig = Text.textConfig;
-exports.Textarea = Textarea.Textarea;
-exports.textareaConfig = Textarea.textareaConfig;
-exports.Tile = Tile.Tile;
-exports.Title = Title.Title;
-exports.titleConfig = Title.titleConfig;
-exports.Tooltip = Tooltip.Tooltip;
-exports.tooltipConfig = Tooltip.tooltipConfig;
-exports.Video = Video.Video;
-exports.Wrapper = Wrapper.Wrapper;

package/dist/cjs/context/Notifications.js

@@ -5,11 +5,6 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var uuid = require('uuid');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-
 const STATUSES = {
   error: 'error',
   info: 'info',
@@ -89,15 +84,15 @@ function NotificationsProvider(props) {
     });
     // eslint-disable-next-line
   }, []);
-  return /*#__PURE__*/React__default.default.createElement(NotificationsAPIContext.Provider, {
+  return /*#__PURE__*/React.createElement(NotificationsAPIContext.Provider, {
     value: notificationsAPI
-  }, /*#__PURE__*/React__default.default.createElement(NotificationsContext.Provider, {
+  }, /*#__PURE__*/React.createElement(NotificationsContext.Provider, {
     value: notificationsList
   }, children));
 }
 NotificationsProvider.propTypes = {
-  children: PropTypes__default.default.any,
-  initialNotificationsList: PropTypes__default.default.array
+  children: PropTypes.any,
+  initialNotificationsList: PropTypes.array
 };
 function useNotifications() {
   return React.useContext(NotificationsContext);

package/dist/cjs/context/UIContext.js

@@ -6,11 +6,6 @@ var PropTypes = require('prop-types');
 var useMediaQueries = require('../hooks/useMediaQueries.js');
 require('react-responsive');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-
 const UserDeviceContext = /*#__PURE__*/React.createContext({
   isMobile: false,
   isTablet: false,
@@ -37,18 +32,18 @@ const UIProvider = /*#__PURE__*/React.memo(function UIProvider(props) {
     setIsSiteMenuOpen
   }), [isSiteMenuOpen]);
   const mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
-  return /*#__PURE__*/React__default.default.createElement(UserDeviceContext.Provider, {
+  return /*#__PURE__*/React.createElement(UserDeviceContext.Provider, {
     value: mediaQueriesDevices
-  }, /*#__PURE__*/React__default.default.createElement(SiteMenuContext.Provider, {
+  }, /*#__PURE__*/React.createElement(SiteMenuContext.Provider, {
     value: siteMenuContextState
   }, children));
 });
 UIProvider.propTypes = {
-  children: PropTypes__default.default.any,
-  userDeviceState: PropTypes__default.default.shape({
-    isMobile: PropTypes__default.default.bool,
-    isTablet: PropTypes__default.default.bool,
-    isDesktop: PropTypes__default.default.bool
+  children: PropTypes.any,
+  userDeviceState: PropTypes.shape({
+    isMobile: PropTypes.bool,
+    isTablet: PropTypes.bool,
+    isDesktop: PropTypes.bool
   })
 };
 

package/dist/cjs/hooks/useDeviceTargetClass.js

@@ -8,11 +8,6 @@ require('prop-types');
 require('./useMediaQueries.js');
 require('react-responsive');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var castArray__default = /*#__PURE__*/_interopDefault(castArray);
-var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
-
 function useDeviceTargetClass(componentProps, hookProps) {
   /** Generate a class depending on the user's device.
    *
@@ -46,9 +41,9 @@ function useDeviceTargetClass(componentProps, hookProps) {
   }, [isMobile, isTablet, isDesktop, componentProps[propsKey], componentProps[`${propsKey}Mobile`], componentProps[`${propsKey}Tablet`], componentProps[`${propsKey}Desktop`]]);
   const targetClass = React.useMemo(() => {
     if (targetClassValue) {
-      let cleanClassValue = camelCase__default.default(String(targetClassValue));
+      let cleanClassValue = camelCase(String(targetClassValue));
       if (replace) {
-        const replaceList = castArray__default.default(replace);
+        const replaceList = castArray(replace);
         cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
       }
       return `${prefix}${cleanClassValue}`.toLowerCase();

package/dist/cjs/hooks/useStyles.js

@@ -10,18 +10,12 @@ require('prop-types');
 require('./useMediaQueries.js');
 require('react-responsive');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
-var maxBy__default = /*#__PURE__*/_interopDefault(maxBy);
-var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
-
 let DEVICE_TYPES = [];
 const removeDeviceType = originalKey => {
   // Remove "mobile"/"tablet"/"desktop"
   const withOutDeviceType = DEVICE_TYPES.reduce((cleanKey, deviceType) => {
-    if (cleanKey.endsWith(upperFirst__default.default(deviceType))) {
-      return cleanKey.replace(upperFirst__default.default(deviceType), '');
+    if (cleanKey.endsWith(upperFirst(deviceType))) {
+      return cleanKey.replace(upperFirst(deviceType), '');
     }
     return cleanKey;
   }, originalKey);
@@ -48,14 +42,14 @@ function useStyles(props) {
    */
 
   const currentDevice = React.useMemo(() => {
-    const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase__default.default(key.replace('is', '')));
+    const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase(key.replace('is', '')));
 
     // if "fullNamedDeviceTypes.isMobileLarge": true - that our device
     let currentDevice = Object.keys(fullNamedDeviceTypes).find(key => fullNamedDeviceTypes[key]);
     if (!currentDevice) {
       currentDevice = deviceBasePart;
     }
-    currentDevice = upperFirst__default.default(camelCase__default.default(currentDevice.replace('is', '')));
+    currentDevice = upperFirst(camelCase(currentDevice.replace('is', '')));
     DEVICE_TYPES = deviceTypes;
 
     // Set non-existent "currentDevice" value, to collect default styles later
@@ -73,14 +67,14 @@ function useStyles(props) {
       });
 
       // Get longest style key (e.g. "borderLeftWidth")
-      const currentStyleAttribute = maxBy__default.default(possibleStyleAttributes, 'length');
+      const currentStyleAttribute = maxBy(possibleStyleAttributes, 'length');
       if (currentStyleAttribute) {
         const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
         let value = null;
 
         // e.g. "GridWrapperInner"
         const targetElementKey = removeDeviceType(propKey.replace(currentStyleAttribute, ''));
-        const targetElementResultKey = camelCase__default.default(targetElementKey) || 'styles';
+        const targetElementResultKey = camelCase(targetElementKey) || 'styles';
         if (!resultStyles[targetElementResultKey]) {
           resultStyles[targetElementResultKey] = {};
         }

package/dist/components/Accordion.js

@@ -1,22 +1,189 @@
-export { A as Accordion, a as AccordionItem } from '../Accordion-FIIzpSgl.js';
-import '../_tslib-S-VPg1Cw.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import 'lodash/castArray';
-import '../hooks/useDeviceTargetClass.js';
+import { b as __spreadArray } from '../tslib.es6-S-VPg1Cw.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useCallback, useState, useMemo } from 'react';
+import clsx from 'clsx';
+import castArray from 'lodash/castArray';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { I as Icon } from '../Icon-CsE2-ieX.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Icon-BLqnXYOO.js';
 import 'react-inlinesvg';
-import '../Link-DtzAAQn8.js';
-import '../Tooltip-IVq3_vb4.js';
-import '../Text-Dz-KPI5I.js';
-import '../Title-zpOK2AxL.js';
+import '../Link-Bqu5amIb.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Title-BfSFPJtJ.js';
+
+var ChevronDown16 = function ChevronDown16(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M8 11C8.23051 11 8.42712 10.9233 8.60339 10.764L13.7763 6.16224C13.9254 6.03835 14 5.87316 14 5.68437C14 5.30088 13.661 5 13.2136 5C12.9966 5 12.8 5.0767 12.6508 5.20649L8 9.35398L3.34915 5.20649C3.19322 5.0767 2.99661 5 2.77966 5C2.33898 5 2 5.30089 2 5.68437C2 5.87316 2.07458 6.03835 2.22373 6.16224L7.39661 10.764C7.57288 10.9233 7.76949 10.9941 8 11Z"
+  }));
+};
+ChevronDown16.defaultProps = {
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+var ChevronTop16 = function ChevronTop16(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    d: "M8 5C7.76949 5 7.57288 5.0767 7.39661 5.23599L2.22373 9.83776C2.07458 9.96165 2 10.1268 2 10.3156C2 10.6991 2.33898 11 2.78644 11C3.00339 11 3.2 10.9233 3.34915 10.7935L8 6.64602L12.6508 10.7935C12.8068 10.9233 13.0034 11 13.2203 11C13.661 11 14 10.6991 14 10.3156C14 10.1268 13.9254 9.96165 13.7763 9.83776L8.60339 5.23599C8.42712 5.0767 8.23051 5.0059 8 5Z"
+  }));
+};
+ChevronTop16.defaultProps = {
+  width: "16",
+  height: "16",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  stroke: "none"
+};
+const icon16 = {
+  ChevronDown: ChevronDown16,
+  ChevronTop: ChevronTop16
+};
+
+function AccordionItem(props) {
+    var id = props.id, children = props.children, isExpanded = props.isExpanded, afterContent = props.afterContent, beforeContent = props.beforeContent, className = props.className, content = props.content, contentTextColor = props.contentTextColor, contentTextSize = props.contentTextSize, contentTextWeight = props.contentTextWeight, icon = props.icon, _a = props.iconFill, iconFill = _a === void 0 ? 'surfaceItemAccent' : _a, size = props.size, title = props.title, titleTextColor = props.titleTextColor, titleTextSize = props.titleTextSize, titleTextWeight = props.titleTextWeight, onClick = props.onClick;
+    var onClickTitle = useCallback(function () {
+        // "!isExpanded" - is next state of expanded
+        var thisItemData = {
+            id: id,
+            isExpanded: !isExpanded,
+            content: content,
+            title: title,
+        };
+        onClick && onClick(thisItemData);
+    }, [id, title, content, isExpanded, onClick]);
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var contentBorderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'contentBorderColor',
+    });
+    var titleBorderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'titleBorderColor',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var contentFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'contentFill',
+    });
+    var titleFillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'titleFill',
+    });
+    var titleFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'titleFillHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'accordion-item_shape_',
+        propsKey: 'shape',
+    });
+    // @ts-expect-error
+    var styles = useStyles(props).styles;
+    return (jsxs("div", { style: styles, className: clsx('accordion-item', className, borderColorClass, fillClass, fillHoverClass, shapeClass, size && "accordion-item_size_".concat(size), isExpanded && 'accordion-item_state_open'), children: [jsx(Text, { size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, className: clsx('accordion-item__title', titleBorderColorClass, titleFillClass, titleFillHoverClass, 'cursor_type_pointer'), onClick: onClickTitle, children: title }), jsx("div", { className: clsx('accordion-item__icon', 'cursor_type_pointer'), onClick: onClickTitle, children: icon || jsx(Icon, { SvgImage: icon16.ChevronDown, iconFill: iconFill, size: "16" }) }), beforeContent && beforeContent, isExpanded && (jsx("div", { className: clsx('accordion-item__content', contentBorderColorClass, contentFillClass, fillHoverClass), children: children ||
+                    (content && (jsx(Text, { size: contentTextSize, textColor: contentTextColor, textWeight: contentTextWeight, children: content }))) })), afterContent && afterContent] }));
+}
+AccordionItem.defaultProps = {
+    iconFill: 'surfaceItemAccent',
+};
+
+function Accordion(props) {
+    var children = props.children, isMultiple = props.isMultiple, className = props.className, _a = props.initial, initial = _a === void 0 ? [] : _a, items = props.items, onClickItem = props.onClickItem;
+    var _b = useState(castArray(initial)), expandedItems = _b[0], setExpandedItems = _b[1];
+    var onClickAccordionItem = useCallback(function (targetItem) {
+        setExpandedItems(function (prevState) {
+            var isExpanded = prevState.find(function (id) { return id === targetItem.id; });
+            if (isMultiple) {
+                if (isExpanded) {
+                    // ... without target id
+                    return prevState.filter(function (id) { return id !== targetItem.id; });
+                }
+                else {
+                    // ... with target id
+                    return __spreadArray(__spreadArray([], prevState, true), [targetItem.id], false);
+                }
+            }
+            else {
+                if (isExpanded) {
+                    return [];
+                }
+                else {
+                    return [targetItem.id];
+                }
+            }
+        });
+        onClickItem && onClickItem(targetItem);
+    }, [isMultiple, onClickItem]);
+    var accordionItemsList = useMemo(function () {
+        if (items) {
+            return items.map(function (item, i) { return (jsx(AccordionItem, { content: item.content, id: item.id, title: item.title, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, "accordionItem_".concat(item.id || i + 1))); });
+        }
+        if (children) {
+            // @ts-ignore
+            return React.Children.toArray(children).map(function (child) {
+                if (React.isValidElement(child)) {
+                    var childID = child.props.id || child.key;
+                    return React.cloneElement(child, {
+                        id: childID,
+                        isExpanded: expandedItems.includes(childID),
+                        onClick: onClickAccordionItem,
+                    });
+                }
+                return child;
+            });
+        }
+        return [];
+    }, [children, items, expandedItems, onClickAccordionItem]);
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var directionClass = useDeviceTargetClass(props, {
+        prefix: 'accordion_direction_',
+        propsKey: 'direction',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'accordion_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    /*
+     * paddingHorizontalWrapper="16px"
+     * paddingHorizontal - styles  (horizontal will be parsed to left/right)
+     * wrapper - target
+     */
+    // @ts-expect-error
+    var _c = useStyles(props), accordionStyles = _c.styles, accordionWrapperStyles = _c.wrapper;
+    return (jsx("div", { style: accordionStyles, className: clsx(className, 'accordion', borderColorClass, directionClass, fillClass, shapeClass, widthClass), children: jsx("div", { className: "accordion__wrapper", style: accordionWrapperStyles, children: accordionItemsList }) }));
+}
+Accordion.defaultProps = {
+    initial: [],
+};
+
+export { Accordion, AccordionItem };