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

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

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Item = void 0;
+var _react = require("react");
+var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
+var _latest = require("@instructure/ui-view/latest");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+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.
+ */
+/**
+---
+parent: Flex
+id: Flex.Item
+---
+**/
+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;
+    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 = (0, _omitProps.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 (0, _jsxRuntime.jsx)(_latest.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 = _props.allowedProps, _Item.defaultProps = {
+  as: 'span',
+  shouldGrow: false,
+  shouldShrink: false
+}, _Item)) || _class);
+var _default = exports.default = Item;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.allowedProps = ['children', 'as', 'elementRef', 'margin', 'padding', 'align', 'direction', 'textAlign', 'overflowX', 'overflowY', 'shouldGrow', 'shouldShrink', 'size', 'withVisualDebug', 'order'];

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * 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]
+      })
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Flex/{index.js → v2/index.js}

@@ -17,11 +17,10 @@ var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElemen
 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 _View = require("@instructure/ui-view/lib/View");
+var _latest = require("@instructure/ui-view/latest");
 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;
@@ -54,7 +53,7 @@ category: components
 ---
 @module Flex
 **/
-let Flex = exports.Flex = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Flex = class Flex extends _react.Component {
+let Flex = exports.Flex = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_Flex = class Flex extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -105,7 +104,7 @@ let Flex = exports.Flex = (_dec = (0, _emotion.withStyle)(_styles.default, _them
     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)(_View.View, {
+      return (0, _jsxRuntime.jsx)(_latest.View, {
         ...(0, _passthroughProps.passthroughProps)(this.props),
         css: styles === null || styles === void 0 ? void 0 : styles.flex,
         elementRef: this.handleRef,

package/lib/Flex/v2/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.allowedProps = void 0;
+/*
+ * 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 = exports.allowedProps = ['children', 'as', 'elementRef', 'height', 'width', 'margin', 'padding', 'display', 'textAlign', 'direction', 'alignItems', 'justifyItems', 'wrap', 'withVisualDebug'];

package/lib/Flex/v2/styles.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * 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  {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 = (0, _emotion.makeThemeVars)('gap', {
+    ...sharedTokens.spacing,
+    ...sharedTokens.legacy.spacing
+  });
+  const getGapValue = (gap, values) => (0, _emotion.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)
+    }
+  };
+};
+var _default = exports.default = generateStyle;

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Flex", {
   enumerable: true,
   get: function () {
-    return _Flex.Flex;
+    return _v.Flex;
   }
 });
 Object.defineProperty(exports, "FlexItem", {
   enumerable: true,
   get: function () {
-    return _Flex.FlexItem;
+    return _v.FlexItem;
   }
 });
-var _Flex = require("./Flex");
+var _v = require("../Flex/v1");

package/lib/exports/b.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function () {
+    return _v.Flex;
+  }
+});
+Object.defineProperty(exports, "FlexItem", {
+  enumerable: true,
+  get: function () {
+    return _v.FlexItem;
+  }
+});
+var _v = require("../Flex/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-flex",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A component that makes it easy to align content using flexbox CSS",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,19 +15,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -37,17 +37,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Flex/{Item → v1/Item}/index.tsx

@@ -25,8 +25,8 @@
 import { Component } from 'react'
 
 import { omitProps } from '@instructure/ui-react-utils'
-import { View } from '@instructure/ui-view'
-import { withStyle } from '@instructure/emotion'
+import { View } from '@instructure/ui-view/v11_6'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 

package/src/Flex/{index.tsx → v1/index.tsx}

@@ -30,8 +30,8 @@ import {
   matchComponentTypes,
   callRenderProp
 } from '@instructure/ui-react-utils'
-import { View } from '@instructure/ui-view'
-import { withStyle } from '@instructure/emotion'
+import { View } from '@instructure/ui-view/v11_6'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import { Item } from './Item'
 import type { FlexItemProps } from './Item/props'

package/src/Flex/v2/Item/index.tsx

@@ -0,0 +1,115 @@
+/*
+ * 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'
+
+import { allowedProps } from './props'
+import type { FlexItemProps } from './props'
+
+/**
+---
+parent: Flex
+id: Flex.Item
+---
+**/
+@withStyle(generateStyle, null)
+class Item extends Component<FlexItemProps> {
+  static readonly componentId = 'Flex.Item'
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    as: 'span',
+    shouldGrow: false,
+    shouldShrink: false
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  render() {
+    const props = omitProps(this.props, Item.allowedProps)
+
+    const {
+      as,
+      children,
+      withVisualDebug,
+      textAlign,
+      size,
+      direction,
+      margin,
+      padding,
+      overflowX,
+      overflowY,
+      styles
+    } = this.props
+
+    const dirColumn = direction === 'column'
+    const dirRow = direction === 'row'
+
+    return (
+      <View
+        {...props}
+        css={styles?.flexItem}
+        elementRef={this.handleRef}
+        as={as}
+        minHeight={dirColumn ? size : undefined}
+        minWidth={dirRow ? size : undefined}
+        textAlign={textAlign}
+        margin={margin}
+        padding={padding}
+        overflowX={overflowX}
+        overflowY={overflowY || (dirColumn ? 'auto' : 'visible')}
+        withVisualDebug={withVisualDebug}
+      >
+        {children}
+      </View>
+    )
+  }
+}
+
+export default Item
+export { Item }