@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/global/url.js

@@ -1,72 +1,61 @@
 /**
  * @description Provides a set of utilities for URL manipulation.
  */
-
 /**
  * @const {RegExp}
  */
 const ORIGIN_PATTERN = /^[a-z]+:\/\/[^/]+/i;
-
 /**
  * @const {RegExp}
  */
 const ABSOLUTE_URL_PATTERN = /^[a-z]+:\/\//i;
-
 /**
  * @const {RegExp}
  */
 export const ENDING_SLASH_PATTERN = /\/$/;
-
 /**
  * Get URI from the <base> tag
  * @return {string|undefined} base URI
  */
 export function getBaseURI() {
-  const baseElement = document.getElementsByTagName('base')[0];
-  return baseElement ? baseElement.href : undefined;
+    const baseElement = document.getElementsByTagName('base')[0];
+    return baseElement ? baseElement.href : undefined;
 }
-
 /**
  * Get absolute URI from the <base> tag
  * @return {string} absolute base URI
  */
 export function getAbsoluteBaseURL() {
-  const baseUrl = getBaseURI();
-  const host = `${window.location.protocol}//${window.location.host}`;
-
-  let uri;
-  if (baseUrl) {
-    uri = ABSOLUTE_URL_PATTERN.test(baseUrl) ? baseUrl : host + baseUrl;
-  } else {
-    uri = host;
-  }
-
-  return uri;
+    const baseUrl = getBaseURI();
+    const host = `${window.location.protocol}//${window.location.host}`;
+    let uri;
+    if (baseUrl) {
+        uri = ABSOLUTE_URL_PATTERN.test(baseUrl) ? baseUrl : host + baseUrl;
+    }
+    else {
+        uri = host;
+    }
+    return uri;
 }
-
 /**
  * Get origin from the URL
  * @param {string} url URL to extract origin from
  * @returns {string|undefined} origin
  */
 export function getOrigin(url) {
-  const matches = url.match(ORIGIN_PATTERN);
-
-  if (matches) {
-    return matches[0];
-  }
-
-  return undefined;
+    const matches = url.match(ORIGIN_PATTERN);
+    if (matches) {
+        return matches[0];
+    }
+    return undefined;
 }
-
 /**
  * Get absolute URI from current page
  * @return {string} absolute URL of current page
  */
 export function getAbsoluteURL() {
-  return window.location.href.split('#')[0];
+    return window.location.href.split('#')[0];
 }
-
 /**
  * Fixes the URL
  * If the URL is relative and the page contains a <base> TAG, the URL will be converted to absolute
@@ -76,25 +65,20 @@ export function getAbsoluteURL() {
  * @return {string} fixed URL
  */
 export function fixUrl(url, baseURIGetter = getBaseURI) {
-  if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1 && url.indexOf('/') !== 0) {
-    const baseUrl = baseURIGetter();
-
-    if (baseUrl) {
-      return baseUrl + url;
+    if (url.indexOf('http://') === -1 && url.indexOf('https://') === -1 && url.indexOf('/') !== 0) {
+        const baseUrl = baseURIGetter();
+        if (baseUrl) {
+            return baseUrl + url;
+        }
     }
-  }
-
-  return url;
+    return url;
 }
-
 export function joinBaseURLAndPath(baseUrl, path) {
-  if (!baseUrl || path.indexOf('http://') !== -1 || path.indexOf('https://') !== -1) {
-    return path;
-  }
-
-  return baseUrl + path;
+    if (!baseUrl || path.indexOf('http://') !== -1 || path.indexOf('https://') !== -1) {
+        return path;
+    }
+    return baseUrl + path;
 }
-
 /**
  * Parses a queryString into an object.
  * ```
@@ -105,33 +89,27 @@ export function joinBaseURLAndPath(baseUrl, path) {
  * @return {AuthResponse} object with query parameters map
  */
 export function parseQueryString(queryString) {
-  if (queryString == null) {
-    return {};
-  }
-
-  const queryParameterPairRE = /([^&;=]+)=?([^&;]*)/g;
-  const FIRST_PAIR_ELEMENT = 1;
-  const SECOND_PAIR_ELEMENT = 2;
-  const urlParams = {};
-
-  function decode(s) {
-    return decodeURIComponent(s.replace(/\+/g, ' '));
-  }
-
-  let matchedQueryPair;
-  while ((matchedQueryPair = queryParameterPairRE.exec(queryString)) != null) {
-    urlParams[decode(matchedQueryPair[FIRST_PAIR_ELEMENT])] =
-      decode(matchedQueryPair[SECOND_PAIR_ELEMENT]);
-  }
-
-  return urlParams;
+    if (queryString == null) {
+        return {};
+    }
+    const queryParameterPairRE = /([^&;=]+)=?([^&;]*)/g;
+    const FIRST_PAIR_ELEMENT = 1;
+    const SECOND_PAIR_ELEMENT = 2;
+    const urlParams = {};
+    function decode(s) {
+        return decodeURIComponent(s.replace(/\+/g, ' '));
+    }
+    let matchedQueryPair;
+    while ((matchedQueryPair = queryParameterPairRE.exec(queryString)) != null) {
+        urlParams[decode(matchedQueryPair[FIRST_PAIR_ELEMENT])] =
+            decode(matchedQueryPair[SECOND_PAIR_ELEMENT]);
+    }
+    return urlParams;
 }
-
 function customEncodeURIComponent(str) {
-  const commaRE = /%2C/g;
-  return encodeURIComponent(str).replace(commaRE, ',');
+    const commaRE = /%2C/g;
+    return encodeURIComponent(String(str)).replace(commaRE, ',');
 }
-
 /**
  * Takes a URL as input and a params object.
  * Each property in the params is added to the URL as query string parameters
@@ -140,23 +118,19 @@ function customEncodeURIComponent(str) {
  * @returns {string} encoded URL
  */
 export function encodeURL(url, params) {
-  const equalsSign = '=';
-  const firstSeparator = (url.indexOf('?') === -1) ? '?' : '&';
-
-  let res = url;
-  let k;
-  let i = 0;
-
-  for (k in params) {
-    if (params.hasOwnProperty(k) && params[k] != null) {
-      res += (i++ === 0 ? firstSeparator : '&') +
-        customEncodeURIComponent(k) + equalsSign + customEncodeURIComponent(params[k]);
+    const equalsSign = '=';
+    const firstSeparator = (url.indexOf('?') === -1) ? '?' : '&';
+    let res = url;
+    let k;
+    let i = 0;
+    for (k in params) {
+        if (params.hasOwnProperty(k) && params[k] != null) {
+            res += (i++ === 0 ? firstSeparator : '&') +
+                customEncodeURIComponent(k) + equalsSign + customEncodeURIComponent(params[k]);
+        }
     }
-  }
-
-  return res;
+    return res;
 }
-
 export function isDataURI(uri) {
-  return uri.indexOf('data:') === 0;
+    return uri.indexOf('data:') === 0;
 }

package/components/global/variables.d.ts

@@ -0,0 +1,88 @@
+import type { Property } from 'csstype';
+export interface RingCSSProperties {
+    '--ring-unit'?: string;
+    '--ring-line-color'?: Property.BorderColor;
+    '--ring-dark-line-color'?: Property.BorderColor;
+    '--ring-borders-color'?: Property.BorderColor;
+    '--ring-dark-borders-color'?: Property.BorderColor;
+    '--ring-icon-color'?: Property.Color;
+    '--ring-icon-secondary-color'?: Property.Color;
+    '--ring-border-disabled-color'?: Property.BorderColor;
+    '--ring-icon-disabled-color'?: Property.Color;
+    '--ring-border-hover-color'?: Property.BorderColor;
+    '--ring-dark-border-hover-color'?: Property.BorderColor;
+    '--ring-icon-hover-color'?: Property.Color;
+    '--ring-main-color'?: Property.Color;
+    '--ring-main-hover-color'?: Property.Color;
+    '--ring-icon-error-color'?: Property.Color;
+    '--ring-icon-warning-color'?: Property.Color;
+    '--ring-icon-success-color'?: Property.Color;
+    '--ring-pale-control-color'?: Property.Color;
+    '--ring-popup-border-components'?: string;
+    '--ring-popup-border-color'?: Property.BorderColor;
+    '--ring-popup-shadow-color'?: Property.Color;
+    '--ring-message-shadow-color'?: Property.Color;
+    '--ring-pinned-shadow-color'?: Property.Color;
+    '--ring-search-color'?: Property.Color;
+    '--ring-hint-color'?: Property.Color;
+    '--ring-link-color'?: Property.Color;
+    '--ring-link-hover-color'?: Property.Color;
+    '--ring-error-color'?: Property.Color;
+    '--ring-warning-color'?: Property.Color;
+    '--ring-success-color'?: Property.Color;
+    '--ring-text-color'?: Property.Color;
+    '--ring-dark-text-color'?: Property.Color;
+    '--ring-heading-color'?: Property.Color;
+    '--ring-secondary-color'?: Property.Color;
+    '--ring-dark-secondary-color'?: Property.Color;
+    '--ring-disabled-color'?: Property.Color;
+    '--ring-dark-disabled-color'?: Property.Color;
+    '--ring-dark-active-color'?: Property.Color;
+    '--ring-content-background-color'?: Property.BackgroundColor;
+    '--ring-popup-background-color'?: Property.BackgroundColor;
+    '--ring-sidebar-background-color'?: Property.BackgroundColor;
+    '--ring-selected-background-color'?: Property.BackgroundColor;
+    '--ring-hover-background-color'?: Property.BackgroundColor;
+    '--ring-dark-selected-background-color'?: Property.BackgroundColor;
+    '--ring-message-background-color'?: Property.BackgroundColor;
+    '--ring-navigation-background-color'?: Property.BackgroundColor;
+    '--ring-tag-background-color'?: Property.BackgroundColor;
+    '--ring-removed-background-color'?: Property.BackgroundColor;
+    '--ring-warning-background-color'?: Property.BackgroundColor;
+    '--ring-added-background-color'?: Property.BackgroundColor;
+    '--ring-code-background-color'?: Property.BackgroundColor;
+    '--ring-code-color'?: Property.Color;
+    '--ring-code-comment-color'?: Property.Color;
+    '--ring-code-meta-color'?: Property.Color;
+    '--ring-code-keyword-color'?: Property.Color;
+    '--ring-code-tag-background-color'?: Property.BackgroundColor;
+    '--ring-code-tag-color'?: Property.Color;
+    '--ring-code-tag-font-weight'?: Property.FontWeight;
+    '--ring-code-field-color'?: Property.Color;
+    '--ring-code-attribute-color'?: Property.Color;
+    '--ring-code-number-color'?: Property.Color;
+    '--ring-code-string-color'?: Property.Color;
+    '--ring-code-addition-color'?: Property.Color;
+    '--ring-code-deletion-color'?: Property.Color;
+    '--ring-border-radius'?: Property.BorderRadius;
+    '--ring-border-radius-small'?: Property.BorderRadius;
+    '--ring-font-size-larger'?: Property.FontSize;
+    '--ring-font-size'?: Property.FontSize;
+    '--ring-font-size-smaller'?: Property.FontSize;
+    '--ring-line-height-taller'?: Property.LineHeight;
+    '--ring-line-height'?: Property.LineHeight;
+    '--ring-line-height-lower'?: Property.LineHeight;
+    '--ring-line-height-lowest'?: Property.LineHeight;
+    '--ring-ease'?: string;
+    '--ring-fast-ease'?: string;
+    '--ring-font-family'?: Property.FontFamily;
+    '--ring-font-family-monospace'?: Property.FontFamily;
+    '--ring-invisible-element-z-index'?: Property.ZIndex;
+    '--ring-fixed-z-index'?: Property.ZIndex;
+    '--ring-overlay-z-index'?: Property.ZIndex;
+    '--ring-alert-z-index'?: Property.ZIndex;
+}
+declare module 'csstype' {
+    interface Properties extends RingCSSProperties {
+    }
+}

package/components/global/variables.js

@@ -0,0 +1 @@
+export {};

package/components/global/variables_dark.d.ts

@@ -0,0 +1,3 @@
+import type { RingCSSProperties } from './variables';
+declare const variables: RingCSSProperties;
+export default variables;

package/components/global/variables_dark.js

@@ -1,55 +1,53 @@
-export default {
-  '--ring-line-color': '#475159',
-  '--ring-borders-color': '#406380',
-  '--ring-icon-color': '#80929d',
-  '--ring-icon-secondary-color': '#80929d',
-  '--ring-border-disabled-color': '#475159',
-  '--ring-border-hover-color': '#70b1e6',
-  '--ring-icon-error-color': '#c22731',
-  '--ring-icon-warning-color': '#cc8b00',
-  '--ring-icon-success-color': '#1c8c32',
-  '--ring-popup-border-components': '0, 42, 76',
-  '--ring-popup-border-color': 'rgba(var(--ring-popup-border-components), 0.1)',
-  '--ring-popup-shadow-color': 'rgba(var(--ring-popup-border-components), 0.15)',
-  '--ring-message-shadow-color': 'rgba(var(--ring-popup-border-components), 0.3)',
-  '--ring-pinned-shadow-color': '#000',
-
-  /* Text */
-  '--ring-hint-color': '#80929d',
-  '--ring-link-color': '#70b1e6',
-  '--ring-error-color': '#db5860',
-  '--ring-warning-color': '#eda200',
-  '--ring-success-color': '#59a869',
-  '--ring-text-color': '#bbb',
-  '--ring-heading-color': 'var(--ring-text-color)',
-  '--ring-secondary-color': '#80929d',
-  '--ring-disabled-color': '#80929d',
-
-  /* Background */
-  '--ring-content-background-color': '#23272b',
-  '--ring-popup-background-color': '#111314',
-  '--ring-sidebar-background-color': '#28343d',
-  '--ring-selected-background-color': '#062640',
-  '--ring-hover-background-color': '#0b1a26',
-  '--ring-message-background-color': 'var(--ring-popup-background-color)',
-  '--ring-navigation-background-color': '#111314',
-  '--ring-tag-background-color': '#3e4d59',
-  '--ring-removed-background-color': '#8f5247',
-  '--ring-warning-background-color': '#593d01',
-  '--ring-added-background-color': '#365947',
-
-  /* Code */
-  '--ring-code-background-color': '#2b2b2b',
-  '--ring-code-color': '#a9b7c6',
-  '--ring-code-meta-color': '#bbb529',
-  '--ring-code-keyword-color': '#cc7832',
-  '--ring-code-tag-background-color': '#2b2b2b',
-  '--ring-code-tag-color': '#e8BF6a',
-  '--ring-code-tag-font-weight': 'normal',
-  '--ring-code-field-color': '#9876aa',
-  '--ring-code-attribute-color': '#bababa',
-  '--ring-code-number-color': '#6897bb',
-  '--ring-code-string-color': '#6a8759',
-  '--ring-code-addition-color': '#447152',
-  '--ring-code-deletion-color': '#656e76'
+const variables = {
+    '--ring-line-color': '#475159',
+    '--ring-borders-color': '#406380',
+    '--ring-icon-color': '#80929d',
+    '--ring-icon-secondary-color': '#80929d',
+    '--ring-border-disabled-color': '#475159',
+    '--ring-border-hover-color': '#70b1e6',
+    '--ring-icon-error-color': '#c22731',
+    '--ring-icon-warning-color': '#cc8b00',
+    '--ring-icon-success-color': '#1c8c32',
+    '--ring-popup-border-components': '0, 42, 76',
+    '--ring-popup-border-color': 'rgba(var(--ring-popup-border-components), 0.1)',
+    '--ring-popup-shadow-color': 'rgba(var(--ring-popup-border-components), 0.15)',
+    '--ring-message-shadow-color': 'rgba(var(--ring-popup-border-components), 0.3)',
+    '--ring-pinned-shadow-color': '#000',
+    /* Text */
+    '--ring-hint-color': '#80929d',
+    '--ring-link-color': '#70b1e6',
+    '--ring-error-color': '#db5860',
+    '--ring-warning-color': '#eda200',
+    '--ring-success-color': '#59a869',
+    '--ring-text-color': '#bbb',
+    '--ring-heading-color': 'var(--ring-text-color)',
+    '--ring-secondary-color': '#80929d',
+    '--ring-disabled-color': '#80929d',
+    /* Background */
+    '--ring-content-background-color': '#23272b',
+    '--ring-popup-background-color': '#111314',
+    '--ring-sidebar-background-color': '#28343d',
+    '--ring-selected-background-color': '#062640',
+    '--ring-hover-background-color': '#0b1a26',
+    '--ring-message-background-color': 'var(--ring-popup-background-color)',
+    '--ring-navigation-background-color': '#111314',
+    '--ring-tag-background-color': '#3e4d59',
+    '--ring-removed-background-color': '#8f5247',
+    '--ring-warning-background-color': '#593d01',
+    '--ring-added-background-color': '#365947',
+    /* Code */
+    '--ring-code-background-color': '#2b2b2b',
+    '--ring-code-color': '#a9b7c6',
+    '--ring-code-meta-color': '#bbb529',
+    '--ring-code-keyword-color': '#cc7832',
+    '--ring-code-tag-background-color': '#2b2b2b',
+    '--ring-code-tag-color': '#e8BF6a',
+    '--ring-code-tag-font-weight': 'normal',
+    '--ring-code-field-color': '#9876aa',
+    '--ring-code-attribute-color': '#bababa',
+    '--ring-code-number-color': '#6897bb',
+    '--ring-code-string-color': '#6a8759',
+    '--ring-code-addition-color': '#447152',
+    '--ring-code-deletion-color': '#656e76'
 };
+export default variables;

package/components/grid/col.d.ts

@@ -0,0 +1,31 @@
+import { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+export interface ColProps {
+    children?: ReactNode;
+    xs?: boolean | number | null | undefined;
+    sm?: boolean | number | null | undefined;
+    md?: boolean | number | null | undefined;
+    lg?: boolean | number | null | undefined;
+    xsOffset?: number | null | undefined;
+    smOffset?: number | null | undefined;
+    mdOffset?: number | null | undefined;
+    lgOffset?: number | null | undefined;
+    reverse?: boolean | null | undefined;
+    className?: string | null | undefined;
+}
+export default class Col extends Component<ColProps> {
+    static propTypes: {
+        xs: PropTypes.Requireable<number | boolean>;
+        sm: PropTypes.Requireable<number | boolean>;
+        md: PropTypes.Requireable<number | boolean>;
+        lg: PropTypes.Requireable<number | boolean>;
+        xsOffset: PropTypes.Requireable<number>;
+        smOffset: PropTypes.Requireable<number>;
+        mdOffset: PropTypes.Requireable<number>;
+        lgOffset: PropTypes.Requireable<number>;
+        reverse: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}

package/components/grid/col.js

@@ -1,58 +1,49 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './grid.css';
-
 const ModifierType = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
-
 const classMap = {
-  xs: 'col-xs',
-  sm: 'col-sm',
-  md: 'col-md',
-  lg: 'col-lg',
-  xsOffset: 'col-xs-offset',
-  smOffset: 'col-sm-offset',
-  mdOffset: 'col-md-offset',
-  lgOffset: 'col-lg-offset'
+    xs: 'col-xs',
+    sm: 'col-sm',
+    md: 'col-md',
+    lg: 'col-lg',
+    xsOffset: 'col-xs-offset',
+    smOffset: 'col-sm-offset',
+    mdOffset: 'col-md-offset',
+    lgOffset: 'col-lg-offset'
 };
-
 /**
  * Converts props like "xs=9 xsOffset={2}" to classes "col-xs-9 col-xs-offset-2"
  * @param {Object} props incoming props
  * @returns {Array} result classnames
  */
 function getClassNames(props) {
-  return Object.keys(props).
-    filter(key => classMap[key]).
-    map(key => styles[Number.isInteger(props[key]) ? `${classMap[key]}-${props[key]}` : classMap[key]]);
+    return Object.entries(props).
+        filter(([key]) => classMap[key]).
+        map(([key, value]) => styles[Number.isInteger(value) ? `${classMap[key]}-${value}` : classMap[key]]);
 }
-
 export default class Col extends Component {
-  static propTypes = {
-    xs: ModifierType,
-    sm: ModifierType,
-    md: ModifierType,
-    lg: ModifierType,
-    xsOffset: PropTypes.number,
-    smOffset: PropTypes.number,
-    mdOffset: PropTypes.number,
-    lgOffset: PropTypes.number,
-    reverse: PropTypes.bool,
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, reverse, ...restProps} = this.props;
-    const classes = classNames(styles.col, className, getClassNames(restProps), {
-      [styles.reverse]: reverse
-    });
-
-    return (
-      <div className={classes}>
+    static propTypes = {
+        xs: ModifierType,
+        sm: ModifierType,
+        md: ModifierType,
+        lg: ModifierType,
+        xsOffset: PropTypes.number,
+        smOffset: PropTypes.number,
+        mdOffset: PropTypes.number,
+        lgOffset: PropTypes.number,
+        reverse: PropTypes.bool,
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, reverse, ...restProps } = this.props;
+        const classes = classNames(styles.col, className, getClassNames(restProps), {
+            [styles.reverse]: reverse
+        });
+        return (<div className={classes}>
         {children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }

package/components/grid/grid.d.ts

@@ -0,0 +1,14 @@
+import { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Grid
+ */
+export declare class Grid extends Component<HTMLAttributes<HTMLDivElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}
+export { default as Row } from './row';
+export { default as Col } from './col';

package/components/grid/grid.js

@@ -1,33 +1,22 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import styles from './grid.css';
-
 /**
  * @name Grid
  */
-
 export class Grid extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-  };
-
-  render() {
-    const {children, className, ...restProps} = this.props;
-    const classes = classNames(styles['container-fluid'], className);
-
-    return (
-      <div
-        {...restProps}
-        className={classes}
-      >
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames(styles['container-fluid'], className);
+        return (<div {...restProps} className={classes}>
         {children}
-      </div>
-    );
-  }
+      </div>);
+    }
 }
-
-export {default as Row} from './row';
-export {default as Col} from './col';
+export { default as Row } from './row';
+export { default as Col } from './col';

package/components/grid/row.d.ts

@@ -0,0 +1,40 @@
+import { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+declare const ModifierType: PropTypes.Requireable<string>;
+declare type ModifierType = 'xs' | 'sm' | 'md' | 'lg';
+export interface RowProps {
+    children?: ReactNode;
+    reverse?: boolean | null | undefined;
+    start?: ModifierType | null | undefined;
+    center?: ModifierType | null | undefined;
+    end?: ModifierType | null | undefined;
+    top?: ModifierType | null | undefined;
+    middle?: ModifierType | null | undefined;
+    baseline?: ModifierType | null | undefined;
+    bottom?: ModifierType | null | undefined;
+    around?: ModifierType | null | undefined;
+    between?: ModifierType | null | undefined;
+    first?: ModifierType | null | undefined;
+    last?: ModifierType | null | undefined;
+    className?: string | null | undefined;
+}
+export default class Row extends Component<RowProps> {
+    static propTypes: {
+        reverse: PropTypes.Requireable<boolean>;
+        start: PropTypes.Requireable<string>;
+        center: PropTypes.Requireable<string>;
+        end: PropTypes.Requireable<string>;
+        top: PropTypes.Requireable<string>;
+        middle: PropTypes.Requireable<string>;
+        baseline: PropTypes.Requireable<string>;
+        bottom: PropTypes.Requireable<string>;
+        around: PropTypes.Requireable<string>;
+        between: PropTypes.Requireable<string>;
+        first: PropTypes.Requireable<string>;
+        last: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): JSX.Element;
+}
+export {};