@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-6344a.0

package/components/FxInput/FxInput.js

@@ -45,7 +45,6 @@ import React from 'react';
 import warning from 'warning';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { withSize } from '../../lib/size/SizeDecorator.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
@@ -53,7 +52,6 @@ import { CurrencyInput } from '../CurrencyInput/index.js';
 import { Group } from '../Group/index.js';
 import { Input } from '../Input/index.js';
 import { MaskedInput } from '../MaskedInput/index.js';
-import { getStyles } from './FxInput.styles.js';
 import { FxInputRestoreBtn } from './FxInputRestoreBtn.js';
 import { MathFunctionIcon } from './MathFunctionIcon.js';
 export var FxInputDataTids = {
@@ -71,9 +69,7 @@ var FxInput = /** @class */ (function (_super) {
         _this.getProps = createPropsGetter(FxInput_1.defaultProps);
         _this.renderMain = function (props) {
             var button = props.auto ? null : (React.createElement(FxInputRestoreBtn, { size: props.size, onRestore: props.onRestore, corners: props.corners, disabled: props.disabled, borderless: props.borderless, "aria-label": props.buttonAriaLabel }));
-            return (
-            // Инлайн остаётся за пропом `width`, ширину по умолчанию задаёт класс.
-            React.createElement(Group, { "data-tid": FxInputDataTids.root, width: props.width, className: props.width === undefined ? getStyles().defaultWidth() : undefined },
+            return (React.createElement(Group, { "data-tid": FxInputDataTids.root, width: props.width },
                 button,
                 _this.getInput(props)));
         };
@@ -120,7 +116,7 @@ var FxInput = /** @class */ (function (_super) {
             var size = _this.size;
             var commonInputProps = __assign({ corners: corners, size: size, width: '100%', ref: _this.refInput }, rest);
             if (type === 'currency') {
-                return (React.createElement(CurrencyInput, __assign({}, commonInputProps, { signed: signed, integerDigits: integerDigits, fractionDigits: fractionDigits, value: value, onValueChange: _this.props.onValueChange })));
+                return (React.createElement(CurrencyInput, __assign({}, commonInputProps, { signed: signed, integerDigits: integerDigits, fractionDigits: fractionDigits, hideTrailingZeros: hideTrailingZeros, value: value, onValueChange: _this.props.onValueChange })));
             }
             if (mask) {
                 return (React.createElement(MaskedInput, __assign({}, commonInputProps, { leftIcon: _this.getLeftIcon(props), align: "right", mask: mask, maskChar: maskChar, formatChars: formatChars, alwaysShowMask: alwaysShowMask, value: value, onValueChange: _this.props.onValueChange })));
@@ -152,12 +148,12 @@ var FxInput = /** @class */ (function (_super) {
     FxInput.__KONTUR_REACT_UI__ = 'FxInput';
     FxInput.displayName = 'FxInput';
     FxInput.defaultProps = {
+        width: 250,
         type: 'text',
         value: '',
         auto: false,
     };
     FxInput = FxInput_1 = __decorate([
-        withRenderEnvironment,
         rootNode,
         withSize
     ], FxInput);

package/components/FxInput/FxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FxInput.js","sourceRoot":"","sources":["FxInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/types.js';\nimport type { DefaultizedProps } from '../../lib/createPropsGetter.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { CurrencyInput } from '../CurrencyInput/index.js';\nimport type { CurrencyInputProps } from '../CurrencyInput/index.js';\nimport { Group } from '../Group/index.js';\nimport { Input } from '../Input/index.js';\nimport type { InputProps } from '../Input/Input.js';\nimport { MaskedInput, type MaskedInputProps } from '../MaskedInput/index.js';\nimport { getStyles } from './FxInput.styles.js';\nimport { FxInputRestoreBtn } from './FxInputRestoreBtn.js';\nimport { MathFunctionIcon } from './MathFunctionIcon.js';\n\nexport interface FxInputProps\n  extends\n    Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<Partial<MaskedInputProps>, 'alwaysShowMask' | 'mask' | 'maskChar' | 'formatChars'>,\n    Override<\n      Omit<CurrencyInputProps, 'alwaysShowMask' | 'mask' | 'maskChar' | 'formatChars'>,\n      {\n        /** Управляет видимостью кнопки Restore:\n         * - true — кнопка Restore не отображается. Значение в поле является автоматически рассчитанным.\n         * - false — кнопка Restore отображается в поле. Значение в поле считается отредактированным. */\n        auto?: boolean;\n\n        /** Тип поля. */\n        type?: 'currency' | InputProps['type'];\n\n        /** Событие нажатия на кнопку Restore. */\n        onRestore?: () => void;\n\n        /** Событие изменения value. */\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n\n        /** Значение поля. */\n        value?: string | number;\n\n        /** Задаёт ref поля. */\n        refInput?: (element: CurrencyInput | Input | null) => void;\n\n        /** Убирает лишние нули после запятой. */\n        hideTrailingZeros?: boolean;\n\n        /** Атрибут aria-label кнопке Restore. */\n        buttonAriaLabel?: AriaAttributes['aria-label'];\n\n        /** @ignore */\n        corners?: React.CSSProperties;\n      }\n    > {}\n\nexport const FxInputDataTids = {\n  root: 'FxInput__root',\n} as const;\n\ntype DefaultProps = Required<Pick<FxInputProps, 'type' | 'value' | 'auto'>>;\ntype DefaultizedFxInputProps = DefaultizedProps<FxInputProps, DefaultProps>;\n\n/** В автополе можно вывести автоматически рассчитанное цифровое значение. В него можно передавать итог любого вычисления, например, сумму других полей, процент или более сложную функцию.\n *\n * У поля есть иконка математической формулы и кнопка Restore — с её помощью пользователь может вернуть исходное значение, если редактировал поле. Видимость кнопки и поведение при нажатии нужно прописывать в компоненте самостоятельно.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class FxInput extends React.Component<FxInputProps> {\n  public static __KONTUR_REACT_UI__ = 'FxInput';\n  public static displayName = 'FxInput';\n\n  public static defaultProps: DefaultProps = {\n    type: 'text',\n    value: '',\n    auto: false,\n  };\n\n  private theme!: Theme;\n  private size!: SizeProp;\n  private input: Input | CurrencyInput | null = null;\n\n  private getProps = createPropsGetter(FxInput.defaultProps);\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  private validateProps(props: FxInputProps) {\n    if (props.type === 'currency' && props.mask !== undefined) {\n      warning(false, '[FxInput]: Prop \"mask\" is not supported when type=\"currency\"');\n    }\n  }\n\n  public componentDidMount() {\n    this.validateProps(this.getProps());\n  }\n\n  public componentDidUpdate() {\n    this.validateProps(this.getProps());\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain = (props: CommonWrapperRestProps<DefaultizedFxInputProps>): React.JSX.Element => {\n    const button = props.auto ? null : (\n      <FxInputRestoreBtn\n        size={props.size}\n        onRestore={props.onRestore}\n        corners={props.corners}\n        disabled={props.disabled}\n        borderless={props.borderless}\n        aria-label={props.buttonAriaLabel}\n      />\n    );\n\n    return (\n      // Инлайн остаётся за пропом `width`, ширину по умолчанию задаёт класс.\n      <Group\n        data-tid={FxInputDataTids.root}\n        width={props.width}\n        className={props.width === undefined ? getStyles().defaultWidth() : undefined}\n      >\n        {button}\n        {this.getInput(props)}\n      </Group>\n    );\n  };\n\n  /** Программно устанавливает фокус на поле.\n   * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n   * @public\n   */\n  public focus = (): void => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /** Программно снимает фокус с кнопки.\n   * @public\n   */\n  public blur = (): void => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private refInput = (element: Input | CurrencyInput | null) => {\n    this.input = element;\n\n    if (this.props.refInput) {\n      this.props.refInput(this.input);\n    }\n  };\n\n  private getLeftIcon = (props: FxInputProps) => {\n    if (!props.auto) {\n      return null;\n    }\n\n    const iconSizes: Record<SizeProp, number> = {\n      small: parseInt(this.theme.inputIconSizeSmall),\n      medium: parseInt(this.theme.inputIconSizeMedium),\n      large: parseInt(this.theme.inputIconSizeLarge),\n    };\n    const size = this.size;\n\n    return <MathFunctionIcon size={iconSizes[size]} />;\n  };\n\n  private getInput = (props: FxInputProps) => {\n    const {\n      type,\n      onRestore,\n      auto,\n      refInput,\n      value,\n      width,\n      size: _size,\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask,\n      signed,\n      integerDigits,\n      fractionDigits,\n      hideTrailingZeros,\n      buttonAriaLabel,\n      corners: originalCorners,\n      ...rest\n    } = props;\n    const corners: InputProps['corners'] = auto\n      ? originalCorners\n      : { borderBottomLeftRadius: 0, borderTopLeftRadius: 0, ...originalCorners };\n    const size = this.size;\n    const commonInputProps = {\n      corners,\n      size,\n      width: '100%',\n      ref: this.refInput,\n      ...rest,\n    };\n\n    if (type === 'currency') {\n      return (\n        <CurrencyInput\n          {...commonInputProps}\n          signed={signed}\n          integerDigits={integerDigits}\n          fractionDigits={fractionDigits}\n          value={value as CurrencyInputProps['value']}\n          onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n        />\n      );\n    }\n    if (mask) {\n      return (\n        <MaskedInput\n          {...commonInputProps}\n          leftIcon={this.getLeftIcon(props)}\n          align=\"right\"\n          mask={mask}\n          maskChar={maskChar}\n          formatChars={formatChars}\n          alwaysShowMask={alwaysShowMask}\n          value={value as MaskedInputProps['value']}\n          onValueChange={this.props.onValueChange as MaskedInputProps['onValueChange']}\n        />\n      );\n    }\n    return (\n      <Input\n        {...commonInputProps}\n        leftIcon={this.getLeftIcon(props)}\n        align=\"right\"\n        type={type}\n        value={value as InputProps['value']}\n        onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n      />\n    );\n  };\n}\n"]}
+{"version":3,"file":"FxInput.js","sourceRoot":"","sources":["FxInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/types.js';\nimport type { DefaultizedProps } from '../../lib/createPropsGetter.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { CurrencyInput } from '../CurrencyInput/index.js';\nimport type { CurrencyInputProps } from '../CurrencyInput/index.js';\nimport { Group } from '../Group/index.js';\nimport { Input } from '../Input/index.js';\nimport type { InputProps } from '../Input/Input.js';\nimport { MaskedInput, type MaskedInputProps } from '../MaskedInput/index.js';\nimport { FxInputRestoreBtn } from './FxInputRestoreBtn.js';\nimport { MathFunctionIcon } from './MathFunctionIcon.js';\n\nexport interface FxInputProps\n  extends\n    Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<Partial<MaskedInputProps>, 'alwaysShowMask' | 'mask' | 'maskChar' | 'formatChars'>,\n    Override<\n      Omit<CurrencyInputProps, 'alwaysShowMask' | 'mask' | 'maskChar' | 'formatChars'>,\n      {\n        /** Управляет видимостью кнопки Restore:\n         * - true — кнопка Restore не отображается. Значение в поле является автоматически рассчитанным.\n         * - false — кнопка Restore отображается в поле. Значение в поле считается отредактированным. */\n        auto?: boolean;\n\n        /** Тип поля. */\n        type?: 'currency' | InputProps['type'];\n\n        /** Событие нажатия на кнопку Restore. */\n        onRestore?: () => void;\n\n        /** Событие изменения value. */\n        onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n\n        /** Значение поля. */\n        value?: string | number;\n\n        /** Задаёт ref поля. */\n        refInput?: (element: CurrencyInput | Input | null) => void;\n\n        /** Убирает лишние нули после запятой. */\n        hideTrailingZeros?: boolean;\n\n        /** Атрибут aria-label кнопке Restore. */\n        buttonAriaLabel?: AriaAttributes['aria-label'];\n\n        /** @ignore */\n        corners?: React.CSSProperties;\n      }\n    > {}\n\nexport const FxInputDataTids = {\n  root: 'FxInput__root',\n} as const;\n\ntype DefaultProps = Required<Pick<FxInputProps, 'width' | 'type' | 'value' | 'auto'>>;\ntype DefaultizedFxInputProps = DefaultizedProps<FxInputProps, DefaultProps>;\n\n/** В автополе можно вывести автоматически рассчитанное цифровое значение. В него можно передавать итог любого вычисления, например, сумму других полей, процент или более сложную функцию.\n *\n * У поля есть иконка математической формулы и кнопка Restore — с её помощью пользователь может вернуть исходное значение, если редактировал поле. Видимость кнопки и поведение при нажатии нужно прописывать в компоненте самостоятельно.\n */\n@rootNode\n@withSize\nexport class FxInput extends React.Component<FxInputProps> {\n  public static __KONTUR_REACT_UI__ = 'FxInput';\n  public static displayName = 'FxInput';\n\n  public static defaultProps: DefaultProps = {\n    width: 250,\n    type: 'text',\n    value: '',\n    auto: false,\n  };\n\n  private theme!: Theme;\n  private size!: SizeProp;\n  private input: Input | CurrencyInput | null = null;\n\n  private getProps = createPropsGetter(FxInput.defaultProps);\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  private validateProps(props: FxInputProps) {\n    if (props.type === 'currency' && props.mask !== undefined) {\n      warning(false, '[FxInput]: Prop \"mask\" is not supported when type=\"currency\"');\n    }\n  }\n\n  public componentDidMount() {\n    this.validateProps(this.getProps());\n  }\n\n  public componentDidUpdate() {\n    this.validateProps(this.getProps());\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain = (props: CommonWrapperRestProps<DefaultizedFxInputProps>): React.JSX.Element => {\n    const button = props.auto ? null : (\n      <FxInputRestoreBtn\n        size={props.size}\n        onRestore={props.onRestore}\n        corners={props.corners}\n        disabled={props.disabled}\n        borderless={props.borderless}\n        aria-label={props.buttonAriaLabel}\n      />\n    );\n\n    return (\n      <Group data-tid={FxInputDataTids.root} width={props.width}>\n        {button}\n        {this.getInput(props)}\n      </Group>\n    );\n  };\n\n  /** Программно устанавливает фокус на поле.\n   * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.\n   * @public\n   */\n  public focus = (): void => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /** Программно снимает фокус с кнопки.\n   * @public\n   */\n  public blur = (): void => {\n    if (this.input) {\n      this.input.blur();\n    }\n  };\n\n  private refInput = (element: Input | CurrencyInput | null) => {\n    this.input = element;\n\n    if (this.props.refInput) {\n      this.props.refInput(this.input);\n    }\n  };\n\n  private getLeftIcon = (props: FxInputProps) => {\n    if (!props.auto) {\n      return null;\n    }\n\n    const iconSizes: Record<SizeProp, number> = {\n      small: parseInt(this.theme.inputIconSizeSmall),\n      medium: parseInt(this.theme.inputIconSizeMedium),\n      large: parseInt(this.theme.inputIconSizeLarge),\n    };\n    const size = this.size;\n\n    return <MathFunctionIcon size={iconSizes[size]} />;\n  };\n\n  private getInput = (props: FxInputProps) => {\n    const {\n      type,\n      onRestore,\n      auto,\n      refInput,\n      value,\n      width,\n      size: _size,\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask,\n      signed,\n      integerDigits,\n      fractionDigits,\n      hideTrailingZeros,\n      buttonAriaLabel,\n      corners: originalCorners,\n      ...rest\n    } = props;\n    const corners: InputProps['corners'] = auto\n      ? originalCorners\n      : { borderBottomLeftRadius: 0, borderTopLeftRadius: 0, ...originalCorners };\n    const size = this.size;\n    const commonInputProps = {\n      corners,\n      size,\n      width: '100%',\n      ref: this.refInput,\n      ...rest,\n    };\n\n    if (type === 'currency') {\n      return (\n        <CurrencyInput\n          {...commonInputProps}\n          signed={signed}\n          integerDigits={integerDigits}\n          fractionDigits={fractionDigits}\n          hideTrailingZeros={hideTrailingZeros}\n          value={value as CurrencyInputProps['value']}\n          onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n        />\n      );\n    }\n    if (mask) {\n      return (\n        <MaskedInput\n          {...commonInputProps}\n          leftIcon={this.getLeftIcon(props)}\n          align=\"right\"\n          mask={mask}\n          maskChar={maskChar}\n          formatChars={formatChars}\n          alwaysShowMask={alwaysShowMask}\n          value={value as MaskedInputProps['value']}\n          onValueChange={this.props.onValueChange as MaskedInputProps['onValueChange']}\n        />\n      );\n    }\n    return (\n      <Input\n        {...commonInputProps}\n        leftIcon={this.getLeftIcon(props)}\n        align=\"right\"\n        type={type}\n        value={value as InputProps['value']}\n        onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n      />\n    );\n  };\n}\n"]}

package/components/FxInput/FxInputRestoreBtn.js

@@ -9,43 +9,35 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from 'react';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
+import React, { useContext } from 'react';
 import { useSizeControl } from '../../lib/size/useSizeControl.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Button } from '../Button/index.js';
-import { getStyles } from './FxInputRestoreBtn.styles.js';
 import { UndoIcon } from './UndoIcon.js';
-/** Класс размера иконки по размеру контрола. */
-var ICON_SIZE_CLASS = {
-    small: 'iconSmall',
-    medium: 'iconMedium',
-    large: 'iconLarge',
-};
 export var FxInputRestoreBtn = function (props) {
-    var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
     var size = useSizeControl(props.size);
-    // Скругления — ссылками на переменные, а не значениями темы из JS: `corners`
-    // всё равно уезжает в инлайновый `style`, но со ссылкой это перестаёт быть
-    // значением темы в разметке и подхватывает её смену само. Переменные
-    // объявлены на корне самой кнопки — их печатает `CommonWrapper`.
+    var iconSizes = {
+        small: parseInt(theme.inputIconSizeSmall),
+        medium: parseInt(theme.inputIconSizeMedium),
+        large: parseInt(theme.inputIconSizeLarge),
+    };
     var cornersSizes = {
         small: {
-            borderTopLeftRadius: 'var(--kontur-inputBorderRadiusSmall)',
-            borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusSmall)',
+            borderTopLeftRadius: theme.inputBorderRadiusSmall,
+            borderBottomLeftRadius: theme.inputBorderRadiusSmall,
         },
         medium: {
-            borderTopLeftRadius: 'var(--kontur-inputBorderRadiusMedium)',
-            borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusMedium)',
+            borderTopLeftRadius: theme.inputBorderRadiusMedium,
+            borderBottomLeftRadius: theme.inputBorderRadiusMedium,
         },
         large: {
-            borderTopLeftRadius: 'var(--kontur-inputBorderRadiusLarge)',
-            borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusLarge)',
+            borderTopLeftRadius: theme.inputBorderRadiusLarge,
+            borderBottomLeftRadius: theme.inputBorderRadiusLarge,
         },
     };
     var buttonCorners = cornersSizes[size];
-    // Размерный алиас, а не число из темы: по нему иконка выбирает отрисовку, а
-    // точный размер задаёт класс — так значение темы не попадает в разметку.
-    var iconUndo = React.createElement(UndoIcon, { size: size, className: styles[ICON_SIZE_CLASS[size]]() });
+    var iconUndo = React.createElement(UndoIcon, { size: iconSizes[size] });
     return (React.createElement(Button, { use: 'default', size: props.size, onClick: props.onRestore, borderless: props.borderless, disabled: props.disabled, corners: __assign(__assign({ borderTopRightRadius: 0, borderBottomRightRadius: 0 }, buttonCorners), props.corners), icon: iconUndo, "aria-label": props['aria-label'] }));
 };
 //# sourceMappingURL=FxInputRestoreBtn.js.map

package/components/FxInput/FxInputRestoreBtn.js.map

@@ -1 +1 @@
-{"version":3,"file":"FxInputRestoreBtn.js","sourceRoot":"","sources":["FxInputRestoreBtn.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,gDAAgD;AAChD,IAAM,eAAe,GAA+D;IAClF,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,YAAY;IACpB,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAoD,UAAC,KAAK;IACtF,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,IAAI,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxC,6EAA6E;IAC7E,2EAA2E;IAC3E,qEAAqE;IACrE,iEAAiE;IACjE,IAAM,YAAY,GAA0C;QAC1D,KAAK,EAAE;YACL,mBAAmB,EAAE,sCAAsC;YAC3D,sBAAsB,EAAE,sCAAsC;SAC/D;QACD,MAAM,EAAE;YACN,mBAAmB,EAAE,uCAAuC;YAC5D,sBAAsB,EAAE,uCAAuC;SAChE;QACD,KAAK,EAAE;YACL,mBAAmB,EAAE,sCAAsC;YAC3D,sBAAsB,EAAE,sCAAsC;SAC/D;KACF,CAAC;IACF,IAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACzC,4EAA4E;IAC5E,yEAAyE;IACzE,IAAM,QAAQ,GAAG,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,EAAE,GAAI,CAAC;IAEtF,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,sBACL,oBAAoB,EAAE,CAAC,EACvB,uBAAuB,EAAE,CAAC,IACvB,aAAa,GACb,KAAK,CAAC,OAAO,GAElB,IAAI,EAAE,QAAQ,gBACF,KAAK,CAAC,YAAY,CAAC,GAC/B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport type { AriaAttributes } from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { useSizeControl } from '../../lib/size/useSizeControl.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { Button } from '../Button/index.js';\nimport type { FxInputProps } from './FxInput.js';\nimport { getStyles } from './FxInputRestoreBtn.styles.js';\nimport { UndoIcon } from './UndoIcon.js';\n\ninterface FxInputRestoreBtnProps\n  extends Pick<AriaAttributes, 'aria-label'>, Pick<FxInputProps, 'size' | 'onRestore' | 'borderless' | 'disabled'> {\n  /** @ignore */\n  corners?: React.CSSProperties;\n}\n\n/** Класс размера иконки по размеру контрола. */\nconst ICON_SIZE_CLASS: Record<SizeProp, 'iconSmall' | 'iconMedium' | 'iconLarge'> = {\n  small: 'iconSmall',\n  medium: 'iconMedium',\n  large: 'iconLarge',\n};\n\nexport const FxInputRestoreBtn: React.FunctionComponent<FxInputRestoreBtnProps> = (props) => {\n  const styles = useStyles(getStyles);\n  const size = useSizeControl(props.size);\n  // Скругления — ссылками на переменные, а не значениями темы из JS: `corners`\n  // всё равно уезжает в инлайновый `style`, но со ссылкой это перестаёт быть\n  // значением темы в разметке и подхватывает её смену само. Переменные\n  // объявлены на корне самой кнопки — их печатает `CommonWrapper`.\n  const cornersSizes: Record<SizeProp, React.CSSProperties> = {\n    small: {\n      borderTopLeftRadius: 'var(--kontur-inputBorderRadiusSmall)',\n      borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusSmall)',\n    },\n    medium: {\n      borderTopLeftRadius: 'var(--kontur-inputBorderRadiusMedium)',\n      borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusMedium)',\n    },\n    large: {\n      borderTopLeftRadius: 'var(--kontur-inputBorderRadiusLarge)',\n      borderBottomLeftRadius: 'var(--kontur-inputBorderRadiusLarge)',\n    },\n  };\n  const buttonCorners = cornersSizes[size];\n  // Размерный алиас, а не число из темы: по нему иконка выбирает отрисовку, а\n  // точный размер задаёт класс — так значение темы не попадает в разметку.\n  const iconUndo = <UndoIcon size={size} className={styles[ICON_SIZE_CLASS[size]]()} />;\n\n  return (\n    <Button\n      use={'default'}\n      size={props.size}\n      onClick={props.onRestore}\n      borderless={props.borderless}\n      disabled={props.disabled}\n      corners={{\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n        ...buttonCorners,\n        ...props.corners,\n      }}\n      icon={iconUndo}\n      aria-label={props['aria-label']}\n    />\n  );\n};\n"]}
+{"version":3,"file":"FxInputRestoreBtn.js","sourceRoot":"","sources":["FxInputRestoreBtn.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,MAAM,CAAC,IAAM,iBAAiB,GAAoD,UAAC,KAAK;IACtF,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,IAAM,IAAI,GAAG,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAExC,IAAM,SAAS,GAA6B;QAC1C,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;QACzC,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,mBAAmB,CAAC;QAC3C,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,kBAAkB,CAAC;KAC1C,CAAC;IACF,IAAM,YAAY,GAA0C;QAC1D,KAAK,EAAE;YACL,mBAAmB,EAAE,KAAK,CAAC,sBAAsB;YACjD,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;SACrD;QACD,MAAM,EAAE;YACN,mBAAmB,EAAE,KAAK,CAAC,uBAAuB;YAClD,sBAAsB,EAAE,KAAK,CAAC,uBAAuB;SACtD;QACD,KAAK,EAAE;YACL,mBAAmB,EAAE,KAAK,CAAC,sBAAsB;YACjD,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;SACrD;KACF,CAAC;IACF,IAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACzC,IAAM,QAAQ,GAAG,oBAAC,QAAQ,IAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,GAAI,CAAC;IAErD,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,SAAS,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,sBACL,oBAAoB,EAAE,CAAC,EACvB,uBAAuB,EAAE,CAAC,IACvB,aAAa,GACb,KAAK,CAAC,OAAO,GAElB,IAAI,EAAE,QAAQ,gBACF,KAAK,CAAC,YAAY,CAAC,GAC/B,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useContext } from 'react';\nimport type { AriaAttributes } from 'react';\n\nimport { useSizeControl } from '../../lib/size/useSizeControl.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { Button } from '../Button/index.js';\nimport type { FxInputProps } from './FxInput.js';\nimport { UndoIcon } from './UndoIcon.js';\n\ninterface FxInputRestoreBtnProps\n  extends Pick<AriaAttributes, 'aria-label'>, Pick<FxInputProps, 'size' | 'onRestore' | 'borderless' | 'disabled'> {\n  /** @ignore */\n  corners?: React.CSSProperties;\n}\n\nexport const FxInputRestoreBtn: React.FunctionComponent<FxInputRestoreBtnProps> = (props) => {\n  const theme = useContext(ThemeContext);\n  const size = useSizeControl(props.size);\n\n  const iconSizes: Record<SizeProp, number> = {\n    small: parseInt(theme.inputIconSizeSmall),\n    medium: parseInt(theme.inputIconSizeMedium),\n    large: parseInt(theme.inputIconSizeLarge),\n  };\n  const cornersSizes: Record<SizeProp, React.CSSProperties> = {\n    small: {\n      borderTopLeftRadius: theme.inputBorderRadiusSmall,\n      borderBottomLeftRadius: theme.inputBorderRadiusSmall,\n    },\n    medium: {\n      borderTopLeftRadius: theme.inputBorderRadiusMedium,\n      borderBottomLeftRadius: theme.inputBorderRadiusMedium,\n    },\n    large: {\n      borderTopLeftRadius: theme.inputBorderRadiusLarge,\n      borderBottomLeftRadius: theme.inputBorderRadiusLarge,\n    },\n  };\n  const buttonCorners = cornersSizes[size];\n  const iconUndo = <UndoIcon size={iconSizes[size]} />;\n\n  return (\n    <Button\n      use={'default'}\n      size={props.size}\n      onClick={props.onRestore}\n      borderless={props.borderless}\n      disabled={props.disabled}\n      corners={{\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n        ...buttonCorners,\n        ...props.corners,\n      }}\n      icon={iconUndo}\n      aria-label={props['aria-label']}\n    />\n  );\n};\n"]}

package/components/GlobalLoader/GlobalLoaderView.css.d.ts

@@ -0,0 +1,21 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    outer(t: Theme): string;
+    inner(t: Theme): string;
+    standardWithoutAnimation(): string;
+    successWithoutAnimation(): string;
+    errorWithoutAnimation(): string;
+}>;
+/**
+ * Параметры анимаций приходят из компонента CSS-переменными (inline-стилем), потому что при сборке их нет:
+ * `--react-ui-global-loader-delay-before-hide`, `--react-ui-global-loader-expected-time` (оба со значением в ms),
+ * `--react-ui-global-loader-width`, `--react-ui-global-loader-start-width`, `--react-ui-global-loader-left` (в px).
+ */
+export declare const getAnimations: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    successAnimation(_t: Theme): string;
+    errorAnimation(t: Theme): string;
+    standardAnimation(t: Theme): string;
+    acceptAnimation(t: Theme): string;
+    slowAcceptAnimation(t: Theme): string;
+    acceptWithoutAnimation(_t: Theme): string;
+}>;

package/components/GlobalLoader/GlobalLoaderView.css.js

@@ -0,0 +1,4 @@
+
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getAnimations = _b9cd9({successAnimation:'react-ui-GlobalLoaderView__successAnimation',errorAnimation:'react-ui-GlobalLoaderView__errorAnimation',standardAnimation:'react-ui-GlobalLoaderView__standardAnimation',acceptAnimation:'react-ui-GlobalLoaderView__acceptAnimation',slowAcceptAnimation:'react-ui-GlobalLoaderView__slowAcceptAnimation',acceptWithoutAnimation:'react-ui-GlobalLoaderView__acceptWithoutAnimation'});
+export var getStyles = _b9cd9({outer:'react-ui-GlobalLoaderView__outer',inner:'react-ui-GlobalLoaderView__inner',standardWithoutAnimation:'react-ui-GlobalLoaderView__standardWithoutAnimation',successWithoutAnimation:'react-ui-GlobalLoaderView__successWithoutAnimation',errorWithoutAnimation:'react-ui-GlobalLoaderView__errorWithoutAnimation'});

package/components/GlobalLoader/GlobalLoaderView.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalLoaderView.css.js","sourceRoot":"","sources":["GlobalLoaderView.css.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  outer(t: Theme) {\n    return css`\n      width: ${t.globalLoaderWidth};\n      height: ${t.globalLoaderHeight};\n      background-color: ${t.globalLoaderBackgroundColor};\n      position: ${t.globalLoaderPosition};\n      left: ${t.globalLoaderLeft};\n      top: ${t.globalLoaderTop};\n      right: ${t.globalLoaderRight};\n      bottom: ${t.globalLoaderBottom};\n      overflow: hidden;\n    `;\n  },\n  inner(t: Theme) {\n    return css`\n      background-color: ${t.globalLoaderColor};\n      width: 0;\n      height: ${t.globalLoaderHeight};\n      position: absolute;\n      left: 0;\n      overflow: hidden;\n    `;\n  },\n  standardWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 90%;\n    `;\n  },\n  successWithoutAnimation() {\n    return css`\n      left: 0;\n      width: 100%;\n    `;\n  },\n  errorWithoutAnimation() {\n    return css`\n      left: 40%;\n      width: 20%;\n    `;\n  },\n}));\n\nconst moveToRightAnimation = ({ keyframes }: Emotion) => keyframes`\n  0% {\n    left: 0;\n    width: 100%;\n  }\n  50% {\n    left: 50%;\n    width: 50%;\n  }\n  100% {\n    left: 99%;\n    width: 1%\n  }\n`;\nconst spinnerAnimation = ({ keyframes }: Emotion) => keyframes`\n  0% {\n    transform: translateX(50%) scaleX(.005);\n    animation-timing-function: cubic-bezier(.895,.03,.685,.22);\n  }\n  50% {\n    transform: translateX(0) scaleX(.35);\n    animation-timing-function: cubic-bezier(.165,.84,.44,1);\n  }\n  100% {\n    transform: translateX(-50%) scaleX(.005);\n  }\n`;\nconst transitionAnimation = ({ keyframes }: Emotion) => keyframes`\n  from {\n    width: var(--react-ui-global-loader-width);\n    left: var(--react-ui-global-loader-left);\n  }\n  to {\n    width: var(--react-ui-global-loader-start-width);\n    left: 0;\n  }\n`;\nconst linearProgressAnimation = ({ keyframes }: Emotion) => keyframes`\n  from { width: 0; }\n  to { width: 80% }\n`;\nconst slowProgressAnimation = ({ keyframes }: Emotion) => keyframes`\n  from { width: 80%; }\n  to { width: 90% }\n`;\n\n/**\n * Параметры анимаций приходят из компонента CSS-переменными (inline-стилем), потому что при сборке их нет:\n * `--react-ui-global-loader-delay-before-hide`, `--react-ui-global-loader-expected-time` (оба со значением в ms),\n * `--react-ui-global-loader-width`, `--react-ui-global-loader-start-width`, `--react-ui-global-loader-left` (в px).\n */\nexport const getAnimations = memoizeGetStyles((emotion: Emotion) => ({\n  successAnimation(_t: Theme) {\n    return emotion.css`\n      animation: ${emotion.keyframes`\n        0% {\n          width: var(--react-ui-global-loader-width);\n          left: var(--react-ui-global-loader-left);\n          opacity: 1;\n        }\n        20% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        80% {\n          width: 100%;\n          left: 0;\n          opacity: 1;\n        }\n        100% {\n          width: 100%;\n          opacity: 0;\n        }\n      `} var(--react-ui-global-loader-delay-before-hide);\n    `;\n  },\n  errorAnimation(t: Theme) {\n    const transitionDuration = `calc(${t.globalLoaderTransitionToSpinnerDuration} * 1ms)`;\n    const spinnerAnimationDuration = `calc(${t.globalLoaderSpinnerAnimationDuration} * 1ms)`;\n\n    return emotion.css`\n      left: 0;\n      width: 100%;\n      animation:\n        ${moveToRightAnimation(emotion)} ${transitionDuration} linear,\n        ${spinnerAnimationDuration} ${spinnerAnimation(emotion)} ${transitionDuration} infinite alternate;\n    `;\n  },\n  standardAnimation(t: Theme) {\n    const slowProgressAnimationTime = `calc(${t.globalLoaderSlowAnimationDuration} * 1ms)`;\n    return emotion.css`\n      width: 90%;\n      animation:\n        ${linearProgressAnimation(emotion)} var(--react-ui-global-loader-expected-time) cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime} ${slowProgressAnimation(emotion)} var(--react-ui-global-loader-expected-time) linear;\n    `;\n  },\n  acceptAnimation(t: Theme) {\n    const transitionTime = `calc(${t.globalLoaderTransitionFromSpinnerDuration} * 1ms)`;\n    const slowProgressAnimationTime = `calc(${t.globalLoaderSlowAnimationDuration} * 1ms)`;\n    return emotion.css`\n      width: 90%;\n      animation:\n        ${transitionAnimation(emotion)} ${transitionTime} linear,\n        var(--react-ui-global-loader-expected-time) ${emotion.keyframes`\n          from {\n            width: var(--react-ui-global-loader-start-width);\n          }\n          to {\n            width: 80%;\n          }\n        `} ${transitionTime} cubic-bezier(0, 0.4, 0.4, 1),\n        ${slowProgressAnimationTime} ${slowProgressAnimation(emotion)}\n          calc(var(--react-ui-global-loader-expected-time) + ${transitionTime}) linear;\n    `;\n  },\n  slowAcceptAnimation(t: Theme) {\n    const transitionTime = `calc(${t.globalLoaderTransitionFromSpinnerDuration} * 1ms)`;\n    const slowProgressAnimationTime = `calc(${t.globalLoaderSlowAnimationDuration} * 1ms)`;\n    return emotion.css`\n      width: 90%;\n      animation:\n        ${transitionAnimation(emotion)} ${transitionTime} linear,\n        ${slowProgressAnimationTime} ${emotion.keyframes`\n          from {\n            width: var(--react-ui-global-loader-start-width);\n          }\n          to {\n            width: 90%;\n          }\n        `} ${transitionTime} linear;\n    `;\n  },\n  acceptWithoutAnimation(_t: Theme) {\n    return emotion.css`\n      width: var(--react-ui-global-loader-start-width);\n    `;\n  },\n}));\n\nfinalizeStaticStyles();\n"]}

package/components/GlobalLoader/GlobalLoaderView.js

@@ -20,52 +20,36 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useContext, useRef } from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { ZIndex } from '../../internal/ZIndex/index.js';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../lib/theming/Emotion.js';
-import { GLOBAL_LOADER_VARS, getAnimations, getStyles } from './GlobalLoaderView.styles.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getAnimations, getStyles } from './GlobalLoaderView.css.js';
 import { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams.js';
 export var GlobalLoaderView = forwardRef(function (_a, externalRef) {
     var expectedResponseTime = _a.expectedResponseTime, delayBeforeHide = _a.delayBeforeHide, status = _a.status, disableAnimations = _a.disableAnimations, rest = __rest(_a, ["expectedResponseTime", "delayBeforeHide", "status", "disableAnimations"]);
     var ref = useRef(null);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
     var styles = useStyles(getStyles);
     var animations = useStyles(getAnimations);
     var _b = useGlobalLoaderWidth(status, ref), width = _b.width, startWidth = _b.startWidth, fullWidth = _b.fullWidth;
     var left = useGlobalLoaderPosition(ref).left;
-    // Измеренная геометрия и время ответа уходят в переменные, а не в правило:
-    // правила теперь статичны и целиком извлекаются на сборке. Присваивание
-    // идёт через CSSOM, которого `style-src-attr` не касается — директива
-    // покрывает атрибут `style` только при разборе разметки и `setAttribute`.
-    //
-    // Эффект слоя раскладки, а не обычный: значения должны стоять до того, как
-    // браузер нарисует кадр с уже применённым классом анимации.
-    useLayoutEffect(function () {
-        var node = ref.current;
-        if (!node) {
-            return;
-        }
-        node.style.setProperty(GLOBAL_LOADER_VARS.width, "".concat(width, "px"));
-        node.style.setProperty(GLOBAL_LOADER_VARS.left, "".concat(left, "px"));
-        node.style.setProperty(GLOBAL_LOADER_VARS.startWidth, "".concat(startWidth, "px"));
-        node.style.setProperty(GLOBAL_LOADER_VARS.expectedTime, String(expectedResponseTime));
-        node.style.setProperty(GLOBAL_LOADER_VARS.delayBeforeHide, String(delayBeforeHide));
-    }, [width, left, startWidth, expectedResponseTime, delayBeforeHide]);
     var getAnimationClass = function (status) {
         if (!disableAnimations) {
             switch (status) {
                 case 'success':
-                    return animations.successAnimation();
+                    return animations.successAnimation(theme);
                 case 'accept':
                     if (startWidth < fullWidth * 0.8) {
-                        return animations.acceptAnimation();
+                        return animations.acceptAnimation(theme);
                     }
-                    return animations.slowAcceptAnimation();
+                    return animations.slowAcceptAnimation(theme);
                 case 'error':
-                    return animations.errorAnimation();
+                    return animations.errorAnimation(theme);
                 case 'standard':
-                    return animations.standardAnimation();
+                    return animations.standardAnimation(theme);
             }
         }
         if (disableAnimations) {
@@ -73,7 +57,7 @@ export var GlobalLoaderView = forwardRef(function (_a, externalRef) {
                 case 'success':
                     return styles.successWithoutAnimation();
                 case 'accept':
-                    return animations.acceptWithoutAnimation();
+                    return animations.acceptWithoutAnimation(theme);
                 case 'error':
                     return styles.errorWithoutAnimation();
                 case 'standard':
@@ -82,7 +66,13 @@ export var GlobalLoaderView = forwardRef(function (_a, externalRef) {
         }
     };
     return (React.createElement(CommonWrapper, __assign({}, rest, { "data-status": status, ref: externalRef }),
-        React.createElement(ZIndex, { priority: "GlobalLoader", className: styles.outer() },
-            React.createElement("div", { ref: ref, className: cx(styles.inner(), getAnimationClass(status)) }))));
+        React.createElement(ZIndex, { priority: "GlobalLoader", className: styles.outer(theme) },
+            React.createElement("div", { ref: ref, className: cx(styles.inner(theme), getAnimationClass(status)), style: {
+                    '--react-ui-global-loader-delay-before-hide': "".concat(delayBeforeHide, "ms"),
+                    '--react-ui-global-loader-expected-time': "".concat(expectedResponseTime, "ms"),
+                    '--react-ui-global-loader-width': "".concat(width, "px"),
+                    '--react-ui-global-loader-start-width': "".concat(startWidth, "px"),
+                    '--react-ui-global-loader-left': "".concat(left, "px"),
+                } }))));
 });
 //# sourceMappingURL=GlobalLoaderView.js.map

package/components/GlobalLoader/GlobalLoaderView.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalLoaderView.js","sourceRoot":"","sources":["GlobalLoaderView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../lib/theming/Emotion.js';\nimport { GLOBAL_LOADER_VARS, getAnimations, getStyles } from './GlobalLoaderView.styles.js';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams.js';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  /** Устанавливает ожидаемое время(ms) ответа сервера. */\n  expectedResponseTime: number;\n\n  /** Устанавливает задержку в миллисекундах до исчезновения лоадера. */\n  delayBeforeHide: number;\n\n  /** Устанавливает статус операции. */\n  status?: 'success' | 'error' | 'standard' | 'accept';\n\n  /** Отключает анимацию. */\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element'] | null>;\n}\n\nexport const GlobalLoaderView = forwardRef(\n  (\n    { expectedResponseTime, delayBeforeHide, status, disableAnimations, ...rest }: GlobalLoaderViewProps,\n    externalRef: React.Ref<CommonWrapper<CommonProps>>,\n  ) => {\n    const ref = useRef<GlobalLoaderViewRef['element']>(null);\n    const styles = useStyles(getStyles);\n    const animations = useStyles(getAnimations);\n    const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n    const { left } = useGlobalLoaderPosition(ref);\n\n    // Измеренная геометрия и время ответа уходят в переменные, а не в правило:\n    // правила теперь статичны и целиком извлекаются на сборке. Присваивание\n    // идёт через CSSOM, которого `style-src-attr` не касается — директива\n    // покрывает атрибут `style` только при разборе разметки и `setAttribute`.\n    //\n    // Эффект слоя раскладки, а не обычный: значения должны стоять до того, как\n    // браузер нарисует кадр с уже применённым классом анимации.\n    useLayoutEffect(() => {\n      const node = ref.current;\n      if (!node) {\n        return;\n      }\n\n      node.style.setProperty(GLOBAL_LOADER_VARS.width, `${width}px`);\n      node.style.setProperty(GLOBAL_LOADER_VARS.left, `${left}px`);\n      node.style.setProperty(GLOBAL_LOADER_VARS.startWidth, `${startWidth}px`);\n      node.style.setProperty(GLOBAL_LOADER_VARS.expectedTime, String(expectedResponseTime));\n      node.style.setProperty(GLOBAL_LOADER_VARS.delayBeforeHide, String(delayBeforeHide));\n    }, [width, left, startWidth, expectedResponseTime, delayBeforeHide]);\n\n    const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n      if (!disableAnimations) {\n        switch (status) {\n          case 'success':\n            return animations.successAnimation();\n          case 'accept':\n            if (startWidth < fullWidth * 0.8) {\n              return animations.acceptAnimation();\n            }\n            return animations.slowAcceptAnimation();\n          case 'error':\n            return animations.errorAnimation();\n          case 'standard':\n            return animations.standardAnimation();\n        }\n      }\n\n      if (disableAnimations) {\n        switch (status) {\n          case 'success':\n            return styles.successWithoutAnimation();\n          case 'accept':\n            return animations.acceptWithoutAnimation();\n          case 'error':\n            return styles.errorWithoutAnimation();\n          case 'standard':\n            return styles.standardWithoutAnimation();\n        }\n      }\n    };\n\n    return (\n      <CommonWrapper {...rest} data-status={status} ref={externalRef}>\n        <ZIndex priority=\"GlobalLoader\" className={styles.outer()}>\n          <div ref={ref} className={cx(styles.inner(), getAnimationClass(status))} />\n        </ZIndex>\n      </CommonWrapper>\n    );\n  },\n);\n"]}
+{"version":3,"file":"GlobalLoaderView.js","sourceRoot":"","sources":["GlobalLoaderView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext, useRef } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { getAnimations, getStyles } from './GlobalLoaderView.css.js';\nimport { useGlobalLoaderPosition, useGlobalLoaderWidth } from './useParams.js';\n\nexport interface GlobalLoaderViewProps extends Pick<CommonProps, 'data-tid'> {\n  /** Устанавливает ожидаемое время(ms) ответа сервера. */\n  expectedResponseTime: number;\n\n  /** Устанавливает задержку в миллисекундах до исчезновения лоадера. */\n  delayBeforeHide: number;\n\n  /** Устанавливает статус операции. */\n  status?: 'success' | 'error' | 'standard' | 'accept';\n\n  /** Отключает анимацию. */\n  disableAnimations: boolean;\n}\n\nexport interface GlobalLoaderViewRef {\n  element: HTMLDivElement;\n  refObject: React.RefObject<GlobalLoaderViewRef['element'] | null>;\n}\n\nexport const GlobalLoaderView = forwardRef(\n  (\n    { expectedResponseTime, delayBeforeHide, status, disableAnimations, ...rest }: GlobalLoaderViewProps,\n    externalRef: React.Ref<CommonWrapper<CommonProps>>,\n  ) => {\n    const ref = useRef<GlobalLoaderViewRef['element']>(null);\n    const theme = useContext(ThemeContext);\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n    const animations = useStyles(getAnimations);\n    const { width, startWidth, fullWidth } = useGlobalLoaderWidth(status, ref);\n    const { left } = useGlobalLoaderPosition(ref);\n\n    const getAnimationClass = (status: GlobalLoaderViewProps['status']) => {\n      if (!disableAnimations) {\n        switch (status) {\n          case 'success':\n            return animations.successAnimation(theme);\n          case 'accept':\n            if (startWidth < fullWidth * 0.8) {\n              return animations.acceptAnimation(theme);\n            }\n            return animations.slowAcceptAnimation(theme);\n          case 'error':\n            return animations.errorAnimation(theme);\n          case 'standard':\n            return animations.standardAnimation(theme);\n        }\n      }\n\n      if (disableAnimations) {\n        switch (status) {\n          case 'success':\n            return styles.successWithoutAnimation();\n          case 'accept':\n            return animations.acceptWithoutAnimation(theme);\n          case 'error':\n            return styles.errorWithoutAnimation();\n          case 'standard':\n            return styles.standardWithoutAnimation();\n        }\n      }\n    };\n\n    return (\n      <CommonWrapper {...rest} data-status={status} ref={externalRef}>\n        <ZIndex priority=\"GlobalLoader\" className={styles.outer(theme)}>\n          <div\n            ref={ref}\n            className={cx(styles.inner(theme), getAnimationClass(status))}\n            style={\n              {\n                '--react-ui-global-loader-delay-before-hide': `${delayBeforeHide}ms`,\n                '--react-ui-global-loader-expected-time': `${expectedResponseTime}ms`,\n                '--react-ui-global-loader-width': `${width}px`,\n                '--react-ui-global-loader-start-width': `${startWidth}px`,\n                '--react-ui-global-loader-left': `${left}px`,\n              } as React.CSSProperties\n            }\n          />\n        </ZIndex>\n      </CommonWrapper>\n    );\n  },\n);\n"]}

package/components/Group/Group.css.d.ts

@@ -0,0 +1,8 @@
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    root(): string;
+    wrappedChildren(): string;
+    fixed(): string;
+    stretch(): string;
+    item(): string;
+    itemFirst(): string;
+}>;

package/components/Group/Group.css.js

@@ -0,0 +1,3 @@
+
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({root:'react-ui-Group__root',wrappedChildren:'react-ui-Group__wrappedChildren',fixed:'react-ui-Group__fixed',stretch:'react-ui-Group__stretch',item:'react-ui-Group__item',itemFirst:'react-ui-Group__itemFirst'});

package/components/Group/Group.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.css.js","sourceRoot":"","sources":["Group.css.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE3F,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,oIAAA,iEAGT,KAAC;QACJ,CAAC;QAED,eAAe;YACb,OAAO,GAAG,iGAAA,8BAET,KAAC;QACJ,CAAC;QAED,KAAK;YACH,OAAO,GAAG,gIAAA,6DAGT,KAAC;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,uHAAA,oDAGT,KAAC;QACJ,CAAC;QAED,IAAI;YACF,OAAO,GAAG,qGAAA,kCAET,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,kGAAA,+BAET,KAAC;QACJ,CAAC;KACF,CAAC;AAvC8D,CAuC9D,CAAC,CAAC;AAEJ,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      display: inline-flex;\n      line-height: normal;\n    `;\n  },\n\n  wrappedChildren() {\n    return css`\n      display: flex;\n    `;\n  },\n\n  fixed() {\n    return css`\n      flex-shrink: 0;\n      display: inline-block;\n    `;\n  },\n\n  stretch() {\n    return css`\n      flex-grow: 1;\n      flex-shrink: 1;\n    `;\n  },\n\n  item() {\n    return css`\n      margin-left: -1px;\n    `;\n  },\n\n  itemFirst() {\n    return css`\n      margin-left: 0;\n    `;\n  },\n}));\n\nfinalizeStaticStyles();\n"]}

package/components/Group/Group.d.ts

@@ -17,6 +17,7 @@ export declare class Group extends React.Component<GroupProps> {
     static displayName: string;
     getRootNode: TGetRootNode;
     private setRootNode;
+    private emotion;
     private cx;
     private styles;
     render(): React.JSX.Element;

package/components/Group/Group.js

@@ -35,7 +35,7 @@ import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { isAutocomplete, isButton, isCurrencyInput, isDropdown, isDropdownMenu, isFxInput, isHint, isInput, isPasswordInput, isSelect, isTooltip, isTimePicker, } from '../../lib/utils.js';
-import { getStyles } from './Group.styles.js';
+import { getStyles } from './Group.css.js';
 var getFirstChild = function (children) {
     if (!Array.isArray(children)) {
         return children;
@@ -103,7 +103,8 @@ var Group = /** @class */ (function (_super) {
                     _a[_this.styles.stretch()] = isWidthInPercent,
                     _a)) },
                 React.createElement("div", { className: _this.cx((_b = {},
-                        _b[_this.styles.itemNotFirst()] = !isFirstChild,
+                        _b[_this.styles.item()] = true,
+                        _b[_this.styles.itemFirst()] = isFirstChild,
                         _b)) }, tryPassCorners(child, isFirstChild, isLastChild))));
         };
         return _this;
@@ -116,7 +117,7 @@ var Group = /** @class */ (function (_super) {
         var childrenArray = React.Children.toArray(this.props.children);
         var firstChild = getFirstChild(childrenArray);
         var lastChild = getLastChild(childrenArray);
-        this.styles = getStyles();
+        this.styles = getStyles(this.emotion);
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
             React.createElement("span", { "data-tid": GroupDataTids.root, className: this.styles.root(), style: style }, React.Children.map(childrenArray, function (child) {
                 if (!child || !React.isValidElement(child)) {

package/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sourceRoot":"","sources":["Group.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EACL,cAAc,EACd,QAAQ,EACR,eAAe,EACf,UAAU,EACV,cAAc,EACd,SAAS,EACT,MAAM,EACN,OAAO,EACP,eAAe,EACf,QAAQ,EACR,SAAS,EACT,YAAY,GACb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAY9C,IAAM,aAAa,GAAG,UAAC,QAAyB;IAC9C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAoB,CAAC;AAC1C,CAAC,CAAC;AAEF,IAAM,YAAY,GAAG,UAAC,QAAyB;IAC7C,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7B,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,IAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAExD,OAAO,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,gBAAgB,GAAG,CAAC,CAAoB,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,YAAqB,EAAE,WAAoB;IAC1E,IAAI,YAAY,IAAI,WAAW,EAAE,CAAC;QAChC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO;YACL,oBAAoB,EAAE,CAAC;YACvB,uBAAuB,EAAE,CAAC;SAC3B,CAAC;IACJ,CAAC;IAED,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO;YACL,mBAAmB,EAAE,CAAC;YACtB,sBAAsB,EAAE,CAAC;SAC1B,CAAC;IACJ,CAAC;IAED,OAAO;QACL,YAAY,EAAE,CAAC;KAChB,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,cAAc,GAAG,UAAC,KAAsB,EAAE,YAAqB,EAAE,WAAoB;IACzF,IAAM,OAAO,GAAG,gBAAgB,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE5D,IACE,QAAQ,CAAC,KAAK,CAAC;QACf,OAAO,CAAC,KAAK,CAAC;QACd,SAAS,CAAC,KAAK,CAAC;QAChB,cAAc,CAAC,KAAK,CAAC;QACrB,eAAe,CAAC,KAAK,CAAC;QACtB,eAAe,CAAC,KAAK,CAAC;QACtB,QAAQ,CAAC,KAAK,CAAC;QACf,UAAU,CAAC,KAAK,CAAC;QACjB,cAAc,CAAC,KAAK,CAAC;QACrB,YAAY,CAAC,KAAK,CAAC,EACnB,CAAC;QACD,OAAO,KAAK,CAAC,YAAY,CAA0B,KAAK,EAAE,EAAE,OAAO,wBAAO,OAAO,GAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAE,EAAE,CAAC,CAAC;IACjH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,KAA0C,IAAK,OAAA,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAvC,CAAuC,CAAC;AAElH,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,IAAI,EAAE,aAAa;CACX,CAAC;AAEX;;GAEG;AAGH;IAA2B,yBAA2B;IAAtD;;QAyCU,iBAAW,GAAG,UACpB,KAAsB,EACtB,YAAqB,EACrB,WAAoB,EACpB,gBAAyB;;YACtB,OAAA,CACH,6BACE,SAAS,EAAE,KAAI,CAAC,EAAE;oBAChB,GAAC,KAAI,CAAC,MAAM,CAAC,KAAK,EAAE,IAAG,CAAC,gBAAgB;oBACxC,GAAC,KAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAG,gBAAgB;wBACzC;gBAEF,6BACE,SAAS,EAAE,KAAI,CAAC,EAAE;wBAChB,GAAC,KAAI,CAAC,MAAM,CAAC,YAAY,EAAE,IAAG,CAAC,YAAY;4BAC3C,IAED,cAAc,CAAC,KAAK,EAAE,YAAY,EAAE,WAAW,CAAC,CAC7C,CACF,CACP;QAfI,CAeJ,CAAC;;IAkCJ,CAAC;IAtFQ,sBAAM,GAAb;QAAA,iBA8BC;QA7BC,IAAM,KAAK,GAAwB;YACjC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;SACxB,CAAC;QAEF,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;QAChD,IAAM,SAAS,GAAG,YAAY,CAAC,aAAa,CAAC,CAAC;QAC9C,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;QAE1B,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,WAAW,IAAM,IAAI,CAAC,KAAK;YAC1D,0CAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,IAC5E,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAa,EAAE,UAAC,KAAK;gBACvC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,CAAkB,KAAK,CAAC,EAAE,CAAC;oBAC5D,OAAO,IAAI,CAAC;gBACd,CAAC;gBAED,IAAM,YAAY,GAAG,KAAK,KAAK,UAAU,CAAC;gBAC1C,IAAM,WAAW,GAAG,KAAK,KAAK,SAAS,CAAC;gBAExC,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;oBACtC,OAAO,KAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC;gBACtE,CAAC;gBAED,OAAO,KAAI,CAAC,WAAW,CAAC,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;YACtF,CAAC,CAAC,CACG,CACO,CACjB,CAAC;IACJ,CAAC;IAwBO,qCAAqB,GAA7B,UACE,MAA2C,EAC3C,aAAsB,EACtB,YAAqB;;QAHvB,iBA+BC;QA1BC,IAAI,mBAAmB,GAAG,KAAK,CAAC;QAChC,IAAM,cAAc,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAErE,IAAM,gBAAgB,GAAG,cAAc,CAAC,GAAG,CAAC,UAAC,WAAW,EAAE,KAAK;YAC7D,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,cAAc,CAAkB,WAAW,CAAC,EAAE,CAAC;gBACxE,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAM,YAAY,GAAG,aAAa,IAAI,KAAK,KAAK,CAAC,CAAC;YAClD,IAAM,WAAW,GAAG,YAAY,IAAI,KAAK,KAAK,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;YACxE,IAAI,iBAAiB,CAAC,WAAW,CAAC,EAAE,CAAC;gBACnC,mBAAmB,GAAG,IAAI,CAAC;YAC7B,CAAC;YAED,OAAO,KAAI,CAAC,WAAW,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC;QAClG,CAAC,CAAC,CAAC;QAEH,IAAM,eAAe,GAAG,CACtB,6BAAK,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,YAAI,GAAC,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,IAAG,mBAAmB,MAAG,IACrG,gBAAgB,CACb,CACP,CAAC;QAEF,OAAO,KAAK,CAAC,YAAY,CAAkB,MAAM,EAAE;YACjD,QAAQ,EAAE,eAAe;SAC1B,CAAC,CAAC;IACL,CAAC;IA7Fa,yBAAmB,GAAG,OAAO,AAAV,CAAW;IAC9B,iBAAW,GAAG,OAAO,AAAV,CAAW;IAFzB,KAAK;QAFjB,qBAAqB;QACrB,QAAQ;OACI,KAAK,CA+FjB;IAAD,YAAC;CAAA,AA/FD,CAA2B,KAAK,CAAC,SAAS,GA+FzC;SA/FY,KAAK","sourcesContent":["import React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { ClassNames } from '../../lib/theming/Emotion.js';\nimport {\n  isAutocomplete,\n  isButton,\n  isCurrencyInput,\n  isDropdown,\n  isDropdownMenu,\n  isFxInput,\n  isHint,\n  isInput,\n  isPasswordInput,\n  isSelect,\n  isTooltip,\n  isTimePicker,\n} from '../../lib/utils.js';\nimport { getStyles } from './Group.styles.js';\n\nexport interface GroupProps extends CommonProps {\n  /** Ширина компонента. */\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst tryPassCorners = (child: React.ReactNode, isFirstChild: boolean, isLastChild: boolean) => {\n  const corners = getButtonCorners(isFirstChild, isLastChild);\n\n  if (\n    isButton(child) ||\n    isInput(child) ||\n    isFxInput(child) ||\n    isAutocomplete(child) ||\n    isPasswordInput(child) ||\n    isCurrencyInput(child) ||\n    isSelect(child) ||\n    isDropdown(child) ||\n    isDropdownMenu(child) ||\n    isTimePicker(child)\n  ) {\n    return React.cloneElement<(typeof child)['props']>(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nconst hasWidthInPercent = (child: React.ReactElement<GroupChildProps>) => String(child.props.width).includes('%');\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n/**\n *  Контейнер используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n */\n@withRenderEnvironment\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private cx!: ClassNames;\n  private styles!: ReturnType<typeof getStyles>;\n\n  public render(): React.JSX.Element {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n    this.styles = getStyles();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={this.styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isFirstChild = child === firstChild;\n            const isLastChild = child === lastChild;\n\n            if (isHint(child) || isTooltip(child)) {\n              return this.renderWrappedChildren(child, isFirstChild, isLastChild);\n            }\n\n            return this.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n\n  private renderChild = (\n    child: React.ReactNode,\n    isFirstChild: boolean,\n    isLastChild: boolean,\n    isWidthInPercent: boolean,\n  ) => (\n    <div\n      className={this.cx({\n        [this.styles.fixed()]: !isWidthInPercent,\n        [this.styles.stretch()]: isWidthInPercent,\n      })}\n    >\n      <div\n        className={this.cx({\n          [this.styles.itemNotFirst()]: !isFirstChild,\n        })}\n      >\n        {tryPassCorners(child, isFirstChild, isLastChild)}\n      </div>\n    </div>\n  );\n\n  private renderWrappedChildren(\n    parent: React.ReactElement<GroupChildProps>,\n    isParentFirst: boolean,\n    isParentLast: boolean,\n  ): React.ReactNode {\n    let shouldStretchParent = false;\n    const nestedChildren = React.Children.toArray(parent.props.children);\n\n    const modifiedChildren = nestedChildren.map((nestedChild, index) => {\n      if (!nestedChild || !React.isValidElement<GroupChildProps>(nestedChild)) {\n        return null;\n      }\n\n      const isFirstChild = isParentFirst && index === 0;\n      const isLastChild = isParentLast && index === nestedChildren.length - 1;\n      if (hasWidthInPercent(nestedChild)) {\n        shouldStretchParent = true;\n      }\n\n      return this.renderChild(nestedChild, isFirstChild, isLastChild, hasWidthInPercent(nestedChild));\n    });\n\n    const wrappedChildren = (\n      <div className={this.cx(this.styles.wrappedChildren(), { [this.styles.stretch()]: shouldStretchParent })}>\n        {modifiedChildren}\n      </div>\n    );\n\n    return React.cloneElement<GroupChildProps>(parent, {\n      children: wrappedChildren,\n    });\n  }\n}\n"]}
+{"version":3,"file":"Group.js","sourceRoot":"","sources":["Group.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport {\n  isAutocomplete,\n  isButton,\n  isCurrencyInput,\n  isDropdown,\n  isDropdownMenu,\n  isFxInput,\n  isHint,\n  isInput,\n  isPasswordInput,\n  isSelect,\n  isTooltip,\n  isTimePicker,\n} from '../../lib/utils.js';\nimport { getStyles } from './Group.css.js';\n\nexport interface GroupProps extends CommonProps {\n  /** Ширина компонента. */\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps extends CommonProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst tryPassCorners = (child: React.ReactNode, isFirstChild: boolean, isLastChild: boolean) => {\n  const corners = getButtonCorners(isFirstChild, isLastChild);\n\n  if (\n    isButton(child) ||\n    isInput(child) ||\n    isFxInput(child) ||\n    isAutocomplete(child) ||\n    isPasswordInput(child) ||\n    isCurrencyInput(child) ||\n    isSelect(child) ||\n    isDropdown(child) ||\n    isDropdownMenu(child) ||\n    isTimePicker(child)\n  ) {\n    return React.cloneElement<(typeof child)['props']>(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nconst hasWidthInPercent = (child: React.ReactElement<GroupChildProps>) => String(child.props.width).includes('%');\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n/**\n *  Контейнер используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n */\n@withRenderEnvironment\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n\n  public render(): React.JSX.Element {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={this.styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isFirstChild = child === firstChild;\n            const isLastChild = child === lastChild;\n\n            if (isHint(child) || isTooltip(child)) {\n              return this.renderWrappedChildren(child, isFirstChild, isLastChild);\n            }\n\n            return this.renderChild(child, isFirstChild, isLastChild, hasWidthInPercent(child));\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n\n  private renderChild = (\n    child: React.ReactNode,\n    isFirstChild: boolean,\n    isLastChild: boolean,\n    isWidthInPercent: boolean,\n  ) => (\n    <div\n      className={this.cx({\n        [this.styles.fixed()]: !isWidthInPercent,\n        [this.styles.stretch()]: isWidthInPercent,\n      })}\n    >\n      <div\n        className={this.cx({\n          [this.styles.item()]: true,\n          [this.styles.itemFirst()]: isFirstChild,\n        })}\n      >\n        {tryPassCorners(child, isFirstChild, isLastChild)}\n      </div>\n    </div>\n  );\n\n  private renderWrappedChildren(\n    parent: React.ReactElement<GroupChildProps>,\n    isParentFirst: boolean,\n    isParentLast: boolean,\n  ): React.ReactNode {\n    let shouldStretchParent = false;\n    const nestedChildren = React.Children.toArray(parent.props.children);\n\n    const modifiedChildren = nestedChildren.map((nestedChild, index) => {\n      if (!nestedChild || !React.isValidElement<GroupChildProps>(nestedChild)) {\n        return null;\n      }\n\n      const isFirstChild = isParentFirst && index === 0;\n      const isLastChild = isParentLast && index === nestedChildren.length - 1;\n      if (hasWidthInPercent(nestedChild)) {\n        shouldStretchParent = true;\n      }\n\n      return this.renderChild(nestedChild, isFirstChild, isLastChild, hasWidthInPercent(nestedChild));\n    });\n\n    const wrappedChildren = (\n      <div className={this.cx(this.styles.wrappedChildren(), { [this.styles.stretch()]: shouldStretchParent })}>\n        {modifiedChildren}\n      </div>\n    );\n\n    return React.cloneElement<GroupChildProps>(parent, {\n      children: wrappedChildren,\n    });\n  }\n}\n"]}

package/components/Hint/Hint.css.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/StaticStyles.js").StylesGetter<{
+    content(t: Theme): string;
+    contentCenter(t: Theme): string;
+}>;

package/components/Hint/Hint.css.js

@@ -0,0 +1,3 @@
+
+import { bindStaticStyles as _b9cd9 } from '../../lib/theming/bindStaticStyles.js';
+export var getStyles = _b9cd9({content:'react-ui-Hint__content',contentCenter:'react-ui-Hint__contentCenter'});

package/components/Hint/Hint.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hint.css.js","sourceRoot":"","sources":["Hint.css.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAG3F,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,kUAAA,gDAEC,EAAW,sBACP,EAAc,wBACZ,EAAgB,sBAClB,EAAc,sDAEhB,EAAc,GAAI,EAAc,sEAG5C,KARU,CAAC,CAAC,SAAS,EACP,CAAC,CAAC,YAAY,EACZ,CAAC,CAAC,cAAc,EAClB,CAAC,CAAC,YAAY,EAEhB,CAAC,CAAC,YAAY,EAAI,CAAC,CAAC,YAAY,EAG3C;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,oGAAA,sBACM,EAAe,SAC9B,KADe,CAAC,CAAC,aAAa,EAC7B;QACJ,CAAC;KACF,CAAC;AApB8D,CAoB9D,CAAC,CAAC;AAEJ,oBAAoB,EAAE,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { finalizeStaticStyles, memoizeGetStyles } from '../../lib/theming/StaticStyles.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  content(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      color: ${t.hintColor};\n      font-size: ${t.hintFontSize};\n      line-height: ${t.hintLineHeight};\n      max-width: ${t.hintMaxWidth};\n      overflow-wrap: break-word;\n      padding: ${t.hintPaddingY} ${t.hintPaddingX};\n      word-break: break-word;\n      word-wrap: break-word;\n    `;\n  },\n\n  contentCenter(t: Theme) {\n    return css`\n      text-align: ${t.hintTextAlign};\n    `;\n  },\n}));\n\nfinalizeStaticStyles();\n"]}

package/components/Hint/Hint.d.ts

@@ -54,6 +54,7 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
     getRootNode: TGetRootNode;
     private setRootNode;
     private styles;
+    private emotion;
     private cx;
     private globalObject;
     private disableAnimationsOnOpen;

package/components/Hint/Hint.js

@@ -39,7 +39,7 @@ import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
-import { getStyles } from './Hint.styles.js';
+import { getStyles } from './Hint.css.js';
 import { getShowDelay, HINT_DEFAULT_DELAY_BEFORE_SHOW, isShowDelaySkipped, markClosed, markDisposed, markOpened, } from './HintDelayController.js';
 var HINT_BORDER_COLOR = 'transparent';
 var isPinnablePosition = function (position) {
@@ -138,7 +138,7 @@ var Hint = /** @class */ (function (_super) {
     };
     Hint.prototype.render = function () {
         var _this = this;
-        this.styles = getStyles();
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = theme;
             return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({
@@ -166,8 +166,8 @@ var Hint = /** @class */ (function (_super) {
         var maxWidth = this.getProps().maxWidth;
         var centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];
         var className = this.cx((_a = {},
-            _a[this.styles.content()] = true,
-            _a[this.styles.contentCenter()] = centerAlignPositions.includes(this.state.position),
+            _a[this.styles.content(this.theme)] = true,
+            _a[this.styles.contentCenter(this.theme)] = centerAlignPositions.includes(this.state.position),
             _a));
         return (React.createElement("div", { className: className, style: { maxWidth: maxWidth } }, this.props.text));
     };