@rescui/collapse 0.5.8 → 0.5.10-RUI-226-Update-card-cn-6e43cc89.60

package/lib/_virtual/index.css.js

@@ -1,10 +1,15 @@
 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_15yklic_4",
+  "sizeXS": "_sizeXS_15yklic_14",
+  "sizeS": "_sizeS_15yklic_18",
+  "sizeM": "_sizeM_15yklic_22",
+  "sizeL": "_sizeL_15yklic_26",
+  "light": "_light_15yklic_30",
+  "dark": "_dark_15yklic_34",
+  "allVariants": "_allVariants_15yklic_48",
+  "variant16": "_variant16_15yklic_53",
+  "variant20": "_variant20_15yklic_54",
+  "variant24": "_variant24_15yklic_55",
+  "variant28": "_variant28_15yklic_58"
 };
 export { styles as default };

package/lib/_virtual/plus.js

@@ -0,0 +1,106 @@
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import styles from './index.css.js';
+const sizeStyles = {
+  "xs": styles.sizeXS,
+  "s": styles.sizeS,
+  "m": styles.sizeM,
+  "l": styles.sizeL
+};
+const Size = {
+  "xs": "xs",
+  "s": "s",
+  "m": "m",
+  "l": "l"
+};
+const PlusIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 16 16"
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M8 1.75a.75.75 0 0 1 .75.75v4.75h4.75a.75.75 0 0 1 0 1.5H8.75v4.75a.75.75 0 0 1-1.5 0V8.75H2.5a.75.75 0 0 1 0-1.5h4.75V2.5A.75.75 0 0 1 8 1.75"
+})));
+PlusIcon16.displayName = 'PlusIcon16';
+const PlusIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 20 20"
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10 3a1 1 0 0 1 1 1v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5H4a1 1 0 1 1 0-2h5V4a1 1 0 0 1 1-1"
+})));
+PlusIcon20.displayName = 'PlusIcon20';
+const PlusIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 24 24"
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M12.5 3A1.5 1.5 0 0 1 14 4.5V10h5.5a1.5 1.5 0 0 1 0 3H14v5.5a1.5 1.5 0 0 1-3 0V13H5.5a1.5 1.5 0 0 1 0-3H11V4.5A1.5 1.5 0 0 1 12.5 3"
+})));
+PlusIcon24.displayName = 'PlusIcon24';
+const PlusIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 28 28"
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M14.5 4A1.5 1.5 0 0 1 16 5.5V12h6.5a1.5 1.5 0 0 1 0 3H16v6.5a1.5 1.5 0 0 1-3 0V15H6.5a1.5 1.5 0 0 1 0-3H13V5.5A1.5 1.5 0 0 1 14.5 4"
+})));
+PlusIcon28.displayName = 'PlusIcon28';
+const PlusIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    theme,
+    size: sizeFromProps = "m",
+    className,
+    style,
+    ['data-render-all-sizes']: renderAllSizes = false,
+    ...props
+  } = _ref;
+  const size = sizeFromProps in Size ? sizeFromProps : "m";
+  const mainProps = { ...props,
+    className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
+    style: renderAllSizes ? {
+      '--rs-icon-ar-width': 28,
+      '--rs-icon-ar-height': 28,
+      ...style
+    } : style,
+    ref
+  };
+
+  if (renderAllSizes) {
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      viewBox: "0 0 28 28"
+    }, mainProps), /*#__PURE__*/React.createElement(PlusIcon16, {
+      className: styles.variant16
+    }), /*#__PURE__*/React.createElement(PlusIcon20, {
+      className: styles.variant20
+    }), /*#__PURE__*/React.createElement(PlusIcon24, {
+      className: styles.variant24
+    }), /*#__PURE__*/React.createElement(PlusIcon28, {
+      className: styles.variant28
+    }));
+  }
+
+  if (size === Size['xs']) {
+    return /*#__PURE__*/React.createElement(PlusIcon16, mainProps);
+  }
+
+  if (size === Size['s']) {
+    return /*#__PURE__*/React.createElement(PlusIcon20, mainProps);
+  }
+
+  if (size === Size['m']) {
+    return /*#__PURE__*/React.createElement(PlusIcon24, mainProps);
+  }
+
+  return /*#__PURE__*/React.createElement(PlusIcon28, mainProps);
+});
+PlusIcon.displayName = 'PlusIcon';
+PlusIcon.propTypes = {
+  className: PropTypes.string,
+  theme: PropTypes.oneOf(["light", "dark"]),
+  size: PropTypes.oneOf(["xs", "s", "m", "l"]),
+  'data-render-all-sizes': PropTypes.bool,
+  style: PropTypes.object
+};
+export { Size, PlusIcon as default };

package/lib/_virtual/right.js

@@ -1,37 +1,106 @@
 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 Size = {
+  "xs": "xs",
+  "s": "s",
+  "m": "m",
+  "l": "l"
+};
+const RightIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 16 16"
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M5.97 4.47a.75.75 0 0 0 0 1.06L8.44 8l-2.47 2.47a.75.75 0 1 0 1.06 1.06l3-3a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 0 0-1.06 0"
+})));
+RightIcon16.displayName = 'RightIcon16';
+const RightIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 20 20"
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M7.293 5.293a1 1 0 0 0 0 1.414L10.586 10l-3.293 3.293a1 1 0 1 0 1.414 1.414l4-4a1 1 0 0 0 0-1.414l-4-4a1 1 0 0 0-1.414 0"
+})));
+RightIcon20.displayName = 'RightIcon20';
+const RightIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 24 24"
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M7.94 4.94a1.5 1.5 0 0 0 0 2.12L12.878 12l-4.94 4.94a1.5 1.5 0 0 0 2.122 2.12l6-6a1.5 1.5 0 0 0 0-2.12l-6-6a1.5 1.5 0 0 0-2.122 0"
+})));
+RightIcon24.displayName = 'RightIcon24';
+const RightIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
+  viewBox: "0 0 28 28"
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M9.44 5.94a1.5 1.5 0 0 0 0 2.12L15.378 14l-5.94 5.94a1.5 1.5 0 0 0 2.122 2.12l7-7a1.5 1.5 0 0 0 0-2.12l-7-7a1.5 1.5 0 0 0-2.122 0"
+})));
+RightIcon28.displayName = 'RightIcon28';
+const RightIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    theme,
+    size: sizeFromProps = "m",
+    className,
+    style,
+    ['data-render-all-sizes']: renderAllSizes = false,
+    ...props
+  } = _ref;
+  const size = sizeFromProps in Size ? sizeFromProps : "m";
+  const mainProps = { ...props,
+    className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
+    style: renderAllSizes ? {
+      '--rs-icon-ar-width': 28,
+      '--rs-icon-ar-height': 28,
+      ...style
+    } : style,
+    ref
+  };
+
+  if (renderAllSizes) {
+    return /*#__PURE__*/React.createElement("svg", _extends({
+      viewBox: "0 0 28 28"
+    }, mainProps), /*#__PURE__*/React.createElement(RightIcon16, {
+      className: styles.variant16
+    }), /*#__PURE__*/React.createElement(RightIcon20, {
+      className: styles.variant20
+    }), /*#__PURE__*/React.createElement(RightIcon24, {
+      className: styles.variant24
+    }), /*#__PURE__*/React.createElement(RightIcon28, {
+      className: styles.variant28
+    }));
+  }
+
+  if (size === Size['xs']) {
+    return /*#__PURE__*/React.createElement(RightIcon16, mainProps);
+  }
 
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 24 24"
-  }, props, {
-    className: cn(styles.icon, styles[theme], sizeStyles[size], className),
-    ref: ref
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M9.004 19l8-7-8-7v14z"
-  }));
+  if (size === Size['s']) {
+    return /*#__PURE__*/React.createElement(RightIcon20, mainProps);
+  }
+
+  if (size === Size['m']) {
+    return /*#__PURE__*/React.createElement(RightIcon24, mainProps);
+  }
+
+  return /*#__PURE__*/React.createElement(RightIcon28, mainProps);
 });
+RightIcon.displayName = 'RightIcon';
 RightIcon.propTypes = {
   className: PropTypes.string,
   theme: PropTypes.oneOf(["light", "dark"]),
-  size: PropTypes.oneOf(["xs", "s", "m", "l"])
-};
-RightIcon.defaultProps = {
-  size: "m"
+  size: PropTypes.oneOf(["xs", "s", "m", "l"]),
+  'data-render-all-sizes': PropTypes.bool,
+  style: PropTypes.object
 };
-export { RightIcon as default };
+export { Size, RightIcon as default };

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,27 +1,10 @@
-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';
 import { useThemeWithUndefined, ThemeProvider } from '@rescui/ui-contexts';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 import RightIcon from './_virtual/right.js';
-import AddOutlineIcon from './_virtual/add-outline.js';
+import PlusIcon from './_virtual/plus.js';
 import { collapseContext } from './context.js';
 import { useCollapseState, COLLAPSE_STATES, useStartedClosing } from './use-collapse-state.js';
 import styles from './collapse.p.module.css.js';
@@ -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 : PlusIcon;
+
+  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,20 +120,21 @@ 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",
     className: styles.button,
     onClick: toggleOpened
   }, /*#__PURE__*/React.createElement(Icon, {
-    className: styles.icon
+    className: styles.icon,
+    "data-render-all-sizes": true
   }), /*#__PURE__*/React.createElement("span", {
     className: cn(styles.title),
     "data-rs-internal": "collapse__title"