@rescui/collapse 0.5.8 → 0.5.9

package/lib/_virtual/add-outline.js

@@ -1,22 +1,21 @@
 import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
-import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './index.css.js';
-var _excluded = ["theme", "size", "className"];
-var sizeStyles = {
+const sizeStyles = {
   "xs": styles.sizeXS,
   "s": styles.sizeS,
   "m": styles.sizeM,
   "l": styles.sizeL
 };
-var AddOutlineIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var theme = _ref.theme,
-      size = _ref.size,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+const AddOutlineIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    theme,
+    size,
+    className,
+    ...props
+  } = _ref;
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 24 24"
   }, props, {

package/lib/_virtual/index.css.js

@@ -1,10 +1,10 @@
 var styles = {
-  "icon": "_icon_1g6zqe1_4",
-  "sizeXS": "_sizeXS_1g6zqe1_14",
-  "sizeS": "_sizeS_1g6zqe1_18",
-  "sizeM": "_sizeM_1g6zqe1_22",
-  "sizeL": "_sizeL_1g6zqe1_26",
-  "light": "_light_1g6zqe1_30",
-  "dark": "_dark_1g6zqe1_34"
+  "icon": "_icon_ons1cf_4",
+  "sizeXS": "_sizeXS_ons1cf_14",
+  "sizeS": "_sizeS_ons1cf_18",
+  "sizeM": "_sizeM_ons1cf_22",
+  "sizeL": "_sizeL_ons1cf_26",
+  "light": "_light_ons1cf_30",
+  "dark": "_dark_ons1cf_34"
 };
 export { styles as default };

package/lib/_virtual/right.js

@@ -1,22 +1,21 @@
 import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
-import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './index.css.js';
-var _excluded = ["theme", "size", "className"];
-var sizeStyles = {
+const sizeStyles = {
   "xs": styles.sizeXS,
   "s": styles.sizeS,
   "m": styles.sizeM,
   "l": styles.sizeL
 };
-var RightIcon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var theme = _ref.theme,
-      size = _ref.size,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+const RightIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    theme,
+    size,
+    className,
+    ...props
+  } = _ref;
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 24 24"
   }, props, {

package/lib/accordion.js

@@ -1,26 +1,10 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "openedClassName", "size", "mode", "icon", "borderBottom", "disableLeftPadding", "gap", "theme", "value", "onChange"];
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useState } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { useThemeWithUndefined, ThemeProvider } from '@rescui/ui-contexts';
 import { collapseContext } from './context.js';
 import styles from './collapse.p.module.css.js';
-var GAP_STYLES = {
+const GAP_STYLES = {
   0: styles.accordionGap0,
   8: styles.accordionGap8,
   12: styles.accordionGap12,
@@ -28,38 +12,29 @@ var GAP_STYLES = {
   24: styles.accordionGap24,
   32: styles.accordionGap32
 };
-var Accordion = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      openedClassName = _ref.openedClassName,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
-      _ref$icon = _ref.icon,
-      icon = _ref$icon === void 0 ? 'left-plus' : _ref$icon,
-      _ref$borderBottom = _ref.borderBottom,
-      borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
-      _ref$disableLeftPaddi = _ref.disableLeftPadding,
-      disableLeftPadding = _ref$disableLeftPaddi === void 0 ? false : _ref$disableLeftPaddi,
-      _ref$gap = _ref.gap,
-      gap = _ref$gap === void 0 ? 0 : _ref$gap,
-      themeFromProps = _ref.theme,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  var isControlled = typeof value !== 'undefined';
-  var theme = useThemeWithUndefined(themeFromProps);
-
-  var _useState = useState(isControlled ? value : null),
-      _useState2 = _slicedToArray(_useState, 2),
-      openKey = _useState2[0],
-      setActiveKey = _useState2[1];
+const Accordion = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
+(_ref, ref) => {
+  let {
+    children,
+    className,
+    openedClassName,
+    size = 'm',
+    mode = 'classic',
+    icon = 'left-plus',
+    borderBottom = false,
+    disableLeftPadding = false,
+    gap = 0,
+    theme: themeFromProps,
+    value,
+    onChange,
+    ...restProps
+  } = _ref;
+  const isControlled = typeof value !== 'undefined';
+  const theme = useThemeWithUndefined(themeFromProps);
+  const [openKey, setActiveKey] = useState(isControlled ? value : null);
 
-  var toggleActiveKey = function toggleActiveKey(key) {
-    var activatingKey = key !== openKey ? key : null;
+  const toggleActiveKey = key => {
+    const activatingKey = key !== openKey ? key : null;
 
     if (onChange) {
       onChange(activatingKey);
@@ -73,23 +48,23 @@ function (_ref, ref) {
       openedKey: isControlled ? value : openKey,
       isInAccordion: true,
       isInControlledAccordion: isControlled,
-      toggleActiveKey: toggleActiveKey,
-      setActiveKey: setActiveKey,
-      size: size,
-      mode: mode,
-      icon: icon,
-      borderBottom: borderBottom,
-      disableLeftPadding: disableLeftPadding,
-      openedClassName: openedClassName
+      toggleActiveKey,
+      setActiveKey,
+      size,
+      mode,
+      icon,
+      borderBottom,
+      disableLeftPadding,
+      openedClassName
     }
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
-    "data-test": 'accordion'
-  }, restProps), {}, {
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": 'accordion',
+    ...restProps,
     className: cn(styles.accordion, GAP_STYLES[gap], className),
     ref: ref
-  }), children)));
+  }, children)));
 });
 Accordion.displayName = 'Accordion';
 Accordion.propTypes = {

package/lib/collapse.js

@@ -1,20 +1,3 @@
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "openedClassName", "size", "mode", "icon", "borderBottom", "disableLeftPadding", "title", "isDefaultOpened", "theme", "itemKey"];
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.regexp.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
 import React, { useRef, useContext, useState, useEffect } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
@@ -30,112 +13,97 @@ function getRandId() {
   return Math.random().toString(36).substring(7);
 }
 
-var THEME_STYLES = {
+const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-var SIZE_STYLES = {
+const SIZE_STYLES = {
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
 };
-var MODE_STYLES = {
+const MODE_STYLES = {
   classic: styles.classic,
   rock: styles.rock,
   clear: styles.clear
 };
-var ICON_STYLES = {
+const ICON_STYLES = {
   'left-plus': styles.iconPlus,
   'right-plus': styles.iconPlus,
   arrow: styles.iconArrow
 };
-var Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-function (_ref, ref) {
-  var _ref2, _ref3, _ref4, _ref5, _ref6;
-
-  var children = _ref.children,
-      className = _ref.className,
-      openedClassnameFromProps = _ref.openedClassName,
-      sizeFromProps = _ref.size,
-      modeFromProps = _ref.mode,
-      iconFromProps = _ref.icon,
-      borderBottomFromProps = _ref.borderBottom,
-      disableLeftPaddingFromProps = _ref.disableLeftPadding,
-      title = _ref.title,
-      _ref$isDefaultOpened = _ref.isDefaultOpened,
-      isDefaultOpened = _ref$isDefaultOpened === void 0 ? false : _ref$isDefaultOpened,
-      themeFromProps = _ref.theme,
-      itemKey = _ref.itemKey,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
+const Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
+(_ref, ref) => {
+  let {
+    children,
+    className,
+    openedClassName: openedClassnameFromProps,
+    size: sizeFromProps,
+    mode: modeFromProps,
+    icon: iconFromProps,
+    borderBottom: borderBottomFromProps,
+    disableLeftPadding: disableLeftPaddingFromProps,
+    title,
+    isDefaultOpened = false,
+    theme: themeFromProps,
+    itemKey,
+    ...restProps
+  } = _ref;
   // using the trick from  https://github.com/Yaska/react-use-id-hook/
-  var _useRef = useRef(itemKey !== null && itemKey !== void 0 ? itemKey : getRandId()),
-      key = _useRef.current;
-
-  var theme = useThemeWithUndefined(themeFromProps);
-
-  var _useContext = useContext(collapseContext),
-      openedKey = _useContext.openedKey,
-      isInAccordion = _useContext.isInAccordion,
-      isInControlledAccordion = _useContext.isInControlledAccordion,
-      toggleActiveKey = _useContext.toggleActiveKey,
-      setActiveKey = _useContext.setActiveKey,
-      sizeFromContext = _useContext.size,
-      modeFromContext = _useContext.mode,
-      iconFromContext = _useContext.icon,
-      borderBottomFromContext = _useContext.borderBottom,
-      disableLeftPaddingFromContext = _useContext.disableLeftPadding,
-      openedClassNameFromContext = _useContext.openedClassName;
-
-  var size = (_ref2 = sizeFromProps !== null && sizeFromProps !== void 0 ? sizeFromProps : sizeFromContext) !== null && _ref2 !== void 0 ? _ref2 : 'm';
-  var mode = (_ref3 = modeFromProps !== null && modeFromProps !== void 0 ? modeFromProps : modeFromContext) !== null && _ref3 !== void 0 ? _ref3 : 'classic';
-  var icon = (_ref4 = iconFromProps !== null && iconFromProps !== void 0 ? iconFromProps : iconFromContext) !== null && _ref4 !== void 0 ? _ref4 : 'left-plus';
-  var borderBottom = (_ref5 = borderBottomFromProps !== null && borderBottomFromProps !== void 0 ? borderBottomFromProps : borderBottomFromContext) !== null && _ref5 !== void 0 ? _ref5 : false;
-  var disableLeftPadding = (_ref6 = disableLeftPaddingFromProps !== null && disableLeftPaddingFromProps !== void 0 ? disableLeftPaddingFromProps : disableLeftPaddingFromContext) !== null && _ref6 !== void 0 ? _ref6 : false;
-  var openedClassName = openedClassnameFromProps !== null && openedClassnameFromProps !== void 0 ? openedClassnameFromProps : openedClassNameFromContext; // height calculations
-
-  var resizeRef = useRef(null);
-
-  var _useState = useState('initial'),
-      _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1];
-
-  useResizeObserver(resizeRef, function (entry) {
-    return setHeight(entry.target.offsetHeight);
-  });
-  var isHeightCalculated = height !== 'initial'; // this state is ignored in accordion
-
-  var _useState3 = useState(isDefaultOpened),
-      _useState4 = _slicedToArray(_useState3, 2),
-      shouldBeOpenedLocal = _useState4[0],
-      setShouldBeOpenedLocal = _useState4[1]; // boolean state. ignores CLOSING and OPENING states
-
-
-  var shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal; // add CLOSING and OPENING states.
-
-  var _useCollapseState = useCollapseState({
-    shouldBeOpened: shouldBeOpened,
+  const {
+    current: key
+  } = useRef(itemKey ?? getRandId());
+  const theme = useThemeWithUndefined(themeFromProps);
+  const {
+    openedKey,
+    isInAccordion,
+    isInControlledAccordion,
+    toggleActiveKey,
+    setActiveKey,
+    size: sizeFromContext,
+    mode: modeFromContext,
+    icon: iconFromContext,
+    borderBottom: borderBottomFromContext,
+    disableLeftPadding: disableLeftPaddingFromContext,
+    openedClassName: openedClassNameFromContext
+  } = useContext(collapseContext);
+  const size = sizeFromProps ?? sizeFromContext ?? 'm';
+  const mode = modeFromProps ?? modeFromContext ?? 'classic';
+  const icon = iconFromProps ?? iconFromContext ?? 'left-plus';
+  const borderBottom = borderBottomFromProps ?? borderBottomFromContext ?? false;
+  const disableLeftPadding = disableLeftPaddingFromProps ?? disableLeftPaddingFromContext ?? false;
+  const openedClassName = openedClassnameFromProps ?? openedClassNameFromContext; // height calculations
+
+  const resizeRef = useRef(null);
+  const [height, setHeight] = useState('initial');
+  useResizeObserver(resizeRef, entry => setHeight(entry.target.offsetHeight));
+  const isHeightCalculated = height !== 'initial'; // this state is ignored in accordion
+
+  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened); // boolean state. ignores CLOSING and OPENING states
+
+  const shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal; // add CLOSING and OPENING states.
+
+  const {
+    onAnimationEnd: handleTransitionEnd,
+    state: collapseState
+  } = useCollapseState({
+    shouldBeOpened,
     // because how css transitions work, we shouldn't use OPENING and CLOSING states while height still calculating
     // it also allows us to skip animation on the first renders
     cancelAnimation: !isHeightCalculated
-  }),
-      handleTransitionEnd = _useCollapseState.onAnimationEnd,
-      collapseState = _useCollapseState.state;
-
-  var isOpening = collapseState === COLLAPSE_STATES.OPENING;
-  var isOpened = collapseState === COLLAPSE_STATES.OPEN;
-  var isClosing = collapseState === COLLAPSE_STATES.CLOSING;
-  var isClosed = collapseState === COLLAPSE_STATES.CLOSE;
-
-  var _useStartedClosing = useStartedClosing(collapseState),
-      isStartedClosing = _useStartedClosing.isStartedClosing,
-      contentRef = _useStartedClosing.contentRef;
-
-  var isRightIcon = icon === 'right-plus';
-  var Icon = icon === 'arrow' ? RightIcon : AddOutlineIcon;
-
-  var toggleOpened = function toggleOpened() {
+  });
+  const isOpening = collapseState === COLLAPSE_STATES.OPENING;
+  const isOpened = collapseState === COLLAPSE_STATES.OPEN;
+  const isClosing = collapseState === COLLAPSE_STATES.CLOSING;
+  const isClosed = collapseState === COLLAPSE_STATES.CLOSE;
+  const {
+    isStartedClosing,
+    contentRef
+  } = useStartedClosing(collapseState);
+  const isRightIcon = icon === 'right-plus';
+  const Icon = icon === 'arrow' ? RightIcon : AddOutlineIcon;
+
+  const toggleOpened = () => {
     if (toggleActiveKey) {
       toggleActiveKey(key);
     } // this state update does nothing in accordion
@@ -144,7 +112,7 @@ function (_ref, ref) {
     setShouldBeOpenedLocal(!shouldBeOpened);
   };
 
-  useEffect(function () {
+  useEffect(() => {
     // for uncontrolled accordion, tell it that this collapse is opened by default
     if (isInAccordion && !isInControlledAccordion && isDefaultOpened && setActiveKey) {
       setActiveKey(key);
@@ -152,13 +120,13 @@ function (_ref, ref) {
   }, []);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({
-    "data-test": 'collapse'
-  }, restProps), {}, {
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": 'collapse',
+    ...restProps,
     className: cn(className, styles.main, isOpening && styles.opening, isOpened && styles.opened, isClosing && !isStartedClosing && styles.closingTransition, isClosing && styles.closing, isClosed && styles.closed, !isClosed && openedClassName, SIZE_STYLES[size], MODE_STYLES[mode], ICON_STYLES[icon], borderBottom && styles.hasBorderBottom, disableLeftPadding && styles.disableLeftPadding, isRightIcon ? styles.rightIcon : styles.leftIcon, THEME_STYLES[theme]),
     "data-rs-internal": "collapse__collapse",
     ref: ref
-  }), /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "data-test": 'collapse__button',
     "data-rs-internal": "collapse__button",

package/lib/collapse.p.module.css.js

@@ -1,35 +1,35 @@
 var styles = {
-  "themeLight": "_themeLight_1vcpvif_6",
-  "themeDark": "_themeDark_1vcpvif_9",
-  "sizeS": "_sizeS_1vcpvif_13",
-  "sizeM": "_sizeM_1vcpvif_16",
-  "sizeL": "_sizeL_1vcpvif_19",
-  "classic": "_classic_1vcpvif_23",
-  "rock": "_rock_1vcpvif_26",
-  "clear": "_clear_1vcpvif_29",
-  "hasBorderBottom": "_hasBorderBottom_1vcpvif_33",
-  "leftIcon": "_leftIcon_1vcpvif_37",
-  "rightIcon": "_rightIcon_1vcpvif_40",
-  "disableLeftPadding": "_disableLeftPadding_1vcpvif_44",
-  "main": "_main_1vcpvif_48",
-  "opening": "_opening_1vcpvif_59",
-  "opened": "_opened_1vcpvif_60",
-  "closing": "_closing_1vcpvif_61",
-  "title": "_title_1vcpvif_95",
-  "content": "_content_1vcpvif_103",
-  "closed": "_closed_1vcpvif_111",
-  "closingTransition": "_closingTransition_1vcpvif_120",
-  "innerWrapper": "_innerWrapper_1vcpvif_127",
-  "button": "_button_1vcpvif_133",
-  "icon": "_icon_1vcpvif_186",
-  "iconPlus": "_iconPlus_1vcpvif_202",
-  "iconArrow": "_iconArrow_1vcpvif_207",
-  "accordion": "_accordion_1vcpvif_213",
-  "accordionGap0": "_accordionGap0_1vcpvif_218",
-  "accordionGap8": "_accordionGap8_1vcpvif_221",
-  "accordionGap12": "_accordionGap12_1vcpvif_224",
-  "accordionGap16": "_accordionGap16_1vcpvif_227",
-  "accordionGap24": "_accordionGap24_1vcpvif_230",
-  "accordionGap32": "_accordionGap32_1vcpvif_233"
+  "themeLight": "_themeLight_22glu9_6",
+  "themeDark": "_themeDark_22glu9_9",
+  "sizeS": "_sizeS_22glu9_13",
+  "sizeM": "_sizeM_22glu9_16",
+  "sizeL": "_sizeL_22glu9_19",
+  "classic": "_classic_22glu9_23",
+  "rock": "_rock_22glu9_26",
+  "clear": "_clear_22glu9_29",
+  "hasBorderBottom": "_hasBorderBottom_22glu9_33",
+  "leftIcon": "_leftIcon_22glu9_37",
+  "rightIcon": "_rightIcon_22glu9_40",
+  "disableLeftPadding": "_disableLeftPadding_22glu9_44",
+  "main": "_main_22glu9_48",
+  "opening": "_opening_22glu9_59",
+  "opened": "_opened_22glu9_60",
+  "closing": "_closing_22glu9_61",
+  "title": "_title_22glu9_95",
+  "content": "_content_22glu9_103",
+  "closed": "_closed_22glu9_111",
+  "closingTransition": "_closingTransition_22glu9_120",
+  "innerWrapper": "_innerWrapper_22glu9_127",
+  "button": "_button_22glu9_133",
+  "icon": "_icon_22glu9_186",
+  "iconPlus": "_iconPlus_22glu9_202",
+  "iconArrow": "_iconArrow_22glu9_207",
+  "accordion": "_accordion_22glu9_213",
+  "accordionGap0": "_accordionGap0_22glu9_218",
+  "accordionGap8": "_accordionGap8_22glu9_221",
+  "accordionGap12": "_accordionGap12_22glu9_224",
+  "accordionGap16": "_accordionGap16_22glu9_227",
+  "accordionGap24": "_accordionGap24_22glu9_230",
+  "accordionGap32": "_accordionGap32_22glu9_233"
 };
 export { styles as default };

package/lib/context.js

@@ -1,5 +1,5 @@
 import React from 'react';
-var collapseContext = /*#__PURE__*/React.createContext({
+const collapseContext = /*#__PURE__*/React.createContext({
   openedKey: null,
   isInAccordion: false,
   isInControlledAccordion: false,

package/lib/index.css

@@ -1,4 +1,4 @@
-._icon_1g6zqe1_4{
+._icon_ons1cf_4{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._icon_1g6zqe1_4{
+._icon_ons1cf_4{
       --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._icon_1g6zqe1_4{
+._icon_ons1cf_4{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,65 +25,53 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._icon_1g6zqe1_4{
+._icon_ons1cf_4{
 
   fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
 
   width:auto;
   height:var(--_rs-icons-height);
 }
-._sizeXS_1g6zqe1_14{
+._sizeXS_ons1cf_14{
   --_rs-icons-height:16px;
 }
-._sizeS_1g6zqe1_18{
+._sizeS_ons1cf_18{
   --_rs-icons-height:20px;
 }
-._sizeM_1g6zqe1_22{
+._sizeM_ons1cf_22{
   --_rs-icons-height:24px;
 }
-._sizeL_1g6zqe1_26{
+._sizeL_ons1cf_26{
   --_rs-icons-height:28px;
 }
-._light_1g6zqe1_30{
+._light_ons1cf_30{
   --rs-theme-dark:0;
   --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
-._dark_1g6zqe1_34{
+._dark_ons1cf_34{
   --rs-theme-dark:1;
   --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
-@-webkit-keyframes rs-icon-rotate{
-  from{
-    -webkit-transform:rotate(0deg);
-            transform:rotate(0deg);
-  }
-  to{
-    -webkit-transform:rotate(360deg);
-            transform:rotate(360deg);
-  }
-}
 @keyframes rs-icon-rotate{
   from{
-    -webkit-transform:rotate(0deg);
-            transform:rotate(0deg);
+    transform:rotate(0deg);
   }
   to{
-    -webkit-transform:rotate(360deg);
-            transform:rotate(360deg);
+    transform:rotate(360deg);
   }
 }
-._themeLight_1vcpvif_6{
+._themeLight_22glu9_6{
   --rs-theme-dark:0;
 }
-._themeDark_1vcpvif_9{
+._themeDark_22glu9_9{
   --rs-theme-dark:1;
 }
-._sizeS_1vcpvif_13{
+._sizeS_22glu9_13{
   --_rs-collapse-vertical-padding:6px;
   --_rs-collapse-horizontal-padding:8px;
   --_rs-collapse-icon-size:20px;
 }
-._sizeS_1vcpvif_13 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
+._sizeS_22glu9_13 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
       --_rs-typography-letter-spacing:normal;
       --_rs-typography-text-transform:initial;
       --_rs-typography-font-variant-numeric:initial;
@@ -114,7 +102,7 @@
       --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
       --_rs-typography-link-border-bottom-width-from-text:2px;
     }
-._sizeS_1vcpvif_13 > [data-rs-internal='collapse__content']{
+._sizeS_22glu9_13 > [data-rs-internal='collapse__content']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -148,12 +136,12 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeM_1vcpvif_16{
+._sizeM_22glu9_16{
   --_rs-collapse-vertical-padding:8px;
   --_rs-collapse-horizontal-padding:8px;
   --_rs-collapse-icon-size:24px;
 }
-._sizeM_1vcpvif_16 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
+._sizeM_22glu9_16 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
       --_rs-typography-letter-spacing:normal;
       --_rs-typography-text-transform:initial;
       --_rs-typography-font-variant-numeric:initial;
@@ -184,7 +172,7 @@
       --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
       --_rs-typography-link-border-bottom-width-from-text:2px;
     }
-._sizeM_1vcpvif_16 > [data-rs-internal='collapse__content']{
+._sizeM_22glu9_16 > [data-rs-internal='collapse__content']{
     --_rs-typography-letter-spacing:0.0015em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -219,16 +207,16 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeM_1vcpvif_16 > [data-rs-internal='collapse__content']{
+._sizeM_22glu9_16 > [data-rs-internal='collapse__content']{
     --_rs-typography-list-li-margin-top-from-text:12px;
   }
   }
-._sizeL_1vcpvif_19{
+._sizeL_22glu9_19{
   --_rs-collapse-vertical-padding:12px;
   --_rs-collapse-horizontal-padding:16px;
   --_rs-collapse-icon-size:28px;
 }
-._sizeL_1vcpvif_19 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
+._sizeL_22glu9_19 > [data-rs-internal='collapse__button'] > [data-rs-internal='collapse__title']{
       --_rs-typography-letter-spacing:normal;
       --_rs-typography-text-transform:initial;
       --_rs-typography-font-variant-numeric:initial;
@@ -259,7 +247,7 @@
       --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
       --_rs-typography-link-border-bottom-width-from-text:2px;
     }
-._sizeL_1vcpvif_19 > [data-rs-internal='collapse__content']{
+._sizeL_22glu9_19 > [data-rs-internal='collapse__content']{
     --_rs-typography-letter-spacing:normal;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -294,11 +282,11 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeL_1vcpvif_19 > [data-rs-internal='collapse__content']{
+._sizeL_22glu9_19 > [data-rs-internal='collapse__content']{
     --_rs-typography-list-li-margin-top-from-text:16px;
   }
   }
-._classic_1vcpvif_23{
+._classic_22glu9_23{
   --_rs-collapse-active-theme-flip:0;
   --_rs-collapse-active-background:rgba(
     calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
@@ -312,7 +300,7 @@
   );
   --_rs-collapse-button-hover-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 1);
 }
-._rock_1vcpvif_26{
+._rock_22glu9_26{
   --_rs-collapse-active-theme-flip:1;
   --_rs-collapse-active-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
   --_rs-collapse-active-border-bottom-to-padding-multiplier:1;
@@ -323,7 +311,7 @@
   );
   --_rs-collapse-button-hover-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 1);
 }
-._clear_1vcpvif_29{
+._clear_22glu9_29{
   --_rs-collapse-active-theme-flip:0;
   --_rs-collapse-active-background:transparent;
   --_rs-collapse-active-border-bottom-to-padding-multiplier:0;
@@ -334,27 +322,27 @@
     0.7
   );
 }
-._hasBorderBottom_1vcpvif_33{
+._hasBorderBottom_22glu9_33{
   --_rs-collapse-border-bottom-width-or-initial:1px;
 }
-._leftIcon_1vcpvif_37{
+._leftIcon_22glu9_37{
   --_rs-collapse-button-flex-direction:row;
   --_rs-collapse-icon-margin:0 var(--_rs-collapse-horizontal-padding) 0 0;
   --_rs-collapse-inner-wrapper-padding-left-base:calc(var(--_rs-collapse-horizontal-padding)*2 + var(--_rs-collapse-icon-size));
 }
-._rightIcon_1vcpvif_40{
+._rightIcon_22glu9_40{
   --_rs-collapse-button-flex-direction:row-reverse;
   --_rs-collapse-icon-margin:0 0 0 var(--_rs-collapse-horizontal-padding);
   --_rs-collapse-inner-wrapper-padding-left-base:var(
     --_rs-collapse-horizontal-padding
   );
 }
-._disableLeftPadding_1vcpvif_44{
+._disableLeftPadding_22glu9_44{
   --_rs-collapse-inner-wrapper-padding-left-from-disable-left-padding-or-initial:var(
     --_rs-collapse-horizontal-padding
   );
 }
-._main_1vcpvif_48{
+._main_22glu9_48{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -364,7 +352,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_1vcpvif_48{
+._main_22glu9_48{
       --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -373,7 +361,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_1vcpvif_48{
+._main_22glu9_48{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -381,7 +369,7 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._main_1vcpvif_48 {
+._main_22glu9_48 {
   --_rs-collapse-border-bottom-width:var(
     --_rs-collapse-border-bottom-width-or-initial,
     0px
@@ -396,9 +384,9 @@
   border-bottom:var(--_rs-collapse-border-bottom-width) solid rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
   border-radius:var(--rs-collapse-border-radius, 0px);
 }
-._main_1vcpvif_48._opening_1vcpvif_59,
-  ._main_1vcpvif_48._opened_1vcpvif_60,
-  ._main_1vcpvif_48._closing_1vcpvif_61{
+._main_22glu9_48._opening_22glu9_59,
+  ._main_22glu9_48._opened_22glu9_60,
+  ._main_22glu9_48._closing_22glu9_61{
     --rs-theme-flip:var(--_rs-collapse-active-theme-flip);
 
     padding-bottom:calc(var(--_rs-collapse-border-bottom-width)*var(--_rs-collapse-active-border-bottom-to-padding-multiplier));
@@ -408,7 +396,7 @@
     background:var(--_rs-collapse-active-background);
   }
 @media (hover: hover){
-    ._main_1vcpvif_48:hover{
+    ._main_22glu9_48:hover{
       --rs-theme-flip:var(--_rs-collapse-active-theme-flip);
 
       padding-bottom:calc(var(--_rs-collapse-border-bottom-width)*var(--_rs-collapse-active-border-bottom-to-padding-multiplier));
@@ -418,7 +406,7 @@
       background:var(--_rs-collapse-active-background);
     }
   }
-._title_1vcpvif_95{
+._title_22glu9_95{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -429,18 +417,13 @@
   font-weight:var(--_rs-typography-font-weight);
   line-height:var(--_rs-typography-line-height);
   font-variant-numeric:var(--_rs-typography-font-variant-numeric);
-  -webkit-font-feature-settings:'kern', 'liga', 'calt';
   font-feature-settings:'kern', 'liga', 'calt';
 
-  -webkit-box-flex:1;
-
-      -ms-flex:1 1 auto;
-
-          flex:1 1 auto;
+  flex:1 1 auto;
 
   color:inherit;
 }
-._content_1vcpvif_103{
+._content_22glu9_103{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -451,7 +434,6 @@
   font-weight:var(--_rs-typography-font-weight);
   line-height:var(--_rs-typography-line-height);
   font-variant-numeric:var(--_rs-typography-font-variant-numeric);
-  -webkit-font-feature-settings:'kern', 'liga', 'calt';
   font-feature-settings:'kern', 'liga', 'calt';
   color:var(
   --rs-color-hard,
@@ -462,24 +444,22 @@
 
   height:0;
 }
-._closed_1vcpvif_111 > ._content_1vcpvif_103{
+._closed_22glu9_111 > ._content_22glu9_103{
     display:none;
   }
-._opened_1vcpvif_60 > ._content_1vcpvif_103{
+._opened_22glu9_60 > ._content_22glu9_103{
     height:initial;
   }
-._opening_1vcpvif_59 > ._content_1vcpvif_103,
-  ._closingTransition_1vcpvif_120 > ._content_1vcpvif_103{
+._opening_22glu9_59 > ._content_22glu9_103,
+  ._closingTransition_22glu9_120 > ._content_22glu9_103{
     overflow:hidden;
 
-    -webkit-transition:height 300ms;
-
     transition:height 300ms;
   }
-._innerWrapper_1vcpvif_127{
+._innerWrapper_22glu9_127{
   padding:0 var(--_rs-collapse-horizontal-padding) var(--_rs-collapse-horizontal-padding) var(--_rs-collapse-inner-wrapper-padding-left);
 }
-._button_1vcpvif_133{
+._button_22glu9_133{
   color:var(
   --rs-color-hard,
   rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227))
@@ -487,20 +467,11 @@
 
   position:relative;
 
-  display:-webkit-box;
-
-  display:-ms-flexbox;
-
   display:flex;
 
   overflow:visible;
-  -webkit-box-orient:vertical;
-  -webkit-box-direction:normal;
-      -ms-flex-direction:var(--_rs-collapse-button-flex-direction);
-          flex-direction:var(--_rs-collapse-button-flex-direction);
-  -webkit-box-align:start;
-      -ms-flex-align:start;
-          align-items:flex-start;
+  flex-direction:var(--_rs-collapse-button-flex-direction);
+  align-items:flex-start;
 
   width:100%;
   margin:0;
@@ -516,92 +487,72 @@
 
   font:inherit;
   line-height:normal;
-  -webkit-transition:var(--_rs-collapse-button-transition);
   transition:var(--_rs-collapse-button-transition);
   -webkit-font-smoothing:inherit;
   -moz-osx-font-smoothing:inherit;
   -webkit-appearance:none;
 }
-._button_1vcpvif_133::-moz-focus-inner{
+._button_22glu9_133::-moz-focus-inner{
     padding:0;
 
     border:0;
   }
-._button_1vcpvif_133:focus{
+._button_22glu9_133:focus{
     outline:none;
   }
-._button_1vcpvif_133:focus[data-focus-method='key']{
-    -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
-            box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
+._button_22glu9_133:focus[data-focus-method='key']{
+    box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
 @media (hover: hover){
-    ._button_1vcpvif_133:hover{
+    ._button_22glu9_133:hover{
       color:var(--_rs-collapse-button-hover-color);
       background:var(--_rs-collapse-button-hover-background);
     }
   }
-._icon_1vcpvif_186{
+._icon_22glu9_186{
   position:relative;
   top:0;
   left:0;
 
-  -webkit-box-flex:0;
-
-      -ms-flex:0 0 auto;
-
-          flex:0 0 auto;
+  flex:0 0 auto;
 
   width:auto;
   height:var(--_rs-collapse-icon-size);
   margin:var(--_rs-collapse-icon-margin);
 
-  -webkit-transition:-webkit-transform 300ms;
-
-  transition:-webkit-transform 300ms;
-
   transition:transform 300ms;
-
-  transition:transform 300ms, -webkit-transform 300ms;
-  -webkit-transform-origin:center center;
-          transform-origin:center center;
+  transform-origin:center center;
 
   will-change:transform;
 }
-._opening_1vcpvif_59._iconPlus_1vcpvif_202 > ._button_1vcpvif_133 > ._icon_1vcpvif_186,
-  ._opened_1vcpvif_60._iconPlus_1vcpvif_202 > ._button_1vcpvif_133 > ._icon_1vcpvif_186{
-    -webkit-transform:rotate(45deg);
-            transform:rotate(45deg);
+._opening_22glu9_59._iconPlus_22glu9_202 > ._button_22glu9_133 > ._icon_22glu9_186,
+  ._opened_22glu9_60._iconPlus_22glu9_202 > ._button_22glu9_133 > ._icon_22glu9_186{
+    transform:rotate(45deg);
   }
-._opening_1vcpvif_59._iconArrow_1vcpvif_207 > ._button_1vcpvif_133 > ._icon_1vcpvif_186,
-  ._opened_1vcpvif_60._iconArrow_1vcpvif_207 > ._button_1vcpvif_133 > ._icon_1vcpvif_186{
-    -webkit-transform:rotate(90deg);
-            transform:rotate(90deg);
+._opening_22glu9_59._iconArrow_22glu9_207 > ._button_22glu9_133 > ._icon_22glu9_186,
+  ._opened_22glu9_60._iconArrow_22glu9_207 > ._button_22glu9_133 > ._icon_22glu9_186{
+    transform:rotate(90deg);
   }
-._accordion_1vcpvif_213{
-  display:-webkit-box;
-  display:-ms-flexbox;
+._accordion_22glu9_213{
   display:flex;
-  -webkit-box-orient:vertical;
-  -webkit-box-direction:normal;
-      -ms-flex-direction:column;
-          flex-direction:column;
+  flex-direction:column;
   row-gap:var(--_rs-collapse-accordion-gap);
 }
-._accordionGap0_1vcpvif_218{
+._accordionGap0_22glu9_218{
   --_rs-collapse-accordion-gap:0px;
 }
-._accordionGap8_1vcpvif_221{
+._accordionGap8_22glu9_221{
   --_rs-collapse-accordion-gap:8px;
 }
-._accordionGap12_1vcpvif_224{
+._accordionGap12_22glu9_224{
   --_rs-collapse-accordion-gap:12px;
 }
-._accordionGap16_1vcpvif_227{
+._accordionGap16_22glu9_227{
   --_rs-collapse-accordion-gap:16px;
 }
-._accordionGap24_1vcpvif_230{
+._accordionGap24_22glu9_230{
   --_rs-collapse-accordion-gap:24px;
 }
-._accordionGap32_1vcpvif_233{
+._accordionGap32_22glu9_233{
   --_rs-collapse-accordion-gap:32px;
 }

package/lib/use-collapse-state.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import { useState, useRef, useCallback } from 'react';
 var COLLAPSE_STATES;
 
@@ -11,27 +10,21 @@ var COLLAPSE_STATES;
 
 
 function useCollapseState(_ref) {
-  var shouldBeOpened = _ref.shouldBeOpened,
-      cancelAnimation = _ref.cancelAnimation;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      setDummyState = _useState2[1];
-
-  var stateRef = useRef(COLLAPSE_STATES.CLOSE);
-  var onAnimationEnd = useCallback(function () {
+  let {
+    shouldBeOpened,
+    cancelAnimation
+  } = _ref;
+  const [, setDummyState] = useState(false);
+  const stateRef = useRef(COLLAPSE_STATES.CLOSE);
+  const onAnimationEnd = useCallback(() => {
     if ((stateRef.current === COLLAPSE_STATES.CLOSING || stateRef.current === COLLAPSE_STATES.OPENING) && !shouldBeOpened) {
       stateRef.current = COLLAPSE_STATES.CLOSE; //force rerender
 
-      setDummyState(function (s) {
-        return !s;
-      });
+      setDummyState(s => !s);
     } else if (stateRef.current === COLLAPSE_STATES.OPENING && shouldBeOpened) {
       stateRef.current = COLLAPSE_STATES.OPEN; //force rerender
 
-      setDummyState(function (s) {
-        return !s;
-      });
+      setDummyState(s => !s);
     }
   }, [shouldBeOpened]);
 
@@ -42,25 +35,22 @@ function useCollapseState(_ref) {
   }
 
   return {
-    onAnimationEnd: onAnimationEnd,
+    onAnimationEnd,
     state: stateRef.current
   };
 }
 
 function useStartedClosing(state) {
-  var isStartedClosingRef = useRef(false);
-  var prevState = useRef(state);
-  var contentRef = useRef(null);
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      setDummyState = _useState4[1];
+  const isStartedClosingRef = useRef(false);
+  const prevState = useRef(state);
+  const contentRef = useRef(null);
+  const [, setDummyState] = useState(false);
 
   if (prevState.current === COLLAPSE_STATES.OPEN && state === COLLAPSE_STATES.CLOSING) {
     isStartedClosingRef.current = true; // the next frame we need to force layout recalculations and new render
 
     if (typeof window !== 'undefined') {
-      requestAnimationFrame(function () {
+      requestAnimationFrame(() => {
         if (!contentRef.current || !isStartedClosingRef.current) {
           return;
         } // force layout recalc, without this step firefox doesn't register style values for transitions
@@ -69,9 +59,7 @@ function useStartedClosing(state) {
 
         contentRef.current.offsetHeight;
         isStartedClosingRef.current = false;
-        setDummyState(function (s) {
-          return !s;
-        });
+        setDummyState(s => !s);
       });
     }
   }
@@ -79,7 +67,7 @@ function useStartedClosing(state) {
   prevState.current = state;
   return {
     isStartedClosing: isStartedClosingRef.current,
-    contentRef: contentRef
+    contentRef
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/collapse",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -14,10 +14,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.14.0",
-    "@rescui/use-resize-observer": "^0.2.4",
-    "classnames": "^2.2.6",
-    "core-js": "^3.9.1"
+    "@babel/runtime-corejs3": "^7.26.0",
+    "@rescui/use-resize-observer": "^0.2.5",
+    "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.5.0",
@@ -25,9 +24,9 @@
     "react": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.5",
-    "@rescui/scripts": "^0.3.4",
-    "@rescui/typography": "^0.19.0",
+    "@rescui/colors": "^0.2.6",
+    "@rescui/scripts": "^0.3.5",
+    "@rescui/typography": "^0.19.1",
     "@rescui/visual-regression": "^0.1.2",
     "@types/classnames": "^2.2.11"
   },
@@ -36,5 +35,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "69a84812628809943698f0b27643c83dc449f119"
+  "gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
 }