@telus-uds/components-base 1.72.0 → 1.73.0

package/lib/ThemeProvider/ThemeProvider.js

@@ -27,7 +27,8 @@ const defaultThemeOptions = {
   // TODO: switch `forceZIndex` to be false by default in the next major version
   forceZIndex: true,
   // TODO: switch `enableHelmetSSR` to be false by default in the next major version
-  enableHelmetSSR: true
+  enableHelmetSSR: true,
+  enableMediaQueryStyleSheet: false
 };
 const ThemeProvider = _ref => {
   let {
@@ -82,12 +83,14 @@ ThemeProvider.propTypes = {
    * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
    *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
    *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
+   * - `enableMediaQueryStyleSheet`: enables the use of Media Query StyleSheet.
    */
   themeOptions: _propTypes.default.shape({
     forceAbsoluteFontSizing: _propTypes.default.bool,
     forceZIndex: _propTypes.default.bool,
     enableHelmetSSR: _propTypes.default.bool,
-    contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number)
+    contentMaxWidth: _responsiveProps.default.getTypeOptionallyByViewport(_propTypes.default.number),
+    enableMediaQueryStyleSheet: _propTypes.default.bool
   })
 };
 var _default = ThemeProvider;

package/lib/ThemeProvider/index.js

@@ -5,9 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   useTheme: true,
-  useSetTheme: true
+  useSetTheme: true,
+  useResponsiveThemeTokens: true
 };
 exports.default = void 0;
+Object.defineProperty(exports, "useResponsiveThemeTokens", {
+  enumerable: true,
+  get: function () {
+    return _useResponsiveThemeTokens.default;
+  }
+});
 Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
@@ -23,6 +30,7 @@ Object.defineProperty(exports, "useTheme", {
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
+var _useResponsiveThemeTokens = _interopRequireDefault(require("./useResponsiveThemeTokens"));
 var _useThemeTokens = require("./useThemeTokens");
 Object.keys(_useThemeTokens).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/ThemeProvider/useResponsiveThemeTokens.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _systemConstants = require("@telus-uds/system-constants");
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const getResponsiveThemeTokens = function (_ref, tokensProp) {
+  let {
+    rules = [],
+    tokens: defaultThemeTokens = {}
+  } = _ref;
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 ? arguments[3] : undefined;
+  const appearances = (0, _utils.mergeAppearances)(variants, states);
+  const tokensByViewport = Object.fromEntries(_systemConstants.viewports.keys.map(viewport => [viewport, {
+    ...defaultThemeTokens
+  }]));
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach(rule => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || _systemConstants.viewports.keys;
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports];
+      }
+      targetViewports.forEach(viewport => {
+        tokensByViewport[viewport] = {
+          ...tokensByViewport[viewport],
+          ...rule.tokens
+        };
+      });
+    }
+  });
+  Object.keys(tokensByViewport).forEach(viewport => {
+    tokensByViewport[viewport] = (0, _utils.resolveThemeTokens)(tokensByViewport[viewport], appearances, tokensProp);
+  });
+  return tokensByViewport;
+};
+const doesRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesConditionApply(condition, appearances));
+const doesConditionApply = (_ref2, appearances) => {
+  let [key, value] = _ref2;
+  if (key === 'viewport') {
+    return true;
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null;
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
+};
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ *
+ * Returns a complete set of tokens for a component for each viewport based on which of the
+ * component's theme rules apply to the current set of theme appearances.
+ * Pass the returned output to createMediaQueryStyles to generate media query styles for use inside
+ * the media query stylesheet from './utils/ssr-media-query'.
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param { string } componentName
+ * @param { TokensProp } tokens
+ * @param { AppearanceSet } variants
+ * @param { AppearanceSet } states
+ * @returns { ResponsiveObject }
+ */
+
+const useResponsiveThemeTokens = function (componentName) {
+  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let states = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  const theme = (0, _useTheme.default)();
+  const componentTheme = (0, _utils.getComponentTheme)(theme, componentName);
+  const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states);
+  return themeTokens;
+};
+var _default = useResponsiveThemeTokens;
+exports.default = _default;

package/lib/Typography/Typography.js

@@ -9,9 +9,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
 var _utils = require("../ThemeProvider/utils");
 var _utils2 = require("../utils");
+var _ViewportProvider = require("../ViewportProvider");
 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); }
@@ -29,7 +29,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     fontName,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine
   } = _ref;
   return (0, _utils.applyTextStyles)({
     fontWeight,
@@ -40,7 +41,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     themeOptions,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine
   });
 };
 
@@ -60,23 +62,48 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...rest
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const {
-    superScriptFontSize,
-    ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
-    viewport
-  });
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Typography', tokens, variant);
+  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? (0, _utils2.getMaxFontMultiplier)(themeTokens[viewport]) : (0, _utils2.getMaxFontMultiplier)(themeTokens);
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  let textStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref3) => {
+      let [vp, viewportTokens] = _ref3;
+      acc[vp] = selectTextStyles({
+        textAlign: align,
+        textDecorationLine,
+        ...viewportTokens
+      }, themeOptions);
+      return acc;
+    }, {});
+    const mediaQueryStyles = (0, _utils2.createMediaQueryStyles)(transformedThemeTokens);
+    const {
+      ids,
+      styles
+    } = _utils2.StyleSheet.create({
+      text: mediaQueryStyles
+    });
+    textStyles = styles.text;
+    mediaIds = ids.text;
+  } else {
+    textStyles = selectTextStyles({
+      textAlign: align,
+      textDecorationLine,
+      ...themeTokens
+    }, themeOptions);
+  }
   const resolvedTextProps = {
     ...selectTextProps(rest),
-    style: selectTextStyles(align ? {
-      ...themeTokens,
-      textAlign: align
-    } : themeTokens, themeOptions),
     dataSet,
-    maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
+    maxFontSizeMultiplier
   };
   const containerProps = {
     accessibilityRole,
@@ -87,7 +114,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
       var _child$props;
       const childStyles = (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
-      const supFontSize = childStyles.fontSize ?? superScriptFontSize;
+      const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
       const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(child, {
         style: {
           ...childStyles,
@@ -107,19 +134,15 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
-  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
-  const textStyles = resolvedTextProps.style ? {
-    ...resolvedTextProps.style,
-    textDecorationLine
-  } : {
-    textDecorationLine
-  };
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       ...resolvedTextProps,
       style: textStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
@@ -127,6 +150,9 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
+    dataSet: mediaIds && {
+      media: mediaIds
+    },
     children: sanitizeChildren(children)
   });
 });

package/lib/server.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getComponentTheme", {
+  enumerable: true,
+  get: function () {
+    return _themeTokens.getComponentTheme;
+  }
+});
+Object.defineProperty(exports, "getThemeTokens", {
+  enumerable: true,
+  get: function () {
+    return _themeTokens.getThemeTokens;
+  }
+});
+Object.defineProperty(exports, "getTokensPropType", {
+  enumerable: true,
+  get: function () {
+    return _tokens.getTokensPropType;
+  }
+});
+Object.defineProperty(exports, "htmlAttrs", {
+  enumerable: true,
+  get: function () {
+    return _htmlAttrs.default;
+  }
+});
+Object.defineProperty(exports, "selectSystemProps", {
+  enumerable: true,
+  get: function () {
+    return _selectSystemProps.default;
+  }
+});
+var _selectSystemProps = _interopRequireDefault(require("./utils/props/selectSystemProps"));
+var _tokens = require("./utils/props/tokens");
+var _htmlAttrs = _interopRequireDefault(require("./utils/htmlAttrs"));
+var _themeTokens = require("./ThemeProvider/utils/theme-tokens");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -5,20 +5,53 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _systemConstants = require("@telus-uds/system-constants");
+const inherit = _ref => {
+  let {
+    xs,
+    sm = xs,
+    md = sm,
+    lg = md,
+    xl = lg
+  } = _ref;
+  return {
+    xs,
+    sm,
+    md,
+    lg,
+    xl
+  };
+};
+
 /**
  * @typedef { Object } CssStyles
- * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ */
+
+/**
+ * @typedef { Object } ViewportStyles
+ * @property { CssStyles } xs - The CSS styles for the "xs" viewport (required).
+ * @property { CssStyles } [sm] - Optional styles for the "sm" viewport. Inherits from "xs" if not specified.
+ * @property { CssStyles } [md] - Optional styles for the "md" viewport. Inherits from "sm" if not specified.
+ * @property { CssStyles } [lg] - Optional styles for the "lg" viewport. Inherits from "md" if not specified.
+ * @property { CssStyles } [xl] - Optional styles for the "xl" viewport. Inherits from "lg" if not specified.
+ */
+
+/**
  * @typedef { Record<String, CssStyles> } MediaQueryStyles
  */
+
 /**
  * Generates media query styles based on specified viewport styles.
- * @param {ViewportStyles} viewportStyles
- * @returns { MediaQueryStyles }
+ * @param { Object } viewportStyles - The styles for different viewports.
+ * @param { boolean } [shouldInherit=true] - Flag indicating whether to inherit styles.
+ * @returns { Object } - The media query styles.
  */
+
 function createMediaQueryStyles(viewportStyles) {
-  const viewportsArray = Object.keys(viewportStyles);
-  const mediaQueries = Object.entries(viewportStyles).reduce((acc, _ref) => {
-    let [viewport, styles] = _ref;
+  let shouldInherit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles;
+  const viewportsArray = _systemConstants.viewports.keys;
+  const mediaQueries = Object.entries(effectiveStyles).reduce((acc, _ref2) => {
+    let [viewport, styles] = _ref2;
     const minWidth = _systemConstants.viewports.map.get(viewport);
     const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
     const maxWidth = _systemConstants.viewports.map.get(nextViewport);

package/lib-module/Box/Box.js

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import ScrollView from "react-native-web/dist/exports/ScrollView";
+import Platform from "react-native-web/dist/exports/Platform";
 import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, selectSystemProps, spacingProps, useSpacingScale, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,7 +15,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = _ref => {
+const selectBoxStyles = (_ref, customGradient) => {
   let {
     backgroundColor,
     gradient,
@@ -40,7 +41,11 @@ const selectBoxStyles = _ref => {
       angle,
       stops: [stopOne, stopTwo]
     } = gradient;
-    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`;
+    if (Platform.OS === 'web') {
+      styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`;
+    } else if (customGradient && Platform.OS !== 'web') {
+      styles.colors = [stopOne.color, stopTwo.color];
+    }
   }
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'];
   // Only set on styles if token provided because we spread this object after the spacing scale values
@@ -135,6 +140,7 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     accessibilityRole,
     testID,
     dataSet,
+    customGradient,
     ...rest
   } = _ref2;
   const props = {
@@ -149,8 +155,9 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     paddingRight: useSpacingScale(right),
     paddingTop: useSpacingScale(top),
     paddingBottom: useSpacingScale(bottom),
-    ...selectBoxStyles(themeTokens)
+    ...selectBoxStyles(themeTokens, customGradient)
   };
+  const childrenToRender = typeof customGradient === 'function' ? customGradient(styles.colors, styles)(children) : children;
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
@@ -160,7 +167,7 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
       testID: testID,
       dataSet: dataSet,
       ref: ref,
-      children: children
+      children: childrenToRender
     });
   }
   return /*#__PURE__*/_jsx(View, {
@@ -169,7 +176,7 @@ const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
     testID: testID,
     dataSet: dataSet,
     ref: ref,
-    children: children
+    children: childrenToRender
   });
 });
 Box.displayName = 'Box';
@@ -253,6 +260,10 @@ Box.propTypes = {
   /**
    * Box accepts any content as children.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+  Use this prop if need to add a custom gradient for mobile
+  */
+  customGradient: PropTypes.func
 };
 export default Box;

package/lib-module/FlexGrid/Col/Col.js

@@ -4,6 +4,8 @@ import Platform from "react-native-web/dist/exports/Platform";
 import GutterContext from '../providers/GutterContext';
 import applyInheritance from '../helpers';
 import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
+import { useViewport } from '../../ViewportProvider';
+import { useTheme } from '../../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -23,6 +25,12 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...viewProps
   } = _ref;
   const gutter = useContext(GutterContext);
+  const viewport = useViewport();
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
   const hiddenLevels = applyInheritance([xs, sm, md, lg, xl]);
   const getHorizontalAlignLevel = () => {
     if (typeof horizontalAlign === 'object') {
@@ -86,7 +94,15 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
     lg: offsetsWithIheritance[3],
     xl: offsetsWithIheritance[4]
   };
-  const mediaQueryStyles = createMediaQueryStyles({
+  const staticStyles = {
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    maxWidth: '100%',
+    paddingLeft: gutter ? 16 : 0,
+    paddingRight: gutter ? 16 : 0
+  };
+  const stylesByViewport = {
     xs: {
       display: hiddenLevels[0] === 0 ? 'none' : shown,
       textAlign: horizontalAlignLevel[0],
@@ -117,27 +133,34 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
       ...calculateWidth(sizes.xl),
       ...calculateOffset(offsets.xl)
     }
-  });
-  const {
-    ids,
-    styles
-  } = StyleSheet.create({
-    col: {
-      flexGrow: 1,
-      flexShrink: 0,
-      flexBasis: 'auto',
-      maxWidth: '100%',
-      paddingLeft: gutter ? 16 : 0,
-      paddingRight: gutter ? 16 : 0,
-      ...mediaQueryStyles
-    }
-  });
+  };
+  let colStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      col: {
+        ...staticStyles,
+        ...mediaQueryStyles
+      }
+    });
+    colStyles = styles.col;
+    mediaIds = ids.col;
+  } else {
+    colStyles = {
+      ...staticStyles,
+      ...stylesByViewport[viewport]
+    };
+  }
   return /*#__PURE__*/_jsx(BaseView, {
     ref: ref,
     ...viewProps,
-    style: [styles.col],
-    dataSet: {
-      media: ids.col
+    style: colStyles,
+    dataSet: mediaIds && {
+      media: mediaIds
     },
     children: children
   });

package/lib-module/FlexGrid/FlexGrid.js

@@ -6,6 +6,8 @@ import Row from './Row';
 import Col from './Col';
 import GutterContext from './providers/GutterContext';
 import applyInheritance from './helpers';
+import { useTheme } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -29,7 +31,15 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
-  const mediaQueryStyles = createMediaQueryStyles({
+  const viewport = useViewport();
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  let flexgridStyles;
+  let mediaIds;
+  const stylesByViewport = {
     xs: {
       flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
     },
@@ -49,19 +59,32 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
       maxWidth: limitWidth && viewports.map.get('xl'),
       flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
     }
-  });
-  const {
-    ids,
-    styles
-  } = StyleSheet.create({
-    flexgrid: {
-      flexWrap: 'wrap',
-      width: outsideGutter ? '100%' : 'auto',
-      marginVertical: 0,
-      marginHorizontal: outsideGutter ? 'auto' : -16,
-      ...mediaQueryStyles
-    }
-  });
+  };
+  const staticStyles = {
+    flexWrap: 'wrap',
+    width: outsideGutter ? '100%' : 'auto',
+    marginVertical: 0,
+    marginHorizontal: outsideGutter ? 'auto' : -16
+  };
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      flexgrid: {
+        ...staticStyles,
+        ...mediaQueryStyles
+      }
+    });
+    flexgridStyles = styles.flexgrid;
+    mediaIds = ids.flexgrid;
+  } else {
+    flexgridStyles = {
+      ...staticStyles,
+      ...stylesByViewport[viewport]
+    };
+  }
   const props = {
     accessibilityRole,
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
@@ -72,9 +95,9 @@ const FlexGrid = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: /*#__PURE__*/_jsx(BaseView, {
       ref: ref,
       ...props,
-      style: [styles.flexgrid],
-      dataSet: {
-        media: ids.flexgrid
+      style: flexgridStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
       },
       children: children
     })