diginet-core-ui 1.3.24 → 1.3.29

package/components/accordion/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -8,10 +6,17 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
 import Divider from '../divider';
-import theme from '../../theme/settings';
+import { borderRadius4px, displayBlock, positionRelative } from '../../styles/general';
+import { color as colors } from '../../styles/colors';
+const {
+  line: {
+    category
+  }
+} = colors;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   expand,
+  expanded,
   onClick,
   onExpand,
   onCollapse,
@@ -24,7 +29,21 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ref = useRef(null);
   }
 
-  const [expandState, setExpandState] = useState(expand);
+  const [expandState, setExpandState] = useState(expanded || expand);
+  const AccordionRoot = css`
+        ${displayBlock}
+        ${positionRelative}
+        ${borderRadius4px}
+        width: 100%;
+        transition: margin 300ms ease;
+        &.boxShadow {
+            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+        }
+        &.disabled {
+            cursor: no-drop;
+            box-shadow: none;
+        }
+    `;
   useEffect(() => {
     if (ref.current) {
       const previous = ref.current.previousElementSibling;
@@ -35,8 +54,8 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [expandState]);
   useEffect(() => {
-    setExpandState(expand);
-  }, [expand]);
+    expanded !== undefined ? setExpandState(expanded) : setExpandState(expand);
+  }, [expand, expanded]);
 
   const onClickAccordion = () => {
     !!onClick && onClick({
@@ -44,27 +63,14 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  const AccordionRoot = css`
-        display: block;
-        position: relative;
-        width: 100%;
-        border-radius: 4px;
-        transition: margin 300ms ease;
-        &.boxShadow {
-            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-        }
-        &.disabled {
-            cursor: no-drop;
-            box-shadow: none;
-        }
-    `;
-  return jsx("div", _extends({
+  return jsx("div", {
     css: AccordionRoot,
-    ref: ref
-  }, props, {
-    className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim()
-  }), jsx(AccordionContext.Provider, {
+    ref: ref,
+    ...props,
+    className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', className, boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+  }, jsx(AccordionContext.Provider, {
     value: {
+      expanded,
       expandState,
       disabled,
       onClickAccordion: onClick ? onClickAccordion : null,
@@ -73,7 +79,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setExpandState
     }
   }, children, jsx(Divider, {
-    color: theme.colors.borderTab,
+    color: category,
     style: {
       margin: 0,
       display: 'none'
@@ -90,9 +96,12 @@ Accordion.propTypes = {
   /** prevent all event if true */
   disabled: PropTypes.bool,
 
-  /** expand immediate after render if true */
+  /** expand immediate after render if true (don't use this) */
   expand: PropTypes.bool,
 
+  /** expand state of accordion (use this) */
+  expanded: PropTypes.bool,
+
   /** class on element */
   className: PropTypes.string,
 

package/components/accordion/summary.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -27,6 +25,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const expandIconRef = useRef(null);
   const timer = useRef(null);
   const {
+    expanded,
     expandState,
     disabled,
     onClickAccordion,
@@ -50,10 +49,10 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       if (expandState) {
-        setExpandState(false);
+        if (expanded === undefined) setExpandState(false);
         !!onCollapse && onCollapse(e);
       } else if (!expandState) {
-        setExpandState(true);
+        if (expanded === undefined) setExpandState(true);
         !!onExpand && onExpand(e);
       }
     }
@@ -117,21 +116,21 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  return jsx("div", _extends({
+  return jsx("div", {
     css: SummaryRoot,
     ref: ref,
-    tabIndex: "-1"
-  }, props, {
+    tabIndex: "-1",
+    ...props,
     onClick: onClickHandler,
-    className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim()
-  }), jsx("div", {
+    className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+  }, jsx("div", {
     className: 'DGN-UI-Accordion-Summary-Content'
   }, children), !!expandIcon && jsx("div", {
     className: 'Accordion-Icon-Root'
-  }, jsx("div", _extends({}, expandIconProps, {
+  }, jsx("div", { ...expandIconProps,
     ref: expandIconRef,
     className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim()
-  }), typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
+  }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
     className: 'Accordion-Expand-Icon'
   }) : jsx("span", {
     className: 'Accordion-Expand-Icon effect'

package/components/alert/index.js

@@ -1,49 +1,41 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { memo, useState, useEffect, useMemo, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { info1, info9, success1, success9, warning1, warning9, danger1, danger9 } from '../../styles/colors';
-import theme from '../../theme/settings';
-import { Close, Archive, Info, Warning, Block } from '../../icons';
 import LinearProgress from '../progress/linear';
-const icons = {
-  primary: jsx(Info, null),
-  success: jsx(Archive, null),
-  warning: jsx(Warning, null),
-  danger: jsx(Block, {
-    color: 'currentColor'
-  })
-};
-const colors = {
-  color: {
-    primary: theme.colors.info,
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    danger: theme.colors.danger
-  },
-  backgroundColor: {
-    primary: info1,
-    success: success1,
-    warning: warning1,
-    danger: danger1
-  },
-  borderColor: {
-    primary: theme.colors.info,
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    danger: theme.colors.danger
+import { color as colors } from '../../styles/colors';
+import ButtonIcon from '../button/icon';
+import * as Icons from '../../icons';
+import { capitalize } from '../../utils';
+import { hexToRGBA } from '../../styles/color-helper';
+import { typography } from '../../styles/typography';
+const {
+  heading3,
+  heading4,
+  heading5,
+  paragraph1,
+  paragraph2,
+  paragraph3
+} = typography;
+const {
+  system: {
+    rest
   },
-  hover: {
-    primary: info9,
-    success: success9,
-    warning: warning9,
-    danger: danger9
+  semantic: {
+    success,
+    warning,
+    danger,
+    info
   }
-};
+} = colors;
+const colorMap = new Map([['info', info], ['success', success], ['warning', warning], ['danger', danger]]);
+const iconMap = new Map([['info', 'Info'], ['success', 'ApprovalFilled'], ['warning', 'Warning'], ['danger', 'CancelFilled']]);
+const maxWidthMap = new Map([['tiny', 320], ['small', 400], ['medium', 480]]);
+const primaryTypoMap = new Map([['tiny', heading5], ['small', heading4], ['medium', heading3]]);
+const iconSizeMap = new Map([['tiny', 16], ['small', 20], ['medium', 24]]);
+const linearProgressSizeMap = new Map([['tiny', 2], ['small', 3], ['medium', 4]]);
 const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   color,
   text,
@@ -62,6 +54,7 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, ref) => {
   const clearIconRef = useRef(null);
   const [percentState, setPercentState] = useState(100);
+  const mainColor = colorMap.get(color);
   const AlertContainer = css`
         position: relative;
         display: block;
@@ -69,70 +62,60 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         transition: opacity ${progressing ? duration / 2 + 1 : duration * 1}s ease ${progressing ? duration / 2 : 0}s;
         pointer-events: auto;
         z-index: 9001;
+        max-width: ${maxWidthMap.get(size)}px;
     `;
   const AlertInfo = css`
         display: flex;
         position: relative;
         width: 100%;
-        min-width: 333px;
-        border: 1px solid ${colors.borderColor[color]};
-        color: ${colors.color[color]};
-        background-color: ${colors.backgroundColor[color]};
+        min-width: 320px;
+        border: 1px solid ${mainColor};
+        color: ${mainColor};
+        background-color: ${hexToRGBA(mainColor, 0.15)};
         box-sizing: border-box;
         border-radius: 4px;
-        padding: 8px 16px;
+        padding: 0 4px 0 16px;
         opacity: 1;
         word-break: break-word;
     `;
   const AlertIcon = css`
         display: inherit;
         margin-right: 10px;
-        max-width: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
-        max-height: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
+        padding: 8px 0;
     `;
   const AlertText = css`
         display: block;
-        margin-right: 10px;
+        margin-right: ${clearAble ? '10px' : 0};
+        padding: 8px 0;
     `;
   const AlertPrimary = css`
         display: flex;
         position: relative;
         align-items: center;
         justify-content: flex-start;
-        font-family: ${theme.typography.fontFamily};
-        font-style: normal;
-        font-weight: 500;
-        font-size: ${/^(small|sm)$/i.test(size) ? 14 : 16}px;
-        line-height: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
         user-select: none;
+        ${secondary ? primaryTypoMap.get(size) : paragraph1}
     `;
   const AlertSecondary = css`
         display: block;
-        margin-right: 10px;
-        font-family: ${theme.typography.fontFamily};
-        font-style: normal;
-        font-weight: 500;
-        font-size: ${/^(small|sm)$/i.test(size) ? 12 : 14}px;
-        line-height: 16px;
         user-select: none;
+        ${size === 'tiny' ? paragraph3 : paragraph2}
     `;
   const AlertClearIcon = css`
-        display: inherit;
         margin-left: auto;
-        color: ${colors.color[color]};
-        cursor: pointer;
-        max-width: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
-        max-height: ${/^(small|sm)$/i.test(size) ? 16 : 24}px;
-        &:hover {
-            color: ${colors.hover[color]};
-        }
     `;
   const linearProgressStyle = css`
         display: block;
         position: relative;
-        margin-top: ${/^(small|sm)$/i.test(size) ? 2 : 6}px;
+        margin-top: ${size === 'medium' ? '4px' : '2px'};
         padding: 0 5px;
     `;
+  const NotFoundIcon = css`
+        display: block;
+        width: 70%;
+        height: 70%;
+        border: 1px dashed ${rest};
+    `;
 
   const onClearAlert = (el, urgency) => {
     var _el$parentNode;
@@ -157,37 +140,60 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  const AlertView = useMemo(() => jsx("div", _extends({
-    css: AlertInfo,
-    className: ['DGN-UI-Alert', className].join(' ').trim()
-  }, props), jsx("span", {
-    css: AlertIcon
-  }, icons[color]), jsx("span", {
-    css: AlertText
-  }, jsx("span", {
-    css: AlertPrimary
-  }, children ? typeof children === 'string' ? children : jsx("children", null) : text), secondary && jsx("span", {
-    css: AlertSecondary
-  }, secondary)), jsx("span", {
-    css: AlertClearIcon,
-    onClick: e => onClearAlert(e.currentTarget, true),
-    ref: clearIconRef
-  }, clearAble ? jsx(Close, {
-    color: 'currentColor',
-    height: /small/.test(size) ? 16 : 24,
-    width: /small/.test(size) ? 16 : 24,
-    viewBox: true
-  }) : null)), [color, text, clearAble]);
+  const AlertView = useMemo(() => {
+    let node = children;
+
+    if (!node) {
+      const IconComp = Icons[capitalize(iconMap.get(color))];
+
+      if (IconComp) {
+        node = jsx(IconComp, {
+          width: iconSizeMap.get(size),
+          height: iconSizeMap.get(size),
+          color: 'currentColor',
+          viewBox: true
+        });
+      } else {
+        node = jsx("span", {
+          css: NotFoundIcon
+        });
+      }
+    }
+
+    return jsx("div", {
+      css: AlertInfo,
+      className: ['DGN-UI-Alert', className].join(' ').trim(),
+      ...props
+    }, jsx("span", {
+      css: AlertIcon
+    }, node), jsx("span", {
+      css: AlertText
+    }, jsx("span", {
+      css: AlertPrimary
+    }, children ? typeof children === 'string' ? children : jsx("children", null) : text), secondary && jsx("span", {
+      css: AlertSecondary
+    }, secondary)), jsx("span", {
+      css: AlertClearIcon,
+      onClick: e => onClearAlert(e.currentTarget, true),
+      ref: clearIconRef
+    }, clearAble ? jsx(ButtonIcon, {
+      circular: true,
+      viewType: 'text',
+      size: size,
+      color: color,
+      name: 'Close'
+    }) : null));
+  }, [color, text, clearAble, secondary, size]);
   const LinearView = useMemo(() => {
     return progressing ? jsx("span", {
       css: linearProgressStyle
     }, jsx(LinearProgress, {
       determinate: true,
       background: 'transparent',
-      color: colors.color[color],
+      color: mainColor,
       percent: percentState,
       duration: duration,
-      height: /^(small|sm)$/i.test(size) ? 2 : 4,
+      height: linearProgressSizeMap.get(size),
       style: {
         boxShadow: 'none'
       }
@@ -212,7 +218,7 @@ const Alert = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, AlertView, LinearView);
 }));
 Alert.defaultProps = {
-  color: 'primary',
+  color: 'info',
   size: 'medium',
   className: '',
   clearAble: true,
@@ -223,7 +229,7 @@ Alert.defaultProps = {
 };
 Alert.propTypes = {
   /** color is a string, it's background color of Alert */
-  color: PropTypes.oneOf(['primary', 'success', 'warning', 'danger']),
+  color: PropTypes.oneOf(['info', 'success', 'warning', 'danger']),
 
   /** class for Alert component */
   className: PropTypes.string,
@@ -235,7 +241,7 @@ Alert.propTypes = {
   secondary: PropTypes.string,
 
   /** size is a string, size of Alert */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
 
   /** Display clear icon to close alert */
   clearAble: PropTypes.bool,

package/components/alert/notify.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { memo, useEffect, forwardRef, useImperativeHandle } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
@@ -119,15 +117,19 @@ const AlertNotify = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         renderNotifyAlertPosition(position);
       }
 
-      ReactDOM.render( /*#__PURE__*/React.createElement(Alert, _extends({
+      ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: e => onClose(e, position),
-        usedByNotify: true
-      }, props, options), message), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
+        usedByNotify: true,
+        ...props,
+        ...options
+      }, message), document.querySelector(`div[class^="Notify-Alert-${position.vertical}-${position.horizontal}"]`).appendChild(el));
     } else {
-      ReactDOM.render( /*#__PURE__*/React.createElement(Alert, _extends({
+      ReactDOM.render( /*#__PURE__*/React.createElement(Alert, {
         onClose: onClose,
-        usedByNotify: true
-      }, props, options), message), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
+        usedByNotify: true,
+        ...props,
+        ...options
+      }, message), document.querySelector(`div[class^="Notify-Alert-"]`).appendChild(el));
     }
   };
 

package/components/avatar/index.js

@@ -1,13 +1,11 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { Fragment, memo, useRef, forwardRef, useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import Icon, { Account } from '../../icons';
-import { ModalSample, Popover, Popup, Typography } from '../';
+import { Account } from '../../icons';
+import { ButtonIcon, ModalSample, Popover, Popup, Typography } from '../';
 import { randomString } from '../../utils';
 import { getGlobal } from '../../global';
 const existed = {},
@@ -131,8 +129,8 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     width = height;
   }
 
-  const iconDefault = `<svg width="${width}" height="${height}" viewBox="0 0 20 20" fill="none">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C4.47998 0 0 4.48 0 10C0 15.52 4.47998 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34003 9 7 7.66 7 6C7 4.34 8.34003 3 10 3ZM4 13.98C5.28998 15.92 7.5 17.2 10 17.2C12.5 17.2 14.71 15.92 16 13.98C15.97 11.99 11.99 10.9 10 10.9C8 10.9 4.03003 11.99 4 13.98Z" fill="#7F828E"/>
+  const iconDefault = `<svg width="${width}" height="${height}" viewBox="0 0 24 24" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47998 2 2 6.48 2 12C2 17.52 6.47998 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM6 15.98C7.28998 17.92 9.5 19.2 12 19.2C14.5 19.2 16.71 17.92 18 15.98C17.97 13.99 13.99 12.9 12 12.9C10 12.9 6.03003 13.99 6 15.98Z" fill="#7F828E"></path>
     </svg>`;
   const ActionIcon = css`
         position: absolute;
@@ -341,7 +339,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if (defaultSrc) {
           e.target.src = defaultSrc;
         } else {
-          ref.current.querySelector(`.css-${AvatarPreview.name}`).innerHTML = iconDefault;
+          if (ref.current) ref.current.querySelector(`.css-${AvatarPreview.name}`).innerHTML = iconDefault;
         }
       };
 
@@ -384,10 +382,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: AvatarContainer,
     ref: ref,
     id: unique
-  }, jsx("div", _extends({
+  }, jsx("div", {
     css: AvatarRoot,
-    className: ['DGN-UI-Avatar', className].join(' ').trim()
-  }, props), jsx("input", {
+    className: ['DGN-UI-Avatar', className].join(' ').trim(),
+    ...props
+  }, jsx("input", {
     ref: inputRef,
     type: "file",
     title: '',
@@ -413,13 +412,15 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     viewBox: true
   }))), !readOnly && !disabled && jsx("span", {
     css: ActionIcon
-  }, jsx(Icon, {
+  }, jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Edit',
     width: actionIconWidth,
     height: actionIconHeight,
     className: 'icon-edit',
     onClick: () => triggerInput()
-  }), clearAble && jsx(Icon, {
+  }), clearAble && jsx(ButtonIcon, {
+    viewType: 'ghost',
     name: 'Delete',
     width: actionIconWidth,
     height: actionIconHeight,
@@ -444,14 +445,15 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       display: 'block'
     }
   })), [viewAvatar]);
-  const MoreInfoView = useMemo(() => jsx(Popover, _extends({
+  const MoreInfoView = useMemo(() => jsx(Popover, {
     open: viewMoreInfo,
     pressESCToClose: false,
     bgColor: '#000',
     anchor: avatarRef,
     fullScreen: false,
-    width: 'max-content'
-  }, getDirection(direction)), jsx("div", {
+    width: 'max-content',
+    ...getDirection(direction)
+  }, jsx("div", {
     css: MoreInfo
   }, typeof data === 'function' ? data() : renderData())), [viewMoreInfo, direction, data]);
   const PopupView = useMemo(() => jsx(Popup, {
@@ -471,8 +473,8 @@ Avatar.defaultProps = {
   outlined: false,
   width: 48,
   height: 48,
-  actionIconWidth: 18,
-  actionIconHeight: 18,
+  actionIconWidth: '100%',
+  actionIconHeight: '100%',
   className: '',
   direction: 'down',
   maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,