@mirohq/design-system-flex 2.1.38 → 2.1.40
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 +1 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +66 -108
- package/package.json +4 -4
package/dist/main.js
CHANGED
|
@@ -46,7 +46,7 @@ const StyledFlex = designSystemStitches.styled(designSystemPrimitive.Primitive.d
|
|
|
46
46
|
flexDirection: "column-reverse"
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
|
-
gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme
|
|
49
|
+
gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme.space, (key) => ({
|
|
50
50
|
gap: "$".concat(key),
|
|
51
51
|
["@supports not(gap: ".concat(key, ")")]: {
|
|
52
52
|
margin: "calc($".concat(key, " / 2 * -1)"),
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/flex.styled.ts","../src/flex.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const StyledFlex = styled(Primitive.div, {\n display: 'flex',\n variants: {\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n gap: mapKeysToVariants(theme
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/flex.styled.ts","../src/flex.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const StyledFlex = styled(Primitive.div, {\n display: 'flex',\n variants: {\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n gap: mapKeysToVariants(theme.space, key => ({\n gap: `$${key}`,\n [`@supports not(gap: ${key})`]: {\n margin: `calc($${key} / 2 * -1)`,\n '> *': {\n margin: `calc($${key} / 2)`,\n },\n },\n })),\n justify: {\n start: {\n justifyContent: 'flex-start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'flex-end',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n wrap: {\n noWrap: {\n flexWrap: 'nowrap',\n },\n wrap: {\n flexWrap: 'wrap',\n },\n wrapReverse: {\n flexWrap: 'wrap-reverse',\n },\n },\n },\n})\n\nexport type StyledFlexProps = ComponentPropsWithRef<typeof StyledFlex>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { theme } from '@mirohq/design-system-stitches'\n\nimport { StyledFlex } from './flex.styled'\nimport type { StyledFlexProps } from './flex.styled'\n\nexport interface FlexProps extends StyledFlexProps {\n /**\n * Defines how elements are aligned along the cross axis.\n **/\n align?: StyledFlexProps['align']\n\n /**\n * Defines the direction of flex items that are placed in the flex container.\n */\n direction?: StyledFlexProps['direction']\n\n /**\n * Explicitly controls the space between flex items.\n */\n gap?: keyof typeof theme.space\n\n /**\n * Defines how elements are aligned along the main axis. Uses the space token\n **/\n justify?: StyledFlexProps['justify']\n\n /**\n * Lets the items wrap onto multiple lines if needed.\n */\n wrap?: StyledFlexProps['wrap']\n}\n\nexport const Flex = React.forwardRef<ElementRef<typeof StyledFlex>, FlexProps>(\n (props, forwardRef) => <StyledFlex {...props} ref={forwardRef} />\n)\n"],"names":["styled","Primitive","mapKeysToVariants","theme","React","jsx"],"mappings":";;;;;;;;;;;;;;AAKa,MAAA,UAAA,GAAaA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC9C,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,UAAY,EAAA,YAAA;AAAA,OACd;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,UAAY,EAAA,QAAA;AAAA,OACd;AAAA,MACA,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,UAAA;AAAA,OACd;AAAA,MACA,OAAS,EAAA;AAAA,QACP,UAAY,EAAA,SAAA;AAAA,OACd;AAAA,MACA,QAAU,EAAA;AAAA,QACR,UAAY,EAAA,UAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,SAAW,EAAA;AAAA,MACT,GAAK,EAAA;AAAA,QACH,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MACA,UAAY,EAAA;AAAA,QACV,aAAe,EAAA,aAAA;AAAA,OACjB;AAAA,MACA,aAAe,EAAA;AAAA,QACb,aAAe,EAAA,gBAAA;AAAA,OACjB;AAAA,KACF;AAAA,IACA,GAAK,EAAAC,mCAAA,CAAkBC,0BAAM,CAAA,KAAA,EAAO,CAAQ,GAAA,MAAA;AAAA,MAC1C,KAAK,GAAI,CAAA,MAAA,CAAA,GAAA,CAAA;AAAA,MACT,CAAC,qBAAA,CAAsB,MAAG,CAAA,GAAA,EAAA,GAAA,CAAG,GAAG;AAAA,QAC9B,MAAA,EAAQ,SAAS,MAAG,CAAA,GAAA,EAAA,YAAA,CAAA;AAAA,QACpB,KAAO,EAAA;AAAA,UACL,MAAA,EAAQ,SAAS,MAAG,CAAA,GAAA,EAAA,OAAA,CAAA;AAAA,SACtB;AAAA,OACF;AAAA,KACA,CAAA,CAAA;AAAA,IACF,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,cAAgB,EAAA,YAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,QAAA;AAAA,OAClB;AAAA,MACA,GAAK,EAAA;AAAA,QACH,cAAgB,EAAA,UAAA;AAAA,OAClB;AAAA,MACA,OAAS,EAAA;AAAA,QACP,cAAgB,EAAA,eAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,cAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,cAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,WAAa,EAAA;AAAA,QACX,QAAU,EAAA,cAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC9CM,MAAM,OAAOC,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,OAAO,UAAe,qBAAAC,cAAA,CAAC,cAAY,GAAG,KAAA,EAAO,KAAK,UAAY,EAAA,CAAA;AACjE;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -38,7 +38,7 @@ const StyledFlex = styled(Primitive.div, {
|
|
|
38
38
|
flexDirection: "column-reverse"
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
|
-
gap: mapKeysToVariants(theme
|
|
41
|
+
gap: mapKeysToVariants(theme.space, (key) => ({
|
|
42
42
|
gap: "$".concat(key),
|
|
43
43
|
["@supports not(gap: ".concat(key, ")")]: {
|
|
44
44
|
margin: "calc($".concat(key, " / 2 * -1)"),
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/flex.styled.ts","../src/flex.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const StyledFlex = styled(Primitive.div, {\n display: 'flex',\n variants: {\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n gap: mapKeysToVariants(theme
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/flex.styled.ts","../src/flex.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const StyledFlex = styled(Primitive.div, {\n display: 'flex',\n variants: {\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n baseline: {\n alignItems: 'baseline',\n },\n },\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n gap: mapKeysToVariants(theme.space, key => ({\n gap: `$${key}`,\n [`@supports not(gap: ${key})`]: {\n margin: `calc($${key} / 2 * -1)`,\n '> *': {\n margin: `calc($${key} / 2)`,\n },\n },\n })),\n justify: {\n start: {\n justifyContent: 'flex-start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'flex-end',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n wrap: {\n noWrap: {\n flexWrap: 'nowrap',\n },\n wrap: {\n flexWrap: 'wrap',\n },\n wrapReverse: {\n flexWrap: 'wrap-reverse',\n },\n },\n },\n})\n\nexport type StyledFlexProps = ComponentPropsWithRef<typeof StyledFlex>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { theme } from '@mirohq/design-system-stitches'\n\nimport { StyledFlex } from './flex.styled'\nimport type { StyledFlexProps } from './flex.styled'\n\nexport interface FlexProps extends StyledFlexProps {\n /**\n * Defines how elements are aligned along the cross axis.\n **/\n align?: StyledFlexProps['align']\n\n /**\n * Defines the direction of flex items that are placed in the flex container.\n */\n direction?: StyledFlexProps['direction']\n\n /**\n * Explicitly controls the space between flex items.\n */\n gap?: keyof typeof theme.space\n\n /**\n * Defines how elements are aligned along the main axis. Uses the space token\n **/\n justify?: StyledFlexProps['justify']\n\n /**\n * Lets the items wrap onto multiple lines if needed.\n */\n wrap?: StyledFlexProps['wrap']\n}\n\nexport const Flex = React.forwardRef<ElementRef<typeof StyledFlex>, FlexProps>(\n (props, forwardRef) => <StyledFlex {...props} ref={forwardRef} />\n)\n"],"names":[],"mappings":";;;;;;AAKa,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC9C,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,UAAY,EAAA,YAAA;AAAA,OACd;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,UAAY,EAAA,QAAA;AAAA,OACd;AAAA,MACA,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,UAAA;AAAA,OACd;AAAA,MACA,OAAS,EAAA;AAAA,QACP,UAAY,EAAA,SAAA;AAAA,OACd;AAAA,MACA,QAAU,EAAA;AAAA,QACR,UAAY,EAAA,UAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,SAAW,EAAA;AAAA,MACT,GAAK,EAAA;AAAA,QACH,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MACA,UAAY,EAAA;AAAA,QACV,aAAe,EAAA,aAAA;AAAA,OACjB;AAAA,MACA,aAAe,EAAA;AAAA,QACb,aAAe,EAAA,gBAAA;AAAA,OACjB;AAAA,KACF;AAAA,IACA,GAAK,EAAA,iBAAA,CAAkB,KAAM,CAAA,KAAA,EAAO,CAAQ,GAAA,MAAA;AAAA,MAC1C,KAAK,GAAI,CAAA,MAAA,CAAA,GAAA,CAAA;AAAA,MACT,CAAC,qBAAA,CAAsB,MAAG,CAAA,GAAA,EAAA,GAAA,CAAG,GAAG;AAAA,QAC9B,MAAA,EAAQ,SAAS,MAAG,CAAA,GAAA,EAAA,YAAA,CAAA;AAAA,QACpB,KAAO,EAAA;AAAA,UACL,MAAA,EAAQ,SAAS,MAAG,CAAA,GAAA,EAAA,OAAA,CAAA;AAAA,SACtB;AAAA,OACF;AAAA,KACA,CAAA,CAAA;AAAA,IACF,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,cAAgB,EAAA,YAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,QAAA;AAAA,OAClB;AAAA,MACA,GAAK,EAAA;AAAA,QACH,cAAgB,EAAA,UAAA;AAAA,OAClB;AAAA,MACA,OAAS,EAAA;AAAA,QACP,cAAgB,EAAA,eAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,cAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,cAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,WAAa,EAAA;AAAA,QACX,QAAU,EAAA,cAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC9CM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,OAAO,UAAe,qBAAA,GAAA,CAAC,cAAY,GAAG,KAAA,EAAO,KAAK,UAAY,EAAA,CAAA;AACjE;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -257,22 +257,23 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
257
257
|
readonly body: "Open Sans, sans-serif";
|
|
258
258
|
};
|
|
259
259
|
radii: {
|
|
260
|
+
readonly 0: "0px";
|
|
260
261
|
readonly 25: "2px";
|
|
261
262
|
readonly 50: "4px";
|
|
262
263
|
readonly 75: "6px";
|
|
263
264
|
readonly 100: "8px";
|
|
264
265
|
readonly 200: "16px";
|
|
265
|
-
readonly
|
|
266
|
-
readonly none: "0px";
|
|
266
|
+
readonly round: "999px";
|
|
267
267
|
};
|
|
268
268
|
shadows: {
|
|
269
|
-
50: any;
|
|
270
269
|
100: any;
|
|
270
|
+
50: any;
|
|
271
271
|
"focus-small": any;
|
|
272
272
|
"focus-small-outline": any;
|
|
273
273
|
"focus-large": any;
|
|
274
274
|
"focus-controls": any;
|
|
275
275
|
"focus-controls-error": any;
|
|
276
|
+
"focus-controls-error-small": any;
|
|
276
277
|
"focus-controls-success": any;
|
|
277
278
|
};
|
|
278
279
|
sizes: {
|
|
@@ -297,48 +298,6 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
297
298
|
readonly 1200: "96px";
|
|
298
299
|
readonly 1600: "128px";
|
|
299
300
|
};
|
|
300
|
-
'space-gap': {
|
|
301
|
-
readonly 0: any;
|
|
302
|
-
readonly 50: any;
|
|
303
|
-
readonly 100: any;
|
|
304
|
-
readonly 200: any;
|
|
305
|
-
readonly 300: any;
|
|
306
|
-
};
|
|
307
|
-
'space-inset': {
|
|
308
|
-
readonly 0: any;
|
|
309
|
-
readonly 50: any;
|
|
310
|
-
readonly 100: any;
|
|
311
|
-
readonly 150: any;
|
|
312
|
-
readonly 200: any;
|
|
313
|
-
readonly 300: any;
|
|
314
|
-
readonly 400: any;
|
|
315
|
-
readonly 500: any;
|
|
316
|
-
readonly 600: any;
|
|
317
|
-
readonly 700: any;
|
|
318
|
-
readonly 800: any;
|
|
319
|
-
readonly 1200: any;
|
|
320
|
-
readonly 1600: any;
|
|
321
|
-
};
|
|
322
|
-
'space-offset': {
|
|
323
|
-
readonly 0: any;
|
|
324
|
-
readonly 50: any;
|
|
325
|
-
readonly 100: any;
|
|
326
|
-
readonly 150: any;
|
|
327
|
-
readonly 200: any;
|
|
328
|
-
readonly 300: any;
|
|
329
|
-
readonly 400: any;
|
|
330
|
-
readonly 600: any;
|
|
331
|
-
readonly 800: any;
|
|
332
|
-
readonly 1200: any;
|
|
333
|
-
readonly 1600: any;
|
|
334
|
-
readonly 'stacking-0': any;
|
|
335
|
-
readonly 'stacking-100': any;
|
|
336
|
-
readonly 'stacking-200': any;
|
|
337
|
-
readonly 'stacking-300': any;
|
|
338
|
-
readonly 'stacking-400': any;
|
|
339
|
-
readonly 'stacking-500': any;
|
|
340
|
-
readonly 'stacking-800': any;
|
|
341
|
-
};
|
|
342
301
|
'stroke-width': {
|
|
343
302
|
readonly thin: "1.5px";
|
|
344
303
|
readonly normal: "2px";
|
|
@@ -379,7 +338,7 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
379
338
|
readonly borderRightColor: "colors";
|
|
380
339
|
readonly borderRightStyle: "border-styles";
|
|
381
340
|
readonly borderRightWidth: "border-widths";
|
|
382
|
-
readonly borderSpacing: "space
|
|
341
|
+
readonly borderSpacing: "space";
|
|
383
342
|
readonly borderStyle: "border-styles";
|
|
384
343
|
readonly borderTop: "colors";
|
|
385
344
|
readonly borderTopColor: "colors";
|
|
@@ -392,42 +351,42 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
392
351
|
readonly boxShadow: "shadows";
|
|
393
352
|
readonly caretColor: "colors";
|
|
394
353
|
readonly color: "colors";
|
|
395
|
-
readonly columnGap: "space
|
|
354
|
+
readonly columnGap: "space";
|
|
396
355
|
readonly columnRuleColor: "colors";
|
|
397
356
|
readonly fill: "colors";
|
|
398
357
|
readonly flexBasis: "sizes";
|
|
399
358
|
readonly fontFamily: "fonts";
|
|
400
359
|
readonly fontSize: "font-sizes";
|
|
401
360
|
readonly fontWeight: "font-weights";
|
|
402
|
-
readonly gap: "space
|
|
403
|
-
readonly gridColumnGap: "space
|
|
404
|
-
readonly gridGap: "space
|
|
405
|
-
readonly gridRowGap: "space
|
|
361
|
+
readonly gap: "space";
|
|
362
|
+
readonly gridColumnGap: "space";
|
|
363
|
+
readonly gridGap: "space";
|
|
364
|
+
readonly gridRowGap: "space";
|
|
406
365
|
readonly gridTemplateColumns: "sizes";
|
|
407
366
|
readonly gridTemplateRows: "sizes";
|
|
408
367
|
readonly height: "sizes";
|
|
409
368
|
readonly inlineSize: "sizes";
|
|
410
|
-
readonly inset: "space
|
|
411
|
-
readonly insetBlock: "space
|
|
412
|
-
readonly insetBlockEnd: "space
|
|
413
|
-
readonly insetBlockStart: "space
|
|
414
|
-
readonly insetInline: "space
|
|
415
|
-
readonly insetInlineEnd: "space
|
|
416
|
-
readonly insetInlineStart: "space
|
|
369
|
+
readonly inset: "space";
|
|
370
|
+
readonly insetBlock: "space";
|
|
371
|
+
readonly insetBlockEnd: "space";
|
|
372
|
+
readonly insetBlockStart: "space";
|
|
373
|
+
readonly insetInline: "space";
|
|
374
|
+
readonly insetInlineEnd: "space";
|
|
375
|
+
readonly insetInlineStart: "space";
|
|
417
376
|
readonly left: "space";
|
|
418
377
|
readonly letterSpacing: "letter-spacings";
|
|
419
378
|
readonly lineHeight: "line-heights";
|
|
420
|
-
readonly margin: "space
|
|
421
|
-
readonly marginBlock: "space
|
|
422
|
-
readonly marginBlockEnd: "space
|
|
423
|
-
readonly marginBlockStart: "space
|
|
424
|
-
readonly marginBottom: "space
|
|
425
|
-
readonly marginInline: "space
|
|
426
|
-
readonly marginInlineEnd: "space
|
|
427
|
-
readonly marginInlineStart: "space
|
|
428
|
-
readonly marginLeft: "space
|
|
429
|
-
readonly marginRight: "space
|
|
430
|
-
readonly marginTop: "space
|
|
379
|
+
readonly margin: "space";
|
|
380
|
+
readonly marginBlock: "space";
|
|
381
|
+
readonly marginBlockEnd: "space";
|
|
382
|
+
readonly marginBlockStart: "space";
|
|
383
|
+
readonly marginBottom: "space";
|
|
384
|
+
readonly marginInline: "space";
|
|
385
|
+
readonly marginInlineEnd: "space";
|
|
386
|
+
readonly marginInlineStart: "space";
|
|
387
|
+
readonly marginLeft: "space";
|
|
388
|
+
readonly marginRight: "space";
|
|
389
|
+
readonly marginTop: "space";
|
|
431
390
|
readonly maxBlockSize: "sizes";
|
|
432
391
|
readonly maxHeight: "sizes";
|
|
433
392
|
readonly maxInlineSize: "sizes";
|
|
@@ -438,41 +397,41 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
438
397
|
readonly minWidth: "sizes";
|
|
439
398
|
readonly outline: "colors";
|
|
440
399
|
readonly outlineColor: "colors";
|
|
441
|
-
readonly padding: "space
|
|
442
|
-
readonly paddingBlock: "space
|
|
443
|
-
readonly paddingBlockEnd: "space
|
|
444
|
-
readonly paddingBlockStart: "space
|
|
445
|
-
readonly paddingBottom: "space
|
|
446
|
-
readonly paddingInline: "space
|
|
447
|
-
readonly paddingInlineEnd: "space
|
|
448
|
-
readonly paddingInlineStart: "space
|
|
449
|
-
readonly paddingLeft: "space
|
|
450
|
-
readonly paddingRight: "space
|
|
451
|
-
readonly paddingTop: "space
|
|
400
|
+
readonly padding: "space";
|
|
401
|
+
readonly paddingBlock: "space";
|
|
402
|
+
readonly paddingBlockEnd: "space";
|
|
403
|
+
readonly paddingBlockStart: "space";
|
|
404
|
+
readonly paddingBottom: "space";
|
|
405
|
+
readonly paddingInline: "space";
|
|
406
|
+
readonly paddingInlineEnd: "space";
|
|
407
|
+
readonly paddingInlineStart: "space";
|
|
408
|
+
readonly paddingLeft: "space";
|
|
409
|
+
readonly paddingRight: "space";
|
|
410
|
+
readonly paddingTop: "space";
|
|
452
411
|
readonly right: "space";
|
|
453
|
-
readonly rowGap: "space
|
|
454
|
-
readonly scrollMargin: "space
|
|
455
|
-
readonly scrollMarginBlock: "space
|
|
456
|
-
readonly scrollMarginBlockEnd: "space
|
|
457
|
-
readonly scrollMarginBlockStart: "space
|
|
458
|
-
readonly scrollMarginBottom: "space
|
|
459
|
-
readonly scrollMarginInline: "space
|
|
460
|
-
readonly scrollMarginInlineEnd: "space
|
|
461
|
-
readonly scrollMarginInlineStart: "space
|
|
462
|
-
readonly scrollMarginLeft: "space
|
|
463
|
-
readonly scrollMarginRight: "space
|
|
464
|
-
readonly scrollMarginTop: "space
|
|
465
|
-
readonly scrollPadding: "space
|
|
466
|
-
readonly scrollPaddingBlock: "space
|
|
467
|
-
readonly scrollPaddingBlockEnd: "space
|
|
468
|
-
readonly scrollPaddingBlockStart: "space
|
|
469
|
-
readonly scrollPaddingBottom: "space
|
|
470
|
-
readonly scrollPaddingInline: "space
|
|
471
|
-
readonly scrollPaddingInlineEnd: "space
|
|
472
|
-
readonly scrollPaddingInlineStart: "space
|
|
473
|
-
readonly scrollPaddingLeft: "space
|
|
474
|
-
readonly scrollPaddingRight: "space
|
|
475
|
-
readonly scrollPaddingTop: "space
|
|
412
|
+
readonly rowGap: "space";
|
|
413
|
+
readonly scrollMargin: "space";
|
|
414
|
+
readonly scrollMarginBlock: "space";
|
|
415
|
+
readonly scrollMarginBlockEnd: "space";
|
|
416
|
+
readonly scrollMarginBlockStart: "space";
|
|
417
|
+
readonly scrollMarginBottom: "space";
|
|
418
|
+
readonly scrollMarginInline: "space";
|
|
419
|
+
readonly scrollMarginInlineEnd: "space";
|
|
420
|
+
readonly scrollMarginInlineStart: "space";
|
|
421
|
+
readonly scrollMarginLeft: "space";
|
|
422
|
+
readonly scrollMarginRight: "space";
|
|
423
|
+
readonly scrollMarginTop: "space";
|
|
424
|
+
readonly scrollPadding: "space";
|
|
425
|
+
readonly scrollPaddingBlock: "space";
|
|
426
|
+
readonly scrollPaddingBlockEnd: "space";
|
|
427
|
+
readonly scrollPaddingBlockStart: "space";
|
|
428
|
+
readonly scrollPaddingBottom: "space";
|
|
429
|
+
readonly scrollPaddingInline: "space";
|
|
430
|
+
readonly scrollPaddingInlineEnd: "space";
|
|
431
|
+
readonly scrollPaddingInlineStart: "space";
|
|
432
|
+
readonly scrollPaddingLeft: "space";
|
|
433
|
+
readonly scrollPaddingRight: "space";
|
|
434
|
+
readonly scrollPaddingTop: "space";
|
|
476
435
|
readonly stroke: "colors";
|
|
477
436
|
readonly strokeWidth: "stroke-width";
|
|
478
437
|
readonly textDecorationColor: "colors";
|
|
@@ -538,13 +497,13 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
538
497
|
}>>>, "direction" | "gap" | "wrap" | "align" | "justify"> & _stitches_react_types_styled_component.TransformProps<{
|
|
539
498
|
align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
|
|
540
499
|
direction?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
|
|
541
|
-
gap?: 0 | 200 | 50 | 100 |
|
|
500
|
+
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;
|
|
542
501
|
justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
|
|
543
502
|
wrap?: "wrap" | "noWrap" | "wrapReverse" | undefined;
|
|
544
503
|
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
|
|
545
504
|
align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
|
|
546
505
|
direction?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
|
|
547
|
-
gap?: 0 | 200 | 50 | 100 |
|
|
506
|
+
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;
|
|
548
507
|
justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
|
|
549
508
|
wrap?: "wrap" | "noWrap" | "wrapReverse" | undefined;
|
|
550
509
|
}, {}>;
|
|
@@ -562,10 +521,9 @@ interface FlexProps extends StyledFlexProps {
|
|
|
562
521
|
/**
|
|
563
522
|
* Explicitly controls the space between flex items.
|
|
564
523
|
*/
|
|
565
|
-
gap?: keyof typeof theme
|
|
524
|
+
gap?: keyof typeof theme.space;
|
|
566
525
|
/**
|
|
567
|
-
* Defines how elements are aligned along the main axis.
|
|
568
|
-
* [space](/?path=/docs/foundation-spacing--page)
|
|
526
|
+
* Defines how elements are aligned along the main axis. Uses the space token
|
|
569
527
|
**/
|
|
570
528
|
justify?: StyledFlexProps['justify'];
|
|
571
529
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-flex",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.40",
|
|
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-
|
|
30
|
-
"@mirohq/design-system-
|
|
31
|
-
"@mirohq/design-system-
|
|
29
|
+
"@mirohq/design-system-stitches": "^2.6.5",
|
|
30
|
+
"@mirohq/design-system-utils": "^0.15.1",
|
|
31
|
+
"@mirohq/design-system-primitive": "^1.1.2"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "rollup -c ../../../rollup.config.js",
|