@mirohq/design-system-grid 2.1.12 → 2.1.14-use-press.2

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 (6) hide show
  1. package/dist/main.js +3 -8
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +3 -8
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +38 -38
  6. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var jsxRuntime = require('react/jsx-runtime');
5
6
  var React = require('react');
6
7
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
7
8
  var designSystemStitches = require('@mirohq/design-system-stitches');
@@ -110,17 +111,11 @@ const StyledItem = designSystemStitches.styled(designSystemPrimitive.Primitive.d
110
111
  });
111
112
 
112
113
  const Item = React__default["default"].forwardRef(
113
- (props, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledItem, {
114
- ...props,
115
- ref: forwardRef
116
- })
114
+ (props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledItem, { ...props, ref: forwardRef })
117
115
  );
118
116
 
119
117
  const Grid = React__default["default"].forwardRef(
120
- (props, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledGrid, {
121
- ...props,
122
- ref: forwardRef
123
- })
118
+ (props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledGrid, { ...props, ref: forwardRef })
124
119
  );
125
120
  Grid.Item = Item;
126
121
 
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/grid.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/grid.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { createConstants, mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const SIZES = createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)\n\nexport const StyledGrid = styled(Primitive.div, {\n display: 'grid',\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n gap: mapKeysToVariants(theme['space-gap'], 'gap'),\n gapX: mapKeysToVariants(theme['space-gap'], 'rowGap'),\n gapY: mapKeysToVariants(theme['space-gap'], 'columnGap'),\n columns: mapKeysToVariants(SIZES, key => ({\n gridTemplateColumns: `repeat(${key}, 1fr)`,\n })),\n rows: mapKeysToVariants(SIZES, key => ({\n gridTemplateRows: `repeat(${key}, 1fr)`,\n })),\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n justifyItems: {\n start: {\n justifyItems: 'start',\n },\n center: {\n justifyItems: 'center',\n },\n end: {\n justifyItems: 'end',\n },\n stretch: {\n justifyItems: 'stretch',\n },\n },\n },\n})\n\nexport type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants, createConstants } from '@mirohq/design-system-utils'\n\nimport { SIZES as GRID_SIZES } from '../grid.styled'\n\nconst ADDITIONAL_COLUMNS_ROWS_SIZES = createConstants(-1)\nconst SIZES = { ...ADDITIONAL_COLUMNS_ROWS_SIZES, ...GRID_SIZES }\n\nexport const StyledItem = styled(Primitive.div, {\n variants: {\n columnStart: mapKeysToVariants(SIZES, key => ({ gridColumnStart: key })),\n rowStart: mapKeysToVariants(SIZES, key => ({ gridRowStart: key })),\n columnEnd: mapKeysToVariants(SIZES, key => ({ gridColumnEnd: key })),\n rowEnd: mapKeysToVariants(SIZES, key => ({ gridRowEnd: key })),\n },\n})\n\nexport type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Determines the grid item's start position within the grid referring to a column number.\n */\n columnStart?: StyledItemProps['columnStart']\n\n /**\n * Determines the grid item's start position within the grid referring to a row number.\n */\n rowStart?: StyledItemProps['rowStart']\n /**\n * Determines the grid item's end position within the grid referring to a column number.\n */\n columnEnd?: StyledItemProps['columnEnd']\n /**\n * Determines the grid item's end position within the grid referring to a row number.\n */\n rowEnd?: StyledItemProps['rowEnd']\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (props, forwardRef) => <StyledItem {...props} ref={forwardRef} />\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledGrid } from './grid.styled'\nimport type { StyledGridProps } from './grid.styled'\nimport { Item } from './partials/item'\n\nexport interface GridProps extends StyledGridProps {\n /**\n * Defines how elements are aligned along the block (column) axis.\n */\n align?: StyledGridProps['align']\n\n /**\n * Defines how elements are aligned along the inline (row) axis.\n */\n justify?: StyledGridProps['justify']\n\n /**\n * Aligns grid items along the inline (row) axis.\n * This value applies to all grid items inside the container.\n */\n justifyItems?: StyledGridProps['justifyItems']\n\n /**\n * Defines how elements are automatically placed in the grid.\n */\n flow?: StyledGridProps['flow']\n\n /**\n * Defines the width of the gutter between both columns and rows. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns.It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gapY?: StyledGridProps['gapY']\n\n /**\n * Defines the number of columns in the grid.\n */\n columns?: StyledGridProps['columns']\n\n /**\n * Defines the number of rows in the grid.\n */\n rows?: StyledGridProps['rows']\n}\n\nexport const Grid = React.forwardRef<ElementRef<typeof StyledGrid>, GridProps>(\n (props, forwardRef) => <StyledGrid {...props} ref={forwardRef} />\n) as ForwardRefExoticComponent<GridProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Item: typeof Item\n}\n\nGrid.Item = Item\n"],"names":["SIZES","createConstants","styled","Primitive","mapKeysToVariants","theme","GRID_SIZES","React"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/grid.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/grid.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { createConstants, mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const SIZES = createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)\n\nexport const StyledGrid = styled(Primitive.div, {\n display: 'grid',\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n gap: mapKeysToVariants(theme['space-gap'], 'gap'),\n gapX: mapKeysToVariants(theme['space-gap'], 'rowGap'),\n gapY: mapKeysToVariants(theme['space-gap'], 'columnGap'),\n columns: mapKeysToVariants(SIZES, key => ({\n gridTemplateColumns: `repeat(${key}, 1fr)`,\n })),\n rows: mapKeysToVariants(SIZES, key => ({\n gridTemplateRows: `repeat(${key}, 1fr)`,\n })),\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n justifyItems: {\n start: {\n justifyItems: 'start',\n },\n center: {\n justifyItems: 'center',\n },\n end: {\n justifyItems: 'end',\n },\n stretch: {\n justifyItems: 'stretch',\n },\n },\n },\n})\n\nexport type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants, createConstants } from '@mirohq/design-system-utils'\n\nimport { SIZES as GRID_SIZES } from '../grid.styled'\n\nconst ADDITIONAL_COLUMNS_ROWS_SIZES = createConstants(-1)\nconst SIZES = { ...ADDITIONAL_COLUMNS_ROWS_SIZES, ...GRID_SIZES }\n\nexport const StyledItem = styled(Primitive.div, {\n variants: {\n columnStart: mapKeysToVariants(SIZES, key => ({ gridColumnStart: key })),\n rowStart: mapKeysToVariants(SIZES, key => ({ gridRowStart: key })),\n columnEnd: mapKeysToVariants(SIZES, key => ({ gridColumnEnd: key })),\n rowEnd: mapKeysToVariants(SIZES, key => ({ gridRowEnd: key })),\n },\n})\n\nexport type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Determines the grid item's start position within the grid referring to a column number.\n */\n columnStart?: StyledItemProps['columnStart']\n\n /**\n * Determines the grid item's start position within the grid referring to a row number.\n */\n rowStart?: StyledItemProps['rowStart']\n /**\n * Determines the grid item's end position within the grid referring to a column number.\n */\n columnEnd?: StyledItemProps['columnEnd']\n /**\n * Determines the grid item's end position within the grid referring to a row number.\n */\n rowEnd?: StyledItemProps['rowEnd']\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (props, forwardRef) => <StyledItem {...props} ref={forwardRef} />\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledGrid } from './grid.styled'\nimport type { StyledGridProps } from './grid.styled'\nimport { Item } from './partials/item'\n\nexport interface GridProps extends StyledGridProps {\n /**\n * Defines how elements are aligned along the block (column) axis.\n */\n align?: StyledGridProps['align']\n\n /**\n * Defines how elements are aligned along the inline (row) axis.\n */\n justify?: StyledGridProps['justify']\n\n /**\n * Aligns grid items along the inline (row) axis.\n * This value applies to all grid items inside the container.\n */\n justifyItems?: StyledGridProps['justifyItems']\n\n /**\n * Defines how elements are automatically placed in the grid.\n */\n flow?: StyledGridProps['flow']\n\n /**\n * Defines the width of the gutter between both columns and rows. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns.It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gapY?: StyledGridProps['gapY']\n\n /**\n * Defines the number of columns in the grid.\n */\n columns?: StyledGridProps['columns']\n\n /**\n * Defines the number of rows in the grid.\n */\n rows?: StyledGridProps['rows']\n}\n\nexport const Grid = React.forwardRef<ElementRef<typeof StyledGrid>, GridProps>(\n (props, forwardRef) => <StyledGrid {...props} ref={forwardRef} />\n) as ForwardRefExoticComponent<GridProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Item: typeof Item\n}\n\nGrid.Item = Item\n"],"names":["SIZES","createConstants","styled","Primitive","mapKeysToVariants","theme","GRID_SIZES","React","jsx"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsx } from 'react/jsx-runtime';
1
2
  import React from 'react';
2
3
  import { Primitive } from '@mirohq/design-system-primitive';
3
4
  import { styled, theme } from '@mirohq/design-system-stitches';
@@ -102,17 +103,11 @@ const StyledItem = styled(Primitive.div, {
102
103
  });
103
104
 
104
105
  const Item = React.forwardRef(
105
- (props, forwardRef) => /* @__PURE__ */ React.createElement(StyledItem, {
106
- ...props,
107
- ref: forwardRef
108
- })
106
+ (props, forwardRef) => /* @__PURE__ */ jsx(StyledItem, { ...props, ref: forwardRef })
109
107
  );
110
108
 
111
109
  const Grid = React.forwardRef(
112
- (props, forwardRef) => /* @__PURE__ */ React.createElement(StyledGrid, {
113
- ...props,
114
- ref: forwardRef
115
- })
110
+ (props, forwardRef) => /* @__PURE__ */ jsx(StyledGrid, { ...props, ref: forwardRef })
116
111
  );
117
112
  Grid.Item = Item;
118
113
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/grid.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/grid.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { createConstants, mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const SIZES = createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)\n\nexport const StyledGrid = styled(Primitive.div, {\n display: 'grid',\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n gap: mapKeysToVariants(theme['space-gap'], 'gap'),\n gapX: mapKeysToVariants(theme['space-gap'], 'rowGap'),\n gapY: mapKeysToVariants(theme['space-gap'], 'columnGap'),\n columns: mapKeysToVariants(SIZES, key => ({\n gridTemplateColumns: `repeat(${key}, 1fr)`,\n })),\n rows: mapKeysToVariants(SIZES, key => ({\n gridTemplateRows: `repeat(${key}, 1fr)`,\n })),\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n justifyItems: {\n start: {\n justifyItems: 'start',\n },\n center: {\n justifyItems: 'center',\n },\n end: {\n justifyItems: 'end',\n },\n stretch: {\n justifyItems: 'stretch',\n },\n },\n },\n})\n\nexport type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants, createConstants } from '@mirohq/design-system-utils'\n\nimport { SIZES as GRID_SIZES } from '../grid.styled'\n\nconst ADDITIONAL_COLUMNS_ROWS_SIZES = createConstants(-1)\nconst SIZES = { ...ADDITIONAL_COLUMNS_ROWS_SIZES, ...GRID_SIZES }\n\nexport const StyledItem = styled(Primitive.div, {\n variants: {\n columnStart: mapKeysToVariants(SIZES, key => ({ gridColumnStart: key })),\n rowStart: mapKeysToVariants(SIZES, key => ({ gridRowStart: key })),\n columnEnd: mapKeysToVariants(SIZES, key => ({ gridColumnEnd: key })),\n rowEnd: mapKeysToVariants(SIZES, key => ({ gridRowEnd: key })),\n },\n})\n\nexport type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Determines the grid item's start position within the grid referring to a column number.\n */\n columnStart?: StyledItemProps['columnStart']\n\n /**\n * Determines the grid item's start position within the grid referring to a row number.\n */\n rowStart?: StyledItemProps['rowStart']\n /**\n * Determines the grid item's end position within the grid referring to a column number.\n */\n columnEnd?: StyledItemProps['columnEnd']\n /**\n * Determines the grid item's end position within the grid referring to a row number.\n */\n rowEnd?: StyledItemProps['rowEnd']\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (props, forwardRef) => <StyledItem {...props} ref={forwardRef} />\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledGrid } from './grid.styled'\nimport type { StyledGridProps } from './grid.styled'\nimport { Item } from './partials/item'\n\nexport interface GridProps extends StyledGridProps {\n /**\n * Defines how elements are aligned along the block (column) axis.\n */\n align?: StyledGridProps['align']\n\n /**\n * Defines how elements are aligned along the inline (row) axis.\n */\n justify?: StyledGridProps['justify']\n\n /**\n * Aligns grid items along the inline (row) axis.\n * This value applies to all grid items inside the container.\n */\n justifyItems?: StyledGridProps['justifyItems']\n\n /**\n * Defines how elements are automatically placed in the grid.\n */\n flow?: StyledGridProps['flow']\n\n /**\n * Defines the width of the gutter between both columns and rows. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns.It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gapY?: StyledGridProps['gapY']\n\n /**\n * Defines the number of columns in the grid.\n */\n columns?: StyledGridProps['columns']\n\n /**\n * Defines the number of rows in the grid.\n */\n rows?: StyledGridProps['rows']\n}\n\nexport const Grid = React.forwardRef<ElementRef<typeof StyledGrid>, GridProps>(\n (props, forwardRef) => <StyledGrid {...props} ref={forwardRef} />\n) as ForwardRefExoticComponent<GridProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Item: typeof Item\n}\n\nGrid.Item = Item\n"],"names":["SIZES","GRID_SIZES"],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/grid.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/grid.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { createConstants, mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const SIZES = createConstants(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)\n\nexport const StyledGrid = styled(Primitive.div, {\n display: 'grid',\n variants: {\n align: {\n start: {\n alignItems: 'start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n flow: {\n row: {\n gridAutoFlow: 'row',\n },\n column: {\n gridAutoFlow: 'column',\n },\n dense: {\n gridAutoFlow: 'dense',\n },\n rowDense: {\n gridAutoFlow: 'row dense',\n },\n columnDense: {\n gridAutoFlow: 'column dense',\n },\n },\n gap: mapKeysToVariants(theme['space-gap'], 'gap'),\n gapX: mapKeysToVariants(theme['space-gap'], 'rowGap'),\n gapY: mapKeysToVariants(theme['space-gap'], 'columnGap'),\n columns: mapKeysToVariants(SIZES, key => ({\n gridTemplateColumns: `repeat(${key}, 1fr)`,\n })),\n rows: mapKeysToVariants(SIZES, key => ({\n gridTemplateRows: `repeat(${key}, 1fr)`,\n })),\n justify: {\n start: {\n justifyContent: 'start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'end',\n },\n stretch: {\n justifyContent: 'stretch',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n justifyItems: {\n start: {\n justifyItems: 'start',\n },\n center: {\n justifyItems: 'center',\n },\n end: {\n justifyItems: 'end',\n },\n stretch: {\n justifyItems: 'stretch',\n },\n },\n },\n})\n\nexport type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants, createConstants } from '@mirohq/design-system-utils'\n\nimport { SIZES as GRID_SIZES } from '../grid.styled'\n\nconst ADDITIONAL_COLUMNS_ROWS_SIZES = createConstants(-1)\nconst SIZES = { ...ADDITIONAL_COLUMNS_ROWS_SIZES, ...GRID_SIZES }\n\nexport const StyledItem = styled(Primitive.div, {\n variants: {\n columnStart: mapKeysToVariants(SIZES, key => ({ gridColumnStart: key })),\n rowStart: mapKeysToVariants(SIZES, key => ({ gridRowStart: key })),\n columnEnd: mapKeysToVariants(SIZES, key => ({ gridColumnEnd: key })),\n rowEnd: mapKeysToVariants(SIZES, key => ({ gridRowEnd: key })),\n },\n})\n\nexport type StyledItemProps = ComponentPropsWithRef<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps {\n /**\n * Determines the grid item's start position within the grid referring to a column number.\n */\n columnStart?: StyledItemProps['columnStart']\n\n /**\n * Determines the grid item's start position within the grid referring to a row number.\n */\n rowStart?: StyledItemProps['rowStart']\n /**\n * Determines the grid item's end position within the grid referring to a column number.\n */\n columnEnd?: StyledItemProps['columnEnd']\n /**\n * Determines the grid item's end position within the grid referring to a row number.\n */\n rowEnd?: StyledItemProps['rowEnd']\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (props, forwardRef) => <StyledItem {...props} ref={forwardRef} />\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { StyledGrid } from './grid.styled'\nimport type { StyledGridProps } from './grid.styled'\nimport { Item } from './partials/item'\n\nexport interface GridProps extends StyledGridProps {\n /**\n * Defines how elements are aligned along the block (column) axis.\n */\n align?: StyledGridProps['align']\n\n /**\n * Defines how elements are aligned along the inline (row) axis.\n */\n justify?: StyledGridProps['justify']\n\n /**\n * Aligns grid items along the inline (row) axis.\n * This value applies to all grid items inside the container.\n */\n justifyItems?: StyledGridProps['justifyItems']\n\n /**\n * Defines how elements are automatically placed in the grid.\n */\n flow?: StyledGridProps['flow']\n\n /**\n * Defines the width of the gutter between both columns and rows. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns.It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n */\n gapY?: StyledGridProps['gapY']\n\n /**\n * Defines the number of columns in the grid.\n */\n columns?: StyledGridProps['columns']\n\n /**\n * Defines the number of rows in the grid.\n */\n rows?: StyledGridProps['rows']\n}\n\nexport const Grid = React.forwardRef<ElementRef<typeof StyledGrid>, GridProps>(\n (props, forwardRef) => <StyledGrid {...props} ref={forwardRef} />\n) as ForwardRefExoticComponent<GridProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n Item: typeof Item\n}\n\nGrid.Item = Item\n"],"names":["SIZES","GRID_SIZES"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -5,27 +5,27 @@ import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches'
5
5
  import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
6
6
  import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
7
7
 
8
- declare const StyledGrid: react.ForwardRefExoticComponent<Pick<Omit<{
9
- align?: "end" | "baseline" | "start" | "center" | "stretch" | undefined;
8
+ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<{
9
+ align?: "center" | "end" | "baseline" | "start" | "stretch" | undefined;
10
10
  flow?: "row" | "column" | "dense" | "rowDense" | "columnDense" | undefined;
11
- gap?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
12
- gapX?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
13
- gapY?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
11
+ gap?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
12
+ gapX?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
13
+ gapY?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
14
14
  columns?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
15
15
  rows?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
16
- justify?: "end" | "start" | "center" | "stretch" | "between" | "around" | "evenly" | undefined;
17
- justifyItems?: "end" | "start" | "center" | "stretch" | undefined;
18
- }, "rows" | "align" | "justify" | "justifyItems" | "columns" | "gap" | "flow" | "gapX" | "gapY"> & _stitches_react_types_styled_component.TransformProps<{
19
- align?: "end" | "baseline" | "start" | "center" | "stretch" | undefined;
16
+ justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
17
+ justifyItems?: "center" | "end" | "start" | "stretch" | undefined;
18
+ }, "rows" | "align" | "columns" | "justify" | "justifyItems" | "gap" | "flow" | "gapX" | "gapY"> & _stitches_react_types_styled_component.TransformProps<{
19
+ align?: "center" | "end" | "baseline" | "start" | "stretch" | undefined;
20
20
  flow?: "row" | "column" | "dense" | "rowDense" | "columnDense" | undefined;
21
- gap?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
22
- gapX?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
23
- gapY?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
21
+ gap?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
22
+ gapX?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
23
+ gapY?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
24
24
  columns?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
25
25
  rows?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
26
- justify?: "end" | "start" | "center" | "stretch" | "between" | "around" | "evenly" | undefined;
27
- justifyItems?: "end" | "start" | "center" | "stretch" | undefined;
28
- }, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
26
+ justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
27
+ justifyItems?: "center" | "end" | "start" | "stretch" | undefined;
28
+ }, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
29
29
  ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
30
30
  } & {
31
31
  asChild?: boolean | undefined;
@@ -229,28 +229,28 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Pick<Omit<{
229
229
  readonly 'icon-400': "32px";
230
230
  };
231
231
  space: {
232
- readonly none: 0;
232
+ readonly 0: 0;
233
233
  readonly 50: "4px";
234
234
  readonly 100: "8px";
235
235
  readonly 150: "12px";
236
236
  readonly 200: "16px";
237
237
  readonly 300: "24px";
238
238
  readonly 400: "32px";
239
- readonly 500: "64px";
239
+ readonly 500: "40px";
240
240
  readonly 600: "48px";
241
241
  readonly 800: "64px";
242
242
  readonly 1200: "96px";
243
243
  readonly 1600: "128px";
244
244
  };
245
245
  'space-gap': {
246
- readonly none: any;
246
+ readonly 0: any;
247
247
  readonly 50: any;
248
248
  readonly 100: any;
249
249
  readonly 200: any;
250
250
  readonly 300: any;
251
251
  };
252
252
  'space-inset': {
253
- readonly none: any;
253
+ readonly 0: any;
254
254
  readonly 50: any;
255
255
  readonly 100: any;
256
256
  readonly 150: any;
@@ -263,7 +263,7 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Pick<Omit<{
263
263
  readonly 1600: any;
264
264
  };
265
265
  'space-offset': {
266
- readonly none: any;
266
+ readonly 0: any;
267
267
  readonly 50: any;
268
268
  readonly 100: any;
269
269
  readonly 150: any;
@@ -274,7 +274,7 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Pick<Omit<{
274
274
  readonly 800: any;
275
275
  readonly 1200: any;
276
276
  readonly 1600: any;
277
- readonly 'stacking-none': any;
277
+ readonly 'stacking-0': any;
278
278
  readonly 'stacking-100': any;
279
279
  readonly 'stacking-200': any;
280
280
  readonly 'stacking-300': any;
@@ -476,20 +476,20 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Pick<Omit<{
476
476
  }> | undefined;
477
477
  }> & {
478
478
  children?: react.ReactNode;
479
- } & _mirohq_design_system_stitches.CustomStylesProps, "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "rows" | "align" | "justify" | "asChild" | "justifyItems" | "columns" | "gap" | "flow" | keyof _mirohq_design_system_stitches.CustomStylesProps | "gapX" | "gapY"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
480
- align?: "end" | "baseline" | "start" | "center" | "stretch" | undefined;
479
+ } & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
480
+ align?: "center" | "end" | "baseline" | "start" | "stretch" | undefined;
481
481
  flow?: "row" | "column" | "dense" | "rowDense" | "columnDense" | undefined;
482
- gap?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
483
- gapX?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
484
- gapY?: "none" | 200 | 50 | 100 | 300 | "100" | "200" | "300" | "50" | undefined;
482
+ gap?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
483
+ gapX?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
484
+ gapY?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
485
485
  columns?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
486
486
  rows?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | undefined;
487
- justify?: "end" | "start" | "center" | "stretch" | "between" | "around" | "evenly" | undefined;
488
- justifyItems?: "end" | "start" | "center" | "stretch" | undefined;
487
+ justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
488
+ justifyItems?: "center" | "end" | "start" | "stretch" | undefined;
489
489
  }, {}>;
490
490
  declare type StyledGridProps = ComponentPropsWithRef<typeof StyledGrid>;
491
491
 
492
- declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
492
+ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<{
493
493
  columnStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
494
494
  rowStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
495
495
  columnEnd?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
@@ -499,7 +499,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
499
499
  rowStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
500
500
  columnEnd?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
501
501
  rowEnd?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
502
- }, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
502
+ }, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
503
503
  ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
504
504
  } & {
505
505
  asChild?: boolean | undefined;
@@ -703,28 +703,28 @@ declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
703
703
  readonly 'icon-400': "32px";
704
704
  };
705
705
  space: {
706
- readonly none: 0;
706
+ readonly 0: 0;
707
707
  readonly 50: "4px";
708
708
  readonly 100: "8px";
709
709
  readonly 150: "12px";
710
710
  readonly 200: "16px";
711
711
  readonly 300: "24px";
712
712
  readonly 400: "32px";
713
- readonly 500: "64px";
713
+ readonly 500: "40px";
714
714
  readonly 600: "48px";
715
715
  readonly 800: "64px";
716
716
  readonly 1200: "96px";
717
717
  readonly 1600: "128px";
718
718
  };
719
719
  'space-gap': {
720
- readonly none: any;
720
+ readonly 0: any;
721
721
  readonly 50: any;
722
722
  readonly 100: any;
723
723
  readonly 200: any;
724
724
  readonly 300: any;
725
725
  };
726
726
  'space-inset': {
727
- readonly none: any;
727
+ readonly 0: any;
728
728
  readonly 50: any;
729
729
  readonly 100: any;
730
730
  readonly 150: any;
@@ -737,7 +737,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
737
737
  readonly 1600: any;
738
738
  };
739
739
  'space-offset': {
740
- readonly none: any;
740
+ readonly 0: any;
741
741
  readonly 50: any;
742
742
  readonly 100: any;
743
743
  readonly 150: any;
@@ -748,7 +748,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
748
748
  readonly 800: any;
749
749
  readonly 1200: any;
750
750
  readonly 1600: any;
751
- readonly 'stacking-none': any;
751
+ readonly 'stacking-0': any;
752
752
  readonly 'stacking-100': any;
753
753
  readonly 'stacking-200': any;
754
754
  readonly 'stacking-300': any;
@@ -950,7 +950,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Pick<Omit<{
950
950
  }> | undefined;
951
951
  }> & {
952
952
  children?: react.ReactNode;
953
- } & _mirohq_design_system_stitches.CustomStylesProps, "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | keyof _mirohq_design_system_stitches.CustomStylesProps | "columnStart" | "rowStart" | "columnEnd" | "rowEnd"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
953
+ } & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
954
954
  columnStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
955
955
  rowStart?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
956
956
  columnEnd?: "1" | 1 | 4 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -1 | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "-1" | undefined;
@@ -976,7 +976,7 @@ interface ItemProps extends StyledItemProps {
976
976
  */
977
977
  rowEnd?: StyledItemProps['rowEnd'];
978
978
  }
979
- declare const Item: react__default.ForwardRefExoticComponent<Pick<ItemProps, "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "css" | "UNSAFE_style" | "columnStart" | "rowStart" | "columnEnd" | "rowEnd"> & react__default.RefAttributes<HTMLDivElement>>;
979
+ declare const Item: react__default.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
980
980
 
981
981
  interface GridProps extends StyledGridProps {
982
982
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-grid",
3
- "version": "2.1.12",
3
+ "version": "2.1.14-use-press.2",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,8 +27,8 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@mirohq/design-system-primitive": "^1.1.0",
30
- "@mirohq/design-system-utils": "^0.14.0",
31
- "@mirohq/design-system-stitches": "^2.3.2"
30
+ "@mirohq/design-system-stitches": "^2.3.4-use-press.0",
31
+ "@mirohq/design-system-utils": "^0.14.0-use-press.2"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "rollup -c ../../../rollup.config.js",