@telus-uds/components-base 1.71.0 → 1.73.0

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/index.js

@@ -15,6 +15,7 @@ var _exportNames = {
   Checkbox: true,
   CheckboxCard: true,
   CheckboxCardGroup: true,
+  ColourToggle: true,
   Divider: true,
   ExpandCollapse: true,
   Accordion: true,
@@ -32,6 +33,7 @@ var _exportNames = {
   Modal: true,
   MultiSelectFilter: true,
   Notification: true,
+  OrderedList: true,
   Pagination: true,
   Progress: true,
   QuickLinks: true,
@@ -144,6 +146,12 @@ Object.defineProperty(exports, "CheckboxCardGroup", {
     return _CheckboxCardGroup.default;
   }
 });
+Object.defineProperty(exports, "ColourToggle", {
+  enumerable: true,
+  get: function () {
+    return _ColourToggle.default;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {
@@ -246,6 +254,12 @@ Object.defineProperty(exports, "Notification", {
     return _Notification.default;
   }
 });
+Object.defineProperty(exports, "OrderedList", {
+  enumerable: true,
+  get: function () {
+    return _OrderedList.default;
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function () {
@@ -519,6 +533,7 @@ Object.keys(_Checkbox).forEach(function (key) {
 });
 var _CheckboxCard = _interopRequireDefault(require("./CheckboxCard"));
 var _CheckboxCardGroup = _interopRequireDefault(require("./CheckboxCardGroup"));
+var _ColourToggle = _interopRequireDefault(require("./ColourToggle"));
 var _Divider = _interopRequireDefault(require("./Divider"));
 var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));
 var _Feedback = _interopRequireDefault(require("./Feedback"));
@@ -567,6 +582,7 @@ var _List = _interopRequireWildcard(require("./List"));
 var _Modal = _interopRequireDefault(require("./Modal"));
 var _MultiSelectFilter = _interopRequireDefault(require("./MultiSelectFilter"));
 var _Notification = _interopRequireDefault(require("./Notification"));
+var _OrderedList = _interopRequireDefault(require("./OrderedList"));
 var _Pagination = _interopRequireDefault(require("./Pagination"));
 var _Progress = _interopRequireDefault(require("./Progress"));
 var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));

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/create-stylesheet/create-stylesheet-mobile.js

@@ -0,0 +1,56 @@
+"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 _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;
+  const ids = {};
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
+    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/create-stylesheet/index.android.js

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

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

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

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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);
+    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}`
+      };
+    });
+  });
+  return {
+    ids,
+    styles: cleanStyles,
+    fullStyles: stylesWithQuery
+  };
+};
+var _default = createStyleSheet;
+exports.default = _default;

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;