@skbkontur/react-ui 6.4.7-b33c6.0 → 6.4.7

package/components/FileUploader/FileUploaderFileList/FileUploaderFileList.js

@@ -19,20 +19,26 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useContext, useRef, useState } from 'react';
-import { cx } from '../../../lib/cx.js';
 import { LocaleContext } from '../../../lib/locale/index.js';
 import { pluralize } from '../../../lib/pluralize.js';
+import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
 import { FileUploaderControlContext } from '../FileUploaderControlContext.js';
 import { FileUploaderFileStatus } from '../fileUtils.js';
 import { useControlLocale } from '../hooks/useControlLocale.js';
 import { useFileUploaderSize } from '../hooks/useFileUploaderSize.js';
-import { jsRowStyles, jsStyles, jsTileStyles } from './FileUploaderFileList.css.js';
+import { getJsRowStyles, getJsStyles, getJsTileStyles } from './FileUploaderFileList.styles.js';
 export var FileUploaderFileDataTids = {
     fileList: 'FileUploader__fileList',
 };
 export var FileUploaderFileList = function (props) {
     var renderFile = props.renderFile, size = props.size, _a = props.view, view = _a === void 0 ? 'row' : _a, _b = props.validationSummary, validationSummary = _b === void 0 ? 'auto' : _b, _c = props.validationSummaryStart, validationSummaryStart = _c === void 0 ? 5 : _c, withValidationTooltip = props.withValidationTooltip, validationTooltipPosition = props.validationTooltipPosition, withWarningIcon = props.withWarningIcon, _d = props.disabled, disabled = _d === void 0 ? false : _d, onRemove = props.onRemove;
     var files = useContext(FileUploaderControlContext).files;
+    var cx = useEmotion().cx;
+    var jsStyles = useStyles(getJsStyles);
+    var jsRowStyles = useStyles(getJsRowStyles);
+    var jsTileStyles = useStyles(getJsTileStyles);
+    var theme = useContext(ThemeContext);
     var locale = useControlLocale();
     var langCode = useContext(LocaleContext).langCode;
     var _e = useState(null), focusedByTab = _e[0], setFocusedByTab = _e[1];
@@ -61,14 +67,14 @@ export var FileUploaderFileList = function (props) {
     var isTileView = view === 'tile';
     var jsViewStyles = isTileView ? jsTileStyles : jsRowStyles;
     var fileWrapperClass = useFileUploaderSize(size, {
-        small: jsViewStyles.fileWrapperSmall,
-        medium: jsViewStyles.fileWrapperMedium,
-        large: jsViewStyles.fileWrapperLarge,
+        small: jsViewStyles.fileWrapperSmall(theme),
+        medium: jsViewStyles.fileWrapperMedium(theme),
+        large: jsViewStyles.fileWrapperLarge(theme),
     });
     var summaryClass = useFileUploaderSize(size, {
-        small: jsStyles.summarySmall,
-        medium: jsStyles.summaryMedium,
-        large: jsStyles.summaryLarge,
+        small: jsStyles.summarySmall(theme),
+        medium: jsStyles.summaryMedium(theme),
+        large: jsStyles.summaryLarge(theme),
     });
     var renderSummary = function () {
         if (validationSummary === 'disabled') {
@@ -82,17 +88,17 @@ export var FileUploaderFileList = function (props) {
         if (!(warningLength + errorLength)) {
             return null;
         }
-        return (React.createElement("div", { className: cx(jsStyles.summary, summaryClass) },
-            errorLength > 0 && (React.createElement("span", { className: jsStyles.summaryErrorText },
+        return (React.createElement("div", { className: cx(jsStyles.summary(theme), summaryClass) },
+            errorLength > 0 && (React.createElement("span", { className: jsStyles.summaryErrorText(theme) },
                 errorLength,
                 "\u00A0",
                 pluralize.apply(void 0, __spreadArray([langCode, errorLength], locale.errors, false)))),
-            warningLength > 0 && (React.createElement("span", { className: jsStyles.summaryWarningText },
+            warningLength > 0 && (React.createElement("span", { className: jsStyles.summaryWarningText(theme) },
                 warningLength,
                 "\u00A0",
                 pluralize.apply(void 0, __spreadArray([langCode, warningLength], locale.warnings, false))))));
     };
-    return (React.createElement("div", { "data-tid": FileUploaderFileDataTids.fileList, className: jsViewStyles.fileListWrapper },
+    return (React.createElement("div", { "data-tid": FileUploaderFileDataTids.fileList, className: jsViewStyles.fileListWrapper(theme) },
         renderSummary(),
         files.map(function (file, idx) {
             var _a, _b, _c, _d, _e;
@@ -101,20 +107,20 @@ export var FileUploaderFileList = function (props) {
             var hasHover = hovered === file.id;
             var hasError = file.status === FileUploaderFileStatus.Error;
             var hasWarning = file.status === FileUploaderFileStatus.Warning;
-            var fileWrapperClassNames = cx(jsStyles.fileWrapper, fileWrapperClass, __assign(__assign(__assign(__assign((_a = {}, _a[jsStyles.fileWrapperFocus] = hasFocus, _a[jsStyles.fileWrapperHover] = hasHover, _a), (hasError && (_b = {},
-                _b[jsStyles.errorFile] = !isTileView || hasHover,
-                _b[jsViewStyles.errorFileFocus] = hasFocus,
+            var fileWrapperClassNames = cx(jsStyles.fileWrapper(theme), fileWrapperClass, __assign(__assign(__assign(__assign((_a = {}, _a[jsStyles.fileWrapperFocus(theme)] = hasFocus, _a[jsStyles.fileWrapperHover(theme)] = hasHover, _a), (hasError && (_b = {},
+                _b[jsStyles.errorFile(theme)] = !isTileView || hasHover,
+                _b[jsViewStyles.errorFileFocus(theme)] = hasFocus,
                 _b))), (!isTileView &&
                 hasError && (_c = {},
-                _c[jsStyles.removeBorderTopRadius] = ((_f = files[idx - 1]) === null || _f === void 0 ? void 0 : _f.status) === FileUploaderFileStatus.Error,
-                _c[jsStyles.removeBorderBottomRadius] = ((_g = files[idx + 1]) === null || _g === void 0 ? void 0 : _g.status) === FileUploaderFileStatus.Error,
+                _c[jsStyles.removeBorderTopRadius()] = ((_f = files[idx - 1]) === null || _f === void 0 ? void 0 : _f.status) === FileUploaderFileStatus.Error,
+                _c[jsStyles.removeBorderBottomRadius()] = ((_g = files[idx + 1]) === null || _g === void 0 ? void 0 : _g.status) === FileUploaderFileStatus.Error,
                 _c))), (hasWarning && (_d = {},
-                _d[jsStyles.warningFile] = !isTileView || hasHover,
-                _d[jsViewStyles.warningFileFocus] = hasFocus,
+                _d[jsStyles.warningFile(theme)] = !isTileView || hasHover,
+                _d[jsViewStyles.warningFileFocus(theme)] = hasFocus,
                 _d))), (!isTileView &&
                 hasWarning && (_e = {},
-                _e[jsStyles.removeBorderTopRadius] = ((_h = files[idx - 1]) === null || _h === void 0 ? void 0 : _h.status) === FileUploaderFileStatus.Warning,
-                _e[jsStyles.removeBorderBottomRadius] = ((_j = files[idx + 1]) === null || _j === void 0 ? void 0 : _j.status) === FileUploaderFileStatus.Warning,
+                _e[jsStyles.removeBorderTopRadius()] = ((_h = files[idx - 1]) === null || _h === void 0 ? void 0 : _h.status) === FileUploaderFileStatus.Warning,
+                _e[jsStyles.removeBorderBottomRadius()] = ((_j = files[idx + 1]) === null || _j === void 0 ? void 0 : _j.status) === FileUploaderFileStatus.Warning,
                 _e))));
             var fileProps = {
                 file: file,
@@ -131,7 +137,7 @@ export var FileUploaderFileList = function (props) {
             };
             var fileElement = renderFile(fileProps);
             return (React.createElement("div", { key: file.id, className: fileWrapperClassNames, onMouseEnter: function () { return handleMouseEnter(file.id); }, onMouseLeave: function () { return handleMouseLeave(); }, onFocus: function () { return setFocusedByTab(file.id); }, onBlur: function () { return setFocusedByTab(null); } },
-                React.createElement("div", { className: jsViewStyles.file }, fileElement)));
+                React.createElement("div", { className: jsViewStyles.file() }, fileElement)));
         })));
 };
 FileUploaderFileList.__KONTUR_REACT_UI__ = 'FileUploaderFileList';

package/components/FileUploader/FileUploaderFileList/FileUploaderFileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderFileList.js","sourceRoot":"","sources":["FileUploaderFileList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useRef, useState } from 'react';\n\nimport type { PopupPositionsType, ShortPopupPositionsType } from '../../../internal/Popup/index.js';\nimport { cx } from '../../../lib/cx.js';\nimport { LocaleContext } from '../../../lib/locale/index.js';\nimport { pluralize } from '../../../lib/pluralize.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { FileUploaderControlContext } from '../FileUploaderControlContext.js';\nimport type { FileUploaderFileProps } from '../FileUploaderFile.js';\nimport { FileUploaderFileStatus, type FileUploaderValidationSummary, type FileUploaderView } from '../fileUtils.js';\nimport { useControlLocale } from '../hooks/useControlLocale.js';\nimport { useFileUploaderSize } from '../hooks/useFileUploaderSize.js';\nimport { jsRowStyles, jsStyles, jsTileStyles } from './FileUploaderFileList.css.js';\n\ninterface FileUploaderFileListProps {\n  renderFile: (props: FileUploaderFileProps) => React.ReactNode;\n  size: SizeProp;\n  view?: FileUploaderView;\n  validationSummary?: FileUploaderValidationSummary;\n  validationSummaryStart?: number;\n  onRemove(fileId: string): void;\n  withValidationTooltip?: boolean;\n  validationTooltipPosition?: ShortPopupPositionsType | PopupPositionsType;\n  withWarningIcon?: boolean;\n  disabled?: boolean;\n}\n\nexport const FileUploaderFileDataTids = {\n  fileList: 'FileUploader__fileList',\n} as const;\n\nexport const FileUploaderFileList = (props: FileUploaderFileListProps): React.ReactElement => {\n  const {\n    renderFile,\n    size,\n    view = 'row',\n    validationSummary = 'auto',\n    validationSummaryStart = 5,\n    withValidationTooltip,\n    validationTooltipPosition,\n    withWarningIcon,\n    disabled = false,\n    onRemove,\n  } = props;\n  const { files } = useContext(FileUploaderControlContext);\n  const locale = useControlLocale();\n  const { langCode } = useContext(LocaleContext);\n\n  const [focusedByTab, setFocusedByTab] = useState<string | null>(null);\n  const [hovered, setHovered] = useState<string | null>(null);\n  const mouseIsOverRef = useRef(false);\n\n  const handleMouseEnter = (index: string | null) => {\n    setHovered(index);\n    mouseIsOverRef.current = true;\n  };\n\n  const handleMouseLeave = () => {\n    setHovered(null);\n    mouseIsOverRef.current = false;\n  };\n\n  const handleRemoveItem = (index: string) => {\n    onRemove(index);\n    if (hovered === index && mouseIsOverRef.current) {\n      const currentIndex = files.findIndex((file) => file.id === index);\n      if (currentIndex !== -1 && files[currentIndex + 1]) {\n        setHovered(files[currentIndex + 1].id);\n      } else {\n        setHovered(null);\n      }\n    }\n  };\n\n  const isTileView = view === 'tile';\n  const jsViewStyles = isTileView ? jsTileStyles : jsRowStyles;\n\n  const fileWrapperClass = useFileUploaderSize(size, {\n    small: jsViewStyles.fileWrapperSmall,\n    medium: jsViewStyles.fileWrapperMedium,\n    large: jsViewStyles.fileWrapperLarge,\n  });\n\n  const summaryClass = useFileUploaderSize(size, {\n    small: jsStyles.summarySmall,\n    medium: jsStyles.summaryMedium,\n    large: jsStyles.summaryLarge,\n  });\n\n  const renderSummary = () => {\n    if (validationSummary === 'disabled') {\n      return null;\n    }\n\n    const warningLength = files.filter((file) => file.status === FileUploaderFileStatus.Warning).length;\n    const errorLength = files.filter((file) => file.status === FileUploaderFileStatus.Error).length;\n\n    if (validationSummary === 'auto' && files.length < validationSummaryStart) {\n      return null;\n    }\n\n    if (!(warningLength + errorLength)) {\n      return null;\n    }\n\n    return (\n      <div className={cx(jsStyles.summary, summaryClass)}>\n        {errorLength > 0 && (\n          <span className={jsStyles.summaryErrorText}>\n            {errorLength}&nbsp;{pluralize(langCode, errorLength, ...locale.errors)}\n          </span>\n        )}\n        {warningLength > 0 && (\n          <span className={jsStyles.summaryWarningText}>\n            {warningLength}&nbsp;{pluralize(langCode, warningLength, ...locale.warnings)}\n          </span>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-tid={FileUploaderFileDataTids.fileList} className={jsViewStyles.fileListWrapper}>\n      {renderSummary()}\n      {files.map((file, idx) => {\n        const hasFocus = focusedByTab === file.id;\n        const hasHover = hovered === file.id;\n        const hasError = file.status === FileUploaderFileStatus.Error;\n        const hasWarning = file.status === FileUploaderFileStatus.Warning;\n\n        const fileWrapperClassNames = cx(jsStyles.fileWrapper, fileWrapperClass, {\n          [jsStyles.fileWrapperFocus]: hasFocus,\n          [jsStyles.fileWrapperHover]: hasHover,\n          ...(hasError && {\n            [jsStyles.errorFile]: !isTileView || hasHover,\n            [jsViewStyles.errorFileFocus]: hasFocus,\n          }),\n          ...(!isTileView &&\n            hasError && {\n              [jsStyles.removeBorderTopRadius]: files[idx - 1]?.status === FileUploaderFileStatus.Error,\n              [jsStyles.removeBorderBottomRadius]: files[idx + 1]?.status === FileUploaderFileStatus.Error,\n            }),\n          ...(hasWarning && {\n            [jsStyles.warningFile]: !isTileView || hasHover,\n            [jsViewStyles.warningFileFocus]: hasFocus,\n          }),\n          ...(!isTileView &&\n            hasWarning && {\n              [jsStyles.removeBorderTopRadius]: files[idx - 1]?.status === FileUploaderFileStatus.Warning,\n              [jsStyles.removeBorderBottomRadius]: files[idx + 1]?.status === FileUploaderFileStatus.Warning,\n            }),\n        });\n\n        const fileProps: FileUploaderFileProps = {\n          file,\n          multiple: true,\n          size,\n          view,\n          disabled,\n          hovered: hasHover,\n          focused: hasFocus,\n          onRemove: handleRemoveItem,\n          withValidationTooltip,\n          validationTooltipPosition,\n          withWarningIcon,\n        };\n\n        const fileElement = renderFile(fileProps);\n\n        return (\n          <div\n            key={file.id}\n            className={fileWrapperClassNames}\n            onMouseEnter={() => handleMouseEnter(file.id)}\n            onMouseLeave={() => handleMouseLeave()}\n            onFocus={() => setFocusedByTab(file.id)}\n            onBlur={() => setFocusedByTab(null)}\n          >\n            <div className={jsViewStyles.file}>{fileElement}</div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nFileUploaderFileList.__KONTUR_REACT_UI__ = 'FileUploaderFileList';\nFileUploaderFileList.displayName = 'FileUploaderFileList';\n"]}
+{"version":3,"file":"FileUploaderFileList.js","sourceRoot":"","sources":["FileUploaderFileList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useRef, useState } from 'react';\n\nimport type { PopupPositionsType, ShortPopupPositionsType } from '../../../internal/Popup/index.js';\nimport { LocaleContext } from '../../../lib/locale/index.js';\nimport { pluralize } from '../../../lib/pluralize.js';\nimport { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { FileUploaderControlContext } from '../FileUploaderControlContext.js';\nimport type { FileUploaderFileProps } from '../FileUploaderFile.js';\nimport { FileUploaderFileStatus, type FileUploaderValidationSummary, type FileUploaderView } from '../fileUtils.js';\nimport { useControlLocale } from '../hooks/useControlLocale.js';\nimport { useFileUploaderSize } from '../hooks/useFileUploaderSize.js';\nimport { getJsRowStyles, getJsStyles, getJsTileStyles } from './FileUploaderFileList.styles.js';\n\ninterface FileUploaderFileListProps {\n  renderFile: (props: FileUploaderFileProps) => React.ReactNode;\n  size: SizeProp;\n  view?: FileUploaderView;\n  validationSummary?: FileUploaderValidationSummary;\n  validationSummaryStart?: number;\n  onRemove(fileId: string): void;\n  withValidationTooltip?: boolean;\n  validationTooltipPosition?: ShortPopupPositionsType | PopupPositionsType;\n  withWarningIcon?: boolean;\n  disabled?: boolean;\n}\n\nexport const FileUploaderFileDataTids = {\n  fileList: 'FileUploader__fileList',\n} as const;\n\nexport const FileUploaderFileList = (props: FileUploaderFileListProps): React.ReactElement => {\n  const {\n    renderFile,\n    size,\n    view = 'row',\n    validationSummary = 'auto',\n    validationSummaryStart = 5,\n    withValidationTooltip,\n    validationTooltipPosition,\n    withWarningIcon,\n    disabled = false,\n    onRemove,\n  } = props;\n  const { files } = useContext(FileUploaderControlContext);\n  const { cx } = useEmotion();\n  const jsStyles = useStyles(getJsStyles);\n  const jsRowStyles = useStyles(getJsRowStyles);\n  const jsTileStyles = useStyles(getJsTileStyles);\n  const theme = useContext(ThemeContext);\n  const locale = useControlLocale();\n  const { langCode } = useContext(LocaleContext);\n\n  const [focusedByTab, setFocusedByTab] = useState<string | null>(null);\n  const [hovered, setHovered] = useState<string | null>(null);\n  const mouseIsOverRef = useRef(false);\n\n  const handleMouseEnter = (index: string | null) => {\n    setHovered(index);\n    mouseIsOverRef.current = true;\n  };\n\n  const handleMouseLeave = () => {\n    setHovered(null);\n    mouseIsOverRef.current = false;\n  };\n\n  const handleRemoveItem = (index: string) => {\n    onRemove(index);\n    if (hovered === index && mouseIsOverRef.current) {\n      const currentIndex = files.findIndex((file) => file.id === index);\n      if (currentIndex !== -1 && files[currentIndex + 1]) {\n        setHovered(files[currentIndex + 1].id);\n      } else {\n        setHovered(null);\n      }\n    }\n  };\n\n  const isTileView = view === 'tile';\n  const jsViewStyles = isTileView ? jsTileStyles : jsRowStyles;\n\n  const fileWrapperClass = useFileUploaderSize(size, {\n    small: jsViewStyles.fileWrapperSmall(theme),\n    medium: jsViewStyles.fileWrapperMedium(theme),\n    large: jsViewStyles.fileWrapperLarge(theme),\n  });\n\n  const summaryClass = useFileUploaderSize(size, {\n    small: jsStyles.summarySmall(theme),\n    medium: jsStyles.summaryMedium(theme),\n    large: jsStyles.summaryLarge(theme),\n  });\n\n  const renderSummary = () => {\n    if (validationSummary === 'disabled') {\n      return null;\n    }\n\n    const warningLength = files.filter((file) => file.status === FileUploaderFileStatus.Warning).length;\n    const errorLength = files.filter((file) => file.status === FileUploaderFileStatus.Error).length;\n\n    if (validationSummary === 'auto' && files.length < validationSummaryStart) {\n      return null;\n    }\n\n    if (!(warningLength + errorLength)) {\n      return null;\n    }\n\n    return (\n      <div className={cx(jsStyles.summary(theme), summaryClass)}>\n        {errorLength > 0 && (\n          <span className={jsStyles.summaryErrorText(theme)}>\n            {errorLength}&nbsp;{pluralize(langCode, errorLength, ...locale.errors)}\n          </span>\n        )}\n        {warningLength > 0 && (\n          <span className={jsStyles.summaryWarningText(theme)}>\n            {warningLength}&nbsp;{pluralize(langCode, warningLength, ...locale.warnings)}\n          </span>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div data-tid={FileUploaderFileDataTids.fileList} className={jsViewStyles.fileListWrapper(theme)}>\n      {renderSummary()}\n      {files.map((file, idx) => {\n        const hasFocus = focusedByTab === file.id;\n        const hasHover = hovered === file.id;\n        const hasError = file.status === FileUploaderFileStatus.Error;\n        const hasWarning = file.status === FileUploaderFileStatus.Warning;\n\n        const fileWrapperClassNames = cx(jsStyles.fileWrapper(theme), fileWrapperClass, {\n          [jsStyles.fileWrapperFocus(theme)]: hasFocus,\n          [jsStyles.fileWrapperHover(theme)]: hasHover,\n          ...(hasError && {\n            [jsStyles.errorFile(theme)]: !isTileView || hasHover,\n            [jsViewStyles.errorFileFocus(theme)]: hasFocus,\n          }),\n          ...(!isTileView &&\n            hasError && {\n              [jsStyles.removeBorderTopRadius()]: files[idx - 1]?.status === FileUploaderFileStatus.Error,\n              [jsStyles.removeBorderBottomRadius()]: files[idx + 1]?.status === FileUploaderFileStatus.Error,\n            }),\n          ...(hasWarning && {\n            [jsStyles.warningFile(theme)]: !isTileView || hasHover,\n            [jsViewStyles.warningFileFocus(theme)]: hasFocus,\n          }),\n          ...(!isTileView &&\n            hasWarning && {\n              [jsStyles.removeBorderTopRadius()]: files[idx - 1]?.status === FileUploaderFileStatus.Warning,\n              [jsStyles.removeBorderBottomRadius()]: files[idx + 1]?.status === FileUploaderFileStatus.Warning,\n            }),\n        });\n\n        const fileProps: FileUploaderFileProps = {\n          file,\n          multiple: true,\n          size,\n          view,\n          disabled,\n          hovered: hasHover,\n          focused: hasFocus,\n          onRemove: handleRemoveItem,\n          withValidationTooltip,\n          validationTooltipPosition,\n          withWarningIcon,\n        };\n\n        const fileElement = renderFile(fileProps);\n\n        return (\n          <div\n            key={file.id}\n            className={fileWrapperClassNames}\n            onMouseEnter={() => handleMouseEnter(file.id)}\n            onMouseLeave={() => handleMouseLeave()}\n            onFocus={() => setFocusedByTab(file.id)}\n            onBlur={() => setFocusedByTab(null)}\n          >\n            <div className={jsViewStyles.file()}>{fileElement}</div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nFileUploaderFileList.__KONTUR_REACT_UI__ = 'FileUploaderFileList';\nFileUploaderFileList.displayName = 'FileUploaderFileList';\n"]}

package/components/FileUploader/FileUploaderFileList/FileUploaderFileList.styles.d.ts

@@ -0,0 +1,34 @@
+import type { Theme } from '../../../lib/theming/Theme.js';
+export declare const getJsStyles: import("../../../lib/theming/Emotion.js").StylesGetter<{
+    fileWrapper(t: Theme): string;
+    fileWrapperFocus(t: Theme): string;
+    fileWrapperHover(t: Theme): string;
+    warningFile(t: Theme): string;
+    errorFile(t: Theme): string;
+    removeBorderTopRadius(): string;
+    removeBorderBottomRadius(): string;
+    summary(t: Theme): string;
+    summaryErrorText(t: Theme): string;
+    summaryWarningText(t: Theme): string;
+    summarySmall(t: Theme): string;
+    summaryMedium(t: Theme): string;
+    summaryLarge(t: Theme): string;
+}>;
+export declare const getJsRowStyles: import("../../../lib/theming/Emotion.js").StylesGetter<{
+    file(): string;
+    fileListWrapper(t: Theme): string;
+    fileWrapperSmall(t: Theme): string;
+    fileWrapperMedium(t: Theme): string;
+    fileWrapperLarge(t: Theme): string;
+    errorFileFocus(t: Theme): string;
+    warningFileFocus(t: Theme): string;
+}>;
+export declare const getJsTileStyles: import("../../../lib/theming/Emotion.js").StylesGetter<{
+    file(): string;
+    fileListWrapper(): string;
+    fileWrapperSmall(t: Theme): string;
+    fileWrapperMedium(t: Theme): string;
+    fileWrapperLarge(t: Theme): string;
+    errorFileFocus(t: Theme): string;
+    warningFileFocus(t: Theme): string;
+}>;

package/components/FileUploader/FileUploaderFileList/FileUploaderFileList.styles.js

@@ -0,0 +1,103 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../../lib/theming/Emotion.js';
+export var getJsStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return {
+        fileWrapper: function (t) {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        position: relative;\n        width: 100%;\n        height: max-content;\n        display: flex;\n        align-items: center;\n        box-sizing: border-box;\n        border-radius: ", ";\n        border: ", " solid transparent;\n        box-shadow: 0 0 0 1px transparent;\n        cursor: pointer;\n\n        &::before {\n          position: absolute;\n          content: ' ';\n          width: 100%;\n          height: 100%;\n          border-radius: ", ";\n          border: ", " solid transparent;\n          box-shadow: 0 0 0 1px transparent;\n          top: -1px;\n          left: -1px;\n          z-index: -1;\n        }\n      "], ["\n        position: relative;\n        width: 100%;\n        height: max-content;\n        display: flex;\n        align-items: center;\n        box-sizing: border-box;\n        border-radius: ", ";\n        border: ", " solid transparent;\n        box-shadow: 0 0 0 1px transparent;\n        cursor: pointer;\n\n        &::before {\n          position: absolute;\n          content: ' ';\n          width: 100%;\n          height: 100%;\n          border-radius: ", ";\n          border: ", " solid transparent;\n          box-shadow: 0 0 0 1px transparent;\n          top: -1px;\n          left: -1px;\n          z-index: -1;\n        }\n      "])), t.fileUploaderBorderRadius, t.fileUploaderBorderWidth, t.fileUploaderBorderRadius, t.fileUploaderBorderWidth);
+        },
+        fileWrapperFocus: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        border: ", " solid ", ";\n        box-shadow: 0 0 0 1px ", ";\n      "], ["\n        border: ", " solid ", ";\n        box-shadow: 0 0 0 1px ", ";\n      "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorFocus, t.fileUploaderBorderColorFocus);
+        },
+        fileWrapperHover: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        background: ", ";\n        border-color: ", ";\n      "], ["\n        background: ", ";\n        border-color: ", ";\n      "])), t.fileUploaderHoveredBg, t.fileUploaderHoveredBorderColor);
+        },
+        warningFile: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n        &:hover {\n          background: ", ";\n          border-radius: ", ";\n        }\n        &::before {\n          background: ", ";\n        }\n      "], ["\n        background: ", ";\n        color: ", ";\n        &:hover {\n          background: ", ";\n          border-radius: ", ";\n        }\n        &::before {\n          background: ", ";\n        }\n      "])), t.fileUploaderWarningBgColor, t.fileUploaderValidationTextColor, t.fileUploaderWarningBgHoverColor, t.fileUploaderBorderRadius, t.fileUploaderWarningBgColor);
+        },
+        errorFile: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n        &:hover {\n          background: ", ";\n          border-radius: ", ";\n        }\n        &::before {\n          background: ", ";\n        }\n      "], ["\n        background: ", ";\n        color: ", ";\n        &:hover {\n          background: ", ";\n          border-radius: ", ";\n        }\n        &::before {\n          background: ", ";\n        }\n      "])), t.fileUploaderErrorBgColor, t.fileUploaderValidationTextColor, t.fileUploaderErrorBgHoverColor, t.fileUploaderBorderRadius, t.fileUploaderErrorBgColor);
+        },
+        removeBorderTopRadius: function () {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        border-top-right-radius: 0;\n        border-top-left-radius: 0;\n        &::before {\n          border-top-right-radius: 0;\n          border-top-left-radius: 0;\n        }\n      "], ["\n        border-top-right-radius: 0;\n        border-top-left-radius: 0;\n        &::before {\n          border-top-right-radius: 0;\n          border-top-left-radius: 0;\n        }\n      "])));
+        },
+        removeBorderBottomRadius: function () {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        &::before {\n          border-bottom-right-radius: 0;\n          border-bottom-left-radius: 0;\n        }\n      "], ["\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        &::before {\n          border-bottom-right-radius: 0;\n          border-bottom-left-radius: 0;\n        }\n      "])));
+        },
+        summary: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        display: flex;\n        border-bottom: 1px solid ", ";\n        margin-bottom: ", ";\n        order: -1;\n        width: 100%;\n        box-sizing: border-box;\n      "], ["\n        display: flex;\n        border-bottom: 1px solid ", ";\n        margin-bottom: ", ";\n        order: -1;\n        width: 100%;\n        box-sizing: border-box;\n      "])), t.tabColorHover, t.fileUploaderListGap);
+        },
+        summaryErrorText: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        color: ", ";\n        margin-right: ", ";\n      "], ["\n        color: ", ";\n        margin-right: ", ";\n      "])), t.fileUploaderErrorTextColor, t.fileUploaderListSummaryTextGap);
+        },
+        summaryWarningText: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), t.fileUploaderWarningTextColor);
+        },
+        summarySmall: function (t) {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " ", ";\n      "], ["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " ", ";\n      "])), t.fileUploaderFontSizeSmall, t.fileUploaderLineHeightSmall, t.fileUploaderPaddingYSmall, t.fileUploaderPaddingXSmall);
+        },
+        summaryMedium: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " ", ";\n      "], ["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " ", ";\n      "])), t.fileUploaderFontSizeMedium, t.fileUploaderLineHeightMedium, t.fileUploaderPaddingYMedium, t.fileUploaderPaddingXMedium);
+        },
+        summaryLarge: function (t) {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " ", ";\n      "], ["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " ", ";\n      "])), t.fileUploaderFontSizeLarge, t.fileUploaderLineHeightLarge, t.fileUploaderPaddingYLarge, t.fileUploaderPaddingXLarge);
+        },
+    };
+});
+export var getJsRowStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return {
+        file: function () {
+            return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n        width: 100%;\n      "], ["\n        width: 100%;\n      "])));
+        },
+        fileListWrapper: function (t) {
+            return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n        display: block;\n        width: 100%;\n        margin-top: ", ";\n      "], ["\n        display: block;\n        width: 100%;\n        margin-top: ", ";\n      "])), t.fileUploaderListGap);
+        },
+        fileWrapperSmall: function (t) {
+            return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n        padding: ", " ", ";\n      "], ["\n        padding: ", " ", ";\n      "])), t.fileUploaderPaddingYSmall, t.fileUploaderPaddingXSmall);
+        },
+        fileWrapperMedium: function (t) {
+            return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n        padding: ", " ", ";\n      "], ["\n        padding: ", " ", ";\n      "])), t.fileUploaderPaddingYMedium, t.fileUploaderPaddingXMedium);
+        },
+        fileWrapperLarge: function (t) {
+            return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n        padding: ", " ", ";\n      "], ["\n        padding: ", " ", ";\n      "])), t.fileUploaderPaddingYLarge, t.fileUploaderPaddingXLarge);
+        },
+        errorFileFocus: function (t) {
+            return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n        background: ", ";\n        border: ", " solid ", ";\n        border-radius: ", " !important;\n        box-shadow: 0 0 0 1px ", ";\n      "], ["\n        background: ", ";\n        border: ", " solid ", ";\n        border-radius: ", " !important;\n        box-shadow: 0 0 0 1px ", ";\n      "])), t.fileUploaderErrorBgHoverColor, t.fileUploaderBorderWidth, t.fileUploaderBorderColorError, t.fileUploaderBorderRadius, t.fileUploaderBorderColorError);
+        },
+        warningFileFocus: function (t) {
+            return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n        background: ", ";\n        border: ", " solid ", ";\n        border-radius: ", " !important;\n        box-shadow: 0 0 0 1px ", ";\n      "], ["\n        background: ", ";\n        border: ", " solid ", ";\n        border-radius: ", " !important;\n        box-shadow: 0 0 0 1px ", ";\n      "])), t.fileUploaderWarningBgHoverColor, t.fileUploaderBorderWidth, t.fileUploaderBorderColorWarning, t.fileUploaderBorderRadius, t.fileUploaderBorderColorWarning);
+        },
+    };
+});
+export var getJsTileStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return {
+        file: function () {
+            return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n        width: 100%;\n        height: 100%;\n      "], ["\n        width: 100%;\n        height: 100%;\n      "])));
+        },
+        fileListWrapper: function () {
+            return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n        display: contents;\n      "], ["\n        display: contents;\n      "])));
+        },
+        fileWrapperSmall: function (t) {
+            return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n        padding: ", ";\n        width: ", ";\n      "], ["\n        padding: ", ";\n        width: ", ";\n      "])), t.fileUploaderTileFilePaddingSmall, t.fileUploaderTileWidthSmall);
+        },
+        fileWrapperMedium: function (t) {
+            return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n        padding: ", ";\n        width: ", ";\n        height: ", ";\n      "], ["\n        padding: ", ";\n        width: ", ";\n        height: ", ";\n      "])), t.fileUploaderTileFilePaddingMedium, t.fileUploaderTileWidthMedium, t.fileUploaderTileHeightMedium);
+        },
+        fileWrapperLarge: function (t) {
+            return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n        padding: ", ";\n        width: ", ";\n        height: ", ";\n      "], ["\n        padding: ", ";\n        width: ", ";\n        height: ", ";\n      "])), t.fileUploaderTileFilePaddingLarge, t.fileUploaderTileWidthLarge, t.fileUploaderTileHeightLarge);
+        },
+        errorFileFocus: function (t) {
+            return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n        border: ", " solid ", ";\n        border-radius: ", " !important;\n        box-shadow: 0 0 0 1px ", ";\n      "], ["\n        border: ", " solid ", ";\n        border-radius: ", " !important;\n        box-shadow: 0 0 0 1px ", ";\n      "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorError, t.fileUploaderBorderRadius, t.fileUploaderBorderColorError);
+        },
+        warningFileFocus: function (t) {
+            return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n        border: ", " solid ", ";\n        border-radius: ", " !important;\n        box-shadow: 0 0 0 1px ", ";\n      "], ["\n        border: ", " solid ", ";\n        border-radius: ", " !important;\n        box-shadow: 0 0 0 1px ", ";\n      "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorWarning, t.fileUploaderBorderRadius, t.fileUploaderBorderColorWarning);
+        },
+    };
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;
+//# sourceMappingURL=FileUploaderFileList.styles.js.map

package/components/FileUploader/FileUploaderFileList/FileUploaderFileList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploaderFileList.styles.js","sourceRoot":"","sources":["FileUploaderFileList.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => {\n  return {\n    fileWrapper(t: Theme) {\n      return css`\n        position: relative;\n        width: 100%;\n        height: max-content;\n        display: flex;\n        align-items: center;\n        box-sizing: border-box;\n        border-radius: ${t.fileUploaderBorderRadius};\n        border: ${t.fileUploaderBorderWidth} solid transparent;\n        box-shadow: 0 0 0 1px transparent;\n        cursor: pointer;\n\n        &::before {\n          position: absolute;\n          content: ' ';\n          width: 100%;\n          height: 100%;\n          border-radius: ${t.fileUploaderBorderRadius};\n          border: ${t.fileUploaderBorderWidth} solid transparent;\n          box-shadow: 0 0 0 1px transparent;\n          top: -1px;\n          left: -1px;\n          z-index: -1;\n        }\n      `;\n    },\n\n    fileWrapperFocus(t: Theme) {\n      return css`\n        border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorFocus};\n        box-shadow: 0 0 0 1px ${t.fileUploaderBorderColorFocus};\n      `;\n    },\n\n    fileWrapperHover(t: Theme) {\n      return css`\n        background: ${t.fileUploaderHoveredBg};\n        border-color: ${t.fileUploaderHoveredBorderColor};\n      `;\n    },\n\n    warningFile(t: Theme) {\n      return css`\n        background: ${t.fileUploaderWarningBgColor};\n        color: ${t.fileUploaderValidationTextColor};\n        &:hover {\n          background: ${t.fileUploaderWarningBgHoverColor};\n          border-radius: ${t.fileUploaderBorderRadius};\n        }\n        &::before {\n          background: ${t.fileUploaderWarningBgColor};\n        }\n      `;\n    },\n\n    errorFile(t: Theme) {\n      return css`\n        background: ${t.fileUploaderErrorBgColor};\n        color: ${t.fileUploaderValidationTextColor};\n        &:hover {\n          background: ${t.fileUploaderErrorBgHoverColor};\n          border-radius: ${t.fileUploaderBorderRadius};\n        }\n        &::before {\n          background: ${t.fileUploaderErrorBgColor};\n        }\n      `;\n    },\n\n    removeBorderTopRadius() {\n      return css`\n        border-top-right-radius: 0;\n        border-top-left-radius: 0;\n        &::before {\n          border-top-right-radius: 0;\n          border-top-left-radius: 0;\n        }\n      `;\n    },\n\n    removeBorderBottomRadius() {\n      return css`\n        border-bottom-right-radius: 0;\n        border-bottom-left-radius: 0;\n        &::before {\n          border-bottom-right-radius: 0;\n          border-bottom-left-radius: 0;\n        }\n      `;\n    },\n\n    summary(t: Theme) {\n      return css`\n        display: flex;\n        border-bottom: 1px solid ${t.tabColorHover};\n        margin-bottom: ${t.fileUploaderListGap};\n        order: -1;\n        width: 100%;\n        box-sizing: border-box;\n      `;\n    },\n\n    summaryErrorText(t: Theme) {\n      return css`\n        color: ${t.fileUploaderErrorTextColor};\n        margin-right: ${t.fileUploaderListSummaryTextGap};\n      `;\n    },\n\n    summaryWarningText(t: Theme) {\n      return css`\n        color: ${t.fileUploaderWarningTextColor};\n      `;\n    },\n\n    summarySmall(t: Theme) {\n      return css`\n        font-size: ${t.fileUploaderFontSizeSmall};\n        line-height: ${t.fileUploaderLineHeightSmall};\n        padding: ${t.fileUploaderPaddingYSmall} ${t.fileUploaderPaddingXSmall};\n      `;\n    },\n\n    summaryMedium(t: Theme) {\n      return css`\n        font-size: ${t.fileUploaderFontSizeMedium};\n        line-height: ${t.fileUploaderLineHeightMedium};\n        padding: ${t.fileUploaderPaddingYMedium} ${t.fileUploaderPaddingXMedium};\n      `;\n    },\n\n    summaryLarge(t: Theme) {\n      return css`\n        font-size: ${t.fileUploaderFontSizeLarge};\n        line-height: ${t.fileUploaderLineHeightLarge};\n        padding: ${t.fileUploaderPaddingYLarge} ${t.fileUploaderPaddingXLarge};\n      `;\n    },\n  };\n});\n\nexport const getJsRowStyles = memoizeGetStyles(({ css }: Emotion) => {\n  return {\n    file() {\n      return css`\n        width: 100%;\n      `;\n    },\n\n    fileListWrapper(t: Theme) {\n      return css`\n        display: block;\n        width: 100%;\n        margin-top: ${t.fileUploaderListGap};\n      `;\n    },\n\n    fileWrapperSmall(t: Theme) {\n      return css`\n        padding: ${t.fileUploaderPaddingYSmall} ${t.fileUploaderPaddingXSmall};\n      `;\n    },\n\n    fileWrapperMedium(t: Theme) {\n      return css`\n        padding: ${t.fileUploaderPaddingYMedium} ${t.fileUploaderPaddingXMedium};\n      `;\n    },\n\n    fileWrapperLarge(t: Theme) {\n      return css`\n        padding: ${t.fileUploaderPaddingYLarge} ${t.fileUploaderPaddingXLarge};\n      `;\n    },\n\n    errorFileFocus(t: Theme) {\n      return css`\n        background: ${t.fileUploaderErrorBgHoverColor};\n        border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorError};\n        border-radius: ${t.fileUploaderBorderRadius} !important;\n        box-shadow: 0 0 0 1px ${t.fileUploaderBorderColorError};\n      `;\n    },\n\n    warningFileFocus(t: Theme) {\n      return css`\n        background: ${t.fileUploaderWarningBgHoverColor};\n        border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorWarning};\n        border-radius: ${t.fileUploaderBorderRadius} !important;\n        box-shadow: 0 0 0 1px ${t.fileUploaderBorderColorWarning};\n      `;\n    },\n  };\n});\n\nexport const getJsTileStyles = memoizeGetStyles(({ css }: Emotion) => {\n  return {\n    file() {\n      return css`\n        width: 100%;\n        height: 100%;\n      `;\n    },\n\n    fileListWrapper() {\n      return css`\n        display: contents;\n      `;\n    },\n\n    fileWrapperSmall(t: Theme) {\n      return css`\n        padding: ${t.fileUploaderTileFilePaddingSmall};\n        width: ${t.fileUploaderTileWidthSmall};\n      `;\n    },\n\n    fileWrapperMedium(t: Theme) {\n      return css`\n        padding: ${t.fileUploaderTileFilePaddingMedium};\n        width: ${t.fileUploaderTileWidthMedium};\n        height: ${t.fileUploaderTileHeightMedium};\n      `;\n    },\n\n    fileWrapperLarge(t: Theme) {\n      return css`\n        padding: ${t.fileUploaderTileFilePaddingLarge};\n        width: ${t.fileUploaderTileWidthLarge};\n        height: ${t.fileUploaderTileHeightLarge};\n      `;\n    },\n\n    errorFileFocus(t: Theme) {\n      return css`\n        border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorError};\n        border-radius: ${t.fileUploaderBorderRadius} !important;\n        box-shadow: 0 0 0 1px ${t.fileUploaderBorderColorError};\n      `;\n    },\n\n    warningFileFocus(t: Theme) {\n      return css`\n        border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorWarning};\n        border-radius: ${t.fileUploaderBorderRadius} !important;\n        box-shadow: 0 0 0 1px ${t.fileUploaderBorderColorWarning};\n      `;\n    },\n  };\n});\n"]}

package/components/FileUploader/FileUploaderFileStatusIcon.js

@@ -1,13 +1,18 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';
+import { useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { useResponsiveLayout } from '../ResponsiveLayout/index.js';
-import { jsRowStyles, jsTileStyles } from './FileUploaderFile.css.js';
+import { getJsRowStyles, getJsTileStyles } from './FileUploaderFile.styles.js';
 import { FileUploaderFileStatus } from './fileUtils.js';
 import { DeleteIcon } from './icons/DeleteIcon.js';
 export var FileUploaderFileStatusIcon = function (_a) {
     var hovered = _a.hovered, isTileView = _a.isTileView, disabled = _a.disabled, focusedByTab = _a.focusedByTab, isInvalid = _a.isInvalid, status = _a.status, size = _a.size, hasValidation = _a.hasValidation;
     var isMobile = useResponsiveLayout().isMobile;
-    var iconClassNames = isTileView ? jsTileStyles.iconColor : jsRowStyles.iconColor;
+    var theme = useContext(ThemeContext);
+    var jsTileStyles = useStyles(getJsTileStyles);
+    var jsRowStyles = useStyles(getJsRowStyles);
+    var iconClassNames = isTileView ? jsTileStyles.iconColor(theme) : jsRowStyles.iconColor(theme);
     var iconDelete = React.createElement(DeleteIcon, { size: size, className: iconClassNames });
     if (status === FileUploaderFileStatus.Loading) {
         return hovered || isTileView ? iconDelete : React.createElement(LoadingIcon, { size: size });

package/components/FileUploader/FileUploaderFileStatusIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderFileStatusIcon.js","sourceRoot":"","sources":["FileUploaderFileStatusIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AAEtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAanD,MAAM,CAAC,IAAM,0BAA0B,GAA6D,UAAC,EASpG;QARC,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,aAAa,mBAAA;IAEL,IAAA,QAAQ,GAAK,mBAAmB,EAAE,SAA1B,CAA2B;IAE3C,IAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC;IACnF,IAAM,UAAU,GAAG,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,CAAC;IAEzE,IAAI,MAAM,KAAK,sBAAsB,CAAC,OAAO,EAAE,CAAC;QAC9C,OAAO,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IAC1E,CAAC;IACD,IAAI,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;QACzD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,SAAS,IAAI,aAAa,EAAE,CAAC;QAC/B,OAAO,UAAU,CAAC;IACpB,CAAC;IACD,2FAA2F;IAC3F,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { useResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { jsRowStyles, jsTileStyles } from './FileUploaderFile.css.js';\nimport { FileUploaderFileStatus } from './fileUtils.js';\nimport { DeleteIcon } from './icons/DeleteIcon.js';\n\ninterface FileUploaderFileStatusIconProps {\n  hovered: boolean;\n  isTileView?: boolean;\n  disabled?: boolean;\n  focusedByTab: boolean;\n  isInvalid: boolean;\n  status: FileUploaderFileStatus;\n  size: SizeProp;\n  hasValidation?: boolean;\n}\n\nexport const FileUploaderFileStatusIcon: React.FunctionComponent<FileUploaderFileStatusIconProps> = ({\n  hovered,\n  isTileView,\n  disabled,\n  focusedByTab,\n  isInvalid,\n  status,\n  size,\n  hasValidation,\n}) => {\n  const { isMobile } = useResponsiveLayout();\n\n  const iconClassNames = isTileView ? jsTileStyles.iconColor : jsRowStyles.iconColor;\n  const iconDelete = <DeleteIcon size={size} className={iconClassNames} />;\n\n  if (status === FileUploaderFileStatus.Loading) {\n    return hovered || isTileView ? iconDelete : <LoadingIcon size={size} />;\n  }\n  if (disabled || (!isMobile && !hovered && !focusedByTab)) {\n    return null;\n  }\n  if (isInvalid || hasValidation) {\n    return iconDelete;\n  }\n  // TODO - IF-2270 - добавить логику для действий по наведению и клику, пока только удаление\n  return iconDelete;\n};\n"]}
+{"version":3,"file":"FileUploaderFileStatusIcon.js","sourceRoot":"","sources":["FileUploaderFileStatusIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAanD,MAAM,CAAC,IAAM,0BAA0B,GAA6D,UAAC,EASpG;QARC,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,aAAa,mBAAA;IAEL,IAAA,QAAQ,GAAK,mBAAmB,EAAE,SAA1B,CAA2B;IAC3C,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACvC,IAAM,YAAY,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC;IAChD,IAAM,WAAW,GAAG,SAAS,CAAC,cAAc,CAAC,CAAC;IAE9C,IAAM,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACjG,IAAM,UAAU,GAAG,oBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,CAAC;IAEzE,IAAI,MAAM,KAAK,sBAAsB,CAAC,OAAO,EAAE,CAAC;QAC9C,OAAO,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC;IAC1E,CAAC;IACD,IAAI,QAAQ,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;QACzD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,SAAS,IAAI,aAAa,EAAE,CAAC;QAC/B,OAAO,UAAU,CAAC;IACpB,CAAC;IACD,2FAA2F;IAC3F,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { useResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { getJsRowStyles, getJsTileStyles } from './FileUploaderFile.styles.js';\nimport { FileUploaderFileStatus } from './fileUtils.js';\nimport { DeleteIcon } from './icons/DeleteIcon.js';\n\ninterface FileUploaderFileStatusIconProps {\n  hovered: boolean;\n  isTileView?: boolean;\n  disabled?: boolean;\n  focusedByTab: boolean;\n  isInvalid: boolean;\n  status: FileUploaderFileStatus;\n  size: SizeProp;\n  hasValidation?: boolean;\n}\n\nexport const FileUploaderFileStatusIcon: React.FunctionComponent<FileUploaderFileStatusIconProps> = ({\n  hovered,\n  isTileView,\n  disabled,\n  focusedByTab,\n  isInvalid,\n  status,\n  size,\n  hasValidation,\n}) => {\n  const { isMobile } = useResponsiveLayout();\n  const theme = useContext(ThemeContext);\n  const jsTileStyles = useStyles(getJsTileStyles);\n  const jsRowStyles = useStyles(getJsRowStyles);\n\n  const iconClassNames = isTileView ? jsTileStyles.iconColor(theme) : jsRowStyles.iconColor(theme);\n  const iconDelete = <DeleteIcon size={size} className={iconClassNames} />;\n\n  if (status === FileUploaderFileStatus.Loading) {\n    return hovered || isTileView ? iconDelete : <LoadingIcon size={size} />;\n  }\n  if (disabled || (!isMobile && !hovered && !focusedByTab)) {\n    return null;\n  }\n  if (isInvalid || hasValidation) {\n    return iconDelete;\n  }\n  // TODO - IF-2270 - добавить логику для действий по наведению и клику, пока только удаление\n  return iconDelete;\n};\n"]}

package/components/GlobalLoader/GlobalLoaderView.js

@@ -20,54 +20,53 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, 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 { cx } from '../../lib/cx.js';
-import { animations, styles } from './GlobalLoaderView.css.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getAnimations, getStyles } from './GlobalLoaderView.styles.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;
     var getAnimationClass = function (status) {
         if (!disableAnimations) {
             switch (status) {
                 case 'success':
-                    return animations.successAnimation;
+                    return animations.successAnimation(delayBeforeHide, width, left);
                 case 'accept':
                     if (startWidth < fullWidth * 0.8) {
-                        return animations.acceptAnimation;
+                        return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);
                     }
-                    return animations.slowAcceptAnimation;
+                    return animations.slowAcceptAnimation(theme, startWidth, width, left);
                 case 'error':
-                    return animations.errorAnimation;
+                    return animations.errorAnimation(theme);
                 case 'standard':
-                    return animations.standardAnimation;
+                    return animations.standardAnimation(theme, expectedResponseTime);
             }
         }
         if (disableAnimations) {
             switch (status) {
                 case 'success':
-                    return styles.successWithoutAnimation;
+                    return styles.successWithoutAnimation();
                 case 'accept':
-                    return animations.acceptWithoutAnimation;
+                    return animations.acceptWithoutAnimation(startWidth);
                 case 'error':
-                    return styles.errorWithoutAnimation;
+                    return styles.errorWithoutAnimation();
                 case 'standard':
-                    return styles.standardWithoutAnimation;
+                    return styles.standardWithoutAnimation();
             }
         }
     };
     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)), 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"),
-                } }))));
+        React.createElement(ZIndex, { priority: "GlobalLoader", className: styles.outer(theme) },
+            React.createElement("div", { ref: ref, className: cx(styles.inner(theme), getAnimationClass(status)) }))));
 });
 //# sourceMappingURL=GlobalLoaderView.js.map

package/components/GlobalLoader/GlobalLoaderView.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalLoaderView.js","sourceRoot":"","sources":["GlobalLoaderView.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAqB/E,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAU,CACxC,UACE,EAAoG,EACpG,WAAkD;IADhD,IAAA,oBAAoB,0BAAA,EAAE,eAAe,qBAAA,EAAE,MAAM,YAAA,EAAE,iBAAiB,uBAAA,EAAK,IAAI,cAA3E,0EAA6E,CAAF;IAG3E,IAAM,GAAG,GAAG,MAAM,CAAiC,IAAI,CAAC,CAAC;IACnD,IAAA,KAAmC,oBAAoB,CAAC,MAAM,EAAE,GAAG,CAAC,EAAlE,KAAK,WAAA,EAAE,UAAU,gBAAA,EAAE,SAAS,eAAsC,CAAC;IACnE,IAAA,IAAI,GAAK,uBAAuB,CAAC,GAAG,CAAC,KAAjC,CAAkC;IAE9C,IAAM,iBAAiB,GAAG,UAAC,MAAuC;QAChE,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,QAAQ,MAAM,EAAE,CAAC;gBACf,KAAK,SAAS;oBACZ,OAAO,UAAU,CAAC,gBAAgB,CAAC;gBACrC,KAAK,QAAQ;oBACX,IAAI,UAAU,GAAG,SAAS,GAAG,GAAG,EAAE,CAAC;wBACjC,OAAO,UAAU,CAAC,eAAe,CAAC;oBACpC,CAAC;oBACD,OAAO,UAAU,CAAC,mBAAmB,CAAC;gBACxC,KAAK,OAAO;oBACV,OAAO,UAAU,CAAC,cAAc,CAAC;gBACnC,KAAK,UAAU;oBACb,OAAO,UAAU,CAAC,iBAAiB,CAAC;YACxC,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,EAAE,CAAC;YACtB,QAAQ,MAAM,EAAE,CAAC;gBACf,KAAK,SAAS;oBACZ,OAAO,MAAM,CAAC,uBAAuB,CAAC;gBACxC,KAAK,QAAQ;oBACX,OAAO,UAAU,CAAC,sBAAsB,CAAC;gBAC3C,KAAK,OAAO;oBACV,OAAO,MAAM,CAAC,qBAAqB,CAAC;gBACtC,KAAK,UAAU;oBACb,OAAO,MAAM,CAAC,wBAAwB,CAAC;YAC3C,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,eAAK,IAAI,mBAAe,MAAM,EAAE,GAAG,EAAE,WAAW;QAC5D,oBAAC,MAAM,IAAC,QAAQ,EAAC,cAAc,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK;YACrD,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC,EACtD,KAAK,EACH;oBACE,4CAA4C,EAAE,UAAG,eAAe,OAAI;oBACpE,wCAAwC,EAAE,UAAG,oBAAoB,OAAI;oBACrE,gCAAgC,EAAE,UAAG,KAAK,OAAI;oBAC9C,sCAAsC,EAAE,UAAG,UAAU,OAAI;oBACzD,+BAA+B,EAAE,UAAG,IAAI,OAAI;iBACtB,GAE1B,CACK,CACK,CACjB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { forwardRef, 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 { cx } from '../../lib/cx.js';\nimport { animations, styles } 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 { 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;\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\n            ref={ref}\n            className={cx(styles.inner, 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"]}
+{"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.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 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(delayBeforeHide, width, left);\n          case 'accept':\n            if (startWidth < fullWidth * 0.8) {\n              return animations.acceptAnimation(theme, startWidth, expectedResponseTime, width, left);\n            }\n            return animations.slowAcceptAnimation(theme, startWidth, width, left);\n          case 'error':\n            return animations.errorAnimation(theme);\n          case 'standard':\n            return animations.standardAnimation(theme, expectedResponseTime);\n        }\n      }\n\n      if (disableAnimations) {\n        switch (status) {\n          case 'success':\n            return styles.successWithoutAnimation();\n          case 'accept':\n            return animations.acceptWithoutAnimation(startWidth);\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 ref={ref} className={cx(styles.inner(theme), getAnimationClass(status))} />\n        </ZIndex>\n      </CommonWrapper>\n    );\n  },\n);\n"]}

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

@@ -0,0 +1,17 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    outer(t: Theme): string;
+    inner(t: Theme): string;
+    standardWithoutAnimation(): string;
+    successWithoutAnimation(): string;
+    errorWithoutAnimation(): string;
+}>;
+export declare const getAnimations: (emotion: Emotion) => {
+    successAnimation(delayBeforeHide: number, width: number, left: number): string;
+    errorAnimation(t: Theme): string;
+    standardAnimation(t: Theme, expectedTime: number): string;
+    acceptAnimation(t: Theme, startWidth: number, expectedTime: number, width: number, left: number): string;
+    slowAcceptAnimation(t: Theme, startWidth: number, width: number, left: number): string;
+    acceptWithoutAnimation(startWidth: number): string;
+};