@skbkontur/react-ui 0.0.0-d4e280859d → 0.0.0-d99038a7ec

package/components/Dropdown/__creevey__/Dropdown.creevey.mts

@@ -0,0 +1,184 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Dropdown', () => {
+  story('SimpleDropdown', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': { in: ['chrome2022', 'chrome2022Dark'], tests: ['MenuItem hover'] },
+      },
+    });
+
+    test('idle', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'idle');
+    });
+
+    test('clicked', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'clicked');
+    });
+
+    test('MenuItem hover', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'MenuItem hover');
+    });
+
+    test('selected item', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'selected item');
+    });
+  });
+
+  story('WithMenuItemIcon', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '.dropdown-test-container' });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+
+  story('InsideScrollableContainer', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '.dropdown-test-container' });
+
+    test('scrolled', async (context) => {
+      await context.webdriver
+        .actions()
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      const opened = await context.takeScreenshot();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('.dropdown-test-container') as HTMLElement;
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      });
+      const scrolled = await context.takeScreenshot();
+      await context.matchImages({ opened, scrolled });
+    });
+  });
+
+  story('WithCustomSelectTheme', () => {
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened top with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top with portal');
+    });
+
+    test('opened bottom with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom with portal');
+    });
+
+    test('opened top without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top without portal');
+    });
+
+    test('opened bottom without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom without portal');
+    });
+  });
+
+  story('Size', () => {
+    test('clicked all', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="open-all"]' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'ClickedAll');
+    });
+  });
+});

package/components/DropdownMenu/__creevey__/DropdownMenu.creevey.mts

@@ -0,0 +1,263 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+const outOfViewTests = (side: 'left' | 'right') => {
+  test('out of viewport', async (context) => {
+    if (side === 'left') {
+      await context.webdriver.executeScript(function () {
+        const container = window.document.querySelector('[data-tid="container"]') as HTMLElement;
+        container.scrollLeft = container.scrollWidth;
+      });
+    }
+
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid="firstMenu"]' }))
+      .perform();
+    await delay(1000);
+
+    await context.matchImage(await context.takeScreenshot(), 'out of viewport');
+  });
+
+  test('out of edge with min menu width', async (context) => {
+    if (side === 'left') {
+      await context.webdriver.executeScript(function () {
+        const container = window.document.querySelector('[data-tid="container"]') as HTMLElement;
+        container.scrollLeft = container.scrollWidth;
+      });
+    }
+
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid="secondMenu"]' }))
+      .perform();
+    await delay(1000);
+
+    await context.matchImage(await context.takeScreenshot(), 'out of viewport with min menu width');
+  });
+};
+
+const textAlignmentTests = () => {
+  test('opened', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'opened');
+  });
+};
+
+const navigateInNestedMenuItems = () => {
+  test('navigate', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+      .sendKeys(Key.DOWN)
+      .sendKeys(Key.DOWN)
+      .perform();
+    const arrowDown = await context.webdriver.takeScreenshot();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.ENTER)
+      .perform();
+    await delay(1000);
+    const enter = await context.webdriver.takeScreenshot();
+    await context.matchImages({ arrowDown, enter });
+  });
+};
+
+kind('DropdownMenu', () => {
+  story('SimpleExample', () => {
+    test('plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('clickAfterClickedOnCaption', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clickAfterClickedOnCaption');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+
+    test('enterPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ENTER)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'enterPress');
+    });
+
+    test('escapePress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ESCAPE)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'escapePress');
+    });
+  });
+
+  story('CaptionWidth', () => {
+    test('plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+  });
+
+  story('WithHeaderAndFooter', () => {
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'clicked');
+    });
+
+    test('scrolled by 100', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]') as HTMLElement;
+        scrollContainer.scrollTop += 100;
+      });
+      await delay(2000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scrolled by 100');
+    });
+
+    test('scrolled down to bottom', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]') as HTMLElement;
+        scrollContainer.scrollTop += scrollContainer.scrollHeight;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scrolled down to bottom');
+    });
+  });
+
+  story('MobileExampleWithHorizontalPadding', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: null });
+
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DropdownMenu"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver
+        .actions({ bridge: true })
+        .move({ origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }) })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+  story('MenuOutOfViewPortRight', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { flacky: { in: ['firefox2022', 'firefox2022Dark'] } },
+    });
+    outOfViewTests('right');
+  });
+  story('MenuOutOfViewPortLeft', () => {
+    outOfViewTests('left');
+  });
+
+  story('WithItemsAndIcons', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+
+  story('WithItemsAndIconsWithoutTextAlignment', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+
+  story('WithNestedMenuItems', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    navigateInNestedMenuItems();
+  });
+});

package/components/FileUploader/FileUploader.mixins/FileUploader.mixins.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject;
 import { css } from "../../../lib/theming/Emotion";
 export var fileUploaderSizeMixin = function fileUploaderSizeMixin(fontSize, lineHeight, paddingX, paddingY) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    font-size: ", ";\n    box-sizing: border-box;\n    padding: ", " ", ";\n    line-height: ", ";\n  "])), fontSize, paddingY, paddingX, lineHeight);
+  return /*#__PURE__*/css("font-size:", fontSize, ";box-sizing:border-box;padding:", paddingY, " ", paddingX, ";line-height:", lineHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:fileUploaderSizeMixin;"));
 };

package/components/FileUploader/FileUploader.mixins/FileUploader.mixins.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","fileUploaderSizeMixin","fontSize","lineHeight","paddingX","paddingY","_templateObject","_taggedTemplateLiteralLoose"],"sources":["FileUploader.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const fileUploaderSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${paddingY} ${paddingX};\n    line-height: ${lineHeight};\n  `;\n};\n"],"mappings":"oHAAA,SAASA,GAAG,QAAQ,2BAA2B;;AAE/C,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,QAAgB,EAAEC,UAAkB,EAAEC,QAAgB,EAAEC,QAAgB,EAAK;EACjH,OAAOL,GAAG,CAAAM,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACKL,QAAQ;;EAEVG,QAAQ,EAAID,QAAQ;EAChBD,UAAU;;AAE7B,CAAC","ignoreList":[]}
+{"version":3,"names":["css","fileUploaderSizeMixin","fontSize","lineHeight","paddingX","paddingY","process","env","NODE_ENV"],"sources":["FileUploader.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const fileUploaderSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${paddingY} ${paddingX};\n    line-height: ${lineHeight};\n  `;\n};\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,2BAA2B;;AAE/C,OAAO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,QAAgB,EAAEC,UAAkB,EAAEC,QAAgB,EAAEC,QAAgB,EAAK;EACjH,oBAAOL,GAAG;EACKE,QAAQ;;EAEVG,QAAQ,OAAID,QAAQ;EAChBD,UAAU,SAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA;;AAE7B,CAAC","ignoreList":[]}

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

@@ -1,5 +1,8 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+var _templateObject;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
 import { css, keyframes, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 import { fileUploaderSizeMixin } from "../FileUploader.mixins";
@@ -11,91 +14,119 @@ var styles = {
     return keyframes(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      0% {\n        box-shadow: 0 0 0 1px ", ";\n      }\n      95% {\n        box-shadow: 0 0 0 10px ", ";\n      }\n      100% {\n        box-shadow: 0 0 0 1px ", ";\n      }\n    "])), ColorFunctions.fade(t.inputBlinkColor, 0.6), ColorFunctions.fade(t.inputBlinkColor, 0.1), ColorFunctions.fade(t.inputBlinkColor, 0.0));
   },
   root: function root(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n      color: ", ";\n      background-color: ", ";\n    "])), t.fileUploaderLineHeightSmall, t.fileUploaderFontSizeSmall, t.fileUploaderTextColorDefault, t.fileUploaderBg);
+    return /*#__PURE__*/css("display:inline-block;position:relative;line-height:", t.fileUploaderLineHeightSmall, ";font-size:", t.fileUploaderFontSizeSmall, ";color:", t.fileUploaderTextColorDefault, ";background-color:", t.fileUploaderBg, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:root;"));
   },
   uploadButton: function uploadButton(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      display: inline-flex;\n      align-items: center;\n      justify-content: space-between;\n      border: ", " ", " ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      outline: none;\n      cursor: pointer;\n      padding: ", " ", ";\n      transition:\n        background-color ", " ", ",\n        border-color ", " ", ";\n      background-color: ", ";\n    "])), t.fileUploaderBorderWidth, t.fileUploaderBorderStyle, t.fileUploaderBorderColor, t.fileUploaderBorderRadius, t.fileUploaderPaddingYSmall, t.fileUploaderPaddingXSmall, t.transitionDuration, t.transitionTimingFunction, t.transitionDuration, t.transitionTimingFunction, t.fileUploaderUploadButtonBg);
+    return /*#__PURE__*/css("width:100%;display:inline-flex;align-items:center;justify-content:space-between;border:", t.fileUploaderBorderWidth, " ", t.fileUploaderBorderStyle, " ", t.fileUploaderBorderColor, ";box-sizing:border-box;border-radius:", t.fileUploaderBorderRadius, ";outline:none;cursor:pointer;padding:", t.fileUploaderPaddingYSmall, " ", t.fileUploaderPaddingXSmall, ";transition:background-color ", t.transitionDuration, " ", t.transitionTimingFunction, ",border-color ", t.transitionDuration, " ", t.transitionTimingFunction, ";background-color:", t.fileUploaderUploadButtonBg, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:uploadButton;"));
   },
   uploadButtonFocus: function uploadButtonFocus(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorFocus, t.fileUploaderBorderColorFocus);
+    return /*#__PURE__*/css("border:", t.fileUploaderBorderWidth, " solid ", t.fileUploaderBorderColorFocus, ";box-shadow:0px 0px 0px 1px ", t.fileUploaderBorderColorFocus, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:uploadButtonFocus;"));
   },
   dragOver: function dragOver(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      border: 1px solid ", ";\n      border-radius: ", ";\n      box-shadow: ", ";\n    "])), t.fileUploaderDragOverBorderColor, t.fileUploaderBorderRadius, t.fileUploaderDragOverShadow);
+    return /*#__PURE__*/css("border:1px solid ", t.fileUploaderDragOverBorderColor, ";border-radius:", t.fileUploaderBorderRadius, ";box-shadow:", t.fileUploaderDragOverShadow, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:dragOver;"));
   },
   windowDragOver: function windowDragOver(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      animation: ", " 1.5s infinite;\n    "])), t.fileUploaderBorderRadius, styles.calcPulse(t));
+    return /*#__PURE__*/css("border-radius:", t.fileUploaderBorderRadius, ";animation:", styles.calcPulse(t), " 1.5s infinite;" + (process.env.NODE_ENV === "production" ? "" : ";label:windowDragOver;"));
   },
   content: function content() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: block;\n      width: 100%;\n      height: 100%;\n\n      overflow: hidden;\n      text-overflow: ellipsis;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "4zeo8e",
+      styles: "display:block;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis"
+    } : {
+      name: "hd9bs-content",
+      styles: "display:block;width:100%;height:100%;overflow:hidden;text-overflow:ellipsis;label:content;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   contentWithFiles: function contentWithFiles() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      align-items: center;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "s5xdrg",
+      styles: "display:flex;align-items:center"
+    } : {
+      name: "1hy2udf-contentWithFiles",
+      styles: "display:flex;align-items:center;label:contentWithFiles;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   contentInnerSmall: function contentInnerSmall(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: calc(100% - ", " - ", ");\n    "])), t.inputIconSizeSmall, t.fileUploaderIconGapSmall);
+    return /*#__PURE__*/css("width:calc(100% - ", t.inputIconSizeSmall, " - ", t.fileUploaderIconGapSmall, ");" + (process.env.NODE_ENV === "production" ? "" : ";label:contentInnerSmall;"));
   },
   contentInnerMedium: function contentInnerMedium(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      width: calc(100% - ", " - ", ");\n    "])), t.inputIconSizeMedium, t.fileUploaderIconGapMedium);
+    return /*#__PURE__*/css("width:calc(100% - ", t.inputIconSizeMedium, " - ", t.fileUploaderIconGapMedium, ");" + (process.env.NODE_ENV === "production" ? "" : ";label:contentInnerMedium;"));
   },
   contentInnerLarge: function contentInnerLarge(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: calc(100% - ", " - ", ");\n    "])), t.inputIconSizeLarge, t.fileUploaderIconGapLarge);
+    return /*#__PURE__*/css("width:calc(100% - ", t.inputIconSizeLarge, " - ", t.fileUploaderIconGapLarge, ");" + (process.env.NODE_ENV === "production" ? "" : ";label:contentInnerLarge;"));
   },
   visuallyHidden: function visuallyHidden() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      border: 0;\n      padding: 0;\n      white-space: nowrap;\n      clip-path: inset(100%);\n      clip: rect(0 0 0 0);\n      overflow: hidden;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "4lhcwd",
+      styles: "position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden"
+    } : {
+      name: "166ut73-visuallyHidden",
+      styles: "position:absolute;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden;label:visuallyHidden;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   afterLinkText: function afterLinkText(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      display: inline;\n      color: ", ";\n    "])), t.fileUploaderAfterLinkColor);
+    return /*#__PURE__*/css("display:inline;color:", t.fileUploaderAfterLinkColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:afterLinkText;"));
   },
   afterLinkText_HasFiles: function afterLinkText_HasFiles(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      justify-content: space-between;\n      flex: 1 1 auto;\n      color: ", ";\n    "])), t.fileUploaderAfterLinkColor);
+    return /*#__PURE__*/css("display:flex;justify-content:space-between;flex:1 1 auto;color:", t.fileUploaderAfterLinkColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:afterLinkText_HasFiles;"));
   },
   warning: function warning(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorWarning, t.fileUploaderBorderColorWarning);
+    return /*#__PURE__*/css("border:", t.fileUploaderBorderWidth, " solid ", t.fileUploaderBorderColorWarning, ";box-shadow:0px 0px 0px 1px ", t.fileUploaderBorderColorWarning, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:warning;"));
   },
   error: function error(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      border: ", " solid ", ";\n      box-shadow: 0px 0px 0px 1px ", ";\n    "])), t.fileUploaderBorderWidth, t.fileUploaderBorderColorError, t.fileUploaderBorderColorError);
+    return /*#__PURE__*/css("border:", t.fileUploaderBorderWidth, " solid ", t.fileUploaderBorderColorError, ";box-shadow:0px 0px 0px 1px ", t.fileUploaderBorderColorError, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:error;"));
   },
   hovered: function hovered(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-color: ", ";\n    "])), t.fileUploaderHoveredBg, t.fileUploaderHoveredBorderColor);
+    return /*#__PURE__*/css("background:", t.fileUploaderHoveredBg, ";border-color:", t.fileUploaderHoveredBorderColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:hovered;"));
   },
   linkHovered: function linkHovered(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      text-decoration: ", ";\n    "])), t.fileUploaderLinkHoverTextDecoration);
+    return /*#__PURE__*/css("text-decoration:", t.fileUploaderLinkHoverTextDecoration, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:linkHovered;"));
   },
   disabled: function disabled(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n      background: ", ";\n      border: ", ";\n      color: ", ";\n      box-shadow: none;\n      background-clip: ", ";\n\n      .", " {\n        color: ", ";\n      }\n    "])), t.fileUploaderDisabledBg, t.fileUploaderDisabledBorder, t.fileUploaderDisabledTextColor, t.fileUploaderDisabledBgClip, globalClasses.afterLinkText, t.fileUploaderDisabledTextColor);
+    return /*#__PURE__*/css("cursor:default;background:", t.fileUploaderDisabledBg, ";border:", t.fileUploaderDisabledBorder, ";color:", t.fileUploaderDisabledTextColor, ";box-shadow:none;background-clip:", t.fileUploaderDisabledBgClip, ";.", globalClasses.afterLinkText, "{color:", t.fileUploaderDisabledTextColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:disabled;"));
   },
   icon: function icon(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      color: ", ";\n      text-align: right;\n    "])), t.fileUploaderIconColor);
+    return /*#__PURE__*/css("display:inline-block;position:absolute;color:", t.fileUploaderIconColor, ";text-align:right;" + (process.env.NODE_ENV === "production" ? "" : ";label:icon;"));
   },
   iconDisabled: function iconDisabled(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.fileUploaderDisabledIconColor);
+    return /*#__PURE__*/css("color:", t.fileUploaderDisabledIconColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:iconDisabled;"));
   },
   link: function link(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      outline: none;\n      text-decoration: none;\n      color: ", ";\n    "])), t.fileUploaderLinkColor);
+    return /*#__PURE__*/css("outline:none;text-decoration:none;color:", t.fileUploaderLinkColor, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:link;"));
   },
   linkDisabled: function linkDisabled(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      &:hover {\n        text-decoration: none;\n      }\n    "])), t.fileUploaderDisabledLinkColor);
+    return /*#__PURE__*/css("color:", t.fileUploaderDisabledLinkColor, ";&:hover{text-decoration:none;}" + (process.env.NODE_ENV === "production" ? "" : ";label:linkDisabled;"));
   },
   singleFile: function singleFile() {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n    "])));
+    return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "1d3w5wq",
+      styles: "width:100%"
+    } : {
+      name: "9wow8w-singleFile",
+      styles: "width:100%;label:singleFile;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    });
   },
   sizeSmall: function sizeSmall(t) {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), fileUploaderSizeMixin(t.fileUploaderFontSizeSmall, t.fileUploaderLineHeightSmall, t.fileUploaderPaddingXSmall, t.fileUploaderPaddingYSmall));
+    return /*#__PURE__*/css(fileUploaderSizeMixin(t.fileUploaderFontSizeSmall, t.fileUploaderLineHeightSmall, t.fileUploaderPaddingXSmall, t.fileUploaderPaddingYSmall), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:sizeSmall;"));
   },
   sizeMedium: function sizeMedium(t) {
-    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), fileUploaderSizeMixin(t.fileUploaderFontSizeMedium, t.fileUploaderLineHeightMedium, t.fileUploaderPaddingXMedium, t.fileUploaderPaddingYMedium));
+    return /*#__PURE__*/css(fileUploaderSizeMixin(t.fileUploaderFontSizeMedium, t.fileUploaderLineHeightMedium, t.fileUploaderPaddingXMedium, t.fileUploaderPaddingYMedium), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:sizeMedium;"));
   },
   sizeLarge: function sizeLarge(t) {
-    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), fileUploaderSizeMixin(t.fileUploaderFontSizeLarge, t.fileUploaderLineHeightLarge, t.fileUploaderPaddingXLarge, t.fileUploaderPaddingYLarge));
+    return /*#__PURE__*/css(fileUploaderSizeMixin(t.fileUploaderFontSizeLarge, t.fileUploaderLineHeightLarge, t.fileUploaderPaddingXLarge, t.fileUploaderPaddingYLarge), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:sizeLarge;"));
   },
   iconSmall: function iconSmall(t) {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      width: ", ";\n      bottom: ", ";\n      right: ", ";\n    "])), t.fileUploaderFontSizeSmall, t.fileUploaderLineHeightSmall, t.inputIconSizeSmall, t.fileUploaderPaddingYSmall, t.fileUploaderPaddingXSmall);
+    return /*#__PURE__*/css("font-size:", t.fileUploaderFontSizeSmall, ";line-height:", t.fileUploaderLineHeightSmall, ";width:", t.inputIconSizeSmall, ";bottom:", t.fileUploaderPaddingYSmall, ";right:", t.fileUploaderPaddingXSmall, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:iconSmall;"));
   },
   iconMedium: function iconMedium(t) {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      width: ", ";\n      bottom: ", ";\n      right: ", ";\n    "])), t.fileUploaderFontSizeMedium, t.fileUploaderLineHeightMedium, t.inputIconSizeMedium, t.fileUploaderPaddingYMedium, t.fileUploaderPaddingXMedium);
+    return /*#__PURE__*/css("font-size:", t.fileUploaderFontSizeMedium, ";line-height:", t.fileUploaderLineHeightMedium, ";width:", t.inputIconSizeMedium, ";bottom:", t.fileUploaderPaddingYMedium, ";right:", t.fileUploaderPaddingXMedium, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:iconMedium;"));
   },
   iconLarge: function iconLarge(t) {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      width: ", ";\n      bottom: ", ";\n      right: ", ";\n    "])), t.fileUploaderFontSizeLarge, t.fileUploaderLineHeightLarge, t.inputIconSizeLarge, t.fileUploaderPaddingYLarge, t.fileUploaderPaddingXLarge);
+    return /*#__PURE__*/css("font-size:", t.fileUploaderFontSizeLarge, ";line-height:", t.fileUploaderLineHeightLarge, ";width:", t.inputIconSizeLarge, ";bottom:", t.fileUploaderPaddingYLarge, ";right:", t.fileUploaderPaddingXLarge, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:iconLarge;"));
   }
 };
 export var jsStyles = memoizeStyle(styles);