@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/utils/props/textInputProps.js

@@ -1,34 +1,29 @@
-"use strict";
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import getPropSelector from './getPropSelector';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // This file contains common props for components that render a React Native TextInput
 // It excludes interaction handler functions which are in `./handlerProps.js`
+
 /**
  * TextInput (web and native) supports some common React Native props
  * shared with React Native's Text component.
  */
 const textProps = {
-  maxFontSizeMultiplier: _propTypes.default.number,
-  nativeId: _propTypes.default.string,
-  onLayout: _propTypes.default.func
+  maxFontSizeMultiplier: PropTypes.number,
+  nativeId: PropTypes.string,
+  onLayout: PropTypes.func
 };
 
 /**
  * UDS text inputs accept props related to UDS's useInputValue hook
  */
 const inputValueProps = {
-  value: _propTypes.default.string,
-  type: _propTypes.default.string,
-  initialValue: _propTypes.default.string,
-  readOnly: _propTypes.default.bool,
-  inactive: _propTypes.default.bool
+  value: PropTypes.string,
+  type: PropTypes.string,
+  initialValue: PropTypes.string,
+  readOnly: PropTypes.bool,
+  inactive: PropTypes.bool
 };
 
 /**
@@ -43,81 +38,81 @@ const crossPlatform = {
    * Valid values on Native: https://reactnative.dev/docs/textinput#autocomplete-android
    * Valid values on Web: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
    */
-  autoComplete: _propTypes.default.string,
+  autoComplete: PropTypes.string,
   /**
    * On Native, default is `true`, passing `false` disables autoCorrect.
    * On web, only supported by Safari and expects "on" or "off" strings.
    */
-  autoCorrect: _propTypes.default.oneOf([true, false, 'on', 'off']),
+  autoCorrect: PropTypes.oneOf([true, false, 'on', 'off']),
   /**
    * Focuses the element on mount. On Web, only the first form element with autoFocus is focussed.
    */
-  autoFocus: _propTypes.default.bool,
+  autoFocus: PropTypes.bool,
   /**
    * Default is `true` for single line, `false` for multi-line
    */
-  blurOnSubmit: _propTypes.default.bool,
+  blurOnSubmit: PropTypes.bool,
   /**
    * iOS and Web only, no effect on Android
    */
-  clearTextOnFocus: _propTypes.default.bool,
+  clearTextOnFocus: PropTypes.bool,
   /**
    * Default is `true`. On web, this works by mapping to input's `readonly` attribute
    */
-  editable: _propTypes.default.bool,
+  editable: PropTypes.bool,
   /**
    * See documentation for allowed values (varies between Web, Android and iOS) and important notes:
    * - Native: https://reactnative.dev/docs/textinput#keyboardtype
    * - Web: equivalent to `inputmode` but see https://necolas.github.io/react-native-web/docs/text-input/
    */
-  keyboardType: _propTypes.default.string,
+  keyboardType: PropTypes.string,
   /**
    * Uses native tools (no flicker) to cap the maximum number of characters.
    * On Web, works via `maxlength` attr.
    */
-  maxLength: _propTypes.default.number,
+  maxLength: PropTypes.number,
   /**
    * If passed as true, the text input can be multiple lines.
    *
    * > It is important to note that this aligns the text to the top on iOS, and centers it on Android.
    * > Use with textAlignVertical set to top for the same behavior in both platforms.
    */
-  multiline: _propTypes.default.bool,
+  multiline: PropTypes.bool,
   /**
    * Web and Android only, requires `multiline` to be `true`.
    */
-  numberOfLines: _propTypes.default.number,
+  numberOfLines: PropTypes.number,
   /**
    * Text to display when no value set.
    * Accesibility guidelines recommend using labels to describe the input and using
    * placeholders rarely and sparingly to prompt a particular format.
    */
-  placeholder: _propTypes.default.string,
+  placeholder: PropTypes.string,
   /**
    * Sets placeholder colour. On Web, uses `::placeholder { color: ... }` selector.
    */
-  placeholderTextColor: _propTypes.default.string,
+  placeholderTextColor: PropTypes.string,
   /**
    * One of a subset of platform-specific options that controls labelling and presentation
    * in on-screen keyboards and accessibility tools. Uses `enterkeyhint` attr on Web.
    *
    * 'done', 'go', 'next', 'search', and 'send' are available for Web, Android and iOS.
    */
-  returnKeyType: _propTypes.default.string,
+  returnKeyType: PropTypes.string,
   /**
    * Obscures passwords and similar. Equivalent to type="password" on Web.
    * Does not work if multiline is true.
    */
-  secureTextEntry: _propTypes.default.bool,
+  secureTextEntry: PropTypes.bool,
   /**
    * If true, all text will automatically be selected on focus.
    */
-  selectTextOnFocus: _propTypes.default.bool,
+  selectTextOnFocus: PropTypes.bool,
   /**
    * Web and iOS. On iOS, default inherits from `autoCorrect`.
    * On Web, equivalent to `spellcheck` attr.
    */
-  spellCheck: _propTypes.default.bool
+  spellCheck: PropTypes.bool
 };
 
 /**
@@ -125,15 +120,15 @@ const crossPlatform = {
  * Refer to general HTML documentation for more details.
  */
 const webOnly = {
-  disabled: _propTypes.default.bool,
-  dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
-  lang: _propTypes.default.string,
+  disabled: PropTypes.bool,
+  dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
+  lang: PropTypes.string,
   /**
    * Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
    * Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
    * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
    */
-  pattern: _propTypes.default.string
+  pattern: PropTypes.string
 };
 
 /**
@@ -148,28 +143,28 @@ const webOnly = {
  * option that is inappropriate for one flag based on the values of one or more other other flags.
  */
 const nativeOnly = {
-  caretHidden: _propTypes.default.bool,
-  clearButtonMode: _propTypes.default.string,
-  contextMenuHidden: _propTypes.default.bool,
-  dataDetectorTypes: _propTypes.default.string,
-  disableFullscreenUI: _propTypes.default.bool,
-  enablesReturnKeyAutomatically: _propTypes.default.bool,
-  importantForAutofill: _propTypes.default.string,
-  inlineImageLeft: _propTypes.default.string,
-  keyboardAppearance: _propTypes.default.string,
-  returnKeyLabel: _propTypes.default.string,
-  rejectResponderTermination: _propTypes.default.bool,
-  scrollEnabled: _propTypes.default.bool,
-  selection: _propTypes.default.object,
-  selectionColor: _propTypes.default.string,
-  showSoftInputOnFocus: _propTypes.default.bool,
-  textAlign: _propTypes.default.string,
-  textContentType: _propTypes.default.string,
-  passwordRules: _propTypes.default.string,
-  textBreakStrategy: _propTypes.default.string,
-  underlineColorAndroid: _propTypes.default.string
+  caretHidden: PropTypes.bool,
+  clearButtonMode: PropTypes.string,
+  contextMenuHidden: PropTypes.bool,
+  dataDetectorTypes: PropTypes.string,
+  disableFullscreenUI: PropTypes.bool,
+  enablesReturnKeyAutomatically: PropTypes.bool,
+  importantForAutofill: PropTypes.string,
+  inlineImageLeft: PropTypes.string,
+  keyboardAppearance: PropTypes.string,
+  returnKeyLabel: PropTypes.string,
+  rejectResponderTermination: PropTypes.bool,
+  scrollEnabled: PropTypes.bool,
+  selection: PropTypes.object,
+  selectionColor: PropTypes.string,
+  showSoftInputOnFocus: PropTypes.bool,
+  textAlign: PropTypes.string,
+  textContentType: PropTypes.string,
+  passwordRules: PropTypes.string,
+  textBreakStrategy: PropTypes.string,
+  underlineColorAndroid: PropTypes.string
 };
-var _default = {
+export default {
   /**
    * Subset of proptypes that can be passed down to a React Native or React Native Web
    * `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.
@@ -183,12 +178,11 @@ var _default = {
    * Filters a props object. Return only platform-appropriate TextInput props, native inputs
    * may throw errors on receiving unknown props.
    */
-  select: (0, _getPropSelector.default)({
+  select: getPropSelector({
     ...crossPlatform,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: webOnly,
       default: nativeOnly
     })
   })
-};
-exports.default = _default;
+};

package/lib/utils/props/textProps.js

@@ -1,25 +1,20 @@
-"use strict";
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import getPropSelector from './getPropSelector';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // 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.default.number,
+  numberOfLines: PropTypes.number,
   /**
    * Default is true on web and false on native
    */
-  selectable: _propTypes.default.bool
+  selectable: PropTypes.bool
 };
 
 /**
@@ -27,22 +22,22 @@ const crossPlatform = {
  * https://reactnative.dev/docs/text
  */
 const nativeOnly = {
-  ellipsizeMode: _propTypes.default.string,
-  maxFontSizeMultiplier: _propTypes.default.number,
-  minimumFontScale: _propTypes.default.number,
-  onTextLayout: _propTypes.default.func,
-  suppressHighlighting: _propTypes.default.bool,
-  textBreakStrategy: _propTypes.default.string
+  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.default.oneOf(['auto', 'ltr', 'rtl']),
-  lang: _propTypes.default.string
+  dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
+  lang: PropTypes.string
 };
-var _default = {
+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.
@@ -56,12 +51,11 @@ var _default = {
    * 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: (0, _getPropSelector.default)({
+  select: getPropSelector({
     ...crossPlatform,
-    ..._Platform.default.select({
+    ...Platform.select({
       web: webOnly,
       default: nativeOnly
     })
   })
-};
-exports.default = _default;
+};

package/lib/utils/props/tokens.js

@@ -1,19 +1,13 @@
-"use strict";
+import PropTypes from 'prop-types';
+import { components as tokenKeys } from '@telus-uds/system-theme-tokens';
 
-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 }; }
 // 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 "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
   }
@@ -49,8 +43,7 @@ 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 ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
@@ -90,18 +83,17 @@ 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);
     }
   };
@@ -121,13 +113,12 @@ 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 :
+  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++) {
@@ -135,6 +126,5 @@ const getTokensSetPropType = function (componentTokenKeys) {
     }
     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,16 +1,10 @@
-"use strict";
+import PropTypes from 'prop-types';
 
-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 }; }
 /**
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp
  */
-var _default = {
+export default {
   /**
    * 'variant' is an optional object prop on all themable components.
    *
@@ -20,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,20 +1,13 @@
-"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.
@@ -24,6 +17,5 @@ var _default = {
    * 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

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
-var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
-var _common = require("../utils/common");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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: {},
@@ -18,16 +11,16 @@ const createStyleSheet = stylesWithQuery => {
   const ids = {};
   Object.keys(stylesWithQuery).forEach(key => {
     if (!(stylesWithQuery !== null && stylesWithQuery !== void 0 && stylesWithQuery[key])) return;
-    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
     cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
     mediaQueriesAndPseudoClasses.forEach(str => {
-      if ((0, _common.isMedia)(str)) {
+      if (isMedia(str)) {
         const mqStr = str.replace('@media', '');
         const {
           width,
           height
-        } = _Dimensions.default.get('window');
-        const isMatchingMediaQuery = _cssMediaquery.default.match(mqStr, {
+        } = Dimensions.get('window');
+        const isMatchingMediaQuery = mediaQuery.match(mqStr, {
           width,
           height,
           orientation: width > height ? 'landscape' : 'portrait',
@@ -52,5 +45,4 @@ const createStyleSheet = stylesWithQuery => {
     fullStyles: stylesWithQuery
   };
 };
-var _default = createStyleSheet;
-exports.default = _default;
+export default createStyleSheet;

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

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

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

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

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

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _inject = require("../utils/inject");
-var _createDeclarationBlock = _interopRequireDefault(require("../utils/create-declaration-block"));
-var _hash = _interopRequireDefault(require("../hash"));
-var _common = require("../utils/common");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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: {},
@@ -16,17 +9,17 @@ const createStyleSheet = stylesWithQuery => {
     fullStyles: {}
   };
   let ids = {};
-  const cleanStyles = (0, _common.deepClone)(stylesWithQuery);
+  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(_common.isMediaOrPseudo);
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo);
     mediaQueriesAndPseudoClasses.forEach(query => {
       var _ids;
-      const sanitizedStyle = (0, _common.sanitizeStyle)(stylesWithQuery[key][query]);
-      const css = (0, _createDeclarationBlock.default)(sanitizedStyle);
-      const stringHash = `rnmq-${(0, _hash.default)(`${key}${query}${css}`)}`;
-      const rule = (0, _common.createCssRule)(query, stringHash, css);
-      (0, _inject.addCss)(`${stringHash}`, rule);
+      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,
@@ -40,5 +33,4 @@ const createStyleSheet = stylesWithQuery => {
     fullStyles: stylesWithQuery
   };
 };
-var _default = createStyleSheet;
-exports.default = _default;
+export default createStyleSheet;

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

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = hash;
 /* eslint-disable no-bitwise */
-function hash(text) {
+export default function hash(text) {
   if (!text) {
     return '';
   }

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

@@ -1,19 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyleSheet = void 0;
-Object.defineProperty(exports, "createMediaQueryStyles", {
-  enumerable: true,
-  get: function () {
-    return _createMediaQueryStyles.default;
-  }
-});
-var _createStylesheet = _interopRequireDefault(require("./create-stylesheet"));
-var _createMediaQueryStyles = _interopRequireDefault(require("./utils/create-media-query-styles"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import createStyleSheet from './create-stylesheet';
+import createMediaQueryStyles from './utils/create-media-query-styles';
 const StyleSheet = {
-  create: _createStylesheet.default
+  create: createStyleSheet
 };
-exports.StyleSheet = StyleSheet;
+export { StyleSheet, createMediaQueryStyles };

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

@@ -1,17 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sanitizeStyle = exports.isPseudo = exports.isMediaOrPseudo = exports.isMedia = exports.deepClone = exports.createCssRule = void 0;
 const isMedia = query => query.indexOf('@media') === 0;
-exports.isMedia = isMedia;
 const isPseudo = query => query.indexOf(':') === 0;
-exports.isPseudo = isPseudo;
 const isMediaOrPseudo = query => isMedia(query) || isPseudo(query);
-exports.isMediaOrPseudo = isMediaOrPseudo;
 const deepClone = obj => JSON.parse(JSON.stringify(obj));
-exports.deepClone = deepClone;
 const createCssRule = (query, stringHash, css) => {
   let rule;
   const dataMediaSelector = `[data-media~="${stringHash}"]`;
@@ -29,7 +19,6 @@ const createCssRule = (query, stringHash, css) => {
  * @param {Object} style - The style object to sanitize.
  * @returns {Object} - The sanitized style object.
  */
-exports.createCssRule = createCssRule;
 const sanitizeStyle = style => {
   const sanitizedStyle = {
     ...style
@@ -41,4 +30,4 @@ const sanitizeStyle = style => {
   });
   return sanitizedStyle;
 };
-exports.sanitizeStyle = sanitizeStyle;
+export { isMedia, isPseudo, isMediaOrPseudo, deepClone, createCssRule, sanitizeStyle };