@skbkontur/react-ui 6.4.2-static-css.0 → 6.4.3-5e1c3.0

package/components/FileUploader/FileUploaderFileList/FileUploaderFileList.js

@@ -21,8 +21,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import React, { useContext, useRef, useState } from 'react';
 import { LocaleContext } from '../../../lib/locale/index.js';
 import { pluralize } from '../../../lib/pluralize.js';
-import { useStyles } from '../../../lib/renderEnvironment/index.js';
-import { concatClassNames as cx } from '../../../lib/theming/Emotion.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';
@@ -34,9 +34,11 @@ export var FileUploaderFileDataTids = {
 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];
@@ -65,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') {
@@ -86,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;
@@ -105,16 +107,16 @@ 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))), (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,

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 { LocaleContext } from '../../../lib/locale/index.js';\nimport { pluralize } from '../../../lib/pluralize.js';\nimport { useStyles } from '../../../lib/renderEnvironment/index.js';\nimport { concatClassNames as cx } from '../../../lib/theming/Emotion.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 jsStyles = useStyles(getJsStyles);\n  const jsRowStyles = useStyles(getJsRowStyles);\n  const jsTileStyles = useStyles(getJsTileStyles);\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

@@ -1,34 +1,34 @@
-/** Правила — в `FileUploaderFileList.css`; здесь только имена классов. */
-export declare const getJsRowStyles: (ignored?: unknown) => import("../../../lib/theming/staticStyles.js").StaticStyles<{
-    file: string;
-    fileListWrapper: string;
-    fileWrapperSmall: string;
-    fileWrapperMedium: string;
-    fileWrapperLarge: string;
-    errorFileFocus: string;
-    warningFileFocus: string;
+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 getJsStyles: (ignored?: unknown) => import("../../../lib/theming/staticStyles.js").StaticStyles<{
-    fileWrapper: string;
-    fileWrapperFocus: string;
-    fileWrapperHover: string;
-    warningFile: string;
-    errorFile: string;
-    removeBorderTopRadius: string;
-    removeBorderBottomRadius: string;
-    summary: string;
-    summaryErrorText: string;
-    summaryWarningText: string;
-    summarySmall: string;
-    summaryMedium: string;
-    summaryLarge: 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: (ignored?: unknown) => import("../../../lib/theming/staticStyles.js").StaticStyles<{
-    file: string;
-    fileListWrapper: string;
-    fileWrapperSmall: string;
-    fileWrapperMedium: string;
-    fileWrapperLarge: string;
-    errorFileFocus: string;
-    warningFileFocus: 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

@@ -1,36 +1,103 @@
-import { staticStyles } from '../../../lib/theming/staticStyles.js';
-/** Правила — в `FileUploaderFileList.css`; здесь только имена классов. */
-export var getJsRowStyles = staticStyles({
-    file: 'react-ui-FileUploaderFileList-JsRow-file',
-    fileListWrapper: 'react-ui-FileUploaderFileList-JsRow-fileListWrapper',
-    fileWrapperSmall: 'react-ui-FileUploaderFileList-JsRow-fileWrapperSmall',
-    fileWrapperMedium: 'react-ui-FileUploaderFileList-JsRow-fileWrapperMedium',
-    fileWrapperLarge: 'react-ui-FileUploaderFileList-JsRow-fileWrapperLarge',
-    errorFileFocus: 'react-ui-FileUploaderFileList-JsRow-errorFileFocus',
-    warningFileFocus: 'react-ui-FileUploaderFileList-JsRow-warningFileFocus',
+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        transition: background-color ", " ", ";\n\n        &:active {\n          background: ", ";\n        }\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        transition: background-color ", " ", ";\n\n        &:active {\n          background: ", ";\n        }\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.transitionDuration, t.transitionTimingFunction, t.fileUploaderActiveBg, 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        transition: background-color ", " ", ";\n        &:hover {\n          background: ", ";\n          border-radius: ", ";\n        }\n        &:active {\n          background: ", ";\n        }\n        &::before {\n          background: ", ";\n        }\n      "], ["\n        background: ", ";\n        color: ", ";\n        transition: background-color ", " ", ";\n        &:hover {\n          background: ", ";\n          border-radius: ", ";\n        }\n        &:active {\n          background: ", ";\n        }\n        &::before {\n          background: ", ";\n        }\n      "])), t.fileUploaderWarningBgColor, t.fileUploaderValidationTextColor, t.transitionDuration, t.transitionTimingFunction, t.fileUploaderWarningBgHoverColor, t.fileUploaderBorderRadius, t.fileUploaderWarningBgPressedColor, t.fileUploaderWarningBgColor);
+        },
+        errorFile: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n        transition: background-color ", " ", ";\n        &:hover {\n          background: ", ";\n          border-radius: ", ";\n        }\n        &:active {\n          background: ", ";\n        }\n        &::before {\n          background: ", ";\n        }\n      "], ["\n        background: ", ";\n        color: ", ";\n        transition: background-color ", " ", ";\n        &:hover {\n          background: ", ";\n          border-radius: ", ";\n        }\n        &:active {\n          background: ", ";\n        }\n        &::before {\n          background: ", ";\n        }\n      "])), t.fileUploaderErrorBgColor, t.fileUploaderValidationTextColor, t.transitionDuration, t.transitionTimingFunction, t.fileUploaderErrorBgHoverColor, t.fileUploaderBorderRadius, t.fileUploaderErrorBgPressedColor, 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 getJsStyles = staticStyles({
-    fileWrapper: 'react-ui-FileUploaderFileList-Js-fileWrapper',
-    fileWrapperFocus: 'react-ui-FileUploaderFileList-Js-fileWrapperFocus',
-    fileWrapperHover: 'react-ui-FileUploaderFileList-Js-fileWrapperHover',
-    warningFile: 'react-ui-FileUploaderFileList-Js-warningFile',
-    errorFile: 'react-ui-FileUploaderFileList-Js-errorFile',
-    removeBorderTopRadius: 'react-ui-FileUploaderFileList-Js-removeBorderTopRadius',
-    removeBorderBottomRadius: 'react-ui-FileUploaderFileList-Js-removeBorderBottomRadius',
-    summary: 'react-ui-FileUploaderFileList-Js-summary',
-    summaryErrorText: 'react-ui-FileUploaderFileList-Js-summaryErrorText',
-    summaryWarningText: 'react-ui-FileUploaderFileList-Js-summaryWarningText',
-    summarySmall: 'react-ui-FileUploaderFileList-Js-summarySmall',
-    summaryMedium: 'react-ui-FileUploaderFileList-Js-summaryMedium',
-    summaryLarge: 'react-ui-FileUploaderFileList-Js-summaryLarge',
+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 = staticStyles({
-    file: 'react-ui-FileUploaderFileList-JsTile-file',
-    fileListWrapper: 'react-ui-FileUploaderFileList-JsTile-fileListWrapper',
-    fileWrapperSmall: 'react-ui-FileUploaderFileList-JsTile-fileWrapperSmall',
-    fileWrapperMedium: 'react-ui-FileUploaderFileList-JsTile-fileWrapperMedium',
-    fileWrapperLarge: 'react-ui-FileUploaderFileList-JsTile-fileWrapperLarge',
-    errorFileFocus: 'react-ui-FileUploaderFileList-JsTile-errorFileFocus',
-    warningFileFocus: 'react-ui-FileUploaderFileList-JsTile-warningFileFocus',
+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

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderFileList.styles.js","sourceRoot":"","sources":["FileUploaderFileList.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,0EAA0E;AAC1E,MAAM,CAAC,IAAM,cAAc,GAAG,YAAY,CAAC;IACzC,IAAI,EAAE,0CAA0C;IAChD,eAAe,EAAE,qDAAqD;IACtE,gBAAgB,EAAE,sDAAsD;IACxE,iBAAiB,EAAE,uDAAuD;IAC1E,gBAAgB,EAAE,sDAAsD;IACxE,cAAc,EAAE,oDAAoD;IACpE,gBAAgB,EAAE,sDAAsD;CACzE,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,WAAW,GAAG,YAAY,CAAC;IACtC,WAAW,EAAE,8CAA8C;IAC3D,gBAAgB,EAAE,mDAAmD;IACrE,gBAAgB,EAAE,mDAAmD;IACrE,WAAW,EAAE,8CAA8C;IAC3D,SAAS,EAAE,4CAA4C;IACvD,qBAAqB,EAAE,wDAAwD;IAC/E,wBAAwB,EAAE,2DAA2D;IACrF,OAAO,EAAE,0CAA0C;IACnD,gBAAgB,EAAE,mDAAmD;IACrE,kBAAkB,EAAE,qDAAqD;IACzE,YAAY,EAAE,+CAA+C;IAC7D,aAAa,EAAE,gDAAgD;IAC/D,YAAY,EAAE,+CAA+C;CAC9D,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,eAAe,GAAG,YAAY,CAAC;IAC1C,IAAI,EAAE,2CAA2C;IACjD,eAAe,EAAE,sDAAsD;IACvE,gBAAgB,EAAE,uDAAuD;IACzE,iBAAiB,EAAE,wDAAwD;IAC3E,gBAAgB,EAAE,uDAAuD;IACzE,cAAc,EAAE,qDAAqD;IACrE,gBAAgB,EAAE,uDAAuD;CAC1E,CAAC,CAAC","sourcesContent":["import { staticStyles } from '../../../lib/theming/staticStyles.js';\n\n/** Правила — в `FileUploaderFileList.css`; здесь только имена классов. */\nexport const getJsRowStyles = staticStyles({\n  file: 'react-ui-FileUploaderFileList-JsRow-file',\n  fileListWrapper: 'react-ui-FileUploaderFileList-JsRow-fileListWrapper',\n  fileWrapperSmall: 'react-ui-FileUploaderFileList-JsRow-fileWrapperSmall',\n  fileWrapperMedium: 'react-ui-FileUploaderFileList-JsRow-fileWrapperMedium',\n  fileWrapperLarge: 'react-ui-FileUploaderFileList-JsRow-fileWrapperLarge',\n  errorFileFocus: 'react-ui-FileUploaderFileList-JsRow-errorFileFocus',\n  warningFileFocus: 'react-ui-FileUploaderFileList-JsRow-warningFileFocus',\n});\n\nexport const getJsStyles = staticStyles({\n  fileWrapper: 'react-ui-FileUploaderFileList-Js-fileWrapper',\n  fileWrapperFocus: 'react-ui-FileUploaderFileList-Js-fileWrapperFocus',\n  fileWrapperHover: 'react-ui-FileUploaderFileList-Js-fileWrapperHover',\n  warningFile: 'react-ui-FileUploaderFileList-Js-warningFile',\n  errorFile: 'react-ui-FileUploaderFileList-Js-errorFile',\n  removeBorderTopRadius: 'react-ui-FileUploaderFileList-Js-removeBorderTopRadius',\n  removeBorderBottomRadius: 'react-ui-FileUploaderFileList-Js-removeBorderBottomRadius',\n  summary: 'react-ui-FileUploaderFileList-Js-summary',\n  summaryErrorText: 'react-ui-FileUploaderFileList-Js-summaryErrorText',\n  summaryWarningText: 'react-ui-FileUploaderFileList-Js-summaryWarningText',\n  summarySmall: 'react-ui-FileUploaderFileList-Js-summarySmall',\n  summaryMedium: 'react-ui-FileUploaderFileList-Js-summaryMedium',\n  summaryLarge: 'react-ui-FileUploaderFileList-Js-summaryLarge',\n});\n\nexport const getJsTileStyles = staticStyles({\n  file: 'react-ui-FileUploaderFileList-JsTile-file',\n  fileListWrapper: 'react-ui-FileUploaderFileList-JsTile-fileListWrapper',\n  fileWrapperSmall: 'react-ui-FileUploaderFileList-JsTile-fileWrapperSmall',\n  fileWrapperMedium: 'react-ui-FileUploaderFileList-JsTile-fileWrapperMedium',\n  fileWrapperLarge: 'react-ui-FileUploaderFileList-JsTile-fileWrapperLarge',\n  errorFileFocus: 'react-ui-FileUploaderFileList-JsTile-errorFileFocus',\n  warningFileFocus: 'react-ui-FileUploaderFileList-JsTile-warningFileFocus',\n});\n"]}
+{"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        transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction};\n\n        &:active {\n          background: ${t.fileUploaderActiveBg};\n        }\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        transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction};\n        &:hover {\n          background: ${t.fileUploaderWarningBgHoverColor};\n          border-radius: ${t.fileUploaderBorderRadius};\n        }\n        &:active {\n          background: ${t.fileUploaderWarningBgPressedColor};\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        transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction};\n        &:hover {\n          background: ${t.fileUploaderErrorBgHoverColor};\n          border-radius: ${t.fileUploaderBorderRadius};\n        }\n        &:active {\n          background: ${t.fileUploaderErrorBgPressedColor};\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,6 +1,7 @@
-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 { getJsRowStyles, getJsTileStyles } from './FileUploaderFile.styles.js';
 import { FileUploaderFileStatus } from './fileUtils.js';
@@ -8,9 +9,10 @@ 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 theme = useContext(ThemeContext);
     var jsTileStyles = useStyles(getJsTileStyles);
     var jsRowStyles = useStyles(getJsRowStyles);
-    var iconClassNames = isTileView ? jsTileStyles.iconColor() : jsRowStyles.iconColor();
+    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;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,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,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,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC;IACvF,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 { useStyles } from '../../lib/renderEnvironment/index.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 jsTileStyles = useStyles(getJsTileStyles);\n  const jsRowStyles = useStyles(getJsRowStyles);\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/FileUploader/FileUploaderFileTypeIcon.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { useStyles } from '../../lib/renderEnvironment/index.js';
-import { getStyles } from './FileUploaderFileTypeIcon.styles.js';
+import { useTheme } from '../../lib/theming/useTheme.js';
 import { ArchiveIcon as RowViewArchiveIcon } from './icons/row/ArchiveIcon.js';
 import { DocTextIcon as RowViewDocTextIcon } from './icons/row/DocTextIcon.js';
 import { FolderIcon as RowViewFolderIcon } from './icons/row/FolderIcon.js';
@@ -24,52 +23,58 @@ import { TextIcon as TileViewTextIcon } from './icons/tile/TextIcon.js';
 import { ValidationErrorIcon as TileValidationErrorIcon } from './icons/tile/ValidationErrorIcon.js';
 import { ValidationWarningIcon as TileValidationWarningIcon } from './icons/tile/ValidationWarningIcon.js';
 export var FileUploaderFileTypeIcon = function (_a) {
-    var _b, _c;
-    var size = _a.size, type = _a.type, _d = _a.view, view = _d === void 0 ? 'row' : _d;
-    var styles = useStyles(getStyles);
+    var size = _a.size, type = _a.type, _b = _a.view, view = _b === void 0 ? 'row' : _b;
+    var theme = useTheme();
     var isTileView = view === 'tile';
-    // Цвет приходит классом, а не пропом `color`: значение темы иначе уехало бы в
-    // инлайновый `style` каждой иконки. Набор типов закрытый, поэтому класс на
-    // каждый — тот же приём, что у `CloseButtonIcon`.
-    var icons = isTileView
-        ? {
-            error: TileValidationErrorIcon,
-            warning: TileValidationWarningIcon,
-            pdf: TileViewPdfIcon,
-            code: TileViewMarkupIcon,
-            picture: TileViewPictureIcon,
-            presentation: TileViewPresentationIcon,
-            table: TileViewTableIcon,
-            text: TileViewTextIcon,
-            archive: TileViewArchiveIcon,
-            folder: TileViewFolderIcon,
+    if (isTileView) {
+        switch (type) {
+            case 'error':
+                return React.createElement(TileValidationErrorIcon, { size: size, color: theme.fileUploaderFileTypeErrorIconColor });
+            case 'warning':
+                return React.createElement(TileValidationWarningIcon, { size: size, color: theme.fileUploaderFileTypeWarningIconColor });
+            case 'pdf':
+                return React.createElement(TileViewPdfIcon, { size: size, color: theme.fileUploaderFileTypePdfIconColor });
+            case 'code':
+                return React.createElement(TileViewMarkupIcon, { size: size, color: theme.fileUploaderFileTypeCodeIconColor });
+            case 'picture':
+                return React.createElement(TileViewPictureIcon, { size: size, color: theme.fileUploaderFileTypePictureIconColor });
+            case 'presentation':
+                return React.createElement(TileViewPresentationIcon, { size: size, color: theme.fileUploaderFileTypePresentationIconColor });
+            case 'table':
+                return React.createElement(TileViewTableIcon, { size: size, color: theme.fileUploaderFileTypeTableIconColor });
+            case 'text':
+                return React.createElement(TileViewTextIcon, { size: size, color: theme.fileUploaderFileTypeTextIconColor });
+            case 'archive':
+                return React.createElement(TileViewArchiveIcon, { size: size, color: theme.fileUploaderFileTypeArchiveIconColor });
+            case 'folder':
+                return React.createElement(TileViewFolderIcon, { size: size, color: theme.fileUploaderFileTypeFolderIconColor });
+            default:
+                return React.createElement(TileViewDocTextIcon, { size: size, color: theme.fileUploaderFileTypeUnknownIconColor });
         }
-        : {
-            error: RowValidationErrorIcon,
-            warning: RowValidationWarningIcon,
-            pdf: RowViewPdfIcon,
-            code: RowViewMarkupIcon,
-            picture: RowViewPictureIcon,
-            presentation: RowViewPresentationIcon,
-            table: RowViewTableIcon,
-            text: RowViewTextIcon,
-            archive: RowViewArchiveIcon,
-            folder: RowViewFolderIcon,
-        };
-    var colorClassNames = {
-        error: styles.errorIcon(),
-        warning: styles.warningIcon(),
-        pdf: styles.pdfIcon(),
-        code: styles.codeIcon(),
-        picture: styles.pictureIcon(),
-        presentation: styles.presentationIcon(),
-        table: styles.tableIcon(),
-        text: styles.textIcon(),
-        archive: styles.archiveIcon(),
-        folder: styles.folderIcon(),
-    };
-    var Icon = (_b = icons[type]) !== null && _b !== void 0 ? _b : (isTileView ? TileViewDocTextIcon : RowViewDocTextIcon);
-    var colorClassName = (_c = colorClassNames[type]) !== null && _c !== void 0 ? _c : styles.unknownIcon();
-    return React.createElement(Icon, { size: size, className: colorClassName });
+    }
+    switch (type) {
+        case 'error':
+            return React.createElement(RowValidationErrorIcon, { size: size, color: theme.fileUploaderFileTypeErrorIconColor });
+        case 'warning':
+            return React.createElement(RowValidationWarningIcon, { size: size, color: theme.fileUploaderFileTypeWarningIconColor });
+        case 'pdf':
+            return React.createElement(RowViewPdfIcon, { size: size, color: theme.fileUploaderFileTypePdfIconColor });
+        case 'code':
+            return React.createElement(RowViewMarkupIcon, { size: size, color: theme.fileUploaderFileTypeCodeIconColor });
+        case 'picture':
+            return React.createElement(RowViewPictureIcon, { size: size, color: theme.fileUploaderFileTypePictureIconColor });
+        case 'presentation':
+            return React.createElement(RowViewPresentationIcon, { size: size, color: theme.fileUploaderFileTypePresentationIconColor });
+        case 'table':
+            return React.createElement(RowViewTableIcon, { size: size, color: theme.fileUploaderFileTypeTableIconColor });
+        case 'text':
+            return React.createElement(RowViewTextIcon, { size: size, color: theme.fileUploaderFileTypeTextIconColor });
+        case 'archive':
+            return React.createElement(RowViewArchiveIcon, { size: size, color: theme.fileUploaderFileTypeArchiveIconColor });
+        case 'folder':
+            return React.createElement(RowViewFolderIcon, { size: size, color: theme.fileUploaderFileTypeFolderIconColor });
+        default:
+            return React.createElement(RowViewDocTextIcon, { size: size, color: theme.fileUploaderFileTypeUnknownIconColor });
+    }
 };
 //# sourceMappingURL=FileUploaderFileTypeIcon.js.map