@mirohq/design-system-grid 2.1.37 → 2.1.39
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 +136 -218
- package/package.json +3 -3
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,22 +256,23 @@ 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;
|
|
273
273
|
"focus-controls": any;
|
|
274
274
|
"focus-controls-error": any;
|
|
275
|
+
"focus-controls-error-small": any;
|
|
275
276
|
"focus-controls-success": any;
|
|
276
277
|
};
|
|
277
278
|
sizes: {
|
|
@@ -296,48 +297,6 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
296
297
|
readonly 1200: "96px";
|
|
297
298
|
readonly 1600: "128px";
|
|
298
299
|
};
|
|
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
300
|
'stroke-width': {
|
|
342
301
|
readonly thin: "1.5px";
|
|
343
302
|
readonly normal: "2px";
|
|
@@ -378,7 +337,7 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
378
337
|
readonly borderRightColor: "colors";
|
|
379
338
|
readonly borderRightStyle: "border-styles";
|
|
380
339
|
readonly borderRightWidth: "border-widths";
|
|
381
|
-
readonly borderSpacing: "space
|
|
340
|
+
readonly borderSpacing: "space";
|
|
382
341
|
readonly borderStyle: "border-styles";
|
|
383
342
|
readonly borderTop: "colors";
|
|
384
343
|
readonly borderTopColor: "colors";
|
|
@@ -391,42 +350,42 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
391
350
|
readonly boxShadow: "shadows";
|
|
392
351
|
readonly caretColor: "colors";
|
|
393
352
|
readonly color: "colors";
|
|
394
|
-
readonly columnGap: "space
|
|
353
|
+
readonly columnGap: "space";
|
|
395
354
|
readonly columnRuleColor: "colors";
|
|
396
355
|
readonly fill: "colors";
|
|
397
356
|
readonly flexBasis: "sizes";
|
|
398
357
|
readonly fontFamily: "fonts";
|
|
399
358
|
readonly fontSize: "font-sizes";
|
|
400
359
|
readonly fontWeight: "font-weights";
|
|
401
|
-
readonly gap: "space
|
|
402
|
-
readonly gridColumnGap: "space
|
|
403
|
-
readonly gridGap: "space
|
|
404
|
-
readonly gridRowGap: "space
|
|
360
|
+
readonly gap: "space";
|
|
361
|
+
readonly gridColumnGap: "space";
|
|
362
|
+
readonly gridGap: "space";
|
|
363
|
+
readonly gridRowGap: "space";
|
|
405
364
|
readonly gridTemplateColumns: "sizes";
|
|
406
365
|
readonly gridTemplateRows: "sizes";
|
|
407
366
|
readonly height: "sizes";
|
|
408
367
|
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
|
|
368
|
+
readonly inset: "space";
|
|
369
|
+
readonly insetBlock: "space";
|
|
370
|
+
readonly insetBlockEnd: "space";
|
|
371
|
+
readonly insetBlockStart: "space";
|
|
372
|
+
readonly insetInline: "space";
|
|
373
|
+
readonly insetInlineEnd: "space";
|
|
374
|
+
readonly insetInlineStart: "space";
|
|
416
375
|
readonly left: "space";
|
|
417
376
|
readonly letterSpacing: "letter-spacings";
|
|
418
377
|
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
|
|
378
|
+
readonly margin: "space";
|
|
379
|
+
readonly marginBlock: "space";
|
|
380
|
+
readonly marginBlockEnd: "space";
|
|
381
|
+
readonly marginBlockStart: "space";
|
|
382
|
+
readonly marginBottom: "space";
|
|
383
|
+
readonly marginInline: "space";
|
|
384
|
+
readonly marginInlineEnd: "space";
|
|
385
|
+
readonly marginInlineStart: "space";
|
|
386
|
+
readonly marginLeft: "space";
|
|
387
|
+
readonly marginRight: "space";
|
|
388
|
+
readonly marginTop: "space";
|
|
430
389
|
readonly maxBlockSize: "sizes";
|
|
431
390
|
readonly maxHeight: "sizes";
|
|
432
391
|
readonly maxInlineSize: "sizes";
|
|
@@ -437,41 +396,41 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
437
396
|
readonly minWidth: "sizes";
|
|
438
397
|
readonly outline: "colors";
|
|
439
398
|
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
|
|
399
|
+
readonly padding: "space";
|
|
400
|
+
readonly paddingBlock: "space";
|
|
401
|
+
readonly paddingBlockEnd: "space";
|
|
402
|
+
readonly paddingBlockStart: "space";
|
|
403
|
+
readonly paddingBottom: "space";
|
|
404
|
+
readonly paddingInline: "space";
|
|
405
|
+
readonly paddingInlineEnd: "space";
|
|
406
|
+
readonly paddingInlineStart: "space";
|
|
407
|
+
readonly paddingLeft: "space";
|
|
408
|
+
readonly paddingRight: "space";
|
|
409
|
+
readonly paddingTop: "space";
|
|
451
410
|
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
|
|
411
|
+
readonly rowGap: "space";
|
|
412
|
+
readonly scrollMargin: "space";
|
|
413
|
+
readonly scrollMarginBlock: "space";
|
|
414
|
+
readonly scrollMarginBlockEnd: "space";
|
|
415
|
+
readonly scrollMarginBlockStart: "space";
|
|
416
|
+
readonly scrollMarginBottom: "space";
|
|
417
|
+
readonly scrollMarginInline: "space";
|
|
418
|
+
readonly scrollMarginInlineEnd: "space";
|
|
419
|
+
readonly scrollMarginInlineStart: "space";
|
|
420
|
+
readonly scrollMarginLeft: "space";
|
|
421
|
+
readonly scrollMarginRight: "space";
|
|
422
|
+
readonly scrollMarginTop: "space";
|
|
423
|
+
readonly scrollPadding: "space";
|
|
424
|
+
readonly scrollPaddingBlock: "space";
|
|
425
|
+
readonly scrollPaddingBlockEnd: "space";
|
|
426
|
+
readonly scrollPaddingBlockStart: "space";
|
|
427
|
+
readonly scrollPaddingBottom: "space";
|
|
428
|
+
readonly scrollPaddingInline: "space";
|
|
429
|
+
readonly scrollPaddingInlineEnd: "space";
|
|
430
|
+
readonly scrollPaddingInlineStart: "space";
|
|
431
|
+
readonly scrollPaddingLeft: "space";
|
|
432
|
+
readonly scrollPaddingRight: "space";
|
|
433
|
+
readonly scrollPaddingTop: "space";
|
|
475
434
|
readonly stroke: "colors";
|
|
476
435
|
readonly strokeWidth: "stroke-width";
|
|
477
436
|
readonly textDecorationColor: "colors";
|
|
@@ -537,9 +496,9 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
537
496
|
}>>>, "rows" | "align" | "columns" | "justify" | "justifyItems" | "gap" | "flow" | "gapX" | "gapY"> & _stitches_react_types_styled_component.TransformProps<{
|
|
538
497
|
align?: "center" | "end" | "baseline" | "start" | "stretch" | undefined;
|
|
539
498
|
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 |
|
|
499
|
+
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;
|
|
500
|
+
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;
|
|
501
|
+
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
502
|
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
503
|
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
504
|
justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
|
|
@@ -547,9 +506,9 @@ declare const StyledGrid: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
547
506
|
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
|
|
548
507
|
align?: "center" | "end" | "baseline" | "start" | "stretch" | undefined;
|
|
549
508
|
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 |
|
|
509
|
+
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;
|
|
510
|
+
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;
|
|
511
|
+
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
512
|
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
513
|
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
514
|
justify?: "center" | "end" | "start" | "stretch" | "between" | "around" | "evenly" | undefined;
|
|
@@ -808,22 +767,23 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
808
767
|
readonly body: "Open Sans, sans-serif";
|
|
809
768
|
};
|
|
810
769
|
radii: {
|
|
770
|
+
readonly 0: "0px";
|
|
811
771
|
readonly 25: "2px";
|
|
812
772
|
readonly 50: "4px";
|
|
813
773
|
readonly 75: "6px";
|
|
814
774
|
readonly 100: "8px";
|
|
815
775
|
readonly 200: "16px";
|
|
816
|
-
readonly
|
|
817
|
-
readonly none: "0px";
|
|
776
|
+
readonly round: "999px";
|
|
818
777
|
};
|
|
819
778
|
shadows: {
|
|
820
|
-
50: any;
|
|
821
779
|
100: any;
|
|
780
|
+
50: any;
|
|
822
781
|
"focus-small": any;
|
|
823
782
|
"focus-small-outline": any;
|
|
824
783
|
"focus-large": any;
|
|
825
784
|
"focus-controls": any;
|
|
826
785
|
"focus-controls-error": any;
|
|
786
|
+
"focus-controls-error-small": any;
|
|
827
787
|
"focus-controls-success": any;
|
|
828
788
|
};
|
|
829
789
|
sizes: {
|
|
@@ -848,48 +808,6 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
848
808
|
readonly 1200: "96px";
|
|
849
809
|
readonly 1600: "128px";
|
|
850
810
|
};
|
|
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
811
|
'stroke-width': {
|
|
894
812
|
readonly thin: "1.5px";
|
|
895
813
|
readonly normal: "2px";
|
|
@@ -930,7 +848,7 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
930
848
|
readonly borderRightColor: "colors";
|
|
931
849
|
readonly borderRightStyle: "border-styles";
|
|
932
850
|
readonly borderRightWidth: "border-widths";
|
|
933
|
-
readonly borderSpacing: "space
|
|
851
|
+
readonly borderSpacing: "space";
|
|
934
852
|
readonly borderStyle: "border-styles";
|
|
935
853
|
readonly borderTop: "colors";
|
|
936
854
|
readonly borderTopColor: "colors";
|
|
@@ -943,42 +861,42 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
943
861
|
readonly boxShadow: "shadows";
|
|
944
862
|
readonly caretColor: "colors";
|
|
945
863
|
readonly color: "colors";
|
|
946
|
-
readonly columnGap: "space
|
|
864
|
+
readonly columnGap: "space";
|
|
947
865
|
readonly columnRuleColor: "colors";
|
|
948
866
|
readonly fill: "colors";
|
|
949
867
|
readonly flexBasis: "sizes";
|
|
950
868
|
readonly fontFamily: "fonts";
|
|
951
869
|
readonly fontSize: "font-sizes";
|
|
952
870
|
readonly fontWeight: "font-weights";
|
|
953
|
-
readonly gap: "space
|
|
954
|
-
readonly gridColumnGap: "space
|
|
955
|
-
readonly gridGap: "space
|
|
956
|
-
readonly gridRowGap: "space
|
|
871
|
+
readonly gap: "space";
|
|
872
|
+
readonly gridColumnGap: "space";
|
|
873
|
+
readonly gridGap: "space";
|
|
874
|
+
readonly gridRowGap: "space";
|
|
957
875
|
readonly gridTemplateColumns: "sizes";
|
|
958
876
|
readonly gridTemplateRows: "sizes";
|
|
959
877
|
readonly height: "sizes";
|
|
960
878
|
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
|
|
879
|
+
readonly inset: "space";
|
|
880
|
+
readonly insetBlock: "space";
|
|
881
|
+
readonly insetBlockEnd: "space";
|
|
882
|
+
readonly insetBlockStart: "space";
|
|
883
|
+
readonly insetInline: "space";
|
|
884
|
+
readonly insetInlineEnd: "space";
|
|
885
|
+
readonly insetInlineStart: "space";
|
|
968
886
|
readonly left: "space";
|
|
969
887
|
readonly letterSpacing: "letter-spacings";
|
|
970
888
|
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
|
|
889
|
+
readonly margin: "space";
|
|
890
|
+
readonly marginBlock: "space";
|
|
891
|
+
readonly marginBlockEnd: "space";
|
|
892
|
+
readonly marginBlockStart: "space";
|
|
893
|
+
readonly marginBottom: "space";
|
|
894
|
+
readonly marginInline: "space";
|
|
895
|
+
readonly marginInlineEnd: "space";
|
|
896
|
+
readonly marginInlineStart: "space";
|
|
897
|
+
readonly marginLeft: "space";
|
|
898
|
+
readonly marginRight: "space";
|
|
899
|
+
readonly marginTop: "space";
|
|
982
900
|
readonly maxBlockSize: "sizes";
|
|
983
901
|
readonly maxHeight: "sizes";
|
|
984
902
|
readonly maxInlineSize: "sizes";
|
|
@@ -989,41 +907,41 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
989
907
|
readonly minWidth: "sizes";
|
|
990
908
|
readonly outline: "colors";
|
|
991
909
|
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
|
|
910
|
+
readonly padding: "space";
|
|
911
|
+
readonly paddingBlock: "space";
|
|
912
|
+
readonly paddingBlockEnd: "space";
|
|
913
|
+
readonly paddingBlockStart: "space";
|
|
914
|
+
readonly paddingBottom: "space";
|
|
915
|
+
readonly paddingInline: "space";
|
|
916
|
+
readonly paddingInlineEnd: "space";
|
|
917
|
+
readonly paddingInlineStart: "space";
|
|
918
|
+
readonly paddingLeft: "space";
|
|
919
|
+
readonly paddingRight: "space";
|
|
920
|
+
readonly paddingTop: "space";
|
|
1003
921
|
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
|
|
922
|
+
readonly rowGap: "space";
|
|
923
|
+
readonly scrollMargin: "space";
|
|
924
|
+
readonly scrollMarginBlock: "space";
|
|
925
|
+
readonly scrollMarginBlockEnd: "space";
|
|
926
|
+
readonly scrollMarginBlockStart: "space";
|
|
927
|
+
readonly scrollMarginBottom: "space";
|
|
928
|
+
readonly scrollMarginInline: "space";
|
|
929
|
+
readonly scrollMarginInlineEnd: "space";
|
|
930
|
+
readonly scrollMarginInlineStart: "space";
|
|
931
|
+
readonly scrollMarginLeft: "space";
|
|
932
|
+
readonly scrollMarginRight: "space";
|
|
933
|
+
readonly scrollMarginTop: "space";
|
|
934
|
+
readonly scrollPadding: "space";
|
|
935
|
+
readonly scrollPaddingBlock: "space";
|
|
936
|
+
readonly scrollPaddingBlockEnd: "space";
|
|
937
|
+
readonly scrollPaddingBlockStart: "space";
|
|
938
|
+
readonly scrollPaddingBottom: "space";
|
|
939
|
+
readonly scrollPaddingInline: "space";
|
|
940
|
+
readonly scrollPaddingInlineEnd: "space";
|
|
941
|
+
readonly scrollPaddingInlineStart: "space";
|
|
942
|
+
readonly scrollPaddingLeft: "space";
|
|
943
|
+
readonly scrollPaddingRight: "space";
|
|
944
|
+
readonly scrollPaddingTop: "space";
|
|
1027
945
|
readonly stroke: "colors";
|
|
1028
946
|
readonly strokeWidth: "stroke-width";
|
|
1029
947
|
readonly textDecorationColor: "colors";
|
|
@@ -1138,18 +1056,18 @@ interface GridProps extends StyledGridProps {
|
|
|
1138
1056
|
*/
|
|
1139
1057
|
flow?: StyledGridProps['flow'];
|
|
1140
1058
|
/**
|
|
1141
|
-
* Defines the width of the gutter between both columns and rows.
|
|
1142
|
-
*
|
|
1059
|
+
* Defines the width of the gutter between both columns and rows. Uses the
|
|
1060
|
+
* space token.
|
|
1143
1061
|
*/
|
|
1144
1062
|
gap?: StyledGridProps['gap'];
|
|
1145
1063
|
/**
|
|
1146
|
-
* Defines the width of the gutter between rows.
|
|
1147
|
-
*
|
|
1064
|
+
* Defines the width of the gutter between rows. Uses the
|
|
1065
|
+
* space token.
|
|
1148
1066
|
*/
|
|
1149
1067
|
gapX?: StyledGridProps['gapX'];
|
|
1150
1068
|
/**
|
|
1151
|
-
* Defines the width of the gutter between columns.
|
|
1152
|
-
*
|
|
1069
|
+
* Defines the width of the gutter between columns. Uses the
|
|
1070
|
+
* space token.
|
|
1153
1071
|
*/
|
|
1154
1072
|
gapY?: StyledGridProps['gapY'];
|
|
1155
1073
|
/**
|
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.39",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-stitches": "^2.6.3",
|
|
30
29
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
31
|
-
"@mirohq/design-system-
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.6.5",
|
|
31
|
+
"@mirohq/design-system-utils": "^0.15.1"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "rollup -c ../../../rollup.config.js",
|