@mirohq/design-system-grid 2.1.36 → 2.1.38
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.
- package/dist/main.js +3 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +3 -3
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +134 -218
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -50,9 +50,9 @@ const StyledGrid = designSystemStitches.styled(designSystemPrimitive.Primitive.d
|
|
|
50
50
|
gridAutoFlow: "column dense"
|
|
51
51
|
}
|
|
52
52
|
},
|
|
53
|
-
gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme
|
|
54
|
-
gapX: designSystemUtils.mapKeysToVariants(designSystemStitches.theme
|
|
55
|
-
gapY: designSystemUtils.mapKeysToVariants(designSystemStitches.theme
|
|
53
|
+
gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme.space, "gap"),
|
|
54
|
+
gapX: designSystemUtils.mapKeysToVariants(designSystemStitches.theme.space, "rowGap"),
|
|
55
|
+
gapY: designSystemUtils.mapKeysToVariants(designSystemStitches.theme.space, "columnGap"),
|
|
56
56
|
columns: designSystemUtils.mapKeysToVariants(SIZES$1, (key) => ({
|
|
57
57
|
gridTemplateColumns: "repeat(".concat(key, ", 1fr)")
|
|
58
58
|
})),
|
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
|
|
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'),\n gapX: mapKeysToVariants(theme.space, 'rowGap'),\n gapY: mapKeysToVariants(theme.space, '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. Uses the\n * space token.\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. Uses the\n * space token.\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns. Uses the\n * space token.\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\nexport interface 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
|
@@ -42,9 +42,9 @@ const StyledGrid = styled(Primitive.div, {
|
|
|
42
42
|
gridAutoFlow: "column dense"
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
|
-
gap: mapKeysToVariants(theme
|
|
46
|
-
gapX: mapKeysToVariants(theme
|
|
47
|
-
gapY: mapKeysToVariants(theme
|
|
45
|
+
gap: mapKeysToVariants(theme.space, "gap"),
|
|
46
|
+
gapX: mapKeysToVariants(theme.space, "rowGap"),
|
|
47
|
+
gapY: mapKeysToVariants(theme.space, "columnGap"),
|
|
48
48
|
columns: mapKeysToVariants(SIZES$1, (key) => ({
|
|
49
49
|
gridTemplateColumns: "repeat(".concat(key, ", 1fr)")
|
|
50
50
|
})),
|
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
|
|
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'),\n gapX: mapKeysToVariants(theme.space, 'rowGap'),\n gapY: mapKeysToVariants(theme.space, '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. Uses the\n * space token.\n */\n gap?: StyledGridProps['gap']\n\n /**\n * Defines the width of the gutter between rows. Uses the\n * space token.\n */\n gapX?: StyledGridProps['gapX']\n\n /**\n * Defines the width of the gutter between columns. Uses the\n * space token.\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\nexport interface 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
|
@@ -256,17 +256,17 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
256
256
|
readonly body: "Open Sans, sans-serif";
|
|
257
257
|
};
|
|
258
258
|
radii: {
|
|
259
|
+
readonly 0: "0px";
|
|
259
260
|
readonly 25: "2px";
|
|
260
261
|
readonly 50: "4px";
|
|
261
262
|
readonly 75: "6px";
|
|
262
263
|
readonly 100: "8px";
|
|
263
264
|
readonly 200: "16px";
|
|
264
|
-
readonly
|
|
265
|
-
readonly none: "0px";
|
|
265
|
+
readonly round: "999px";
|
|
266
266
|
};
|
|
267
267
|
shadows: {
|
|
268
|
-
50: any;
|
|
269
268
|
100: any;
|
|
269
|
+
50: any;
|
|
270
270
|
"focus-small": any;
|
|
271
271
|
"focus-small-outline": any;
|
|
272
272
|
"focus-large": any;
|
|
@@ -296,48 +296,6 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
296
296
|
readonly 1200: "96px";
|
|
297
297
|
readonly 1600: "128px";
|
|
298
298
|
};
|
|
299
|
-
'space-gap': {
|
|
300
|
-
readonly 0: any;
|
|
301
|
-
readonly 50: any;
|
|
302
|
-
readonly 100: any;
|
|
303
|
-
readonly 200: any;
|
|
304
|
-
readonly 300: any;
|
|
305
|
-
};
|
|
306
|
-
'space-inset': {
|
|
307
|
-
readonly 0: any;
|
|
308
|
-
readonly 50: any;
|
|
309
|
-
readonly 100: any;
|
|
310
|
-
readonly 150: any;
|
|
311
|
-
readonly 200: any;
|
|
312
|
-
readonly 300: any;
|
|
313
|
-
readonly 400: any;
|
|
314
|
-
readonly 500: any;
|
|
315
|
-
readonly 600: any;
|
|
316
|
-
readonly 700: any;
|
|
317
|
-
readonly 800: any;
|
|
318
|
-
readonly 1200: any;
|
|
319
|
-
readonly 1600: any;
|
|
320
|
-
};
|
|
321
|
-
'space-offset': {
|
|
322
|
-
readonly 0: any;
|
|
323
|
-
readonly 50: any;
|
|
324
|
-
readonly 100: any;
|
|
325
|
-
readonly 150: any;
|
|
326
|
-
readonly 200: any;
|
|
327
|
-
readonly 300: any;
|
|
328
|
-
readonly 400: any;
|
|
329
|
-
readonly 600: any;
|
|
330
|
-
readonly 800: any;
|
|
331
|
-
readonly 1200: any;
|
|
332
|
-
readonly 1600: any;
|
|
333
|
-
readonly 'stacking-0': any;
|
|
334
|
-
readonly 'stacking-100': any;
|
|
335
|
-
readonly 'stacking-200': any;
|
|
336
|
-
readonly 'stacking-300': any;
|
|
337
|
-
readonly 'stacking-400': any;
|
|
338
|
-
readonly 'stacking-500': any;
|
|
339
|
-
readonly 'stacking-800': any;
|
|
340
|
-
};
|
|
341
299
|
'stroke-width': {
|
|
342
300
|
readonly thin: "1.5px";
|
|
343
301
|
readonly normal: "2px";
|
|
@@ -378,7 +336,7 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
378
336
|
readonly borderRightColor: "colors";
|
|
379
337
|
readonly borderRightStyle: "border-styles";
|
|
380
338
|
readonly borderRightWidth: "border-widths";
|
|
381
|
-
readonly borderSpacing: "space
|
|
339
|
+
readonly borderSpacing: "space";
|
|
382
340
|
readonly borderStyle: "border-styles";
|
|
383
341
|
readonly borderTop: "colors";
|
|
384
342
|
readonly borderTopColor: "colors";
|
|
@@ -391,42 +349,42 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
391
349
|
readonly boxShadow: "shadows";
|
|
392
350
|
readonly caretColor: "colors";
|
|
393
351
|
readonly color: "colors";
|
|
394
|
-
readonly columnGap: "space
|
|
352
|
+
readonly columnGap: "space";
|
|
395
353
|
readonly columnRuleColor: "colors";
|
|
396
354
|
readonly fill: "colors";
|
|
397
355
|
readonly flexBasis: "sizes";
|
|
398
356
|
readonly fontFamily: "fonts";
|
|
399
357
|
readonly fontSize: "font-sizes";
|
|
400
358
|
readonly fontWeight: "font-weights";
|
|
401
|
-
readonly gap: "space
|
|
402
|
-
readonly gridColumnGap: "space
|
|
403
|
-
readonly gridGap: "space
|
|
404
|
-
readonly gridRowGap: "space
|
|
359
|
+
readonly gap: "space";
|
|
360
|
+
readonly gridColumnGap: "space";
|
|
361
|
+
readonly gridGap: "space";
|
|
362
|
+
readonly gridRowGap: "space";
|
|
405
363
|
readonly gridTemplateColumns: "sizes";
|
|
406
364
|
readonly gridTemplateRows: "sizes";
|
|
407
365
|
readonly height: "sizes";
|
|
408
366
|
readonly inlineSize: "sizes";
|
|
409
|
-
readonly inset: "space
|
|
410
|
-
readonly insetBlock: "space
|
|
411
|
-
readonly insetBlockEnd: "space
|
|
412
|
-
readonly insetBlockStart: "space
|
|
413
|
-
readonly insetInline: "space
|
|
414
|
-
readonly insetInlineEnd: "space
|
|
415
|
-
readonly insetInlineStart: "space
|
|
367
|
+
readonly inset: "space";
|
|
368
|
+
readonly insetBlock: "space";
|
|
369
|
+
readonly insetBlockEnd: "space";
|
|
370
|
+
readonly insetBlockStart: "space";
|
|
371
|
+
readonly insetInline: "space";
|
|
372
|
+
readonly insetInlineEnd: "space";
|
|
373
|
+
readonly insetInlineStart: "space";
|
|
416
374
|
readonly left: "space";
|
|
417
375
|
readonly letterSpacing: "letter-spacings";
|
|
418
376
|
readonly lineHeight: "line-heights";
|
|
419
|
-
readonly margin: "space
|
|
420
|
-
readonly marginBlock: "space
|
|
421
|
-
readonly marginBlockEnd: "space
|
|
422
|
-
readonly marginBlockStart: "space
|
|
423
|
-
readonly marginBottom: "space
|
|
424
|
-
readonly marginInline: "space
|
|
425
|
-
readonly marginInlineEnd: "space
|
|
426
|
-
readonly marginInlineStart: "space
|
|
427
|
-
readonly marginLeft: "space
|
|
428
|
-
readonly marginRight: "space
|
|
429
|
-
readonly marginTop: "space
|
|
377
|
+
readonly margin: "space";
|
|
378
|
+
readonly marginBlock: "space";
|
|
379
|
+
readonly marginBlockEnd: "space";
|
|
380
|
+
readonly marginBlockStart: "space";
|
|
381
|
+
readonly marginBottom: "space";
|
|
382
|
+
readonly marginInline: "space";
|
|
383
|
+
readonly marginInlineEnd: "space";
|
|
384
|
+
readonly marginInlineStart: "space";
|
|
385
|
+
readonly marginLeft: "space";
|
|
386
|
+
readonly marginRight: "space";
|
|
387
|
+
readonly marginTop: "space";
|
|
430
388
|
readonly maxBlockSize: "sizes";
|
|
431
389
|
readonly maxHeight: "sizes";
|
|
432
390
|
readonly maxInlineSize: "sizes";
|
|
@@ -437,41 +395,41 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
437
395
|
readonly minWidth: "sizes";
|
|
438
396
|
readonly outline: "colors";
|
|
439
397
|
readonly outlineColor: "colors";
|
|
440
|
-
readonly padding: "space
|
|
441
|
-
readonly paddingBlock: "space
|
|
442
|
-
readonly paddingBlockEnd: "space
|
|
443
|
-
readonly paddingBlockStart: "space
|
|
444
|
-
readonly paddingBottom: "space
|
|
445
|
-
readonly paddingInline: "space
|
|
446
|
-
readonly paddingInlineEnd: "space
|
|
447
|
-
readonly paddingInlineStart: "space
|
|
448
|
-
readonly paddingLeft: "space
|
|
449
|
-
readonly paddingRight: "space
|
|
450
|
-
readonly paddingTop: "space
|
|
398
|
+
readonly padding: "space";
|
|
399
|
+
readonly paddingBlock: "space";
|
|
400
|
+
readonly paddingBlockEnd: "space";
|
|
401
|
+
readonly paddingBlockStart: "space";
|
|
402
|
+
readonly paddingBottom: "space";
|
|
403
|
+
readonly paddingInline: "space";
|
|
404
|
+
readonly paddingInlineEnd: "space";
|
|
405
|
+
readonly paddingInlineStart: "space";
|
|
406
|
+
readonly paddingLeft: "space";
|
|
407
|
+
readonly paddingRight: "space";
|
|
408
|
+
readonly paddingTop: "space";
|
|
451
409
|
readonly right: "space";
|
|
452
|
-
readonly rowGap: "space
|
|
453
|
-
readonly scrollMargin: "space
|
|
454
|
-
readonly scrollMarginBlock: "space
|
|
455
|
-
readonly scrollMarginBlockEnd: "space
|
|
456
|
-
readonly scrollMarginBlockStart: "space
|
|
457
|
-
readonly scrollMarginBottom: "space
|
|
458
|
-
readonly scrollMarginInline: "space
|
|
459
|
-
readonly scrollMarginInlineEnd: "space
|
|
460
|
-
readonly scrollMarginInlineStart: "space
|
|
461
|
-
readonly scrollMarginLeft: "space
|
|
462
|
-
readonly scrollMarginRight: "space
|
|
463
|
-
readonly scrollMarginTop: "space
|
|
464
|
-
readonly scrollPadding: "space
|
|
465
|
-
readonly scrollPaddingBlock: "space
|
|
466
|
-
readonly scrollPaddingBlockEnd: "space
|
|
467
|
-
readonly scrollPaddingBlockStart: "space
|
|
468
|
-
readonly scrollPaddingBottom: "space
|
|
469
|
-
readonly scrollPaddingInline: "space
|
|
470
|
-
readonly scrollPaddingInlineEnd: "space
|
|
471
|
-
readonly scrollPaddingInlineStart: "space
|
|
472
|
-
readonly scrollPaddingLeft: "space
|
|
473
|
-
readonly scrollPaddingRight: "space
|
|
474
|
-
readonly scrollPaddingTop: "space
|
|
410
|
+
readonly rowGap: "space";
|
|
411
|
+
readonly scrollMargin: "space";
|
|
412
|
+
readonly scrollMarginBlock: "space";
|
|
413
|
+
readonly scrollMarginBlockEnd: "space";
|
|
414
|
+
readonly scrollMarginBlockStart: "space";
|
|
415
|
+
readonly scrollMarginBottom: "space";
|
|
416
|
+
readonly scrollMarginInline: "space";
|
|
417
|
+
readonly scrollMarginInlineEnd: "space";
|
|
418
|
+
readonly scrollMarginInlineStart: "space";
|
|
419
|
+
readonly scrollMarginLeft: "space";
|
|
420
|
+
readonly scrollMarginRight: "space";
|
|
421
|
+
readonly scrollMarginTop: "space";
|
|
422
|
+
readonly scrollPadding: "space";
|
|
423
|
+
readonly scrollPaddingBlock: "space";
|
|
424
|
+
readonly scrollPaddingBlockEnd: "space";
|
|
425
|
+
readonly scrollPaddingBlockStart: "space";
|
|
426
|
+
readonly scrollPaddingBottom: "space";
|
|
427
|
+
readonly scrollPaddingInline: "space";
|
|
428
|
+
readonly scrollPaddingInlineEnd: "space";
|
|
429
|
+
readonly scrollPaddingInlineStart: "space";
|
|
430
|
+
readonly scrollPaddingLeft: "space";
|
|
431
|
+
readonly scrollPaddingRight: "space";
|
|
432
|
+
readonly scrollPaddingTop: "space";
|
|
475
433
|
readonly stroke: "colors";
|
|
476
434
|
readonly strokeWidth: "stroke-width";
|
|
477
435
|
readonly textDecorationColor: "colors";
|
|
@@ -537,9 +495,9 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
537
495
|
}>>>, "rows" | "align" | "columns" | "justify" | "justifyItems" | "gap" | "flow" | "gapX" | "gapY"> & _stitches_react_types_styled_component.TransformProps<{
|
|
538
496
|
align?: "center" | "end" | "baseline" | "start" | "stretch" | undefined;
|
|
539
497
|
flow?: "row" | "column" | "dense" | "rowDense" | "columnDense" | undefined;
|
|
540
|
-
gap?: 0 | 200 | 50 | 100 |
|
|
541
|
-
gapX?: 0 | 200 | 50 | 100 |
|
|
542
|
-
gapY?: 0 | 200 | 50 | 100 |
|
|
498
|
+
gap?: 0 | 200 | 100 | 300 | 400 | 50 | "50" | "100" | 25 | 150 | 500 | 600 | 700 | 800 | 1200 | 1600 | "0" | "25" | "200" | "150" | "300" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | undefined;
|
|
499
|
+
gapX?: 0 | 200 | 100 | 300 | 400 | 50 | "50" | "100" | 25 | 150 | 500 | 600 | 700 | 800 | 1200 | 1600 | "0" | "25" | "200" | "150" | "300" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | undefined;
|
|
500
|
+
gapY?: 0 | 200 | 100 | 300 | 400 | 50 | "50" | "100" | 25 | 150 | 500 | 600 | 700 | 800 | 1200 | 1600 | "0" | "25" | "200" | "150" | "300" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | undefined;
|
|
543
501
|
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;
|
|
544
502
|
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;
|
|
545
503
|
justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
|
|
@@ -547,9 +505,9 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
547
505
|
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
|
|
548
506
|
align?: "center" | "end" | "baseline" | "start" | "stretch" | undefined;
|
|
549
507
|
flow?: "row" | "column" | "dense" | "rowDense" | "columnDense" | undefined;
|
|
550
|
-
gap?: 0 | 200 | 50 | 100 |
|
|
551
|
-
gapX?: 0 | 200 | 50 | 100 |
|
|
552
|
-
gapY?: 0 | 200 | 50 | 100 |
|
|
508
|
+
gap?: 0 | 200 | 100 | 300 | 400 | 50 | "50" | "100" | 25 | 150 | 500 | 600 | 700 | 800 | 1200 | 1600 | "0" | "25" | "200" | "150" | "300" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | undefined;
|
|
509
|
+
gapX?: 0 | 200 | 100 | 300 | 400 | 50 | "50" | "100" | 25 | 150 | 500 | 600 | 700 | 800 | 1200 | 1600 | "0" | "25" | "200" | "150" | "300" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | undefined;
|
|
510
|
+
gapY?: 0 | 200 | 100 | 300 | 400 | 50 | "50" | "100" | 25 | 150 | 500 | 600 | 700 | 800 | 1200 | 1600 | "0" | "25" | "200" | "150" | "300" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | undefined;
|
|
553
511
|
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;
|
|
554
512
|
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;
|
|
555
513
|
justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
|
|
@@ -808,17 +766,17 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
808
766
|
readonly body: "Open Sans, sans-serif";
|
|
809
767
|
};
|
|
810
768
|
radii: {
|
|
769
|
+
readonly 0: "0px";
|
|
811
770
|
readonly 25: "2px";
|
|
812
771
|
readonly 50: "4px";
|
|
813
772
|
readonly 75: "6px";
|
|
814
773
|
readonly 100: "8px";
|
|
815
774
|
readonly 200: "16px";
|
|
816
|
-
readonly
|
|
817
|
-
readonly none: "0px";
|
|
775
|
+
readonly round: "999px";
|
|
818
776
|
};
|
|
819
777
|
shadows: {
|
|
820
|
-
50: any;
|
|
821
778
|
100: any;
|
|
779
|
+
50: any;
|
|
822
780
|
"focus-small": any;
|
|
823
781
|
"focus-small-outline": any;
|
|
824
782
|
"focus-large": any;
|
|
@@ -848,48 +806,6 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
848
806
|
readonly 1200: "96px";
|
|
849
807
|
readonly 1600: "128px";
|
|
850
808
|
};
|
|
851
|
-
'space-gap': {
|
|
852
|
-
readonly 0: any;
|
|
853
|
-
readonly 50: any;
|
|
854
|
-
readonly 100: any;
|
|
855
|
-
readonly 200: any;
|
|
856
|
-
readonly 300: any;
|
|
857
|
-
};
|
|
858
|
-
'space-inset': {
|
|
859
|
-
readonly 0: any;
|
|
860
|
-
readonly 50: any;
|
|
861
|
-
readonly 100: any;
|
|
862
|
-
readonly 150: any;
|
|
863
|
-
readonly 200: any;
|
|
864
|
-
readonly 300: any;
|
|
865
|
-
readonly 400: any;
|
|
866
|
-
readonly 500: any;
|
|
867
|
-
readonly 600: any;
|
|
868
|
-
readonly 700: any;
|
|
869
|
-
readonly 800: any;
|
|
870
|
-
readonly 1200: any;
|
|
871
|
-
readonly 1600: any;
|
|
872
|
-
};
|
|
873
|
-
'space-offset': {
|
|
874
|
-
readonly 0: any;
|
|
875
|
-
readonly 50: any;
|
|
876
|
-
readonly 100: any;
|
|
877
|
-
readonly 150: any;
|
|
878
|
-
readonly 200: any;
|
|
879
|
-
readonly 300: any;
|
|
880
|
-
readonly 400: any;
|
|
881
|
-
readonly 600: any;
|
|
882
|
-
readonly 800: any;
|
|
883
|
-
readonly 1200: any;
|
|
884
|
-
readonly 1600: any;
|
|
885
|
-
readonly 'stacking-0': any;
|
|
886
|
-
readonly 'stacking-100': any;
|
|
887
|
-
readonly 'stacking-200': any;
|
|
888
|
-
readonly 'stacking-300': any;
|
|
889
|
-
readonly 'stacking-400': any;
|
|
890
|
-
readonly 'stacking-500': any;
|
|
891
|
-
readonly 'stacking-800': any;
|
|
892
|
-
};
|
|
893
809
|
'stroke-width': {
|
|
894
810
|
readonly thin: "1.5px";
|
|
895
811
|
readonly normal: "2px";
|
|
@@ -930,7 +846,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
930
846
|
readonly borderRightColor: "colors";
|
|
931
847
|
readonly borderRightStyle: "border-styles";
|
|
932
848
|
readonly borderRightWidth: "border-widths";
|
|
933
|
-
readonly borderSpacing: "space
|
|
849
|
+
readonly borderSpacing: "space";
|
|
934
850
|
readonly borderStyle: "border-styles";
|
|
935
851
|
readonly borderTop: "colors";
|
|
936
852
|
readonly borderTopColor: "colors";
|
|
@@ -943,42 +859,42 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
943
859
|
readonly boxShadow: "shadows";
|
|
944
860
|
readonly caretColor: "colors";
|
|
945
861
|
readonly color: "colors";
|
|
946
|
-
readonly columnGap: "space
|
|
862
|
+
readonly columnGap: "space";
|
|
947
863
|
readonly columnRuleColor: "colors";
|
|
948
864
|
readonly fill: "colors";
|
|
949
865
|
readonly flexBasis: "sizes";
|
|
950
866
|
readonly fontFamily: "fonts";
|
|
951
867
|
readonly fontSize: "font-sizes";
|
|
952
868
|
readonly fontWeight: "font-weights";
|
|
953
|
-
readonly gap: "space
|
|
954
|
-
readonly gridColumnGap: "space
|
|
955
|
-
readonly gridGap: "space
|
|
956
|
-
readonly gridRowGap: "space
|
|
869
|
+
readonly gap: "space";
|
|
870
|
+
readonly gridColumnGap: "space";
|
|
871
|
+
readonly gridGap: "space";
|
|
872
|
+
readonly gridRowGap: "space";
|
|
957
873
|
readonly gridTemplateColumns: "sizes";
|
|
958
874
|
readonly gridTemplateRows: "sizes";
|
|
959
875
|
readonly height: "sizes";
|
|
960
876
|
readonly inlineSize: "sizes";
|
|
961
|
-
readonly inset: "space
|
|
962
|
-
readonly insetBlock: "space
|
|
963
|
-
readonly insetBlockEnd: "space
|
|
964
|
-
readonly insetBlockStart: "space
|
|
965
|
-
readonly insetInline: "space
|
|
966
|
-
readonly insetInlineEnd: "space
|
|
967
|
-
readonly insetInlineStart: "space
|
|
877
|
+
readonly inset: "space";
|
|
878
|
+
readonly insetBlock: "space";
|
|
879
|
+
readonly insetBlockEnd: "space";
|
|
880
|
+
readonly insetBlockStart: "space";
|
|
881
|
+
readonly insetInline: "space";
|
|
882
|
+
readonly insetInlineEnd: "space";
|
|
883
|
+
readonly insetInlineStart: "space";
|
|
968
884
|
readonly left: "space";
|
|
969
885
|
readonly letterSpacing: "letter-spacings";
|
|
970
886
|
readonly lineHeight: "line-heights";
|
|
971
|
-
readonly margin: "space
|
|
972
|
-
readonly marginBlock: "space
|
|
973
|
-
readonly marginBlockEnd: "space
|
|
974
|
-
readonly marginBlockStart: "space
|
|
975
|
-
readonly marginBottom: "space
|
|
976
|
-
readonly marginInline: "space
|
|
977
|
-
readonly marginInlineEnd: "space
|
|
978
|
-
readonly marginInlineStart: "space
|
|
979
|
-
readonly marginLeft: "space
|
|
980
|
-
readonly marginRight: "space
|
|
981
|
-
readonly marginTop: "space
|
|
887
|
+
readonly margin: "space";
|
|
888
|
+
readonly marginBlock: "space";
|
|
889
|
+
readonly marginBlockEnd: "space";
|
|
890
|
+
readonly marginBlockStart: "space";
|
|
891
|
+
readonly marginBottom: "space";
|
|
892
|
+
readonly marginInline: "space";
|
|
893
|
+
readonly marginInlineEnd: "space";
|
|
894
|
+
readonly marginInlineStart: "space";
|
|
895
|
+
readonly marginLeft: "space";
|
|
896
|
+
readonly marginRight: "space";
|
|
897
|
+
readonly marginTop: "space";
|
|
982
898
|
readonly maxBlockSize: "sizes";
|
|
983
899
|
readonly maxHeight: "sizes";
|
|
984
900
|
readonly maxInlineSize: "sizes";
|
|
@@ -989,41 +905,41 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
989
905
|
readonly minWidth: "sizes";
|
|
990
906
|
readonly outline: "colors";
|
|
991
907
|
readonly outlineColor: "colors";
|
|
992
|
-
readonly padding: "space
|
|
993
|
-
readonly paddingBlock: "space
|
|
994
|
-
readonly paddingBlockEnd: "space
|
|
995
|
-
readonly paddingBlockStart: "space
|
|
996
|
-
readonly paddingBottom: "space
|
|
997
|
-
readonly paddingInline: "space
|
|
998
|
-
readonly paddingInlineEnd: "space
|
|
999
|
-
readonly paddingInlineStart: "space
|
|
1000
|
-
readonly paddingLeft: "space
|
|
1001
|
-
readonly paddingRight: "space
|
|
1002
|
-
readonly paddingTop: "space
|
|
908
|
+
readonly padding: "space";
|
|
909
|
+
readonly paddingBlock: "space";
|
|
910
|
+
readonly paddingBlockEnd: "space";
|
|
911
|
+
readonly paddingBlockStart: "space";
|
|
912
|
+
readonly paddingBottom: "space";
|
|
913
|
+
readonly paddingInline: "space";
|
|
914
|
+
readonly paddingInlineEnd: "space";
|
|
915
|
+
readonly paddingInlineStart: "space";
|
|
916
|
+
readonly paddingLeft: "space";
|
|
917
|
+
readonly paddingRight: "space";
|
|
918
|
+
readonly paddingTop: "space";
|
|
1003
919
|
readonly right: "space";
|
|
1004
|
-
readonly rowGap: "space
|
|
1005
|
-
readonly scrollMargin: "space
|
|
1006
|
-
readonly scrollMarginBlock: "space
|
|
1007
|
-
readonly scrollMarginBlockEnd: "space
|
|
1008
|
-
readonly scrollMarginBlockStart: "space
|
|
1009
|
-
readonly scrollMarginBottom: "space
|
|
1010
|
-
readonly scrollMarginInline: "space
|
|
1011
|
-
readonly scrollMarginInlineEnd: "space
|
|
1012
|
-
readonly scrollMarginInlineStart: "space
|
|
1013
|
-
readonly scrollMarginLeft: "space
|
|
1014
|
-
readonly scrollMarginRight: "space
|
|
1015
|
-
readonly scrollMarginTop: "space
|
|
1016
|
-
readonly scrollPadding: "space
|
|
1017
|
-
readonly scrollPaddingBlock: "space
|
|
1018
|
-
readonly scrollPaddingBlockEnd: "space
|
|
1019
|
-
readonly scrollPaddingBlockStart: "space
|
|
1020
|
-
readonly scrollPaddingBottom: "space
|
|
1021
|
-
readonly scrollPaddingInline: "space
|
|
1022
|
-
readonly scrollPaddingInlineEnd: "space
|
|
1023
|
-
readonly scrollPaddingInlineStart: "space
|
|
1024
|
-
readonly scrollPaddingLeft: "space
|
|
1025
|
-
readonly scrollPaddingRight: "space
|
|
1026
|
-
readonly scrollPaddingTop: "space
|
|
920
|
+
readonly rowGap: "space";
|
|
921
|
+
readonly scrollMargin: "space";
|
|
922
|
+
readonly scrollMarginBlock: "space";
|
|
923
|
+
readonly scrollMarginBlockEnd: "space";
|
|
924
|
+
readonly scrollMarginBlockStart: "space";
|
|
925
|
+
readonly scrollMarginBottom: "space";
|
|
926
|
+
readonly scrollMarginInline: "space";
|
|
927
|
+
readonly scrollMarginInlineEnd: "space";
|
|
928
|
+
readonly scrollMarginInlineStart: "space";
|
|
929
|
+
readonly scrollMarginLeft: "space";
|
|
930
|
+
readonly scrollMarginRight: "space";
|
|
931
|
+
readonly scrollMarginTop: "space";
|
|
932
|
+
readonly scrollPadding: "space";
|
|
933
|
+
readonly scrollPaddingBlock: "space";
|
|
934
|
+
readonly scrollPaddingBlockEnd: "space";
|
|
935
|
+
readonly scrollPaddingBlockStart: "space";
|
|
936
|
+
readonly scrollPaddingBottom: "space";
|
|
937
|
+
readonly scrollPaddingInline: "space";
|
|
938
|
+
readonly scrollPaddingInlineEnd: "space";
|
|
939
|
+
readonly scrollPaddingInlineStart: "space";
|
|
940
|
+
readonly scrollPaddingLeft: "space";
|
|
941
|
+
readonly scrollPaddingRight: "space";
|
|
942
|
+
readonly scrollPaddingTop: "space";
|
|
1027
943
|
readonly stroke: "colors";
|
|
1028
944
|
readonly strokeWidth: "stroke-width";
|
|
1029
945
|
readonly textDecorationColor: "colors";
|
|
@@ -1138,18 +1054,18 @@ interface GridProps extends StyledGridProps {
|
|
|
1138
1054
|
*/
|
|
1139
1055
|
flow?: StyledGridProps['flow'];
|
|
1140
1056
|
/**
|
|
1141
|
-
* Defines the width of the gutter between both columns and rows.
|
|
1142
|
-
*
|
|
1057
|
+
* Defines the width of the gutter between both columns and rows. Uses the
|
|
1058
|
+
* space token.
|
|
1143
1059
|
*/
|
|
1144
1060
|
gap?: StyledGridProps['gap'];
|
|
1145
1061
|
/**
|
|
1146
|
-
* Defines the width of the gutter between rows.
|
|
1147
|
-
*
|
|
1062
|
+
* Defines the width of the gutter between rows. Uses the
|
|
1063
|
+
* space token.
|
|
1148
1064
|
*/
|
|
1149
1065
|
gapX?: StyledGridProps['gapX'];
|
|
1150
1066
|
/**
|
|
1151
|
-
* Defines the width of the gutter between columns.
|
|
1152
|
-
*
|
|
1067
|
+
* Defines the width of the gutter between columns. Uses the
|
|
1068
|
+
* space token.
|
|
1153
1069
|
*/
|
|
1154
1070
|
gapY?: StyledGridProps['gapY'];
|
|
1155
1071
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-grid",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.38",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
30
|
-
"@mirohq/design-system-stitches": "^2.6.
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.6.4",
|
|
31
31
|
"@mirohq/design-system-utils": "^0.15.0"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|