@telus-uds/components-base 1.97.0 → 1.97.1

package/lib-module/utils/props/textProps.js

@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector';
-
-// These are the props accepted specifically on React Native (Web) `Text` elements.
-// They are generally concerned with the behaviour of multiline text.
-
-const crossPlatform = {
-  /**
-   * Truncates text after this many lines with an ellipsis at the end.
-   * On native, ellipsis behaviour may be changed with `ellipsizeMode` prop.
-   */
-  numberOfLines: PropTypes.number,
-  /**
-   * Default is true on web and false on native
-   */
-  selectable: PropTypes.bool
-};
-
-/**
- * See React Native docs for latest details on these.
- * https://reactnative.dev/docs/text
- */
-const nativeOnly = {
-  ellipsizeMode: PropTypes.string,
-  maxFontSizeMultiplier: PropTypes.number,
-  minimumFontScale: PropTypes.number,
-  onTextLayout: PropTypes.func,
-  suppressHighlighting: PropTypes.bool,
-  textBreakStrategy: PropTypes.string
-};
-
-/**
- * These set HTML attributes of the same name.
- */
-const webOnly = {
-  dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
-  lang: PropTypes.string
-};
-export default {
-  /**
-   * Set of prop types specific to React Native and React Native Web `Text`,
-   * which largely revolve around the behaviour of multiline non-pressable text.
-   */
-  types: {
-    ...crossPlatform,
-    ...webOnly,
-    ...nativeOnly
-  },
-  /**
-   * Filters a props object, returning only props specific to `Text` elements
-   * on the current platform. Does not include props applicable to `Text` and `View`.
-   */
-  select: getPropSelector({
-    ...crossPlatform,
-    ...Platform.select({
-      web: webOnly,
-      default: nativeOnly
-    })
-  })
-};

package/lib-module/utils/props/tokens.js

@@ -1,130 +0,0 @@
-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.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 "${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:
- *
- * @example
- * ```jsx
- * // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
- * selectTokens('Button', themeTokens)
- * ```
- *
- * @example
- * ```jsx
- * // returns `{ backgroundColor, width }` where the values of those keys come from
- * // the source object's `{ containerBackgroundColor, containerWidth }` properties.
- * selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
- * ```
- *
- * @example
- * ```jsx
- * // returns tokens that are defined in the `Button` theme schema, from tokens with
- * // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
- * selectTokens('Button', themeTokens, 'button')
- * ```
- *
- * @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
- * @param {object} tokens - a source object of theme tokens
- * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
- * @returns {object} - subset of theme tokens
- */
-export const selectTokens = (specifier, tokens, prefix) => {
-  const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
-  const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
-    const token = tokens[prefixedKey];
-    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.
- *
- * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
- * where the main theming system doesn't apply. It is intentionally permissive about values.
- *
- * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
- * @return {function} - a custom PropTypes validator
- *
- * @example
- * Component.propTypes = {
- *   // accepts all tokens keys defined in Component schema
- *   tokens: getTokensPropType('Component')
- * }
- *
- * Component.propTypes = {
- *   // accepts all tokens keys defined in schemas for Component1 and Component2
- *   tokens: getTokensPropType('Component1', 'Component2')
- * }
- */
-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.checkPropTypes({
-      [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
-    }, props, propName, componentName);
-    if (typeof props[propName] !== 'function') {
-      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` and `undefined`).
- *
- * @param {string[]} componentTokenKeys - array of strings of token names
- * @param {object} [options]
- * @param {boolean} [options.partial] - if true, allows tokens to be undefined
- * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
- * @returns
- */
-export const getTokensSetPropType = function (componentTokenKeys) {
-  let {
-    partial = false,
-    allowFunction = false
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  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 && props[propName] !== undefined && tokenValueType.isRequired(props, propName, ...args);
-  }])));
-  return allowFunction ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func]) : tokensObjectValidator;
-};

package/lib-module/utils/props/variantProp.js

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-
-/**
- * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
- * @typedef {AppearanceSet} VariantProp
- */
-export default {
-  /**
-   * 'variant' is an optional object prop on all themable components.
-   *
-   * Contains an object with keys that correspond to the current component theme's allowed
-   * appearances and values that correspond to the allowed values of that component.
-   *
-   * 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.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]))
-};

package/lib-module/utils/props/viewProps.js

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import getPropSelector from './getPropSelector';
-const viewPropTypes = {
-  pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
-  onLayout: PropTypes.func,
-  nativeID: PropTypes.string,
-  testID: PropTypes.string,
-  dataSet: PropTypes.object
-};
-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: getPropSelector(viewPropTypes)
-};

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

@@ -1,48 +0,0 @@
-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-module/utils/ssr-media-query/create-stylesheet/index.android.js

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

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

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

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

@@ -1,36 +0,0 @@
-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-module/utils/ssr-media-query/hash.js

@@ -1,13 +0,0 @@
-/* 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-module/utils/ssr-media-query/index.js

@@ -1,6 +0,0 @@
-import createStyleSheet from './create-stylesheet';
-import createMediaQueryStyles from './utils/create-media-query-styles';
-const StyleSheet = {
-  create: createStyleSheet
-};
-export { StyleSheet, createMediaQueryStyles };

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

@@ -1,33 +0,0 @@
-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-module/utils/ssr-media-query/utils/create-declaration-block.js

@@ -1,16 +0,0 @@
-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-module/utils/ssr-media-query/utils/create-media-query-styles.js

@@ -1,60 +0,0 @@
-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-module/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -1,12 +0,0 @@
-const uppercasePattern = /[A-Z]/g;
-const msPattern = /^ms-/;
-const cache = {};
-const toHyphenLower = match => `-${match.toLowerCase()}`;
-const hyphenateStyleName = name => {
-  if (Object.prototype.hasOwnProperty.call(cache, name)) {
-    return cache[name];
-  }
-  const hName = name.replace(uppercasePattern, toHyphenLower);
-  return cache[name] === msPattern.test(hName) ? `-${hName}` : hName;
-};
-export default hyphenateStyleName;

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

@@ -1,39 +0,0 @@
-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-module/utils/ssr.js

@@ -1,142 +0,0 @@
-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 */
-
-/**
- * Returns object with `renderApp` and `getStyles` functions.
- * Weave these into your app's server-side render process:
- *
- * - Call `renderApp` first to do the actual server-side render
- * - After the render is complete, call `getStyles`
- * - Include the style tags returned by `getStyles` in the SSR <head>
- *
- * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
- * @param {object} [options] -
- *  - `styleGetters`: optional array of additional style getter functions to call after render
- *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
- * @param {boolean} [options.styleGetters]
- * @param {(ReactElement) => ReactElement} [options.collectStyles]
- */
-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 = [],
-    collectStyles
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let hasAppRendered = false;
-  return {
-    /**
-     * Server-side-renders the provided app in a way that supports collecting
-     * styles for Styled Components and React Native Web stylesheets.
-     *
-     * @param {ReactComponent} App - the root component for the app
-     * @param {object} [props] - props for this render e.g. page routing props
-     * @param {object} [options] -
-     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
-     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
-     * @param {boolean} [options.renderedByRNW]
-     * @param {ReactComponent} [options.WrapperComponent]
-     *
-     * @returns {ReactElement} - the rendered app output
-     */
-    renderApp: function (App, props) {
-      let {
-        renderedByRNW = false,
-        WrapperComponent
-      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      AppRegistry.registerComponent(appName, () => App);
-      // AppRegistry.getApplication renders the app in a container, and collects styles.
-      const {
-        element,
-        getStyleElement
-      } = AppRegistry.getApplication(appName, {
-        WrapperComponent,
-        initialProps: props
-      });
-      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
-      // 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__*/_jsx(WrapperComponent, {
-        children: /*#__PURE__*/_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>.
-     *
-     * Must be called after `renderApp` has completed.
-     *
-     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
-     * @returns {ReactElement[]} - flat array of <style> React elements
-     */
-    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()), flush()];
-    }
-  };
-};
-export default ssrStyles;
-
-/**
- * @deprecated - use ssrStyles instead
- *
- * Registers the app's root component with React Native Web and generates
- * the main <style> tag containing React Native Web stylesheet styles.
- *
- * @param {ReactComponent} AppRoot
- * @param {string} [appName]
- * @returns {ReactElement[]}
- */
-
-export const getReactNativeWebSSRStyles = function (AppRoot) {
-  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
-  AppRegistry.registerComponent(appName, () => AppRoot);
-  const {
-    getStyleElement
-  } = AppRegistry.getApplication(appName);
-  return [getStyleElement()];
-};
-
-/**
- * @deprecated - use ssrStyles instead
- *
- * Gets style tags for each currently supported CSS-in-JS library and returns
- * them alongside any existing style tags.
- *
- * @param {ReactComponent} AppRoot
- * @param {string} [appName]
- * @param {ReactElement[]} [existingStyles]
- * @returns {ReactElement[]}
- */
-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
-  ];
-};

package/lib-module/utils/transformGradient.js

@@ -1,15 +0,0 @@
-/**
- * Transforms a gradient object into a CSS gradient string.
- *
- * @param {Object} gradient - The gradient object to transform.
- * @param {string} gradient.type - The type of gradient (linear or radial).
- * @param {number} gradient.angle - The angle of the linear gradient in degrees.
- * @param {Array} gradient.stops - An array of gradient stops.
- * @param {string} gradient.stops[].color - The color of the gradient stop.
- * @param {number} gradient.stops[].stop - The position of the gradient stop as a percentage.
- * @returns {string} The CSS gradient string.
- */
-export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
-export default {
-  transformGradient
-};