@telus-uds/components-base 1.69.0 → 1.71.0

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _inject = require("./utils/inject");
+var _createDeclarationBlock = _interopRequireDefault(require("./utils/create-declaration-block"));
+var _hash = _interopRequireDefault(require("./hash"));
+var _common = require("./utils/common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let cleanStyles;
+  let ids = {};
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
+    if (_Platform.default.OS === 'web') {
+      cleanStyles = (0, _common.deepClone)(stylesWithQuery);
+      mediaQueriesAndPseudoClasses.forEach(query => {
+        var _ids;
+        const css = (0, _createDeclarationBlock.default)(stylesWithQuery[key][query]);
+        const stringHash = `rnmq-${(0, _hash.default)(`${key}${query}${css}`)}`;
+        const rule = (0, _common.createCssRule)(query, stringHash, css);
+        (0, _inject.addCss)(`${stringHash}`, rule);
+        delete cleanStyles[key][query];
+        ids = {
+          ...ids,
+          [key]: `${(_ids = ids) !== null && _ids !== void 0 && _ids[key] ? `${ids[key]} ` : ''}${stringHash}`
+        };
+      });
+    } else {
+      cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
+      mediaQueriesAndPseudoClasses.forEach(str => {
+        if ((0, _common.isMedia)(str)) {
+          const mqStr = str.replace('@media', '');
+          const {
+            width,
+            height
+          } = _Dimensions.default.get('window');
+          const isMatchingMediaQuery = _cssMediaquery.default.match(mqStr, {
+            width,
+            height,
+            orientation: width > height ? 'landscape' : 'portrait',
+            'aspect-ratio': width / height
+          });
+          if (isMatchingMediaQuery) {
+            cleanStyles = {
+              ...cleanStyles,
+              [key]: {
+                ...cleanStyles[key],
+                ...stylesWithQuery[key][str]
+              }
+            };
+          }
+        }
+        delete cleanStyles[key][str];
+      });
+    }
+  });
+  return {
+    ids,
+    styles: cleanStyles,
+    fullStyles: stylesWithQuery
+  };
+};
+var _default = createStyleSheet;
+exports.default = _default;

package/lib/utils/ssr-media-query/hash.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = hash;
+/* eslint-disable no-bitwise */
+function hash(text) {
+  if (!text) {
+    return '';
+  }
+  let hashValue = 5381;
+  let index = text.length - 1;
+  while (index) {
+    hashValue = hashValue * 33 ^ text.charCodeAt(index);
+    index -= 1;
+  }
+  return (hashValue >>> 0).toString(16);
+}

package/lib/utils/ssr-media-query/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyleSheet = void 0;
+Object.defineProperty(exports, "createMediaQueryStyles", {
+  enumerable: true,
+  get: function () {
+    return _createMediaQueryStyles.default;
+  }
+});
+var _createStylesheet = _interopRequireDefault(require("./create-stylesheet"));
+var _createMediaQueryStyles = _interopRequireDefault(require("./utils/create-media-query-styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyleSheet = {
+  create: _createStylesheet.default
+};
+exports.StyleSheet = StyleSheet;

package/lib/utils/ssr-media-query/utils/common.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPseudo = exports.isMediaOrPseudo = exports.isMedia = exports.deepClone = exports.createCssRule = void 0;
+const isMedia = query => query.indexOf('@media') === 0;
+exports.isMedia = isMedia;
+const isPseudo = query => query.indexOf(':') === 0;
+exports.isPseudo = isPseudo;
+const isMediaOrPseudo = query => isMedia(query) || isPseudo(query);
+exports.isMediaOrPseudo = isMediaOrPseudo;
+const deepClone = obj => JSON.parse(JSON.stringify(obj));
+exports.deepClone = deepClone;
+const createCssRule = (query, stringHash, css) => {
+  let rule;
+  const dataMediaSelector = `[data-media~="${stringHash}"]`;
+  if (isMedia(query)) {
+    rule = `${query} {${dataMediaSelector} ${css}}`;
+  } else {
+    rule = `${dataMediaSelector}${query} ${css}`;
+  }
+  return rule;
+};
+exports.createCssRule = createCssRule;

package/lib/utils/ssr-media-query/utils/create-declaration-block.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createReactDOMStyle = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle"));
+var _prefixStyles = _interopRequireDefault(require("react-native-web/dist/cjs/modules/prefixStyles"));
+var _hyphenateStyleName = _interopRequireDefault(require("./hyphenate-style-name"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const createDeclarationBlock = style => {
+  const domStyle = (0, _prefixStyles.default)((0, _createReactDOMStyle.default)(style));
+  const declarationsString = Object.keys(domStyle).map(property => {
+    const value = domStyle[property];
+    const prop = (0, _hyphenateStyleName.default)(property);
+    if (Array.isArray(value)) {
+      return value.map(v => `${prop}:${v}`).join(';');
+    }
+    return `${prop}:${value} !important`;
+  }).sort().join(';');
+  return `{${declarationsString};}`;
+};
+var _default = createDeclarationBlock;
+exports.default = _default;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _systemConstants = require("@telus-uds/system-constants");
+/**
+ * @typedef { Object } CssStyles
+ * @typedef { Record<"xs" | "sm" | "md" | "lg" | "xl", CssStyles> } ViewportStyles
+ * @typedef { Record<String, CssStyles> } MediaQueryStyles
+ */
+/**
+ * Generates media query styles based on specified viewport styles.
+ * @param {ViewportStyles} viewportStyles
+ * @returns { MediaQueryStyles }
+ */
+function createMediaQueryStyles(viewportStyles) {
+  const viewportsArray = Object.keys(viewportStyles);
+  const mediaQueries = Object.entries(viewportStyles).reduce((acc, _ref) => {
+    let [viewport, styles] = _ref;
+    const minWidth = _systemConstants.viewports.map.get(viewport);
+    const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
+    const maxWidth = _systemConstants.viewports.map.get(nextViewport);
+    const mediaQuery = `@media (min-width: ${minWidth}px)${maxWidth ? ` and (max-width: ${maxWidth}px)` : ''}`;
+    return {
+      ...acc,
+      [mediaQuery]: styles
+    };
+  }, {});
+  return mediaQueries;
+}
+var _default = createMediaQueryStyles;
+exports.default = _default;

package/lib/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache = {};
+const toHyphenLower = match => `-${match.toLowerCase()}`;
+const hyphenateStyleName = name => {
+  if (Object.prototype.hasOwnProperty.call(cache, name)) {
+    return cache[name];
+  }
+  const hName = name.replace(uppercasePattern, toHyphenLower);
+  return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
+};
+var _default = hyphenateStyleName;
+exports.default = _default;

package/lib/utils/ssr-media-query/utils/inject.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasCss = exports.flush = exports.addCss = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const rules = {};
+let styleSheet;
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  styleSheet = (() => {
+    const style = document.createElement('style');
+    style.id = 'RNMQCSS';
+    style.appendChild(document.createTextNode(''));
+    document.head.appendChild(style);
+    return style.sheet;
+  })();
+}
+const hasCss = (id, text) => {
+  var _rules$id$text, _rules$id$text$includ;
+  return !!rules[id] && !!((_rules$id$text = rules[id].text) !== null && _rules$id$text !== void 0 && (_rules$id$text$includ = _rules$id$text.includes) !== null && _rules$id$text$includ !== void 0 && _rules$id$text$includ.call(_rules$id$text, text));
+};
+exports.hasCss = hasCss;
+const addCss = (id, text) => {
+  if (!hasCss(id, text)) {
+    var _rules$id;
+    rules[id] = (rules === null || rules === void 0 ? void 0 : rules[id]) || {};
+    rules[id].text = (((_rules$id = rules[id]) === null || _rules$id === void 0 ? void 0 : _rules$id.text) || '') + text;
+    if (styleSheet) {
+      styleSheet.insertRule(text, Object.keys(rules).length - 1);
+    }
+  }
+};
+exports.addCss = addCss;
+const flush = () => {
+  if (_Platform.default.OS === 'web') {
+    return /*#__PURE__*/_react.default.createElement('style', {
+      id: 'rnmq',
+      key: 'rnmq',
+      dangerouslySetInnerHTML: {
+        __html: Object.keys(rules).map(key => rules[key].text).join('\n')
+      }
+    });
+  }
+  return {};
+};
+exports.flush = flush;

package/lib/utils/ssr.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
+var _inject = require("./ssr-media-query/utils/inject");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /** @typedef {import('react').ComponentType} ReactComponent */
@@ -102,7 +103,7 @@ const ssrStyles = function () {
       for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
         existingStyles[_key] = arguments[_key];
       }
-      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
+      return [...existingStyles, ...styleGetters.flatMap(getter => getter()), (0, _inject.flush)()];
     }
   };
 };

package/lib-module/Autocomplete/Autocomplete.js

@@ -265,21 +265,11 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }, [nestedSelectedValue, items]);
   const handleClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
-    if (event.type === 'keydown') {
-      if (event.key === 'Escape' || event.key === 27) {
-        setIsExpanded(false);
-        setNestedSelectedValue(null);
-      } else if (event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
-        targetRef.current.focus();
-      }
-    } else if (event.type === 'click' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target))) {
-      setIsExpanded(false);
-    } else if (event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
-      setIsExpanded(false);
-    } else if (Platform.OS === 'web') {
-      // needed for dropdown to be collapsed when clicking outside on web
+    if (event.type === 'keydown' && (event.key === 'Escape' || event.key === '27') || event.type === 'click' && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target)) || event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
       setIsExpanded(false);
       setNestedSelectedValue(null);
+    } else if (event.type === 'keydown' && event.key === 'ArrowDown' && isExpanded && !isLoading && targetRef !== null && targetRef !== void 0 && targetRef.current) {
+      targetRef.current.focus();
     }
   };
   const itemsToShow = currentValue ? itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)) : [];

package/lib-module/Card/Card.js

@@ -1,11 +1,15 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { getTokensPropType, variantProp } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
 import CardBase from './CardBase';
+import PressableCardBase from './PressableCardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
@@ -62,25 +66,84 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens,
     variant,
     dataSet,
+    onPress,
+    interactiveCard,
     ...rest
   } = _ref;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Card', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/_jsx(CardBase, {
-    ref: ref,
-    tokens: themeTokens,
-    dataSet: dataSet,
-    ...selectProps(rest),
-    children: children
+  const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
+    interactive: true,
+    ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
+  });
+  // When interactive area is present, spacing tokens should only be applied
+  // to individual Card sections, not Card as a whole
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...restOfTokens
+  } = themeTokens;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(CardBase, {
+      ref: ref,
+      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : themeTokens,
+      dataSet: dataSet,
+      ...selectProps(rest),
+      children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(PressableCardBase, {
+          ref: ref,
+          tokens: getThemeTokens,
+          dataSet: dataSet,
+          onPress: onPress,
+          ...selectProps(rest),
+          children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+        }), children ? /*#__PURE__*/_jsx(View, {
+          style: {
+            paddingTop,
+            paddingBottom,
+            paddingLeft,
+            paddingRight
+          },
+          children: children
+        }) : null]
+      }) : children
+    })
   });
 });
 Card.displayName = 'Card';
 Card.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Card content.
+   */
   children: PropTypes.node,
+  /**
+   * Card tokens.
+   */
   tokens: getTokensPropType('Card'),
-  variant: variantProp.propType
+  /**
+   * Card variant.
+   */
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactiveCard` prop is used.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Object to set interactive card's properties
+   * - body: The body of the interactive card, can be any renderable node
+   * - tokens: The tokens to be used for the interactive card
+   * - variant: The variant to be used for the interactive card
+   */
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.node,
+    tokens: getTokensPropType('Card'),
+    variant: variantProp.propType
+  })
 };
 export default Card;

package/lib-module/Card/PressableCardBase.js

@@ -28,6 +28,7 @@ const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive,
     href,
     hrefAttrs,
+    dataSet,
     accessibilityRole = href ? 'link' : undefined,
     ...rawRest
   } = _ref;
@@ -87,6 +88,7 @@ const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
     onKeyDown: handleKeyDown,
     hrefAttrs: hrefAttrs,
     style: getOuterBorderStyle,
+    dataSet: dataSet,
     ...selectProps({
       ...rest,
       accessibilityRole

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

@@ -1,12 +1,9 @@
 import React, { forwardRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { viewports } from '@telus-uds/system-constants';
 import GutterContext from '../providers/GutterContext';
-import { useViewport } from '../../ViewportProvider';
 import applyInheritance from '../helpers';
-import { responsiveProps, BaseView } from '../../utils';
+import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -26,7 +23,6 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...viewProps
   } = _ref;
   const gutter = useContext(GutterContext);
-  const viewPort = useViewport();
   const hiddenLevels = applyInheritance([xs, sm, md, lg, xl]);
   const getHorizontalAlignLevel = () => {
     if (typeof horizontalAlign === 'object') {
@@ -67,60 +63,11 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     return {};
   };
-  const sizeStyles = sizes => {
-    const currViewport = Object.keys(sizes).find(key => key.startsWith(viewPort));
-    const currSize = sizes[currViewport];
-    return {
-      ...calculateWidth(currSize)
-    };
-  };
-  const offsetStyles = offsets => {
-    const currViewport = Object.keys(offsets).find(key => key.startsWith(viewPort));
-    const currOffset = offsets[currViewport];
-    return {
-      ...calculateOffset(currOffset)
-    };
-  };
-  const gutterPadding = {
-    paddingLeft: gutter ? 16 : 0,
-    paddingRight: gutter ? 16 : 0
-  };
-  let hidingStyles = {};
 
   // TODO: consider setting this to always 'flex' in a major release.
   // `display: block` is invalid in native apps.
   // See https://telusdigital.atlassian.net/browse/UDS1-92
   const shown = !flex && Platform.OS === 'web' ? 'block' : 'flex';
-  if (viewPort === viewports.xs) {
-    hidingStyles = {
-      display: hiddenLevels[0] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[0]
-    };
-  }
-  if (viewPort === viewports.sm) {
-    hidingStyles = {
-      display: hiddenLevels[1] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[1]
-    };
-  }
-  if (viewPort === viewports.md) {
-    hidingStyles = {
-      display: hiddenLevels[2] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[2]
-    };
-  }
-  if (viewPort === viewports.lg) {
-    hidingStyles = {
-      display: hiddenLevels[3] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[3]
-    };
-  }
-  if (viewPort === viewports.xl) {
-    hidingStyles = {
-      display: hiddenLevels[4] === 0 ? 'none' : shown,
-      textAlign: horizontalAlignLevel[4]
-    };
-  }
   const sizesArray = [xs, sm, md, lg, xl];
   const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset];
   const sizesWithIheritance = applyInheritance(sizesArray);
@@ -139,24 +86,63 @@ const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
     lg: offsetsWithIheritance[3],
     xl: offsetsWithIheritance[4]
   };
+  const mediaQueryStyles = createMediaQueryStyles({
+    xs: {
+      display: hiddenLevels[0] === 0 ? 'none' : shown,
+      textAlign: horizontalAlignLevel[0],
+      ...calculateWidth(sizes.xs),
+      ...calculateOffset(offsets.xs)
+    },
+    sm: {
+      display: hiddenLevels[1] === 0 ? 'none' : shown,
+      textAlign: horizontalAlignLevel[1],
+      ...calculateWidth(sizes.sm),
+      ...calculateOffset(offsets.sm)
+    },
+    md: {
+      display: hiddenLevels[2] === 0 ? 'none' : shown,
+      textAlign: horizontalAlignLevel[2],
+      ...calculateWidth(sizes.md),
+      ...calculateOffset(offsets.md)
+    },
+    lg: {
+      display: hiddenLevels[3] === 0 ? 'none' : shown,
+      textAlign: horizontalAlignLevel[3],
+      ...calculateWidth(sizes.lg),
+      ...calculateOffset(offsets.lg)
+    },
+    xl: {
+      display: hiddenLevels[4] === 0 ? 'none' : shown,
+      textAlign: horizontalAlignLevel[4],
+      ...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
+    }
+  });
   return /*#__PURE__*/_jsx(BaseView, {
     ref: ref,
     ...viewProps,
-    style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), {
-      ...hidingStyles
-    }],
+    style: [styles.col],
+    dataSet: {
+      media: ids.col
+    },
     children: children
   });
 });
 Col.displayName = 'Col';
-const styles = StyleSheet.create({
-  col: {
-    flexGrow: 1,
-    flexShrink: 0,
-    flexBasis: 'auto',
-    maxWidth: '100%'
-  }
-});
 
 /*
  * We're disabling default props since passing undefined props to