@telus-uds/components-base 1.72.0 → 1.73.0

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

@@ -2,6 +2,8 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import applyInheritance from '../helpers';
 import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
+import { useTheme } from '../../ThemeProvider';
+import { useViewport } from '../../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const horizontalAlignStyles = horizontalAlign => {
   switch (horizontalAlign) {
@@ -69,8 +71,25 @@ const Row = /*#__PURE__*/forwardRef((_ref, ref) => {
     children,
     ...rest
   } = _ref;
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  const viewport = useViewport();
+  const staticStyles = {
+    width: '100%',
+    marginVertical: 0,
+    marginHorizontal: 'auto',
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 'auto',
+    ...horizontalAlignStyles(horizontalAlign),
+    ...verticalAlignStyles(verticalAlign),
+    ...distributeStyles(distribute)
+  };
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
-  const mediaQueryStyles = createMediaQueryStyles({
+  const stylesByViewport = {
     xs: {
       flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
       flexWrap: reverseLevel[0] ? 'wrap-reverse' : 'wrap'
@@ -91,30 +110,34 @@ const Row = /*#__PURE__*/forwardRef((_ref, ref) => {
       flexDirection: reverseLevel[4] ? 'row-reverse' : 'row',
       flexWrap: reverseLevel[4] ? 'wrap-reverse' : 'wrap'
     }
-  });
-  const {
-    ids,
-    styles
-  } = StyleSheet.create({
-    row: {
-      width: '100%',
-      marginVertical: 0,
-      marginHorizontal: 'auto',
-      flexGrow: 0,
-      flexShrink: 1,
-      flexBasis: 'auto',
-      ...horizontalAlignStyles(horizontalAlign),
-      ...verticalAlignStyles(verticalAlign),
-      ...distributeStyles(distribute),
-      ...mediaQueryStyles
-    }
-  });
+  };
+  let rowStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      row: {
+        ...staticStyles,
+        ...mediaQueryStyles
+      }
+    });
+    rowStyles = styles.row;
+    mediaIds = ids.row;
+  } else {
+    rowStyles = {
+      ...staticStyles,
+      ...stylesByViewport[viewport]
+    };
+  }
   return /*#__PURE__*/_jsx(BaseView, {
     ref: ref,
     ...rest,
-    style: [styles.row],
-    dataSet: {
-      media: ids.row
+    style: rowStyles,
+    dataSet: mediaIds && {
+      media: mediaIds
     },
     children: children
   });

package/lib-module/Listbox/ListboxGroup.js

@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 import { withLinkRouter } from '../utils';
 import ExpandCollapse from '../ExpandCollapse';
 import ListboxItem from './ListboxItem';
@@ -20,6 +21,11 @@ const styles = StyleSheet.create({
     padding: 0
   }
 });
+const getAccessibilityRole = () => Platform.select({
+  ios: 'listitem',
+  android: 'none',
+  web: 'listitem'
+});
 const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     id,
@@ -40,7 +46,7 @@ const ListboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx(View, {
     id: "test",
     style: styles.groupWrapper,
-    accessibilityRole: "listitem",
+    accessibilityRole: getAccessibilityRole(),
     children: /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
       panelId: id ?? label,
       controlTokens: {

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -98,6 +98,7 @@ const MultiSelectFilter = _ref3 => {
     if (colSize === 1) return setMaxWidth(false);
     return colSize === 2 && setMaxWidth(true);
   }, [colSize]);
+  useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
   const {
     headerFontColor,
     headerFontSize,

package/lib-module/Notification/Notification.js

@@ -14,10 +14,18 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const selectContainerStyles = tokens => ({
   ...tokens
 });
-const selectTextStyles = (tokens, themeOptions) => applyTextStyles({
-  ...selectTokens('Typography', tokens),
-  themeOptions
-});
+const selectTextStyles = (tokens, themeOptions, isDismissible) => {
+  const textTokens = selectTokens('Typography', tokens);
+  const styles = {
+    ...textTokens,
+    themeOptions,
+    overflow: 'hidden'
+  };
+  if (!isDismissible) {
+    styles.flexShrink = 1;
+  }
+  return applyTextStyles(styles);
+};
 const selectIconProps = _ref => {
   let {
     iconSize,
@@ -138,7 +146,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   if (isDismissed) {
     return null;
   }
-  const textStyles = selectTextStyles(themeTokens, themeOptions);
+  const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible);
   const content = wrapStringsInText(typeof children === 'function' ? children({
     textStyles,
     variant

package/lib-module/OrderedList/ItemBase.js

@@ -3,7 +3,13 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getAccessibilityRole = () => Platform.select({
+  ios: 'listitem',
+  android: 'none',
+  web: 'listitem'
+});
 const Item = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -11,7 +17,7 @@ const Item = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   return /*#__PURE__*/_jsx(View, {
-    accessibilityRole: "listitem",
+    accessibilityRole: getAccessibilityRole(),
     ref: ref,
     style: [staticStyles.container, style],
     ...rest,

package/lib-module/Responsive/Responsive.js

@@ -1,17 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { viewports } from '@telus-uds/system-constants';
-import { useResponsiveProp } from '../utils';
+import { useTheme } from '../ThemeProvider';
+import ResponsiveProp from './ResponsiveProp';
+import ResponsiveWithMediaQueryStyleSheet from './ResponsiveWithMediaQueryStyleSheet';
 
 /**
  * Responsive conditionally renders children based on whether the viewport matches the provided
  * min and max viewports.
  *
- * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * If enableMediaQueryStyleSheet themeOption is set to false in ThemeProvider, then in SSR,
+ * like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
  * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
  * after hydration. This may cause a layout shift on devices other than the narrowest.
+ *
+ * If enableMediaQueryStyleSheet themeOption is set to true in ThemeProvider, then media query stylesheet
+ * is used to hide and show children of `Responsive` within a View.
  */
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Responsive = _ref => {
   let {
@@ -19,20 +23,25 @@ const Responsive = _ref => {
     max,
     children
   } = _ref;
-  // Start returning children at the 'min' viewport or greater
-  const byViewports = {
-    [min]: children
-  };
-  if (max && max !== 'xl') {
-    // Stop returning children at the viewport one above 'max' or greater
-    const maxIndex = viewports.keys.indexOf(max);
-    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null;
-    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  const {
+    themeOptions: {
+      enableMediaQueryStyleSheet
+    }
+  } = useTheme();
+  if (enableMediaQueryStyleSheet) {
+    return /*#__PURE__*/_jsx(ResponsiveWithMediaQueryStyleSheet, {
+      min: min,
+      max: max,
+      children: children
+    });
   }
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: useResponsiveProp(byViewports, null)
+  return /*#__PURE__*/_jsx(ResponsiveProp, {
+    min: min,
+    max: max,
+    children: children
   });
 };
+Responsive.displayName = 'Responsive';
 Responsive.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is smaller than `min`

package/lib-module/Responsive/ResponsiveProp.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { useResponsiveProp } from '../utils';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 = viewports.keys.indexOf(max);
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+  const responsiveProp = useResponsiveProp(byViewports, null);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: responsiveProp
+  });
+};
+ResponsiveProp.displayName = 'Responsive';
+ResponsiveProp.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+};
+export default ResponsiveProp;

package/lib-module/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+function generateResponsiveStyles(min, max) {
+  const viewportsArray = 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 createMediaQueryStyles(styles, false);
+}
+const ResponsiveWithMediaQueryStyleSheet = _ref => {
+  let {
+    min,
+    max,
+    children
+  } = _ref;
+  const {
+    ids,
+    styles
+  } = StyleSheet.create({
+    responsive: {
+      flexDirection: 'inherit',
+      alignItems: 'inherit',
+      justifyContent: 'inherit',
+      ...generateResponsiveStyles(min, max)
+    }
+  });
+  return /*#__PURE__*/_jsx(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.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+};
+export default ResponsiveWithMediaQueryStyleSheet;

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -15,7 +15,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 {
@@ -70,12 +71,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.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool,
     enableHelmetSSR: PropTypes.bool,
-    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+    enableMediaQueryStyleSheet: PropTypes.bool
   })
 };
 export default ThemeProvider;

package/lib-module/ThemeProvider/index.js

@@ -1,6 +1,7 @@
 import ThemeProvider from './ThemeProvider';
 export { default as useTheme } from './useTheme';
 export { default as useSetTheme } from './useSetTheme';
+export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens';
 export * from './useThemeTokens';
 export * from './utils';
 export default ThemeProvider;

package/lib-module/ThemeProvider/useResponsiveThemeTokens.js

@@ -0,0 +1,81 @@
+import { viewports } from '@telus-uds/system-constants';
+import useTheme from './useTheme';
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils';
+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 = mergeAppearances(variants, states);
+  const tokensByViewport = Object.fromEntries(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 || viewports.keys;
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports];
+      }
+      targetViewports.forEach(viewport => {
+        tokensByViewport[viewport] = {
+          ...tokensByViewport[viewport],
+          ...rule.tokens
+        };
+      });
+    }
+  });
+  Object.keys(tokensByViewport).forEach(viewport => {
+    tokensByViewport[viewport] = 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 = useTheme();
+  const componentTheme = getComponentTheme(theme, componentName);
+  const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states);
+  return themeTokens;
+};
+export default useResponsiveThemeTokens;

package/lib-module/Typography/Typography.js

@@ -2,10 +2,10 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import View from "react-native-web/dist/exports/View";
-import { useTheme, useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
+import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider';
 import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag, StyleSheet, createMediaQueryStyles } from '../utils';
+import { useViewport } from '../ViewportProvider';
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
@@ -21,7 +21,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     fontName,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine
   } = _ref;
   return applyTextStyles({
     fontWeight,
@@ -32,7 +33,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     themeOptions,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine
   });
 };
 
@@ -52,23 +54,48 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const viewport = useViewport();
-  const {
-    superScriptFontSize,
-    ...themeTokens
-  } = useThemeTokens('Typography', tokens, variant, {
-    viewport
-  });
   const {
     themeOptions
   } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Typography', tokens, variant);
+  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : 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 = createMediaQueryStyles(transformedThemeTokens);
+    const {
+      ids,
+      styles
+    } = 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: getMaxFontMultiplier(themeTokens)
+    maxFontSizeMultiplier
   };
   const containerProps = {
     accessibilityRole,
@@ -79,7 +106,7 @@ const Typography = /*#__PURE__*/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.cloneElement(child, {
         style: {
           ...childStyles,
@@ -99,19 +126,15 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
-  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
-  const textStyles = resolvedTextProps.style ? {
-    ...resolvedTextProps.style,
-    textDecorationLine
-  } : {
-    textDecorationLine
-  };
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, {
       ...resolvedTextProps,
       style: textStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
@@ -119,6 +142,9 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
+    dataSet: mediaIds && {
+      media: mediaIds
+    },
     children: sanitizeChildren(children)
   });
 });

package/lib-module/server.js

@@ -0,0 +1,4 @@
+export { default as selectSystemProps } from './utils/props/selectSystemProps';
+export { getTokensPropType } from './utils/props/tokens';
+export { default as htmlAttrs } from './utils/htmlAttrs';
+export { getComponentTheme, getThemeTokens } from './ThemeProvider/utils/theme-tokens';

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

@@ -1,21 +1,51 @@
 import { viewports } from '@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 = viewports.keys;
+  const mediaQueries = Object.entries(effectiveStyles).reduce((acc, _ref2) => {
+    let [viewport, styles] = _ref2;
     const minWidth = viewports.map.get(viewport);
     const nextViewport = viewportsArray[viewportsArray.indexOf(viewport) + 1];
     const maxWidth = viewports.map.get(nextViewport);