@toptal/picasso-grid 5.0.11-alpha-1757603192867.0 → 5.0.11-alpha-FF-49-enhance-publishing-6b5d306f0.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 (49) hide show
  1. package/dist-package/src/Grid/Grid.d.ts +24 -0
  2. package/dist-package/src/Grid/Grid.d.ts.map +1 -0
  3. package/dist-package/src/Grid/Grid.js +77 -0
  4. package/dist-package/src/Grid/Grid.js.map +1 -0
  5. package/dist-package/src/Grid/index.d.ts +6 -0
  6. package/dist-package/src/Grid/index.d.ts.map +1 -0
  7. package/dist-package/src/Grid/index.js +2 -0
  8. package/dist-package/src/Grid/index.js.map +1 -0
  9. package/dist-package/src/Grid/utils/get-grid-spacing-class-name.d.ts +3 -0
  10. package/dist-package/src/Grid/utils/get-grid-spacing-class-name.d.ts.map +1 -0
  11. package/dist-package/src/Grid/utils/get-grid-spacing-class-name.js +18 -0
  12. package/dist-package/src/Grid/utils/get-grid-spacing-class-name.js.map +1 -0
  13. package/dist-package/src/GridCompound/index.d.ts +5 -0
  14. package/dist-package/src/GridCompound/index.d.ts.map +1 -0
  15. package/dist-package/src/GridCompound/index.js +4 -0
  16. package/dist-package/src/GridCompound/index.js.map +1 -0
  17. package/dist-package/src/GridContext/GridContext.d.ts +8 -0
  18. package/dist-package/src/GridContext/GridContext.d.ts.map +1 -0
  19. package/dist-package/src/GridContext/GridContext.js +3 -0
  20. package/dist-package/src/GridContext/GridContext.js.map +1 -0
  21. package/dist-package/src/GridContext/index.d.ts +2 -0
  22. package/dist-package/src/GridContext/index.d.ts.map +1 -0
  23. package/dist-package/src/GridContext/index.js +2 -0
  24. package/dist-package/src/GridContext/index.js.map +1 -0
  25. package/dist-package/src/GridItem/GridItem.d.ts +23 -0
  26. package/dist-package/src/GridItem/GridItem.d.ts.map +1 -0
  27. package/dist-package/src/GridItem/GridItem.js +47 -0
  28. package/dist-package/src/GridItem/GridItem.js.map +1 -0
  29. package/dist-package/src/GridItem/index.d.ts +6 -0
  30. package/dist-package/src/GridItem/index.d.ts.map +1 -0
  31. package/dist-package/src/GridItem/index.js +2 -0
  32. package/dist-package/src/GridItem/index.js.map +1 -0
  33. package/dist-package/src/GridItem/utils/get-class-names-for-breakpoint.d.ts +4 -0
  34. package/dist-package/src/GridItem/utils/get-class-names-for-breakpoint.d.ts.map +1 -0
  35. package/dist-package/src/GridItem/utils/get-class-names-for-breakpoint.js +206 -0
  36. package/dist-package/src/GridItem/utils/get-class-names-for-breakpoint.js.map +1 -0
  37. package/dist-package/src/GridItem/utils/get-sizes-class-names.d.ts +3 -0
  38. package/dist-package/src/GridItem/utils/get-sizes-class-names.d.ts.map +1 -0
  39. package/dist-package/src/GridItem/utils/get-sizes-class-names.js +9 -0
  40. package/dist-package/src/GridItem/utils/get-sizes-class-names.js.map +1 -0
  41. package/dist-package/src/index.d.ts +4 -0
  42. package/dist-package/src/index.d.ts.map +1 -0
  43. package/dist-package/src/index.js +4 -0
  44. package/dist-package/src/index.js.map +1 -0
  45. package/dist-package/src/types.d.ts +7 -0
  46. package/dist-package/src/types.d.ts.map +1 -0
  47. package/dist-package/src/types.js +2 -0
  48. package/dist-package/src/types.js.map +1 -0
  49. package/package.json +11 -11
@@ -0,0 +1,24 @@
1
+ import type { ReactNode, HTMLAttributes } from 'react';
2
+ import React from 'react';
3
+ import { type BaseProps } from '@toptal/picasso-shared';
4
+ import type { GridDirection, GridItemsAlignment, GridJustification, GridSpacing, GridWrap } from '../types';
5
+ export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
6
+ /** Grid content containing Grid.Item */
7
+ children?: ReactNode;
8
+ /** Defines amount of space between Grid.Item components (in px). If spacing is not set, then it will
9
+ * be automatically adjusted based on the screen size (16px for screens smaller than medium, 24px
10
+ * for medium screens, and 32px for screens bigger than medium)
11
+ */
12
+ spacing?: GridSpacing;
13
+ /** Defines the orientation of the grid */
14
+ direction?: GridDirection;
15
+ /** Defines the align-items style property based on the direction */
16
+ alignItems?: GridItemsAlignment;
17
+ /** Defines the justify-content style property based on the direction */
18
+ justifyContent?: GridJustification;
19
+ /** Defines the flex-wrap style property based on the direction */
20
+ wrap?: GridWrap;
21
+ }
22
+ export declare const Grid: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
23
+ export default Grid;
24
+ //# sourceMappingURL=Grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAKvD,OAAO,KAAK,EACV,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACT,MAAM,UAAU,CAAA;AAEjB,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC;IACnE,wCAAwC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,oEAAoE;IACpE,UAAU,CAAC,EAAE,kBAAkB,CAAA;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,iBAAiB,CAAA;IAClC,kEAAkE;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB;AAkDD,eAAO,MAAM,IAAI,8EA+Cf,CAAA;AAWF,eAAe,IAAI,CAAA"}
@@ -0,0 +1,77 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React, { forwardRef } from 'react';
13
+ import { twMerge } from '@toptal/picasso-tailwind-merge';
14
+ import { useCurrentBreakpointRange } from '@toptal/picasso-provider';
15
+ import { GridContext } from '../GridContext';
16
+ import { getGridSpacingClassName } from './utils/get-grid-spacing-class-name';
17
+ const responsiveSpacingConfiguration = {
18
+ xs: 16,
19
+ sm: 16,
20
+ md: 24,
21
+ lg: 32,
22
+ xl: 32,
23
+ };
24
+ const useResponsiveSpacing = () => {
25
+ const { currentBreakpointRange } = useCurrentBreakpointRange();
26
+ if (currentBreakpointRange) {
27
+ return responsiveSpacingConfiguration[currentBreakpointRange];
28
+ }
29
+ return responsiveSpacingConfiguration.md;
30
+ };
31
+ const directionClassNamesMapping = {
32
+ row: 'flex-row',
33
+ 'row-reverse': 'flex-row-reverse',
34
+ column: 'flex-col',
35
+ 'column-reverse': 'flex-col-reverse',
36
+ };
37
+ const wrapClassNamesMapping = {
38
+ wrap: 'flex-wrap',
39
+ nowrap: 'flex-nowrap',
40
+ 'wrap-reverse': 'flex-wrap-reverse',
41
+ };
42
+ const alignItemsClassNamesMapping = {
43
+ 'flex-start': 'items-start',
44
+ center: 'items-center',
45
+ 'flex-end': 'items-end',
46
+ stretch: 'items-stretch',
47
+ baseline: 'items-baseline',
48
+ };
49
+ const justifyContentClassNamesMapping = {
50
+ 'flex-start': 'justify-start',
51
+ center: 'justify-center',
52
+ 'flex-end': 'justify-end',
53
+ 'space-between': 'justify-between',
54
+ 'space-around': 'justify-around',
55
+ 'space-evenly': 'justify-evenly',
56
+ };
57
+ export const Grid = forwardRef(function Grid(props, ref) {
58
+ const { children, spacing: userSpacing, direction = 'row', alignItems = 'flex-start', justifyContent = 'flex-start', wrap = 'wrap', className } = props, rest = __rest(props, ["children", "spacing", "direction", "alignItems", "justifyContent", "wrap", "className"]);
59
+ const responsiveSpacing = useResponsiveSpacing();
60
+ const gridSpacing = userSpacing !== null && userSpacing !== void 0 ? userSpacing : responsiveSpacing;
61
+ const directionClassName = directionClassNamesMapping[direction];
62
+ const wrapClassName = wrapClassNamesMapping[wrap];
63
+ const alignItemsClassName = alignItemsClassNamesMapping[alignItems];
64
+ const justifyContentClassName = justifyContentClassNamesMapping[justifyContent];
65
+ const gridSpacingClassName = getGridSpacingClassName(gridSpacing);
66
+ return (React.createElement(GridContext.Provider, { value: { gridSpacing } },
67
+ React.createElement("div", Object.assign({ ref: ref }, rest, { className: twMerge('box-border', 'flex', 'w-full', directionClassName, wrapClassName, alignItemsClassName, justifyContentClassName, gridSpacingClassName, className) }), children)));
68
+ });
69
+ Grid.defaultProps = {
70
+ alignItems: 'flex-start',
71
+ direction: 'row',
72
+ justifyContent: 'flex-start',
73
+ wrap: 'wrap',
74
+ };
75
+ Grid.displayName = 'Grid';
76
+ export default Grid;
77
+ //# sourceMappingURL=Grid.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/Grid/Grid.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,6 @@
1
+ import type { OmitInternalProps } from '@toptal/picasso-shared';
2
+ import type { Props } from './Grid';
3
+ export { default as Grid } from './Grid';
4
+ export declare type GridProps = OmitInternalProps<Props>;
5
+ export type { GridSize } from '@material-ui/core/Grid';
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAEnC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,oBAAY,SAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AAChD,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA"}
@@ -0,0 +1,2 @@
1
+ export { default as Grid } from './Grid';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Grid/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}
@@ -0,0 +1,3 @@
1
+ import type { GridSpacing } from '../../types';
2
+ export declare const getGridSpacingClassName: (spacing: GridSpacing) => string;
3
+ //# sourceMappingURL=get-grid-spacing-class-name.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-grid-spacing-class-name.d.ts","sourceRoot":"","sources":["../../../../src/Grid/utils/get-grid-spacing-class-name.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAa9C,eAAO,MAAM,uBAAuB,YAAa,WAAW,WAO3D,CAAA"}
@@ -0,0 +1,18 @@
1
+ const gridWidthAndMarginMapping = {
2
+ 0: 'w-[calc(100%+0px)] -m-[0px]',
3
+ 8: 'w-[calc(100%+8px)] -m-[4px]',
4
+ 16: 'w-[calc(100%+16px)] -m-[8px]',
5
+ 24: 'w-[calc(100%+24px)] -m-[12px]',
6
+ 32: 'w-[calc(100%+32px)] -m-[16px]',
7
+ 64: 'w-[calc(100%+64px)] -m-[32px]',
8
+ 72: 'w-[calc(100%+72px)] -m-[36px]',
9
+ 80: 'w-[calc(100%+80px)] -m-[40px]',
10
+ };
11
+ export const getGridSpacingClassName = (spacing) => {
12
+ if (!spacing || !gridWidthAndMarginMapping[spacing]) {
13
+ return '';
14
+ }
15
+ // Negative margin has half of the spacing value to properly handle space on sides of grid
16
+ return gridWidthAndMarginMapping[spacing];
17
+ };
18
+ //# sourceMappingURL=get-grid-spacing-class-name.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-grid-spacing-class-name.js","sourceRoot":"","sources":["../../../../src/Grid/utils/get-grid-spacing-class-name.ts"],"names":[],"mappings":"AAEA,MAAM,yBAAyB,GAAmC;IAChE,CAAC,EAAE,6BAA6B;IAChC,CAAC,EAAE,6BAA6B;IAChC,EAAE,EAAE,8BAA8B;IAClC,EAAE,EAAE,+BAA+B;IACnC,EAAE,EAAE,+BAA+B;IACnC,EAAE,EAAE,+BAA+B;IACnC,EAAE,EAAE,+BAA+B;IACnC,EAAE,EAAE,+BAA+B;CACpC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,OAAoB,EAAE,EAAE;IAC9D,IAAI,CAAC,OAAO,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,EAAE;QACnD,OAAO,EAAE,CAAA;KACV;IAED,0FAA0F;IAC1F,OAAO,yBAAyB,CAAC,OAAO,CAAC,CAAA;AAC3C,CAAC,CAAA"}
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ export declare const GridCompound: import("react").ForwardRefExoticComponent<import("../Grid/Grid").Props & import("react").RefAttributes<HTMLDivElement>> & {
3
+ Item: import("react").ForwardRefExoticComponent<import("../GridItem/GridItem").Props & import("react").RefAttributes<HTMLDivElement>>;
4
+ };
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GridCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;CAA0C,CAAA"}
@@ -0,0 +1,4 @@
1
+ import { Grid } from '../Grid';
2
+ import { GridItem } from '../GridItem';
3
+ export const GridCompound = Object.assign(Grid, { Item: GridItem });
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/GridCompound/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAA"}
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import type { GridSpacing } from '../types';
3
+ export interface GridContextProps {
4
+ gridSpacing?: GridSpacing;
5
+ }
6
+ declare const _default: import("react").Context<GridContextProps>;
7
+ export default _default;
8
+ //# sourceMappingURL=GridContext.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GridContext.d.ts","sourceRoot":"","sources":["../../../src/GridContext/GridContext.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;;AAED,wBAAkD"}
@@ -0,0 +1,3 @@
1
+ import { createContext } from 'react';
2
+ export default createContext({});
3
+ //# sourceMappingURL=GridContext.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GridContext.js","sourceRoot":"","sources":["../../../src/GridContext/GridContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAQrC,eAAe,aAAa,CAAmB,EAAE,CAAC,CAAA"}
@@ -0,0 +1,2 @@
1
+ export { default as GridContext } from './GridContext';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GridContext/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}
@@ -0,0 +1,2 @@
1
+ export { default as GridContext } from './GridContext';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/GridContext/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}
@@ -0,0 +1,23 @@
1
+ import type { ReactNode, HTMLAttributes } from 'react';
2
+ import React from 'react';
3
+ import { type BaseProps } from '@toptal/picasso-shared';
4
+ import type { GridSize } from '../types';
5
+ export interface GridSizes {
6
+ /** Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority */
7
+ xs?: boolean | GridSize;
8
+ /** Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens */
9
+ sm?: boolean | GridSize;
10
+ /** Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens */
11
+ md?: boolean | GridSize;
12
+ /** Defines the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens */
13
+ lg?: boolean | GridSize;
14
+ /** Defines the number of grids the component is going to use. It's applied for the xl breakpoint and wider screens */
15
+ xl?: boolean | GridSize;
16
+ }
17
+ export interface Props extends BaseProps, GridSizes, HTMLAttributes<HTMLElement> {
18
+ /** Content of Grid.Item */
19
+ children?: ReactNode;
20
+ }
21
+ export declare const GridItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
22
+ export default GridItem;
23
+ //# sourceMappingURL=GridItem.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../../src/GridItem/GridItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAiC,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,UAAU,CAAA;AAGrD,MAAM,WAAW,SAAS;IACxB,gIAAgI;IAChI,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,sHAAsH;IACtH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,sHAAsH;IACtH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,sHAAsH;IACtH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,sHAAsH;IACtH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CACxB;AAED,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,SAAS,EACT,cAAc,CAAC,WAAW,CAAC;IAC7B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAqBD,eAAO,MAAM,QAAQ,8EAiCnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
@@ -0,0 +1,47 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React, { forwardRef, useContext } from 'react';
13
+ import { twMerge } from '@toptal/picasso-tailwind-merge';
14
+ import { GridContext } from '../GridContext';
15
+ import { getSizesClassNames } from './utils/get-sizes-class-names';
16
+ const gridSpacingMapping = {
17
+ 0: 'p-[0px]',
18
+ 8: 'p-[4px]',
19
+ 16: 'p-[8px]',
20
+ 24: 'p-[12px]',
21
+ 32: 'p-[16px]',
22
+ 64: 'p-[32px]',
23
+ 72: 'p-[36px]',
24
+ 80: 'p-[40px]',
25
+ };
26
+ const getSpacingClassName = (gridSpacing) => {
27
+ if (!gridSpacing) {
28
+ return '';
29
+ }
30
+ return gridSpacingMapping[gridSpacing];
31
+ };
32
+ export const GridItem = forwardRef(function GridItem(props, ref) {
33
+ const { children, xs, sm, md, lg, xl, className, style } = props, rest = __rest(props, ["children", "xs", "sm", "md", "lg", "xl", "className", "style"]);
34
+ const { gridSpacing } = useContext(GridContext);
35
+ const spacingClassName = getSpacingClassName(gridSpacing);
36
+ const sizesClassNames = getSizesClassNames({
37
+ xs,
38
+ sm,
39
+ md,
40
+ lg,
41
+ xl,
42
+ });
43
+ return (React.createElement("div", Object.assign({ ref: ref, style: style }, rest, { className: twMerge('box-border', 'm-0', spacingClassName, sizesClassNames, className) }), children));
44
+ });
45
+ GridItem.displayName = 'GridItem';
46
+ export default GridItem;
47
+ //# sourceMappingURL=GridItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GridItem.js","sourceRoot":"","sources":["../../../src/GridItem/GridItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAuBlE,MAAM,kBAAkB,GAAmC;IACzD,CAAC,EAAE,SAAS;IACZ,CAAC,EAAE,SAAS;IACZ,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACf,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,WAAyB,EAAE,EAAE;IACxD,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,EAAE,CAAA;KACV;IAED,OAAO,kBAAkB,CAAC,WAAW,CAAC,CAAA;AACxC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAnE,gEAA2D,CAAQ,CAAA;IAEzE,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAC/C,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,WAAW,CAAC,CAAA;IAEzD,MAAM,eAAe,GAAG,kBAAkB,CAAC;QACzC,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;KACH,CAAC,CAAA;IAEF,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACR,IAAI,IACR,SAAS,EAAE,OAAO,CAChB,YAAY,EACZ,KAAK,EACL,gBAAgB,EAChB,eAAe,EACf,SAAS,CACV,KAEA,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
@@ -0,0 +1,6 @@
1
+ import type { OmitInternalProps } from '@toptal/picasso-shared';
2
+ import type { Props, GridSizes } from './GridItem';
3
+ export { default as GridItem } from './GridItem';
4
+ export declare type GridItemProps = OmitInternalProps<Props>;
5
+ export declare type GridSizeProps = GridSizes;
6
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GridItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,oBAAY,aAAa,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;AACpD,oBAAY,aAAa,GAAG,SAAS,CAAA"}
@@ -0,0 +1,2 @@
1
+ export { default as GridItem } from './GridItem';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/GridItem/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA"}
@@ -0,0 +1,4 @@
1
+ import type { BreakpointKeys } from '@toptal/picasso-provider';
2
+ import type { GridSize } from '../../types';
3
+ export declare const getClassNamesForBreakpoint: (breakpointKey: BreakpointKeys, size?: GridSize | boolean) => string[];
4
+ //# sourceMappingURL=get-class-names-for-breakpoint.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-class-names-for-breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/GridItem/utils/get-class-names-for-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AA0L3C,eAAO,MAAM,0BAA0B,kBACtB,cAAc,SACtB,QAAQ,GAAG,OAAO,aAwB1B,CAAA"}
@@ -0,0 +1,206 @@
1
+ const growMapping = {
2
+ xs: {
3
+ grow: 'xs:grow',
4
+ 'grow-0': 'xs:grow-0',
5
+ },
6
+ sm: {
7
+ grow: 'sm:grow',
8
+ 'grow-0': 'sm:grow-0',
9
+ },
10
+ md: {
11
+ grow: 'md:grow',
12
+ 'grow-0': 'md:grow-0',
13
+ },
14
+ lg: {
15
+ grow: 'lg:grow',
16
+ 'grow-0': 'lg:grow-0',
17
+ },
18
+ xl: {
19
+ grow: 'xl:grow',
20
+ 'grow-0': 'xl:grow-0',
21
+ },
22
+ };
23
+ const maxWidthMapping = {
24
+ xs: {
25
+ full: 'xs:max-w-full',
26
+ none: 'xs:max-w-none',
27
+ '1/12': 'xs:max-w-1/12',
28
+ '2/12': 'xs:max-w-2/12',
29
+ '3/12': 'xs:max-w-3/12',
30
+ '4/12': 'xs:max-w-4/12',
31
+ '5/12': 'xs:max-w-5/12',
32
+ '6/12': 'xs:max-w-6/12',
33
+ '7/12': 'xs:max-w-7/12',
34
+ '8/12': 'xs:max-w-8/12',
35
+ '9/12': 'xs:max-w-9/12',
36
+ '10/12': 'xs:max-w-10/12',
37
+ '11/12': 'xs:max-w-11/12',
38
+ },
39
+ sm: {
40
+ full: 'sm:max-w-full',
41
+ none: 'sm:max-w-none',
42
+ '1/12': 'sm:max-w-1/12',
43
+ '2/12': 'sm:max-w-2/12',
44
+ '3/12': 'sm:max-w-3/12',
45
+ '4/12': 'sm:max-w-4/12',
46
+ '5/12': 'sm:max-w-5/12',
47
+ '6/12': 'sm:max-w-6/12',
48
+ '7/12': 'sm:max-w-7/12',
49
+ '8/12': 'sm:max-w-8/12',
50
+ '9/12': 'sm:max-w-9/12',
51
+ '10/12': 'sm:max-w-10/12',
52
+ '11/12': 'sm:max-w-11/12',
53
+ },
54
+ md: {
55
+ full: 'md:max-w-full',
56
+ none: 'md:max-w-none',
57
+ '1/12': 'md:max-w-1/12',
58
+ '2/12': 'md:max-w-2/12',
59
+ '3/12': 'md:max-w-3/12',
60
+ '4/12': 'md:max-w-4/12',
61
+ '5/12': 'md:max-w-5/12',
62
+ '6/12': 'md:max-w-6/12',
63
+ '7/12': 'md:max-w-7/12',
64
+ '8/12': 'md:max-w-8/12',
65
+ '9/12': 'md:max-w-9/12',
66
+ '10/12': 'md:max-w-10/12',
67
+ '11/12': 'md:max-w-11/12',
68
+ },
69
+ lg: {
70
+ full: 'lg:max-w-full',
71
+ none: 'lg:max-w-none',
72
+ '1/12': 'lg:max-w-1/12',
73
+ '2/12': 'lg:max-w-2/12',
74
+ '3/12': 'lg:max-w-3/12',
75
+ '4/12': 'lg:max-w-4/12',
76
+ '5/12': 'lg:max-w-5/12',
77
+ '6/12': 'lg:max-w-6/12',
78
+ '7/12': 'lg:max-w-7/12',
79
+ '8/12': 'lg:max-w-8/12',
80
+ '9/12': 'lg:max-w-9/12',
81
+ '10/12': 'lg:max-w-10/12',
82
+ '11/12': 'lg:max-w-11/12',
83
+ },
84
+ xl: {
85
+ full: 'xl:max-w-full',
86
+ none: 'xl:max-w-none',
87
+ '1/12': 'xl:max-w-1/12',
88
+ '2/12': 'xl:max-w-2/12',
89
+ '3/12': 'xl:max-w-3/12',
90
+ '4/12': 'xl:max-w-4/12',
91
+ '5/12': 'xl:max-w-5/12',
92
+ '6/12': 'xl:max-w-6/12',
93
+ '7/12': 'xl:max-w-7/12',
94
+ '8/12': 'xl:max-w-8/12',
95
+ '9/12': 'xl:max-w-9/12',
96
+ '10/12': 'xl:max-w-10/12',
97
+ '11/12': 'xl:max-w-11/12',
98
+ },
99
+ };
100
+ const basisMapping = {
101
+ xs: {
102
+ auto: 'xs:basis-auto',
103
+ '0': 'xs:basis-0',
104
+ '1/12': 'xs:basis-1/12',
105
+ '2/12': 'xs:basis-2/12',
106
+ '3/12': 'xs:basis-3/12',
107
+ '4/12': 'xs:basis-4/12',
108
+ '5/12': 'xs:basis-5/12',
109
+ '6/12': 'xs:basis-6/12',
110
+ '7/12': 'xs:basis-7/12',
111
+ '8/12': 'xs:basis-8/12',
112
+ '9/12': 'xs:basis-9/12',
113
+ '10/12': 'xs:basis-10/12',
114
+ '11/12': 'xs:basis-11/12',
115
+ full: 'xs:basis-full',
116
+ },
117
+ sm: {
118
+ auto: 'sm:basis-auto',
119
+ '0': 'sm:basis-0',
120
+ '1/12': 'sm:basis-1/12',
121
+ '2/12': 'sm:basis-2/12',
122
+ '3/12': 'sm:basis-3/12',
123
+ '4/12': 'sm:basis-4/12',
124
+ '5/12': 'sm:basis-5/12',
125
+ '6/12': 'sm:basis-6/12',
126
+ '7/12': 'sm:basis-7/12',
127
+ '8/12': 'sm:basis-8/12',
128
+ '9/12': 'sm:basis-9/12',
129
+ '10/12': 'sm:basis-10/12',
130
+ '11/12': 'sm:basis-11/12',
131
+ full: 'sm:basis-full',
132
+ },
133
+ md: {
134
+ auto: 'md:basis-auto',
135
+ '0': 'md:basis-0',
136
+ '1/12': 'md:basis-1/12',
137
+ '2/12': 'md:basis-2/12',
138
+ '3/12': 'md:basis-3/12',
139
+ '4/12': 'md:basis-4/12',
140
+ '5/12': 'md:basis-5/12',
141
+ '6/12': 'md:basis-6/12',
142
+ '7/12': 'md:basis-7/12',
143
+ '8/12': 'md:basis-8/12',
144
+ '9/12': 'md:basis-9/12',
145
+ '10/12': 'md:basis-10/12',
146
+ '11/12': 'md:basis-11/12',
147
+ full: 'md:basis-full',
148
+ },
149
+ lg: {
150
+ auto: 'lg:basis-auto',
151
+ '0': 'lg:basis-0',
152
+ '1/12': 'lg:basis-1/12',
153
+ '2/12': 'lg:basis-2/12',
154
+ '3/12': 'lg:basis-3/12',
155
+ '4/12': 'lg:basis-4/12',
156
+ '5/12': 'lg:basis-5/12',
157
+ '6/12': 'lg:basis-6/12',
158
+ '7/12': 'lg:basis-7/12',
159
+ '8/12': 'lg:basis-8/12',
160
+ '9/12': 'lg:basis-9/12',
161
+ '10/12': 'lg:basis-10/12',
162
+ '11/12': 'lg:basis-11/12',
163
+ full: 'lg:basis-full',
164
+ },
165
+ xl: {
166
+ auto: 'xl:basis-auto',
167
+ '0': 'xl:basis-0',
168
+ '1/12': 'xl:basis-1/12',
169
+ '2/12': 'xl:basis-2/12',
170
+ '3/12': 'xl:basis-3/12',
171
+ '4/12': 'xl:basis-4/12',
172
+ '5/12': 'xl:basis-5/12',
173
+ '6/12': 'xl:basis-6/12',
174
+ '7/12': 'xl:basis-7/12',
175
+ '8/12': 'xl:basis-8/12',
176
+ '9/12': 'xl:basis-9/12',
177
+ '10/12': 'xl:basis-10/12',
178
+ '11/12': 'xl:basis-11/12',
179
+ full: 'xl:basis-full',
180
+ },
181
+ };
182
+ export const getClassNamesForBreakpoint = (breakpointKey, size) => {
183
+ if (size === true) {
184
+ return [
185
+ basisMapping[breakpointKey]['0'],
186
+ growMapping[breakpointKey]['grow'],
187
+ maxWidthMapping[breakpointKey]['full'],
188
+ ];
189
+ }
190
+ else if (size === 'auto') {
191
+ return [
192
+ basisMapping[breakpointKey]['auto'],
193
+ growMapping[breakpointKey]['grow-0'],
194
+ maxWidthMapping[breakpointKey]['none'],
195
+ ];
196
+ }
197
+ else if (typeof size === 'number' && !isNaN(size)) {
198
+ const widthName = size === 12 ? 'full' : `${size}/12`;
199
+ return [
200
+ basisMapping[breakpointKey][widthName],
201
+ maxWidthMapping[breakpointKey][widthName],
202
+ ];
203
+ }
204
+ return [];
205
+ };
206
+ //# sourceMappingURL=get-class-names-for-breakpoint.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-class-names-for-breakpoint.js","sourceRoot":"","sources":["../../../../src/GridItem/utils/get-class-names-for-breakpoint.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ import type { GridSizes } from '../GridItem';
2
+ export declare const getSizesClassNames: ({ xs, sm, md, lg, xl }: GridSizes) => string[][];
3
+ //# sourceMappingURL=get-sizes-class-names.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-sizes-class-names.d.ts","sourceRoot":"","sources":["../../../../src/GridItem/utils/get-sizes-class-names.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAG5C,eAAO,MAAM,kBAAkB,2BAA4B,SAAS,eAMnE,CAAA"}
@@ -0,0 +1,9 @@
1
+ import { getClassNamesForBreakpoint } from './get-class-names-for-breakpoint';
2
+ export const getSizesClassNames = ({ xs, sm, md, lg, xl }) => [
3
+ getClassNamesForBreakpoint('xs', xs),
4
+ getClassNamesForBreakpoint('sm', sm),
5
+ getClassNamesForBreakpoint('md', md),
6
+ getClassNamesForBreakpoint('lg', lg),
7
+ getClassNamesForBreakpoint('xl', xl),
8
+ ];
9
+ //# sourceMappingURL=get-sizes-class-names.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"get-sizes-class-names.js","sourceRoot":"","sources":["../../../../src/GridItem/utils/get-sizes-class-names.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAA;AAE7E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAa,EAAE,EAAE,CAAC;IACvE,0BAA0B,CAAC,IAAI,EAAE,EAAE,CAAC;IACpC,0BAA0B,CAAC,IAAI,EAAE,EAAE,CAAC;IACpC,0BAA0B,CAAC,IAAI,EAAE,EAAE,CAAC;IACpC,0BAA0B,CAAC,IAAI,EAAE,EAAE,CAAC;IACpC,0BAA0B,CAAC,IAAI,EAAE,EAAE,CAAC;CACrC,CAAA"}
@@ -0,0 +1,4 @@
1
+ export * from './Grid';
2
+ export * from './GridCompound';
3
+ export * from './GridItem';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
@@ -0,0 +1,4 @@
1
+ export * from './Grid';
2
+ export * from './GridCompound';
3
+ export * from './GridItem';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
@@ -0,0 +1,7 @@
1
+ export declare type GridSpacing = 0 | 8 | 16 | 24 | 32 | 64 | 72 | 80;
2
+ export declare type GridSize = true | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
3
+ export declare type GridJustification = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
4
+ export declare type GridItemsAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
5
+ export declare type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
6
+ export declare type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
7
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;AAE7D,oBAAY,QAAQ,GAChB,IAAI,GACJ,MAAM,GACN,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,CAAA;AAEN,oBAAY,iBAAiB,GACzB,YAAY,GACZ,QAAQ,GACR,UAAU,GACV,eAAe,GACf,cAAc,GACd,cAAc,CAAA;AAElB,oBAAY,kBAAkB,GAC1B,YAAY,GACZ,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,CAAA;AAEd,oBAAY,aAAa,GAAG,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAA;AAE/E,oBAAY,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAA"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-grid",
3
- "version": "5.0.11-alpha-1757603192867.0",
3
+ "version": "5.0.11-alpha-FF-49-enhance-publishing-6b5d306f0.0",
4
4
  "description": "Toptal UI components library - Grid",
5
5
  "publishConfig": {
6
6
  "access": "public",
@@ -23,29 +23,29 @@
23
23
  },
24
24
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
25
25
  "dependencies": {
26
- "@toptal/picasso-icons": "1.12.2-alpha-1757603192867.0",
27
- "@toptal/picasso-typography": "4.0.5-alpha-1757603192867.0",
28
- "@toptal/picasso-utils": "3.1.1-alpha-1757603192867.0"
26
+ "@toptal/picasso-icons": "1.12.2-alpha-FF-49-enhance-publishing-6b5d306f0.0",
27
+ "@toptal/picasso-typography": "4.0.5-alpha-FF-49-enhance-publishing-6b5d306f0.0",
28
+ "@toptal/picasso-utils": "3.1.1-alpha-FF-49-enhance-publishing-6b5d306f0.0"
29
29
  },
30
30
  "sideEffects": [
31
31
  "**/styles.ts",
32
32
  "**/styles.js"
33
33
  ],
34
34
  "peerDependencies": {
35
- "@toptal/picasso-tailwind-merge": "2.0.4-alpha-1757603192867.0",
35
+ "@toptal/picasso-tailwind-merge": "2.0.4-alpha-FF-49-enhance-publishing-6b5d306f0.0",
36
36
  "@material-ui/core": "4.12.4",
37
- "@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
38
- "@toptal/picasso-shared": "15.0.1-alpha-1757603192867.0",
39
- "@toptal/picasso-tailwind": "3.0.1-alpha-1757603192867.0",
37
+ "@toptal/picasso-provider": "5.0.2-alpha-FF-49-enhance-publishing-6b5d306f0.0",
38
+ "@toptal/picasso-shared": "15.0.1-alpha-FF-49-enhance-publishing-6b5d306f0.0",
39
+ "@toptal/picasso-tailwind": "3.0.1-alpha-FF-49-enhance-publishing-6b5d306f0.0",
40
40
  "react": ">=16.12.0 < 19.0.0"
41
41
  },
42
42
  "exports": {
43
43
  ".": "./dist-package/src/index.js"
44
44
  },
45
45
  "devDependencies": {
46
- "@toptal/picasso-tailwind-merge": "2.0.4-alpha-1757603192867.0",
47
- "@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
48
- "@toptal/picasso-test-utils": "1.1.2-alpha-1757603192867.0"
46
+ "@toptal/picasso-tailwind-merge": "2.0.4-alpha-FF-49-enhance-publishing-6b5d306f0.0",
47
+ "@toptal/picasso-provider": "5.0.2-alpha-FF-49-enhance-publishing-6b5d306f0.0",
48
+ "@toptal/picasso-test-utils": "1.1.2-alpha-FF-49-enhance-publishing-6b5d306f0.0"
49
49
  },
50
50
  "files": [
51
51
  "dist-package/**",