@mirohq/design-system-flex 2.1.2-button.0 → 2.1.3-test-changelog.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.
- package/dist/main.js +9 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +9 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +0 -3
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -42,7 +42,15 @@ const StyledFlex = designSystemStitches.styled(designSystemPrimitive.Primitive.d
|
|
|
42
42
|
flexDirection: "column-reverse"
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
|
-
gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme["space-gap"],
|
|
45
|
+
gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme["space-gap"], (key) => ({
|
|
46
|
+
gap: `$${key}`,
|
|
47
|
+
[`@supports not(gap: ${key})`]: {
|
|
48
|
+
margin: `calc($${key} / 2 * -1)`,
|
|
49
|
+
"> *": {
|
|
50
|
+
margin: `calc($${key} / 2)`
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
})),
|
|
46
54
|
justify: {
|
|
47
55
|
start: {
|
|
48
56
|
justifyContent: "flex-start"
|
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'],
|
|
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"],"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,WAAA,CAAA,EAAc,CAAQ,GAAA,MAAA;AAAA,MACjD,KAAK,CAAI,CAAA,EAAA,GAAA,CAAA,CAAA;AAAA,MACT,CAAC,sBAAsB,GAAS,CAAA,CAAA,CAAA,GAAA;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,KAAO,EAAA,UAAA,qBAAgBA,yBAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAY,GAAG,KAAA;AAAA,IAAO,GAAK,EAAA,UAAA;AAAA,GAAY,CAAA;AACjE;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -34,7 +34,15 @@ const StyledFlex = styled(Primitive.div, {
|
|
|
34
34
|
flexDirection: "column-reverse"
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
|
-
gap: mapKeysToVariants(theme["space-gap"],
|
|
37
|
+
gap: mapKeysToVariants(theme["space-gap"], (key) => ({
|
|
38
|
+
gap: `$${key}`,
|
|
39
|
+
[`@supports not(gap: ${key})`]: {
|
|
40
|
+
margin: `calc($${key} / 2 * -1)`,
|
|
41
|
+
"> *": {
|
|
42
|
+
margin: `calc($${key} / 2)`
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
})),
|
|
38
46
|
justify: {
|
|
39
47
|
start: {
|
|
40
48
|
justifyContent: "flex-start"
|
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'],
|
|
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,WAAA,CAAA,EAAc,CAAQ,GAAA,MAAA;AAAA,MACjD,KAAK,CAAI,CAAA,EAAA,GAAA,CAAA,CAAA;AAAA,MACT,CAAC,sBAAsB,GAAS,CAAA,CAAA,CAAA,GAAA;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,KAAO,EAAA,UAAA,qBAAgB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAY,GAAG,KAAA;AAAA,IAAO,GAAK,EAAA,UAAA;AAAA,GAAY,CAAA;AACjE;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -111,8 +111,6 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
111
111
|
readonly 'background-danger'?: any;
|
|
112
112
|
readonly 'background-danger-hover'?: any;
|
|
113
113
|
readonly 'background-success'?: any;
|
|
114
|
-
readonly 'background-warning-subtle'?: any;
|
|
115
|
-
readonly 'background-warning-prominent'?: any;
|
|
116
114
|
readonly 'text-neutrals-inverted'?: any;
|
|
117
115
|
readonly 'text-neutrals'?: any;
|
|
118
116
|
readonly 'text-neutrals-subtle'?: any;
|
|
@@ -193,7 +191,6 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
193
191
|
readonly 50: "0 4px 16px #05003812";
|
|
194
192
|
readonly 100: "0 8px 32px #05003808";
|
|
195
193
|
readonly 'focus-small': "0 0 0 2px $colors$blue-200, inset 0 0 0 2px $colors$blue-500, inset 0 0 0 3px $colors$white";
|
|
196
|
-
readonly 'focus-small-outline': "0 0 0 2px $colors$blue-200, inset 0 0 0 1px $colors$blue-500, inset 0 0 0 2px $colors$white";
|
|
197
194
|
readonly 'focus-large': "0 0 0 4px $colors$blue-200, inset 0 0 0 2px $colors$blue-500, inset 0 0 0 3px $colors$white";
|
|
198
195
|
readonly 'focus-controls': "0 0 0 1px $colors$white, 0 0 0 3px $colors$blue-500, 0 0 0 5px $colors$blue-200";
|
|
199
196
|
};
|
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.3-test-changelog.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-
|
|
31
|
-
"@mirohq/design-system-
|
|
30
|
+
"@mirohq/design-system-utils": "^0.12.0",
|
|
31
|
+
"@mirohq/design-system-stitches": "^2.1.2-test-changelog.0"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "rollup -c ../../../rollup.config.js",
|