@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/utils/props/tokens.js

@@ -1,32 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.selectTokens = exports.getTokensSetPropType = exports.getTokensPropType = exports.getTokenNames = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import PropTypes from 'prop-types';
+import { components as tokenKeys } from '@telus-uds/system-theme-tokens';
 
 // Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
 // such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
 // or components (e.g. Icon tokens)
-const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
-
-const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
-
-const getTokenNames = componentName => {
-  const componentTokenSchema = _systemThemeTokens.components[componentName];
-
+const tokenValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.elementType]);
+const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(tokenValue)]);
+export const getTokenNames = componentName => {
+  const componentTokenSchema = tokenKeys[componentName];
   if (!componentTokenSchema) {
-    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
   }
-
   return Object.keys(componentTokenSchema);
 };
+
 /**
  * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
  * or by a provided array of tokens. A prefix may be provided, for example:
@@ -56,28 +43,25 @@ const getTokenNames = componentName => {
  * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
  * @returns {object} - subset of theme tokens
  */
-
-
-exports.getTokenNames = getTokenNames;
-
-const selectTokens = (specifier, tokens, prefix) => {
+export const selectTokens = (specifier, tokens, prefix) => {
   const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
   const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
+    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
     const token = tokens[prefixedKey];
-    return token !== undefined ? { ...validTokens,
+    return token !== undefined ? {
+      ...validTokens,
       [key]: token
     } : validTokens;
   }, {});
   return filteredTokens;
 };
+
 /**
  * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
  * @typedef {{[key: string]: TokenValue}} TokensSet
  * @typedef {(AppearanceSet) => TokensSet} TokensGetter
  * @typedef {TokensSet|TokensGetter} TokensProp
  */
-
 /**
  * 'tokens' is an optional object prop on all themable components. Its keys must match the
  * token keys in the component's theme schema.
@@ -99,34 +83,29 @@ const selectTokens = (specifier, tokens, prefix) => {
  *   tokens: getTokensPropType('Component1', 'Component2')
  * }
  */
-
-
-exports.selectTokens = selectTokens;
-
-const getTokensPropType = function () {
+export const getTokensPropType = function () {
   for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
     componentsNames[_key] = arguments[_key];
   }
-
   return (props, propName, componentName) => {
-    _propTypes.default.checkPropTypes({
-      [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
+    PropTypes.checkPropTypes({
+      [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
     }, props, propName, componentName);
-
     if (typeof props[propName] !== 'function') {
-      _propTypes.default.checkPropTypes({
-        [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+      PropTypes.checkPropTypes({
+        [propName]: PropTypes.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
       }, props, propName, componentName);
     }
   };
 };
+
 /**
  * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
  *
  * For example, for a set of tokens used in a common style, or for a set of tokens required by
  * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
  *
- * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ * By default, requires an object with a complete set of tokens (allowing `null` and `undefined`).
  *
  * @param {string[]} componentTokenKeys - array of strings of token names
  * @param {object} [options]
@@ -134,26 +113,18 @@ const getTokensPropType = function () {
  * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
  * @returns
  */
-
-
-exports.getTokensPropType = getTokensPropType;
-
-const getTokensSetPropType = function (componentTokenKeys) {
+export const getTokensSetPropType = function (componentTokenKeys) {
   let {
     partial = false,
     allowFunction = false
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+  const tokensObjectValidator = PropTypes.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType :
+  // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
   function (props, propName) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
       args[_key2 - 2] = arguments[_key2];
     }
-
-    return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
+    return props[propName] !== null && props[propName] !== undefined && tokenValueType.isRequired(props, propName, ...args);
   }])));
-
-  return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
-};
-
-exports.getTokensSetPropType = getTokensSetPropType;
+  return allowFunction ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func]) : tokensObjectValidator;
+};

package/lib/utils/props/variantProp.js

@@ -1,19 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import PropTypes from 'prop-types';
 
 /**
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp
  */
-var _default = {
+export default {
   /**
    * 'variant' is an optional object prop on all themable components.
    *
@@ -23,6 +14,5 @@ var _default = {
    * Since the particular keys and values depend on which theme is currently active,
    * the exact shape of variant props is not enforced using PropTypes.
    */
-  propType: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))
-};
-exports.default = _default;
+  propType: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]))
+};

package/lib/utils/props/viewProps.js

@@ -1,34 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+import PropTypes from 'prop-types';
+import getPropSelector from './getPropSelector';
 const viewPropTypes = {
-  pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
-  onLayout: _propTypes.default.func,
-  nativeID: _propTypes.default.string,
-  testID: _propTypes.default.string,
-  dataSet: _propTypes.default.object
+  pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
+  onLayout: PropTypes.func,
+  nativeID: PropTypes.string,
+  testID: PropTypes.string,
+  dataSet: PropTypes.object
 };
-var _default = {
+export default {
   /**
    * Subset of `View` proptypes that could conceivably be needed on any component
    * that renders a single View.
    */
   types: viewPropTypes,
-
   /**
    * Filters a props object, returning only cross-platform View props that are potentially
    * relevant to any basic layout component that renders one View.
    */
-  select: (0, _getPropSelector.default)(viewPropTypes)
-};
-exports.default = _default;
+  select: getPropSelector(viewPropTypes)
+};

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

@@ -0,0 +1,48 @@
+import mediaQuery from 'css-mediaquery';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import { isMediaOrPseudo, isMedia } from '../utils/common';
+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(isMediaOrPseudo);
+    cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
+    mediaQueriesAndPseudoClasses.forEach(str => {
+      if (isMedia(str)) {
+        const mqStr = str.replace('@media', '');
+        const {
+          width,
+          height
+        } = Dimensions.get('window');
+        const isMatchingMediaQuery = mediaQuery.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
+  };
+};
+export default createStyleSheet;

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

@@ -0,0 +1,2 @@
+import createStyleSheet from './create-stylesheet-mobile';
+export default createStyleSheet;

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

@@ -0,0 +1,2 @@
+import createStyleSheet from './create-stylesheet-mobile';
+export default createStyleSheet;

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

@@ -0,0 +1,36 @@
+import { addCss } from '../utils/inject';
+import createDeclarationBlock from '../utils/create-declaration-block';
+import hash from '../hash';
+import { isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle } from '../utils/common';
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let ids = {};
+  const cleanStyles = deepClone(stylesWithQuery);
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
+    mediaQueriesAndPseudoClasses.forEach(query => {
+      var _ids;
+      const sanitizedStyle = sanitizeStyle(stylesWithQuery[key][query]);
+      const css = createDeclarationBlock(sanitizedStyle);
+      const stringHash = `rnmq-${hash(`${key}${query}${css}`)}`;
+      const rule = createCssRule(query, stringHash, css);
+      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
+  };
+};
+export default createStyleSheet;

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

@@ -0,0 +1,13 @@
+/* eslint-disable no-bitwise */
+export default 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,6 @@
+import createStyleSheet from './create-stylesheet';
+import createMediaQueryStyles from './utils/create-media-query-styles';
+const StyleSheet = {
+  create: createStyleSheet
+};
+export { StyleSheet, createMediaQueryStyles };

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

@@ -0,0 +1,33 @@
+const isMedia = query => query.indexOf('@media') === 0;
+const isPseudo = query => query.indexOf(':') === 0;
+const isMediaOrPseudo = query => isMedia(query) || isPseudo(query);
+const deepClone = obj => JSON.parse(JSON.stringify(obj));
+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;
+};
+
+/**
+ * Sanitizes the style object by converting any functions to their string representation.
+ *
+ * @param {Object} style - The style object to sanitize.
+ * @returns {Object} - The sanitized style object.
+ */
+const sanitizeStyle = style => {
+  const sanitizedStyle = {
+    ...style
+  };
+  Object.keys(sanitizedStyle).forEach(property => {
+    if (typeof sanitizedStyle[property] === 'function') {
+      sanitizedStyle[property] = sanitizedStyle[property].toString();
+    }
+  });
+  return sanitizedStyle;
+};
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle };

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

@@ -0,0 +1,16 @@
+import createReactDOMStyle from 'react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle';
+import prefixStyles from 'react-native-web/dist/cjs/modules/prefixStyles';
+import hyphenateStyleName from './hyphenate-style-name';
+const createDeclarationBlock = style => {
+  const domStyle = prefixStyles(createReactDOMStyle(style));
+  const declarationsString = Object.keys(domStyle).map(property => {
+    const value = domStyle[property];
+    const prop = hyphenateStyleName(property);
+    if (Array.isArray(value)) {
+      return value.map(v => `${prop}:${v}`).join(';');
+    }
+    return `${prop}:${value} !important`;
+  }).sort().join(';');
+  return `{${declarationsString};}`;
+};
+export default createDeclarationBlock;

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

@@ -0,0 +1,60 @@
+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 { 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 { 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) {
+  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);
+    const mediaQuery = `@media (min-width: ${minWidth}px)${maxWidth ? ` and (max-width: ${maxWidth}px)` : ''}`;
+    return {
+      ...acc,
+      [mediaQuery]: styles
+    };
+  }, {});
+  return mediaQueries;
+}
+export default createMediaQueryStyles;

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

@@ -0,0 +1,12 @@
+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;
+};
+export default hyphenateStyleName;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+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;
+  })();
+}
+export 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));
+};
+export 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);
+    }
+  }
+};
+export const flush = () => {
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/React.createElement('style', {
+      id: 'rnmq',
+      key: 'rnmq',
+      dangerouslySetInnerHTML: {
+        __html: Object.keys(rules).map(key => rules[key].text).join('\n')
+      }
+    });
+  }
+  return {};
+};

package/lib/utils/ssr.js

@@ -1,20 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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 _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+import React from 'react';
+import AppRegistry from "react-native-web/dist/exports/AppRegistry";
+import { flush } from './ssr-media-query/utils/inject';
 /** @typedef {import('react').ComponentType} ReactComponent */
-
 /** @typedef {import('react').ReactElement} ReactElement */
 
 /**
@@ -32,7 +19,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {boolean} [options.styleGetters]
  * @param {(ReactElement) => ReactElement} [options.collectStyles]
  */
-const ssrStyles = function () {
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ssrStyles = function () {
   let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
   let {
     styleGetters = [],
@@ -59,45 +47,41 @@ const ssrStyles = function () {
         renderedByRNW = false,
         WrapperComponent
       } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-      _AppRegistry.default.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
-
-
+      AppRegistry.registerComponent(appName, () => App);
+      // AppRegistry.getApplication renders the app in a container, and collects styles.
       const {
         element,
         getStyleElement
-      } = _AppRegistry.default.getApplication(appName, {
+      } = AppRegistry.getApplication(appName, {
         WrapperComponent,
         initialProps: props
       });
-
-      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
+      let renderedApp =
+      // React Native Web's AppRegistry.getApplication assumes the app is rendered using
       // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
       // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
       // So, use that IF user says AppRegistry.runApplication will do the client-side render.
-      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
+      renderedByRNW && element ||
+      // If the live app is not rendered using AppRegistry.runApplication, we need to
       // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
       // Default to this as many platforms (e.g. NextJS) will use their own renderers.
-      WrapperComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, { ...props
+      WrapperComponent ? /*#__PURE__*/_jsx(WrapperComponent, {
+        children: /*#__PURE__*/_jsx(App, {
+          ...props
         })
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, { ...props
+      }) : /*#__PURE__*/_jsx(App, {
+        ...props
       });
-
       const getRNWStyle = () => getStyleElement({
         key: 'react-native-stylesheet'
       });
-
       styleGetters.push(getRNWStyle);
-
       if (typeof collectStyles === 'function') {
         renderedApp = collectStyles(renderedApp);
       }
-
       hasAppRendered = true;
       return renderedApp;
     },
-
     /**
      * Turns styles collected during renderApp into an array of React elements of
      * HTML <style> tags ready for insertion into the SSR HTML's <head>.
@@ -109,18 +93,15 @@ const ssrStyles = function () {
      */
     getStyles: function () {
       if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
-
       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()), flush()];
     }
   };
 };
+export default ssrStyles;
 
-exports.ssrStyles = ssrStyles;
-var _default = ssrStyles;
 /**
  * @deprecated - use ssrStyles instead
  *
@@ -132,19 +113,15 @@ var _default = ssrStyles;
  * @returns {ReactElement[]}
  */
 
-exports.default = _default;
-
-const getReactNativeWebSSRStyles = function (AppRoot) {
+export const getReactNativeWebSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
-
-  _AppRegistry.default.registerComponent(appName, () => AppRoot);
-
+  AppRegistry.registerComponent(appName, () => AppRoot);
   const {
     getStyleElement
-  } = _AppRegistry.default.getApplication(appName);
-
+  } = AppRegistry.getApplication(appName);
   return [getStyleElement()];
 };
+
 /**
  * @deprecated - use ssrStyles instead
  *
@@ -156,15 +133,10 @@ const getReactNativeWebSSRStyles = function (AppRoot) {
  * @param {ReactElement[]} [existingStyles]
  * @returns {ReactElement[]}
  */
-
-
-exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
-
-const getSSRStyles = function (AppRoot) {
+export const getSSRStyles = function (AppRoot) {
   let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
   let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName) // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
+  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName)
+  // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
   ];
-};
-
-exports.getSSRStyles = getSSRStyles;
+};