@mirohq/design-system-flex 2.1.16 → 2.1.18-themes.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +7 -4
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +7 -4
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +121 -110
  6. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -27,6 +27,9 @@ const StyledFlex = designSystemStitches.styled(designSystemPrimitive.Primitive.d
27
27
  },
28
28
  stretch: {
29
29
  alignItems: "stretch"
30
+ },
31
+ baseline: {
32
+ alignItems: "baseline"
30
33
  }
31
34
  },
32
35
  direction: {
@@ -44,11 +47,11 @@ const StyledFlex = designSystemStitches.styled(designSystemPrimitive.Primitive.d
44
47
  }
45
48
  },
46
49
  gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme["space-gap"], (key) => ({
47
- gap: `$${key}`,
48
- [`@supports not(gap: ${key})`]: {
49
- margin: `calc($${key} / 2 * -1)`,
50
+ gap: "$".concat(key),
51
+ ["@supports not(gap: ".concat(key, ")")]: {
52
+ margin: "calc($".concat(key, " / 2 * -1)"),
50
53
  "> *": {
51
- margin: `calc($${key} / 2)`
54
+ margin: "calc($".concat(key, " / 2)")
52
55
  }
53
56
  }
54
57
  })),
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 },\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-gap'], 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-gap']\n\n /**\n * Defines how elements are aligned along the main axis. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\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,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,WAAW,GAAG,CAAQ,GAAA,MAAA;AAAA,MACjD,KAAK,CAAI,CAAA,EAAA,GAAA,CAAA,CAAA;AAAA,MACT,CAAC,CAAsB,mBAAA,EAAA,GAAA,CAAA,CAAA,CAAM,GAAG;AAAA,QAC9B,QAAQ,CAAS,MAAA,EAAA,GAAA,CAAA,UAAA,CAAA;AAAA,QACjB,KAAO,EAAA;AAAA,UACL,QAAQ,CAAS,MAAA,EAAA,GAAA,CAAA,KAAA,CAAA;AAAA,SACnB;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;;AC1CM,MAAM,OAAOC,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,OAAO,UAAe,qBAAAC,cAAA,CAAC,cAAY,GAAG,KAAA,EAAO,KAAK,UAAY,EAAA,CAAA;AACjE;;;;"}
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-gap'], 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-gap']\n\n /**\n * Defines how elements are aligned along the main axis. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\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,WAAW,GAAG,CAAQ,GAAA,MAAA;AAAA,MACjD,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;;AC7CM,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
@@ -19,6 +19,9 @@ const StyledFlex = styled(Primitive.div, {
19
19
  },
20
20
  stretch: {
21
21
  alignItems: "stretch"
22
+ },
23
+ baseline: {
24
+ alignItems: "baseline"
22
25
  }
23
26
  },
24
27
  direction: {
@@ -36,11 +39,11 @@ const StyledFlex = styled(Primitive.div, {
36
39
  }
37
40
  },
38
41
  gap: mapKeysToVariants(theme["space-gap"], (key) => ({
39
- gap: `$${key}`,
40
- [`@supports not(gap: ${key})`]: {
41
- margin: `calc($${key} / 2 * -1)`,
42
+ gap: "$".concat(key),
43
+ ["@supports not(gap: ".concat(key, ")")]: {
44
+ margin: "calc($".concat(key, " / 2 * -1)"),
42
45
  "> *": {
43
- margin: `calc($${key} / 2)`
46
+ margin: "calc($".concat(key, " / 2)")
44
47
  }
45
48
  }
46
49
  })),
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 },\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-gap'], 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-gap']\n\n /**\n * Defines how elements are aligned along the main axis. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\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,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,WAAW,GAAG,CAAQ,GAAA,MAAA;AAAA,MACjD,KAAK,CAAI,CAAA,EAAA,GAAA,CAAA,CAAA;AAAA,MACT,CAAC,CAAsB,mBAAA,EAAA,GAAA,CAAA,CAAA,CAAM,GAAG;AAAA,QAC9B,QAAQ,CAAS,MAAA,EAAA,GAAA,CAAA,UAAA,CAAA;AAAA,QACjB,KAAO,EAAA;AAAA,UACL,QAAQ,CAAS,MAAA,EAAA,GAAA,CAAA,KAAA,CAAA;AAAA,SACnB;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;;AC1CM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,OAAO,UAAe,qBAAA,GAAA,CAAC,cAAY,GAAG,KAAA,EAAO,KAAK,UAAY,EAAA,CAAA;AACjE;;;;"}
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-gap'], 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-gap']\n\n /**\n * Defines how elements are aligned along the main axis. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\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,WAAW,GAAG,CAAQ,GAAA,MAAA;AAAA,MACjD,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;;AC7CM,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
@@ -7,13 +7,13 @@ import * as _stitches_react_types_css_util from '@stitches/react/types/css-util'
7
7
  import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
8
8
 
9
9
  declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<{
10
- align?: "stretch" | "center" | "start" | "end" | undefined;
10
+ align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
11
11
  direction?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
12
12
  gap?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
13
13
  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
14
14
  wrap?: "wrap" | "noWrap" | "wrapReverse" | undefined;
15
15
  }, "direction" | "gap" | "wrap" | "align" | "justify"> & _stitches_react_types_styled_component.TransformProps<{
16
- align?: "stretch" | "center" | "start" | "end" | undefined;
16
+ align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
17
17
  direction?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
18
18
  gap?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
19
19
  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
@@ -31,6 +31,7 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<{
31
31
  readonly lg: "4px";
32
32
  };
33
33
  colors: {
34
+ readonly black: any;
34
35
  readonly 'blue-100': any;
35
36
  readonly 'blue-200': any;
36
37
  readonly 'blue-300': any;
@@ -50,6 +51,15 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<{
50
51
  readonly 'gray-700': any;
51
52
  readonly 'gray-800': any;
52
53
  readonly 'gray-900': any;
54
+ readonly 'green-100': any;
55
+ readonly 'green-200': any;
56
+ readonly 'green-300': any;
57
+ readonly 'green-400': any;
58
+ readonly 'green-500': any;
59
+ readonly 'green-600': any;
60
+ readonly 'green-700': any;
61
+ readonly 'green-800': any;
62
+ readonly 'green-900': any;
53
63
  readonly 'indigo-100': any;
54
64
  readonly 'indigo-200': any;
55
65
  readonly 'indigo-300': any;
@@ -68,6 +78,8 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<{
68
78
  readonly 'red-700': any;
69
79
  readonly 'red-800': any;
70
80
  readonly 'red-900': any;
81
+ readonly transparent: any;
82
+ readonly white: any;
71
83
  readonly 'yellow-100': any;
72
84
  readonly 'yellow-200': any;
73
85
  readonly 'yellow-300': any;
@@ -77,113 +89,112 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<{
77
89
  readonly 'yellow-700': any;
78
90
  readonly 'yellow-800': any;
79
91
  readonly 'yellow-900': any;
80
- readonly 'green-100': any;
81
- readonly 'green-200': any;
82
- readonly 'green-300': any;
83
- readonly 'green-400': any;
84
- readonly 'green-500': any;
85
- readonly 'green-600': any;
86
- readonly 'green-700': any;
87
- readonly 'green-800': any;
88
- readonly 'green-900': any;
89
- readonly black: any;
90
- readonly white: any;
91
- readonly transparent: any;
92
- readonly 'background-danger'?: any;
93
- readonly 'background-danger-hover'?: any;
94
- readonly 'background-danger-prominent'?: any;
95
- readonly 'background-danger-prominent-active'?: any;
96
- readonly 'background-danger-prominent-hover'?: any;
97
- readonly 'background-neutrals'?: any;
98
- readonly 'background-neutrals-container'?: any;
99
- readonly 'background-neutrals-controls-disabled'?: any;
100
- readonly 'background-neutrals-disabled'?: any;
101
- readonly 'background-neutrals-inactive'?: any;
102
- readonly 'background-neutrals-inactive-hover'?: any;
103
- readonly 'background-neutrals-inverted'?: any;
104
- readonly 'background-neutrals-inverted-subtle'?: any;
105
- readonly 'background-neutrals-page'?: any;
106
- readonly 'background-neutrals-page-subtle'?: any;
107
- readonly 'background-neutrals-scrolls'?: any;
108
- readonly 'background-neutrals-scrolls-hover'?: any;
109
- readonly 'background-neutrals-subtle'?: any;
110
- readonly 'background-neutrals-subtle-active'?: any;
111
- readonly 'background-neutrals-subtle-hover'?: any;
112
- readonly 'background-primary-prominent'?: any;
113
- readonly 'background-primary-prominent-active'?: any;
114
- readonly 'background-primary-prominent-hover'?: any;
115
- readonly 'background-primary-prominent-selected'?: any;
116
- readonly 'background-primary-subtle'?: any;
117
- readonly 'background-primary-subtle-active'?: any;
118
- readonly 'background-primary-subtle-hover'?: any;
119
- readonly 'background-primary-subtle-selected'?: any;
120
- readonly 'background-success'?: any;
121
- readonly 'background-warning-prominent'?: any;
122
- readonly 'background-warning-subtle'?: any;
123
- readonly 'text-danger'?: any;
124
- readonly 'text-danger-active'?: any;
125
- readonly 'text-danger-hover'?: any;
126
- readonly 'text-danger-inverted'?: any;
127
- readonly 'text-neutrals'?: any;
128
- readonly 'text-neutrals-disabled'?: any;
129
- readonly 'text-neutrals-inverted'?: any;
130
- readonly 'text-neutrals-placeholder'?: any;
131
- readonly 'text-neutrals-placeholder-only'?: any;
132
- readonly 'text-neutrals-subtle'?: any;
133
- readonly 'text-neutrals-subtle-active'?: any;
134
- readonly 'text-neutrals-subtle-hover'?: any;
135
- readonly 'text-primary'?: any;
136
- readonly 'text-primary-active'?: any;
137
- readonly 'text-primary-hover'?: any;
138
- readonly 'text-primary-inverted'?: any;
139
- readonly 'text-primary-inverted-subtle'?: any;
140
- readonly 'text-primary-selected'?: any;
141
- readonly 'text-success'?: any;
142
- readonly 'text-warning'?: any;
143
- readonly 'icon-danger'?: any;
144
- readonly 'icon-danger-active'?: any;
145
- readonly 'icon-danger-hover'?: any;
146
- readonly 'icon-danger-inverted'?: any;
147
- readonly 'icon-neutrals'?: any;
148
- readonly 'icon-neutrals-disabled'?: any;
149
- readonly 'icon-neutrals-inactive'?: any;
150
- readonly 'icon-neutrals-inactive-hover'?: any;
151
- readonly 'icon-neutrals-inverted'?: any;
152
- readonly 'icon-neutrals-search'?: any;
153
- readonly 'icon-neutrals-subtle'?: any;
154
- readonly 'icon-neutrals-text'?: any;
155
- readonly 'icon-primary'?: any;
156
- readonly 'icon-primary-active'?: any;
157
- readonly 'icon-primary-hover'?: any;
158
- readonly 'icon-primary-inverted'?: any;
159
- readonly 'icon-primary-selected'?: any;
160
- readonly 'icon-success'?: any;
161
- readonly 'icon-success-inverted'?: any;
162
- readonly 'icon-warning'?: any;
163
- readonly 'icon-warning-prominent'?: any;
164
- readonly 'border-danger'?: any;
165
- readonly 'border-danger-active'?: any;
166
- readonly 'border-danger-hover'?: any;
167
- readonly 'border-focus-inner'?: any;
168
- readonly 'border-focus-middle'?: any;
169
- readonly 'border-focus-outer'?: any;
170
- readonly 'border-neutrals'?: any;
171
- readonly 'border-neutrals-active'?: any;
172
- readonly 'border-neutrals-controls'?: any;
173
- readonly 'border-neutrals-controls-disabled'?: any;
174
- readonly 'border-neutrals-disabled'?: any;
175
- readonly 'border-neutrals-hover'?: any;
176
- readonly 'border-neutrals-inverted'?: any;
177
- readonly 'border-neutrals-subtle'?: any;
178
- readonly 'border-neutrals-text-subtle'?: any;
179
- readonly 'border-neutrals-text-subtle-active'?: any;
180
- readonly 'border-neutrals-text-subtle-hover'?: any;
181
- readonly 'border-primary'?: any;
182
- readonly 'border-primary-active'?: any;
183
- readonly 'border-primary-hover'?: any;
184
- readonly 'border-primary-inverted'?: any;
185
- readonly 'border-success'?: any;
186
- readonly 'border-warning'?: any;
92
+ "background-alpha-active"?: any;
93
+ "background-alpha-hover"?: any;
94
+ "background-danger-prominent"?: any;
95
+ "background-danger-prominent-active"?: any;
96
+ "background-danger-prominent-hover"?: any;
97
+ "background-danger-subtle"?: any;
98
+ "background-danger-subtle-active"?: any;
99
+ "background-danger-subtle-hover"?: any;
100
+ "background-neutrals"?: any;
101
+ "background-neutrals-active"?: any;
102
+ "background-neutrals-container"?: any;
103
+ "background-neutrals-controls-disabled"?: any;
104
+ "background-neutrals-disabled"?: any;
105
+ "background-neutrals-hover"?: any;
106
+ "background-neutrals-inactive"?: any;
107
+ "background-neutrals-inactive-hover"?: any;
108
+ "background-neutrals-inverted"?: any;
109
+ "background-neutrals-inverted-subtle"?: any;
110
+ "background-neutrals-page"?: any;
111
+ "background-neutrals-page-subtle"?: any;
112
+ "background-neutrals-scrolls"?: any;
113
+ "background-neutrals-scrolls-hover"?: any;
114
+ "background-neutrals-subtle"?: any;
115
+ "background-neutrals-subtle-active"?: any;
116
+ "background-neutrals-subtle-hover"?: any;
117
+ "background-primary-prominent"?: any;
118
+ "background-primary-prominent-active"?: any;
119
+ "background-primary-prominent-hover"?: any;
120
+ "background-primary-prominent-selected"?: any;
121
+ "background-primary-subtle"?: any;
122
+ "background-primary-subtle-active"?: any;
123
+ "background-primary-subtle-hover"?: any;
124
+ "background-primary-subtle-selected"?: any;
125
+ "background-success"?: any;
126
+ "background-warning-prominent"?: any;
127
+ "background-warning-subtle"?: any;
128
+ "border-danger"?: any;
129
+ "border-danger-active"?: any;
130
+ "border-danger-hover"?: any;
131
+ "border-focus-inner"?: any;
132
+ "border-focus-middle"?: any;
133
+ "border-focus-outer"?: any;
134
+ "border-neutrals"?: any;
135
+ "border-neutrals-active"?: any;
136
+ "border-neutrals-controls"?: any;
137
+ "border-neutrals-controls-disabled"?: any;
138
+ "border-neutrals-disabled"?: any;
139
+ "border-neutrals-hover"?: any;
140
+ "border-neutrals-inverted"?: any;
141
+ "border-neutrals-subtle"?: any;
142
+ "border-neutrals-text"?: any;
143
+ "border-neutrals-text-active"?: any;
144
+ "border-neutrals-text-hover"?: any;
145
+ "border-neutrals-text-subtle"?: any;
146
+ "border-neutrals-text-subtle-active"?: any;
147
+ "border-neutrals-text-subtle-hover"?: any;
148
+ "border-neutrals-transparent"?: any;
149
+ "border-primary"?: any;
150
+ "border-primary-active"?: any;
151
+ "border-primary-hover"?: any;
152
+ "border-primary-inverted"?: any;
153
+ "border-success"?: any;
154
+ "border-warning"?: any;
155
+ "icon-danger"?: any;
156
+ "icon-danger-active"?: any;
157
+ "icon-danger-hover"?: any;
158
+ "icon-danger-inverted"?: any;
159
+ "icon-neutrals"?: any;
160
+ "icon-neutrals-disabled"?: any;
161
+ "icon-neutrals-inactive"?: any;
162
+ "icon-neutrals-inactive-hover"?: any;
163
+ "icon-neutrals-inverted"?: any;
164
+ "icon-neutrals-search"?: any;
165
+ "icon-neutrals-subtle"?: any;
166
+ "icon-neutrals-text"?: any;
167
+ "icon-primary"?: any;
168
+ "icon-primary-active"?: any;
169
+ "icon-primary-hover"?: any;
170
+ "icon-primary-inverted"?: any;
171
+ "icon-primary-selected"?: any;
172
+ "icon-success"?: any;
173
+ "icon-success-inverted"?: any;
174
+ "icon-warning"?: any;
175
+ "icon-warning-prominent"?: any;
176
+ "text-danger"?: any;
177
+ "text-danger-active"?: any;
178
+ "text-danger-hover"?: any;
179
+ "text-danger-inverted"?: any;
180
+ "text-neutrals"?: any;
181
+ "text-neutrals-active"?: any;
182
+ "text-neutrals-disabled"?: any;
183
+ "text-neutrals-hover"?: any;
184
+ "text-neutrals-inverted"?: any;
185
+ "text-neutrals-placeholder"?: any;
186
+ "text-neutrals-placeholder-only"?: any;
187
+ "text-neutrals-subtle"?: any;
188
+ "text-neutrals-subtle-active"?: any;
189
+ "text-neutrals-subtle-hover"?: any;
190
+ "text-primary"?: any;
191
+ "text-primary-active"?: any;
192
+ "text-primary-hover"?: any;
193
+ "text-primary-inverted"?: any;
194
+ "text-primary-inverted-subtle"?: any;
195
+ "text-primary-selected"?: any;
196
+ "text-success"?: any;
197
+ "text-warning"?: any;
187
198
  };
188
199
  'font-sizes': {
189
200
  readonly 150: "0.75rem";
@@ -470,7 +481,7 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<{
470
481
  }> & {
471
482
  children?: react.ReactNode;
472
483
  } & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
473
- align?: "stretch" | "center" | "start" | "end" | undefined;
484
+ align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
474
485
  direction?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
475
486
  gap?: 0 | 200 | 50 | 100 | 300 | "0" | "100" | "200" | "300" | "50" | undefined;
476
487
  justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-flex",
3
- "version": "2.1.16",
3
+ "version": "2.1.18-themes.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,8 +27,8 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@mirohq/design-system-primitive": "^1.1.0",
30
- "@mirohq/design-system-utils": "^0.14.1",
31
- "@mirohq/design-system-stitches": "^2.3.4"
30
+ "@mirohq/design-system-stitches": "^2.3.5-themes.0",
31
+ "@mirohq/design-system-utils": "^0.14.1"
32
32
  },
33
33
  "scripts": {
34
34
  "build": "rollup -c ../../../rollup.config.js",