@instructure/ui-flex 11.6.0 → 11.6.1-snapshot-129

package/es/Flex/v2/Item/index.js

@@ -0,0 +1,97 @@
+var _dec, _class, _Item;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react';
+import { omitProps } from '@instructure/ui-react-utils';
+import { View } from '@instructure/ui-view/latest';
+import { withStyleLegacy as withStyle } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+parent: Flex
+id: Flex.Item
+---
+**/
+let Item = (_dec = withStyle(generateStyle, null), _dec(_class = (_Item = class Item extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  render() {
+    const props = omitProps(this.props, Item.allowedProps);
+    const _this$props3 = this.props,
+      as = _this$props3.as,
+      children = _this$props3.children,
+      withVisualDebug = _this$props3.withVisualDebug,
+      textAlign = _this$props3.textAlign,
+      size = _this$props3.size,
+      direction = _this$props3.direction,
+      margin = _this$props3.margin,
+      padding = _this$props3.padding,
+      overflowX = _this$props3.overflowX,
+      overflowY = _this$props3.overflowY,
+      styles = _this$props3.styles;
+    const dirColumn = direction === 'column';
+    const dirRow = direction === 'row';
+    return _jsx(View, {
+      ...props,
+      css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
+      elementRef: this.handleRef,
+      as: as,
+      minHeight: dirColumn ? size : void 0,
+      minWidth: dirRow ? size : void 0,
+      textAlign: textAlign,
+      margin: margin,
+      padding: padding,
+      overflowX: overflowX,
+      overflowY: overflowY || (dirColumn ? 'auto' : 'visible'),
+      withVisualDebug: withVisualDebug,
+      children: children
+    });
+  }
+}, _Item.displayName = "Item", _Item.componentId = 'Flex.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
+  as: 'span',
+  shouldGrow: false,
+  shouldShrink: false
+}, _Item)) || _class);
+export default Item;
+export { Item };

package/es/Flex/v2/Item/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['children', 'as', 'elementRef', 'margin', 'padding', 'align', 'direction', 'textAlign', 'overflowX', 'overflowY', 'shouldGrow', 'shouldShrink', 'size', 'withVisualDebug', 'order'];
+export { allowedProps };

package/es/Flex/v2/Item/styles.js

@@ -0,0 +1,68 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (_componentTheme, props) => {
+  const shouldGrow = props.shouldGrow,
+    shouldShrink = props.shouldShrink,
+    align = props.align,
+    size = props.size,
+    order = props.order;
+  const alignSelfValues = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    stretch: 'stretch'
+  };
+  return {
+    flexItem: {
+      label: 'flexItem',
+      boxSizing: 'border-box',
+      minWidth: '0.0625rem',
+      flexBasis: size,
+      ...(order !== void 0 ? {
+        order
+      } : {}),
+      // initial value is 1, but we want 0 as our default,
+      // so users can opt in to shrink like they do grow
+      flexShrink: shouldShrink ? 1 : 0,
+      ...(shouldGrow && {
+        flexGrow: 1
+      }),
+      ...(align && {
+        alignSelf: alignSelfValues[align]
+      })
+    }
+  };
+};
+export default generateStyle;

package/es/Flex/v2/index.js

@@ -0,0 +1,119 @@
+var _dec, _class, _Flex;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Children, Component } from 'react';
+import { safeCloneElement, passthroughProps, matchComponentTypes, callRenderProp } from '@instructure/ui-react-utils';
+import { View } from '@instructure/ui-view/latest';
+import { withStyle } from '@instructure/emotion';
+import { Item } from "./Item/index.js";
+import generateStyle from "./styles.js";
+import { allowedProps } from "./props.js";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+---
+category: components
+---
+@module Flex
+**/
+let Flex = (_dec = withStyle(generateStyle), _dec(_class = (_Flex = class Flex extends Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  renderChildren(children) {
+    // TODO this might fail if children are () => ReactNode
+    return Children.map(children, child => {
+      if (!child) {
+        return null;
+      }
+      return matchComponentTypes(child, ['Item']) ? safeCloneElement(child, {
+        // child withVisualDebug prop should override parent
+        withVisualDebug: this.props.withVisualDebug,
+        ...child.props,
+        direction: this.props.direction.replace(/-reverse/, '')
+      }) : child;
+    });
+  }
+  render() {
+    const _this$props3 = this.props,
+      as = _this$props3.as,
+      withVisualDebug = _this$props3.withVisualDebug,
+      height = _this$props3.height,
+      display = _this$props3.display,
+      margin = _this$props3.margin,
+      padding = _this$props3.padding,
+      textAlign = _this$props3.textAlign,
+      width = _this$props3.width,
+      styles = _this$props3.styles,
+      gap = _this$props3.gap,
+      wrap = _this$props3.wrap;
+    const children = callRenderProp(this.props.children);
+    const gapValuesArray = gap === null || gap === void 0 ? void 0 : gap.split(' ');
+    if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
+    if (children && Children.count(children) > 0) {
+      return _jsx(View, {
+        ...passthroughProps(this.props),
+        css: styles === null || styles === void 0 ? void 0 : styles.flex,
+        elementRef: this.handleRef,
+        as: as,
+        display: display,
+        width: width,
+        height: height,
+        margin: margin,
+        padding: padding,
+        textAlign: textAlign,
+        withVisualDebug: withVisualDebug,
+        children: this.renderChildren(children)
+      });
+    } else {
+      return null;
+    }
+  }
+}, _Flex.displayName = "Flex", _Flex.componentId = 'Flex', _Flex.Item = Item, _Flex.allowedProps = allowedProps, _Flex.defaultProps = {
+  as: 'span',
+  direction: 'row',
+  justifyItems: 'start',
+  display: 'flex',
+  withVisualDebug: false,
+  wrap: 'no-wrap',
+  gap: 'none'
+}, _Flex)) || _class);
+export default Flex;
+export { Flex, Item as FlexItem };

package/es/Flex/v2/props.js

@@ -0,0 +1,26 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const allowedProps = ['children', 'as', 'elementRef', 'height', 'width', 'margin', 'padding', 'display', 'textAlign', 'direction', 'alignItems', 'justifyItems', 'wrap', 'withVisualDebug'];
+export { allowedProps };

package/es/Flex/v2/styles.js

@@ -0,0 +1,101 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { getShorthandPropValue, makeThemeVars } from '@instructure/emotion';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {string} props.justifyItems
+ * @param  {string} props.direction
+ * @param  {string} props.alignItems
+ * @param  {string} props.wrap
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  const justifyItems = props.justifyItems,
+    wrap = props.wrap,
+    direction = props.direction,
+    gap = props.gap;
+
+  // align-items css prop
+  // When flex direction is row, 'center' is the most useful default because it
+  // vertically aligns Items. For column direction, though, we want 'stretch'.
+  const alignItems = props.alignItems || (direction === 'column' || direction === 'column-reverse' ? 'stretch' : 'center');
+  const alignItemsValues = {
+    center: 'center',
+    start: 'flex-start',
+    end: 'flex-end',
+    stretch: 'stretch'
+  };
+
+  // justify-content css prop
+  const justifyItemsValues = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    'space-around': 'space-around',
+    'space-between': 'space-between'
+  };
+
+  // wrap css prop
+  const wrapValues = {
+    wrap: 'wrap',
+    'wrap-reverse': 'wrap-reverse',
+    'no-wrap': void 0
+  };
+
+  // flex-direction css props
+  const flexDirectionValues = {
+    column: 'column',
+    'column-reverse': 'column-reverse',
+    row: 'row',
+    'row-reverse': 'row-reverse'
+  };
+
+  // gap css prop
+  const gapValues = makeThemeVars('gap', {
+    ...sharedTokens.spacing,
+    ...sharedTokens.legacy.spacing
+  });
+  const getGapValue = (gap, values) => getShorthandPropValue('Flex', values, gap, 'gap');
+  return {
+    flex: {
+      label: 'flex',
+      fontFamily: componentTheme.fontFamily,
+      boxSizing: 'border-box',
+      alignItems: alignItemsValues[alignItems],
+      justifyContent: justifyItemsValues[justifyItems],
+      flexWrap: wrapValues[wrap],
+      flexDirection: flexDirectionValues[direction],
+      gap: getGapValue(gap, gapValues)
+    }
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { Flex, FlexItem } from "./Flex/index.js";
+export { Flex, FlexItem } from "../Flex/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,8 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-export { Flex, FlexItem } from './Flex'
-
-export type { FlexProps } from './Flex/props'
-export type { FlexItemProps } from './Flex/Item/props'
+export { Flex, FlexItem } from "../Flex/v2/index.js";

package/lib/Flex/{Item → v1/Item}/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Item = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _View = require("@instructure/ui-view/lib/View");
+var _v11_ = require("@instructure/ui-view/v11_6");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
@@ -42,7 +42,7 @@ parent: Flex
 id: Flex.Item
 ---
 **/
-let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_Item = class Item extends _react.Component {
+let Item = exports.Item = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = (_Item = class Item extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -78,7 +78,7 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, null)
       styles = _this$props3.styles;
     const dirColumn = direction === 'column';
     const dirRow = direction === 'row';
-    return (0, _jsxRuntime.jsx)(_View.View, {
+    return (0, _jsxRuntime.jsx)(_v11_.View, {
       ...props,
       css: styles === null || styles === void 0 ? void 0 : styles.flexItem,
       elementRef: this.handleRef,

package/lib/Flex/v1/index.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Flex = void 0;
+Object.defineProperty(exports, "FlexItem", {
+  enumerable: true,
+  get: function () {
+    return _Item.Item;
+  }
+});
+exports.default = void 0;
+var _react = require("react");
+var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
+var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
+var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
+var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
+var _v11_ = require("@instructure/ui-view/v11_6");
+var _emotion = require("@instructure/emotion");
+var _Item = require("./Item");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _dec, _class, _Flex;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/**
+---
+category: components
+---
+@module Flex
+**/
+let Flex = exports.Flex = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Flex = class Flex extends _react.Component {
+  constructor(...args) {
+    super(...args);
+    this.ref = null;
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
+  componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
+  }
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
+  }
+  renderChildren(children) {
+    // TODO this might fail if children are () => ReactNode
+    return _react.Children.map(children, child => {
+      if (!child) {
+        return null;
+      }
+      return (0, _matchComponentTypes.matchComponentTypes)(child, ['Item']) ? (0, _safeCloneElement.safeCloneElement)(child, {
+        // child withVisualDebug prop should override parent
+        withVisualDebug: this.props.withVisualDebug,
+        ...child.props,
+        direction: this.props.direction.replace(/-reverse/, '')
+      }) : child;
+    });
+  }
+  render() {
+    const _this$props3 = this.props,
+      as = _this$props3.as,
+      withVisualDebug = _this$props3.withVisualDebug,
+      height = _this$props3.height,
+      display = _this$props3.display,
+      margin = _this$props3.margin,
+      padding = _this$props3.padding,
+      textAlign = _this$props3.textAlign,
+      width = _this$props3.width,
+      styles = _this$props3.styles,
+      gap = _this$props3.gap,
+      wrap = _this$props3.wrap;
+    const children = (0, _callRenderProp.callRenderProp)(this.props.children);
+    const gapValuesArray = gap === null || gap === void 0 ? void 0 : gap.split(' ');
+    if (gapValuesArray.length > 1 && wrap === 'no-wrap') {}
+    if (children && _react.Children.count(children) > 0) {
+      return (0, _jsxRuntime.jsx)(_v11_.View, {
+        ...(0, _passthroughProps.passthroughProps)(this.props),
+        css: styles === null || styles === void 0 ? void 0 : styles.flex,
+        elementRef: this.handleRef,
+        as: as,
+        display: display,
+        width: width,
+        height: height,
+        margin: margin,
+        padding: padding,
+        textAlign: textAlign,
+        withVisualDebug: withVisualDebug,
+        children: this.renderChildren(children)
+      });
+    } else {
+      return null;
+    }
+  }
+}, _Flex.displayName = "Flex", _Flex.componentId = 'Flex', _Flex.Item = _Item.Item, _Flex.allowedProps = _props.allowedProps, _Flex.defaultProps = {
+  as: 'span',
+  direction: 'row',
+  justifyItems: 'start',
+  display: 'flex',
+  withVisualDebug: false,
+  wrap: 'no-wrap',
+  gap: 'none'
+}, _Flex)) || _class);
+var _default = exports.default = Flex;