@toptal/picasso-grid 5.0.11-alpha-1757603192867.0 → 5.0.11-alpha-1757603777486.0

package/dist-package/src/Grid/Grid.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+import React from 'react';
+import { type BaseProps } from '@toptal/picasso-shared';
+import type { GridDirection, GridItemsAlignment, GridJustification, GridSpacing, GridWrap } from '../types';
+export interface Props extends BaseProps, HTMLAttributes<HTMLElement> {
+    /** Grid content containing Grid.Item */
+    children?: ReactNode;
+    /** Defines amount of space between Grid.Item components (in px). If spacing is not set, then it will
+     * be automatically adjusted based on the screen size (16px for screens smaller than medium, 24px
+     * for medium screens, and 32px for screens bigger than medium)
+     */
+    spacing?: GridSpacing;
+    /** Defines the orientation of the grid */
+    direction?: GridDirection;
+    /** Defines the align-items style property based on the direction */
+    alignItems?: GridItemsAlignment;
+    /** Defines the justify-content style property based on the direction */
+    justifyContent?: GridJustification;
+    /** Defines the flex-wrap style property based on the direction */
+    wrap?: GridWrap;
+}
+export declare const Grid: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Grid;
+//# sourceMappingURL=Grid.d.ts.map

package/dist-package/src/Grid/Grid.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/Grid/Grid.js

@@ -0,0 +1,77 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { useCurrentBreakpointRange } from '@toptal/picasso-provider';
+import { GridContext } from '../GridContext';
+import { getGridSpacingClassName } from './utils/get-grid-spacing-class-name';
+const responsiveSpacingConfiguration = {
+    xs: 16,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 32,
+};
+const useResponsiveSpacing = () => {
+    const { currentBreakpointRange } = useCurrentBreakpointRange();
+    if (currentBreakpointRange) {
+        return responsiveSpacingConfiguration[currentBreakpointRange];
+    }
+    return responsiveSpacingConfiguration.md;
+};
+const directionClassNamesMapping = {
+    row: 'flex-row',
+    'row-reverse': 'flex-row-reverse',
+    column: 'flex-col',
+    'column-reverse': 'flex-col-reverse',
+};
+const wrapClassNamesMapping = {
+    wrap: 'flex-wrap',
+    nowrap: 'flex-nowrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+};
+const alignItemsClassNamesMapping = {
+    'flex-start': 'items-start',
+    center: 'items-center',
+    'flex-end': 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+};
+const justifyContentClassNamesMapping = {
+    'flex-start': 'justify-start',
+    center: 'justify-center',
+    'flex-end': 'justify-end',
+    'space-between': 'justify-between',
+    'space-around': 'justify-around',
+    'space-evenly': 'justify-evenly',
+};
+export const Grid = forwardRef(function Grid(props, ref) {
+    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"]);
+    const responsiveSpacing = useResponsiveSpacing();
+    const gridSpacing = userSpacing !== null && userSpacing !== void 0 ? userSpacing : responsiveSpacing;
+    const directionClassName = directionClassNamesMapping[direction];
+    const wrapClassName = wrapClassNamesMapping[wrap];
+    const alignItemsClassName = alignItemsClassNamesMapping[alignItems];
+    const justifyContentClassName = justifyContentClassNamesMapping[justifyContent];
+    const gridSpacingClassName = getGridSpacingClassName(gridSpacing);
+    return (React.createElement(GridContext.Provider, { value: { gridSpacing } },
+        React.createElement("div", Object.assign({ ref: ref }, rest, { className: twMerge('box-border', 'flex', 'w-full', directionClassName, wrapClassName, alignItemsClassName, justifyContentClassName, gridSpacingClassName, className) }), children)));
+});
+Grid.defaultProps = {
+    alignItems: 'flex-start',
+    direction: 'row',
+    justifyContent: 'flex-start',
+    wrap: 'wrap',
+};
+Grid.displayName = 'Grid';
+export default Grid;
+//# sourceMappingURL=Grid.js.map

package/dist-package/src/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/Grid/Grid.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/Grid/index.d.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props } from './Grid';
+export { default as Grid } from './Grid';
+export declare type GridProps = OmitInternalProps<Props>;
+export type { GridSize } from '@material-ui/core/Grid';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/Grid/index.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/Grid/index.js

@@ -0,0 +1,2 @@
+export { default as Grid } from './Grid';
+//# sourceMappingURL=index.js.map

package/dist-package/src/Grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Grid/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/dist-package/src/Grid/utils/get-grid-spacing-class-name.d.ts

@@ -0,0 +1,3 @@
+import type { GridSpacing } from '../../types';
+export declare const getGridSpacingClassName: (spacing: GridSpacing) => string;
+//# sourceMappingURL=get-grid-spacing-class-name.d.ts.map

package/dist-package/src/Grid/utils/get-grid-spacing-class-name.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/Grid/utils/get-grid-spacing-class-name.js

@@ -0,0 +1,18 @@
+const gridWidthAndMarginMapping = {
+    0: 'w-[calc(100%+0px)] -m-[0px]',
+    8: 'w-[calc(100%+8px)] -m-[4px]',
+    16: 'w-[calc(100%+16px)] -m-[8px]',
+    24: 'w-[calc(100%+24px)] -m-[12px]',
+    32: 'w-[calc(100%+32px)] -m-[16px]',
+    64: 'w-[calc(100%+64px)] -m-[32px]',
+    72: 'w-[calc(100%+72px)] -m-[36px]',
+    80: 'w-[calc(100%+80px)] -m-[40px]',
+};
+export const getGridSpacingClassName = (spacing) => {
+    if (!spacing || !gridWidthAndMarginMapping[spacing]) {
+        return '';
+    }
+    // Negative margin has half of the spacing value to properly handle space on sides of grid
+    return gridWidthAndMarginMapping[spacing];
+};
+//# sourceMappingURL=get-grid-spacing-class-name.js.map

package/dist-package/src/Grid/utils/get-grid-spacing-class-name.js.map

@@ -0,0 +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"}

package/dist-package/src/GridCompound/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const GridCompound: import("react").ForwardRefExoticComponent<import("../Grid/Grid").Props & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<import("../GridItem/GridItem").Props & import("react").RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/GridCompound/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/GridCompound/index.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;CAA0C,CAAA"}

package/dist-package/src/GridCompound/index.js

@@ -0,0 +1,4 @@
+import { Grid } from '../Grid';
+import { GridItem } from '../GridItem';
+export const GridCompound = Object.assign(Grid, { Item: GridItem });
+//# sourceMappingURL=index.js.map

package/dist-package/src/GridCompound/index.js.map

@@ -0,0 +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"}

package/dist-package/src/GridContext/GridContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { GridSpacing } from '../types';
+export interface GridContextProps {
+    gridSpacing?: GridSpacing;
+}
+declare const _default: import("react").Context<GridContextProps>;
+export default _default;
+//# sourceMappingURL=GridContext.d.ts.map

package/dist-package/src/GridContext/GridContext.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/GridContext/GridContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export default createContext({});
+//# sourceMappingURL=GridContext.js.map

package/dist-package/src/GridContext/GridContext.js.map

@@ -0,0 +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"}

package/dist-package/src/GridContext/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GridContext } from './GridContext';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/GridContext/index.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/GridContext/index.js

@@ -0,0 +1,2 @@
+export { default as GridContext } from './GridContext';
+//# sourceMappingURL=index.js.map

package/dist-package/src/GridContext/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/GridContext/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist-package/src/GridItem/GridItem.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+import React from 'react';
+import { type BaseProps } from '@toptal/picasso-shared';
+import type { GridSize } from '../types';
+export interface GridSizes {
+    /** Defines the number of grids the component is going to use. It's applied for all the screen sizes with the lowest priority */
+    xs?: boolean | GridSize;
+    /** Defines the number of grids the component is going to use. It's applied for the sm breakpoint and wider screens */
+    sm?: boolean | GridSize;
+    /** Defines the number of grids the component is going to use. It's applied for the md breakpoint and wider screens */
+    md?: boolean | GridSize;
+    /** Defines the number of grids the component is going to use. It's applied for the lg breakpoint and wider screens */
+    lg?: boolean | GridSize;
+    /** Defines the number of grids the component is going to use. It's applied for the xl breakpoint and wider screens */
+    xl?: boolean | GridSize;
+}
+export interface Props extends BaseProps, GridSizes, HTMLAttributes<HTMLElement> {
+    /** Content of Grid.Item */
+    children?: ReactNode;
+}
+export declare const GridItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default GridItem;
+//# sourceMappingURL=GridItem.d.ts.map

package/dist-package/src/GridItem/GridItem.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/GridItem/GridItem.js

@@ -0,0 +1,47 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useContext } from 'react';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { GridContext } from '../GridContext';
+import { getSizesClassNames } from './utils/get-sizes-class-names';
+const gridSpacingMapping = {
+    0: 'p-[0px]',
+    8: 'p-[4px]',
+    16: 'p-[8px]',
+    24: 'p-[12px]',
+    32: 'p-[16px]',
+    64: 'p-[32px]',
+    72: 'p-[36px]',
+    80: 'p-[40px]',
+};
+const getSpacingClassName = (gridSpacing) => {
+    if (!gridSpacing) {
+        return '';
+    }
+    return gridSpacingMapping[gridSpacing];
+};
+export const GridItem = forwardRef(function GridItem(props, ref) {
+    const { children, xs, sm, md, lg, xl, className, style } = props, rest = __rest(props, ["children", "xs", "sm", "md", "lg", "xl", "className", "style"]);
+    const { gridSpacing } = useContext(GridContext);
+    const spacingClassName = getSpacingClassName(gridSpacing);
+    const sizesClassNames = getSizesClassNames({
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+    });
+    return (React.createElement("div", Object.assign({ ref: ref, style: style }, rest, { className: twMerge('box-border', 'm-0', spacingClassName, sizesClassNames, className) }), children));
+});
+GridItem.displayName = 'GridItem';
+export default GridItem;
+//# sourceMappingURL=GridItem.js.map

package/dist-package/src/GridItem/GridItem.js.map

@@ -0,0 +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"}

package/dist-package/src/GridItem/index.d.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared';
+import type { Props, GridSizes } from './GridItem';
+export { default as GridItem } from './GridItem';
+export declare type GridItemProps = OmitInternalProps<Props>;
+export declare type GridSizeProps = GridSizes;
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/GridItem/index.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/GridItem/index.js

@@ -0,0 +1,2 @@
+export { default as GridItem } from './GridItem';
+//# sourceMappingURL=index.js.map

package/dist-package/src/GridItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/GridItem/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist-package/src/GridItem/utils/get-class-names-for-breakpoint.d.ts

@@ -0,0 +1,4 @@
+import type { BreakpointKeys } from '@toptal/picasso-provider';
+import type { GridSize } from '../../types';
+export declare const getClassNamesForBreakpoint: (breakpointKey: BreakpointKeys, size?: GridSize | boolean) => string[];
+//# sourceMappingURL=get-class-names-for-breakpoint.d.ts.map

package/dist-package/src/GridItem/utils/get-class-names-for-breakpoint.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/GridItem/utils/get-class-names-for-breakpoint.js

@@ -0,0 +1,206 @@
+const growMapping = {
+    xs: {
+        grow: 'xs:grow',
+        'grow-0': 'xs:grow-0',
+    },
+    sm: {
+        grow: 'sm:grow',
+        'grow-0': 'sm:grow-0',
+    },
+    md: {
+        grow: 'md:grow',
+        'grow-0': 'md:grow-0',
+    },
+    lg: {
+        grow: 'lg:grow',
+        'grow-0': 'lg:grow-0',
+    },
+    xl: {
+        grow: 'xl:grow',
+        'grow-0': 'xl:grow-0',
+    },
+};
+const maxWidthMapping = {
+    xs: {
+        full: 'xs:max-w-full',
+        none: 'xs:max-w-none',
+        '1/12': 'xs:max-w-1/12',
+        '2/12': 'xs:max-w-2/12',
+        '3/12': 'xs:max-w-3/12',
+        '4/12': 'xs:max-w-4/12',
+        '5/12': 'xs:max-w-5/12',
+        '6/12': 'xs:max-w-6/12',
+        '7/12': 'xs:max-w-7/12',
+        '8/12': 'xs:max-w-8/12',
+        '9/12': 'xs:max-w-9/12',
+        '10/12': 'xs:max-w-10/12',
+        '11/12': 'xs:max-w-11/12',
+    },
+    sm: {
+        full: 'sm:max-w-full',
+        none: 'sm:max-w-none',
+        '1/12': 'sm:max-w-1/12',
+        '2/12': 'sm:max-w-2/12',
+        '3/12': 'sm:max-w-3/12',
+        '4/12': 'sm:max-w-4/12',
+        '5/12': 'sm:max-w-5/12',
+        '6/12': 'sm:max-w-6/12',
+        '7/12': 'sm:max-w-7/12',
+        '8/12': 'sm:max-w-8/12',
+        '9/12': 'sm:max-w-9/12',
+        '10/12': 'sm:max-w-10/12',
+        '11/12': 'sm:max-w-11/12',
+    },
+    md: {
+        full: 'md:max-w-full',
+        none: 'md:max-w-none',
+        '1/12': 'md:max-w-1/12',
+        '2/12': 'md:max-w-2/12',
+        '3/12': 'md:max-w-3/12',
+        '4/12': 'md:max-w-4/12',
+        '5/12': 'md:max-w-5/12',
+        '6/12': 'md:max-w-6/12',
+        '7/12': 'md:max-w-7/12',
+        '8/12': 'md:max-w-8/12',
+        '9/12': 'md:max-w-9/12',
+        '10/12': 'md:max-w-10/12',
+        '11/12': 'md:max-w-11/12',
+    },
+    lg: {
+        full: 'lg:max-w-full',
+        none: 'lg:max-w-none',
+        '1/12': 'lg:max-w-1/12',
+        '2/12': 'lg:max-w-2/12',
+        '3/12': 'lg:max-w-3/12',
+        '4/12': 'lg:max-w-4/12',
+        '5/12': 'lg:max-w-5/12',
+        '6/12': 'lg:max-w-6/12',
+        '7/12': 'lg:max-w-7/12',
+        '8/12': 'lg:max-w-8/12',
+        '9/12': 'lg:max-w-9/12',
+        '10/12': 'lg:max-w-10/12',
+        '11/12': 'lg:max-w-11/12',
+    },
+    xl: {
+        full: 'xl:max-w-full',
+        none: 'xl:max-w-none',
+        '1/12': 'xl:max-w-1/12',
+        '2/12': 'xl:max-w-2/12',
+        '3/12': 'xl:max-w-3/12',
+        '4/12': 'xl:max-w-4/12',
+        '5/12': 'xl:max-w-5/12',
+        '6/12': 'xl:max-w-6/12',
+        '7/12': 'xl:max-w-7/12',
+        '8/12': 'xl:max-w-8/12',
+        '9/12': 'xl:max-w-9/12',
+        '10/12': 'xl:max-w-10/12',
+        '11/12': 'xl:max-w-11/12',
+    },
+};
+const basisMapping = {
+    xs: {
+        auto: 'xs:basis-auto',
+        '0': 'xs:basis-0',
+        '1/12': 'xs:basis-1/12',
+        '2/12': 'xs:basis-2/12',
+        '3/12': 'xs:basis-3/12',
+        '4/12': 'xs:basis-4/12',
+        '5/12': 'xs:basis-5/12',
+        '6/12': 'xs:basis-6/12',
+        '7/12': 'xs:basis-7/12',
+        '8/12': 'xs:basis-8/12',
+        '9/12': 'xs:basis-9/12',
+        '10/12': 'xs:basis-10/12',
+        '11/12': 'xs:basis-11/12',
+        full: 'xs:basis-full',
+    },
+    sm: {
+        auto: 'sm:basis-auto',
+        '0': 'sm:basis-0',
+        '1/12': 'sm:basis-1/12',
+        '2/12': 'sm:basis-2/12',
+        '3/12': 'sm:basis-3/12',
+        '4/12': 'sm:basis-4/12',
+        '5/12': 'sm:basis-5/12',
+        '6/12': 'sm:basis-6/12',
+        '7/12': 'sm:basis-7/12',
+        '8/12': 'sm:basis-8/12',
+        '9/12': 'sm:basis-9/12',
+        '10/12': 'sm:basis-10/12',
+        '11/12': 'sm:basis-11/12',
+        full: 'sm:basis-full',
+    },
+    md: {
+        auto: 'md:basis-auto',
+        '0': 'md:basis-0',
+        '1/12': 'md:basis-1/12',
+        '2/12': 'md:basis-2/12',
+        '3/12': 'md:basis-3/12',
+        '4/12': 'md:basis-4/12',
+        '5/12': 'md:basis-5/12',
+        '6/12': 'md:basis-6/12',
+        '7/12': 'md:basis-7/12',
+        '8/12': 'md:basis-8/12',
+        '9/12': 'md:basis-9/12',
+        '10/12': 'md:basis-10/12',
+        '11/12': 'md:basis-11/12',
+        full: 'md:basis-full',
+    },
+    lg: {
+        auto: 'lg:basis-auto',
+        '0': 'lg:basis-0',
+        '1/12': 'lg:basis-1/12',
+        '2/12': 'lg:basis-2/12',
+        '3/12': 'lg:basis-3/12',
+        '4/12': 'lg:basis-4/12',
+        '5/12': 'lg:basis-5/12',
+        '6/12': 'lg:basis-6/12',
+        '7/12': 'lg:basis-7/12',
+        '8/12': 'lg:basis-8/12',
+        '9/12': 'lg:basis-9/12',
+        '10/12': 'lg:basis-10/12',
+        '11/12': 'lg:basis-11/12',
+        full: 'lg:basis-full',
+    },
+    xl: {
+        auto: 'xl:basis-auto',
+        '0': 'xl:basis-0',
+        '1/12': 'xl:basis-1/12',
+        '2/12': 'xl:basis-2/12',
+        '3/12': 'xl:basis-3/12',
+        '4/12': 'xl:basis-4/12',
+        '5/12': 'xl:basis-5/12',
+        '6/12': 'xl:basis-6/12',
+        '7/12': 'xl:basis-7/12',
+        '8/12': 'xl:basis-8/12',
+        '9/12': 'xl:basis-9/12',
+        '10/12': 'xl:basis-10/12',
+        '11/12': 'xl:basis-11/12',
+        full: 'xl:basis-full',
+    },
+};
+export const getClassNamesForBreakpoint = (breakpointKey, size) => {
+    if (size === true) {
+        return [
+            basisMapping[breakpointKey]['0'],
+            growMapping[breakpointKey]['grow'],
+            maxWidthMapping[breakpointKey]['full'],
+        ];
+    }
+    else if (size === 'auto') {
+        return [
+            basisMapping[breakpointKey]['auto'],
+            growMapping[breakpointKey]['grow-0'],
+            maxWidthMapping[breakpointKey]['none'],
+        ];
+    }
+    else if (typeof size === 'number' && !isNaN(size)) {
+        const widthName = size === 12 ? 'full' : `${size}/12`;
+        return [
+            basisMapping[breakpointKey][widthName],
+            maxWidthMapping[breakpointKey][widthName],
+        ];
+    }
+    return [];
+};
+//# sourceMappingURL=get-class-names-for-breakpoint.js.map

package/dist-package/src/GridItem/utils/get-class-names-for-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-class-names-for-breakpoint.js","sourceRoot":"","sources":["../../../../src/GridItem/utils/get-class-names-for-breakpoint.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,GAAyD;IACxE,EAAE,EAAE;QACF,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,WAAW;KACtB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,WAAW;KACtB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,WAAW;KACtB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,WAAW;KACtB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,WAAW;KACtB;CACF,CAAA;AAED,MAAM,eAAe,GAAyD;IAC5E,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;KAC1B;IACD,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;KAC1B;IACD,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;KAC1B;IACD,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;KAC1B;IACD,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,eAAe;QACrB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;KAC1B;CACF,CAAA;AAED,MAAM,YAAY,GAAyD;IACzE,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,GAAG,EAAE,YAAY;QACjB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,GAAG,EAAE,YAAY;QACjB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,GAAG,EAAE,YAAY;QACjB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,GAAG,EAAE,YAAY;QACjB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,eAAe;KACtB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,eAAe;QACrB,GAAG,EAAE,YAAY;QACjB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,eAAe;KACtB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,aAA6B,EAC7B,IAAyB,EACzB,EAAE;IACF,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,OAAO;YACL,YAAY,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC;YAChC,WAAW,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC;YAClC,eAAe,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC;SACvC,CAAA;KACF;SAAM,IAAI,IAAI,KAAK,MAAM,EAAE;QAC1B,OAAO;YACL,YAAY,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC;YACnC,WAAW,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC;YACpC,eAAe,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC;SACvC,CAAA;KACF;SAAM,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;QACnD,MAAM,SAAS,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,CAAA;QAErD,OAAO;YACL,YAAY,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC;YACtC,eAAe,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC;SAC1C,CAAA;KACF;IAED,OAAO,EAAE,CAAA;AACX,CAAC,CAAA"}

package/dist-package/src/GridItem/utils/get-sizes-class-names.d.ts

@@ -0,0 +1,3 @@
+import type { GridSizes } from '../GridItem';
+export declare const getSizesClassNames: ({ xs, sm, md, lg, xl }: GridSizes) => string[][];
+//# sourceMappingURL=get-sizes-class-names.d.ts.map

package/dist-package/src/GridItem/utils/get-sizes-class-names.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/GridItem/utils/get-sizes-class-names.js

@@ -0,0 +1,9 @@
+import { getClassNamesForBreakpoint } from './get-class-names-for-breakpoint';
+export const getSizesClassNames = ({ xs, sm, md, lg, xl }) => [
+    getClassNamesForBreakpoint('xs', xs),
+    getClassNamesForBreakpoint('sm', sm),
+    getClassNamesForBreakpoint('md', md),
+    getClassNamesForBreakpoint('lg', lg),
+    getClassNamesForBreakpoint('xl', xl),
+];
+//# sourceMappingURL=get-sizes-class-names.js.map

package/dist-package/src/GridItem/utils/get-sizes-class-names.js.map

@@ -0,0 +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"}

package/dist-package/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Grid';
+export * from './GridCompound';
+export * from './GridItem';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/index.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/index.js

@@ -0,0 +1,4 @@
+export * from './Grid';
+export * from './GridCompound';
+export * from './GridItem';
+//# sourceMappingURL=index.js.map

package/dist-package/src/index.js.map

@@ -0,0 +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"}

package/dist-package/src/types.d.ts

@@ -0,0 +1,7 @@
+export declare type GridSpacing = 0 | 8 | 16 | 24 | 32 | 64 | 72 | 80;
+export declare type GridSize = true | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export declare type GridJustification = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+export declare type GridItemsAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+export declare type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export declare type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+//# sourceMappingURL=types.d.ts.map

package/dist-package/src/types.d.ts.map

@@ -0,0 +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"}

package/dist-package/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist-package/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-grid",
-  "version": "5.0.11-alpha-1757603192867.0",
+  "version": "5.0.11-alpha-1757603777486.0",
   "description": "Toptal UI components library - Grid",
   "publishConfig": {
     "access": "public",
@@ -23,29 +23,29 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-icons": "1.12.2-alpha-1757603192867.0",
-    "@toptal/picasso-typography": "4.0.5-alpha-1757603192867.0",
-    "@toptal/picasso-utils": "3.1.1-alpha-1757603192867.0"
+    "@toptal/picasso-icons": "1.12.2-alpha-1757603777486.0",
+    "@toptal/picasso-typography": "4.0.5-alpha-1757603777486.0",
+    "@toptal/picasso-utils": "3.1.1-alpha-1757603777486.0"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-1757603192867.0",
+    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-1757603777486.0",
     "@material-ui/core": "4.12.4",
-    "@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
-    "@toptal/picasso-shared": "15.0.1-alpha-1757603192867.0",
-    "@toptal/picasso-tailwind": "3.0.1-alpha-1757603192867.0",
+    "@toptal/picasso-provider": "5.0.2-alpha-1757603777486.0",
+    "@toptal/picasso-shared": "15.0.1-alpha-1757603777486.0",
+    "@toptal/picasso-tailwind": "3.0.1-alpha-1757603777486.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-1757603192867.0",
-    "@toptal/picasso-provider": "5.0.2-alpha-1757603192867.0",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-1757603192867.0"
+    "@toptal/picasso-tailwind-merge": "2.0.4-alpha-1757603777486.0",
+    "@toptal/picasso-provider": "5.0.2-alpha-1757603777486.0",
+    "@toptal/picasso-test-utils": "1.1.2-alpha-1757603777486.0"
   },
   "files": [
     "dist-package/**",