cozy-ui 121.1.2 → 121.3.0

package/react/UploadQueue/index.jsx

@@ -1,27 +1,15 @@
 import LinearProgress from '@material-ui/core/LinearProgress'
 import cx from 'classnames'
-import React, { Component, useState } from 'react'
-import { useIntervalWhen } from 'rooks'
-
-import { splitFilename } from 'cozy-client/dist/models/file'
+import React, { Component } from 'react'
 
+import Item from './Item'
 import localeEn from './locales/en.json'
 import localeEs from './locales/es.json'
 import localeFr from './locales/fr.json'
 import styles from './styles.styl'
-import Icon from '../Icon'
-import CheckIcon from '../Icons/Check'
-import CrossIcon from '../Icons/Cross'
-import WarningIcon from '../Icons/Warning'
-import Spinner from '../Spinner'
-import Typography from '../Typography'
 import List from '../List'
-import ListItem from '../ListItem'
-import ListItemText from '../ListItemText'
-import ListItemIcon from '../ListItemIcon'
-import { Img } from '../deprecated/Media'
+import Typography from '../Typography'
 import Button from '../deprecated/Button'
-import { translate, useI18n } from '../providers/I18n'
 import { formatLocallyDistanceToNow } from '../providers/I18n/format'
 import withLocales from '../providers/I18n/withLocales'
 import { withStyles } from '../styles'
@@ -58,174 +46,17 @@ export const uploadStatus = {
   ERROR_STATUSES
 }
 
-const Pending = translate()(props => (
-  <Typography variant="subtitle1" color="primary">
-    {props.t('item.pending')}
-  </Typography>
-))
-
 export const formatRemainingTime = durationInSec => {
   const later = Date.now() + durationInSec * 1000
   return formatLocallyDistanceToNow(later)
 }
 
-// https://date-fns.org/v2.28.0/docs/formatDistanceToNow
-const numberOfReferencesForPluralForm = durationInSec =>
-  durationInSec < 90 || (durationInSec > 2670 && durationInSec < 5370) ? 1 : 2
-
-const RemainingTime = ({ durationInSec }) => {
-  const { t } = useI18n()
-
-  return (
-    <Typography
-      variant="caption"
-      className={cx(styles['upload-queue__progress-caption'], 'u-ellipsis')}
-    >
-      {t('item.remainingTime', {
-        time: formatRemainingTime(durationInSec),
-        smart_count: numberOfReferencesForPluralForm(durationInSec)
-      })}
-    </Typography>
-  )
-}
-
-const FileLinearProgress = withStyles(theme => ({
-  root: {
-    borderRadius: theme.shape.borderRadius
-  },
-  colorPrimary: {
-    backgroundColor: theme.palette.background.default
-  },
-  barColorPrimary: {
-    backgroundColor: 'var(--emerald)'
-  }
-}))(LinearProgress)
-
 const QueueLinearProgress = withStyles({
   root: {
     height: '2px'
   }
 })(LinearProgress)
 
-const FileUploadProgress = ({ progress: progressProps }) => {
-  const [progress, setProgress] = useState(progressProps)
-  useIntervalWhen(
-    () => {
-      setProgress(progressProps)
-    },
-    1000,
-    true,
-    true
-  )
-
-  return (
-    <div className={styles['upload-queue__upload-progress']}>
-      <div className="u-flex-grow-1 u-pr-1">
-        <FileLinearProgress
-          variant="determinate"
-          value={(progress.loaded / progress.total) * 100}
-        />
-      </div>
-      <div className="u-flex-shrink">
-        {progress.remainingTime ? (
-          <RemainingTime durationInSec={progress.remainingTime} />
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-const Item = translate()(
-  ({ file, status, isDirectory, progress, getMimeTypeIcon }) => {
-    const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES } = uploadStatus
-    const { filename, extension } = splitFilename(file)
-    let statusIcon
-    let done = false
-    let error = false
-    /**
-     * Status came from the Upload Queue, but sometimes we're using
-     * manual upload without using the Upload Queue system but we're still
-     * using the UI component. When this is the case, the file handles on
-     * his own its status.
-     */
-    const statusToUse = file.status ? file.status : status
-
-    if (statusToUse === LOADING) {
-      statusIcon = !progress ? (
-        <Spinner className="u-ml-half" color="var(--primaryColor)" />
-      ) : null
-    } else if (statusToUse === CANCEL) {
-      statusIcon = (
-        <Icon
-          className="u-ml-half"
-          icon={CrossIcon}
-          color="var(--errorColor)"
-        />
-      )
-    } else if (ERROR_STATUSES.includes(statusToUse)) {
-      error = true
-      statusIcon = (
-        <Icon
-          className="u-ml-half"
-          icon={WarningIcon}
-          color="var(--errorColor)"
-        />
-      )
-    } else if (DONE_STATUSES.includes(statusToUse)) {
-      done = true
-      statusIcon = (
-        <Icon
-          className="u-ml-half"
-          icon={CheckIcon}
-          color="var(--successColor)"
-        />
-      )
-    } else if (statusToUse === PENDING) {
-      statusIcon = <Pending />
-    }
-
-    return (
-      <ListItem
-        divider
-        data-testid="upload-queue-item"
-        className={cx('u-ph-1', {
-          [styles['upload-queue-item--done']]: done,
-          [styles['upload-queue-item--error']]: error
-        })}
-      >
-        {getMimeTypeIcon ? (
-          <ListItemIcon className="u-ta-center">
-            <Icon
-              icon={getMimeTypeIcon(isDirectory, file.name, file.type)}
-              size={32}
-              className="u-mr-1"
-            />
-          </ListItemIcon>
-        ) : null}
-        <ListItemText disableTypography>
-          <div data-testid="upload-queue-item-name" className="u-ellipsis">
-            <Typography variant="body1" className="u-ellipsis">
-              {filename}
-              {extension && (
-                <Typography
-                  component="span"
-                  variant="body1"
-                  color="textSecondary"
-                  className="u-dib"
-                >
-                  {extension}
-                </Typography>
-              )}
-            </Typography>
-          </div>
-          {progress ? <FileUploadProgress progress={progress} /> : null}
-        </ListItemText>
-        <Img className={styles['item-status']}>{statusIcon}</Img>
-      </ListItem>
-    )
-  }
-)
-
 export class UploadQueue extends Component {
   state = {
     collapsed: false

package/react/UploadQueue/styles.styl

@@ -7,12 +7,13 @@ $coz-bar-size=3rem
 
 .upload-queue
     border   .0625rem solid var(--dividerColor)
-    border-radius    .25rem
+    border-radius    .5rem
     background-color var(--paperBackgroundColor)
     display          flex
     flex-direction   column
     max-width 90%
     width    30rem
+    overflow hidden
 
 .upload-queue__threshold-bar
     min-width 10rem
@@ -31,7 +32,7 @@ $coz-bar-size=3rem
 .upload-queue--popover
     z-index           var(--zIndex-popover)
     border            rem(1) solid var(--dividerColor)
-    border-radius     rem(4)
+    border-radius     .5rem
     box-shadow        rem(0 1 3 0) rgba(50, 54, 63, .19), rem(0 6 18 0) rgba(50, 54, 63, .19)
     background-color  var(--paperBackgroundColor)
     position fixed
@@ -54,6 +55,7 @@ $coz-bar-size=3rem
     flex-direction   column
     justify-content  center
     height           2rem
+    min-height       2rem
     background-color var(--defaultBackgroundColor)
     font-weight      bold
     margin           0

package/react/UploadQueue/useStatusIcon.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { uploadStatus } from './index'
+import Icon from '../Icon'
+import CheckIcon from '../Icons/Check'
+import CheckCircleIcon from '../Icons/CheckCircle'
+import CrossIcon from '../Icons/Cross'
+import CrossCircleIcon from '../Icons/CrossCircle'
+import WarningIcon from '../Icons/Warning'
+import Spinner from '../Spinner'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
+export const useStatusIcon = (statusToUse, progress) => {
+  const { CANCEL, LOADING, DONE_STATUSES, ERROR_STATUSES, PENDING } =
+    uploadStatus
+  const SuccessIcon = isTwakeTheme() ? CheckCircleIcon : CheckIcon
+  const ErrorIcon = isTwakeTheme() ? CrossCircleIcon : CrossIcon
+
+  let statusIcon
+
+  if (statusToUse === LOADING) {
+    statusIcon = !progress ? <Spinner color="var(--primaryColor)" /> : null
+  } else if (statusToUse === CANCEL) {
+    statusIcon = <Icon icon={ErrorIcon} color="var(--errorColor)" />
+  } else if (ERROR_STATUSES.includes(statusToUse)) {
+    statusIcon = <Icon icon={WarningIcon} color="var(--errorColor)" />
+  } else if (DONE_STATUSES.includes(statusToUse)) {
+    statusIcon = <Icon icon={SuccessIcon} color="var(--successColor)" />
+  } else if (statusToUse === PENDING) {
+    statusIcon = null
+  }
+
+  return statusIcon
+}

package/stylus/objects/layouts.styl

@@ -77,7 +77,17 @@ $app
         overflow-x hidden
         overflow-y auto
 
-    +medium-screen()
+    &--rounded
+        +medium-screen('min') // desktop only
+            main
+                background-color var(--defaultBackgroundColor)
+
+                & > [role=main]
+                    margin 1rem 1rem 1rem 0
+                    border-radius 1rem
+                    background-color var(--paperBackgroundColor)
+
+    +medium-screen() // mobile + tablet
         display block
 
         // iPhone X environment tweak
@@ -122,7 +132,7 @@ $app-2panes-sticky
     main > [role=main]
         height auto
 
-    +medium-screen()
+    +medium-screen() // mobile + tablet
         > aside
             position fixed
             bottom 0

package/stylus/objects/sidebar.styl

@@ -10,11 +10,16 @@
 
 $sidebar
     width rem(220)
-    border-right rem(1) solid var(--dividerColor)
     background-color var(--defaultBackgroundColor)
     overflow-y auto
     overflow-x hidden
 
+    &--border
+        border-right rem(1) solid var(--dividerColor)
+
+    &--large
+        width rem(236)
+
     +medium-screen()
         justify-content space-between
         border 0

package/transpiled/react/Buttons/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "className", "color", "label", "busy", "disabled", "endIcon"],
+var _excluded = ["variant", "className", "color", "label", "busy", "disabled", "height", "endIcon"],
     _excluded2 = ["variant", "className"];
 import MuiButton from '@material-ui/core/Button';
 import cx from 'classnames';
@@ -17,6 +17,7 @@ var DefaultButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       label = _ref.label,
       busy = _ref.busy,
       disabled = _ref.disabled,
+      height = _ref.height,
       endIcon = _ref.endIcon,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -27,7 +28,7 @@ var DefaultButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(MuiButton, _extends({}, props, {
     variant: variant,
     ref: ref,
-    className: cx(_defineProperty({}, "customColor-".concat(customColor), customColor), className),
+    className: cx(_defineProperty({}, "customColor-".concat(customColor), customColor), _defineProperty({}, "customSize-".concat(height), height), className),
     color: _color,
     disabled: disabled || busy,
     endIcon: busy ? /*#__PURE__*/React.createElement(Icon, {
@@ -93,9 +94,11 @@ var Buttons = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 Buttons.displayName = 'Buttons';
 Buttons.propTypes = {
   variant: PropTypes.oneOf(['primary', 'secondary', 'ghost', 'text']),
-  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info'])
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info']),
+  height: PropTypes.oneOf(['default', 'auto'])
 };
 Buttons.defaultProps = {
-  variant: 'primary'
+  variant: 'primary',
+  height: 'default'
 };
 export default Buttons;

package/transpiled/react/Icons/TwakeWorkplace.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/workplace_twake.svg` to regenerate;
+import React from 'react';
+
+function SvgTwakeWorkplace(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 22 22",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    x: 0.498,
+    y: 0.495,
+    width: 21.51,
+    height: 21.51,
+    rx: 6.563,
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 0.498,
+    y: 0.495,
+    width: 21.51,
+    height: 21.51,
+    rx: 6.563,
+    fill: "url(#workplace_twake_svg__paint0_linear_1573_14803)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 0.498,
+    y: 0.495,
+    width: 21.51,
+    height: 21.51,
+    rx: 6.563,
+    fill: "url(#workplace_twake_svg__paint1_linear_1573_14803)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: 0.498,
+    y: 0.495,
+    width: 21.51,
+    height: 21.51,
+    rx: 6.563,
+    fill: "url(#workplace_twake_svg__paint2_linear_1573_14803)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11.281 3.7c.008.006.017.01.027.012l.014.002a.405.405 0 01.156.05c.015.007.03.016.044.024l1.068.605 1.25.707.906.512.056.032a.487.487 0 01.229.363l.002.1v3.145a.489.489 0 01-.71.401c-.017-.008-.034-.018-.05-.027l-1.606-.909-1.138-.642-.056-.032a.542.542 0 00-.178-.051h-.058a.462.462 0 00-.213.053c-.02.01-.038.021-.056.032l-1.215.696-1.458.835a3.52 3.52 0 01-.063.036.533.533 0 01-.176.058l-.07.002a.433.433 0 01-.195-.046.48.48 0 01-.283-.433V6.05a.483.483 0 01.224-.404l.05-.029.86-.493 1.021-.585 1.033-.59.256-.147.056-.032a.553.553 0 01.107-.044.53.53 0 01.071-.013.048.048 0 00.025-.012l.07-.002zm-7.514 8.774a.036.036 0 00.026-.032.487.487 0 01.27-.389l.652-.376 1.455-.84.566-.326.063-.036a.49.49 0 01.702.418v3.209a.49.49 0 00.213.394.671.671 0 00.068.04l.62.348 1.278.714.792.442.062.035c.11.064.188.168.22.29a.463.463 0 01.013.192.476.476 0 01-.224.35c-.02.013-.042.024-.063.036L8.411 18.08l-.704.386c-.019.01-.036.022-.057.031a.494.494 0 01-.48-.016l-.217-.127-2.877-1.692a.533.533 0 01-.055-.033.487.487 0 01-.219-.306c-.005-.02-.007-.043-.01-.064a.028.028 0 00-.018-.02.04.04 0 00-.007-.003v-3.763zm11.207 6.103a.078.078 0 00-.017-.012.533.533 0 00-.055-.016.47.47 0 01-.127-.049l-.069-.04-1.063-.613-1.573-.907-.05-.03a.477.477 0 01-.224-.4.477.477 0 01.27-.448l.896-.514 1.21-.692.566-.325.074-.043a.487.487 0 00.227-.35 1.02 1.02 0 00.006-.115v-3.092c0-.024 0-.04.002-.058a.481.481 0 01.356-.43.471.471 0 01.113-.019.492.492 0 01.285.084l.722.415 1.268.733.665.383.062.036a.469.469 0 01.19.218.15.15 0 01.015.048.083.083 0 00.016.032v3.964a.032.032 0 00-.015.023.178.178 0 01-.017.055.48.48 0 01-.18.208.67.67 0 01-.062.035l-.978.56-2.18 1.25a.376.376 0 01-.055.032.468.468 0 01-.127.05.389.389 0 00-.048.013.03.03 0 00-.016.014h-.087z",
+    fill: "#fff"
+  }), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "workplace_twake_svg__paint0_linear_1573_14803",
+    x1: 22.008,
+    y1: 13.042,
+    x2: 0.498,
+    y2: 13.042,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0.13,
+    stopColor: "#A033FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.61,
+    stopColor: "#0094FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 1,
+    stopColor: "#4FB500"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "workplace_twake_svg__paint1_linear_1573_14803",
+    x1: 10.356,
+    y1: 7.217,
+    x2: 3.634,
+    y2: 20.66,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    stopColor: "#FFD600",
+    stopOpacity: 0
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.563,
+    stopColor: "#FFC700"
+  })), /*#__PURE__*/React.createElement("linearGradient", {
+    id: "workplace_twake_svg__paint2_linear_1573_14803",
+    x1: 12.149,
+    y1: 13.042,
+    x2: 19.767,
+    y2: 21.109,
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: 0.03,
+    stopColor: "#FF3B30",
+    stopOpacity: 0
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: 0.843,
+    stopColor: "#E73B2D"
+  }))));
+}
+
+export default SvgTwakeWorkplace;

package/transpiled/react/Layout/Layout.js

@@ -4,6 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "monoColumn"],
     _excluded2 = ["children"],
@@ -18,8 +19,11 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 var styles = {
   "o-layout": "styles__o-layout___3TSz9",
-  "o-layout-2panes": "styles__o-layout-2panes___1CDQw"
+  "o-layout-2panes": "styles__o-layout-2panes___1CDQw",
+  "o-layout--rounded": "styles__o-layout--rounded___1WX4D",
+  "o-layout-2panes--rounded": "styles__o-layout-2panes--rounded___1FuZT"
 };
+import { isTwakeTheme } from "cozy-ui/transpiled/react/helpers/isTwakeTheme";
 export var Layout = function Layout(_ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -27,7 +31,7 @@ export var Layout = function Layout(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(monoColumn ? styles['o-layout'] : styles['o-layout-2panes'], className)
+    className: cx(monoColumn ? styles['o-layout'] : styles['o-layout-2panes'], className, _defineProperty({}, styles['o-layout--rounded'], isTwakeTheme()))
   }, rest), children);
 };
 export var Main = function Main(_ref2) {

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -139,9 +139,16 @@ export function makeDarkInvertedOverrides(theme: any): {
     MuiButton: {
         root: {
             borderRadius: number;
-            height: string;
             lineHeight: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&.ghost': {
                 borderStyle: string;
                 '&:hover': {
@@ -150,15 +157,29 @@ export function makeDarkInvertedOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
         };
         sizeLarge: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -139,9 +139,16 @@ export function makeDarkNormalOverrides(theme: any): {
     MuiButton: {
         root: {
             borderRadius: number;
-            height: string;
             lineHeight: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&.ghost': {
                 borderStyle: string;
                 '&:hover': {
@@ -150,15 +157,29 @@ export function makeDarkNormalOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
         };
         sizeLarge: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -139,9 +139,16 @@ export function makeLightInvertedOverrides(theme: any): {
     MuiButton: {
         root: {
             borderRadius: number;
-            height: string;
             lineHeight: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&.ghost': {
                 borderStyle: string;
                 '&:hover': {
@@ -150,15 +157,29 @@ export function makeLightInvertedOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
         };
         sizeLarge: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -139,9 +139,16 @@ export function makeLightNormalOverrides(theme: any): {
     MuiButton: {
         root: {
             borderRadius: number;
-            height: string;
             lineHeight: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&.ghost': {
                 borderStyle: string;
                 '&:hover': {
@@ -150,15 +157,29 @@ export function makeLightNormalOverrides(theme: any): {
             };
         };
         sizeSmall: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };
         };
         sizeLarge: {
-            height: string;
             padding: string;
+            '&.customSize': {
+                '&-default': {
+                    height: string;
+                };
+                '&-auto': {
+                    minHeight: string;
+                };
+            };
             '&$text': {
                 padding: string;
             };