@jetbrains/ring-ui 5.1.21 → 5.1.23

package/components/island/adaptive-island-hoc.js

@@ -1,28 +0,0 @@
-import React, { Component, createContext } from 'react';
-import { interpolateLinear } from '../global/linear-function';
-const TITLE_RESIZE_END = 20;
-const TITLE_RESIZE_THRESHOLD = 36;
-export const PhaseContext = createContext(null);
-export const ScrollHandlerContext = createContext(null);
-export default function adaptiveIslandHOC(ComposedComponent) {
-    return class AdaptiveIsland extends Component {
-        static propTypes = ComposedComponent.propTypes;
-        state = {
-            phase: null
-        };
-        onContentScroll = ({ scrollTop, scrollHeight, clientHeight }) => {
-            if (scrollHeight - clientHeight >=
-                interpolateLinear(TITLE_RESIZE_THRESHOLD, TITLE_RESIZE_END, this.state.phase ?? 0)) {
-                const phase = Math.min(1, scrollTop / TITLE_RESIZE_END);
-                this.setState({ phase });
-            }
-        };
-        render() {
-            return (<PhaseContext.Provider value={this.state.phase}>
-          <ScrollHandlerContext.Provider value={this.onContentScroll}>
-            <ComposedComponent {...this.props}/>
-          </ScrollHandlerContext.Provider>
-        </PhaseContext.Provider>);
-        }
-    };
-}

package/components/island/content.d.ts

@@ -1,43 +0,0 @@
-import React, { Component, HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
-import createResizeDetector from 'element-resize-detector';
-export interface IslandContentProps extends Omit<HTMLAttributes<HTMLElement>, 'onScroll'> {
-    fade?: boolean | null | undefined;
-    onScrollToBottom?: (() => void) | null | undefined;
-    scrollableWrapperClassName?: string | null | undefined;
-}
-export interface IslandContentInnerProps extends IslandContentProps {
-    onScroll: (node: HTMLElement) => void;
-    bottomBorder: boolean;
-}
-declare class Content extends Component<IslandContentInnerProps> {
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        scrollableWrapperClassName: PropTypes.Requireable<string>;
-        fade: PropTypes.Requireable<boolean>;
-        bottomBorder: PropTypes.Requireable<boolean>;
-        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
-        onScrollToBottom: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        fade: boolean;
-        bottomBorder: boolean;
-        onScroll: () => void;
-        onScrollToBottom: () => void;
-    };
-    state: {
-        scrolledToTop: boolean;
-        scrolledToBottom: boolean;
-    };
-    componentWillUnmount(): void;
-    resizeDetector: createResizeDetector.Erd;
-    wrapperNode?: HTMLElement | null;
-    setWrapper: (node: HTMLElement | null) => void;
-    calculateScrollPosition: () => void;
-    scrollableNode?: HTMLElement | null;
-    setScrollableNodeAndCalculatePosition: (node: HTMLElement | null) => void;
-    render(): React.JSX.Element;
-}
-declare const ContentWrapper: React.ForwardRefExoticComponent<IslandContentProps & React.RefAttributes<Content>>;
-export default ContentWrapper;

package/components/island/content.js

@@ -1,100 +0,0 @@
-import React, { forwardRef, Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import createResizeDetector from 'element-resize-detector';
-import scheduleRAF from '../global/schedule-raf';
-import styles from './island.css';
-import { ScrollHandlerContext } from './adaptive-island-hoc';
-const scheduleScrollAction = scheduleRAF();
-const noop = () => { };
-const END_DISTANCE = 16;
-class Content extends Component {
-    static propTypes = {
-        children: PropTypes.node,
-        className: PropTypes.string,
-        scrollableWrapperClassName: PropTypes.string,
-        fade: PropTypes.bool,
-        bottomBorder: PropTypes.bool,
-        onScroll: PropTypes.func,
-        onScrollToBottom: PropTypes.func
-    };
-    static defaultProps = {
-        fade: true,
-        bottomBorder: false,
-        onScroll: noop,
-        onScrollToBottom: noop
-    };
-    state = {
-        scrolledToTop: true,
-        scrolledToBottom: false
-    };
-    componentWillUnmount() {
-        this.scrollableNode = null;
-        if (!this.wrapperNode) {
-            return;
-        }
-        this.resizeDetector.removeAllListeners(this.wrapperNode);
-    }
-    resizeDetector = createResizeDetector({ strategy: 'scroll' });
-    wrapperNode;
-    setWrapper = (node) => {
-        if (!node) {
-            return;
-        }
-        this.wrapperNode = node;
-        this.resizeDetector.listenTo(node, this.calculateScrollPosition);
-    };
-    calculateScrollPosition = () => scheduleScrollAction(() => {
-        const { scrollableNode } = this;
-        if (!scrollableNode) {
-            return;
-        }
-        this.props.onScroll(scrollableNode);
-        const { scrollTop, scrollHeight, offsetHeight } = scrollableNode;
-        const scrolledToTop = scrollTop === 0;
-        const scrolledToBottom = offsetHeight + scrollTop >= scrollHeight - END_DISTANCE;
-        if (scrolledToBottom) {
-            this.props.onScrollToBottom?.();
-        }
-        this.setState({ scrolledToTop, scrolledToBottom });
-    });
-    scrollableNode;
-    setScrollableNodeAndCalculatePosition = (node) => {
-        if (!node) {
-            return;
-        }
-        this.scrollableNode = node;
-        this.calculateScrollPosition();
-    };
-    render() {
-        const { children, className, bottomBorder, scrollableWrapperClassName, onScroll, onScrollToBottom, fade, ...restProps } = this.props;
-        const { scrolledToTop, scrolledToBottom } = this.state;
-        const classes = classNames(styles.content, className, {
-            [styles.contentWithTopFade]: fade && !scrolledToTop,
-            [styles.contentWithBottomFade]: fade && !scrolledToBottom,
-            [styles.withTransparentBottomBorder]: bottomBorder,
-            [styles.withBottomBorder]: bottomBorder && !scrolledToBottom
-        });
-        const scrollableWrapperClasses = classNames(styles.scrollableWrapper, scrollableWrapperClassName);
-        return (<div {...restProps} data-test="ring-island-content" className={classes}>
-        <div 
-        // it has to be focusable because it can be scrollable
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0} data-scrollable-container className={scrollableWrapperClasses} ref={this.setScrollableNodeAndCalculatePosition} onScroll={fade ? this.calculateScrollPosition : noop}>
-          {fade && (<div ref={this.setWrapper}>
-              {children}
-            </div>)}
-
-          {!fade && children}
-        </div>
-      </div>);
-    }
-}
-const ContentWrapper = forwardRef((props, ref) => (<ScrollHandlerContext.Consumer>
-    {onScroll => {
-        const addProps = onScroll != null ? { onScroll, bottomBorder: true } : {};
-        return <Content {...props} {...addProps} ref={ref}/>;
-    }}
-  </ScrollHandlerContext.Consumer>));
-ContentWrapper.displayName = 'ContentWrapper';
-export default ContentWrapper;

package/components/island/header.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-export interface IslandHeaderProps extends HTMLAttributes<HTMLElement> {
-    wrapWithTitle?: boolean | undefined;
-    border?: boolean | null | undefined;
-    phase?: number | undefined;
-}
-declare const HeaderWrapper: (props: IslandHeaderProps) => React.JSX.Element;
-export default HeaderWrapper;

package/components/island/header.js

@@ -1,78 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { interpolateLinear } from '../global/linear-function';
-import styles from './island.css';
-import { PhaseContext } from './adaptive-island-hoc';
-const Start = {
-    FONT_SIZE: 24,
-    LINE_HEIGHT: 28,
-    PADDING_TOP: 24,
-    PADDING_BOTTOM: 0,
-    X: 0,
-    Y: 0,
-    SPACING: 0
-};
-const End = {
-    FONT_SIZE: 13,
-    LINE_HEIGHT: 20,
-    PADDING_TOP: 16,
-    PADDING_BOTTOM: 8,
-    // Compensation
-    X: 0.4,
-    Y: 0.1,
-    SPACING: 1.09
-};
-const BORDER_APPEAR_PHASE = 0.5;
-class Header extends Component {
-    static propTypes = {
-        children: PropTypes.node,
-        className: PropTypes.string,
-        border: PropTypes.bool,
-        wrapWithTitle: PropTypes.bool,
-        phase: PropTypes.number
-    };
-    static defaultProps = {
-        wrapWithTitle: true
-    };
-    style(name) {
-        return interpolateLinear(Start[name], End[name], this.props.phase ?? 0);
-    }
-    render() {
-        const { children, className, wrapWithTitle, border, phase, ...restProps } = this.props;
-        const classes = classNames(styles.header, className, {
-            [styles.withBottomBorder]: border || phase != null && phase >= BORDER_APPEAR_PHASE
-        });
-        const headerStyle = phase != null
-            ? {
-                lineHeight: `${this.style('LINE_HEIGHT')}px`, // need to append px because number is a valid line-height value
-                paddingTop: this.style('PADDING_TOP'),
-                paddingBottom: this.style('PADDING_BOTTOM')
-            }
-            : undefined;
-        const scaleFont = phase != null && this.style('FONT_SIZE') / Start.FONT_SIZE;
-        const titleStyle = (phase != null && phase < 1)
-            ? {
-                fontSize: Start.FONT_SIZE,
-                transform: `translate(${this.style('X')}px, ${this.style('Y')}px) scale(${scaleFont})`,
-                letterSpacing: this.style('SPACING')
-            }
-            : undefined;
-        return (<div {...restProps} data-test="ring-island-header" className={classes} style={headerStyle}>
-        {wrapWithTitle &&
-                (<h2 className={styles.title} style={titleStyle}>
-            {children}
-          </h2>)}
-
-        {!wrapWithTitle && children}
-
-      </div>);
-    }
-}
-const HeaderWrapper = (props) => (<PhaseContext.Consumer>
-    {phase => {
-        const addProps = phase != null ? { phase } : {};
-        return <Header {...props} {...addProps}/>;
-    }}
-  </PhaseContext.Consumer>);
-export default HeaderWrapper;

package/components/island/island.css

@@ -1,132 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-@value gradientStart: rgba(255, 255, 255, 0);
-@value gradientStop: var(--ring-content-background-color);
-
-.island {
-  display: flex;
-  flex-direction: column;
-
-  border: 1px solid var(--ring-line-color);
-  border-radius: var(--ring-border-radius);
-
-  background-color: var(--ring-content-background-color);
-  box-shadow: 0 1px 4px var(--ring-popup-shadow-color);
-}
-
-.withTransparentBottomBorder {
-  transition: border-bottom-color 0.1s;
-
-  border-bottom: 1px solid transparent;
-}
-
-.header {
-  box-sizing: border-box;
-  width: 100%;
-  padding: calc(unit * 2) calc(unit * 4) unit;
-
-  transition: border-bottom-color 0.1s;
-
-  border-bottom: 1px solid transparent;
-
-  line-height: 24px;
-}
-
-.withBottomBorder.withBottomBorder {
-  border-bottom-color: var(--ring-popup-border-color);
-  border-top-left-radius: var(--ring-border-radius);
-  border-top-right-radius: var(--ring-border-radius);
-}
-
-.title {
-  display: block;
-  float: left;
-
-  margin: 0;
-
-  transform-origin: 0 50%;
-  word-break: break-word;
-
-  color: var(--ring-heading-color);
-
-  font-size: inherit;
-
-  font-weight: bold;
-}
-
-.narrowIsland .header {
-  padding: 0 calc(unit * 2);
-}
-
-.content {
-  position: relative;
-
-  display: flex;
-  overflow: auto;
-
-  width: 100%;
-  -webkit-overflow-scrolling: touch;
-}
-
-.scrollableWrapper {
-  overflow: auto;
-
-  width: 100%;
-  padding: calc(unit * 2) calc(unit * 4);
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-}
-
-.narrowIsland .scrollableWrapper {
-  padding: calc(unit * 2) calc(unit * 2);
-}
-
-.withoutPaddings .scrollableWrapper {
-  padding: 0;
-}
-
-.contentWithTopFade::before {
-  position: absolute;
-  z-index: var(--ring-fixed-z-index);
-  left: 0;
-
-  display: block;
-
-  width: 100%;
-  height: calc(unit * 3);
-
-  content: "";
-
-  pointer-events: none;
-
-  opacity: 0.8;
-
-  background: linear-gradient(to top, gradientStart, gradientStop);
-}
-
-.contentWithTopFade:first-child::before {
-  border-top-left-radius: var(--ring-border-radius);
-  border-top-right-radius: var(--ring-border-radius);
-}
-
-.contentWithBottomFade::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-
-  display: block;
-
-  width: 100%;
-  height: calc(unit * 3);
-
-  content: "";
-  pointer-events: none;
-
-  opacity: 0.8;
-  border-bottom-right-radius: var(--ring-border-radius);
-  border-bottom-left-radius: var(--ring-border-radius);
-  background: linear-gradient(to bottom, gradientStart, gradientStop);
-}

package/components/island/island.d.ts

@@ -1,78 +0,0 @@
-import React, { Component, HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
-export interface IslandProps extends HTMLAttributes<HTMLElement> {
-    narrow?: boolean | null | undefined;
-    withoutPaddings?: boolean | null | undefined;
-    'data-test'?: string | null | undefined;
-}
-/**
- * @name Island
- */
-export default class Island extends Component<IslandProps> {
-    static propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        className: PropTypes.Requireable<string>;
-        narrow: PropTypes.Requireable<boolean>;
-        withoutPaddings: PropTypes.Requireable<boolean>;
-        'data-test': PropTypes.Requireable<string>;
-    };
-    render(): React.JSX.Element;
-}
-export declare const AdaptiveIsland: {
-    new (props: IslandProps | Readonly<IslandProps>): {
-        state: {
-            phase: null;
-        };
-        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<IslandProps>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    new (props: IslandProps, context: any): {
-        state: {
-            phase: null;
-        };
-        onContentScroll: ({ scrollTop, scrollHeight, clientHeight }: Element) => void;
-        render(): React.JSX.Element;
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<IslandProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<IslandProps>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<IslandProps>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IslandProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<IslandProps>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    propTypes: React.WeakValidationMap<IslandProps> | undefined;
-    contextType?: React.Context<any> | undefined;
-};
-export { default as Header } from './header';
-export { default as Content } from './content';

package/components/island/island.js

@@ -1,31 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import dataTests from '../global/data-tests';
-import adaptiveIslandHOC from './adaptive-island-hoc';
-import styles from './island.css';
-/**
- * @name Island
- */
-export default class Island extends Component {
-    static propTypes = {
-        children: PropTypes.node,
-        className: PropTypes.string,
-        narrow: PropTypes.bool,
-        withoutPaddings: PropTypes.bool,
-        'data-test': PropTypes.string
-    };
-    render() {
-        const { children, className, narrow, withoutPaddings, 'data-test': dataTest, ...restProps } = this.props;
-        const classes = classNames(styles.island, className, {
-            [styles.narrowIsland]: narrow,
-            [styles.withoutPaddings]: withoutPaddings
-        });
-        return (<div {...restProps} className={classes} data-test={dataTests('ring-island', dataTest)}>
-        {children}
-      </div>);
-    }
-}
-export const AdaptiveIsland = adaptiveIslandHOC(Island);
-export { default as Header } from './header';
-export { default as Content } from './content';

package/components/island-legacy/content-legacy.d.ts

@@ -1,10 +0,0 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import './island-legacy.css';
-export default class Content extends PureComponent<HTMLAttributes<HTMLElement>> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    render(): React.JSX.Element;
-}

package/components/island-legacy/content-legacy.js

@@ -1,17 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './island-legacy.css';
-export default class Content extends PureComponent {
-    static propTypes = {
-        className: PropTypes.string,
-        children: PropTypes.node
-    };
-    render() {
-        const { children, className, ...restProps } = this.props;
-        const classes = classNames('ring-island__content', className);
-        return (<div {...restProps} className={classes}>
-        {children}
-      </div>);
-    }
-}

package/components/island-legacy/header-legacy.d.ts

@@ -1,10 +0,0 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import './island-legacy.css';
-export default class Header extends PureComponent<HTMLAttributes<HTMLElement>> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    render(): React.JSX.Element;
-}

package/components/island-legacy/header-legacy.js

@@ -1,19 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './island-legacy.css';
-export default class Header extends PureComponent {
-    static propTypes = {
-        className: PropTypes.string,
-        children: PropTypes.node
-    };
-    render() {
-        const { children, className, ...restProps } = this.props;
-        const classes = classNames('ring-island__header', className);
-        return (<div {...restProps} className={classes}>
-        <div className="ring-island__title">
-          {children}
-        </div>
-      </div>);
-    }
-}

package/components/island-legacy/island-legacy.css

@@ -1,100 +0,0 @@
-@value unit from "../global/global.css";
-
-/**
- * @name Island Legacy
- */
-
-:global(.ring-island) {
-  min-width: calc(unit * 25 - 2px);
-
-  color: var(--ring-text-color);
-
-  border: 1px solid;
-  border-color: var(--ring-line-color);
-  border-radius: var(--ring-border-radius);
-
-  background-color: var(--ring-content-background-color);
-  box-shadow: 0 1px 4px var(--ring-popup-shadow-color);
-
-  font-family: var(--ring-font-family);
-
-  font-size: var(--ring-font-size);
-}
-
-:global(.ring-island_stack-right) {
-  border-right: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  box-shadow: none;
-}
-
-:global(.ring-island_stack-left) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  box-shadow: none;
-}
-
-:global(.ring-island__header) {
-  min-height: calc(unit * 3 - 2px);
-
-  border-bottom: 1px solid var(--ring-line-color);
-  border-top-left-radius: var(--ring-border-radius);
-  border-top-right-radius: var(--ring-border-radius);
-
-  background-color: var(--ring-content-background-color);
-
-  line-height: calc(unit * 3 - 2px);
-}
-
-:global(.ring-island__header-btn),
-:global(.ring-island__header-button) {
-  float: right;
-
-  padding: 0 calc(unit * 2 - 1px);
-
-  /* -1 to account for border */
-
-  cursor: pointer;
-
-  user-select: none;
-
-  color: var(--ring-secondary-color);
-
-  border-left: 1px solid var(--ring-disabled-color);
-  text-shadow: var(--ring-white-text-color) 0 0 1px;
-
-  font-size: var(--ring-font-size-smaller);
-}
-
-:global(.ring-island__header-btn),
-:global(.ring-island__header-button:hover) {
-  background:
-    var(--ring-hover-background-color)
-    linear-gradient(to top, var(--ring-hover-background-color), var(--ring-content-background-color));
-}
-
-:global(.ring-island__header-btn),
-:global(.ring-island__header-button:active) {
-  background: var(--ring-content-background-color) none;
-  box-shadow: 0 0 4px 0 var(--ring-content-background-color) inset;
-}
-
-:global(.ring-island__header-btn),
-:global(.ring-island__header-button:last-child) {
-  border-top-right-radius: 3px;
-}
-
-:global(.ring-island__title) {
-  display: block;
-  float: left;
-
-  padding: 0 calc(unit * 4);
-
-  font-weight: bold;
-}
-
-:global(.ring-island__content) {
-  margin: calc(unit * 2) calc(unit * 4);
-}

package/components/island-legacy/island-legacy.d.ts

@@ -1,12 +0,0 @@
-import React, { HTMLAttributes, PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import './island-legacy.css';
-export default class Island extends PureComponent<HTMLAttributes<HTMLElement>> {
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    render(): React.JSX.Element;
-}
-export { default as Header } from './header-legacy';
-export { default as Content } from './content-legacy';