@telus-uds/components-base 3.29.1 → 4.0.0-alpha.1

package/lib/cjs/Fieldset/cssReset.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.cssReset = 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 = exports.default = {
+const cssReset = exports.cssReset = {
   margin: 'unset',
   padding: 'unset',
   float: 'unset',

package/lib/cjs/FileUpload/FileUpload.js

@@ -3,23 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FileUpload = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _InputLabel = _interopRequireDefault(require("../InputLabel"));
-var _Button = require("../Button");
-var _Notification = _interopRequireDefault(require("../Notification"));
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _NotificationContent = _interopRequireDefault(require("./NotificationContent"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useCopy = require("../utils/useCopy");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _convertFromMegaByteToByte = require("../utils/convertFromMegaByteToByte");
+var _InputLabel = require("../InputLabel/InputLabel");
+var _Button = require("../Button/Button");
+var _Notification = require("../Notification/Notification");
+var _Spacer = require("../Spacer/Spacer");
+var _StackView = require("../StackView/StackView");
+var _NotificationContent = require("./NotificationContent");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const getHintFromFileTypes = fileTypes => {
   const acceptedFileTypes = fileTypes.map(type => type.toUpperCase());
   return acceptedFileTypes.reduce((acc, curr, index) => {
@@ -88,7 +95,7 @@ const selectComponentTokens = (tokens, componentIdentifier) => {
  * @param {any} props.rest - Additional props to be spread to the component.
  * @returns {JSX.Element} The rendered FileUpload component.
  */
-const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const FileUpload = exports.FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     tokens,
     variant,
@@ -102,14 +109,14 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onUpload,
     onDelete,
     documentPicker,
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = _ref2;
   if (minFilesCount <= 0) {
     throw new Error('minFilesCount should be greater than 0');
   }
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('FileUpload', tokens, variant);
-  const getCopy = (0, _utils.useCopy)({
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('FileUpload', tokens, variant);
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary,
     copy
   });
@@ -136,12 +143,12 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const areFileSizesWithinLimit = files => {
     const invalidFiles = files.filter(file => {
       const fileSize = file.size;
-      return fileSize < (0, _utils.convertFromMegaByteToByte)(minFileSize) || fileSize > (0, _utils.convertFromMegaByteToByte)(maxFileSize);
+      return fileSize < (0, _convertFromMegaByteToByte.convertFromMegaByteToByte)(minFileSize) || fileSize > (0, _convertFromMegaByteToByte.convertFromMegaByteToByte)(maxFileSize);
     });
     if (invalidFiles.length > 0) {
       const invalidFile = invalidFiles[0];
       const fileSize = invalidFile.size;
-      if (fileSize < (0, _utils.convertFromMegaByteToByte)(minFileSize)) {
+      if (fileSize < (0, _convertFromMegaByteToByte.convertFromMegaByteToByte)(minFileSize)) {
         setFilesStatus([{
           description: getCopy('fileTooSmall').replace('%{size}', minFileSize),
           style: 'error'
@@ -179,7 +186,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       const currentFilesStatus = files.map((file, index) => {
         if (results[index].error) {
           return {
-            description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+            description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
               file: file,
               color: selectComponentTokens(themeTokens, 'notification').color,
               children: ` ${getCopy('uploadError')} ${results[index].error}.`
@@ -188,7 +195,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           };
         }
         return {
-          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
             file: file,
             color: selectComponentTokens(themeTokens, 'notification').color,
             children: ` ${getCopy('uploadSuccess')}`
@@ -212,7 +219,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       setFilesStatus(prevStatus => {
         const filteredFilesStatus = prevStatus.filter(f => f.file && f.file.name !== file.name);
         return result.error ? [...filteredFilesStatus, {
-          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
             file: file,
             color: selectComponentTokens(themeTokens, 'notification').color,
             children: ` ${getCopy('uploadSuccess')}`
@@ -221,7 +228,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           file,
           onDismiss: () => handleFileDeletion(file)
         }, {
-          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+          description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
             file: file,
             color: selectComponentTokens(themeTokens, 'notification').color,
             children: ` ${getCopy('deleteProblem')} ${result.error}.`
@@ -232,7 +239,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       });
     } catch (error) {
       setFilesStatus([{
-        description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.default, {
+        description: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationContent.NotificationContent, {
           file: file,
           color: selectComponentTokens(themeTokens, 'notification').color,
           children: ` ${getCopy('problemDeleting')}`
@@ -280,11 +287,11 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.InputLabel, {
       label: getCopy('label'),
       hint: fileTypes && getCopy('allowedFileTypes').replace('%{fileTypes}', getHintFromFileTypes(fileTypes)),
       hintPosition: "below"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
       space: 4
     }), _Platform.default.OS === 'web' && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "file",
@@ -298,9 +305,9 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       tokens: selectComponentTokens(themeTokens, 'button'),
       children: getCopy('buttonLabel')
     }), filesStatus.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.Spacer, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackView, {
         space: 4,
         children: filesStatus.map((_ref3, index) => {
           let {
@@ -308,7 +315,7 @@ const FileUpload = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
             style,
             onDismiss
           } = _ref3;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.Notification, {
             variant: {
               style
             },
@@ -346,12 +353,12 @@ const dictionaryEntryShape = _propTypes.default.shape({
 });
 FileUpload.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('FileUpload'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('FileUpload'),
+  variant: _variantProp.variantProp.propType,
   /**
    * To define the locale of the copy
    */
-  copy: _utils.copyPropTypes,
+  copy: _copyPropTypes.copyPropTypes,
   /**
    * The file types allowed for upload. Example: fileTypes={['pdf', 'docx']}.
    */
@@ -395,5 +402,4 @@ FileUpload.propTypes = {
     en: dictionaryEntryShape,
     fr: dictionaryEntryShape
   })
-};
-var _default = exports.default = FileUpload;
+};

package/lib/cjs/FileUpload/NotificationContent.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.NotificationContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _Typography = require("../Typography/Typography");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -19,18 +19,19 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * @param {string} props.color - The color of the typography.
  * @param {React.Ref} ref - The ref to be forwarded to the Typography component.
  * @returns {JSX.Element} The rendered NotificationContent component.
- */const NotificationContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const NotificationContent = exports.NotificationContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     file,
     color,
     children
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.Typography, {
     tokens: {
       color
     },
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
       variant: {
         bold: true
       },
@@ -55,5 +56,4 @@ NotificationContent.propTypes = {
    * The color of the typography.
    */
   color: _propTypes.default.string
-};
-var _default = exports.default = NotificationContent;
+};

package/lib/cjs/FileUpload/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     label: 'Upload files',
     buttonLabel: 'Choose files',

package/lib/cjs/FlexGrid/FlexGrid.js

@@ -3,21 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FlexGrid = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _systemConstants = require("@telus-uds/system-constants");
-var _utils = require("../utils");
-var _resolveContentMaxWidth = _interopRequireDefault(require("../utils/resolveContentMaxWidth"));
-var _Row = _interopRequireDefault(require("./Row"));
-var _Col = _interopRequireDefault(require("./Col"));
-var _GutterContext = _interopRequireDefault(require("./providers/GutterContext"));
-var _helpers = _interopRequireDefault(require("./helpers"));
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _a11yProps = require("../utils/props/a11yProps");
+var _viewProps = require("../utils/props/viewProps");
+var _semantics = require("../utils/a11y/semantics");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _BaseView = require("../utils/BaseView/BaseView");
+var _ssrMediaQuery = require("../utils/ssr-media-query/ssr-media-query");
+var _useResponsiveProp = require("../utils/useResponsiveProp");
+var _resolveContentMaxWidth = require("../utils/resolveContentMaxWidth");
+var _GutterContext = require("./providers/GutterContext");
+var _helpers = require("./helpers");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useViewport = require("../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 /**
  * Calculates the maximum width for a given viewport based on limitWidth and contentMaxWidth settings.
@@ -45,7 +49,7 @@ const getMaxWidthForViewport = (viewportKey, limitWidth, contentWidthProp, maxWi
  * A mobile-first flexbox grid.
  */
 
-const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FlexGrid = exports.FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     limitWidth = true,
     gutter = true,
@@ -63,22 +67,22 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     contentMinWidth,
     ...rest
   } = _ref;
-  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const reverseLevel = (0, _helpers.applyInheritance)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions,
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   let flexgridStyles;
   let mediaIds;
 
   // Support both contentMaxWidth and deprecated contentMinWidth for backwards compatibility
   const contentWidthProp = contentMaxWidth || contentMinWidth;
-  const contentWidthValue = (0, _utils.useResponsiveProp)(contentWidthProp);
-  const responsiveWidth = (0, _utils.useResponsiveProp)(themeOptions?.contentMaxWidth);
-  const maxWidth = (0, _resolveContentMaxWidth.default)(contentWidthValue, responsiveWidth);
+  const contentWidthValue = (0, _useResponsiveProp.useResponsiveProp)(contentWidthProp);
+  const responsiveWidth = (0, _useResponsiveProp.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const maxWidth = (0, _resolveContentMaxWidth.resolveContentMaxWidth)(contentWidthValue, responsiveWidth);
   const stylesByViewport = {
     xs: {
       maxWidth: getMaxWidthForViewport('xs', limitWidth, contentWidthProp, maxWidth),
@@ -103,16 +107,17 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   };
   const staticStyles = {
     flexWrap: 'wrap',
+    alignContent: 'stretch',
     width: outsideGutter ? '100%' : 'auto',
     marginVertical: 0,
     marginHorizontal: outsideGutter ? 'auto' : -16
   };
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       flexgrid: {
         ...staticStyles,
         ...mediaQueryStyles
@@ -128,16 +133,16 @@ const FlexGrid = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }
   const props = {
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectProps(rest)
   };
   const dataSetValue = mediaIds ? {
     media: mediaIds,
     ...dataSet
   } : dataSet;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.GutterContext.Provider, {
     value: gutter,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseView.BaseView, {
       ref: ref,
       ...props,
       style: flexgridStyles,
@@ -187,9 +192,9 @@ FlexGrid.propTypes = {
    * 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),
+  tag: _propTypes.default.oneOf(_semantics.layoutTags),
   /**
-   * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
+   * The rows and columns of the Grid. Will typically be `FlexGridRow` and `FlexGridCol` components.
    */
   children: _propTypes.default.node.isRequired,
   /**
@@ -223,7 +228,4 @@ FlexGrid.propTypes = {
     sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
     xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number])
   })
-};
-FlexGrid.Row = _Row.default;
-FlexGrid.Col = _Col.default;
-var _default = exports.default = FlexGrid;
+};

package/lib/cjs/FlexGrid/{Col/Col.js → FlexGridCol/FlexGridCol.js}

@@ -3,18 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FlexGridCol = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _GutterContext = _interopRequireDefault(require("../providers/GutterContext"));
-var _helpers = _interopRequireDefault(require("../helpers"));
-var _utils = require("../../utils");
-var _ViewportProvider = require("../../ViewportProvider");
-var _ThemeProvider = require("../../ThemeProvider");
+var _GutterContext = require("../providers/GutterContext");
+var _helpers = require("../helpers");
+var _responsiveProps = require("../../utils/props/responsiveProps");
+var _BaseView = require("../../utils/BaseView/BaseView");
+var _ssrMediaQuery = require("../../utils/ssr-media-query/ssr-media-query");
+var _useViewport = require("../../ViewportProvider/useViewport");
+var _useTheme = require("../../ThemeProvider/useTheme");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FlexGridCol = exports.FlexGridCol = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     children,
@@ -31,17 +33,17 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     flex,
     ...viewProps
   } = _ref;
-  const gutter = _react.default.useContext(_GutterContext.default);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const gutter = _react.default.useContext(_GutterContext.GutterContext);
+  const viewport = (0, _useViewport.useViewport)();
   const {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
-  const hiddenLevels = (0, _helpers.default)([xs, sm, md, lg, xl]);
+  } = (0, _useTheme.useTheme)();
+  const hiddenLevels = (0, _helpers.applyInheritance)([xs, sm, md, lg, xl]);
   const getHorizontalAlignLevel = () => {
     if (typeof horizontalAlign === 'object') {
-      return (0, _helpers.default)([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
+      return (0, _helpers.applyInheritance)([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
     }
     if (typeof horizontalAlign === 'string') {
       return [horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign];
@@ -85,8 +87,8 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const shown = !flex && _Platform.default.OS === 'web' ? 'block' : 'flex';
   const sizesArray = [xs, sm, md, lg, xl];
   const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset];
-  const sizesWithIheritance = (0, _helpers.default)(sizesArray);
-  const offsetsWithIheritance = (0, _helpers.default)(offSetsArray);
+  const sizesWithIheritance = (0, _helpers.applyInheritance)(sizesArray);
+  const offsetsWithIheritance = (0, _helpers.applyInheritance)(offSetsArray);
   const sizes = {
     xs: sizesWithIheritance[0],
     sm: sizesWithIheritance[1],
@@ -144,11 +146,11 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let colStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       col: {
         ...staticStyles,
         ...mediaQueryStyles
@@ -162,7 +164,7 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...stylesByViewport[viewport]
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseView.BaseView, {
     ref: ref,
     ...viewProps,
     style: colStyles,
@@ -172,14 +174,14 @@ const Col = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Col.displayName = 'Col';
+FlexGridCol.displayName = 'FlexGridCol';
 
 /*
  * We're disabling default props since passing undefined props to
  * the react-flexbox-grid component sets up blank classes that may cause
  * styling issues.
  */
-Col.propTypes = {
+FlexGridCol.propTypes = {
   /**
    * Specify number of columns within the 'xs' breakpoint range. `0` hides the column.
    *
@@ -245,7 +247,7 @@ Col.propTypes = {
    */
   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.
+   * The columns of the Grid. Will typically be `FlexGridCol` components.
    */
   children: _propTypes.default.node.isRequired,
   /**
@@ -254,11 +256,10 @@ Col.propTypes = {
    *
    * Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
    */
-  horizontalAlign: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right'])),
+  horizontalAlign: _responsiveProps.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right'])),
   /**
    * (web only) Stretches the column to fill vertical space using `display: flex`.
-   * In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
+   * In native apps, FlexGridCol behaves as if this is always true (as do all `View`s).
    */
   flex: _propTypes.default.bool
-};
-var _default = exports.default = Col;
+};

package/lib/cjs/FlexGrid/{Row/Row.js → FlexGridRow/FlexGridRow.js}

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FlexGridRow = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _helpers = _interopRequireDefault(require("../helpers"));
-var _utils = require("../../utils");
-var _ThemeProvider = require("../../ThemeProvider");
-var _ViewportProvider = require("../../ViewportProvider");
+var _helpers = require("../helpers");
+var _BaseView = require("../../utils/BaseView/BaseView");
+var _ssrMediaQuery = require("../../utils/ssr-media-query/ssr-media-query");
+var _useTheme = require("../../ThemeProvider/useTheme");
+var _useViewport = require("../../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const horizontalAlignStyles = horizontalAlign => {
@@ -65,7 +66,7 @@ const distributeStyles = distribute => {
       return {};
   }
 };
-const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const FlexGridRow = exports.FlexGridRow = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     horizontalAlign,
     verticalAlign,
@@ -82,8 +83,8 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     themeOptions: {
       enableMediaQueryStyleSheet
     }
-  } = (0, _ThemeProvider.useTheme)();
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = (0, _useTheme.useTheme)();
+  const viewport = (0, _useViewport.useViewport)();
   const staticStyles = {
     width: '100%',
     marginVertical: 0,
@@ -95,7 +96,7 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...verticalAlignStyles(verticalAlign),
     ...distributeStyles(distribute)
   };
-  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+  const reverseLevel = (0, _helpers.applyInheritance)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   const stylesByViewport = {
     xs: {
       flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
@@ -121,11 +122,11 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let rowStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const mediaQueryStyles = (0, _utils.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _ssrMediaQuery.createMediaQueryStyles)(stylesByViewport);
     const {
       ids,
       styles
-    } = _utils.StyleSheet.create({
+    } = _ssrMediaQuery.StyleSheet.create({
       row: {
         ...staticStyles,
         ...mediaQueryStyles
@@ -139,7 +140,7 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...stylesByViewport[viewport]
     };
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseView.BaseView, {
     ref: ref,
     ...rest,
     style: rowStyles,
@@ -149,8 +150,8 @@ const Row = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Row.displayName = 'Row';
-Row.propTypes = {
+FlexGridRow.displayName = 'FlexGridRow';
+FlexGridRow.propTypes = {
   /**
    * Align columns horizontally within their row.
    */
@@ -184,5 +185,4 @@ Row.propTypes = {
    */
   xlReverse: _propTypes.default.bool,
   children: _propTypes.default.node.isRequired
-};
-var _default = exports.default = Row;
+};

package/lib/cjs/FlexGrid/helpers/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.applyInheritance = void 0;
 const applyInheritance = sizes => {
   let prevSize;
   return sizes.map((size, index) => {
@@ -18,4 +18,4 @@ const applyInheritance = sizes => {
     return undefined;
   });
 };
-var _default = exports.default = applyInheritance;
+exports.applyInheritance = applyInheritance;

package/lib/cjs/FlexGrid/providers/GutterContext.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.GutterContext = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const GutterContext = /*#__PURE__*/_react.default.createContext(false);
-var _default = exports.default = GutterContext;
+const GutterContext = exports.GutterContext = /*#__PURE__*/_react.default.createContext(false);