@carbon/ibm-products 2.81.0-rc.0 → 2.82.0-rc.0

package/es/components/Tearsheet/next/Tearsheet.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode, FC } from 'react';
+import PropTypes from 'prop-types';
+import { ComposedModalProps } from '@carbon/react';
+import { TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButtonProps } from './TearsheetHeader';
+import { TearsheetHeaderContentProps } from './TearsheetHeaderContent';
+import { InfluencerProps, MainContentProps, SummaryContentProps, TearsheetBodyProps } from './TearsheetBody';
+import { TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps } from './TearsheetHeaderActions';
+/**
+ * ----------
+ * Tearsheet
+ * ----------
+ */
+export interface TearsheetProps extends ComposedModalProps {
+    children?: React.ReactNode;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * User can pass any class names to add to the modal wrapper
+     */
+    className?: string;
+    /**
+     * User can pass any class names that will added to the modal container, rather than the wrapper
+     */
+    containerClassName?: string;
+    /**
+     * the defines the gap from top of the view port. Defaulted to 3rem
+     */
+    verticalGap?: string;
+    /**
+     * Default influencer takes 256px, this allow to override eg: 300px , 20rem
+     */
+    influencerWidth?: string;
+    /**
+     * Default rightContent takes 256px, this allow to override eg: 300px , 20rem
+     */
+    summaryContentWidth?: string;
+    /**
+     * Default to wide variant. Pass in narrow for narrow tearsheet
+     */
+    variant?: 'wide' | 'narrow';
+    /**
+     * Optional prop that allows you to pass any component.
+     */
+    decorator?: ReactNode;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
+    /**
+     * The aria label applied to the tearsheet
+     */
+    ariaLabel?: string;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => void;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: PropTypes.string;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: HTMLElement;
+}
+export type TearsheetComponentType = React.ForwardRefExoticComponent<TearsheetProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: FC<TearsheetHeaderProps>;
+    HeaderContent: FC<TearsheetHeaderContentProps>;
+    Influencer: FC<InfluencerProps>;
+    NavigationBar: FC<TearsheetNavigationBarProps>;
+    ScrollButton: FC<TearsheetScrollButtonProps>;
+    HeaderActions: FC<TearsheetHeaderActionsProps>;
+    HeaderActionItem: FC<TearsheetHeaderActionItemProps>;
+    MainContent: FC<MainContentProps>;
+    SummaryContent: FC<SummaryContentProps>;
+    Body: FC<TearsheetBodyProps>;
+    Footer: FC<FooterProps>;
+};
+export declare const Tearsheet: TearsheetComponentType;
+export interface FooterProps {
+    children: ReactNode;
+    className?: string;
+}

package/es/components/Tearsheet/next/Tearsheet.js

@@ -0,0 +1,165 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import cx from 'classnames';
+import { usePrefix, unstable_FeatureFlags, ComposedModal, ModalBody } from '@carbon/react';
+import { TearsheetContext, blockClass } from './context.js';
+import TearsheetHeader, { TearsheetNavigationBar, TearsheetScrollButton } from './TearsheetHeader.js';
+import TearsheetHeaderContent from './TearsheetHeaderContent.js';
+import TearsheetBody, { Influencer, MainContent, SummaryContent } from './TearsheetBody.js';
+import { TearsheetHeaderActions, TearsheetHeaderActionItem } from './TearsheetHeaderActions.js';
+import { breakpoints } from '@carbon/layout';
+import { usePortalTarget } from '../../../global/js/hooks/usePortalTarget.js';
+import { useStackContext } from './StackContext.js';
+import { useMatchMedia } from '../../../global/js/hooks/useMatchMedia.js';
+import { useId } from '../../../global/js/utils/useId.js';
+import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
+
+/**
+ * ----------
+ * Tearsheet
+ * ----------
+ */
+
+const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    variant = 'wide',
+    selectorsFloatingMenus = [],
+    className,
+    influencerWidth,
+    summaryContentWidth,
+    ariaLabel,
+    onClose,
+    selectorPrimaryFocus,
+    open = false,
+    portalTarget,
+    verticalGap,
+    containerClassName,
+    ...rest
+  } = _ref;
+  const carbonPrefix = usePrefix();
+  const localRef = useRef(undefined);
+  const bodyRef = useRef(null);
+  const modalRef = ref || localRef;
+  const smMediaQuery = `(max-width: ${breakpoints.md.width})`;
+  const isSm = useMatchMedia(smMediaQuery) || variant === 'narrow';
+  const [hasCloseIcon, setHasCloseIcon] = useState(true);
+  const [fullyCollapsed, setFullyCollapsed] = useState(false);
+  const [disableHeaderCollapse, setDisableHeaderCollapse] = useState(false);
+  const arr = React__default.Children.toArray(children);
+  const header = arr.find(child => child.type === TearsheetHeader);
+  const influencer = arr.find(child => child.type === Influencer);
+  const body = arr.find(child => child.type === TearsheetBody);
+  const footer = arr.find(child => child.type === Footer);
+  const uniqueId = useRef(useId());
+  const {
+    notifyStack,
+    stack,
+    getDepth,
+    getScaleFactor,
+    getBlockSizeChange
+  } = useStackContext();
+  const [depth, setDepth] = useState(0);
+  const renderPortalUse = usePortalTarget(portalTarget);
+  useIsomorphicEffect(() => {
+    const AILabelWidth = modalRef.current?.querySelector(`.${carbonPrefix}--ai-label`)?.clientWidth ?? 0;
+    const headerActionMarginRight = AILabelWidth + 24 + (isSm ? 8 : 0); // 24 is to compeNsate for close button
+    document.documentElement.style.setProperty('--tearsheet-header-action-offset', `${headerActionMarginRight}px`);
+    if (influencerWidth) {
+      document.documentElement.style.setProperty('--tearsheet-influencer-width', `${influencerWidth}`);
+    }
+    if (summaryContentWidth) {
+      document.documentElement.style.setProperty('--tearsheet-summary-content-width', `${summaryContentWidth}`);
+    }
+    if (verticalGap) {
+      document.documentElement.style.setProperty('--tearsheet-vertical-gap', `${verticalGap}`);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSm, rest.decorator, influencerWidth, summaryContentWidth, verticalGap]);
+  useIsomorphicEffect(() => {
+    if (bodyRef.current) {
+      notifyStack?.(uniqueId.current, open, bodyRef.current);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  useEffect(() => {
+    if (stack?.length > 0) {
+      const stackDepth = getDepth?.(uniqueId.current),
+        blockSizeChange = getBlockSizeChange?.(uniqueId.current),
+        scaleFactor = getScaleFactor?.(uniqueId.current);
+      setDepth(stackDepth);
+      modalRef.current.style.setProperty('--stack-depth', stackDepth + '');
+      modalRef.current.style.setProperty('--block-size-change', blockSizeChange);
+      modalRef.current.style.setProperty('--scale-factor', scaleFactor + '');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stack]);
+  return renderPortalUse(/*#__PURE__*/React__default.createElement(TearsheetContext.Provider, {
+    value: {
+      hasCloseIcon,
+      setHasCloseIcon,
+      fullyCollapsed,
+      setFullyCollapsed,
+      onClose,
+      disableHeaderCollapse,
+      setDisableHeaderCollapse,
+      variant,
+      isSm
+    }
+  }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+    enableExperimentalFocusWrapWithoutSentinels: true
+  }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
+    "aria-label": ariaLabel,
+    className: cx(blockClass, className, {
+      [`${blockClass}--wide`]: variant === 'wide',
+      [`${blockClass}--narrow`]: variant === 'narrow',
+      [`${blockClass}--stacked`]: depth > 0,
+      [`${blockClass}--stack-activated`]: stack.length > 1,
+      [`${blockClass}--has-ai-label`]: !!rest.decorator && rest.decorator['type']?.displayName === 'AILabel',
+      [`${blockClass}--has-decorator`]: !!rest.decorator && rest.decorator['type']?.displayName !== 'AILabel',
+      [`${blockClass}--has-close`]: hasCloseIcon
+    }),
+    containerClassName: cx(`${blockClass}__container`, containerClassName),
+    onClose,
+    open,
+    selectorPrimaryFocus,
+    ref: modalRef,
+    selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${blockClass}__container`, `.${carbonPrefix}--menu`, ...selectorsFloatingMenus],
+    isFullWidth: true,
+    size: variant === 'narrow' ? 'sm' : ''
+  }), header, /*#__PURE__*/React__default.createElement(ModalBody, {
+    className: `${blockClass}__body-layout`,
+    ref: bodyRef
+  }, influencer, body, footer)))));
+});
+const Footer = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/React__default.createElement("footer", {
+    className: `${blockClass}__footer`,
+    ref: ref
+  }, children);
+});
+Tearsheet.Header = TearsheetHeader;
+Tearsheet.HeaderContent = TearsheetHeaderContent;
+Tearsheet.Body = TearsheetBody;
+Tearsheet.Influencer = Influencer;
+Tearsheet.MainContent = MainContent;
+Tearsheet.SummaryContent = SummaryContent;
+Tearsheet.Footer = Footer;
+Tearsheet.NavigationBar = TearsheetNavigationBar;
+Tearsheet.ScrollButton = TearsheetScrollButton;
+Tearsheet.HeaderActions = TearsheetHeaderActions;
+Tearsheet.HeaderActionItem = TearsheetHeaderActionItem;
+
+export { Tearsheet };

package/es/components/Tearsheet/next/TearsheetBody.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+/**
+ * ----------------
+ * TearsheetBody
+ * ----------------
+ */
+export interface TearsheetBodyProps {
+    /**
+     * Optional static content for body
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+}
+declare const TearsheetBody: React.ForwardRefExoticComponent<TearsheetBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface MainContentProps {
+    children: ReactNode;
+    className?: string;
+    /** this can be set take full width without any padding */
+    isFlush?: boolean;
+}
+/**
+ * ----------------
+ * MainContent
+ * ----------------
+ */
+export declare const MainContent: React.ForwardRefExoticComponent<MainContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * SummaryContent
+ * ----------------
+ */
+export interface SummaryContentProps {
+    children: ReactNode;
+    className?: string;
+    /**
+     * In mobile screens right side details section wont be visible by default. This prop can be toggled to open/close right panel in this case.
+     */
+    summaryPanelOpen?: boolean;
+    /**
+     * Specify a handler for closing the side panel.
+     * This handler closes the modal, e.g. changing `open` prop.
+     */
+    onSummaryPanelClose?(): void;
+    /** this can be set take full width without any padding */
+    isFlush?: boolean;
+}
+export declare const SummaryContent: React.ForwardRefExoticComponent<SummaryContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface InfluencerProps {
+    children: ReactNode;
+    className?: string;
+    /**
+     * In mobile screens right side details section wont be visible by default. This prop can be toggled to open/close right panel in this case.
+     */
+    influencerPanelOpen?: boolean;
+    /**
+     * Specify a handler for closing the side panel.
+     * This handler closes the modal, e.g. changing `open` prop.
+     */
+    onInfluencerPanelClose?(): void;
+    /** this can be set take full width without any padding */
+    isFlush?: boolean;
+}
+export declare const Influencer: React.ForwardRefExoticComponent<InfluencerProps & React.RefAttributes<HTMLDivElement>>;
+export default TearsheetBody;

package/es/components/Tearsheet/next/TearsheetBody.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext, useRef } from 'react';
+import cx from 'classnames';
+import { blockClass, TearsheetContext } from './context.js';
+import { SidePanel } from '../../SidePanel/SidePanel.js';
+import { Layer } from '@carbon/react';
+import { useCollapsible } from '../../../global/js/hooks/useCollapsible.js';
+
+/**
+ * ----------------
+ * TearsheetBody
+ * ----------------
+ */
+
+const TearsheetBody = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `${blockClass}__body ${className}`,
+    ref: ref
+  }, children);
+});
+/**
+ * ----------------
+ * MainContent
+ * ----------------
+ */
+const MainContent = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    className,
+    isFlush,
+    ...rest
+  } = _ref2;
+  const localRef = useRef(null);
+  const mainContentRef = ref || localRef;
+  const {
+    setFullyCollapsed,
+    disableHeaderCollapse
+  } = useContext(TearsheetContext);
+  const container = typeof mainContentRef === 'function' ? null : mainContentRef?.current ?? null;
+  const collapseHeader = collapse => {
+    if (container) {
+      if (collapse) {
+        const canScroll = container.scrollHeight > container.clientHeight; // collapse header only when there is scroll
+
+        if (canScroll) {
+          setFullyCollapsed?.(true);
+        }
+      } else if (container.scrollTop === 0) {
+        // expand header when scroll reaches top
+        setFullyCollapsed?.(false);
+      }
+    }
+  };
+  useCollapsible({
+    container,
+    triggerCollapse: collapseHeader,
+    disableHeaderCollapse
+  });
+  return /*#__PURE__*/React__default.createElement(Layer, _extends({
+    withBackground: true,
+    className: cx(`${blockClass}__main-content`, className, {
+      [`${blockClass}__flush`]: isFlush
+    }),
+    ref: mainContentRef
+  }, rest), children);
+});
+
+/**
+ * ----------------
+ * SummaryContent
+ * ----------------
+ */
+
+const SummaryContent = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    className,
+    summaryPanelOpen = false,
+    onSummaryPanelClose,
+    isFlush
+  } = _ref3;
+  const {
+    isSm
+  } = useContext(TearsheetContext);
+  return !isSm ? /*#__PURE__*/React__default.createElement("div", {
+    className: cx(`${blockClass}__summary-content`, className, {
+      [`${blockClass}__flush`]: isFlush
+    }),
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement("aside", null, children)) : /*#__PURE__*/React__default.createElement(SidePanel, {
+    size: "sm",
+    open: summaryPanelOpen,
+    onRequestClose: onSummaryPanelClose,
+    className: className
+  }, children);
+});
+const Influencer = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    children,
+    className,
+    influencerPanelOpen = false,
+    onInfluencerPanelClose,
+    isFlush
+  } = _ref4;
+  const {
+    isSm
+  } = useContext(TearsheetContext);
+  return !isSm ? /*#__PURE__*/React__default.createElement("aside", {
+    className: cx(`${blockClass}__influencer`, className, {
+      [`${blockClass}__flush`]: isFlush
+    }),
+    ref: ref
+  }, children) : /*#__PURE__*/React__default.createElement(SidePanel, {
+    size: "sm",
+    open: influencerPanelOpen,
+    onRequestClose: onInfluencerPanelClose,
+    placement: "left",
+    className: className
+  }, children);
+});
+
+export { Influencer, MainContent, SummaryContent, TearsheetBody as default };

package/es/components/Tearsheet/next/TearsheetHeader.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { IconButtonProps } from '@carbon/react';
+import React, { ReactNode } from 'react';
+/**
+ * ----------------
+ * TearsheetHeader
+ * ----------------
+ */
+export interface TearsheetHeaderProps {
+    /**
+     * Provide the optional content for header section and will be render after header titles and before progress indicator.
+     * People can make use of this if they want to have custom header.
+     */
+    children?: React.ReactNode;
+    /**
+     * The accessibility title for the close icon (if shown).
+     *
+     * **Note:** This prop is only required if a close icon is shown, i.e. if
+     * there are a no navigation actions and/or hasCloseIcon is true.
+     */
+    closeIconDescription?: string;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * (when this prop is omitted, or undefined or null) a tearsheet does not
+     * display a close icon if there are navigation actions ("transactional
+     * tearsheet") and displays one if there are no navigation actions ("passive
+     * tearsheet"), and that behavior can be overridden if required by setting
+     * this prop to either true or false.
+     */
+    hideCloseButton?: boolean;
+    className?: string;
+    /**
+     * Default header collapse/expand while scrolling the main content can bd disabled  by setting this
+     */
+    disableHeaderCollapse?: boolean;
+}
+declare const TearsheetHeader: React.ForwardRefExoticComponent<TearsheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default TearsheetHeader;
+/**
+ * ----------------
+ * TearsheetNavigationBar
+ * ----------------
+ */
+export interface TearsheetNavigationBarProps {
+    children: ReactNode;
+    scroller?: React.ReactNode;
+    className?: string;
+}
+export declare const TearsheetNavigationBar: React.ForwardRefExoticComponent<TearsheetNavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ----------------
+ * TearsheetScrollButton
+ * ----------------
+ */
+export interface TearsheetScrollButtonProps extends IconButtonProps {
+    collapseText?: string;
+    expandText?: string;
+    className?: string;
+}
+export declare const TearsheetScrollButton: React.ForwardRefExoticComponent<TearsheetScrollButtonProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/Tearsheet/next/TearsheetHeader.js

@@ -0,0 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { ModalHeader, IconButton } from '@carbon/react';
+import React__default, { useContext, useRef, useEffect } from 'react';
+import cx from 'classnames';
+import { TearsheetContext, blockClass } from './context.js';
+import { ChevronUp } from '@carbon/react/icons';
+
+/**
+ * ----------------
+ * TearsheetHeader
+ * ----------------
+ */
+
+const TearsheetHeader = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    closeIconDescription,
+    hideCloseButton = false,
+    className,
+    disableHeaderCollapse,
+    ...rest
+  } = props;
+  const {
+    setHasCloseIcon,
+    fullyCollapsed,
+    onClose,
+    setDisableHeaderCollapse
+  } = useContext(TearsheetContext);
+  const localRef = useRef(undefined);
+  const headerRef = ref || localRef;
+  useEffect(() => {
+    setHasCloseIcon?.(!!hideCloseButton);
+  }, [hideCloseButton, setHasCloseIcon]);
+  useEffect(() => {
+    setDisableHeaderCollapse?.(!!disableHeaderCollapse);
+  }, [disableHeaderCollapse, setDisableHeaderCollapse]);
+  return /*#__PURE__*/React__default.createElement(ModalHeader, _extends({
+    ref: headerRef,
+    className: cx(`${blockClass}__header`, {
+      [`${className}`]: true,
+      [`${blockClass}__header--with-close-icon`]: !!hideCloseButton,
+      [`${blockClass}__header-collapsed`]: fullyCollapsed
+    }),
+    closeClassName: cx({
+      [`${blockClass}__header--no-close-icon`]: hideCloseButton
+    }),
+    closeModal: onClose,
+    iconDescription: closeIconDescription
+  }, rest), children);
+});
+
+/**
+ * ----------------
+ * TearsheetNavigationBar
+ * ----------------
+ */
+
+const TearsheetNavigationBar = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    scroller,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: `${blockClass}__navigation-bar  ${className}`
+  }, rest), children, scroller);
+});
+
+/**
+ * ----------------
+ * TearsheetScrollButton
+ * ----------------
+ */
+
+const TearsheetScrollButton = /*#__PURE__*/React__default.forwardRef(function PageHeaderExpander(_ref, ref) {
+  let {
+    className,
+    children,
+    label,
+    onClick,
+    collapseText = 'Collapse',
+    expandText = 'Expand',
+    ...other
+  } = _ref;
+  const {
+    fullyCollapsed,
+    setFullyCollapsed
+  } = React__default.useContext(TearsheetContext);
+  const handleScroller = isFullyCollapsed => {
+    setFullyCollapsed?.(!isFullyCollapsed);
+  };
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: `${blockClass}__scroller-container  ${className}`
+  }, /*#__PURE__*/React__default.createElement(IconButton, _extends({
+    ref: ref,
+    label: fullyCollapsed ? expandText : collapseText,
+    size: "md",
+    kind: "ghost",
+    autoAlign: true
+  }, other, {
+    onClick: event => {
+      onClick?.(event);
+      handleScroller(!!fullyCollapsed);
+    },
+    className: cx(className, `${blockClass}__scroller-button`)
+  }), /*#__PURE__*/React__default.createElement(ChevronUp, {
+    className: cx(`${blockClass}__scroller-button-icon`, {
+      [`${blockClass}__scroller-button-icon-collapsed`]: fullyCollapsed
+    })
+  })));
+});
+
+export { TearsheetNavigationBar, TearsheetScrollButton, TearsheetHeader as default };