@toptal/picasso-file-input 5.0.2 → 5.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist-package/src/FileList/FileList.d.ts.map +1 -1
  2. package/dist-package/src/FileList/FileList.js +1 -8
  3. package/dist-package/src/FileList/FileList.js.map +1 -1
  4. package/dist-package/src/FileListItem/FileListItem.d.ts.map +1 -1
  5. package/dist-package/src/FileListItem/FileListItem.js +7 -12
  6. package/dist-package/src/FileListItem/FileListItem.js.map +1 -1
  7. package/dist-package/src/ProgressBar/ProgressBar.d.ts.map +1 -1
  8. package/dist-package/src/ProgressBar/ProgressBar.js +3 -10
  9. package/dist-package/src/ProgressBar/ProgressBar.js.map +1 -1
  10. package/package.json +14 -15
  11. package/src/FileList/FileList.tsx +1 -11
  12. package/src/FileList/__snapshots__/test.tsx.snap +4 -4
  13. package/src/FileListItem/FileListItem.tsx +6 -19
  14. package/src/FileListItem/__snapshots__/test.tsx.snap +3 -3
  15. package/src/ProgressBar/ProgressBar.tsx +4 -13
  16. package/src/ProgressBar/__snapshots__/test.tsx.snap +5 -5
  17. package/dist-package/src/FileList/styles.d.ts +0 -4
  18. package/dist-package/src/FileList/styles.d.ts.map +0 -1
  19. package/dist-package/src/FileList/styles.js +0 -7
  20. package/dist-package/src/FileList/styles.js.map +0 -1
  21. package/dist-package/src/FileListItem/styles.d.ts +0 -4
  22. package/dist-package/src/FileListItem/styles.d.ts.map +0 -1
  23. package/dist-package/src/FileListItem/styles.js +0 -16
  24. package/dist-package/src/FileListItem/styles.js.map +0 -1
  25. package/dist-package/src/ProgressBar/styles.d.ts +0 -4
  26. package/dist-package/src/ProgressBar/styles.d.ts.map +0 -1
  27. package/dist-package/src/ProgressBar/styles.js +0 -22
  28. package/dist-package/src/ProgressBar/styles.js.map +0 -1
  29. package/src/FileList/styles.ts +0 -9
  30. package/src/FileListItem/styles.ts +0 -18
  31. package/src/ProgressBar/styles.ts +0 -24
@@ -1 +1 @@
1
- {"version":3,"file":"FileList.d.ts","sourceRoot":"","sources":["../../../src/FileList/FileList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAMvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAMD,eAAO,MAAM,QAAQ,8EAiCnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"FileList.d.ts","sourceRoot":"","sources":["../../../src/FileList/FileList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,QAAQ,8EA+BnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
@@ -10,18 +10,11 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import React, { forwardRef } from 'react';
13
- import cx from 'classnames';
14
- import { makeStyles } from '@material-ui/core/styles';
15
13
  import { Container } from '@toptal/picasso-container';
16
14
  import { FileListItem } from '../FileListItem';
17
- import styles from './styles';
18
- const useStyles = makeStyles(styles, {
19
- name: 'FileList',
20
- });
21
15
  export const FileList = forwardRef(function FileList(props, ref) {
22
16
  const { files, disabled, onItemRemove } = props, rest = __rest(props, ["files", "disabled", "onItemRemove"]);
23
- const classes = useStyles();
24
- return (React.createElement(Container, Object.assign({}, rest, { ref: ref, flex: true, direction: 'column', className: cx(classes.root) }), files.map((fileUpload, index) => {
17
+ return (React.createElement(Container, Object.assign({}, rest, { ref: ref, flex: true, direction: 'column', className: 'border-t border-gray-200' }), files.map((fileUpload, index) => {
25
18
  const { file: { name, size, lastModified }, } = fileUpload;
26
19
  return (React.createElement(FileListItem, { file: fileUpload, index: index, onRemove: onItemRemove, disabled: disabled, key: `${name}-${size}-${lastModified}-${String(index)}` }));
27
20
  })));
@@ -1 +1 @@
1
- {"version":3,"file":"FileList.js","sourceRoot":"","sources":["../../../src/FileList/FileList.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,OAAO,MAAM,MAAM,UAAU,CAAA;AAQ7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,UAAU;CACjB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAlD,qCAA0C,CAAQ,CAAA;IAExD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,QACJ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,KAE1B,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,EACJ,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,GACnC,GAAG,UAAU,CAAA;QAEd,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,IAAI,IAAI,IAAI,IAAI,YAAY,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,GACvD,CACH,CAAA;IACH,CAAC,CAAC,CACQ,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"FileList.js","sourceRoot":"","sources":["../../../src/FileList/FileList.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAS9C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAlD,qCAA0C,CAAQ,CAAA;IAExD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,QACJ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAC,0BAA0B,KAEnC,KAAK,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,EACJ,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,GACnC,GAAG,UAAU,CAAA;QAEd,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,IAAI,IAAI,IAAI,IAAI,YAAY,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,GACvD,CACH,CAAA;IACH,CAAC,CAAC,CACQ,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"FileListItem.d.ts","sourceRoot":"","sources":["../../../src/FileListItem/FileListItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAMD,QAAA,MAAM,YAAY,iDAAkD,KAAK,gBA6FxE,CAAA;AAED,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"FileListItem.d.ts","sourceRoot":"","sources":["../../../src/FileListItem/FileListItem.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAED,QAAA,MAAM,YAAY,iDAAkD,KAAK,gBAwFxE,CAAA;AAED,eAAe,YAAY,CAAA"}
@@ -1,6 +1,4 @@
1
1
  import React from 'react';
2
- import cx from 'classnames';
3
- import { makeStyles } from '@material-ui/core/styles';
4
2
  import { Container } from '@toptal/picasso-container';
5
3
  import { Typography } from '@toptal/picasso-typography';
6
4
  import { Tooltip } from '@toptal/picasso-tooltip';
@@ -9,29 +7,26 @@ import { Loader } from '@toptal/picasso-loader';
9
7
  import { Attachment16, Trash16, CloseMinor16 } from '@toptal/picasso-icons';
10
8
  import { TypographyOverflow } from '@toptal/picasso-typography-overflow';
11
9
  import { ProgressBar } from '../ProgressBar';
12
- import styles from './styles';
13
- const useStyles = makeStyles(styles, {
14
- name: 'FileListItem',
15
- });
16
10
  const FileListItem = ({ file, index, disabled, onRemove, testIds }) => {
17
11
  const { uploading, progress, error, file: { name }, } = file;
18
- const classes = useStyles();
19
12
  const handleRemove = () => {
20
13
  onRemove === null || onRemove === void 0 ? void 0 : onRemove(name, index);
21
14
  };
22
15
  const uploadingNode = (React.createElement(React.Fragment, null,
23
- React.createElement(Typography, { className: classes.label, variant: 'body', color: 'black', size: 'medium' }, "Uploading..."),
24
- progress !== undefined ? (React.createElement(ProgressBar, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.progressBar, value: progress })) : (React.createElement(Loader, { className: classes.loader, size: 'small' }))));
16
+ React.createElement(Typography, { className: 'leading-[1.375rem]', variant: 'body', color: 'black', size: 'medium' }, "Uploading..."),
17
+ progress !== undefined ? (React.createElement(ProgressBar, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.progressBar, value: progress })) : (React.createElement(Loader, { size: 'small' }))));
25
18
  const fileNode = (React.createElement(React.Fragment, null,
26
- React.createElement(Container, { flex: true, direction: 'column', className: cx(classes.fileNodeContent) },
19
+ React.createElement(Container, { flex: true, direction: 'column', className: 'min-w-0' },
27
20
  React.createElement(Container, { flex: true, direction: 'row' },
28
21
  !error && (React.createElement(Container, { right: 'xsmall' },
29
22
  React.createElement(Attachment16, { color: 'darkGrey' }))),
30
- React.createElement(TypographyOverflow, { className: classes.label, variant: 'body', size: 'medium', color: error ? 'red' : 'black' }, name)),
23
+ React.createElement(TypographyOverflow, { className: 'leading-[1.375rem]', variant: 'body', size: 'medium', color: error ? 'red' : 'black' }, name)),
31
24
  React.createElement(Typography, { className: 'leading-4', variant: 'body', size: 'xsmall', color: 'red' }, error)),
32
25
  onRemove && (React.createElement(Tooltip, { compact: true, placement: 'top', content: error ? 'Dismiss' : 'Remove File' },
33
26
  React.createElement(ButtonCircular, { className: 'shrink-0', variant: 'flat', onClick: handleRemove, disabled: disabled }, error ? React.createElement(CloseMinor16, { color: 'red' }) : React.createElement(Trash16, { color: 'red' }))))));
34
- return (React.createElement(Container, { flex: true, direction: 'row', alignItems: 'center', justifyContent: 'space-between', className: cx(classes.root) }, uploading && error === undefined ? uploadingNode : fileNode));
27
+ return (React.createElement(Container, { flex: true, direction: 'row', alignItems: 'center', justifyContent: 'space-between',
28
+ // TODO(tokens): [PF-1994] 5px vertical padding is off the 4px Picasso spacing scale
29
+ className: 'border-b border-gray-200 py-[0.3125rem]' }, uploading && error === undefined ? uploadingNode : fileNode));
35
30
  };
36
31
  export default FileListItem;
37
32
  //# sourceMappingURL=FileListItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FileListItem.js","sourceRoot":"","sources":["../../../src/FileListItem/FileListItem.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"FileListItem.js","sourceRoot":"","sources":["../../../src/FileListItem/FileListItem.tsx"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAWvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AASD,eAAO,MAAM,WAAW,8EAwCvB,CAAA;AAED,eAAe,WAAW,CAAA"}
1
+ {"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAKD,eAAO,MAAM,WAAW,8EAwCvB,CAAA;AAED,eAAe,WAAW,CAAA"}
@@ -10,29 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import React, { forwardRef } from 'react';
13
- import cx from 'classnames';
14
- import { makeStyles } from '@material-ui/core/styles';
15
13
  import { Container } from '@toptal/picasso-container';
16
14
  import { Typography } from '@toptal/picasso-typography';
17
- import styles from './styles';
18
15
  const MIN_VALUE = 0;
19
16
  const MAX_VALUE = 100;
20
- const useStyles = makeStyles(styles, {
21
- name: 'PicassoProgressBar',
22
- });
23
17
  const normalizeValue = (value) => Math.min(Math.max(value, MIN_VALUE), MAX_VALUE);
24
18
  export const ProgressBar = forwardRef(function ProgressBar(_a, ref) {
25
19
  var { showPercentage = false } = _a, props = __rest(_a, ["showPercentage"]);
26
20
  const { value, 'data-testid': dataTestId } = props, restProps = __rest(props, ["value", 'data-testid']);
27
- const classes = useStyles(props);
28
21
  const percentage = normalizeValue(value);
29
22
  return (React.createElement(Container, Object.assign({ flex: true, direction: 'row', alignItems: 'center', "data-testid": dataTestId }, restProps, { ref: ref }),
30
- React.createElement("div", { className: cx(classes.progressBar) },
31
- React.createElement("div", { className: cx(classes.progressIndicator), style: {
23
+ React.createElement("div", { className: 'w-full min-w-[5rem] h-2 bg-gray-300 rounded-sm' },
24
+ React.createElement("div", { className: 'h-2 rounded-sm bg-blue-400 transition-[width] duration-300 ease-in-out', style: {
32
25
  width: `${props.value}%`,
33
26
  } })),
34
27
  showPercentage && (React.createElement(Container, { left: 'xsmall' },
35
- React.createElement(Typography, { variant: 'body', size: 'xsmall', weight: 'semibold', className: cx(classes.percentageValue) },
28
+ React.createElement(Typography, { variant: 'body', size: 'xsmall', weight: 'semibold', className: 'min-w-[1.8125rem] leading-[1.125rem]' },
36
29
  percentage,
37
30
  "%")))));
38
31
  });
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,SAAS,GAAG,CAAC,CAAA;AACnB,MAAM,SAAS,GAAG,GAAG,CAAA;AAUrB,MAAM,SAAS,GAAG,UAAU,CAAe,MAAM,EAAE;IACjD,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE,CACvC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,SAAS,CAAC,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,EAAoC,EAAE,GAAG;QAAzC,EAAE,cAAc,GAAG,KAAK,OAAY,EAAP,KAAK,cAAlC,kBAAoC,CAAF;IACrD,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAA1D,wBAAkD,CAAQ,CAAA;IAChE,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;IAExC,OAAO,CACL,oBAAC,SAAS,kBACR,IAAI,QACJ,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,iBACN,UAAU,IACnB,SAAS,IACb,GAAG,EAAE,GAAG;QAER,6BAAK,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC;YACrC,6BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,EACxC,KAAK,EAAE;oBACL,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,GAAG;iBACzB,GACD,CACE;QAEL,cAAc,IAAI,CACjB,oBAAC,SAAS,IAAC,IAAI,EAAC,QAAQ;YACtB,oBAAC,UAAU,IACT,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,UAAU,EACjB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,eAAe,CAAC;gBAErC,UAAU;oBACA,CACH,CACb,CACS,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
1
+ {"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAEvD,MAAM,SAAS,GAAG,CAAC,CAAA;AACnB,MAAM,SAAS,GAAG,GAAG,CAAA;AAUrB,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE,CACvC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,SAAS,CAAC,CAAA;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,EAAoC,EAAE,GAAG;QAAzC,EAAE,cAAc,GAAG,KAAK,OAAY,EAAP,KAAK,cAAlC,kBAAoC,CAAF;IACrD,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAA1D,wBAAkD,CAAQ,CAAA;IAEhE,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,CAAA;IAExC,OAAO,CACL,oBAAC,SAAS,kBACR,IAAI,QACJ,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,iBACN,UAAU,IACnB,SAAS,IACb,GAAG,EAAE,GAAG;QAGR,6BAAK,SAAS,EAAC,gDAAgD;YAC7D,6BACE,SAAS,EAAC,wEAAwE,EAClF,KAAK,EAAE;oBACL,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,GAAG;iBACzB,GACD,CACE;QAEL,cAAc,IAAI,CACjB,oBAAC,SAAS,IAAC,IAAI,EAAC,QAAQ;YACtB,oBAAC,UAAU,IACT,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,QAAQ,EACb,MAAM,EAAC,UAAU,EACjB,SAAS,EAAC,sCAAsC;gBAE/C,UAAU;oBACA,CACH,CACb,CACS,CACb,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-file-input",
3
- "version": "5.0.2",
3
+ "version": "5.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
4
4
  "description": "Toptal UI components library - FileInput",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -19,31 +19,30 @@
19
19
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
20
20
  "dependencies": {
21
21
  "classnames": "^2.5.1",
22
- "@toptal/picasso-button": "5.0.2",
23
- "@toptal/picasso-container": "3.1.5",
24
- "@toptal/picasso-form": "7.0.2",
25
- "@toptal/picasso-icons": "1.15.3",
26
- "@toptal/picasso-loader": "3.0.6",
27
- "@toptal/picasso-shared": "16.0.0",
28
- "@toptal/picasso-tooltip": "2.0.7",
29
- "@toptal/picasso-typography": "5.1.0",
30
- "@toptal/picasso-typography-overflow": "4.0.8",
31
- "@toptal/picasso-utils": "4.0.1"
22
+ "@toptal/picasso-button": "5.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
23
+ "@toptal/picasso-container": "3.1.6-alpha-pf-fix-alpha-release-ea13b5aca.0",
24
+ "@toptal/picasso-form": "7.0.3-alpha-pf-fix-alpha-release-ea13b5aca.0",
25
+ "@toptal/picasso-icons": "1.15.4-alpha-pf-fix-alpha-release-ea13b5aca.0",
26
+ "@toptal/picasso-loader": "3.0.7-alpha-pf-fix-alpha-release-ea13b5aca.0",
27
+ "@toptal/picasso-shared": "16.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
28
+ "@toptal/picasso-typography": "5.1.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
29
+ "@toptal/picasso-tooltip": "2.0.8-alpha-pf-fix-alpha-release-ea13b5aca.0",
30
+ "@toptal/picasso-typography-overflow": "4.0.9-alpha-pf-fix-alpha-release-ea13b5aca.0",
31
+ "@toptal/picasso-utils": "4.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0"
32
32
  },
33
33
  "sideEffects": [
34
34
  "**/styles.ts",
35
35
  "**/styles.js"
36
36
  ],
37
37
  "peerDependencies": {
38
- "@material-ui/core": "4.12.4",
39
- "@toptal/picasso-tailwind": ">=2.7",
40
- "react": ">=16.12.0 < 19.0.0"
38
+ "@toptal/picasso-tailwind": "4.0.1-alpha-pf-fix-alpha-release-ea13b5aca.0",
39
+ "react": ">=16.12.0"
41
40
  },
42
41
  "exports": {
43
42
  ".": "./dist-package/src/index.js"
44
43
  },
45
44
  "devDependencies": {
46
- "@toptal/picasso-test-utils": "2.0.1"
45
+ "@toptal/picasso-test-utils": "2.0.2-alpha-pf-fix-alpha-release-ea13b5aca.0"
47
46
  },
48
47
  "files": [
49
48
  "dist-package/**",
@@ -1,14 +1,10 @@
1
1
  import type { HTMLAttributes } from 'react'
2
2
  import React, { forwardRef } from 'react'
3
- import cx from 'classnames'
4
3
  import type { BaseProps } from '@toptal/picasso-shared'
5
- import type { Theme } from '@material-ui/core/styles'
6
- import { makeStyles } from '@material-ui/core/styles'
7
4
  import { Container } from '@toptal/picasso-container'
8
5
 
9
6
  import { FileListItem } from '../FileListItem'
10
7
  import type { FileUpload } from '../FileInput'
11
- import styles from './styles'
12
8
 
13
9
  export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
14
10
  files: FileUpload[]
@@ -16,25 +12,19 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
16
12
  disabled?: boolean
17
13
  }
18
14
 
19
- const useStyles = makeStyles<Theme>(styles, {
20
- name: 'FileList',
21
- })
22
-
23
15
  export const FileList = forwardRef<HTMLDivElement, Props>(function FileList(
24
16
  props,
25
17
  ref
26
18
  ) {
27
19
  const { files, disabled, onItemRemove, ...rest } = props
28
20
 
29
- const classes = useStyles()
30
-
31
21
  return (
32
22
  <Container
33
23
  {...rest}
34
24
  ref={ref}
35
25
  flex
36
26
  direction='column'
37
- className={cx(classes.root)}
27
+ className='border-t border-gray-200'
38
28
  >
39
29
  {files.map((fileUpload, index) => {
40
30
  const {
@@ -6,13 +6,13 @@ exports[`FileList renders 1`] = `
6
6
  class="Picasso-root"
7
7
  >
8
8
  <div
9
- class="flex flex-col FileList-root"
9
+ class="flex flex-col border-t border-gray"
10
10
  >
11
11
  <div
12
- class="items-center justify-between flex FileListItem-root"
12
+ class="items-center justify-between flex border-b border-gray py-[0.3125rem]"
13
13
  >
14
14
  <div
15
- class="flex flex-col FileListItem-fileNodeContent"
15
+ class="flex flex-col min-w"
16
16
  >
17
17
  <div
18
18
  class="flex"
@@ -32,7 +32,7 @@ exports[`FileList renders 1`] = `
32
32
  </svg>
33
33
  </div>
34
34
  <p
35
- class="m-0 text-md text-black font-regular whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
35
+ class="m-0 text-md text-black font-regular whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block leading-[1.375rem]"
36
36
  >
37
37
  user-profile-picture.png
38
38
  </p>
@@ -1,7 +1,4 @@
1
1
  import React from 'react'
2
- import cx from 'classnames'
3
- import type { Theme } from '@material-ui/core/styles'
4
- import { makeStyles } from '@material-ui/core/styles'
5
2
  import { Container } from '@toptal/picasso-container'
6
3
  import { Typography } from '@toptal/picasso-typography'
7
4
  import { Tooltip } from '@toptal/picasso-tooltip'
@@ -12,7 +9,6 @@ import { TypographyOverflow } from '@toptal/picasso-typography-overflow'
12
9
 
13
10
  import { ProgressBar } from '../ProgressBar'
14
11
  import type { FileUpload } from '../FileInput'
15
- import styles from './styles'
16
12
 
17
13
  export interface Props {
18
14
  file: FileUpload
@@ -24,10 +20,6 @@ export interface Props {
24
20
  }
25
21
  }
26
22
 
27
- const useStyles = makeStyles<Theme>(styles, {
28
- name: 'FileListItem',
29
- })
30
-
31
23
  const FileListItem = ({ file, index, disabled, onRemove, testIds }: Props) => {
32
24
  const {
33
25
  uploading,
@@ -36,8 +28,6 @@ const FileListItem = ({ file, index, disabled, onRemove, testIds }: Props) => {
36
28
  file: { name },
37
29
  } = file
38
30
 
39
- const classes = useStyles()
40
-
41
31
  const handleRemove = () => {
42
32
  onRemove?.(name, index)
43
33
  }
@@ -45,7 +35,7 @@ const FileListItem = ({ file, index, disabled, onRemove, testIds }: Props) => {
45
35
  const uploadingNode = (
46
36
  <>
47
37
  <Typography
48
- className={classes.label}
38
+ className='leading-[1.375rem]'
49
39
  variant='body'
50
40
  color='black'
51
41
  size='medium'
@@ -55,18 +45,14 @@ const FileListItem = ({ file, index, disabled, onRemove, testIds }: Props) => {
55
45
  {progress !== undefined ? (
56
46
  <ProgressBar data-testid={testIds?.progressBar} value={progress} />
57
47
  ) : (
58
- <Loader className={classes.loader} size='small' />
48
+ <Loader size='small' />
59
49
  )}
60
50
  </>
61
51
  )
62
52
 
63
53
  const fileNode = (
64
54
  <>
65
- <Container
66
- flex
67
- direction='column'
68
- className={cx(classes.fileNodeContent)}
69
- >
55
+ <Container flex direction='column' className='min-w-0'>
70
56
  <Container flex direction='row'>
71
57
  {!error && (
72
58
  <Container right='xsmall'>
@@ -74,7 +60,7 @@ const FileListItem = ({ file, index, disabled, onRemove, testIds }: Props) => {
74
60
  </Container>
75
61
  )}
76
62
  <TypographyOverflow
77
- className={classes.label}
63
+ className='leading-[1.375rem]'
78
64
  variant='body'
79
65
  size='medium'
80
66
  color={error ? 'red' : 'black'}
@@ -116,7 +102,8 @@ const FileListItem = ({ file, index, disabled, onRemove, testIds }: Props) => {
116
102
  direction='row'
117
103
  alignItems='center'
118
104
  justifyContent='space-between'
119
- className={cx(classes.root)}
105
+ // TODO(tokens): [PF-1994] 5px vertical padding is off the 4px Picasso spacing scale
106
+ className='border-b border-gray-200 py-[0.3125rem]'
120
107
  >
121
108
  {uploading && error === undefined ? uploadingNode : fileNode}
122
109
  </Container>
@@ -6,10 +6,10 @@ exports[`FileListItem renders 1`] = `
6
6
  class="Picasso-root"
7
7
  >
8
8
  <div
9
- class="items-center justify-between flex FileListItem-root"
9
+ class="items-center justify-between flex border-b border-gray py-[0.3125rem]"
10
10
  >
11
11
  <div
12
- class="flex flex-col FileListItem-fileNodeContent"
12
+ class="flex flex-col min-w"
13
13
  >
14
14
  <div
15
15
  class="flex"
@@ -29,7 +29,7 @@ exports[`FileListItem renders 1`] = `
29
29
  </svg>
30
30
  </div>
31
31
  <p
32
- class="m-0 text-md text-black font-regular whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block FileListItem-label"
32
+ class="m-0 text-md text-black font-regular whitespace-nowrap [-webkit-box overflow-hidden text-ellipsis pr-[0.9px] block leading-[1.375rem]"
33
33
  >
34
34
  user-profile-picture.png
35
35
  </p>
@@ -1,13 +1,8 @@
1
1
  import React, { forwardRef } from 'react'
2
- import cx from 'classnames'
3
2
  import type { BaseProps } from '@toptal/picasso-shared'
4
- import type { Theme } from '@material-ui/core/styles'
5
- import { makeStyles } from '@material-ui/core/styles'
6
3
  import { Container } from '@toptal/picasso-container'
7
4
  import { Typography } from '@toptal/picasso-typography'
8
5
 
9
- import styles from './styles'
10
-
11
6
  const MIN_VALUE = 0
12
7
  const MAX_VALUE = 100
13
8
 
@@ -19,17 +14,12 @@ export interface Props extends BaseProps {
19
14
  'data-testid'?: string
20
15
  }
21
16
 
22
- const useStyles = makeStyles<Theme, Props>(styles, {
23
- name: 'PicassoProgressBar',
24
- })
25
-
26
17
  const normalizeValue = (value: number) =>
27
18
  Math.min(Math.max(value, MIN_VALUE), MAX_VALUE)
28
19
 
29
20
  export const ProgressBar = forwardRef<HTMLDivElement, Props>(
30
21
  function ProgressBar({ showPercentage = false, ...props }, ref) {
31
22
  const { value, 'data-testid': dataTestId, ...restProps } = props
32
- const classes = useStyles(props)
33
23
 
34
24
  const percentage = normalizeValue(value)
35
25
 
@@ -42,9 +32,10 @@ export const ProgressBar = forwardRef<HTMLDivElement, Props>(
42
32
  {...restProps}
43
33
  ref={ref}
44
34
  >
45
- <div className={cx(classes.progressBar)}>
35
+ {/* TODO(tokens): [PF-1994] 80px / 29px min-widths and 18px line-height are off the Picasso scales */}
36
+ <div className='w-full min-w-[5rem] h-2 bg-gray-300 rounded-sm'>
46
37
  <div
47
- className={cx(classes.progressIndicator)}
38
+ className='h-2 rounded-sm bg-blue-400 transition-[width] duration-300 ease-in-out'
48
39
  style={{
49
40
  width: `${props.value}%`,
50
41
  }}
@@ -57,7 +48,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, Props>(
57
48
  variant='body'
58
49
  size='xsmall'
59
50
  weight='semibold'
60
- className={cx(classes.percentageValue)}
51
+ className='min-w-[1.8125rem] leading-[1.125rem]'
61
52
  >
62
53
  {percentage}%
63
54
  </Typography>
@@ -9,10 +9,10 @@ exports[`ProgressBar renders 1`] = `
9
9
  class="items-center flex"
10
10
  >
11
11
  <div
12
- class="PicassoProgressBar-progressBar"
12
+ class="w-full min-w h-2 bg-gray rounded-sm"
13
13
  >
14
14
  <div
15
- class="PicassoProgressBar-progressIndicator"
15
+ class="h-2 rounded-sm bg-blue transition-[width] duration-300 ease-in"
16
16
  style="width: 50%;"
17
17
  />
18
18
  </div>
@@ -30,10 +30,10 @@ exports[`ProgressBar renders with percentage 1`] = `
30
30
  class="items-center flex"
31
31
  >
32
32
  <div
33
- class="PicassoProgressBar-progressBar"
33
+ class="w-full min-w h-2 bg-gray rounded-sm"
34
34
  >
35
35
  <div
36
- class="PicassoProgressBar-progressIndicator"
36
+ class="h-2 rounded-sm bg-blue transition-[width] duration-300 ease-in"
37
37
  style="width: 50%;"
38
38
  />
39
39
  </div>
@@ -41,7 +41,7 @@ exports[`ProgressBar renders with percentage 1`] = `
41
41
  class="ml-2"
42
42
  >
43
43
  <p
44
- class="m-0 text-xxs text-graphite font-semibold PicassoProgressBar-percentageValue"
44
+ class="m-0 text-xxs text-graphite font-semibold min-w leading-[1.125rem]"
45
45
  >
46
46
  50
47
47
  %
@@ -1,4 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root">;
3
- export default _default;
4
- //# sourceMappingURL=styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/FileList/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAKI"}
@@ -1,7 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- export default ({ palette }) => createStyles({
3
- root: {
4
- borderTop: `1px solid ${palette.grey.lighter2}`,
5
- },
6
- });
7
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FileList/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,SAAS,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;KAChD;CACF,CAAC,CAAA"}
@@ -1,4 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "label" | "root" | "fileNodeContent">;
3
- export default _default;
4
- //# sourceMappingURL=styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/FileListItem/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAIxB,KAAK;AAAlC,wBAaI"}
@@ -1,16 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- import { rem } from '@toptal/picasso-shared';
3
- export default ({ palette }) => createStyles({
4
- root: {
5
- borderBottom: `1px solid ${palette.grey.lighter2}`,
6
- paddingTop: rem('5px'),
7
- paddingBottom: rem('5px'),
8
- },
9
- label: {
10
- lineHeight: rem('22px'),
11
- },
12
- fileNodeContent: {
13
- minWidth: 0,
14
- },
15
- });
16
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FileListItem/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,YAAY,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClD,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;QACtB,aAAa,EAAE,GAAG,CAAC,KAAK,CAAC;KAC1B;IACD,KAAK,EAAE;QACL,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;KACxB;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC,CAAA"}
@@ -1,4 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette, sizes }: Theme) => import("@material-ui/styles").StyleRules<{}, "progressBar" | "progressIndicator" | "percentageValue">;
3
- export default _default;
4
- //# sourceMappingURL=styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ProgressBar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;6CAIjB,KAAK;AAAzC,wBAmBI"}
@@ -1,22 +0,0 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- import { rem } from '@toptal/picasso-shared';
3
- export default ({ palette, sizes }) => createStyles({
4
- progressBar: {
5
- width: '100%',
6
- minWidth: rem('80px'),
7
- height: '0.5rem',
8
- background: palette.grey.light,
9
- borderRadius: sizes.borderRadius.small,
10
- },
11
- progressIndicator: {
12
- height: '0.5rem',
13
- borderRadius: sizes.borderRadius.small,
14
- background: palette.blue.light,
15
- transition: 'width 0.3s ease-in-out',
16
- },
17
- percentageValue: {
18
- minWidth: rem('29px'),
19
- lineHeight: rem('18px'),
20
- },
21
- });
22
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ProgressBar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAS,EAAE,EAAE,CAC3C,YAAY,CAAC;IACX,WAAW,EAAE;QACX,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QAC9B,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK;KACvC;IACD,iBAAiB,EAAE;QACjB,MAAM,EAAE,QAAQ;QAChB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK;QACtC,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QAC9B,UAAU,EAAE,wBAAwB;KACrC;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;KACxB;CACF,CAAC,CAAA"}
@@ -1,9 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles'
2
- import { createStyles } from '@material-ui/core/styles'
3
-
4
- export default ({ palette }: Theme) =>
5
- createStyles({
6
- root: {
7
- borderTop: `1px solid ${palette.grey.lighter2}`,
8
- },
9
- })
@@ -1,18 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles'
2
- import { createStyles } from '@material-ui/core/styles'
3
- import { rem } from '@toptal/picasso-shared'
4
-
5
- export default ({ palette }: Theme) =>
6
- createStyles({
7
- root: {
8
- borderBottom: `1px solid ${palette.grey.lighter2}`,
9
- paddingTop: rem('5px'),
10
- paddingBottom: rem('5px'),
11
- },
12
- label: {
13
- lineHeight: rem('22px'),
14
- },
15
- fileNodeContent: {
16
- minWidth: 0,
17
- },
18
- })
@@ -1,24 +0,0 @@
1
- import type { Theme } from '@material-ui/core/styles'
2
- import { createStyles } from '@material-ui/core/styles'
3
- import { rem } from '@toptal/picasso-shared'
4
-
5
- export default ({ palette, sizes }: Theme) =>
6
- createStyles({
7
- progressBar: {
8
- width: '100%',
9
- minWidth: rem('80px'),
10
- height: '0.5rem',
11
- background: palette.grey.light,
12
- borderRadius: sizes.borderRadius.small,
13
- },
14
- progressIndicator: {
15
- height: '0.5rem',
16
- borderRadius: sizes.borderRadius.small,
17
- background: palette.blue.light,
18
- transition: 'width 0.3s ease-in-out',
19
- },
20
- percentageValue: {
21
- minWidth: rem('29px'),
22
- lineHeight: rem('18px'),
23
- },
24
- })