@itwin/itwinui-react 3.0.4 → 3.0.5

package/cjs/core/Dialog/DialogTitleBar.js

@@ -1,18 +1,18 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogTitleBar = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const IconButton_js_1 = require('../Buttons/IconButton.js');
-const DialogContext_js_1 = require('./DialogContext.js');
-const DialogTitleBarTitle_js_1 = require('./DialogTitleBarTitle.js');
-const DialogDragContext_js_1 = require('./DialogDragContext.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const IconButton_js_1 = require("../Buttons/IconButton.js");
+const DialogContext_js_1 = require("./DialogContext.js");
+const DialogTitleBarTitle_js_1 = require("./DialogTitleBarTitle.js");
+const DialogDragContext_js_1 = require("./DialogDragContext.js");
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example
@@ -30,64 +30,17 @@ const DialogDragContext_js_1 = require('./DialogDragContext.js');
  *   </IconButton>
  * </Dialog.TitleBar>
  */
-exports.DialogTitleBar = Object.assign(
-  React.forwardRef((props, ref) => {
+exports.DialogTitleBar = Object.assign(React.forwardRef((props, ref) => {
     const dialogContext = (0, DialogContext_js_1.useDialogContext)();
-    const {
-      children,
-      titleText,
-      isDismissible = dialogContext.isDismissible,
-      onClose = dialogContext.onClose,
-      isDraggable = dialogContext.isDraggable,
-      className,
-      onPointerDown: onPointerDownProp,
-      ...rest
-    } = props;
-    const { onPointerDown } = (0,
-    DialogDragContext_js_1.useDialogDragContext)();
-    return React.createElement(
-      index_js_1.Box,
-      {
-        className: (0, classnames_1.default)(
-          'iui-dialog-title-bar',
-          className,
-          {
+    const { children, titleText, isDismissible = dialogContext.isDismissible, onClose = dialogContext.onClose, isDraggable = dialogContext.isDraggable, className, onPointerDown: onPointerDownProp, ...rest } = props;
+    const { onPointerDown } = (0, DialogDragContext_js_1.useDialogDragContext)();
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-dialog-title-bar', className, {
             'iui-dialog-title-bar-filled': isDraggable,
-          },
-        ),
-        ref: ref,
-        onPointerDown: (0, index_js_1.mergeEventHandlers)(
-          onPointerDownProp,
-          onPointerDown,
-        ),
-        ...rest,
-      },
-      children
-        ? children
-        : React.createElement(
-            React.Fragment,
-            null,
-            React.createElement(
-              DialogTitleBarTitle_js_1.DialogTitleBarTitle,
-              null,
-              titleText,
-            ),
-            isDismissible &&
-              React.createElement(
-                IconButton_js_1.IconButton,
-                {
-                  size: 'small',
-                  styleType: 'borderless',
-                  onClick: onClose,
-                  'aria-label': 'Close',
-                },
-                React.createElement(index_js_1.SvgClose, null),
-              ),
-          ),
-    );
-  }),
-  {
+        }), ref: ref, onPointerDown: (0, index_js_1.mergeEventHandlers)(onPointerDownProp, onPointerDown), ...rest }, children ? (children) : (React.createElement(React.Fragment, null,
+        React.createElement(DialogTitleBarTitle_js_1.DialogTitleBarTitle, null, titleText),
+        isDismissible && (React.createElement(IconButton_js_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+            React.createElement(index_js_1.SvgClose, null)))))));
+}), {
     Title: DialogTitleBarTitle_js_1.DialogTitleBarTitle,
-  },
-);
+});
 exports.default = exports.DialogTitleBar;

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogTitleBarTitle = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../utils/index.js');
+const index_js_1 = require("../utils/index.js");
 /**
  * Dialog title bar. Recommended to be used as a child of `Dialog`.
  * @example

package/cjs/core/Divider/Divider.js

@@ -1,25 +1,19 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('../utils/components/Box.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Box_js_1 = require("../utils/components/Box.js");
 /**
  * Shows a divider
  */
 exports.Divider = React.forwardRef((props, ref) => {
-  const { className, orientation = 'horizontal', ...rest } = props;
-  return React.createElement(Box_js_1.Box, {
-    as: 'hr',
-    className: (0, classnames_1.default)('iui-divider', className),
-    'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
-    ref: ref,
-    ...rest,
-  });
+    const { className, orientation = 'horizontal', ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { as: 'hr', className: (0, classnames_1.default)('iui-divider', className), "aria-orientation": orientation === 'vertical' ? 'vertical' : undefined, ref: ref, ...rest }));
 });
 exports.default = exports.Divider;

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -1,15 +1,15 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownMenu = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const Menu_js_1 = require('../Menu/Menu.js');
-const Popover_js_1 = require('../Popover/Popover.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const Menu_js_1 = require("../Menu/Menu.js");
+const Popover_js_1 = require("../Popover/Popover.js");
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.
@@ -30,78 +30,44 @@ const Popover_js_1 = require('../Popover/Popover.js');
  * </DropdownMenu>
  */
 exports.DropdownMenu = React.forwardRef((props, forwardedRef) => {
-  const {
-    menuItems,
-    children,
-    role = 'menu',
-    visible: visibleProp,
-    placement = 'bottom-start',
-    matchWidth = false,
-    onVisibleChange,
-    portal = true,
-    ...rest
-  } = props;
-  const [visible, setVisible] = (0, index_js_1.useControlledState)(
-    false,
-    visibleProp,
-    onVisibleChange,
-  );
-  const triggerRef = React.useRef(null);
-  const close = React.useCallback(() => {
-    setVisible(false);
-    triggerRef.current?.focus({ preventScroll: true });
-  }, [setVisible]);
-  const menuContent = React.useMemo(() => {
-    if (typeof menuItems === 'function') {
-      return menuItems(close);
-    }
-    return menuItems;
-  }, [menuItems, close]);
-  const popover = (0, Popover_js_1.usePopover)({
-    visible,
-    onVisibleChange: (open) => (open ? setVisible(true) : close()),
-    placement,
-    matchWidth,
-  });
-  const popoverRef = (0, index_js_1.useMergedRefs)(
-    forwardedRef,
-    popover.refs.setFloating,
-  );
-  return React.createElement(
-    React.Fragment,
-    null,
-    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
-      ...popover.getReferenceProps(children.props),
-      'aria-expanded': popover.open,
-      ref: (0, index_js_1.mergeRefs)(triggerRef, popover.refs.setReference),
-    })),
-    popover.open &&
-      React.createElement(
-        index_js_1.Portal,
-        { portal: portal },
-        React.createElement(
-          Menu_js_1.Menu,
-          {
-            ...popover.getFloatingProps({
-              role,
-              ...rest,
-              onKeyDown: (0, index_js_1.mergeEventHandlers)(
-                props.onKeyDown,
-                (e) => {
-                  if (e.defaultPrevented) {
-                    return;
-                  }
-                  if (e.key === 'Tab') {
-                    close();
-                  }
-                },
-              ),
-            }),
-            ref: popoverRef,
-          },
-          menuContent,
-        ),
-      ),
-  );
+    const { menuItems, children, role = 'menu', visible: visibleProp, placement = 'bottom-start', matchWidth = false, onVisibleChange, portal = true, ...rest } = props;
+    const [visible, setVisible] = (0, index_js_1.useControlledState)(false, visibleProp, onVisibleChange);
+    const triggerRef = React.useRef(null);
+    const close = React.useCallback(() => {
+        setVisible(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    }, [setVisible]);
+    const menuContent = React.useMemo(() => {
+        if (typeof menuItems === 'function') {
+            return menuItems(close);
+        }
+        return menuItems;
+    }, [menuItems, close]);
+    const popover = (0, Popover_js_1.usePopover)({
+        visible,
+        onVisibleChange: (open) => (open ? setVisible(true) : close()),
+        placement,
+        matchWidth,
+    });
+    const popoverRef = (0, index_js_1.useMergedRefs)(forwardedRef, popover.refs.setFloating);
+    return (React.createElement(React.Fragment, null,
+        (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+            ...popover.getReferenceProps(children.props),
+            'aria-expanded': popover.open,
+            ref: (0, index_js_1.mergeRefs)(triggerRef, popover.refs.setReference),
+        })),
+        popover.open && (React.createElement(index_js_1.Portal, { portal: portal },
+            React.createElement(Menu_js_1.Menu, { ...popover.getFloatingProps({
+                    role,
+                    ...rest,
+                    onKeyDown: (0, index_js_1.mergeEventHandlers)(props.onKeyDown, (e) => {
+                        if (e.defaultPrevented) {
+                            return;
+                        }
+                        if (e.key === 'Tab') {
+                            close();
+                        }
+                    }),
+                }), ref: popoverRef }, menuContent)))));
 });
 exports.default = exports.DropdownMenu;

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -1,199 +1,94 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandableBlock = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const Icon_js_1 = require('../Icon/Icon.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const Icon_js_1 = require("../Icon/Icon.js");
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
-  const { children, title, caption, endIcon, ...rest } = props;
-  return React.createElement(
-    exports.ExpandableBlock.Wrapper,
-    { ...rest, ref: forwardedRef },
-    React.createElement(exports.ExpandableBlock.Trigger, {
-      label: title,
-      caption: caption,
-      endIcon: endIcon,
-    }),
-    React.createElement(exports.ExpandableBlock.Content, null, children),
-  );
+    const { children, title, caption, endIcon, ...rest } = props;
+    return (React.createElement(exports.ExpandableBlock.Wrapper, { ...rest, ref: forwardedRef },
+        React.createElement(exports.ExpandableBlock.Trigger, { label: title, caption: caption, endIcon: endIcon }),
+        React.createElement(exports.ExpandableBlock.Content, null, children)));
 });
 ExpandableBlockComponent.displayName = 'ExpandableBlock';
 // ----------------------------------------------------------------------------
 const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
-  const {
-    children,
-    className,
-    onToggle,
-    style,
-    isExpanded,
-    status,
-    size = 'default',
-    styleType = 'default',
-    disabled = false,
-    ...rest
-  } = props;
-  const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
-  const expanded = isExpanded ?? expandedState;
-  return React.createElement(
-    ExpandableBlockContext.Provider,
-    {
-      value: {
-        status,
-        isExpanded: expanded,
-        onToggle,
-        size,
-        styleType,
-        disabled,
-        setExpanded,
-        children,
-      },
-    },
-    React.createElement(
-      index_js_1.Box,
-      {
-        className: (0, classnames_1.default)('iui-expandable-block', className),
-        'data-iui-expanded': expanded,
-        'data-iui-size': size,
-        'data-iui-variant': styleType !== 'default' ? styleType : undefined,
-        style: style,
-        ref: forwardedRef,
-        ...rest,
-      },
-      children,
-    ),
-  );
+    const { children, className, onToggle, style, isExpanded, status, size = 'default', styleType = 'default', disabled = false, ...rest } = props;
+    const [expandedState, setExpanded] = React.useState(isExpanded ?? false);
+    const expanded = isExpanded ?? expandedState;
+    return (React.createElement(ExpandableBlockContext.Provider, { value: {
+            status,
+            isExpanded: expanded,
+            onToggle,
+            size,
+            styleType,
+            disabled,
+            setExpanded,
+            children,
+        } },
+        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-expandable-block', className), "data-iui-expanded": expanded, "data-iui-size": size, "data-iui-variant": styleType !== 'default' ? styleType : undefined, style: style, ref: forwardedRef, ...rest }, children)));
 });
 ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
 const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    children,
-    label,
-    caption,
-    onClick: onClickProp,
-    expandIcon,
-    endIcon,
-    ...rest
-  } = props;
-  const { isExpanded, setExpanded, disabled, onToggle, status } = (0,
-  index_js_1.useSafeContext)(ExpandableBlockContext);
-  return React.createElement(
-    index_js_1.ButtonBase,
-    {
-      className: (0, classnames_1.default)('iui-expandable-header', className),
-      'aria-expanded': isExpanded,
-      'aria-disabled': disabled,
-      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
-        if (disabled) {
-          return;
-        }
-        setExpanded(!isExpanded);
-        onToggle?.(!isExpanded);
-      }),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ??
-      React.createElement(
-        React.Fragment,
-        null,
-        expandIcon ??
-          React.createElement(exports.ExpandableBlock.ExpandIcon, null),
-        React.createElement(
-          exports.ExpandableBlock.LabelArea,
-          null,
-          React.createElement(exports.ExpandableBlock.Title, null, label),
-          caption &&
-            React.createElement(exports.ExpandableBlock.Caption, null, caption),
-        ),
-        endIcon || status
-          ? React.createElement(exports.ExpandableBlock.EndIcon, null, endIcon)
-          : null,
-      ),
-  );
+    const { className, children, label, caption, onClick: onClickProp, expandIcon, endIcon, ...rest } = props;
+    const { isExpanded, setExpanded, disabled, onToggle, status } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
+    return (React.createElement(index_js_1.ButtonBase, { className: (0, classnames_1.default)('iui-expandable-header', className), "aria-expanded": isExpanded, "aria-disabled": disabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
+            if (disabled) {
+                return;
+            }
+            setExpanded(!isExpanded);
+            onToggle?.(!isExpanded);
+        }), ref: forwardedRef, ...rest }, children ?? (React.createElement(React.Fragment, null,
+        expandIcon ?? React.createElement(exports.ExpandableBlock.ExpandIcon, null),
+        React.createElement(exports.ExpandableBlock.LabelArea, null,
+            React.createElement(exports.ExpandableBlock.Title, null, label),
+            caption && (React.createElement(exports.ExpandableBlock.Caption, null, caption))),
+        endIcon || status ? (React.createElement(exports.ExpandableBlock.EndIcon, null, endIcon)) : null))));
 });
 ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.ExpandIcon component
 const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    Icon_js_1.Icon,
-    {
-      className: (0, classnames_1.default)(
-        'iui-expandable-block-icon',
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children ??
-      React.createElement(index_js_1.SvgChevronRight, { 'aria-hidden': true }),
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(Icon_js_1.Icon, { className: (0, classnames_1.default)('iui-expandable-block-icon', className), ref: forwardedRef, ...rest }, children ?? React.createElement(index_js_1.SvgChevronRight, { "aria-hidden": true })));
 });
 ExpandableBlockExpandIcon.displayName = 'ExpandableBlock.ExpandIcon';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.LabelArea component
-const ExpandableBlockLabelArea = index_js_1.polymorphic.span(
-  'iui-expandable-block-label',
-);
+const ExpandableBlockLabelArea = index_js_1.polymorphic.span('iui-expandable-block-label');
 ExpandableBlockLabelArea.displayName = 'ExpandableBlock.LabelArea';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Title component
 const ExpandableBlockTitle = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-expandable-block-title',
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-expandable-block-title', className), ref: forwardedRef, ...rest }, children));
 });
 ExpandableBlockTitle.displayName = 'ExpandableBlock.Title';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.Caption component
-const ExpandableBlockCaption = (0, index_js_1.polymorphic)(
-  'iui-expandable-block-caption',
-);
+const ExpandableBlockCaption = (0, index_js_1.polymorphic)('iui-expandable-block-caption');
 ExpandableBlockCaption.displayName = 'ExpandableBlock.Caption';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.EndIcon component
 const ExpandableBlockEndIcon = React.forwardRef((props, forwardedRef) => {
-  const { children, ...rest } = props;
-  const { status } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
-  const icon = children ?? (status && index_js_1.StatusIconMap[status]());
-  return React.createElement(
-    Icon_js_1.Icon,
-    { fill: status, ref: forwardedRef, ...rest },
-    icon,
-  );
+    const { children, ...rest } = props;
+    const { status } = (0, index_js_1.useSafeContext)(ExpandableBlockContext);
+    const icon = children ?? (status && index_js_1.StatusIconMap[status]());
+    return (React.createElement(Icon_js_1.Icon, { fill: status, ref: forwardedRef, ...rest }, icon));
 });
 ExpandableBlockEndIcon.displayName = 'ExpandableBlock.EndIcon';
 const ExpandableBlockContent = React.forwardRef((props, forwardedRef) => {
-  const { className, children, innerProps, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)('iui-expandable-content', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(index_js_1.Box, { ...innerProps }, children),
-  );
+    const { className, children, innerProps, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-expandable-content', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { ...innerProps }, children)));
 });
 ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 /**
@@ -212,54 +107,54 @@ ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
  *  </ExpandableBlock.Wrapper>
  */
 exports.ExpandableBlock = Object.assign(ExpandableBlockComponent, {
-  Wrapper: ExpandableBlockWrapper,
-  /**
-   * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
-   * @example
-   * <ExpandableBlock.Trigger>
-   *    <ExpandableBlock.ExpandIcon/>
-   *    <ExpandableBlock.LabelArea/>
-   *    <ExpandableBlock.EndIcon/>
-   * </ExpandableBlock.Trigger>
-   */
-  Trigger: ExpandableBlockTrigger,
-  /**
-   * The expanding icon on the left of header
-   */
-  ExpandIcon: ExpandableBlockExpandIcon,
-  /**
-   * `LabelArea` subcomponent that contains `Title` and `Caption`
-   * @example
-   * <ExpandableBlock.LabelArea>
-   *    <ExpandableBLock.Title> Title </ExpandableBlock.Title>
-   *    <ExpandableBlock.Caption> Caption </ExpandableBlock.Caption>
-   * </ExpandableBlock.LabelArea>
-   */
-  LabelArea: ExpandableBlockLabelArea,
-  /**
-   * The main text displayed on the block header, regardless of state.
-   */
-  Title: ExpandableBlockTitle,
-  /**
-   * Small note displayed below title, regardless of state.
-   */
-  Caption: ExpandableBlockCaption,
-  /**
-   * Svg icon displayed at the end of the main text.
-   * Will override status icon if specified. Used inside `Header` subcomponent.
-   * @example
-   * <ExpandableBlock.Trigger>
-   *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
-   * <ExpandableBlock.Trigger/>
-   */
-  EndIcon: ExpandableBlockEndIcon,
-  /**
-   * Content shown in the block's body when fully expanded.
-   * @example
-   * <ExpandableBlock.Wrapper>
-   *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
-   * </ExpandableBlock.Wrapper>
-   */
-  Content: ExpandableBlockContent,
+    Wrapper: ExpandableBlockWrapper,
+    /**
+     * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
+     * @example
+     * <ExpandableBlock.Trigger>
+     *    <ExpandableBlock.ExpandIcon/>
+     *    <ExpandableBlock.LabelArea/>
+     *    <ExpandableBlock.EndIcon/>
+     * </ExpandableBlock.Trigger>
+     */
+    Trigger: ExpandableBlockTrigger,
+    /**
+     * The expanding icon on the left of header
+     */
+    ExpandIcon: ExpandableBlockExpandIcon,
+    /**
+     * `LabelArea` subcomponent that contains `Title` and `Caption`
+     * @example
+     * <ExpandableBlock.LabelArea>
+     *    <ExpandableBLock.Title> Title </ExpandableBlock.Title>
+     *    <ExpandableBlock.Caption> Caption </ExpandableBlock.Caption>
+     * </ExpandableBlock.LabelArea>
+     */
+    LabelArea: ExpandableBlockLabelArea,
+    /**
+     * The main text displayed on the block header, regardless of state.
+     */
+    Title: ExpandableBlockTitle,
+    /**
+     * Small note displayed below title, regardless of state.
+     */
+    Caption: ExpandableBlockCaption,
+    /**
+     * Svg icon displayed at the end of the main text.
+     * Will override status icon if specified. Used inside `Header` subcomponent.
+     * @example
+     * <ExpandableBlock.Trigger>
+     *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
+     * <ExpandableBlock.Trigger/>
+     */
+    EndIcon: ExpandableBlockEndIcon,
+    /**
+     * Content shown in the block's body when fully expanded.
+     * @example
+     * <ExpandableBlock.Wrapper>
+     *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
+     * </ExpandableBlock.Wrapper>
+     */
+    Content: ExpandableBlockContent,
 });
 exports.default = exports.ExpandableBlock;