@telus-uds/components-base 1.72.0 → 1.74.0

package/lib/Responsive/ResponsiveProp.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ResponsiveProp = _ref => {
+  let {
+    min = 'xs',
+    max,
+    children
+  } = _ref;
+  const byViewports = {
+    [min]: children
+  };
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = _systemConstants.viewports.keys.indexOf(max);
+    const maxPlusOne = maxIndex >= 0 ? _systemConstants.viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+  const responsiveProp = (0, _utils.useResponsiveProp)(byViewports, null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: responsiveProp
+  });
+};
+ResponsiveProp.displayName = 'Responsive';
+ResponsiveProp.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: _propTypes.default.node.isRequired
+};
+var _default = ResponsiveProp;
+exports.default = _default;

package/lib/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function generateResponsiveStyles(min, max) {
+  const viewportsArray = _systemConstants.viewports.keys;
+  const minIndex = viewportsArray.indexOf(min);
+  const maxIndex = viewportsArray.indexOf(max);
+  let hiddenViewports = [];
+  if (minIndex !== -1) {
+    hiddenViewports = viewportsArray.slice(0, minIndex);
+  }
+  if (maxIndex !== -1) {
+    hiddenViewports = hiddenViewports.concat(viewportsArray.slice(maxIndex + 1));
+  }
+  const styles = {};
+  viewportsArray.forEach(viewport => {
+    if (hiddenViewports.includes(viewport)) {
+      styles[viewport] = {
+        display: 'none'
+      };
+    }
+  });
+  return (0, _utils.createMediaQueryStyles)(styles, false);
+}
+const ResponsiveWithMediaQueryStyleSheet = _ref => {
+  let {
+    min,
+    max,
+    inheritedStyles = [],
+    children
+  } = _ref;
+  const {
+    ids,
+    styles
+  } = _utils.StyleSheet.create({
+    responsive: {
+      ...inheritedStyles.reduce((acc, prop) => {
+        acc[prop] = 'inherit';
+        return acc;
+      }, {}),
+      ...generateResponsiveStyles(min, max)
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+    style: styles.responsive,
+    dataSet: ids.responsive && {
+      media: ids.responsive
+    },
+    children: children
+  });
+};
+ResponsiveWithMediaQueryStyleSheet.displayName = 'Responsive';
+ResponsiveWithMediaQueryStyleSheet.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']),
+  inheritedStyles: _propTypes.default.arrayOf(_propTypes.default.string),
+  children: _propTypes.default.node.isRequired
+};
+var _default = ResponsiveWithMediaQueryStyleSheet;
+exports.default = _default;

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,50 @@ 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, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  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 +116,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 +136,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 +152,9 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
+    dataSet: mediaIds && {
+      media: mediaIds
+    },
     children: sanitizeChildren(children)
   });
 });

package/lib/index.js

@@ -22,6 +22,7 @@ var _exportNames = {
   Feedback: true,
   Fieldset: true,
   FlexGrid: true,
+  Footnote: true,
   HorizontalScroll: true,
   Icon: true,
   IconButton: true,
@@ -182,6 +183,12 @@ Object.defineProperty(exports, "FlexGrid", {
     return _FlexGrid.default;
   }
 });
+Object.defineProperty(exports, "Footnote", {
+  enumerable: true,
+  get: function () {
+    return _Footnote.default;
+  }
+});
 Object.defineProperty(exports, "HorizontalScroll", {
   enumerable: true,
   get: function () {
@@ -539,6 +546,7 @@ var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));
 var _Feedback = _interopRequireDefault(require("./Feedback"));
 var _Fieldset = _interopRequireDefault(require("./Fieldset"));
 var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
+var _Footnote = _interopRequireDefault(require("./Footnote"));
 var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
 Object.keys(_HorizontalScroll).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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/ExpandCollapse/Panel.js

@@ -166,7 +166,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
         },
         children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
-          children: isExpanded ? children : null
+          children: children
         })
       })
     })]