@toptal/picasso 31.12.4 → 31.13.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.
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import ContentLoader from 'react-content-loader';
3
- import { palette } from '../utils';
3
+ import { loaderPalette } from '../utils';
4
4
  const BORDER_RADIUS = 4;
5
5
  // Extrapolated from `em` styles from @toptal/picasso/Button/styles.ts on the basis of 1em=16px
6
6
  const BUTTON_SIZES = {
@@ -17,7 +17,7 @@ export const ButtonLoader = ({ style, className, size = 'medium', circular = fal
17
17
  const borderRadius = circular ? '50%' : BORDER_RADIUS;
18
18
  const height = BUTTON_SIZES[size];
19
19
  const width = circular ? height : height + BUTTON_HORIZONTAL_PADDINGS[size];
20
- return (React.createElement(ContentLoader, { className: className, viewBox: `0 0 ${width} ${height}`, color: palette.grey.main2, width: width, height: height, style: style },
20
+ return (React.createElement(ContentLoader, { className: className, viewBox: `0 0 ${width} ${height}`, foregroundColor: loaderPalette.foreground, backgroundColor: loaderPalette.background, width: width, height: height, style: style },
21
21
  React.createElement("rect", { x: '0', y: '0', rx: borderRadius, ry: borderRadius, width: width, height: height })));
22
22
  };
23
23
  ButtonLoader.displayName = 'ButtonLoader';
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonLoader.js","sourceRoot":"","sources":["../../src/ButtonLoader/ButtonLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAOlC,MAAM,aAAa,GAAG,CAAC,CAAA;AAEvB,+FAA+F;AAC/F,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAA;AAED,MAAM,0BAA0B,GAAG;IACjC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,GACV,EAAE,EAAE;IACV,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAA;IACrD,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;IACjC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAA;IAE3E,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,EACjC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK;QAEZ,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,EAAE,EAAE,YAAY,EAChB,EAAE,EAAE,YAAY,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"ButtonLoader.js","sourceRoot":"","sources":["../../src/ButtonLoader/ButtonLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAOxC,MAAM,aAAa,GAAG,CAAC,CAAA;AAEvB,+FAA+F;AAC/F,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAA;AAED,MAAM,0BAA0B,GAAG;IACjC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,GACV,EAAE,EAAE;IACV,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAA;IACrD,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;IACjC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAA;IAE3E,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,EACjC,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK;QAEZ,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,EAAE,EAAE,YAAY,EAChB,EAAE,EAAE,YAAY,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
2
  import ContentLoader from 'react-content-loader';
3
- import { palette } from '../utils';
3
+ import { loaderPalette } from '../utils';
4
4
  const HEIGHT = 10;
5
5
  const WIDTH = 200;
6
6
  const CONTAINER_HEIGHT = HEIGHT * 2;
7
7
  const VERTICAL_OFFSET = HEIGHT / 2;
8
8
  const BORDER_RADIUS = HEIGHT / 2;
9
9
  export const HeaderLoader = ({ className, style }) => {
10
- return (React.createElement(ContentLoader, { className: className, color: palette.grey.main2, width: WIDTH, height: CONTAINER_HEIGHT, style: style },
10
+ return (React.createElement(ContentLoader, { className: className, foregroundColor: loaderPalette.foreground, backgroundColor: loaderPalette.background, width: WIDTH, height: CONTAINER_HEIGHT, style: style },
11
11
  React.createElement("rect", { x: '0', y: VERTICAL_OFFSET, rx: BORDER_RADIUS, ry: BORDER_RADIUS, width: '100%', height: HEIGHT })));
12
12
  };
13
13
  HeaderLoader.displayName = 'HeaderLoader';
@@ -1 +1 @@
1
- {"version":3,"file":"HeaderLoader.js","sourceRoot":"","sources":["../../src/HeaderLoader/HeaderLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,MAAM,MAAM,GAAG,EAAE,CAAA;AACjB,MAAM,KAAK,GAAG,GAAG,CAAA;AACjB,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAA;AACnC,MAAM,eAAe,GAAG,MAAM,GAAG,CAAC,CAAA;AAClC,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,CAAA;AAIhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAS,EAAE,EAAE;IAC1D,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EACzB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,gBAAgB,EACxB,KAAK,EAAE,KAAK;QAEZ,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAE,eAAe,EAClB,EAAE,EAAE,aAAa,EACjB,EAAE,EAAE,aAAa,EACjB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"HeaderLoader.js","sourceRoot":"","sources":["../../src/HeaderLoader/HeaderLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC,MAAM,MAAM,GAAG,EAAE,CAAA;AACjB,MAAM,KAAK,GAAG,GAAG,CAAA;AACjB,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAA;AACnC,MAAM,eAAe,GAAG,MAAM,GAAG,CAAC,CAAA;AAClC,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,CAAA;AAIhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAS,EAAE,EAAE;IAC1D,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,gBAAgB,EACxB,KAAK,EAAE,KAAK;QAEZ,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAE,eAAe,EAClB,EAAE,EAAE,aAAa,EACjB,EAAE,EAAE,aAAa,EACjB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
@@ -1,7 +1,7 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import ContentLoader from 'react-content-loader';
3
3
  import { pxFromRem } from '@toptal/picasso-shared';
4
- import { palette } from '../utils';
4
+ import { loaderPalette } from '../utils';
5
5
  const BORDER_RADIUS = '5px';
6
6
  const AVATAR_SIZES = {
7
7
  xxsmall: 32,
@@ -54,7 +54,7 @@ export const MediaSkeletonLoader = (props) => {
54
54
  const { className, style } = props;
55
55
  const { width, height, borderRadius } = useMemo(() => getAttributes(props), [props]);
56
56
  const viewBox = `0 0 ${width} ${height}`;
57
- return (React.createElement(ContentLoader, { viewBox: viewBox, color: palette.grey.main2, width: width, height: height, "data-testid": props['data-testid'], className: className, style: style },
57
+ return (React.createElement(ContentLoader, { viewBox: viewBox, foregroundColor: loaderPalette.foreground, backgroundColor: loaderPalette.background, width: width, height: height, "data-testid": props['data-testid'], className: className, style: style },
58
58
  React.createElement("rect", { x: '0', y: '0', rx: borderRadius, ry: borderRadius, width: width, height: height })));
59
59
  };
60
60
  MediaSkeletonLoader.displayName = 'MediaSkeletonLoader';
@@ -1 +1 @@
1
- {"version":3,"file":"MediaSkeletonLoader.js","sourceRoot":"","sources":["../../src/MediaSkeletonLoader/MediaSkeletonLoader.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"MediaSkeletonLoader.js","sourceRoot":"","sources":["../../src/MediaSkeletonLoader/MediaSkeletonLoader.tsx"],"names":[],"mappings":"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"}
@@ -1,13 +1,13 @@
1
1
  /* eslint-disable react/no-array-index-key */
2
2
  import React from 'react';
3
3
  import ContentLoader from 'react-content-loader';
4
- import { palette } from '../utils';
4
+ import { loaderPalette } from '../utils';
5
5
  const WIDTH = '100%';
6
6
  const HEIGHT = 10;
7
7
  const CONTAINER_HEIGHT = HEIGHT * 2;
8
8
  const VERTICAL_OFFSET = HEIGHT / 2;
9
9
  const BORDER_RADIUS = HEIGHT / 2;
10
- const Paragraph = ({ className, style = {} }) => (React.createElement(ContentLoader, { className: className, color: palette.grey.main2, height: CONTAINER_HEIGHT, style: Object.assign({ width: WIDTH }, style) },
10
+ const Paragraph = ({ className, style = {} }) => (React.createElement(ContentLoader, { className: className, foregroundColor: loaderPalette.foreground, backgroundColor: loaderPalette.background, height: CONTAINER_HEIGHT, style: Object.assign({ width: WIDTH }, style) },
11
11
  React.createElement("rect", { x: '0', y: VERTICAL_OFFSET, rx: BORDER_RADIUS, ry: BORDER_RADIUS, width: WIDTH, height: HEIGHT })));
12
12
  export const TypographyLoader = ({ className, rows = 1, style }) => (React.createElement(React.Fragment, null, Array.from({ length: rows }).map((_, index) => (React.createElement(Paragraph, { className: className, key: index, style: style })))));
13
13
  TypographyLoader.displayName = 'TypographyLoader';
@@ -1 +1 @@
1
- {"version":3,"file":"TypographyLoader.js","sourceRoot":"","sources":["../../src/TypographyLoader/TypographyLoader.tsx"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAOlC,MAAM,KAAK,GAAG,MAAM,CAAA;AACpB,MAAM,MAAM,GAAG,EAAE,CAAA;AACjB,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAA;AACnC,MAAM,eAAe,GAAG,MAAM,GAAG,CAAC,CAAA;AAClC,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,CAAA;AAEhC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAa,EAAE,EAAE,CAAC,CAC1D,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,EACzB,MAAM,EAAE,gBAAgB,EACxB,KAAK,kBAAI,KAAK,EAAE,KAAK,IAAK,KAAK;IAE/B,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAE,eAAe,EAClB,EAAE,EAAE,aAAa,EACjB,EAAE,EAAE,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACzE,0CACG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,oBAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAC9D,CAAC,CACD,CACJ,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}
1
+ {"version":3,"file":"TypographyLoader.js","sourceRoot":"","sources":["../../src/TypographyLoader/TypographyLoader.tsx"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAOxC,MAAM,KAAK,GAAG,MAAM,CAAA;AACpB,MAAM,MAAM,GAAG,EAAE,CAAA;AACjB,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAA;AACnC,MAAM,eAAe,GAAG,MAAM,GAAG,CAAC,CAAA;AAClC,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,CAAA;AAEhC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAa,EAAE,EAAE,CAAC,CAC1D,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,MAAM,EAAE,gBAAgB,EACxB,KAAK,kBAAI,KAAK,EAAE,KAAK,IAAK,KAAK;IAE/B,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAE,eAAe,EAClB,EAAE,EAAE,aAAa,EACjB,EAAE,EAAE,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACzE,0CACG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,oBAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAC9D,CAAC,CACD,CACJ,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso",
3
- "version": "31.12.4",
3
+ "version": "31.13.0",
4
4
  "description": "Toptal UI components library",
5
5
  "publishConfig": {
6
6
  "access": "public",
package/utils/index.d.ts CHANGED
@@ -25,6 +25,7 @@ export { default as toTitleCase } from './to-title-case';
25
25
  export { default as useCombinedRefs } from './use-combined-refs';
26
26
  export { default as useSafeState } from './use-safe-state';
27
27
  export { default as useWidthOf } from './use-width-of';
28
+ export { default as loaderPalette } from './loader-palette';
28
29
  export { default as unsafeErrorLog } from './unsafe-error-log';
29
30
  export { default as useBoolean } from './useBoolean/use-boolean';
30
31
  export { default as sum } from './sum';
package/utils/index.js CHANGED
@@ -25,6 +25,7 @@ export { default as toTitleCase } from './to-title-case';
25
25
  export { default as useCombinedRefs } from './use-combined-refs';
26
26
  export { default as useSafeState } from './use-safe-state';
27
27
  export { default as useWidthOf } from './use-width-of';
28
+ export { default as loaderPalette } from './loader-palette';
28
29
  export { default as unsafeErrorLog } from './unsafe-error-log';
29
30
  export { default as useBoolean } from './useBoolean/use-boolean';
30
31
  export { default as sum } from './sum';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,eAAe,MAAM,eAAe,CAAA;AAEhD,MAAM,UAAU,GAAG;IACjB,KAAK;IACL,OAAO;IACP,MAAM;CACP,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,OAAO,EACL,eAAe,IAAI,WAAW,EAC9B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,IAAI,OAAO,EACjB,oBAAoB,EACpB,oCAAoC,EACpC,KAAK,GACN,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE7E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAElF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAEnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG1E,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAA;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7E,cAAc,+BAA+B,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,eAAe,MAAM,eAAe,CAAA;AAEhD,MAAM,UAAU,GAAG;IACjB,KAAK;IACL,OAAO;IACP,MAAM;CACP,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,OAAO,EACL,eAAe,IAAI,WAAW,EAC9B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,IAAI,OAAO,EACjB,oBAAoB,EACpB,oCAAoC,EACpC,KAAK,GACN,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE7E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAElF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAEnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG1E,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAA;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7E,cAAc,+BAA+B,CAAA"}
@@ -0,0 +1,5 @@
1
+ declare const loaderColors: {
2
+ foreground: string;
3
+ background: string;
4
+ };
5
+ export default loaderColors;
@@ -0,0 +1,8 @@
1
+ import { alpha } from '@toptal/picasso-shared';
2
+ import { colors } from '@toptal/picasso-provider';
3
+ const loaderColors = {
4
+ foreground: alpha(colors.grey.main2, 0.16),
5
+ background: alpha(colors.grey.main2, 0.04),
6
+ };
7
+ export default loaderColors;
8
+ //# sourceMappingURL=loader-palette.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"loader-palette.js","sourceRoot":"","sources":["../../src/utils/loader-palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AAEjD,MAAM,YAAY,GAAG;IACnB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC;IAC1C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC;CAC3C,CAAA;AAED,eAAe,YAAY,CAAA"}