@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTEmojiPicker/styles.module.scss

@@ -0,0 +1,140 @@
+@use '../../scss/variables/colors.module.scss' as *;
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+$icon-size: 40px;
+
+.container {
+  border: 0;
+  padding: 0;
+  position: absolute;
+  transition: visibility 0.5s, opacity 0.15s ease-in-out;
+  z-index: 9999;
+
+  @media #{$mobile} {
+    left: 0;
+    top: 110px;
+  }
+}
+
+.listContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+
+  > :first-child {
+    box-sizing: border-box;
+    padding: 8px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 7px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    min-height: 20px;
+    width: 9px;
+  }
+
+  &:hover ::-webkit-scrollbar-thumb {
+    background-color: $gray-3;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: $gray;
+  }
+
+  @media #{$mobile} {
+    width: 100vw;
+  }
+}
+
+.hiddenPicker {
+  opacity: 0;
+  visibility: hidden;
+
+  .emoji {
+    pointer-events: none;
+  }
+}
+
+.buttonContainer {
+  position: relative;
+
+  @media #{$mobile} {
+    position: unset;
+  }
+}
+
+
+@font-face {
+  font-family: NotoColorEmojiLimited;
+  src: url('https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf');
+  unicode-range: U+1F1E6-1F1FF;
+}
+
+.emoji {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont,
+  'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol';
+  justify-content: center;
+  user-select: none;
+}
+
+.activeIcon {
+  box-sizing: border-box;
+  height: $icon-size;
+  padding: 8px;
+  transition: background-color 200ms linear;
+  width: $icon-size;
+}
+
+.groups {
+  display: flex;
+}
+
+.groupItem {
+  align-items: center;
+  display: flex;
+  height: $icon-size;
+  justify-content: center;
+  width: $icon-size;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.bottomRight {
+  @media #{$desktop-tablet} {
+    left: 0 !important;
+    top: 100% !important;
+  }
+}
+
+.bottomLeft {
+  @media #{$desktop-tablet} {
+    left: auto !important;
+    right: 0 !important;
+    top: 100% !important;
+  }
+}
+
+.topRight {
+  @media #{$desktop-tablet} {
+    bottom: 0 !important;
+    left: 100% !important;
+  }
+}
+
+.topLeft {
+  @media #{$desktop-tablet} {
+    bottom: 0 !important;
+    left: auto !important;
+    right: 100% !important;
+  }
+}
+

package/dist/esm/components/UTEmojiPicker/theme.js

@@ -0,0 +1,46 @@
+import Colors from '../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  var _theme$UTEmojiPicker, _theme$UTEmojiPicker2, _theme$UTEmojiPicker3, _theme$UTEmojiPicker4, _theme$UTEmojiPicker5, _theme$UTEmojiPicker6, _theme$UTEmojiPicker7, _theme$UTEmojiPicker8, _theme$UTEmojiPicker9, _theme$UTEmojiPicker0, _theme$UTEmojiPicker1, _theme$UTEmojiPicker10, _theme$UTEmojiPicker11, _theme$UTEmojiPicker12, _theme$UTEmojiPicker13, _theme$UTEmojiPicker14, _theme$UTEmojiPicker15, _theme$UTEmojiPicker16, _theme$UTEmojiPicker17, _theme$UTEmojiPicker18, _theme$UTEmojiPicker19, _theme$UTEmojiPicker20, _theme$UTEmojiPicker21;
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker === void 0 || (_theme$UTEmojiPicker = _theme$UTEmojiPicker.container) === null || _theme$UTEmojiPicker === void 0 ? void 0 : _theme$UTEmojiPicker.backgroundColor) || Colors.white,
+      borderRadius: theme === null || theme === void 0 || (_theme$UTEmojiPicker2 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker2 === void 0 || (_theme$UTEmojiPicker2 = _theme$UTEmojiPicker2.container) === null || _theme$UTEmojiPicker2 === void 0 ? void 0 : _theme$UTEmojiPicker2.borderRadius,
+      bottom: theme === null || theme === void 0 || (_theme$UTEmojiPicker3 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker3 === void 0 || (_theme$UTEmojiPicker3 = _theme$UTEmojiPicker3.container) === null || _theme$UTEmojiPicker3 === void 0 ? void 0 : _theme$UTEmojiPicker3.bottom,
+      boxShadow: (theme === null || theme === void 0 || (_theme$UTEmojiPicker4 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker4 === void 0 || (_theme$UTEmojiPicker4 = _theme$UTEmojiPicker4.container) === null || _theme$UTEmojiPicker4 === void 0 ? void 0 : _theme$UTEmojiPicker4.boxShadow) || '0px 3px 6px #E4E6EA',
+      left: theme === null || theme === void 0 || (_theme$UTEmojiPicker5 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker5 === void 0 || (_theme$UTEmojiPicker5 = _theme$UTEmojiPicker5.container) === null || _theme$UTEmojiPicker5 === void 0 ? void 0 : _theme$UTEmojiPicker5.left,
+      right: theme === null || theme === void 0 || (_theme$UTEmojiPicker6 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker6 === void 0 || (_theme$UTEmojiPicker6 = _theme$UTEmojiPicker6.container) === null || _theme$UTEmojiPicker6 === void 0 ? void 0 : _theme$UTEmojiPicker6.right,
+      top: theme === null || theme === void 0 || (_theme$UTEmojiPicker7 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker7 === void 0 || (_theme$UTEmojiPicker7 = _theme$UTEmojiPicker7.container) === null || _theme$UTEmojiPicker7 === void 0 ? void 0 : _theme$UTEmojiPicker7.top
+    },
+    listContainer: {
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker8 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker8 === void 0 || (_theme$UTEmojiPicker8 = _theme$UTEmojiPicker8.listContainer) === null || _theme$UTEmojiPicker8 === void 0 ? void 0 : _theme$UTEmojiPicker8.height) || 216,
+      width: (theme === null || theme === void 0 || (_theme$UTEmojiPicker9 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker9 === void 0 || (_theme$UTEmojiPicker9 = _theme$UTEmojiPicker9.listContainer) === null || _theme$UTEmojiPicker9 === void 0 ? void 0 : _theme$UTEmojiPicker9.width) || 336
+    },
+    emoji: {
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTEmojiPicker0 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker0 === void 0 || (_theme$UTEmojiPicker0 = _theme$UTEmojiPicker0.emoji) === null || _theme$UTEmojiPicker0 === void 0 ? void 0 : _theme$UTEmojiPicker0.borderRadius) || 4,
+      fontSize: (theme === null || theme === void 0 || (_theme$UTEmojiPicker1 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker1 === void 0 || (_theme$UTEmojiPicker1 = _theme$UTEmojiPicker1.emoji) === null || _theme$UTEmojiPicker1 === void 0 ? void 0 : _theme$UTEmojiPicker1.fontSize) || 20,
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker10 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker10 === void 0 || (_theme$UTEmojiPicker10 = _theme$UTEmojiPicker10.emoji) === null || _theme$UTEmojiPicker10 === void 0 ? void 0 : _theme$UTEmojiPicker10.height) || 32,
+      margin: (theme === null || theme === void 0 || (_theme$UTEmojiPicker11 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker11 === void 0 || (_theme$UTEmojiPicker11 = _theme$UTEmojiPicker11.emoji) === null || _theme$UTEmojiPicker11 === void 0 ? void 0 : _theme$UTEmojiPicker11.margin) || 4,
+      width: (theme === null || theme === void 0 || (_theme$UTEmojiPicker12 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker12 === void 0 || (_theme$UTEmojiPicker12 = _theme$UTEmojiPicker12.emoji) === null || _theme$UTEmojiPicker12 === void 0 ? void 0 : _theme$UTEmojiPicker12.width) || 32,
+      '&:hover': {
+        backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker13 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker13 === void 0 || (_theme$UTEmojiPicker13 = _theme$UTEmojiPicker13.emoji) === null || _theme$UTEmojiPicker13 === void 0 || (_theme$UTEmojiPicker13 = _theme$UTEmojiPicker13.hover) === null || _theme$UTEmojiPicker13 === void 0 ? void 0 : _theme$UTEmojiPicker13.backgroundColor) || '#E9F0FD'
+      }
+    },
+    groupItem: {
+      height: (theme === null || theme === void 0 || (_theme$UTEmojiPicker14 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker14 === void 0 || (_theme$UTEmojiPicker14 = _theme$UTEmojiPicker14.groupItem) === null || _theme$UTEmojiPicker14 === void 0 ? void 0 : _theme$UTEmojiPicker14.height) || 40,
+      fill: (theme === null || theme === void 0 || (_theme$UTEmojiPicker15 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker15 === void 0 || (_theme$UTEmojiPicker15 = _theme$UTEmojiPicker15.groupItem) === null || _theme$UTEmojiPicker15 === void 0 ? void 0 : _theme$UTEmojiPicker15.color) || '#677489',
+      stroke: (theme === null || theme === void 0 || (_theme$UTEmojiPicker16 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker16 === void 0 || (_theme$UTEmojiPicker16 = _theme$UTEmojiPicker16.groupItem) === null || _theme$UTEmojiPicker16 === void 0 ? void 0 : _theme$UTEmojiPicker16.color) || '#677489'
+    },
+    activeIcon: {
+      backgroundColor: (theme === null || theme === void 0 || (_theme$UTEmojiPicker17 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker17 === void 0 || (_theme$UTEmojiPicker17 = _theme$UTEmojiPicker17.groupItem) === null || _theme$UTEmojiPicker17 === void 0 || (_theme$UTEmojiPicker17 = _theme$UTEmojiPicker17.active) === null || _theme$UTEmojiPicker17 === void 0 ? void 0 : _theme$UTEmojiPicker17.backgroundColor) || '#E9F0FD',
+      borderRadius: (theme === null || theme === void 0 || (_theme$UTEmojiPicker18 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker18 === void 0 || (_theme$UTEmojiPicker18 = _theme$UTEmojiPicker18.groupItem) === null || _theme$UTEmojiPicker18 === void 0 || (_theme$UTEmojiPicker18 = _theme$UTEmojiPicker18.active) === null || _theme$UTEmojiPicker18 === void 0 ? void 0 : _theme$UTEmojiPicker18.borderRadius) || 5,
+      stroke: (theme === null || theme === void 0 || (_theme$UTEmojiPicker19 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker19 === void 0 || (_theme$UTEmojiPicker19 = _theme$UTEmojiPicker19.groupItem) === null || _theme$UTEmojiPicker19 === void 0 || (_theme$UTEmojiPicker19 = _theme$UTEmojiPicker19.active) === null || _theme$UTEmojiPicker19 === void 0 ? void 0 : _theme$UTEmojiPicker19.color) || '#2b70fb'
+    },
+    groups: {
+      borderBottom: (theme === null || theme === void 0 || (_theme$UTEmojiPicker20 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker20 === void 0 || (_theme$UTEmojiPicker20 = _theme$UTEmojiPicker20.groups) === null || _theme$UTEmojiPicker20 === void 0 ? void 0 : _theme$UTEmojiPicker20.borderBottom) || '1px solid #E4E6EA',
+      padding: (theme === null || theme === void 0 || (_theme$UTEmojiPicker21 = theme.UTEmojiPicker) === null || _theme$UTEmojiPicker21 === void 0 || (_theme$UTEmojiPicker21 = _theme$UTEmojiPicker21.groups) === null || _theme$UTEmojiPicker21 === void 0 ? void 0 : _theme$UTEmojiPicker21.padding) || 8
+    }
+  };
+};

package/dist/esm/components/UTEmojiPicker/utils.js

@@ -0,0 +1,28 @@
+import emojilib from 'emojilib';
+import { DEFAULT_BUTTON_EMOJI_INDEX, DEFAULT_EXCLUDED_EMOJIS, GROUPS } from './constants';
+const getKey = emoji => emoji[1][0];
+export const getEmoji = emoji => emoji[0];
+const findEmojiIndex = (emojis, key) => emojis.findIndex(emoji => key === getKey(emoji));
+const getGroups = emojis => GROUPS.map(groupDefinition => ({
+  key: groupDefinition.key,
+  Icon: groupDefinition.Icon,
+  emojis: groupDefinition.ranges.flatMap(range => {
+    const subgroupStart = findEmojiIndex(emojis, range[0]);
+    const subgroupEnd = range.length > 1 && findEmojiIndex(emojis, range[1]);
+    return subgroupEnd ? emojis.slice(subgroupStart, subgroupEnd) : [emojis[subgroupStart]];
+  })
+}));
+export const getEmojis = function (groupsModifier) {
+  let excludedEmojis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const legacyGroups = getGroups(Object.entries(emojilib)).map(group => ({
+    ...group,
+    emojis: group.emojis.filter(emoji => ![...DEFAULT_EXCLUDED_EMOJIS, ...excludedEmojis].includes(getKey(emoji)))
+  }));
+  const filteredEmojisArray = [].concat(...legacyGroups.map(group => group.emojis));
+  const groups = groupsModifier ? groupsModifier(legacyGroups) : legacyGroups;
+  return {
+    emojis: filteredEmojisArray,
+    groups,
+    buttonEmoji: getEmoji(filteredEmojisArray[DEFAULT_BUTTON_EMOJI_INDEX])
+  };
+};

package/dist/esm/components/UTExternalLink/constants.js

@@ -0,0 +1,9 @@
+export const DEFAULT_PROPS = {
+  colorTheme: 'secondary'
+};
+export const COLORS_MAPPER = {
+  primary: 'accent',
+  secondary: 'neutral',
+  error: 'error',
+  negative: 'negative'
+};

package/dist/esm/components/UTExternalLink/index.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { objectOf, shape, string } from 'prop-types';
+import WithTheme from '../WithTheme';
+import { retrieveStyle } from './theme';
+const UTExternalLink = _ref => {
+  let {
+    children,
+    className,
+    classes,
+    dataTestId,
+    openProps,
+    url
+  } = _ref;
+  return /*#__PURE__*/React.createElement("a", {
+    className: "".concat(classes.root, " ").concat(className),
+    "data-testid": dataTestId,
+    href: url,
+    onClick: openProps && (event => {
+      event.preventDefault();
+      const {
+        openUrl,
+        targetName,
+        options,
+        replace
+      } = openProps;
+      const win = window.open(openUrl || url, targetName || '_blank', options, replace);
+      win.opener = null;
+      win.location = openUrl || url;
+    }),
+    rel: "noopener noreferrer",
+    target: "_blank"
+  }, children);
+};
+UTExternalLink.propTypes = {
+  className: string,
+  classes: objectOf(string),
+  dataTestId: string,
+  openProps: shape({
+    openUrl: string,
+    targetName: string,
+    options: string,
+    replace: string
+  }),
+  url: string.isRequired
+};
+export default WithTheme(retrieveStyle)(UTExternalLink);

package/dist/esm/components/UTExternalLink/theme.js

@@ -0,0 +1,19 @@
+import { withImportant } from '../../utils/classesUtils';
+import { COLORS_MAPPER, DEFAULT_PROPS } from './constants';
+export const variantsColorTheme = (colorTheme, theme) => {
+  var _theme$Palette$action;
+  const actionColorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
+  const actionTheme = ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[actionColorName]) || theme.Palette[actionColorName];
+  return actionTheme['05'];
+};
+export const retrieveStyle = _ref => {
+  let {
+    colorTheme,
+    theme
+  } = _ref;
+  return {
+    root: {
+      color: withImportant(variantsColorTheme(colorTheme, theme))
+    }
+  };
+};

package/dist/esm/components/UTFieldLabel/constants.js

@@ -0,0 +1 @@
+export const REQUIRED_LABEL = '*';

package/dist/esm/components/UTFieldLabel/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import isArray from 'lodash/isArray';
+import { arrayOf, bool, object, string } from 'prop-types';
+import UTLabel from '../UTLabel';
+import UTButton from '../UTButton';
+import UTTooltip from '../UTTooltip';
+import { TITLE_VARIANTS } from '../../constants/inputs';
+import UTIcon from '../UTIcon';
+import { REQUIRED_LABEL } from './constants';
+import styles from './styles.module.scss';
+const UTFieldLabel = _ref => {
+  let {
+    actions,
+    children,
+    className,
+    dataTestId,
+    highlighted,
+    icon,
+    readOnly,
+    required,
+    size = 'large',
+    weight
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(!isEmpty(actions) ? styles.labelWithActions : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.label, " ").concat(className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.labelContent
+  }, icon && /*#__PURE__*/React.createElement(UTIcon, {
+    name: icon
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: readOnly ? 'gray' : highlighted ? 'accent' : 'dark',
+    dataTestId: dataTestId,
+    variant: TITLE_VARIANTS[size],
+    withMarkdown: true
+  }, children)), required && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "error",
+    shade: "04",
+    variant: TITLE_VARIANTS[size],
+    weight: weight
+  }, REQUIRED_LABEL)), !isEmpty(actions) && isArray(actions) && /*#__PURE__*/React.createElement("div", {
+    className: styles.actionsContainer
+  }, actions.map(action => {
+    var _action$title, _action$tooltipProps;
+    return /*#__PURE__*/React.createElement(UTTooltip, {
+      arrow: false,
+      key: "".concat((_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.Icon),
+      tippyProps: {
+        appendTo: () => document.body,
+        interactive: false
+      },
+      content: action.tooltip,
+      stringContentProps: action === null || action === void 0 || (_action$tooltipProps = action.tooltipProps) === null || _action$tooltipProps === void 0 ? void 0 : _action$tooltipProps.stringContentProps
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UTButton, action, action.title)));
+  })));
+};
+UTFieldLabel.propTypes = {
+  actions: arrayOf(object),
+  className: string,
+  dataTestId: string,
+  highlighted: bool,
+  icon: string,
+  readOnly: bool,
+  required: bool,
+  size: string,
+  weight: string
+};
+export default UTFieldLabel;

package/dist/esm/components/UTFieldLabel/styles.module.scss

@@ -0,0 +1,25 @@
+.labelWithActions {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: space-between;
+  width: 100%
+}
+
+.label {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 4px;
+}
+
+.actionsContainer {
+  display: flex;
+  gap: 8px;
+}
+
+.labelContent {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}

package/dist/esm/components/UTFileInput/assets/uploadIcon.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 414.165 414.165" style="enable-background:new 0 0 414.165 414.165;" xml:space="preserve" width="512px" height="512px">
+<g>
+	<g>
+		<g>
+			<polygon points="185.749,81.664 185.749,286.165 228.416,286.165 228.416,81.664 298.667,151.915 328.832,121.749 207.083,0      85.333,121.749 115.499,151.915    " fill="#4d97fa"/>
+			<path d="M335.083,328.832v42.667h-256v-42.667H36.416v42.667c0,23.509,19.115,42.667,42.667,42.667h256     c23.552,0,42.667-19.157,42.667-42.667v-42.667H335.083z" fill="#4d97fa"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/dist/esm/components/UTFileInput/constants.js

@@ -0,0 +1,2 @@
+export const SELECT_FILE = 'Seleccionar archivo';
+export const UPLOADING = 'Subiendo...';

package/dist/esm/components/UTFileInput/index.js

@@ -0,0 +1,8 @@
+import React, { PureComponent } from 'react';
+import UTFileInput from './layout';
+class UTFileInputContainer extends PureComponent {
+  render() {
+    return /*#__PURE__*/React.createElement(UTFileInput, this.props);
+  }
+}
+export default UTFileInputContainer;

package/dist/esm/components/UTFileInput/layout.js

@@ -0,0 +1,116 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { PureComponent, Fragment } from 'react';
+import { string, func, bool, objectOf } from 'prop-types';
+import UTLabel from '../UTLabel';
+import styles from './styles.module.scss';
+var uploadIcon = function uploadIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("g", {
+    fill: "#4d97fa"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M185.749 81.664v204.501h42.667V81.664l70.251 70.251 30.165-30.166L207.083 0 85.333 121.749l30.166 30.166zM335.083 328.832v42.667h-256v-42.667H36.416v42.667c0 23.509 19.115 42.667 42.667 42.667h256c23.552 0 42.667-19.157 42.667-42.667v-42.667h-42.667z"
+  })));
+};
+uploadIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 414.165 414.165",
+  style: {
+    enableBackground: "new 0 0 414.165 414.165"
+  },
+  xmlSpace: "preserve",
+  width: "512",
+  height: "512"
+};
+import { UPLOADING, SELECT_FILE } from './constants';
+class UTFileInput extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleDragLeave", () => this.setState({
+      hasDrag: false
+    }));
+    _defineProperty(this, "handleDragOver", target => target && this.setState({
+      hasDrag: true
+    }));
+    _defineProperty(this, "handleOnDrop", () => this.setState({
+      hasDrag: false
+    }));
+    this.state = {
+      hasDrag: false
+    };
+  }
+  render() {
+    const {
+      classes,
+      containerClassname,
+      dataTestId,
+      disabled,
+      error,
+      errorClassname,
+      errorText,
+      fileType,
+      icon: Icon,
+      inputClassname,
+      label,
+      loading,
+      loadingTextClassname,
+      name,
+      onChange,
+      uploadingText
+    } = this.props;
+    const UploadImage = uploadIcon;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "\n            ".concat(styles.inputContainer, "\n            ").concat(this.state.hasDrag && styles.inputContainerDrag, "\n            ").concat(loading && styles.inputContainerLoading, "\n            ").concat(classes.container, "\n            ").concat(containerClassname, "\n          "),
+      onDragLeave: this.handleDragLeave,
+      onDragOver: this.handleDragOver,
+      onDrop: this.handleOnDrop
+    }, loading ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "gray",
+      className: "".concat(styles.loadingLabel, " ").concat(loadingTextClassname)
+    }, uploadingText), /*#__PURE__*/React.createElement("div", {
+      className: styles.loading
+    })) : /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.insideContainer, " ").concat(disabled ? styles.disabled : '')
+    }, Icon || /*#__PURE__*/React.createElement(UploadImage, {
+      className: "".concat(styles.icon, " ").concat(classes.icon)
+    }), /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "small",
+      className: "".concat(styles.label, " ").concat(classes.fileInputLabel)
+    }, label)), /*#__PURE__*/React.createElement("input", {
+      accept: fileType,
+      className: "".concat(styles.input, " ").concat(inputClassname),
+      "data-testid": dataTestId,
+      disabled: disabled,
+      name: name,
+      onChange: onChange,
+      type: "file"
+    })), error && /*#__PURE__*/React.createElement(UTLabel, {
+      className: errorClassname,
+      colorTheme: "error",
+      variant: "small"
+    }, errorText));
+  }
+}
+UTFileInput.defaultProps = {
+  label: SELECT_FILE,
+  uploadingText: UPLOADING
+};
+UTFileInput.propTypes = {
+  classes: objectOf(string),
+  containerClassname: string,
+  dataTestId: string,
+  disabled: bool,
+  error: bool,
+  errorClassname: string,
+  errorText: string,
+  fileType: string,
+  icon: string,
+  inputClassname: string,
+  label: string,
+  loading: bool,
+  loadingTextClassname: string,
+  name: string,
+  onChange: func.isRequired,
+  uploadingText: string
+};
+export default UTFileInput;

package/dist/esm/components/UTFileInput/styles.module.scss

@@ -0,0 +1,113 @@
+@use '../../scss/variables/colors.module.scss' as *;
+
+.input {
+  cursor: pointer;
+  display: block;
+  filter: alpha(opacity=0);
+  min-height: 100%;
+  min-width: 100%;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.disabled {
+  opacity: 0.5;
+}
+
+.inputContainer {
+  background-color: $white;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px -1px $card-shadow-1, 0 4px 5px 0 $card-shadow-2, 0 1px 10px 0 $card-shadow-3;
+  cursor: pointer;
+  margin-bottom: 4px;
+  max-height: 48px;
+  max-width: 180px;
+  min-width: 180px;
+  overflow: hidden;
+  padding-top: 5px;
+  position: relative;
+  text-align: center;
+  transition: background-color, box-shadow 0.2s ease;
+
+  &:active {
+    background-color: $button-pressed-gray;
+    box-shadow: none;
+  }
+}
+
+.inputContainerLoading {
+  border: solid $gray;
+}
+
+.inputContainerDrag {
+  border: solid $file-input-drag-glow;
+  box-shadow: 0 0 10px $file-input-drag-glow;
+  outline: none;
+}
+
+.icon {
+  height: 20px;
+  padding: 2px 0 5px 3px;
+  width: 30px;
+}
+
+@keyframes move-bg {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(46px);
+  }
+}
+
+.loading {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: move-bg;
+  animation-timing-function: linear;
+  background: repeating-linear-gradient(
+    -55deg,
+    $file-input-loading-first 1px,
+    $file-input-loading-second 2px,
+    $file-input-loading-second 11px,
+    $file-input-loading-first 12px,
+    $file-input-loading-first 20px
+  );
+  bottom: 0;
+  left: -46px;
+  opacity: 0.5;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.loadingLabel {
+  cursor: pointer;
+  padding-bottom: 10px;
+  padding-top: 5px;
+  position: relative;
+  z-index: 5;
+}
+
+.insideContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.label {
+  cursor: pointer;
+  padding: 5px 3px 10px;
+}
+
+.error {
+  text-align: start;
+}