@jetbrains/ring-ui 5.0.0-beta.2 → 5.0.0-beta.22

package/dist/header/tray-icon.js

@@ -2,8 +2,9 @@ import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBa
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import ThemedButton from '../button/button.js';
+import { Button } from '../button/button.js';
 import { m as modules_47759f5e } from '../_helpers/header.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
 import '../icon/icon.js';
@@ -11,9 +12,10 @@ import 'util-deprecate';
 import '../icon/icon__constants.js';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
-import '../global/theme.js';
 import '../link/clickableLink.js';
+import '../global/controls-height.js';
 import '../_helpers/button__classes.js';
 
 class TrayIcon extends Component {
@@ -27,14 +29,14 @@ class TrayIcon extends Component {
       [modules_47759f5e.rotatable]: rotatable,
       [modules_47759f5e.rotated]: rotatable && restProps.active
     });
-    return /*#__PURE__*/React.createElement(ThemedButton, _extends({}, restProps, {
+    return /*#__PURE__*/React.createElement(Button, _extends({}, restProps, {
       className: classes
     }));
   }
 
 }
 
-_defineProperty(TrayIcon, "propTypes", { ...ThemedButton.propTypes,
+_defineProperty(TrayIcon, "propTypes", { ...Button.propTypes,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
   rotatable: PropTypes.bool
 });

package/dist/heading/heading.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import deprecate from 'util-deprecate';
 
-var modules_901b77ec = {"heading":"heading_rui_f244 font_rui_750f","caps":"caps_rui_f244"};
+var modules_901b77ec = {"heading":"heading_rui_4b24 font_rui_8bff","caps":"caps_rui_4b24"};
 
 /**
  * @name Heading
@@ -28,7 +28,7 @@ const HeadingMemo = /*#__PURE__*/memo(function Heading(_ref) {
     ...restProps
   } = _ref;
   const classes = classNames(modules_901b77ec.heading, className);
-  const Tag = level <= Levels.H4 ? `h${level}` : fallbackHeading();
+  const Tag = level <= Levels.H4 ? "h".concat(level) : fallbackHeading();
   return /*#__PURE__*/React.createElement(Tag, _extends({}, restProps, {
     className: classes
   }), children);
@@ -56,7 +56,7 @@ function makeHeading(level, useCaps) {
       className: classes
     }));
   });
-  H.displayName = `H${level}`;
+  H.displayName = "H".concat(level);
   H.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,

package/dist/http/http.js

@@ -1,6 +1,8 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import ExtendableError from 'es6-error';
 import { encodeURL, joinBaseURLAndPath } from '../global/url.js';
+import 'core-js/modules/es.string.replace.js';
 
 /**
  * @name HTTP
@@ -19,7 +21,7 @@ const defaultFetchConfig = {
 class HTTPError extends ExtendableError {
   constructor(response) {
     let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    super(`${response.status} ${response.statusText || ''}`);
+    super("".concat(response.status, " ").concat(response.statusText || ''));
 
     _defineProperty(this, "data", void 0);
 
@@ -155,7 +157,7 @@ class HTTP {
     } = params;
     const combinedHeaders = { ...this.fetchConfig.headers,
       ...(token ? {
-        Authorization: `${TOKEN_TYPE} ${token}`
+        Authorization: "".concat(TOKEN_TYPE, " ").concat(token)
       } : {}),
       ...headers
     };

package/dist/http/http.mock.js

@@ -1,7 +1,9 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import HTTP from './http.js';
 import 'es6-error';
 import '../global/url.js';
+import 'core-js/modules/es.string.replace.js';
 
 const authMock = {
   requestToken: () => 'mock token',

package/dist/hub-source/hub-source.js

@@ -3,7 +3,7 @@ import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
 const defaultOptions = {
   searchMax: 20,
   searchSideThreshold: 100,
-  queryFormatter: query => `${query} or ${query}*`
+  queryFormatter: query => "".concat(query, " or ").concat(query, "*")
 };
 /**
  * HubSource is designed to speed up search requests for small installations.

package/dist/hub-source/hub-source__user.js

@@ -1,7 +1,9 @@
 import HTTP from '../http/http.js';
 import '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'es6-error';
 import '../global/url.js';
+import 'core-js/modules/es.string.replace.js';
 
 const DEFAULT_FIELDS = 'id,name,login,banned,banReason,profile(email/email,avatar/url)';
 function convertUserForCard(hubUser) {
@@ -15,14 +17,14 @@ function convertUserForCard(hubUser) {
     banReason: hubUser.banReason,
     email: (_hubUser$profile = hubUser.profile) === null || _hubUser$profile === void 0 ? void 0 : (_hubUser$profile$emai = _hubUser$profile.email) === null || _hubUser$profile$emai === void 0 ? void 0 : _hubUser$profile$emai.email,
     avatarUrl: (_hubUser$profile2 = hubUser.profile) === null || _hubUser$profile2 === void 0 ? void 0 : (_hubUser$profile2$ava = _hubUser$profile2.avatar) === null || _hubUser$profile2$ava === void 0 ? void 0 : _hubUser$profile2$ava.url,
-    href: `${serverUri}users/${hubUser.id}`
+    href: "".concat(serverUri, "users/").concat(hubUser.id)
   };
 }
 function createHubUserCardSource(auth, userId) {
   let fields = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_FIELDS;
   const http = new HTTP(auth);
   return async function getHubUser() {
-    const hubUser = await http.get(`${auth.config.serverUri}api/rest/users/${userId}?fields=${fields}`);
+    const hubUser = await http.get("".concat(auth.config.serverUri, "api/rest/users/").concat(userId, "?fields=").concat(fields));
     return convertUserForCard(hubUser, auth.config.serverUri);
   };
 }

package/dist/hub-source/hub-source__users-groups.js

@@ -1,4 +1,5 @@
 import { _ as _defineProperty } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import HubSource from './hub-source.js';
 
 const defaultOptions = {
@@ -20,7 +21,7 @@ class HubSourceUsersGroups {
     this.usersSource = new HubSource(auth, 'users', {
       searchMax: this.options.searchMax,
       searchSideThreshold: this.options.searchSideThreshold,
-      queryFormatter: query => `nameStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)} or loginStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)}`
+      queryFormatter: query => "nameStartsWith: ".concat(HubSourceUsersGroups.wrapMultiwordQuery(query), " or loginStartsWith: ").concat(HubSourceUsersGroups.wrapMultiwordQuery(query))
     });
     this.groupsSource = new HubSource(auth, 'usergroups', {
       searchMax: this.options.searchMax,
@@ -30,7 +31,7 @@ class HubSourceUsersGroups {
 
   static wrapMultiwordQuery(query) {
     if (query && query.indexOf(' ') !== -1) {
-      return `{${query}}`;
+      return "{".concat(query, "}");
     }
 
     return query;

package/dist/icon/icon.js

@@ -7,11 +7,11 @@ import { Color, Size } from './icon__constants.js';
 export { Color, Size } from './icon__constants.js';
 import { m as modules_29747b80 } from '../_helpers/icon.js';
 import IconSVG from './icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
-const warnSize = deprecate(() => {}, `\`size\`, \`width\` and \`height\` props are not recommended to use in Ring UI \`Icon\` component. The intrinsic sizes of SVG icon (\`width\` and \`height\` SVG attributes) are used instead.
-
-We strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. "Responsive" checkmark should be unchecked when exporting icon.'`);
+const warnSize = deprecate(() => {}, "`size`, `width` and `height` props are not recommended to use in Ring UI `Icon` component. The intrinsic sizes of SVG icon (`width` and `height` SVG attributes) are used instead.\n\nWe strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. \"Responsive\" checkmark should be unchecked when exporting icon.'");
 class Icon extends PureComponent {
   warnSize() {
     if (this.props.suppressSizeWarning) {

package/dist/icon/icon__svg.js

@@ -1,9 +1,11 @@
 import { a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.string.replace.js';
 import React, { memo } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import memoize from '../global/memoize.js';
 import { m as modules_29747b80 } from '../_helpers/icon.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 
 function convertReactSVGDOMProperty(str) {
   return str.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());

package/dist/icon/index.js

@@ -7,4 +7,6 @@ import 'classnames';
 import 'util-deprecate';
 import '../_helpers/icon.js';
 import './icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
+import 'core-js/modules/web.dom-collections.iterator.js';

package/dist/icon-ng/icon-ng.js

@@ -1,3 +1,5 @@
+import 'core-js/modules/es.string.replace.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import angular from 'angular';
 import { Color } from '../icon/icon__constants.js';
 import RingTemplateNg from '../template-ng/template-ng.js';
@@ -22,7 +24,7 @@ angularModule.directive('rgIcon', function rgIconDirective() {
       height: '@?',
       width: '@?'
     },
-    template: `<span class="${modules_29747b80.icon}" rg-template="normalizedGlyph" rg-template-class="${modules_29747b80.glyph}"></span>`,
+    template: "<span class=\"".concat(modules_29747b80.icon, "\" rg-template=\"normalizedGlyph\" rg-template-class=\"").concat(modules_29747b80.glyph, "\"></span>"),
     controller: ["$scope", $scope => {
       function decodeBase64IfNeeded(glyph) {
         // This hack allows passing SVG content as string from angular templates like
@@ -67,18 +69,18 @@ angularModule.directive('rgIcon', function rgIconDirective() {
         }
 
         if (size && !width && !height) {
-          const sizeString = `${size}px`;
-          const style = `width: ${sizeString}; height: ${sizeString};`;
+          const sizeString = "".concat(size, "px");
+          const style = "width: ".concat(sizeString, "; height: ").concat(sizeString, ";");
           svgNode.setAttribute('style', style);
           return;
         }
 
         if (width) {
-          svgNode.setAttribute('style', `width: ${width}px;`);
+          svgNode.setAttribute('style', "width: ".concat(width, "px;"));
         }
 
         if (height) {
-          svgNode.setAttribute('style', `height: ${height}px;`);
+          svgNode.setAttribute('style', "height: ".concat(height, "px;"));
         }
       });
     }

package/dist/input/input.d.ts

@@ -1,5 +1,5 @@
-import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode, ExoticComponent, PropsWithoutRef, RefAttributes, ComponentProps } from 'react';
-import Theme, { ThemeOuterProps, ThemeProps } from '../global/theme';
+import React, { PureComponent, Ref, ComponentType, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
+import { ControlsHeight } from '../global/controls-height';
 declare function noop(): void;
 /**
  * @name Input
@@ -11,20 +11,20 @@ declare enum Size {
     L = "L",
     FULL = "FULL"
 }
-export interface InputBaseProps extends ThemeProps {
+export interface InputBaseProps {
     size: Size;
     enableShortcuts: boolean | string[];
-    renderUnderline: (underlineRef: Ref<HTMLDivElement>, errorText: ReactNode) => ReactNode;
     children?: string | undefined;
     inputClassName?: string | null | undefined;
     label?: ReactNode;
     active?: boolean | null | undefined;
-    compact?: boolean | null | undefined;
-    error?: string | null | undefined;
+    error?: ReactNode | null | undefined;
     borderless?: boolean | null | undefined;
     onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
     loading?: boolean | null | undefined;
     icon?: string | ComponentType | null | undefined;
+    height?: ControlsHeight | undefined;
+    afterInput?: ReactNode;
 }
 declare type Override<D, S> = Omit<D, keyof S> & S;
 export declare type InputSpecificProps = Override<InputHTMLAttributes<HTMLInputElement>, InputBaseProps> & {
@@ -42,32 +42,30 @@ export declare class Input extends PureComponent<InputProps> {
         onChange: typeof noop;
         inputRef: typeof noop;
         enableShortcuts: string[];
-        renderUnderline: (underlineRef: Ref<HTMLDivElement>, errorText: ReactNode) => JSX.Element;
     };
     state: {
         empty: boolean;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    static contextType: React.Context<ControlsHeight>;
+    frame?: number;
     input?: HTMLInputElement | HTMLTextAreaElement | null;
-    underlineNode?: HTMLElement | null;
     id: string;
     getId(): string;
     checkValue(): void;
     stretch(el: HTMLElement | null | undefined): void;
     adapt(): void;
-    underlineRef: (el: HTMLDivElement | null) => void;
     inputRef: (el: HTMLInputElement | HTMLTextAreaElement | null) => void;
     clear: (e: React.MouseEvent<HTMLButtonElement>) => void;
     handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleTextareaChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     render(): JSX.Element;
 }
-export declare type ContainerProps<P> = PropsWithoutRef<Omit<JSX.LibraryManagedAttributes<typeof Input, P>, keyof ThemeProps> & ThemeOuterProps> & RefAttributes<Input>;
-declare type Container = ExoticComponent<ContainerProps<InputSpecificProps> | ContainerProps<TextAreaSpecificProps>>;
-declare const ThemedInput: Container & {
-    type: Container;
-};
-export declare type InputAttrs = ComponentProps<typeof ThemedInput>;
-export default ThemedInput;
-export { Size, Theme };
+export declare type ContainerProps<P extends InputProps> = JSX.LibraryManagedAttributes<typeof Input, P>;
+export declare type InputSpecificAttrs = ContainerProps<InputSpecificProps>;
+export declare type TextAreaSpecificAttrs = ContainerProps<TextAreaSpecificProps>;
+export declare type InputAttrs = InputSpecificAttrs | TextAreaSpecificAttrs;
+export default Input;
+export { Size };

package/dist/input/input.js

@@ -1,15 +1,15 @@
 import { _ as _defineProperty, a as _extends } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import closeIcon from '@jetbrains/icons/close';
-import Theme, { withTheme } from '../global/theme.js';
-export { default as Theme } from '../global/theme.js';
+import closeIcon from '@jetbrains/icons/close-12px';
 import { refObject } from '../global/prop-types.js';
-import ThemedButton from '../button/button.js';
+import { Button } from '../button/button.js';
 import getUID from '../global/get-uid.js';
 import Icon from '../icon/icon.js';
 import composeRefs from '../global/composeRefs.js';
+import { ControlsHeightContext } from '../global/controls-height.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
 import 'focus-visible';
 import '@jetbrains/icons/chevron-10px';
@@ -19,6 +19,7 @@ import '../icon/icon__constants.js';
 import 'util-deprecate';
 import '../_helpers/icon.js';
 import '../icon/icon__svg.js';
+import 'core-js/modules/es.string.replace.js';
 import '../global/memoize.js';
 
 function noop() {}
@@ -45,16 +46,12 @@ class Input extends PureComponent {
       empty: true
     });
 
-    _defineProperty(this, "input", void 0);
+    _defineProperty(this, "frame", void 0);
 
-    _defineProperty(this, "underlineNode", void 0);
+    _defineProperty(this, "input", void 0);
 
     _defineProperty(this, "id", getUID('ring-input-'));
 
-    _defineProperty(this, "underlineRef", el => {
-      this.underlineNode = el;
-    });
-
     _defineProperty(this, "inputRef", el => {
       this.input = el;
     });
@@ -83,13 +80,19 @@ class Input extends PureComponent {
   }
 
   componentDidMount() {
-    this.adapt();
+    this.frame = requestAnimationFrame(() => this.adapt());
   }
 
   componentDidUpdate() {
     this.adapt();
   }
 
+  componentWillUnmount() {
+    if (this.frame != null) {
+      cancelAnimationFrame(this.frame);
+    }
+  }
+
   getId() {
     return this.props.id || this.id;
   }
@@ -111,23 +114,20 @@ class Input extends PureComponent {
       return;
     }
 
-    el.style.height = `${el.scrollHeight}px`;
+    el.style.height = "".concat(el.scrollHeight + 2, "px");
   }
 
   adapt() {
     this.checkValue();
-    this.stretch(this.underlineNode);
   }
 
   render() {
     const {
       // Modifiers
-      theme,
       size,
       active,
       multiline,
       borderless,
-      compact,
       // Props
       label,
       error,
@@ -143,15 +143,15 @@ class Input extends PureComponent {
       id,
       placeholder,
       icon,
-      renderUnderline,
+      height = this.context,
+      afterInput,
       ...restProps
     } = this.props;
-    const minimizeMargins = compact || borderless;
     const {
       empty
     } = this.state;
     const clearable = !!onClear;
-    const classes = classNames(modules_88cfaf40.container, className, theme && modules_88cfaf40[theme], [modules_88cfaf40[`size${size}`]], {
+    const classes = classNames(className, modules_88cfaf40.outerContainer, [modules_88cfaf40["size".concat(size)]], [modules_88cfaf40["height".concat(height)]], {
       'ring-js-shortcuts': enableShortcuts === true,
       [modules_88cfaf40.active]: active,
       [modules_88cfaf40.error]: error != null,
@@ -159,7 +159,7 @@ class Input extends PureComponent {
       [modules_88cfaf40.noLabel]: !this.props.label,
       [modules_88cfaf40.withIcon]: icon != null,
       [modules_88cfaf40.clearable]: clearable,
-      [modules_88cfaf40.compact]: minimizeMargins
+      [modules_88cfaf40.borderless]: borderless
     });
     const inputClasses = classNames(modules_88cfaf40.input, inputClassName);
     const text = value != null ? value : children;
@@ -176,6 +176,13 @@ class Input extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: classes,
       "data-test": "ring-input"
+    }, label && /*#__PURE__*/React.createElement("label", {
+      htmlFor: this.getId(),
+      className: classNames(modules_88cfaf40.label, {
+        [modules_88cfaf40.disabledLabel]: disabled
+      })
+    }, label), /*#__PURE__*/React.createElement("div", {
+      className: modules_88cfaf40.container
     }, icon && /*#__PURE__*/React.createElement(Icon, {
       glyph: icon,
       className: modules_88cfaf40.icon
@@ -184,22 +191,15 @@ class Input extends PureComponent {
       rows: 1
     }, commonProps, restProps)) : /*#__PURE__*/React.createElement("input", _extends({
       onChange: this.handleInputChange
-    }, commonProps, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(ThemedButton, {
+    }, commonProps, restProps)), clearable && !disabled && /*#__PURE__*/React.createElement(Button, {
       title: "Clear input",
       "data-test": "ring-input-clear",
       className: modules_88cfaf40.clear,
       icon: closeIcon,
       onClick: this.clear
-    }), !minimizeMargins && /*#__PURE__*/React.createElement("label", {
-      htmlFor: this.getId(),
-      className: modules_88cfaf40.label
-    }, label), !borderless && /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.underline
-    }), !borderless && /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.focusUnderline
-    }), !minimizeMargins && /*#__PURE__*/React.createElement("div", {
-      className: modules_88cfaf40.errorUnderline
-    }), !minimizeMargins && renderUnderline(this.underlineRef, error));
+    }), afterInput), error && /*#__PURE__*/React.createElement("div", {
+      className: modules_88cfaf40.errorText
+    }, error));
   }
 
 }
@@ -208,16 +208,13 @@ _defineProperty(Input, "defaultProps", {
   size: Size.M,
   onChange: noop,
   inputRef: noop,
-  enableShortcuts: ['esc'],
-  renderUnderline: (underlineRef, errorText) => /*#__PURE__*/React.createElement("div", {
-    className: modules_88cfaf40.errorText,
-    ref: underlineRef
-  }, errorText)
+  enableShortcuts: ['esc']
 });
 
+_defineProperty(Input, "contextType", ControlsHeightContext);
+
 Input.propTypes = {
   value: PropTypes.string,
-  theme: PropTypes.oneOf(Object.values(Theme)),
   className: PropTypes.string,
   inputClassName: PropTypes.string,
   size: PropTypes.oneOf(Object.values(Size)).isRequired,
@@ -225,8 +222,6 @@ Input.propTypes = {
   active: PropTypes.bool,
   error: PropTypes.string,
   multiline: PropTypes.bool,
-  borderless: PropTypes.bool,
-  compact: PropTypes.bool,
   onChange: PropTypes.func,
   onClear: PropTypes.func,
   inputRef: PropTypes.oneOfType([PropTypes.func, refObject(PropTypes.instanceOf(HTMLInputElement)), refObject(PropTypes.instanceOf(HTMLTextAreaElement))]),
@@ -235,9 +230,7 @@ Input.propTypes = {
   disabled: PropTypes.bool,
   id: PropTypes.string,
   placeholder: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  renderUnderline: PropTypes.func
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType])
 };
-const ThemedInput = withTheme()(Input);
 
-export { Input, Size, ThemedInput as default };
+export { Input, Size, Input as default };

package/dist/input-ng/input-ng.js

@@ -4,17 +4,19 @@ import classNames from 'classnames';
 import closeIcon from '@jetbrains/icons/close';
 import RingAngularComponent from '../global/ring-angular-component.js';
 import { m as modules_88cfaf40 } from '../_helpers/input.js';
-import Theme from '../global/theme.js';
 import ButtonNG from '../button-ng/button-ng.js';
-import 'react';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import '../global/dom.js';
 import '../icon-ng/icon-ng.js';
+import 'core-js/modules/es.string.replace.js';
 import '../icon/icon__constants.js';
 import '../template-ng/template-ng.js';
 import '../_helpers/icon.js';
 import '../_helpers/button__classes.js';
+import '../global/controls-height.js';
+import 'react';
 
-var modules_c40fa551 = {"errorText":"errorText_rui_e22b","clear":"clear_rui_e22b"};
+var modules_c40fa551 = {"errorText":"errorText_rui_d15a","clear":"clear_rui_d15a"};
 
 const angularModule = angular.module('Ring.input', [ButtonNG]);
 
@@ -44,7 +46,7 @@ class RingInputComponent extends RingAngularComponent {
       return;
     }
 
-    el.style.height = `${el.scrollHeight}px`;
+    el.style.height = "".concat(el.scrollHeight, "px");
   }
 
   onKeyUp() {
@@ -62,7 +64,7 @@ class RingInputComponent extends RingAngularComponent {
   }
 
   getContainerClasses() {
-    return classNames(modules_88cfaf40.container, modules_88cfaf40[this.theme || Theme.LIGHT], this.size ? [modules_88cfaf40[`size${this.size}`]] : null, {
+    return classNames(modules_88cfaf40.outerContainer, this.size ? [modules_88cfaf40["size".concat(this.size)]] : null, modules_88cfaf40.heightS, {
       [modules_88cfaf40.active]: this.active,
       [modules_88cfaf40.error]: this.error != null,
       [modules_88cfaf40.empty]: !this.value,
@@ -91,7 +93,6 @@ _defineProperty(RingInputComponent, "bindings", {
   label: '@',
   hint: '@',
   size: '@',
-  theme: '@',
   disabled: '@',
   active: '<',
   error: '@',
@@ -101,64 +102,7 @@ _defineProperty(RingInputComponent, "bindings", {
   multiline: '<'
 });
 
-_defineProperty(RingInputComponent, "template", `
-<div
-  data-test="ring-input-container"
-  ng-class="$ctrl.getContainerClasses()"
->
-  <input
-    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-    type="text"
-    data-test="ring-input"
-    class="${modules_88cfaf40.input}"
-    name="{{$ctrl.name}}"
-    ng-if="!$ctrl.multiline"
-    placeholder="{{$ctrl.placeholder}}"
-    ng-model="$ctrl.value"
-    ng-required="$ctrl.required"
-    ng-disabled="$ctrl.disabled"
-    ng-minlength="$ctrl.ngMinlength"
-    ng-maxlength="$ctrl.ngMaxlength"
-    ng-change="$ctrl.onInputChange()"
-    ng-keyup="$ctrl.onKeyUp()"
-  />
-
-  <textarea
-    aria-label="{{$ctrl.label || $ctrl.placeholder}}"
-    data-test="ring-input"
-    ng-if="$ctrl.multiline"
-    class="${modules_88cfaf40.input}"
-    rows="1"
-    name="{{$ctrl.name}}"
-    placeholder="{{$ctrl.placeholder}}"
-    ng-model="$ctrl.value"
-    ng-required="$ctrl.required"
-    ng-disabled="$ctrl.disabled"
-    ng-minlength="$ctrl.ngMinlength"
-    ng-maxlength="$ctrl.ngMaxlength"
-    ng-change="$ctrl.onInputChange()"
-    ng-keyup="$ctrl.onKeyUp()"
-  ></textarea>
-
-  <rg-button
-    ng-if="$ctrl.clearable"
-    data-test="ring-input-clear"
-    class="${modules_88cfaf40.clear} ${modules_c40fa551.clear}"
-    icon="{{:: $ctrl.closeIcon}}"
-    ng-click="$ctrl.onClear()"
-  ></rg-button>
-
-  <label
-    ng-if="!$ctrl.borderless"
-    class="${modules_88cfaf40.label}"
-  >{{$ctrl.label}}</label>
-
-  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.underline}"></div>
-  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.focusUnderline}"></div>
-  <div ng-if="!$ctrl.borderless" class="${modules_88cfaf40.errorUnderline}"></div>
-  <div ng-if="!$ctrl.borderless && $ctrl.error" class="${modules_88cfaf40.errorText} ${modules_c40fa551.errorText}">{{$ctrl.error}}</div>
-</div>
-  `);
+_defineProperty(RingInputComponent, "template", "\n<div\n  data-test=\"ring-input-container\"\n  ng-class=\"$ctrl.getContainerClasses()\"\n>\n  <label\n    ng-if=\"!$ctrl.borderless\"\n    class=\"".concat(modules_88cfaf40.label, "\"\n  >{{$ctrl.label}}</label>\n  <div class=\"").concat(modules_88cfaf40.container, "\">\n    <input\n      aria-label=\"{{$ctrl.label || $ctrl.placeholder}}\"\n      type=\"text\"\n      data-test=\"ring-input\"\n      class=\"").concat(modules_88cfaf40.input, "\"\n      name=\"{{$ctrl.name}}\"\n      ng-if=\"!$ctrl.multiline\"\n      placeholder=\"{{$ctrl.placeholder}}\"\n      ng-model=\"$ctrl.value\"\n      ng-required=\"$ctrl.required\"\n      ng-disabled=\"$ctrl.disabled\"\n      ng-minlength=\"$ctrl.ngMinlength\"\n      ng-maxlength=\"$ctrl.ngMaxlength\"\n      ng-change=\"$ctrl.onInputChange()\"\n      ng-keyup=\"$ctrl.onKeyUp()\"\n    />\n\n    <textarea\n      aria-label=\"{{$ctrl.label || $ctrl.placeholder}}\"\n      data-test=\"ring-input\"\n      ng-if=\"$ctrl.multiline\"\n      class=\"").concat(modules_88cfaf40.input, "\"\n      rows=\"1\"\n      name=\"{{$ctrl.name}}\"\n      placeholder=\"{{$ctrl.placeholder}}\"\n      ng-model=\"$ctrl.value\"\n      ng-required=\"$ctrl.required\"\n      ng-disabled=\"$ctrl.disabled\"\n      ng-minlength=\"$ctrl.ngMinlength\"\n      ng-maxlength=\"$ctrl.ngMaxlength\"\n      ng-change=\"$ctrl.onInputChange()\"\n      ng-keyup=\"$ctrl.onKeyUp()\"\n    ></textarea>\n\n    <rg-button\n      ng-if=\"$ctrl.clearable\"\n      data-test=\"ring-input-clear\"\n      class=\"").concat(modules_88cfaf40.clear, " ").concat(modules_c40fa551.clear, "\"\n      icon=\"{{:: $ctrl.closeIcon}}\"\n      ng-click=\"$ctrl.onClear()\"\n    ></rg-button>\n  </div>\n\n  <div ng-if=\"!$ctrl.borderless && $ctrl.error\" class=\"").concat(modules_88cfaf40.errorText, " ").concat(modules_c40fa551.errorText, "\">{{$ctrl.error}}</div>\n</div>\n  "));
 
 angularModule.component('rgInput', RingInputComponent);
 var InputNg = angularModule.name;