@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/lib/Fieldset/FieldsetContainer.native.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
+// If a11y testing finds any additional handling is needed at the container level, add it here.
+const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  accessibilityRole
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  ref: ref,
+  accessibilityRole: accessibilityRole,
+  children: children
+}));
+FieldsetContainer.displayName = 'FieldsetContainer';
+FieldsetContainer.propTypes = {
+  children: _propTypes.default.node,
+  accessibilityRole: _propTypes.default.string
+};
+var _default = FieldsetContainer;
+exports.default = _default;

package/lib/Fieldset/Legend.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _cssReset = _interopRequireDefault(require("./cssReset"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * On Web, wraps children in HTML `<legend>` tag.
+ * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
+ */
+const Legend = /*#__PURE__*/(0, _react.forwardRef)(({
+  children
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
+  ref: ref,
+  style: _cssReset.default,
+  children: children
+}));
+Legend.displayName = 'Legend';
+Legend.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = Legend;
+exports.default = _default;

package/lib/Fieldset/Legend.native.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * On Web, wraps children in HTML `<legend>` tag.
+ * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
+ */
+const Legend = /*#__PURE__*/(0, _react.forwardRef)(({
+  children
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  ref: ref,
+  style: staticStyles.stretch,
+  children: children
+}));
+Legend.displayName = 'Legend';
+Legend.propTypes = {
+  children: _propTypes.default.node
+};
+
+const staticStyles = _StyleSheet.default.create({
+  stretch: {
+    width: '100%',
+    flexGrow: 1
+  }
+});
+
+var _default = Legend;
+exports.default = _default;

package/lib/Fieldset/cssReset.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// React Native Web has no built-in `fieldset` or `legend` support.
+// This reset makes them consistent with other RNW views.
+// Can't use RN stylesheets because it's not an RN element (RNW's createElement tooling is unstable).
+// Using CSS `all` doesn't work well as an inline style.
+// https://github.com/necolas/react-native-web/issues/1385
+var _default = {
+  margin: 'unset',
+  padding: 'unset',
+  float: 'unset',
+  border: 'unset',
+  width: 'unset',
+  display: 'flex',
+  flexDirection: 'column'
+};
+exports.default = _default;

package/lib/Fieldset/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Fieldset = _interopRequireDefault(require("./Fieldset"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Fieldset.default;
+exports.default = _default;

package/lib/FlexGrid/Col/Col.js

@@ -1,13 +1,39 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { Platform, StyleSheet, View } from 'react-native';
-import { viewports } from '@telus-uds/system-constants';
-import GutterContext from '../providers/GutterContext';
-import { useViewport } from '../../ViewportProvider';
-import applyInheritance from '../helpers';
-import { responsiveProps } from '../../utils';
-
-const Col = ({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _GutterContext = _interopRequireDefault(require("../providers/GutterContext"));
+
+var _ViewportProvider = require("../../ViewportProvider");
+
+var _helpers = _interopRequireDefault(require("../helpers"));
+
+var _utils = require("../../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Col = /*#__PURE__*/(0, _react.forwardRef)(({
   horizontalAlign,
   children,
   xs,
@@ -21,14 +47,14 @@ const Col = ({
   lgOffset,
   xlOffset,
   ...viewProps
-}) => {
-  const gutter = useContext(GutterContext);
-  const viewPort = useViewport();
-  const hiddenLevels = applyInheritance([xs, sm, md, lg, xl]);
+}, ref) => {
+  const gutter = (0, _react.useContext)(_GutterContext.default);
+  const viewPort = (0, _ViewportProvider.useViewport)();
+  const hiddenLevels = (0, _helpers.default)([xs, sm, md, lg, xl]);
 
   const getHorizontalAlignLevel = () => {
     if (typeof horizontalAlign === 'object') {
-      return applyInheritance([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
+      return (0, _helpers.default)([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
     }
 
     if (typeof horizontalAlign === 'string') {
@@ -94,37 +120,37 @@ const Col = ({
     paddingRight: gutter ? 16 : 0
   };
   let hidingStyles = {};
-  const shown = Platform.OS === 'web' ? 'block' : 'flex';
+  const shown = _Platform.default.OS === 'web' ? 'block' : 'flex';
 
-  if (viewPort === viewports.xs) {
+  if (viewPort === _systemConstants.viewports.xs) {
     hidingStyles = {
       display: hiddenLevels[0] === 0 ? 'none' : shown,
       textAlign: horizontalAlignLevel[0]
     };
   }
 
-  if (viewPort === viewports.sm) {
+  if (viewPort === _systemConstants.viewports.sm) {
     hidingStyles = {
       display: hiddenLevels[1] === 0 ? 'none' : shown,
       textAlign: horizontalAlignLevel[1]
     };
   }
 
-  if (viewPort === viewports.md) {
+  if (viewPort === _systemConstants.viewports.md) {
     hidingStyles = {
       display: hiddenLevels[2] === 0 ? 'none' : shown,
       textAlign: horizontalAlignLevel[2]
     };
   }
 
-  if (viewPort === viewports.lg) {
+  if (viewPort === _systemConstants.viewports.lg) {
     hidingStyles = {
       display: hiddenLevels[3] === 0 ? 'none' : shown,
       textAlign: horizontalAlignLevel[3]
     };
   }
 
-  if (viewPort === viewports.xl) {
+  if (viewPort === _systemConstants.viewports.xl) {
     hidingStyles = {
       display: hiddenLevels[4] === 0 ? 'none' : shown,
       textAlign: horizontalAlignLevel[4]
@@ -133,8 +159,8 @@ const Col = ({
 
   const sizesArray = [xs, sm, md, lg, xl];
   const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset];
-  const sizesWithIheritance = applyInheritance(sizesArray);
-  const offsetsWithIheritance = applyInheritance(offSetsArray);
+  const sizesWithIheritance = (0, _helpers.default)(sizesArray);
+  const offsetsWithIheritance = (0, _helpers.default)(offSetsArray);
   const sizes = {
     xs: sizesWithIheritance[0],
     sm: sizesWithIheritance[1],
@@ -149,13 +175,17 @@ const Col = ({
     lg: offsetsWithIheritance[3],
     xl: offsetsWithIheritance[4]
   };
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, viewProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...viewProps,
     style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), { ...hidingStyles
-    }]
-  }), children);
-};
+    }],
+    children: children
+  });
+});
+Col.displayName = 'Col';
 
-const styles = StyleSheet.create({
+const styles = _StyleSheet.default.create({
   col: {
     flexGrow: 1,
     flexShrink: 0,
@@ -169,6 +199,7 @@ const styles = StyleSheet.create({
  * styling issues.
  */
 
+
 Col.propTypes = {
   /**
    * Specify number of columns within the 'xs' breakpoint range. `0` hides the column.
@@ -177,7 +208,7 @@ Col.propTypes = {
    * `false` disables the prop
    *
    */
-  xs: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
+  xs: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
 
   /**
    * Specify number of columns within the 'sm' breakpoint range. `0` hides the column.
@@ -186,7 +217,7 @@ Col.propTypes = {
    * `false` disables the prop
    *
    */
-  sm: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
+  sm: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
 
   /**
    * Specify number of columns within the 'md' breakpoint range. `0` hides the column.
@@ -195,7 +226,7 @@ Col.propTypes = {
    * `false` disables the prop
    *
    */
-  md: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
+  md: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
 
   /**
    * Specify number of columns within the 'lg' breakpoint range. `0` hides the column.
@@ -204,7 +235,7 @@ Col.propTypes = {
    * `false` disables the prop
    *
    */
-  lg: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
+  lg: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
 
   /**
    * Specify number of columns after the 'xl' breakpoint. `0` hides the column.
@@ -213,41 +244,41 @@ Col.propTypes = {
    * `false` disables the prop
    *
    */
-  xl: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
+  xl: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
 
   /**
    * Offset the specified number of columns within the 'xs' breakpoint range. `0` hides the column.
    *
    */
-  xsOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
+  xsOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
 
   /**
    * Offset the specified number of columns within the 'sm' breakpoint range.
    *
    */
-  smOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
+  smOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
 
   /**
    * Offset the specified number of columns within the 'md' breakpoint range.
    *
    */
-  mdOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
+  mdOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
 
   /**
    * Offset the specified number of columns within the 'lg' breakpoint range.
    *
    */
-  lgOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
+  lgOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
 
   /**
    * Offset the specified number of columns within the 'xl' breakpoint range.
    */
-  xlOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
+  xlOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
 
   /**
    * The columns of the Grid. Will typically be `FlexGrid.Col` components.
    */
-  children: PropTypes.node.isRequired,
+  children: _propTypes.default.node.isRequired,
 
   /**
    *
@@ -255,6 +286,7 @@ Col.propTypes = {
    *
    * Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
    */
-  horizontalAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['left', 'center', 'right']))
+  horizontalAlign: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right']))
 };
-export default Col;
+var _default = Col;
+exports.default = _default;

package/lib/FlexGrid/Col/index.js

@@ -1,2 +1,13 @@
-import Col from './Col';
-export default Col;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Col = _interopRequireDefault(require("./Col"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Col.default;
+exports.default = _default;

package/lib/FlexGrid/FlexGrid.js

@@ -1,17 +1,44 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, StyleSheet } from 'react-native';
-import { viewports } from '@telus-uds/system-constants';
-import Row from './Row';
-import Col from './Col';
-import { useViewport } from '../ViewportProvider';
-import GutterContext from './providers/GutterContext';
-import applyInheritance from './helpers';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _Row = _interopRequireDefault(require("./Row"));
+
+var _Col = _interopRequireDefault(require("./Col"));
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _GutterContext = _interopRequireDefault(require("./providers/GutterContext"));
+
+var _helpers = _interopRequireDefault(require("./helpers"));
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * A mobile-first flexbox grid.
  */
-
-const FlexGrid = ({
+const FlexGrid = /*#__PURE__*/(0, _react.forwardRef)(({
   limitWidth = true,
   gutter = true,
   outsideGutter = true,
@@ -20,106 +47,129 @@ const FlexGrid = ({
   mdReverse,
   lgReverse,
   xlReverse,
+  tag,
+  accessibilityRole,
   children,
   ...rest
-}) => {
-  const viewPort = useViewport();
-  const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+}, ref) => {
+  const viewPort = (0, _ViewportProvider.useViewport)();
+  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const marginVertical = 0;
   const marginHorizontal = outsideGutter ? 'auto' : -16;
   const width = outsideGutter ? '100%' : 'auto';
   let flexDirection;
   let maxWidth;
 
-  if (viewPort === viewports.xs) {
+  if (viewPort === _systemConstants.viewports.xs) {
     // no maxWidth for xs
     flexDirection = reverseLevel[0] ? 'column-reverse' : 'column';
   }
 
-  if (viewPort === viewports.sm) {
-    maxWidth = limitWidth && viewports.map.get(viewports.sm);
+  if (viewPort === _systemConstants.viewports.sm) {
+    maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.sm);
     flexDirection = reverseLevel[1] ? 'column-reverse' : 'column';
   }
 
-  if (viewPort === viewports.md) {
-    maxWidth = limitWidth && viewports.map.get(viewports.md);
+  if (viewPort === _systemConstants.viewports.md) {
+    maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.md);
     flexDirection = reverseLevel[2] ? 'column-reverse' : 'column';
   }
 
-  if (viewPort === viewports.lg) {
-    maxWidth = limitWidth && viewports.map.get(viewports.lg);
+  if (viewPort === _systemConstants.viewports.lg) {
+    maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.lg);
     flexDirection = reverseLevel[3] ? 'column-reverse' : 'column';
   }
 
-  if (viewPort === viewports.xl) {
-    maxWidth = limitWidth && viewports.map.get(viewports.xl);
+  if (viewPort === _systemConstants.viewports.xl) {
+    maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.xl);
     flexDirection = reverseLevel[4] ? 'column-reverse' : 'column';
   }
 
-  return /*#__PURE__*/React.createElement(GutterContext.Provider, {
-    value: gutter
-  }, /*#__PURE__*/React.createElement(View, Object.assign({}, rest, {
-    style: [styles.grid, {
-      marginHorizontal,
-      marginVertical,
-      width,
-      flexDirection,
-      maxWidth
-    }]
-  }), children));
-};
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
+    ..._utils.viewProps.select(rest)
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
+    value: gutter,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      ...props,
+      style: [styles.grid, {
+        marginHorizontal,
+        marginVertical,
+        width,
+        flexDirection,
+        maxWidth
+      }],
+      children: children
+    })
+  });
+});
+FlexGrid.displayName = 'FlexGrid';
 
-const styles = StyleSheet.create({
+const styles = _StyleSheet.default.create({
   grid: {
     flexWrap: 'wrap'
   }
 });
-FlexGrid.propTypes = {
+
+FlexGrid.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.types,
+
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.
    */
-  limitWidth: PropTypes.bool,
+  limitWidth: _propTypes.default.bool,
 
   /**
    * Whether or not to include gutters in between columns.
    */
-  gutter: PropTypes.bool,
+  gutter: _propTypes.default.bool,
 
   /**
    * Whether or not to include gutter at the ends to the left and right of the FlexGrid
    */
-  outsideGutter: PropTypes.bool,
+  outsideGutter: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xsReverse: PropTypes.bool,
+  xsReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  smReverse: PropTypes.bool,
+  smReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  mdReverse: PropTypes.bool,
+  mdReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  lgReverse: PropTypes.bool,
+  lgReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xlReverse: PropTypes.bool,
+  xlReverse: _propTypes.default.bool,
+
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
 
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */
-  children: PropTypes.node.isRequired
+  children: _propTypes.default.node.isRequired
 };
-FlexGrid.Row = Row;
-FlexGrid.Col = Col;
-export default FlexGrid;
+FlexGrid.Row = _Row.default;
+FlexGrid.Col = _Col.default;
+var _default = FlexGrid;
+exports.default = _default;