@alfalab/core-components 36.0.0 → 36.1.0

package/code-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1sqd9 */
+/* hash: iei2d */
 :root {
     --color-light-text-negative: #d91d0b;
 }
@@ -13,11 +13,11 @@
 :root {
     --gap-xs: 8px;
 }
-.code-input__component_1jcrz {
+.code-input__component_3g7f0 {
     display: flex;
     flex-direction: column;
 }
-.code-input__error_1jcrz {
+.code-input__error_3g7f0 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -25,7 +25,7 @@
     margin-top: var(--gap-xs);
     color: var(--color-light-text-negative);
 }
-@keyframes code-input__shake_1jcrz {
+@keyframes code-input__shake_3g7f0 {
     0% {
         transform: translateX(0);
     }
@@ -42,6 +42,6 @@
         transform: translateX(0);
     }
 }
-.code-input__shake_1jcrz {
-    animation: code-input__shake_1jcrz 0.15s linear 0s 3;
+.code-input__shake_3g7f0 {
+    animation: code-input__shake_3g7f0 0.15s linear 0s 3;
 }

package/code-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1sqd9 */
+/* hash: iei2d */
 :root {
     --color-light-text-negative: #d91d0b;
 }
@@ -13,11 +13,11 @@
 :root {
     --gap-xs: 8px;
 }
-.code-input__component_1jcrz {
+.code-input__component_3g7f0 {
     display: flex;
     flex-direction: column;
 }
-.code-input__error_1jcrz {
+.code-input__error_3g7f0 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -25,7 +25,7 @@
     margin-top: var(--gap-xs);
     color: var(--color-light-text-negative);
 }
-@keyframes code-input__shake_1jcrz {
+@keyframes code-input__shake_3g7f0 {
     0% {
         transform: translateX(0);
     }
@@ -42,6 +42,6 @@
         transform: translateX(0);
     }
 }
-.code-input__shake_1jcrz {
-    animation: code-input__shake_1jcrz 0.15s linear 0s 3;
+.code-input__shake_3g7f0 {
+    animation: code-input__shake_3g7f0 0.15s linear 0s 3;
 }

package/code-input/modern/component.js

@@ -2,7 +2,7 @@ import React, { forwardRef, createRef, useState, useRef, useImperativeHandle, us
 import cn from 'classnames';
 import { Input } from './components/input/component.js';
 
-var styles = {"component":"code-input__component_1jcrz","error":"code-input__error_1jcrz","shake":"code-input__shake_1jcrz"};
+var styles = {"component":"code-input__component_3g7f0","error":"code-input__error_3g7f0","shake":"code-input__shake_3g7f0"};
 require('./index.css');
 
 /** После истечения этого времени код очищается */

package/code-input/modern/components/input/component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"code-input__component_1b3wt","input":"code-input__input_1b3wt","hasError":"code-input__hasError_1b3wt","disabled":"code-input__disabled_1b3wt","compact":"code-input__compact_1b3wt"};
+var styles = {"component":"code-input__component_2dbsd","input":"code-input__input_2dbsd","hasError":"code-input__hasError_2dbsd","disabled":"code-input__disabled_2dbsd","compact":"code-input__compact_2dbsd"};
 require('./index.css');
 
 const Input = forwardRef(({ index, error, disabled, value = '', compact = false, onChange, onKeyDown, onFocus }, ref) => {

package/code-input/modern/components/input/index.css

@@ -1,4 +1,4 @@
-/* hash: 1o1n8 */
+/* hash: z6kds */
 :root {
     --color-light-bg-negative-muted: #feebea;
     --color-light-bg-secondary: #f3f4f5;
@@ -33,10 +33,10 @@
     --code-input-bg-color: var(--color-light-bg-secondary);
     --code-input-error-bg-color: var(--color-light-bg-negative-muted);
 }
-.code-input__component_1b3wt {
+.code-input__component_2dbsd {
     display: flex;
 }
-.code-input__input_1b3wt {
+.code-input__input_2dbsd {
     flex-shrink: 0;
     width: 36px;
     height: 48px;
@@ -53,30 +53,30 @@
     font-weight: var(--code-input-font-weight);
     font-family: var(--code-input-font-family)
 }
-.code-input__input_1b3wt:last-child {
+.code-input__input_2dbsd:last-child {
         margin-right: 0;
     }
-.code-input__input_1b3wt.code-input__hasError_1b3wt {
+.code-input__input_2dbsd.code-input__hasError_2dbsd {
         color: var(--color-light-text-negative);
         caret-color: var(--code-input-text-color);
         background-color: var(--code-input-error-bg-color);
     }
-.code-input__input_1b3wt.code-input__disabled_1b3wt {
+.code-input__input_2dbsd.code-input__disabled_2dbsd {
         color: var(--color-light-text-tertiary);
         opacity: 1;
     }
-.code-input__input_1b3wt:-webkit-autofill {
+.code-input__input_2dbsd:-webkit-autofill {
         -webkit-text-fill-color: var(--code-input-text-color);
     }
-.code-input__input_1b3wt:-webkit-autofill,
-    .code-input__input_1b3wt:-webkit-autofill:hover,
-    .code-input__input_1b3wt:-webkit-autofill:focus,
-    .code-input__input_1b3wt:-webkit-autofill:active {
+.code-input__input_2dbsd:-webkit-autofill,
+    .code-input__input_2dbsd:-webkit-autofill:hover,
+    .code-input__input_2dbsd:-webkit-autofill:focus,
+    .code-input__input_2dbsd:-webkit-autofill:active {
         /* Hack from http://stackoverflow.com/a/29350537 */
         -webkit-transition: background-color 999999s ease-in-out 0s;
         transition: background-color 999999s ease-in-out 0s;
     }
-.code-input__compact_1b3wt {
+.code-input__compact_2dbsd {
     width: 32px;
     height: 48px;
     margin-right: var(--gap-2xs);

package/code-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1sqd9 */
+/* hash: iei2d */
 :root {
     --color-light-text-negative: #d91d0b;
 }
@@ -13,11 +13,11 @@
 :root {
     --gap-xs: 8px;
 }
-.code-input__component_1jcrz {
+.code-input__component_3g7f0 {
     display: flex;
     flex-direction: column;
 }
-.code-input__error_1jcrz {
+.code-input__error_3g7f0 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -25,7 +25,7 @@
     margin-top: var(--gap-xs);
     color: var(--color-light-text-negative);
 }
-@keyframes code-input__shake_1jcrz {
+@keyframes code-input__shake_3g7f0 {
     0% {
         transform: translateX(0);
     }
@@ -42,6 +42,6 @@
         transform: translateX(0);
     }
 }
-.code-input__shake_1jcrz {
-    animation: code-input__shake_1jcrz 0.15s linear 0s 3;
+.code-input__shake_3g7f0 {
+    animation: code-input__shake_3g7f0 0.15s linear 0s 3;
 }

package/collapse/Component.d.ts

@@ -21,21 +21,30 @@ type CollapseProps = {
      */
     children?: React.ReactNode;
     /**
-     * Дополнительный класс
+     * Дополнительный класс обертки
      */
     className?: string;
+    /**
+     * Дополнительный класс для скрываемого контента
+     */
+    expandedContentClassName?: string;
     /**
      * Идентификатор компонента в DOM
      */
     id?: string;
+    /**
+     * Начальное состояние uncontrolled компонента
+     * @default false
+     */
+    defaultExpanded?: boolean;
     /**
      * Обработчик смены состояний `expanded/collapsed`
      */
-    onExpandedChange?: (expanded?: boolean) => void;
+    onExpandedChange?: (expanded: boolean) => void;
     /**
      * Обработчик события завершения анимации
      */
-    onTransitionEnd?: (expanded?: boolean) => void;
+    onTransitionEnd?: (expanded: boolean) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/collapse/Component.js

@@ -14,16 +14,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-var styles = {"collapse":"collapse__collapse_ptr5m","content":"collapse__content_ptr5m","expandedContent":"collapse__expandedContent_ptr5m","expandedLabel":"collapse__expandedLabel_ptr5m"};
+var styles = {"collapse":"collapse__collapse_1v3yf","content":"collapse__content_1v3yf","expandedContent":"collapse__expandedContent_1v3yf","expandedLabel":"collapse__expandedLabel_1v3yf"};
 require('./index.css');
 
 var Collapse = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
+    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, expandedContentClassName = _a.expandedContentClassName, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, _d = _a.defaultExpanded, defaultExpanded = _d === void 0 ? false : _d, dataTestId = _a.dataTestId;
     var uncontrolled = expanded === undefined;
     var contentRef = React.useRef(null);
     var contentCaseRef = React.useRef(null);
-    var _d = React.useState(expanded), expandedState = _d[0], setExpandedState = _d[1];
+    var _e = React.useState(uncontrolled ? defaultExpanded : expanded), expandedState = _e[0], setExpandedState = _e[1];
     var isExpanded = uncontrolled ? expandedState : expanded;
     var recalculate = React.useCallback(function () {
         var contentHeight;
@@ -40,14 +40,14 @@ var Collapse = React.forwardRef(function (_a, ref) {
     }, [isExpanded]);
     var handleTransitionEnd = React.useCallback(function () {
         if (onTransitionEnd)
-            onTransitionEnd(expanded);
-    }, [expanded, onTransitionEnd]);
+            onTransitionEnd(isExpanded);
+    }, [isExpanded, onTransitionEnd]);
     var handleExpandedChange = React.useCallback(function () {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
         }
         if (onExpandedChange)
-            onExpandedChange();
+            onExpandedChange(!isExpanded);
     }, [isExpanded, onExpandedChange, uncontrolled]);
     React.useEffect(function () {
         var handleResize = debounce__default['default'](function () { return recalculate(); }, 300);
@@ -67,7 +67,7 @@ var Collapse = React.forwardRef(function (_a, ref) {
     React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
     var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
     return (React__default['default'].createElement("div", { ref: ref, className: cn__default['default'](className, styles.collapse), id: id, "data-test-id": dataTestId },
-        React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles.content, (_b = {},
+        React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles.content, expandedContentClassName, (_b = {},
                 _b[styles.expandedContent] = isExpanded,
                 _b)), onTransitionEnd: handleTransitionEnd },
             React__default['default'].createElement("div", { ref: contentCaseRef }, children)),

package/collapse/cssm/Component.d.ts

@@ -21,21 +21,30 @@ type CollapseProps = {
      */
     children?: React.ReactNode;
     /**
-     * Дополнительный класс
+     * Дополнительный класс обертки
      */
     className?: string;
+    /**
+     * Дополнительный класс для скрываемого контента
+     */
+    expandedContentClassName?: string;
     /**
      * Идентификатор компонента в DOM
      */
     id?: string;
+    /**
+     * Начальное состояние uncontrolled компонента
+     * @default false
+     */
+    defaultExpanded?: boolean;
     /**
      * Обработчик смены состояний `expanded/collapsed`
      */
-    onExpandedChange?: (expanded?: boolean) => void;
+    onExpandedChange?: (expanded: boolean) => void;
     /**
      * Обработчик события завершения анимации
      */
-    onTransitionEnd?: (expanded?: boolean) => void;
+    onTransitionEnd?: (expanded: boolean) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/collapse/cssm/Component.js

@@ -18,11 +18,11 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var Collapse = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
+    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, expandedContentClassName = _a.expandedContentClassName, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, _d = _a.defaultExpanded, defaultExpanded = _d === void 0 ? false : _d, dataTestId = _a.dataTestId;
     var uncontrolled = expanded === undefined;
     var contentRef = React.useRef(null);
     var contentCaseRef = React.useRef(null);
-    var _d = React.useState(expanded), expandedState = _d[0], setExpandedState = _d[1];
+    var _e = React.useState(uncontrolled ? defaultExpanded : expanded), expandedState = _e[0], setExpandedState = _e[1];
     var isExpanded = uncontrolled ? expandedState : expanded;
     var recalculate = React.useCallback(function () {
         var contentHeight;
@@ -39,14 +39,14 @@ var Collapse = React.forwardRef(function (_a, ref) {
     }, [isExpanded]);
     var handleTransitionEnd = React.useCallback(function () {
         if (onTransitionEnd)
-            onTransitionEnd(expanded);
-    }, [expanded, onTransitionEnd]);
+            onTransitionEnd(isExpanded);
+    }, [isExpanded, onTransitionEnd]);
     var handleExpandedChange = React.useCallback(function () {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
         }
         if (onExpandedChange)
-            onExpandedChange();
+            onExpandedChange(!isExpanded);
     }, [isExpanded, onExpandedChange, uncontrolled]);
     React.useEffect(function () {
         var handleResize = debounce__default['default'](function () { return recalculate(); }, 300);
@@ -66,7 +66,7 @@ var Collapse = React.forwardRef(function (_a, ref) {
     React.useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
     var ToggledIcon = isExpanded ? ArrowUpMBlackIcon.ArrowUpMBlackIcon : ArrowDownMBlackIcon.ArrowDownMBlackIcon;
     return (React__default['default'].createElement("div", { ref: ref, className: cn__default['default'](className, styles__default['default'].collapse), id: id, "data-test-id": dataTestId },
-        React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles__default['default'].content, (_b = {},
+        React__default['default'].createElement("div", { ref: contentRef, className: cn__default['default'](styles__default['default'].content, expandedContentClassName, (_b = {},
                 _b[styles__default['default'].expandedContent] = isExpanded,
                 _b)), onTransitionEnd: handleTransitionEnd },
             React__default['default'].createElement("div", { ref: contentCaseRef }, children)),

package/collapse/esm/Component.d.ts

@@ -21,21 +21,30 @@ type CollapseProps = {
      */
     children?: React.ReactNode;
     /**
-     * Дополнительный класс
+     * Дополнительный класс обертки
      */
     className?: string;
+    /**
+     * Дополнительный класс для скрываемого контента
+     */
+    expandedContentClassName?: string;
     /**
      * Идентификатор компонента в DOM
      */
     id?: string;
+    /**
+     * Начальное состояние uncontrolled компонента
+     * @default false
+     */
+    defaultExpanded?: boolean;
     /**
      * Обработчик смены состояний `expanded/collapsed`
      */
-    onExpandedChange?: (expanded?: boolean) => void;
+    onExpandedChange?: (expanded: boolean) => void;
     /**
      * Обработчик события завершения анимации
      */
-    onTransitionEnd?: (expanded?: boolean) => void;
+    onTransitionEnd?: (expanded: boolean) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/collapse/esm/Component.js

@@ -6,16 +6,16 @@ import { Link } from '../../link/esm';
 import { ArrowDownMBlackIcon } from '@alfalab/icons-classic/ArrowDownMBlackIcon';
 import { ArrowUpMBlackIcon } from '@alfalab/icons-classic/ArrowUpMBlackIcon';
 
-var styles = {"collapse":"collapse__collapse_ptr5m","content":"collapse__content_ptr5m","expandedContent":"collapse__expandedContent_ptr5m","expandedLabel":"collapse__expandedLabel_ptr5m"};
+var styles = {"collapse":"collapse__collapse_1v3yf","content":"collapse__content_1v3yf","expandedContent":"collapse__expandedContent_1v3yf","expandedLabel":"collapse__expandedLabel_1v3yf"};
 require('./index.css');
 
 var Collapse = forwardRef(function (_a, ref) {
     var _b, _c;
-    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, dataTestId = _a.dataTestId;
+    var expanded = _a.expanded, collapsedLabel = _a.collapsedLabel, expandedLabel = _a.expandedLabel, children = _a.children, className = _a.className, expandedContentClassName = _a.expandedContentClassName, id = _a.id, onTransitionEnd = _a.onTransitionEnd, onExpandedChange = _a.onExpandedChange, _d = _a.defaultExpanded, defaultExpanded = _d === void 0 ? false : _d, dataTestId = _a.dataTestId;
     var uncontrolled = expanded === undefined;
     var contentRef = useRef(null);
     var contentCaseRef = useRef(null);
-    var _d = useState(expanded), expandedState = _d[0], setExpandedState = _d[1];
+    var _e = useState(uncontrolled ? defaultExpanded : expanded), expandedState = _e[0], setExpandedState = _e[1];
     var isExpanded = uncontrolled ? expandedState : expanded;
     var recalculate = useCallback(function () {
         var contentHeight;
@@ -32,14 +32,14 @@ var Collapse = forwardRef(function (_a, ref) {
     }, [isExpanded]);
     var handleTransitionEnd = useCallback(function () {
         if (onTransitionEnd)
-            onTransitionEnd(expanded);
-    }, [expanded, onTransitionEnd]);
+            onTransitionEnd(isExpanded);
+    }, [isExpanded, onTransitionEnd]);
     var handleExpandedChange = useCallback(function () {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
         }
         if (onExpandedChange)
-            onExpandedChange();
+            onExpandedChange(!isExpanded);
     }, [isExpanded, onExpandedChange, uncontrolled]);
     useEffect(function () {
         var handleResize = debounce(function () { return recalculate(); }, 300);
@@ -59,7 +59,7 @@ var Collapse = forwardRef(function (_a, ref) {
     useEffect(function () { return recalculate(); }, [isExpanded, recalculate]);
     var ToggledIcon = isExpanded ? ArrowUpMBlackIcon : ArrowDownMBlackIcon;
     return (React.createElement("div", { ref: ref, className: cn(className, styles.collapse), id: id, "data-test-id": dataTestId },
-        React.createElement("div", { ref: contentRef, className: cn(styles.content, (_b = {},
+        React.createElement("div", { ref: contentRef, className: cn(styles.content, expandedContentClassName, (_b = {},
                 _b[styles.expandedContent] = isExpanded,
                 _b)), onTransitionEnd: handleTransitionEnd },
             React.createElement("div", { ref: contentCaseRef }, children)),

package/collapse/esm/index.css

@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_ptr5m {
+.collapse__collapse_1v3yf {
     font-family: var(--font-family);
 }
-.collapse__collapse_ptr5m *,
-.collapse__collapse_ptr5m:before,
-.collapse__collapse_ptr5m:after {
+.collapse__collapse_1v3yf *,
+.collapse__collapse_1v3yf:before,
+.collapse__collapse_1v3yf:after {
     box-sizing: border-box;
 }
-.collapse__content_ptr5m {
+.collapse__content_1v3yf {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_ptr5m {
+.collapse__expandedContent_1v3yf {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_ptr5m {
+.collapse__expandedLabel_1v3yf {
     margin-top: 15px;
 }

package/collapse/index.css

@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_ptr5m {
+.collapse__collapse_1v3yf {
     font-family: var(--font-family);
 }
-.collapse__collapse_ptr5m *,
-.collapse__collapse_ptr5m:before,
-.collapse__collapse_ptr5m:after {
+.collapse__collapse_1v3yf *,
+.collapse__collapse_1v3yf:before,
+.collapse__collapse_1v3yf:after {
     box-sizing: border-box;
 }
-.collapse__content_ptr5m {
+.collapse__content_1v3yf {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_ptr5m {
+.collapse__expandedContent_1v3yf {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_ptr5m {
+.collapse__expandedLabel_1v3yf {
     margin-top: 15px;
 }

package/collapse/modern/Component.d.ts

@@ -21,21 +21,30 @@ type CollapseProps = {
      */
     children?: React.ReactNode;
     /**
-     * Дополнительный класс
+     * Дополнительный класс обертки
      */
     className?: string;
+    /**
+     * Дополнительный класс для скрываемого контента
+     */
+    expandedContentClassName?: string;
     /**
      * Идентификатор компонента в DOM
      */
     id?: string;
+    /**
+     * Начальное состояние uncontrolled компонента
+     * @default false
+     */
+    defaultExpanded?: boolean;
     /**
      * Обработчик смены состояний `expanded/collapsed`
      */
-    onExpandedChange?: (expanded?: boolean) => void;
+    onExpandedChange?: (expanded: boolean) => void;
     /**
      * Обработчик события завершения анимации
      */
-    onTransitionEnd?: (expanded?: boolean) => void;
+    onTransitionEnd?: (expanded: boolean) => void;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */

package/collapse/modern/Component.js

@@ -6,14 +6,14 @@ import { ArrowDownMBlackIcon } from '@alfalab/icons-classic/ArrowDownMBlackIcon'
 import { ArrowUpMBlackIcon } from '@alfalab/icons-classic/ArrowUpMBlackIcon';
 import { Link } from '../../link/modern';
 
-var styles = {"collapse":"collapse__collapse_ptr5m","content":"collapse__content_ptr5m","expandedContent":"collapse__expandedContent_ptr5m","expandedLabel":"collapse__expandedLabel_ptr5m"};
+var styles = {"collapse":"collapse__collapse_1v3yf","content":"collapse__content_1v3yf","expandedContent":"collapse__expandedContent_1v3yf","expandedLabel":"collapse__expandedLabel_1v3yf"};
 require('./index.css');
 
-const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children, className, id, onTransitionEnd, onExpandedChange, dataTestId, }, ref) => {
+const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children, className, expandedContentClassName, id, onTransitionEnd, onExpandedChange, defaultExpanded = false, dataTestId, }, ref) => {
     const uncontrolled = expanded === undefined;
     const contentRef = useRef(null);
     const contentCaseRef = useRef(null);
-    const [expandedState, setExpandedState] = useState(expanded);
+    const [expandedState, setExpandedState] = useState(uncontrolled ? defaultExpanded : expanded);
     const isExpanded = uncontrolled ? expandedState : expanded;
     const recalculate = useCallback(() => {
         let contentHeight;
@@ -30,14 +30,14 @@ const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children
     }, [isExpanded]);
     const handleTransitionEnd = useCallback(() => {
         if (onTransitionEnd)
-            onTransitionEnd(expanded);
-    }, [expanded, onTransitionEnd]);
+            onTransitionEnd(isExpanded);
+    }, [isExpanded, onTransitionEnd]);
     const handleExpandedChange = useCallback(() => {
         if (uncontrolled) {
             setExpandedState(!isExpanded);
         }
         if (onExpandedChange)
-            onExpandedChange();
+            onExpandedChange(!isExpanded);
     }, [isExpanded, onExpandedChange, uncontrolled]);
     useEffect(() => {
         const handleResize = debounce(() => recalculate(), 300);
@@ -57,7 +57,7 @@ const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children
     useEffect(() => recalculate(), [isExpanded, recalculate]);
     const ToggledIcon = isExpanded ? ArrowUpMBlackIcon : ArrowDownMBlackIcon;
     return (React.createElement("div", { ref: ref, className: cn(className, styles.collapse), id: id, "data-test-id": dataTestId },
-        React.createElement("div", { ref: contentRef, className: cn(styles.content, {
+        React.createElement("div", { ref: contentRef, className: cn(styles.content, expandedContentClassName, {
                 [styles.expandedContent]: isExpanded,
             }), onTransitionEnd: handleTransitionEnd },
             React.createElement("div", { ref: contentCaseRef }, children)),

package/collapse/modern/index.css

@@ -11,25 +11,25 @@
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
 }
-.collapse__collapse_ptr5m {
+.collapse__collapse_1v3yf {
     font-family: var(--font-family);
 }
-.collapse__collapse_ptr5m *,
-.collapse__collapse_ptr5m:before,
-.collapse__collapse_ptr5m:after {
+.collapse__collapse_1v3yf *,
+.collapse__collapse_1v3yf:before,
+.collapse__collapse_1v3yf:after {
     box-sizing: border-box;
 }
-.collapse__content_ptr5m {
+.collapse__content_1v3yf {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
 }
-.collapse__expandedContent_ptr5m {
+.collapse__expandedContent_1v3yf {
     visibility: visible;
     height: auto;
 }
-.collapse__expandedLabel_ptr5m {
+.collapse__expandedLabel_1v3yf {
     margin-top: 15px;
 }

package/comment/Component.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"comment__component_1o6h5","rowLimit2":"comment__rowLimit2_1o6h5","rowLimit5":"comment__rowLimit5_1o6h5"};
+var styles = {"component":"comment__component_1dz8j","rowLimit2":"comment__rowLimit2_1dz8j","rowLimit5":"comment__rowLimit5_1dz8j"};
 require('./index.css');
 
 var Comment = function (_a) {

package/comment/esm/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../typography/esm';
 
-var styles = {"component":"comment__component_1o6h5","rowLimit2":"comment__rowLimit2_1o6h5","rowLimit5":"comment__rowLimit5_1o6h5"};
+var styles = {"component":"comment__component_1dz8j","rowLimit2":"comment__rowLimit2_1dz8j","rowLimit5":"comment__rowLimit5_1dz8j"};
 require('./index.css');
 
 var Comment = function (_a) {