@mirohq/design-system-flex 3.1.2 → 3.2.0-fix-stitches-types.1

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 (5) hide show
  1. package/dist/main.js +1 -7
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js.map +1 -1
  4. package/dist/types.d.ts +33 -13
  5. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -1,17 +1,11 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var jsxRuntime = require('react/jsx-runtime');
6
4
  var React = require('react');
7
5
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
8
6
  var designSystemStitches = require('@mirohq/design-system-stitches');
9
7
  var designSystemUtils = require('@mirohq/design-system-utils');
10
8
 
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
-
15
9
  const StyledFlex = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
16
10
  display: "flex",
17
11
  variants: {
@@ -89,7 +83,7 @@ const StyledFlex = designSystemStitches.styled(designSystemPrimitive.Primitive.d
89
83
  }
90
84
  });
91
85
 
92
- const Flex = React__default["default"].forwardRef(
86
+ const Flex = React.forwardRef(
93
87
  (props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledFlex, { ...props, ref: forwardRef })
94
88
  );
95
89
 
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.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;;;;"}
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","jsx"],"mappings":";;;;;;;;AAKO,MAAM,UAAA,GAAaA,2BAAA,CAAOC,+BAAA,CAAU,GAAA,EAAK;AAAA,EAC9C,OAAA,EAAS,MAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,KAAA,EAAO;AAAA,QACL,UAAA,EAAY;AAAA,OACd;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,UAAA,EAAY;AAAA,OACd;AAAA,MACA,GAAA,EAAK;AAAA,QACH,UAAA,EAAY;AAAA,OACd;AAAA,MACA,OAAA,EAAS;AAAA,QACP,UAAA,EAAY;AAAA,OACd;AAAA,MACA,QAAA,EAAU;AAAA,QACR,UAAA,EAAY;AAAA;AACd,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,GAAA,EAAK;AAAA,QACH,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,UAAA,EAAY;AAAA,QACV,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,aAAA,EAAe;AAAA,QACb,aAAA,EAAe;AAAA;AACjB,KACF;AAAA,IACA,GAAA,EAAKC,mCAAA,CAAkBC,0BAAA,CAAM,KAAA,EAAO,CAAA,GAAA,MAAQ;AAAA,MAC1C,KAAK,GAAA,CAAI,MAAA,CAAA,GAAA,CAAA;AAAA,MACT,CAAC,qBAAA,CAAsB,MAAA,CAAA,GAAA,EAAG,GAAA,CAAG,GAAG;AAAA,QAC9B,MAAA,EAAQ,SAAS,MAAA,CAAA,GAAA,EAAG,YAAA,CAAA;AAAA,QACpB,KAAA,EAAO;AAAA,UACL,MAAA,EAAQ,SAAS,MAAA,CAAA,GAAA,EAAG,OAAA;AAAA;AACtB;AACF,KACF,CAAE,CAAA;AAAA,IACF,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,QACL,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,GAAA,EAAK;AAAA,QACH,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,cAAA,EAAgB;AAAA;AAClB,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,WAAA,EAAa;AAAA,QACX,QAAA,EAAU;AAAA;AACZ;AACF;AAEJ,CAAC,CAAA;;AC9CM,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,OAAO,UAAA,qBAAeC,cAAA,CAAC,cAAY,GAAG,KAAA,EAAO,KAAK,UAAA,EAAY;AACjE;;;;"}
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.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;;;;"}
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":";;;;;;AAKO,MAAM,UAAA,GAAa,MAAA,CAAO,SAAA,CAAU,GAAA,EAAK;AAAA,EAC9C,OAAA,EAAS,MAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,KAAA,EAAO;AAAA,QACL,UAAA,EAAY;AAAA,OACd;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,UAAA,EAAY;AAAA,OACd;AAAA,MACA,GAAA,EAAK;AAAA,QACH,UAAA,EAAY;AAAA,OACd;AAAA,MACA,OAAA,EAAS;AAAA,QACP,UAAA,EAAY;AAAA,OACd;AAAA,MACA,QAAA,EAAU;AAAA,QACR,UAAA,EAAY;AAAA;AACd,KACF;AAAA,IACA,SAAA,EAAW;AAAA,MACT,GAAA,EAAK;AAAA,QACH,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,UAAA,EAAY;AAAA,QACV,aAAA,EAAe;AAAA,OACjB;AAAA,MACA,aAAA,EAAe;AAAA,QACb,aAAA,EAAe;AAAA;AACjB,KACF;AAAA,IACA,GAAA,EAAK,iBAAA,CAAkB,KAAA,CAAM,KAAA,EAAO,CAAA,GAAA,MAAQ;AAAA,MAC1C,KAAK,GAAA,CAAI,MAAA,CAAA,GAAA,CAAA;AAAA,MACT,CAAC,qBAAA,CAAsB,MAAA,CAAA,GAAA,EAAG,GAAA,CAAG,GAAG;AAAA,QAC9B,MAAA,EAAQ,SAAS,MAAA,CAAA,GAAA,EAAG,YAAA,CAAA;AAAA,QACpB,KAAA,EAAO;AAAA,UACL,MAAA,EAAQ,SAAS,MAAA,CAAA,GAAA,EAAG,OAAA;AAAA;AACtB;AACF,KACF,CAAE,CAAA;AAAA,IACF,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,QACL,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,GAAA,EAAK;AAAA,QACH,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,OAAA,EAAS;AAAA,QACP,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,cAAA,EAAgB;AAAA,OAClB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,cAAA,EAAgB;AAAA;AAClB,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,WAAA,EAAa;AAAA,QACX,QAAA,EAAU;AAAA;AACZ;AACF;AAEJ,CAAC,CAAA;;AC9CM,MAAM,OAAO,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,OAAO,UAAA,qBAAe,GAAA,CAAC,cAAY,GAAG,KAAA,EAAO,KAAK,UAAA,EAAY;AACjE;;;;"}
package/dist/types.d.ts CHANGED
@@ -1,21 +1,40 @@
1
- import * as react from 'react';
2
- import react__default, { ComponentPropsWithRef } from 'react';
1
+ import * as React from 'react';
2
+ import React__default, { ComponentPropsWithRef } from 'react';
3
3
  import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
4
4
  import { theme } from '@mirohq/design-system-stitches';
5
- import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
6
5
  import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
7
6
 
8
- declare const StyledFlex: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "direction" | "gap" | "wrap" | "align" | "justify"> & _stitches_react_types_styled_component.TransformProps<{
9
- align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
7
+ /* Utilities */
8
+ /* ========================================================================== */
9
+
10
+ /** Returns a string with the given prefix followed by the given values. */
11
+ type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
12
+
13
+ type TransformProps<Props, Media> = {
14
+ [K in keyof Props]: (
15
+ | Props[K]
16
+ | (
17
+ & {
18
+ [KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
19
+ }
20
+ & {
21
+ [KMedia in string]: Props[K]
22
+ }
23
+ )
24
+ )
25
+ }
26
+
27
+ declare const StyledFlex: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, "direction" | "gap" | "wrap" | "justify" | "align"> & TransformProps<{
28
+ align?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
10
29
  direction?: "column" | "row" | "rowReverse" | "columnReverse" | undefined;
11
- gap?: 0 | 400 | 600 | 200 | 100 | 300 | 50 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
12
- justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
30
+ gap?: 0 | 400 | 600 | 50 | 100 | 200 | 300 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
31
+ justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined;
13
32
  wrap?: "wrap" | "noWrap" | "wrapReverse" | undefined;
14
- }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
15
- align?: "stretch" | "center" | "start" | "end" | "baseline" | undefined;
33
+ }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {
34
+ align?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
16
35
  direction?: "column" | "row" | "rowReverse" | "columnReverse" | undefined;
17
- gap?: 0 | 400 | 600 | 200 | 100 | 300 | 50 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
18
- justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | undefined;
36
+ gap?: 0 | 400 | 600 | 50 | 100 | 200 | 300 | 25 | 150 | 350 | 500 | 700 | 800 | 1200 | 1600 | 2000 | "0" | "25" | "50" | "100" | "200" | "150" | "300" | "350" | "400" | "500" | "600" | "700" | "800" | "1200" | "1600" | "2000" | undefined;
37
+ justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined;
19
38
  wrap?: "wrap" | "noWrap" | "wrapReverse" | undefined;
20
39
  }, {}>;
21
40
  type StyledFlexProps = ComponentPropsWithRef<typeof StyledFlex>;
@@ -42,6 +61,7 @@ interface FlexProps extends StyledFlexProps {
42
61
  */
43
62
  wrap?: StyledFlexProps['wrap'];
44
63
  }
45
- declare const Flex: react__default.ForwardRefExoticComponent<Omit<FlexProps, "ref"> & react__default.RefAttributes<HTMLDivElement>>;
64
+ declare const Flex: React__default.ForwardRefExoticComponent<Omit<FlexProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
46
65
 
47
- export { Flex, FlexProps };
66
+ export { Flex };
67
+ export type { FlexProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-flex",
3
- "version": "3.1.2",
3
+ "version": "3.2.0-fix-stitches-types.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,8 +26,8 @@
26
26
  "react": "^16.14 || ^17 || ^18 || ^19"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-primitive": "^2.1.0",
30
- "@mirohq/design-system-stitches": "^3.1.2",
29
+ "@mirohq/design-system-stitches": "^3.2.0-fix-stitches-types.1",
30
+ "@mirohq/design-system-primitive": "^2.2.0-fix-stitches-types.1",
31
31
  "@mirohq/design-system-utils": "^1.2.1"
32
32
  },
33
33
  "scripts": {