@instructure/ui-flex 11.7.3-snapshot-25 → 11.7.3-snapshot-27

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 (21) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Flex/v1/Item/index.js +39 -37
  3. package/es/Flex/v1/Item/styles.js +8 -6
  4. package/es/Flex/v1/index.js +43 -40
  5. package/es/Flex/v1/styles.js +7 -5
  6. package/es/Flex/v1/theme.js +5 -3
  7. package/es/Flex/v2/Item/index.js +39 -37
  8. package/es/Flex/v2/Item/styles.js +8 -6
  9. package/es/Flex/v2/index.js +43 -40
  10. package/es/Flex/v2/styles.js +7 -5
  11. package/lib/Flex/v1/Item/index.js +39 -37
  12. package/lib/Flex/v1/Item/styles.js +8 -6
  13. package/lib/Flex/v1/index.js +43 -40
  14. package/lib/Flex/v1/styles.js +7 -5
  15. package/lib/Flex/v1/theme.js +5 -3
  16. package/lib/Flex/v2/Item/index.js +39 -37
  17. package/lib/Flex/v2/Item/styles.js +8 -6
  18. package/lib/Flex/v2/index.js +43 -40
  19. package/lib/Flex/v2/styles.js +7 -5
  20. package/package.json +10 -10
  21. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
6
+ ## [11.7.3-snapshot-27](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-27) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-flex
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Flex/v1/Item/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Item;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -36,49 +36,55 @@ parent: Flex
36
36
  id: Flex.Item
37
37
  ---
38
38
  **/
39
- let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class Item extends Component {
40
- constructor(...args) {
41
- super(...args);
42
- this.ref = null;
43
- this.handleRef = el => {
44
- const elementRef = this.props.elementRef;
45
- this.ref = el;
46
- if (typeof elementRef === 'function') {
47
- elementRef(el);
48
- }
49
- };
50
- }
39
+ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = class Item extends Component {
40
+ static displayName = "Item";
41
+ static componentId = 'Flex.Item';
51
42
  componentDidMount() {
52
- var _this$props$makeStyle, _this$props;
53
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
43
+ this.props.makeStyles?.();
54
44
  }
55
45
  componentDidUpdate() {
56
- var _this$props$makeStyle2, _this$props2;
57
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
46
+ this.props.makeStyles?.();
58
47
  }
48
+ static allowedProps = allowedProps;
49
+ static defaultProps = {
50
+ as: 'span',
51
+ shouldGrow: false,
52
+ shouldShrink: false
53
+ };
54
+ ref = null;
55
+ handleRef = el => {
56
+ const {
57
+ elementRef
58
+ } = this.props;
59
+ this.ref = el;
60
+ if (typeof elementRef === 'function') {
61
+ elementRef(el);
62
+ }
63
+ };
59
64
  render() {
60
65
  const props = omitProps(this.props, Item.allowedProps);
61
- const _this$props3 = this.props,
62
- as = _this$props3.as,
63
- children = _this$props3.children,
64
- withVisualDebug = _this$props3.withVisualDebug,
65
- textAlign = _this$props3.textAlign,
66
- size = _this$props3.size,
67
- direction = _this$props3.direction,
68
- margin = _this$props3.margin,
69
- padding = _this$props3.padding,
70
- overflowX = _this$props3.overflowX,
71
- overflowY = _this$props3.overflowY,
72
- styles = _this$props3.styles;
66
+ const {
67
+ as,
68
+ children,
69
+ withVisualDebug,
70
+ textAlign,
71
+ size,
72
+ direction,
73
+ margin,
74
+ padding,
75
+ overflowX,
76
+ overflowY,
77
+ styles
78
+ } = this.props;
73
79
  const dirColumn = direction === 'column';
74
80
  const dirRow = direction === 'row';
75
81
  return _jsx(View, {
76
82
  ...props,
77
- css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
83
+ css: styles?.flexItem,
78
84
  elementRef: this.handleRef,
79
85
  as: as,
80
- minHeight: dirColumn ? size : void 0,
81
- minWidth: dirRow ? size : void 0,
86
+ minHeight: dirColumn ? size : undefined,
87
+ minWidth: dirRow ? size : undefined,
82
88
  textAlign: textAlign,
83
89
  margin: margin,
84
90
  padding: padding,
@@ -88,10 +94,6 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class
88
94
  children: children
89
95
  });
90
96
  }
91
- }, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
92
- as: 'span',
93
- shouldGrow: false,
94
- shouldShrink: false
95
- }, _Item)) || _class);
97
+ }) || _class);
96
98
  export default Item;
97
99
  export { Item };
package/es/Flex/v1/Item/styles.js CHANGED
@@ -33,11 +33,13 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (_componentTheme, props) => {
36
- const shouldGrow = props.shouldGrow,
37
- shouldShrink = props.shouldShrink,
38
- align = props.align,
39
- size = props.size,
40
- order = props.order;
36
+ const {
37
+ shouldGrow,
38
+ shouldShrink,
39
+ align,
40
+ size,
41
+ order
42
+ } = props;
41
43
  const alignSelfValues = {
42
44
  start: 'flex-start',
43
45
  end: 'flex-end',
@@ -50,7 +52,7 @@ const generateStyle = (_componentTheme, props) => {
50
52
  boxSizing: 'border-box',
51
53
  minWidth: '0.0625rem',
52
54
  flexBasis: size,
53
- ...(order !== void 0 ? {
55
+ ...(order !== undefined ? {
54
56
  order
55
57
  } : {}),
56
58
  // initial value is 1, but we want 0 as our default,
package/es/Flex/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Flex;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -38,26 +38,36 @@ category: components
38
38
  ---
39
39
  @module Flex
40
40
  **/
41
- let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Flex = class Flex extends Component {
42
- constructor(...args) {
43
- super(...args);
44
- this.ref = null;
45
- this.handleRef = el => {
46
- const elementRef = this.props.elementRef;
47
- this.ref = el;
48
- if (typeof elementRef === 'function') {
49
- elementRef(el);
50
- }
51
- };
52
- }
41
+ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Flex extends Component {
42
+ static displayName = "Flex";
43
+ static componentId = 'Flex';
53
44
  componentDidMount() {
54
- var _this$props$makeStyle, _this$props;
55
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
45
+ this.props.makeStyles?.();
56
46
  }
57
47
  componentDidUpdate() {
58
- var _this$props$makeStyle2, _this$props2;
59
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
48
+ this.props.makeStyles?.();
60
49
  }
50
+ static Item = Item;
51
+ static allowedProps = allowedProps;
52
+ static defaultProps = {
53
+ as: 'span',
54
+ direction: 'row',
55
+ justifyItems: 'start',
56
+ display: 'flex',
57
+ withVisualDebug: false,
58
+ wrap: 'no-wrap',
59
+ gap: 'none'
60
+ };
61
+ ref = null;
62
+ handleRef = el => {
63
+ const {
64
+ elementRef
65
+ } = this.props;
66
+ this.ref = el;
67
+ if (typeof elementRef === 'function') {
68
+ elementRef(el);
69
+ }
70
+ };
61
71
  renderChildren(children) {
62
72
  // TODO this might fail if children are () => ReactNode
63
73
  return Children.map(children, child => {
@@ -73,25 +83,26 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
73
83
  });
74
84
  }
75
85
  render() {
76
- const _this$props3 = this.props,
77
- as = _this$props3.as,
78
- withVisualDebug = _this$props3.withVisualDebug,
79
- height = _this$props3.height,
80
- display = _this$props3.display,
81
- margin = _this$props3.margin,
82
- padding = _this$props3.padding,
83
- textAlign = _this$props3.textAlign,
84
- width = _this$props3.width,
85
- styles = _this$props3.styles,
86
- gap = _this$props3.gap,
87
- wrap = _this$props3.wrap;
86
+ const {
87
+ as,
88
+ withVisualDebug,
89
+ height,
90
+ display,
91
+ margin,
92
+ padding,
93
+ textAlign,
94
+ width,
95
+ styles,
96
+ gap,
97
+ wrap
98
+ } = this.props;
88
99
  const children = callRenderProp(this.props.children);
89
- const gapValuesArray = gap === null || gap === void 0 ? void 0 : gap.split(' ');
100
+ const gapValuesArray = gap?.split(' ');
90
101
  if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
91
102
  if (children && Children.count(children) > 0) {
92
103
  return _jsx(View, {
93
104
  ...passthroughProps(this.props),
94
- css: styles === null || styles === void 0 ? void 0 : styles.flex,
105
+ css: styles?.flex,
95
106
  elementRef: this.handleRef,
96
107
  as: as,
97
108
  display: display,
@@ -107,14 +118,6 @@ let Flex = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
107
118
  return null;
108
119
  }
109
120
  }
110
- }, _Flex.displayName = "Flex", _Flex.componentId = 'Flex', _Flex.Item = Item, _Flex.allowedProps = allowedProps, _Flex.defaultProps = {
111
- as: 'span',
112
- direction: 'row',
113
- justifyItems: 'start',
114
- display: 'flex',
115
- withVisualDebug: false,
116
- wrap: 'no-wrap',
117
- gap: 'none'
118
- }, _Flex)) || _class);
121
+ }) || _class);
119
122
  export default Flex;
120
123
  export { Flex, Item as FlexItem };
package/es/Flex/v1/styles.js CHANGED
@@ -39,10 +39,12 @@ import { getShorthandPropValue } from '@instructure/emotion';
39
39
  */
40
40
 
41
41
  const generateStyle = (componentTheme, props) => {
42
- const justifyItems = props.justifyItems,
43
- wrap = props.wrap,
44
- direction = props.direction,
45
- gap = props.gap;
42
+ const {
43
+ justifyItems,
44
+ wrap,
45
+ direction,
46
+ gap
47
+ } = props;
46
48
 
47
49
  // align-items css prop
48
50
  // When flex direction is row, 'center' is the most useful default because it
@@ -68,7 +70,7 @@ const generateStyle = (componentTheme, props) => {
68
70
  const wrapValues = {
69
71
  wrap: 'wrap',
70
72
  'wrap-reverse': 'wrap-reverse',
71
- 'no-wrap': void 0
73
+ 'no-wrap': undefined
72
74
  };
73
75
 
74
76
  // flex-direction css props
package/es/Flex/v1/theme.js CHANGED
@@ -29,10 +29,12 @@ import { makeThemeVars } from '@instructure/emotion';
29
29
  * @return {Object} The final theme object with the overrides and component variables
30
30
  */
31
31
  const generateComponentTheme = theme => {
32
- const typography = theme.typography,
33
- spacing = theme.spacing;
32
+ const {
33
+ typography,
34
+ spacing
35
+ } = theme;
34
36
  const componentVariables = {
35
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
37
+ fontFamily: typography?.fontFamily,
36
38
  ...makeThemeVars('gap', spacing)
37
39
  };
38
40
  return {
package/es/Flex/v2/Item/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Item;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -36,49 +36,55 @@ parent: Flex
36
36
  id: Flex.Item
37
37
  ---
38
38
  **/
39
- let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class Item extends Component {
40
- constructor(...args) {
41
- super(...args);
42
- this.ref = null;
43
- this.handleRef = el => {
44
- const elementRef = this.props.elementRef;
45
- this.ref = el;
46
- if (typeof elementRef === 'function') {
47
- elementRef(el);
48
- }
49
- };
50
- }
39
+ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = class Item extends Component {
40
+ static displayName = "Item";
41
+ static componentId = 'Flex.Item';
51
42
  componentDidMount() {
52
- var _this$props$makeStyle, _this$props;
53
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
43
+ this.props.makeStyles?.();
54
44
  }
55
45
  componentDidUpdate() {
56
- var _this$props$makeStyle2, _this$props2;
57
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
46
+ this.props.makeStyles?.();
58
47
  }
48
+ static allowedProps = allowedProps;
49
+ static defaultProps = {
50
+ as: 'span',
51
+ shouldGrow: false,
52
+ shouldShrink: false
53
+ };
54
+ ref = null;
55
+ handleRef = el => {
56
+ const {
57
+ elementRef
58
+ } = this.props;
59
+ this.ref = el;
60
+ if (typeof elementRef === 'function') {
61
+ elementRef(el);
62
+ }
63
+ };
59
64
  render() {
60
65
  const props = omitProps(this.props, Item.allowedProps);
61
- const _this$props3 = this.props,
62
- as = _this$props3.as,
63
- children = _this$props3.children,
64
- withVisualDebug = _this$props3.withVisualDebug,
65
- textAlign = _this$props3.textAlign,
66
- size = _this$props3.size,
67
- direction = _this$props3.direction,
68
- margin = _this$props3.margin,
69
- padding = _this$props3.padding,
70
- overflowX = _this$props3.overflowX,
71
- overflowY = _this$props3.overflowY,
72
- styles = _this$props3.styles;
66
+ const {
67
+ as,
68
+ children,
69
+ withVisualDebug,
70
+ textAlign,
71
+ size,
72
+ direction,
73
+ margin,
74
+ padding,
75
+ overflowX,
76
+ overflowY,
77
+ styles
78
+ } = this.props;
73
79
  const dirColumn = direction === 'column';
74
80
  const dirRow = direction === 'row';
75
81
  return _jsx(View, {
76
82
  ...props,
77
- css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
83
+ css: styles?.flexItem,
78
84
  elementRef: this.handleRef,
79
85
  as: as,
80
- minHeight: dirColumn ? size : void 0,
81
- minWidth: dirRow ? size : void 0,
86
+ minHeight: dirColumn ? size : undefined,
87
+ minWidth: dirRow ? size : undefined,
82
88
  textAlign: textAlign,
83
89
  margin: margin,
84
90
  padding: padding,
@@ -88,10 +94,6 @@ let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class
88
94
  children: children
89
95
  });
90
96
  }
91
- }, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
92
- as: 'span',
93
- shouldGrow: false,
94
- shouldShrink: false
95
- }, _Item)) || _class);
97
+ }) || _class);
96
98
  export default Item;
97
99
  export { Item };
package/es/Flex/v2/Item/styles.js CHANGED
@@ -33,11 +33,13 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (_componentTheme, props) => {
36
- const shouldGrow = props.shouldGrow,
37
- shouldShrink = props.shouldShrink,
38
- align = props.align,
39
- size = props.size,
40
- order = props.order;
36
+ const {
37
+ shouldGrow,
38
+ shouldShrink,
39
+ align,
40
+ size,
41
+ order
42
+ } = props;
41
43
  const alignSelfValues = {
42
44
  start: 'flex-start',
43
45
  end: 'flex-end',
@@ -50,7 +52,7 @@ const generateStyle = (_componentTheme, props) => {
50
52
  boxSizing: 'border-box',
51
53
  minWidth: '0.0625rem',
52
54
  flexBasis: size,
53
- ...(order !== void 0 ? {
55
+ ...(order !== undefined ? {
54
56
  order
55
57
  } : {}),
56
58
  // initial value is 1, but we want 0 as our default,
package/es/Flex/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Flex;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -37,26 +37,36 @@ category: components
37
37
  ---
38
38
  @module Flex
39
39
  **/
40
- let Flex = (_dec = withStyle(generateStyle), _dec(_class = (_Flex = class Flex extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.ref = null;
44
- this.handleRef = el => {
45
- const elementRef = this.props.elementRef;
46
- this.ref = el;
47
- if (typeof elementRef === 'function') {
48
- elementRef(el);
49
- }
50
- };
51
- }
40
+ let Flex = (_dec = withStyle(generateStyle), _dec(_class = class Flex extends Component {
41
+ static displayName = "Flex";
42
+ static componentId = 'Flex';
52
43
  componentDidMount() {
53
- var _this$props$makeStyle, _this$props;
54
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
44
+ this.props.makeStyles?.();
55
45
  }
56
46
  componentDidUpdate() {
57
- var _this$props$makeStyle2, _this$props2;
58
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
47
+ this.props.makeStyles?.();
59
48
  }
49
+ static Item = Item;
50
+ static allowedProps = allowedProps;
51
+ static defaultProps = {
52
+ as: 'span',
53
+ direction: 'row',
54
+ justifyItems: 'start',
55
+ display: 'flex',
56
+ withVisualDebug: false,
57
+ wrap: 'no-wrap',
58
+ gap: 'none'
59
+ };
60
+ ref = null;
61
+ handleRef = el => {
62
+ const {
63
+ elementRef
64
+ } = this.props;
65
+ this.ref = el;
66
+ if (typeof elementRef === 'function') {
67
+ elementRef(el);
68
+ }
69
+ };
60
70
  renderChildren(children) {
61
71
  // TODO this might fail if children are () => ReactNode
62
72
  return Children.map(children, child => {
@@ -72,25 +82,26 @@ let Flex = (_dec = withStyle(generateStyle), _dec(_class = (_Flex = class Flex e
72
82
  });
73
83
  }
74
84
  render() {
75
- const _this$props3 = this.props,
76
- as = _this$props3.as,
77
- withVisualDebug = _this$props3.withVisualDebug,
78
- height = _this$props3.height,
79
- display = _this$props3.display,
80
- margin = _this$props3.margin,
81
- padding = _this$props3.padding,
82
- textAlign = _this$props3.textAlign,
83
- width = _this$props3.width,
84
- styles = _this$props3.styles,
85
- gap = _this$props3.gap,
86
- wrap = _this$props3.wrap;
85
+ const {
86
+ as,
87
+ withVisualDebug,
88
+ height,
89
+ display,
90
+ margin,
91
+ padding,
92
+ textAlign,
93
+ width,
94
+ styles,
95
+ gap,
96
+ wrap
97
+ } = this.props;
87
98
  const children = callRenderProp(this.props.children);
88
- const gapValuesArray = gap === null || gap === void 0 ? void 0 : gap.split(' ');
99
+ const gapValuesArray = gap?.split(' ');
89
100
  if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
90
101
  if (children && Children.count(children) > 0) {
91
102
  return _jsx(View, {
92
103
  ...passthroughProps(this.props),
93
- css: styles === null || styles === void 0 ? void 0 : styles.flex,
104
+ css: styles?.flex,
94
105
  elementRef: this.handleRef,
95
106
  as: as,
96
107
  display: display,
@@ -106,14 +117,6 @@ let Flex = (_dec = withStyle(generateStyle), _dec(_class = (_Flex = class Flex e
106
117
  return null;
107
118
  }
108
119
  }
109
- }, _Flex.displayName = "Flex", _Flex.componentId = 'Flex', _Flex.Item = Item, _Flex.allowedProps = allowedProps, _Flex.defaultProps = {
110
- as: 'span',
111
- direction: 'row',
112
- justifyItems: 'start',
113
- display: 'flex',
114
- withVisualDebug: false,
115
- wrap: 'no-wrap',
116
- gap: 'none'
117
- }, _Flex)) || _class);
120
+ }) || _class);
118
121
  export default Flex;
119
122
  export { Flex, Item as FlexItem };
package/es/Flex/v2/styles.js CHANGED
@@ -39,10 +39,12 @@ import { getShorthandPropValue, makeThemeVars } from '@instructure/emotion';
39
39
  */
40
40
 
41
41
  const generateStyle = (componentTheme, props, sharedTokens) => {
42
- const justifyItems = props.justifyItems,
43
- wrap = props.wrap,
44
- direction = props.direction,
45
- gap = props.gap;
42
+ const {
43
+ justifyItems,
44
+ wrap,
45
+ direction,
46
+ gap
47
+ } = props;
46
48
 
47
49
  // align-items css prop
48
50
  // When flex direction is row, 'center' is the most useful default because it
@@ -68,7 +70,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
68
70
  const wrapValues = {
69
71
  wrap: 'wrap',
70
72
  'wrap-reverse': 'wrap-reverse',
71
- 'no-wrap': void 0
73
+ 'no-wrap': undefined
72
74
  };
73
75
 
74
76
  // flex-direction css props