npm - @skbkontur/react-ui - Versions diffs - 5.5.2 → 5.6.1-85c65.0 - Mend

@skbkontur/react-ui 5.5.2 → 5.6.1-85c65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1989) hide show

package/components/Input/Input.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import type { AriaAttributes, HTMLAttributes, ReactElement } from 'react';
+import type { AriaAttributes, HTMLAttributes, JSX, ReactElement } from 'react';
 import React from 'react';
-import type { Nullable, Override } from '../../typings/utility-types';
+import type { Override } from '../../typings/utility-types';
 import type { CommonProps } from '../../internal/CommonWrapper';
 import type { TGetRootNode } from '../../lib/rootNode';
 import type { SizeProp } from '../../lib/types/props';
@@ -12,14 +12,11 @@ export type InputType = (typeof inputTypes)[number];
 export type InputIconType = React.ReactNode | (() => React.ReactNode);
 export declare const selectionAllowedTypes: InputType[];
 export declare const selectionErrorMessage: (type: InputType, allowedTypes?: InputType[]) => string;
-export declare const maskForbiddenTypes: InputType[];
-export declare const maskAllowedTypes: InputType[];
-export declare const maskErrorMessage: (type: InputType, allowedTypes?: InputType[]) => string;
 export declare const calculateClearCrossShowedState: ({ showClearIcon, notEmptyValue, focused, hovered, }: {
     showClearIcon: ShowClearIcon;
     notEmptyValue: boolean;
-    focused?: boolean | undefined;
-    hovered?: boolean | undefined;
+    focused?: boolean;
+    hovered?: boolean;
 }) => boolean;
 export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
     /** Показывает иконку очистки значения в заполненном поле.
@@ -41,19 +38,6 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
     borderless?: boolean;
     /** Выравнивает контент внутри поля. */
     align?: InputAlign;
-    /** Задаёт паттерн маски. Доступен для типов `text`, `password`, `email`, `tel`, `search`, `url`
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
-    mask?: Nullable<string>;
-    /** Устанавливает символ маски.
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
-    maskChar?: Nullable<string>;
-    /** Задаёт словарь символов-регулярок для задания маски
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput.
-     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }. */
-    formatChars?: Record<string, string>;
-    /** Включает показ символов маски.
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
-    alwaysShowMask?: boolean;
     /** Задаёт размер.
      * @default small
      */
@@ -70,13 +54,11 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
     type?: InputType;
     /** Задаёт значение внутри поля. */
     value?: string;
-    /** @deprecated Со следующей мажорной версии Input перестанет поддерживать проп `capture`. */
-    capture?: boolean;
     /** Устанавливает префикс `ReactNode` перед значением, но после иконки. */
     prefix?: React.ReactNode;
     /** Устанавливает суффикс `ReactNode` после значения, но перед правой иконкой. */
     suffix?: React.ReactNode;
-    /** Выделяет введенное значение при фокусе в поле. Работает с типами `text`, `password`, `tel`, `search`, `url`. */
+    /** Выделяет введённое значение при фокусе в поле. Работает с типами `text`, `password`, `tel`, `search`, `url`. */
     selectAllOnFocus?: boolean;
     /** Устанавливает обработчик на случай некорректного ввода.
      * Если передан onUnexpectedInput, он будет вызван при ошибке, а эффект мигания можно запустить вручную через публичный метод blink.
@@ -92,7 +74,6 @@ export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
 export interface InputState {
     focused: boolean;
     hovered: boolean;
-    needsPolyfillPlaceholder: boolean;
     clearCrossShowed: boolean;
 }
 export declare const InputDataTids: {
@@ -110,16 +91,17 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private size;
     private getProps;
     private selectAllId;
+    private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     input: HTMLInputElement | null;
-    labelRef: React.RefObject<HTMLLabelElement>;
+    labelRef: React.RefObject<HTMLLabelElement | null>;
     getRootNode: TGetRootNode;
     private setRootNode;
     private getClearCrossShowed;
     state: InputState;
-    private outputMaskError;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<InputProps>): void;
     componentWillUnmount(): void;
     /** Программно устанавливает фокус на поле.
      * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
@@ -139,18 +121,16 @@ export declare class Input extends React.Component<InputProps, InputState> {
      */
     blink(): void;
     /** start - инициирует последовательное изменение числового значения: начинает повторяющееся увеличение/уменьшение, обычно используется при удерживании кнопки «+» или «−» для числового Input. end - останавливает ранее запущенное числоизменение, инициируемое numberStart.
+     * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
      * @public
      * @param {number} start
      * @param {number} end
      */
     setSelectionRange(start: number, end: number): void;
-    get isMaskVisible(): boolean;
     render(): JSX.Element;
-    private get canBeUsedWithMask();
     /**
      * Переводит фокус в поле (если ещё не в фокусе) и выделяет весь текст в нём.
-     * Работает с типами `text`, `password`, `tel`, `search`, `url`
-     * [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange)
+     * Работает с типами `text`, `password`, `tel`, `search`, `url`.
      * @public
      */
     selectAll: () => void;
@@ -159,7 +139,6 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private cancelDelayedSelectAll;
     private getInput;
     private renderMain;
-    private renderMaskedInput;
     private getSizeClassName;
     private refInput;
     private handleClearInput;
@@ -169,7 +148,6 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private handleFocus;
     private handleKeyDown;
     private handleKeyPress;
-    private handleMaskedValueChange;
     private handleUnexpectedInput;
     private resetFocus;
     private handleBlur;

package/components/Input/Input.styles/Input.styles.js CHANGED Viewed

@@ -1,79 +1,64 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+import { memoizeGetStyles } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 import { resetText } from "../../../lib/styles/Mixins";
-export var styles = memoizeStyle({
-  wrapper: function wrapper() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      align-items: center;\n      display: flex;\n      margin: 0;\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      text-overflow: clip;\n      white-space: nowrap;\n      width: 100%;\n\n      &::before {\n        content: '\\A0';\n        display: inline-block;\n        width: 0;\n      }\n    "], ["\n      align-items: center;\n      display: flex;\n      margin: 0;\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      text-overflow: clip;\n      white-space: nowrap;\n      width: 100%;\n\n      &::before {\n        content: '\\\\A0';\n        display: inline-block;\n        width: 0;\n      }\n    "])));
-  },
-  root: function root(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      align-items: center;\n      background-clip: ", ";\n      background-color: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      transition: border-color ", " ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      cursor: text;\n      display: inline-flex;\n      outline: none;\n      position: relative;\n      width: ", ";\n\n      & * {\n        box-sizing: border-box;\n      }\n    "])), resetText(), t.inputBackgroundClip, t.inputBg, t.inputBorderWidth, t.inputBorderColor, t.inputBorderTopColor, t.transitionDuration, t.transitionTimingFunction, t.inputShadow, t.inputColor, t.inputWidth);
-  },
-  hovering: function hovering(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-color: ", ";\n      }\n    "])), t.inputBorderColorHover);
-  },
-  borderless: function borderless() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      box-shadow: none;\n      border-color: transparent;\n      background-clip: padding-box;\n    "])));
-  },
-  focus: function focus(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      border-color: ", ";\n      box-shadow: ", ";\n      outline: none;\n      z-index: 2;\n    "])), t.inputFocusedBg, t.inputBorderColorFocus, t.inputFocusShadow);
-  },
-  focusFallback: function focusFallback(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      box-shadow: none;\n      outline: ", " solid ", ";\n    "])), t.inputOutlineWidth, t.inputFocusOutline);
-  },
-  placeholder: function placeholder(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      -ms-user-select: none;\n      color: ", ";\n      cursor: text;\n      font-size: inherit;\n      height: 100%;\n      left: 0;\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      user-select: none;\n      white-space: nowrap;\n      width: 100%;\n    "])), t.inputPlaceholderColor);
-  },
-  placeholderFocus: function placeholderFocus(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputPlaceholderColorLight);
-  },
-  placeholderDisabled: function placeholderDisabled(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputPlaceholderColorDisabled);
-  },
-  input: function input(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      -webkit-appearance: none;\n      background: transparent;\n      border: 0 none;\n      color: ", ";\n      font: inherit;\n      line-height: inherit;\n      margin: 0;\n      outline: none;\n      padding: 0;\n      text-overflow: clip;\n      white-space: nowrap;\n      width: 100%;\n      color-scheme: ", ";\n\n      &:-moz-placeholder {\n        opacity: 1;\n      }\n      &::-moz-placeholder {\n        opacity: 1;\n      }\n      &::-ms-clear {\n        display: none;\n      }\n      &:-moz-placeholder {\n        color: ", ";\n      }\n      &::-moz-placeholder {\n        color: ", ";\n      }\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.inputTextColor, t.inputColorScheme, t.inputPlaceholderColor, t.inputPlaceholderColor, t.inputPlaceholderColor);
-  },
-  inputFocus: function inputFocus(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:-moz-placeholder {\n        color: ", ";\n      }\n      &::-moz-placeholder {\n        color: ", ";\n      }\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.inputPlaceholderColorLight, t.inputPlaceholderColorLight, t.inputPlaceholderColorLight);
-  },
-  inputDisabled: function inputDisabled(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      /* fix text color in safari https://bugs.webkit.org/show_bug.cgi?id=115510 */\n      -webkit-text-fill-color: ", ";\n\n      &:-moz-placeholder {\n        -webkit-text-fill-color: ", ";\n      }\n      &::-moz-placeholder {\n        -webkit-text-fill-color: ", ";\n      }\n      &::placeholder {\n        -webkit-text-fill-color: ", ";\n      }\n    "])), t.inputTextColorDisabled, t.inputTextColorDisabled, t.inputPlaceholderColorDisabled, t.inputPlaceholderColorDisabled, t.inputPlaceholderColorDisabled);
-  },
-  warning: function warning(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n      z-index: 2;\n    "])), t.inputBorderColorWarning, t.inputOutlineWidth, t.inputBorderColorWarning);
-  },
-  warningFallback: function warningFallback(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      box-shadow: none;\n      outline: ", " solid ", ";\n    "])), t.inputBorderWidth, t.inputBorderColorWarning);
-  },
-  error: function error(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n      z-index: 2;\n    "])), t.inputBorderColorError, t.inputOutlineWidth, t.inputBorderColorError);
-  },
-  errorFallback: function errorFallback(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      box-shadow: none;\n      outline: ", " solid ", ";\n    "])), t.inputBorderWidth, t.inputBorderColorError);
-  },
-  disabled: function disabled(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      border-color: ", ";\n      box-shadow: none;\n    "])), t.inputDisabledBg, t.inputDisabledBorderColor);
-  },
-  sizeSmall: function sizeSmall(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.inputFontSizeSmall, t.inputLineHeightSmall, t.inputPaddingYSmall, t.inputPaddingYSmall, t.inputPaddingXSmall, t.inputPaddingXSmall, t.inputHeightSmall, t.inputBorderRadiusSmall);
-  },
-  sizeSmallFallback: function sizeSmallFallback(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      line-height: normal;\n    "])), shift(t.inputPaddingYSmall, '0'), shift(t.inputPaddingYSmall, '0'), t.inputPaddingXSmall, t.inputPaddingXSmall);
-  },
-  sizeMedium: function sizeMedium(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.inputFontSizeMedium, t.inputLineHeightMedium, t.inputPaddingYMedium, t.inputPaddingYMedium, t.inputPaddingXMedium, t.inputPaddingXMedium, t.inputHeightMedium, t.inputBorderRadiusMedium);
-  },
-  sizeMediumFallback: function sizeMediumFallback(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      line-height: normal;\n    "])), shift(t.inputPaddingYMedium, '0'), shift(t.inputPaddingYMedium, '0'), t.inputPaddingXMedium, t.inputPaddingXMedium);
-  },
-  sizeLarge: function sizeLarge(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n    "])), t.inputFontSizeLarge, t.inputLineHeightLarge, t.inputHeightLarge, shift(t.inputPaddingYLarge, '0'), shift(t.inputPaddingYLarge, '0'), t.inputPaddingXLarge, t.inputPaddingXLarge, t.inputBorderRadiusLarge);
-  },
-  sizeLargeFallback: function sizeLargeFallback(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      line-height: normal;\n    "])), shift(t.inputPaddingYLarge, '0'), shift(t.inputPaddingYLarge, '0'), t.inputPaddingXLarge, t.inputPaddingXLarge);
-  },
-  hideBlinkingCursor: function hideBlinkingCursor() {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      caret-color: transparent;\n    "])));
-  }
+export var getStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    wrapper: function wrapper() {
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      align-items: center;\n      display: flex;\n      margin: 0;\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      text-overflow: clip;\n      white-space: nowrap;\n      width: 100%;\n\n      &::before {\n        content: '\\A0';\n        display: inline-block;\n        width: 0;\n      }\n    "], ["\n      align-items: center;\n      display: flex;\n      margin: 0;\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      text-overflow: clip;\n      white-space: nowrap;\n      width: 100%;\n\n      &::before {\n        content: '\\\\A0';\n        display: inline-block;\n        width: 0;\n      }\n    "])));
+    },
+    root: function root(t) {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      align-items: center;\n      background-clip: ", ";\n      background-color: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      transition: border-color ", " ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      cursor: text;\n      display: inline-flex;\n      outline: none;\n      position: relative;\n      width: ", ";\n\n      & * {\n        box-sizing: border-box;\n      }\n    "])), resetText(), t.inputBackgroundClip, t.inputBg, t.inputBorderWidth, t.inputBorderColor, t.inputBorderTopColor, t.transitionDuration, t.transitionTimingFunction, t.inputShadow, t.inputColor, t.inputWidth);
+    },
+    hovering: function hovering(t) {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-color: ", ";\n      }\n    "])), t.inputBorderColorHover);
+    },
+    borderless: function borderless() {
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      box-shadow: none;\n      border-color: transparent;\n      background-clip: padding-box;\n    "])));
+    },
+    focus: function focus(t) {
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      border-color: ", ";\n      box-shadow: ", ";\n      outline: none;\n      z-index: 2;\n    "])), t.inputFocusedBg, t.inputBorderColorFocus, t.inputFocusShadow);
+    },
+    placeholder: function placeholder(t) {
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      -ms-user-select: none;\n      color: ", ";\n      cursor: text;\n      font-size: inherit;\n      height: 100%;\n      left: 0;\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      user-select: none;\n      white-space: nowrap;\n      width: 100%;\n    "])), t.inputPlaceholderColor);
+    },
+    placeholderFocus: function placeholderFocus(t) {
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputPlaceholderColorLight);
+    },
+    placeholderDisabled: function placeholderDisabled(t) {
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputPlaceholderColorDisabled);
+    },
+    input: function input(t) {
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      -webkit-appearance: none;\n      background: transparent;\n      border: 0 none;\n      color: ", ";\n      font: inherit;\n      line-height: inherit;\n      margin: 0;\n      outline: none;\n      padding: 0;\n      text-overflow: clip;\n      white-space: nowrap;\n      width: 100%;\n      color-scheme: ", ";\n\n      &:-moz-placeholder {\n        opacity: 1;\n      }\n      &::-moz-placeholder {\n        opacity: 1;\n      }\n      &::-ms-clear {\n        display: none;\n      }\n      &:-moz-placeholder {\n        color: ", ";\n      }\n      &::-moz-placeholder {\n        color: ", ";\n      }\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.inputTextColor, t.inputColorScheme, t.inputPlaceholderColor, t.inputPlaceholderColor, t.inputPlaceholderColor);
+    },
+    inputFocus: function inputFocus(t) {
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:-moz-placeholder {\n        color: ", ";\n      }\n      &::-moz-placeholder {\n        color: ", ";\n      }\n      &::placeholder {\n        color: ", ";\n      }\n    "])), t.inputPlaceholderColorLight, t.inputPlaceholderColorLight, t.inputPlaceholderColorLight);
+    },
+    inputDisabled: function inputDisabled(t) {
+      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      /* fix text color in safari https://bugs.webkit.org/show_bug.cgi?id=115510 */\n      -webkit-text-fill-color: ", ";\n\n      &:-moz-placeholder {\n        -webkit-text-fill-color: ", ";\n      }\n      &::-moz-placeholder {\n        -webkit-text-fill-color: ", ";\n      }\n      &::placeholder {\n        -webkit-text-fill-color: ", ";\n      }\n    "])), t.inputTextColorDisabled, t.inputTextColorDisabled, t.inputPlaceholderColorDisabled, t.inputPlaceholderColorDisabled, t.inputPlaceholderColorDisabled);
+    },
+    warning: function warning(t) {
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n      z-index: 2;\n    "])), t.inputBorderColorWarning, t.inputOutlineWidth, t.inputBorderColorWarning);
+    },
+    error: function error(t) {
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n      z-index: 2;\n    "])), t.inputBorderColorError, t.inputOutlineWidth, t.inputBorderColorError);
+    },
+    disabled: function disabled(t) {
+      return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      border-color: ", ";\n      box-shadow: none;\n    "])), t.inputDisabledBg, t.inputDisabledBorderColor);
+    },
+    sizeSmall: function sizeSmall(t) {
+      return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.inputFontSizeSmall, t.inputLineHeightSmall, t.inputPaddingYSmall, t.inputPaddingYSmall, t.inputPaddingXSmall, t.inputPaddingXSmall, t.inputHeightSmall, t.inputBorderRadiusSmall);
+    },
+    sizeMedium: function sizeMedium(t) {
+      return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])), t.inputFontSizeMedium, t.inputLineHeightMedium, t.inputPaddingYMedium, t.inputPaddingYMedium, t.inputPaddingXMedium, t.inputPaddingXMedium, t.inputHeightMedium, t.inputBorderRadiusMedium);
+    },
+    sizeLarge: function sizeLarge(t) {
+      return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      border-radius: ", ";\n    "])), t.inputFontSizeLarge, t.inputLineHeightLarge, t.inputHeightLarge, shift(t.inputPaddingYLarge, '0'), shift(t.inputPaddingYLarge, '0'), t.inputPaddingXLarge, t.inputPaddingXLarge, t.inputBorderRadiusLarge);
+    },
+    hideBlinkingCursor: function hideBlinkingCursor() {
+      return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      caret-color: transparent;\n    "])));
+    }
+  };
 });

package/components/Input/Input.styles/Input.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["css","memoizeStyle","shift","resetText","styles","wrapper","_templateObject","_taggedTemplateLiteralLoose","root","t","_templateObject2","inputBackgroundClip","inputBg","inputBorderWidth","inputBorderColor","inputBorderTopColor","transitionDuration","transitionTimingFunction","inputShadow","inputColor","inputWidth","hovering","_templateObject3","inputBorderColorHover","borderless","_templateObject4","focus","_templateObject5","inputFocusedBg","inputBorderColorFocus","inputFocusShadow","focusFallback","_templateObject6","inputOutlineWidth","inputFocusOutline","placeholder","_templateObject7","inputPlaceholderColor","placeholderFocus","_templateObject8","inputPlaceholderColorLight","placeholderDisabled","_templateObject9","inputPlaceholderColorDisabled","input","_templateObject10","inputTextColor","inputColorScheme","inputFocus","_templateObject11","inputDisabled","_templateObject12","inputTextColorDisabled","warning","_templateObject13","inputBorderColorWarning","warningFallback","_templateObject14","error","_templateObject15","inputBorderColorError","errorFallback","_templateObject16","disabled","_templateObject17","inputDisabledBg","inputDisabledBorderColor","sizeSmall","_templateObject18","inputFontSizeSmall","inputLineHeightSmall","inputPaddingYSmall","inputPaddingXSmall","inputHeightSmall","inputBorderRadiusSmall","sizeSmallFallback","_templateObject19","sizeMedium","_templateObject20","inputFontSizeMedium","inputLineHeightMedium","inputPaddingYMedium","inputPaddingXMedium","inputHeightMedium","inputBorderRadiusMedium","sizeMediumFallback","_templateObject21","sizeLarge","_templateObject22","inputFontSizeLarge","inputLineHeightLarge","inputHeightLarge","inputPaddingYLarge","inputPaddingXLarge","inputBorderRadiusLarge","sizeLargeFallback","_templateObject23","hideBlinkingCursor","_templateObject24"],"sources":["Input.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport { resetText } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n wrapper() {\n return css`\n align-items: center;\n display: flex;\n margin: 0;\n min-width: 0;\n overflow: hidden;\n position: relative;\n text-overflow: clip;\n white-space: nowrap;\n width: 100%;\n\n &::before {\n content: '\\\\A0';\n display: inline-block;\n width: 0;\n }\n `;\n },\n\n root(t: Theme) {\n return css`\n ${resetText()};\n\n align-items: center;\n background-clip: ${t.inputBackgroundClip};\n background-color: ${t.inputBg};\n border: ${t.inputBorderWidth} solid ${t.inputBorderColor};\n border-top-color: ${t.inputBorderTopColor};\n transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction};\n box-shadow: ${t.inputShadow};\n box-sizing: border-box;\n color: ${t.inputColor};\n cursor: text;\n display: inline-flex;\n outline: none;\n position: relative;\n width: ${t.inputWidth};\n\n & * {\n box-sizing: border-box;\n }\n `;\n },\n\n hovering(t: Theme) {\n return css`\n &:hover {\n border-color: ${t.inputBorderColorHover};\n }\n `;\n },\n\n borderless() {\n return css`\n box-shadow: none;\n border-color: transparent;\n background-clip: padding-box;\n `;\n },\n\n focus(t: Theme) {\n return css`\n background-color: ${t.inputFocusedBg};\n border-color: ${t.inputBorderColorFocus};\n box-shadow: ${t.inputFocusShadow};\n outline: none;\n z-index: 2;\n `;\n },\n\n focusFallback(t: Theme) {\n return css`\n box-shadow: none;\n outline: ${t.inputOutlineWidth} solid ${t.inputFocusOutline};\n `;\n },\n\n placeholder(t: Theme) {\n return css`\n -ms-user-select: none;\n color: ${t.inputPlaceholderColor};\n cursor: text;\n font-size: inherit;\n height: 100%;\n left: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n top: 0;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n `;\n },\n\n placeholderFocus(t: Theme) {\n return css`\n color: ${t.inputPlaceholderColorLight};\n `;\n },\n\n placeholderDisabled(t: Theme) {\n return css`\n color: ${t.inputPlaceholderColorDisabled};\n `;\n },\n\n input(t: Theme) {\n return css`\n -webkit-appearance: none;\n background: transparent;\n border: 0 none;\n color: ${t.inputTextColor};\n font: inherit;\n line-height: inherit;\n margin: 0;\n outline: none;\n padding: 0;\n text-overflow: clip;\n white-space: nowrap;\n width: 100%;\n color-scheme: ${t.inputColorScheme};\n\n &:-moz-placeholder {\n opacity: 1;\n }\n &::-moz-placeholder {\n opacity: 1;\n }\n &::-ms-clear {\n display: none;\n }\n &:-moz-placeholder {\n color: ${t.inputPlaceholderColor};\n }\n &::-moz-placeholder {\n color: ${t.inputPlaceholderColor};\n }\n &::placeholder {\n color: ${t.inputPlaceholderColor};\n }\n `;\n },\n\n inputFocus(t: Theme) {\n return css`\n &:-moz-placeholder {\n color: ${t.inputPlaceholderColorLight};\n }\n &::-moz-placeholder {\n color: ${t.inputPlaceholderColorLight};\n }\n &::placeholder {\n color: ${t.inputPlaceholderColorLight};\n }\n `;\n },\n\n inputDisabled(t: Theme) {\n return css`\n color: ${t.inputTextColorDisabled};\n /* fix text color in safari https://bugs.webkit.org/show_bug.cgi?id=115510 */\n -webkit-text-fill-color: ${t.inputTextColorDisabled};\n\n &:-moz-placeholder {\n -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n }\n &::-moz-placeholder {\n -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n }\n &::placeholder {\n -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n border-color: ${t.inputBorderColorWarning};\n box-shadow: 0 0 0 ${t.inputOutlineWidth} ${t.inputBorderColorWarning};\n z-index: 2;\n `;\n },\n\n warningFallback(t: Theme) {\n return css`\n box-shadow: none;\n outline: ${t.inputBorderWidth} solid ${t.inputBorderColorWarning};\n `;\n },\n\n error(t: Theme) {\n return css`\n border-color: ${t.inputBorderColorError};\n box-shadow: 0 0 0 ${t.inputOutlineWidth} ${t.inputBorderColorError};\n z-index: 2;\n `;\n },\n\n errorFallback(t: Theme) {\n return css`\n box-shadow: none;\n outline: ${t.inputBorderWidth} solid ${t.inputBorderColorError};\n `;\n },\n\n disabled(t: Theme) {\n return css`\n background-color: ${t.inputDisabledBg};\n border-color: ${t.inputDisabledBorderColor};\n box-shadow: none;\n `;\n },\n\n sizeSmall(t: Theme) {\n return css`\n font-size: ${t.inputFontSizeSmall};\n line-height: ${t.inputLineHeightSmall};\n padding-top: ${t.inputPaddingYSmall};\n padding-bottom: ${t.inputPaddingYSmall};\n padding-left: ${t.inputPaddingXSmall};\n padding-right: ${t.inputPaddingXSmall};\n height: ${t.inputHeightSmall};\n border-radius: ${t.inputBorderRadiusSmall};\n `;\n },\n\n sizeSmallFallback(t: Theme) {\n return css`\n padding-top: ${shift(t.inputPaddingYSmall, '0')};\n padding-bottom: ${shift(t.inputPaddingYSmall, '0')};\n padding-left: ${t.inputPaddingXSmall};\n padding-right: ${t.inputPaddingXSmall};\n line-height: normal;\n `;\n },\n\n sizeMedium(t: Theme) {\n return css`\n font-size: ${t.inputFontSizeMedium};\n line-height: ${t.inputLineHeightMedium};\n padding-top: ${t.inputPaddingYMedium};\n padding-bottom: ${t.inputPaddingYMedium};\n padding-left: ${t.inputPaddingXMedium};\n padding-right: ${t.inputPaddingXMedium};\n height: ${t.inputHeightMedium};\n border-radius: ${t.inputBorderRadiusMedium};\n `;\n },\n\n sizeMediumFallback(t: Theme) {\n return css`\n padding-top: ${shift(t.inputPaddingYMedium, '0')};\n padding-bottom: ${shift(t.inputPaddingYMedium, '0')};\n padding-left: ${t.inputPaddingXMedium};\n padding-right: ${t.inputPaddingXMedium};\n line-height: normal;\n `;\n },\n\n sizeLarge(t: Theme) {\n return css`\n font-size: ${t.inputFontSizeLarge};\n line-height: ${t.inputLineHeightLarge};\n height: ${t.inputHeightLarge};\n padding-top: ${shift(t.inputPaddingYLarge, '0')};\n padding-bottom: ${shift(t.inputPaddingYLarge, '0')};\n padding-left: ${t.inputPaddingXLarge};\n padding-right: ${t.inputPaddingXLarge};\n border-radius: ${t.inputBorderRadiusLarge};\n `;\n },\n\n sizeLargeFallback(t: Theme) {\n return css`\n padding-top: ${shift(t.inputPaddingYLarge, '0')};\n padding-bottom: ${shift(t.inputPaddingYLarge, '0')};\n padding-left: ${t.inputPaddingXLarge};\n padding-right: ${t.inputPaddingXLarge};\n line-height: normal;\n `;\n },\n\n hideBlinkingCursor() {\n return css`\n caret-color: transparent;\n `;\n },\n});\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["memoizeGetStyles","shift","resetText","getStyles","_ref","css","wrapper","_templateObject","_taggedTemplateLiteralLoose","root","t","_templateObject2","inputBackgroundClip","inputBg","inputBorderWidth","inputBorderColor","inputBorderTopColor","transitionDuration","transitionTimingFunction","inputShadow","inputColor","inputWidth","hovering","_templateObject3","inputBorderColorHover","borderless","_templateObject4","focus","_templateObject5","inputFocusedBg","inputBorderColorFocus","inputFocusShadow","placeholder","_templateObject6","inputPlaceholderColor","placeholderFocus","_templateObject7","inputPlaceholderColorLight","placeholderDisabled","_templateObject8","inputPlaceholderColorDisabled","input","_templateObject9","inputTextColor","inputColorScheme","inputFocus","_templateObject10","inputDisabled","_templateObject11","inputTextColorDisabled","warning","_templateObject12","inputBorderColorWarning","inputOutlineWidth","error","_templateObject13","inputBorderColorError","disabled","_templateObject14","inputDisabledBg","inputDisabledBorderColor","sizeSmall","_templateObject15","inputFontSizeSmall","inputLineHeightSmall","inputPaddingYSmall","inputPaddingXSmall","inputHeightSmall","inputBorderRadiusSmall","sizeMedium","_templateObject16","inputFontSizeMedium","inputLineHeightMedium","inputPaddingYMedium","inputPaddingXMedium","inputHeightMedium","inputBorderRadiusMedium","sizeLarge","_templateObject17","inputFontSizeLarge","inputLineHeightLarge","inputHeightLarge","inputPaddingYLarge","inputPaddingXLarge","inputBorderRadiusLarge","hideBlinkingCursor","_templateObject18"],"sources":["Input.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport { resetText } from '../../lib/styles/Mixins';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n wrapper() {\n return css`\n align-items: center;\n display: flex;\n margin: 0;\n min-width: 0;\n overflow: hidden;\n position: relative;\n text-overflow: clip;\n white-space: nowrap;\n width: 100%;\n\n &::before {\n content: '\\\\A0';\n display: inline-block;\n width: 0;\n }\n `;\n },\n\n root(t: Theme) {\n return css`\n ${resetText()};\n\n align-items: center;\n background-clip: ${t.inputBackgroundClip};\n background-color: ${t.inputBg};\n border: ${t.inputBorderWidth} solid ${t.inputBorderColor};\n border-top-color: ${t.inputBorderTopColor};\n transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction};\n box-shadow: ${t.inputShadow};\n box-sizing: border-box;\n color: ${t.inputColor};\n cursor: text;\n display: inline-flex;\n outline: none;\n position: relative;\n width: ${t.inputWidth};\n\n & * {\n box-sizing: border-box;\n }\n `;\n },\n\n hovering(t: Theme) {\n return css`\n &:hover {\n border-color: ${t.inputBorderColorHover};\n }\n `;\n },\n\n borderless() {\n return css`\n box-shadow: none;\n border-color: transparent;\n background-clip: padding-box;\n `;\n },\n\n focus(t: Theme) {\n return css`\n background-color: ${t.inputFocusedBg};\n border-color: ${t.inputBorderColorFocus};\n box-shadow: ${t.inputFocusShadow};\n outline: none;\n z-index: 2;\n `;\n },\n\n placeholder(t: Theme) {\n return css`\n -ms-user-select: none;\n color: ${t.inputPlaceholderColor};\n cursor: text;\n font-size: inherit;\n height: 100%;\n left: 0;\n overflow: hidden;\n pointer-events: none;\n position: absolute;\n top: 0;\n user-select: none;\n white-space: nowrap;\n width: 100%;\n `;\n },\n\n placeholderFocus(t: Theme) {\n return css`\n color: ${t.inputPlaceholderColorLight};\n `;\n },\n\n placeholderDisabled(t: Theme) {\n return css`\n color: ${t.inputPlaceholderColorDisabled};\n `;\n },\n\n input(t: Theme) {\n return css`\n -webkit-appearance: none;\n background: transparent;\n border: 0 none;\n color: ${t.inputTextColor};\n font: inherit;\n line-height: inherit;\n margin: 0;\n outline: none;\n padding: 0;\n text-overflow: clip;\n white-space: nowrap;\n width: 100%;\n color-scheme: ${t.inputColorScheme};\n\n &:-moz-placeholder {\n opacity: 1;\n }\n &::-moz-placeholder {\n opacity: 1;\n }\n &::-ms-clear {\n display: none;\n }\n &:-moz-placeholder {\n color: ${t.inputPlaceholderColor};\n }\n &::-moz-placeholder {\n color: ${t.inputPlaceholderColor};\n }\n &::placeholder {\n color: ${t.inputPlaceholderColor};\n }\n `;\n },\n\n inputFocus(t: Theme) {\n return css`\n &:-moz-placeholder {\n color: ${t.inputPlaceholderColorLight};\n }\n &::-moz-placeholder {\n color: ${t.inputPlaceholderColorLight};\n }\n &::placeholder {\n color: ${t.inputPlaceholderColorLight};\n }\n `;\n },\n\n inputDisabled(t: Theme) {\n return css`\n color: ${t.inputTextColorDisabled};\n /* fix text color in safari https://bugs.webkit.org/show_bug.cgi?id=115510 */\n -webkit-text-fill-color: ${t.inputTextColorDisabled};\n\n &:-moz-placeholder {\n -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n }\n &::-moz-placeholder {\n -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n }\n &::placeholder {\n -webkit-text-fill-color: ${t.inputPlaceholderColorDisabled};\n }\n `;\n },\n\n warning(t: Theme) {\n return css`\n border-color: ${t.inputBorderColorWarning};\n box-shadow: 0 0 0 ${t.inputOutlineWidth} ${t.inputBorderColorWarning};\n z-index: 2;\n `;\n },\n\n error(t: Theme) {\n return css`\n border-color: ${t.inputBorderColorError};\n box-shadow: 0 0 0 ${t.inputOutlineWidth} ${t.inputBorderColorError};\n z-index: 2;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n background-color: ${t.inputDisabledBg};\n border-color: ${t.inputDisabledBorderColor};\n box-shadow: none;\n `;\n },\n\n sizeSmall(t: Theme) {\n return css`\n font-size: ${t.inputFontSizeSmall};\n line-height: ${t.inputLineHeightSmall};\n padding-top: ${t.inputPaddingYSmall};\n padding-bottom: ${t.inputPaddingYSmall};\n padding-left: ${t.inputPaddingXSmall};\n padding-right: ${t.inputPaddingXSmall};\n height: ${t.inputHeightSmall};\n border-radius: ${t.inputBorderRadiusSmall};\n `;\n },\n\n sizeMedium(t: Theme) {\n return css`\n font-size: ${t.inputFontSizeMedium};\n line-height: ${t.inputLineHeightMedium};\n padding-top: ${t.inputPaddingYMedium};\n padding-bottom: ${t.inputPaddingYMedium};\n padding-left: ${t.inputPaddingXMedium};\n padding-right: ${t.inputPaddingXMedium};\n height: ${t.inputHeightMedium};\n border-radius: ${t.inputBorderRadiusMedium};\n `;\n },\n\n sizeLarge(t: Theme) {\n return css`\n font-size: ${t.inputFontSizeLarge};\n line-height: ${t.inputLineHeightLarge};\n height: ${t.inputHeightLarge};\n padding-top: ${shift(t.inputPaddingYLarge, '0')};\n padding-bottom: ${shift(t.inputPaddingYLarge, '0')};\n padding-left: ${t.inputPaddingXLarge};\n padding-right: ${t.inputPaddingXLarge};\n border-radius: ${t.inputBorderRadiusLarge};\n `;\n },\n\n hideBlinkingCursor() {\n return css`\n caret-color: transparent;\n `;\n },\n}));\n"],"mappings":"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","ignoreList":[]}

package/components/Input/Input.styles.d.ts CHANGED Viewed

@@ -1,11 +1,10 @@
 import type { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     wrapper(): string;
     root(t: Theme): string;
     hovering(t: Theme): string;
     borderless(): string;
     focus(t: Theme): string;
-    focusFallback(t: Theme): string;
     placeholder(t: Theme): string;
     placeholderFocus(t: Theme): string;
     placeholderDisabled(t: Theme): string;
@@ -13,15 +12,10 @@ export declare const styles: {
     inputFocus(t: Theme): string;
     inputDisabled(t: Theme): string;
     warning(t: Theme): string;
-    warningFallback(t: Theme): string;
     error(t: Theme): string;
-    errorFallback(t: Theme): string;
     disabled(t: Theme): string;
     sizeSmall(t: Theme): string;
-    sizeSmallFallback(t: Theme): string;
     sizeMedium(t: Theme): string;
-    sizeMediumFallback(t: Theme): string;
     sizeLarge(t: Theme): string;
-    sizeLargeFallback(t: Theme): string;
     hideBlinkingCursor(): string;
-};
+}>;

package/components/Input/InputLayout/InputLayout/InputLayout.js CHANGED Viewed

@@ -1,12 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import { useStyles } from "../../../../lib/renderEnvironment";
 import { forwardRefAndName } from "../../../../lib/forwardRefAndName";
 import { InputDataTids } from "../../Input";
 import { CommonWrapper } from "../../../../internal/CommonWrapper";
+import { mergeRefs } from "../../../../lib/mergeRefs";
 import { InputLayoutAside } from "../InputLayoutAside";
 import { InputLayoutContext, InputLayoutContextDefault } from "../InputLayoutContext";
-import { stylesLayout } from "../InputLayout.styles";
+import { getStylesLayout } from "../InputLayout.styles";
 export var InputLayout = forwardRefAndName('InputLayout', function (props, ref) {
+  var stylesLayout = useStyles(getStylesLayout);
   var leftIcon = props.leftIcon,
     rightIcon = props.rightIcon,
     prefix = props.prefix,
@@ -24,9 +27,10 @@ export var InputLayout = forwardRefAndName('InputLayout', function (props, ref)
     }, /*#__PURE__*/
     React.createElement(CommonWrapper, props, /*#__PURE__*/
     React.createElement(Tag, _extends({
-      ref: ref,
       "data-tid": InputDataTids.root
-    }, labelProps), /*#__PURE__*/
+    }, labelProps, {
+      ref: mergeRefs(ref, labelProps.ref)
+    }), /*#__PURE__*/
     React.createElement(InputLayoutAside, {
       icon: leftIcon,
       text: prefix,

package/components/Input/InputLayout/InputLayout/InputLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","forwardRefAndName","InputDataTids","CommonWrapper","InputLayoutAside","InputLayoutContext","InputLayoutContextDefault","~~stylesLayout~~","InputLayout","props","ref","leftIcon","rightIcon","prefix","suffix","labelProps","context","children","_props$tag","tag","_context","_extends","Tag","createElement","Provider","value","root","icon","text","side","className","input"],"sources":["InputLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport type { InputProps } from '../Input';\nimport { InputDataTids } from '../Input';\nimport type { CommonProps } from '../../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../../internal/CommonWrapper';\n\nimport { InputLayoutAside } from './InputLayoutAside';\nimport type { InputLayoutContextProps } from './InputLayoutContext';\nimport { InputLayoutContext, InputLayoutContextDefault } from './InputLayoutContext';\nimport { ~~stylesLayout~~ } from './InputLayout.styles';\n\ntype InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' \| 'rightIcon' \| 'prefix' \| 'suffix'>;\n\nexport interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {\n labelProps: React.LabelHTMLAttributes<HTMLLabelElement~~>;\~~n context: Partial<InputLayoutContextProps>;\n tag?: 'label' \| 'span';\n}\n\nexport const InputLayout = forwardRefAndName<HTMLLabelElement, InputLayoutRootProps>('InputLayout', (props, ref) => {\n const { leftIcon, rightIcon, prefix, suffix, labelProps, context, children, tag = 'label' } = props;\n const _context: InputLayoutContextProps = { ...InputLayoutContextDefault, ...context };\n const Tag = tag;\n\n return (\n <InputLayoutContext.Provider value={_context}>\n <CommonWrapper {...props}>\n <Tag ~~ref={ref}~~ data-tid={InputDataTids.root} {...labelProps}>\n <InputLayoutAside icon={leftIcon} text={prefix} side=\"left\" />\n <span className={stylesLayout.input()}>{children}</span>\n <InputLayoutAside icon={rightIcon} text={suffix} side=\"right\" />\n </Tag>\n </CommonWrapper>\n </InputLayoutContext.Provider>\n );\n});\n"],"mappings":"0DAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,iBAAiB,QAAQ,gCAAgC;;AAElE,SAASC,aAAa,QAAQ,UAAU;;AAExC,SAASC,aAAa,QAAQ,iCAAiC~~;;AAE~~/D,SAASC,gBAAgB,QAAQ,oBAAoB;;AAErD,SAASC,kBAAkB,EAAEC,yBAAyB,QAAQ,sBAAsB;AACpF,SAASC,~~YAAY~~,QAAQ,sBAAsB;;;;;;;;;;~~AAUnD~~,OAAO,IAAMC,WAAW,~~GAAGP~~,iBAAiB,CAAyC,aAAa,EAAE,~~UAACQ~~,KAAK,EAAEC,GAAG,EAAK;EAClH,~~IAAQC~~,QAAQ,~~GAA8EF~~,KAAK,~~CAA3FE~~,QAAQ,CAAEC,SAAS,~~GAAmEH~~,KAAK,~~CAAjFG~~,SAAS,CAAEC,MAAM,~~GAA2DJ~~,KAAK,~~CAAtEI~~,MAAM,CAAEC,MAAM,~~GAAmDL~~,KAAK,~~CAA9DK~~,MAAM,CAAEC,UAAU,~~GAAuCN~~,KAAK,~~CAAtDM~~,UAAU,CAAEC,OAAO,~~GAA8BP~~,KAAK,~~CAA1CO~~,OAAO,CAAEC,QAAQ,~~GAAoBR~~,KAAK,~~CAAjCQ~~,QAAQ,CAAAC,UAAA,~~GAAoBT~~,KAAK,~~CAAvBU~~,GAAG,CAAHA,GAAG,GAAAD,UAAA,cAAG,OAAO,GAAAA,UAAA;EACzF,IAAME,QAAiC,GAAAC,QAAA,~~KAAQf~~,yBAAyB,~~EAAKU~~,OAAO,CAAE;EACtF,IAAMM,GAAG,GAAGH,GAAG;;EAEf;~~IACEnB~~,KAAA,~~CAAAuB~~,aAAA,~~CAAClB~~,kBAAkB,~~CAACmB~~,QAAQ,IAACC,KAAK,EAAEL,QAAS;~~IAC3CpB~~,KAAA,~~CAAAuB~~,aAAA,~~CAACpB~~,aAAa,~~EAAKM~~,KAAK;~~IACtBT~~,KAAA,~~CAAAuB~~,aAAA,CAACD,GAAG,EAAAD,QAAA,~~GAACX~~,GAAG,~~EAAEA~~,~~GAAI~~,~~EAAC~~,~~YAAUR~~,~~aAAa~~,~~CAACwB~~,~~IAAK~~,~~IAAKX~~,~~UAAU~~;~~IACzDf~~,KAAA,~~CAAAuB~~,aAAA,~~CAACnB~~,gBAAgB,~~IAACuB~~,IAAI,EAAEhB,QAAS,EAACiB,IAAI,EAAEf,MAAO,EAACgB,IAAI,EAAC,MAAM,EAAE,CAAC;~~IAC9D7B~~,KAAA,~~CAAAuB~~,aAAA,WAAMO,SAAS,~~EAAEvB~~,YAAY,~~CAACwB~~,KAAK,CAAC,CAAE,IAAEd,QAAe,CAAC;~~IACxDjB~~,KAAA,~~CAAAuB~~,aAAA,~~CAACnB~~,gBAAgB,~~IAACuB~~,IAAI,EAAEf,SAAU,EAACgB,IAAI,EAAEd,MAAO,EAACe,IAAI,EAAC,OAAO,EAAE;IAC5D;IACQ;IACY,CAAC;;AAElC,CAAC,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","useStyles","forwardRefAndName","InputDataTids","CommonWrapper","mergeRefs","InputLayoutAside","InputLayoutContext","InputLayoutContextDefault","getStylesLayout","InputLayout","props","ref","stylesLayout","leftIcon","rightIcon","prefix","suffix","labelProps","context","children","_props$tag","tag","_context","_extends","Tag","createElement","Provider","value","root","icon","text","side","className","input"],"sources":["InputLayout.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment';\nimport { forwardRefAndName } from '../../../lib/forwardRefAndName';\nimport type { InputProps } from '../Input';\nimport { InputDataTids } from '../Input';\nimport type { CommonProps } from '../../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../../internal/CommonWrapper';\nimport { mergeRefs } from '../../../lib/mergeRefs';\n\nimport { InputLayoutAside } from './InputLayoutAside';\nimport type { InputLayoutContextProps } from './InputLayoutContext';\nimport { InputLayoutContext, InputLayoutContextDefault } from './InputLayoutContext';\nimport { getStylesLayout } from './InputLayout.styles';\n\ntype InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' \| 'rightIcon' \| 'prefix' \| 'suffix'>;\n\nexport interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {\n labelProps: React.LabelHTMLAttributes<HTMLLabelElement> & { ref?: React.Ref<HTMLLabelElement> };\n context: Partial<InputLayoutContextProps>;\n tag?: 'label' \| 'span';\n}\n\nexport const InputLayout = forwardRefAndName<HTMLLabelElement, InputLayoutRootProps>('InputLayout', (props, ref) => {\n const stylesLayout = useStyles(getStylesLayout);\n const { leftIcon, rightIcon, prefix, suffix, labelProps, context, children, tag = 'label' } = props;\n const _context: InputLayoutContextProps = { ...InputLayoutContextDefault, ...context };\n const Tag = tag;\n\n return (\n <InputLayoutContext.Provider value={_context}>\n <CommonWrapper {...props}>\n <Tag data-tid={InputDataTids.root} {...labelProps} ref={mergeRefs(ref, labelProps.ref)}>\n <InputLayoutAside icon={leftIcon} text={prefix} side=\"left\" />\n <span className={stylesLayout.input()}>{children}</span>\n <InputLayoutAside icon={rightIcon} text={suffix} side=\"right\" />\n </Tag>\n </CommonWrapper>\n </InputLayoutContext.Provider>\n );\n});\n"],"mappings":"0DAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,SAAS,QAAQ,gCAAgC;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;;AAElE,SAASC,aAAa,QAAQ,UAAU;;AAExC,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,SAAS,QAAQ,wBAAwB;;AAElD,SAASC,gBAAgB,QAAQ,oBAAoB;;AAErD,SAASC,kBAAkB,EAAEC,yBAAyB,QAAQ,sBAAsB;AACpF,SAASC,eAAe,QAAQ,sBAAsB;;;;;;;;;;AAUtD,OAAO,IAAMC,WAAW,GAAGR,iBAAiB,CAAyC,aAAa,EAAE,UAACS,KAAK,EAAEC,GAAG,EAAK;EAClH,IAAMC,YAAY,GAAGZ,SAAS,CAACQ,eAAe,CAAC;EAC/C,IAAQK,QAAQ,GAA8EH,KAAK,CAA3FG,QAAQ,CAAEC,SAAS,GAAmEJ,KAAK,CAAjFI,SAAS,CAAEC,MAAM,GAA2DL,KAAK,CAAtEK,MAAM,CAAEC,MAAM,GAAmDN,KAAK,CAA9DM,MAAM,CAAEC,UAAU,GAAuCP,KAAK,CAAtDO,UAAU,CAAEC,OAAO,GAA8BR,KAAK,CAA1CQ,OAAO,CAAEC,QAAQ,GAAoBT,KAAK,CAAjCS,QAAQ,CAAAC,UAAA,GAAoBV,KAAK,CAAvBW,GAAG,CAAHA,GAAG,GAAAD,UAAA,cAAG,OAAO,GAAAA,UAAA;EACzF,IAAME,QAAiC,GAAAC,QAAA,KAAQhB,yBAAyB,EAAKW,OAAO,CAAE;EACtF,IAAMM,GAAG,GAAGH,GAAG;;EAEf;IACEtB,KAAA,CAAA0B,aAAA,CAACnB,kBAAkB,CAACoB,QAAQ,IAACC,KAAK,EAAEL,QAAS;IAC3CvB,KAAA,CAAA0B,aAAA,CAACtB,aAAa,EAAKO,KAAK;IACtBX,KAAA,CAAA0B,aAAA,CAACD,GAAG,EAAAD,QAAA,GAAC,YAAUrB,aAAa,CAAC0B,IAAK,IAAKX,UAAU,IAAEN,GAAG,EAAEP,SAAS,CAACO,GAAG,EAAEM,UAAU,CAACN,GAAG,CAAE;IACrFZ,KAAA,CAAA0B,aAAA,CAACpB,gBAAgB,IAACwB,IAAI,EAAEhB,QAAS,EAACiB,IAAI,EAAEf,MAAO,EAACgB,IAAI,EAAC,MAAM,EAAE,CAAC;IAC9DhC,KAAA,CAAA0B,aAAA,WAAMO,SAAS,EAAEpB,YAAY,CAACqB,KAAK,CAAC,CAAE,IAAEd,QAAe,CAAC;IACxDpB,KAAA,CAAA0B,aAAA,CAACpB,gBAAgB,IAACwB,IAAI,EAAEf,SAAU,EAACgB,IAAI,EAAEd,MAAO,EAACe,IAAI,EAAC,OAAO,EAAE;IAC5D;IACQ;IACY,CAAC;;AAElC,CAAC,CAAC","ignoreList":[]}

package/components/Input/InputLayout/InputLayout.d.ts CHANGED Viewed

@@ -4,7 +4,9 @@ import type { CommonProps } from '../../../internal/CommonWrapper';
 import type { InputLayoutContextProps } from './InputLayoutContext';
 type InputLayoutRootFromInputProps = Pick<InputProps, 'leftIcon' | 'rightIcon' | 'prefix' | 'suffix'>;
 export interface InputLayoutRootProps extends InputLayoutRootFromInputProps, CommonProps {
-    labelProps: React.LabelHTMLAttributes<HTMLLabelElement>;
+    labelProps: React.LabelHTMLAttributes<HTMLLabelElement> & {
+        ref?: React.Ref<HTMLLabelElement>;
+    };
     context: Partial<InputLayoutContextProps>;
     tag?: 'label' | 'span';
 }

package/components/Input/InputLayout/InputLayout.styles/InputLayout.styles.js CHANGED Viewed

@@ -1,31 +1,34 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import { ZERO_WIDTH_SPACE_CSS } from "../../../../lib/chars";
-import { css, memoizeStyle } from "../../../../lib/theming/Emotion";
-import { styles } from "../../Input.styles";
-export var stylesLayout = memoizeStyle({
-  root: function root(t) {
-    return styles.root(t);
-  },
-  input: function input() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      min-width: 0;\n      overflow: hidden;\n      position: relative;\n      width: 100%;\n      display: flex;\n    "])));
-  },
-  aside: function aside() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n\n      &::before {\n        content: '", "';\n      }\n    "])), ZERO_WIDTH_SPACE_CSS);
-  },
-  icon: function icon(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputIconColor);
-  },
-  iconFocus: function iconFocus(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputFocusedIconColor);
-  },
-  iconDisabled: function iconDisabled(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n      color: ", ";\n    "])), t.inputIconColorDisabled);
-  },
-  text: function text(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputPlaceholderColor);
-  },
-  textDisabled: function textDisabled(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.inputPlaceholderColorDisabled);
-  }
+import { memoizeGetStyles } from "../../../../lib/theming/Emotion";
+import { getStyles } from "../../Input.styles";
+export var getStylesLayout = memoizeGetStyles(function (emotion) {
+  var styles = getStyles(emotion);
+  return {
+    root: function root(t) {
+      return styles.root(t);
+    },
+    input: function input() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        min-width: 0;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        display: flex;\n      "])));
+    },
+    aside: function aside() {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        align-items: center;\n        flex-shrink: 0;\n\n        &::before {\n          content: '", "';\n        }\n      "])), ZERO_WIDTH_SPACE_CSS);
+    },
+    icon: function icon(t) {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.inputIconColor);
+    },
+    iconFocus: function iconFocus(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.inputFocusedIconColor);
+    },
+    iconDisabled: function iconDisabled(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n        color: ", ";\n      "])), t.inputIconColorDisabled);
+    },
+    text: function text(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.inputPlaceholderColor);
+    },
+    textDisabled: function textDisabled(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.inputPlaceholderColorDisabled);
+    }
+  };
 });

package/components/Input/InputLayout/InputLayout.styles/InputLayout.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["ZERO_WIDTH_SPACE_CSS","~~css~~","~~memoizeStyle~~","~~styles~~","~~stylesLayout~~","root","t","input","_templateObject","_taggedTemplateLiteralLoose","aside","_templateObject2","icon","_templateObject3","inputIconColor","iconFocus","_templateObject4","inputFocusedIconColor","iconDisabled","_templateObject5","inputIconColorDisabled","text","_templateObject6","inputPlaceholderColor","textDisabled","_templateObject7","inputPlaceholderColorDisabled"],"sources":["InputLayout.styles.ts"],"sourcesContent":["import { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars';\nimport { ~~css,~~ ~~memoizeStyle~~ } from '../../../lib/theming/Emotion';\nimport type { Theme } from '../../../lib/theming/Theme';\nimport { ~~styles~~ } from '../Input.styles';\n\nexport const ~~stylesLayout~~ = ~~memoizeStyle~~({\n root(t: Theme) {\n return styles.root(t);\n },\n input() {\n return css`\n min-width: 0;\n overflow: hidden;\n position: relative;\n width: 100%;\n display: flex;\n `;\n },\n aside() {\n return css`\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n\n &::before {\n content: '${ZERO_WIDTH_SPACE_CSS}';\n }\n `;\n },\n icon(t: Theme) {\n return css`\n color: ${t.inputIconColor};\n `;\n },\n iconFocus(t: Theme) {\n return css`\n color: ${t.inputFocusedIconColor};\n `;\n },\n iconDisabled(t: Theme) {\n return css`\n cursor: default;\n color: ${t.inputIconColorDisabled};\n `;\n },\n text(t: Theme) {\n return css`\n color: ${t.inputPlaceholderColor};\n `;\n },\n textDisabled(t: Theme) {\n return css`\n color: ${t.inputPlaceholderColorDisabled};\n `;\n },\n});\n"],"mappings":"~~gOAAA~~,SAASA,oBAAoB,QAAQ,oBAAoB;AACzD,SAASC,~~GAAG~~,~~EAAEC,YAAY,~~QAAQ,8BAA8B;;~~AAEhE~~,SAASC,~~MAAM~~,QAAQ,iBAAiB;;~~AAExC~~,OAAO,IAAMC,~~YAAY~~,GAAGF,~~YAAY~~,CAAC;~~EACvCG~~,IAAI,WAAAA,KAACC,CAAQ,EAAE;~~IACb~~,~~OAAOH~~,MAAM,~~CAACE~~,IAAI,CAACC,CAAC,CAAC;~~EACvB~~,CAAC;~~EACDC~~,KAAK,WAAAA,MAAA,EAAG;~~IACN~~,~~OAAON~~,GAAG,~~CAAAO~~,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;~~EAOZ~~,CAAC;~~EACDC~~,KAAK,WAAAA,MAAA,EAAG;~~IACN~~,~~OAAOT~~,GAAG,~~CAAAU~~,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;;~~IAMMT~~,oBAAoB;;;~~EAGtC~~,CAAC;~~EACDY~~,IAAI,WAAAA,~~KAACN~~,CAAQ,EAAE;~~IACb~~,~~OAAOL~~,GAAG,~~CAAAY~~,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;~~IACCH~~,CAAC,~~CAACQ~~,cAAc;;~~EAE7B~~,CAAC;~~EACDC~~,SAAS,WAAAA,~~UAACT~~,CAAQ,EAAE;~~IAClB~~,~~OAAOL~~,GAAG,~~CAAAe~~,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;~~IACCH~~,CAAC,~~CAACW~~,qBAAqB;;~~EAEpC~~,CAAC;~~EACDC~~,YAAY,WAAAA,~~aAACZ~~,CAAQ,EAAE;~~IACrB~~,~~OAAOL~~,GAAG,~~CAAAkB~~,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;~~IAECH~~,CAAC,~~CAACc~~,sBAAsB;;~~EAErC~~,CAAC;~~EACDC~~,IAAI,WAAAA,~~KAACf~~,CAAQ,EAAE;~~IACb~~,~~OAAOL~~,GAAG,~~CAAAqB~~,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;~~IACCH~~,CAAC,~~CAACiB~~,qBAAqB;;~~EAEpC~~,CAAC;~~EACDC~~,YAAY,WAAAA,~~aAAClB~~,CAAQ,EAAE;~~IACrB~~,~~OAAOL~~,GAAG,~~CAAAwB~~,gBAAA,KAAAA,gBAAA,GAAAhB,2BAAA;~~IACCH~~,CAAC,~~CAACoB~~,6BAA6B;;~~EAE5C~~;~~AACF~~,CAAC,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["ZERO_WIDTH_SPACE_CSS","memoizeGetStyles","getStyles","getStylesLayout","emotion","styles","root","t","input","css","_templateObject","_taggedTemplateLiteralLoose","aside","_templateObject2","icon","_templateObject3","inputIconColor","iconFocus","_templateObject4","inputFocusedIconColor","iconDisabled","_templateObject5","inputIconColorDisabled","text","_templateObject6","inputPlaceholderColor","textDisabled","_templateObject7","inputPlaceholderColorDisabled"],"sources":["InputLayout.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../../lib/chars';\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion';\nimport type { Theme } from '../../../lib/theming/Theme';\nimport { getStyles } from '../Input.styles';\n\nexport const getStylesLayout = memoizeGetStyles((emotion: Emotion) => {\n const styles = getStyles(emotion);\n\n return {\n root(t: Theme) {\n return styles.root(t);\n },\n input() {\n return emotion.css`\n min-width: 0;\n overflow: hidden;\n position: relative;\n width: 100%;\n display: flex;\n `;\n },\n aside() {\n return emotion.css`\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n\n &::before {\n content: '${ZERO_WIDTH_SPACE_CSS}';\n }\n `;\n },\n icon(t: Theme) {\n return emotion.css`\n color: ${t.inputIconColor};\n `;\n },\n iconFocus(t: Theme) {\n return emotion.css`\n color: ${t.inputFocusedIconColor};\n `;\n },\n iconDisabled(t: Theme) {\n return emotion.css`\n cursor: default;\n color: ${t.inputIconColorDisabled};\n `;\n },\n text(t: Theme) {\n return emotion.css`\n color: ${t.inputPlaceholderColor};\n `;\n },\n textDisabled(t: Theme) {\n return emotion.css`\n color: ${t.inputPlaceholderColorDisabled};\n `;\n },\n };\n});\n"],"mappings":";;AAEA,SAASA,oBAAoB,QAAQ,oBAAoB;AACzD,SAASC,gBAAgB,QAAQ,8BAA8B;;AAE/D,SAASC,SAAS,QAAQ,iBAAiB;;AAE3C,OAAO,IAAMC,eAAe,GAAGF,gBAAgB,CAAC,UAACG,OAAgB,EAAK;EACpE,IAAMC,MAAM,GAAGH,SAAS,CAACE,OAAO,CAAC;;EAEjC,OAAO;IACLE,IAAI,WAAAA,KAACC,CAAQ,EAAE;MACb,OAAOF,MAAM,CAACC,IAAI,CAACC,CAAC,CAAC;IACvB,CAAC;IACDC,KAAK,WAAAA,MAAA,EAAG;MACN,OAAOJ,OAAO,CAACK,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;IAOpB,CAAC;IACDC,KAAK,WAAAA,MAAA,EAAG;MACN,OAAOR,OAAO,CAACK,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;;;MAMFX,oBAAoB;;;IAGtC,CAAC;IACDc,IAAI,WAAAA,KAACP,CAAQ,EAAE;MACb,OAAOH,OAAO,CAACK,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;MACPJ,CAAC,CAACS,cAAc;;IAE7B,CAAC;IACDC,SAAS,WAAAA,UAACV,CAAQ,EAAE;MAClB,OAAOH,OAAO,CAACK,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;MACPJ,CAAC,CAACY,qBAAqB;;IAEpC,CAAC;IACDC,YAAY,WAAAA,aAACb,CAAQ,EAAE;MACrB,OAAOH,OAAO,CAACK,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;MAEPJ,CAAC,CAACe,sBAAsB;;IAErC,CAAC;IACDC,IAAI,WAAAA,KAAChB,CAAQ,EAAE;MACb,OAAOH,OAAO,CAACK,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;MACPJ,CAAC,CAACkB,qBAAqB;;IAEpC,CAAC;IACDC,YAAY,WAAAA,aAACnB,CAAQ,EAAE;MACrB,OAAOH,OAAO,CAACK,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAhB,2BAAA;MACPJ,CAAC,CAACqB,6BAA6B;;IAE5C;EACF,CAAC;AACH,CAAC,CAAC","ignoreList":[]}

package/components/Input/InputLayout/InputLayout.styles.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { Theme } from '../../../lib/theming/Theme';
-export declare const stylesLayout: {
+export declare const getStylesLayout: import("../../../lib/theming/Emotion").StylesGetter<{
     root(t: Theme): string;
     input(): string;
     aside(): string;
@@ -8,4 +8,4 @@ export declare const stylesLayout: {
     iconDisabled(t: Theme): string;
     text(t: Theme): string;
     textDisabled(t: Theme): string;
-};
+}>;

package/components/Input/InputLayout/InputLayoutAside/InputLayoutAside.js CHANGED Viewed

@@ -1,11 +1,13 @@
 import React from 'react';
-import { stylesLayout } from "../InputLayout.styles";
+import { useStyles } from "../../../../lib/renderEnvironment";
+import { getStylesLayout } from "../InputLayout.styles";
 import { InputLayoutAsideIcon } from "../InputLayoutAsideIcon";
 import { InputLayoutAsideText } from "../InputLayoutAsideText";
 export var InputLayoutAside = function InputLayoutAside(_ref) {
   var icon = _ref.icon,
     text = _ref.text,
     side = _ref.side;
+  var stylesLayout = useStyles(getStylesLayout);
   var asideClassName = stylesLayout.aside();
   var _icon = /*#__PURE__*/React.createElement(InputLayoutAsideIcon, {
     key: "icon",

package/components/Input/InputLayout/InputLayoutAside/InputLayoutAside.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","~~stylesLayout~~","InputLayoutAsideIcon","InputLayoutAsideText","InputLayoutAside","_ref","icon","text","side","asideClassName","aside","_icon","createElement","key","_text","child","className"],"sources":["InputLayoutAside.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { InputProps } from '../Input';\n\nimport { ~~stylesLayout~~ } from './InputLayout.styles';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon';\nimport { InputLayoutAsideText } from './InputLayoutAsideText';\n\nexport interface InputLayoutAsideProps {\n icon: InputProps['leftIcon'] \| InputProps['rightIcon'];\n text: InputProps['prefix'] \| InputProps['suffix'];\n side: 'left' \| 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, side }) => {\n const asideClassName = stylesLayout.aside();\n\n const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n return <span className={asideClassName}>{child}</span>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO~~;;;;AAIzB~~,SAASC,~~YAAY~~,QAAQ,sBAAsB;~~AACnD~~,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,oBAAoB,QAAQ,wBAAwB;;;;;;;;AAQ7D,OAAO,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAgEA,CAAAC,IAAA,EAA6B,KAAvBC,IAAI,GAAAD,IAAA,CAAJC,IAAI,CAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI,CAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;EACjG,IAAMC,cAAc,~~GAAGR~~,YAAY,~~CAACS~~,KAAK,CAAC,CAAC;;EAE3C,IAAMC,KAAK,~~gBAAGX~~,KAAA,~~CAAAY~~,aAAA,~~CAACV~~,oBAAoB,~~IAACW~~,GAAG,EAAC,MAAM,~~EAACP~~,IAAI,EAAEA,IAAK,EAACE,IAAI,EAAEA,IAAK,EAAE,CAAC;EACzE,~~IAAMM~~,KAAK,~~gBAAGd~~,KAAA,~~CAAAY~~,aAAA,~~CAACT~~,oBAAoB,~~IAACU~~,GAAG,EAAC,MAAM,~~EAACN~~,IAAI,EAAEA,IAAK,EAAE,CAAC;;EAE7D,~~IAAMQ~~,KAAK,~~GAAGP~~,IAAI,KAAK,MAAM,GAAG,~~CAACG~~,KAAK,EAAEG,KAAK,CAAC,GAAG,CAACA,KAAK,EAAEH,KAAK,CAAC;;EAE/D,~~oBAAOX~~,KAAA,~~CAAAY~~,aAAA,WAAMI,SAAS,EAAEP,cAAe,IAAEM,KAAY,CAAC;AACxD,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["React","useStyles","getStylesLayout","InputLayoutAsideIcon","InputLayoutAsideText","InputLayoutAside","_ref","icon","text","side","stylesLayout","asideClassName","aside","_icon","createElement","key","_text","child","className"],"sources":["InputLayoutAside.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useStyles } from '../../../lib/renderEnvironment';\nimport type { InputProps } from '../Input';\n\nimport { getStylesLayout } from './InputLayout.styles';\nimport { InputLayoutAsideIcon } from './InputLayoutAsideIcon';\nimport { InputLayoutAsideText } from './InputLayoutAsideText';\n\nexport interface InputLayoutAsideProps {\n icon: InputProps['leftIcon'] \| InputProps['rightIcon'];\n text: InputProps['prefix'] \| InputProps['suffix'];\n side: 'left' \| 'right';\n}\n\nexport const InputLayoutAside: React.FunctionComponent<InputLayoutAsideProps> = ({ icon, text, side }) => {\n const stylesLayout = useStyles(getStylesLayout);\n const asideClassName = stylesLayout.aside();\n\n const _icon = <InputLayoutAsideIcon key=\"icon\" icon={icon} side={side} />;\n const _text = <InputLayoutAsideText key=\"text\" text={text} />;\n\n const child = side === 'left' ? [_icon, _text] : [_text, _icon];\n\n return <span className={asideClassName}>{child}</span>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,SAAS,QAAQ,gCAAgC;;;AAG1D,SAASC,eAAe,QAAQ,sBAAsB;AACtD,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,oBAAoB,QAAQ,wBAAwB;;;;;;;;AAQ7D,OAAO,IAAMC,gBAAgE,GAAG,SAAnEA,gBAAgEA,CAAAC,IAAA,EAA6B,KAAvBC,IAAI,GAAAD,IAAA,CAAJC,IAAI,CAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI,CAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;EACjG,IAAMC,YAAY,GAAGT,SAAS,CAACC,eAAe,CAAC;EAC/C,IAAMS,cAAc,GAAGD,YAAY,CAACE,KAAK,CAAC,CAAC;;EAE3C,IAAMC,KAAK,gBAAGb,KAAA,CAAAc,aAAA,CAACX,oBAAoB,IAACY,GAAG,EAAC,MAAM,EAACR,IAAI,EAAEA,IAAK,EAACE,IAAI,EAAEA,IAAK,EAAE,CAAC;EACzE,IAAMO,KAAK,gBAAGhB,KAAA,CAAAc,aAAA,CAACV,oBAAoB,IAACW,GAAG,EAAC,MAAM,EAACP,IAAI,EAAEA,IAAK,EAAE,CAAC;;EAE7D,IAAMS,KAAK,GAAGR,IAAI,KAAK,MAAM,GAAG,CAACI,KAAK,EAAEG,KAAK,CAAC,GAAG,CAACA,KAAK,EAAEH,KAAK,CAAC;;EAE/D,oBAAOb,KAAA,CAAAc,aAAA,WAAMI,SAAS,EAAEP,cAAe,IAAEM,KAAY,CAAC;AACxD,CAAC","ignoreList":[]}