@mirohq/design-system-flex 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 +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 +65 -108
- package/package.json +3 -3
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,17 +257,17 @@ 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;
|
|
@@ -297,48 +297,6 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
297
297
|
readonly 1200: "96px";
|
|
298
298
|
readonly 1600: "128px";
|
|
299
299
|
};
|
|
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
300
|
'stroke-width': {
|
|
343
301
|
readonly thin: "1.5px";
|
|
344
302
|
readonly normal: "2px";
|
|
@@ -379,7 +337,7 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
379
337
|
readonly borderRightColor: "colors";
|
|
380
338
|
readonly borderRightStyle: "border-styles";
|
|
381
339
|
readonly borderRightWidth: "border-widths";
|
|
382
|
-
readonly borderSpacing: "space
|
|
340
|
+
readonly borderSpacing: "space";
|
|
383
341
|
readonly borderStyle: "border-styles";
|
|
384
342
|
readonly borderTop: "colors";
|
|
385
343
|
readonly borderTopColor: "colors";
|
|
@@ -392,42 +350,42 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
392
350
|
readonly boxShadow: "shadows";
|
|
393
351
|
readonly caretColor: "colors";
|
|
394
352
|
readonly color: "colors";
|
|
395
|
-
readonly columnGap: "space
|
|
353
|
+
readonly columnGap: "space";
|
|
396
354
|
readonly columnRuleColor: "colors";
|
|
397
355
|
readonly fill: "colors";
|
|
398
356
|
readonly flexBasis: "sizes";
|
|
399
357
|
readonly fontFamily: "fonts";
|
|
400
358
|
readonly fontSize: "font-sizes";
|
|
401
359
|
readonly fontWeight: "font-weights";
|
|
402
|
-
readonly gap: "space
|
|
403
|
-
readonly gridColumnGap: "space
|
|
404
|
-
readonly gridGap: "space
|
|
405
|
-
readonly gridRowGap: "space
|
|
360
|
+
readonly gap: "space";
|
|
361
|
+
readonly gridColumnGap: "space";
|
|
362
|
+
readonly gridGap: "space";
|
|
363
|
+
readonly gridRowGap: "space";
|
|
406
364
|
readonly gridTemplateColumns: "sizes";
|
|
407
365
|
readonly gridTemplateRows: "sizes";
|
|
408
366
|
readonly height: "sizes";
|
|
409
367
|
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
|
|
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";
|
|
417
375
|
readonly left: "space";
|
|
418
376
|
readonly letterSpacing: "letter-spacings";
|
|
419
377
|
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
|
|
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";
|
|
431
389
|
readonly maxBlockSize: "sizes";
|
|
432
390
|
readonly maxHeight: "sizes";
|
|
433
391
|
readonly maxInlineSize: "sizes";
|
|
@@ -438,41 +396,41 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
438
396
|
readonly minWidth: "sizes";
|
|
439
397
|
readonly outline: "colors";
|
|
440
398
|
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
|
|
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";
|
|
452
410
|
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
|
|
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";
|
|
476
434
|
readonly stroke: "colors";
|
|
477
435
|
readonly strokeWidth: "stroke-width";
|
|
478
436
|
readonly textDecorationColor: "colors";
|
|
@@ -538,13 +496,13 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
|
|
|
538
496
|
}>>>, "direction" | "gap" | "wrap" | "align" | "justify"> & _stitches_react_types_styled_component.TransformProps<{
|
|
539
497
|
align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
|
|
540
498
|
direction?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
|
|
541
|
-
gap?: 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;
|
|
542
500
|
justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
|
|
543
501
|
wrap?: "wrap" | "noWrap" | "wrapReverse" | undefined;
|
|
544
502
|
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
|
|
545
503
|
align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
|
|
546
504
|
direction?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
|
|
547
|
-
gap?: 0 | 200 | 50 | 100 |
|
|
505
|
+
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
506
|
justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
|
|
549
507
|
wrap?: "wrap" | "noWrap" | "wrapReverse" | undefined;
|
|
550
508
|
}, {}>;
|
|
@@ -562,10 +520,9 @@ interface FlexProps extends StyledFlexProps {
|
|
|
562
520
|
/**
|
|
563
521
|
* Explicitly controls the space between flex items.
|
|
564
522
|
*/
|
|
565
|
-
gap?: keyof typeof theme
|
|
523
|
+
gap?: keyof typeof theme.space;
|
|
566
524
|
/**
|
|
567
|
-
* Defines how elements are aligned along the main axis.
|
|
568
|
-
* [space](/?path=/docs/foundation-spacing--page)
|
|
525
|
+
* Defines how elements are aligned along the main axis. Uses the space token
|
|
569
526
|
**/
|
|
570
527
|
justify?: StyledFlexProps['justify'];
|
|
571
528
|
/**
|
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.39",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-primitive": "^1.1.2",
|
|
30
|
-
"@mirohq/design-system-
|
|
31
|
-
"@mirohq/design-system-
|
|
30
|
+
"@mirohq/design-system-utils": "^0.15.0",
|
|
31
|
+
"@mirohq/design-system-stitches": "^2.6.4"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "rollup -c ../../../rollup.config.js",
|