@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/utils/props/textInputProps.js

@@ -0,0 +1,194 @@
+"use strict";
+
+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(e) { return e && e.__esModule ? e : { default: e }; }
+// 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
+};
+
+/**
+ * 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
+};
+
+/**
+ * This collection adds props that can be passed through to both React Native's
+ * and React Native Web's implementations of the React Native TextInput component.
+ */
+const crossPlatform = {
+  ...textProps,
+  ...inputValueProps,
+  /**
+   * Web and Android; 'off' disables device autocomplete, other strings are platform-specific.
+   * 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,
+  /**
+   * 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']),
+  /**
+   * Focuses the element on mount. On Web, only the first form element with autoFocus is focussed.
+   */
+  autoFocus: _propTypes.default.bool,
+  /**
+   * Default is `true` for single line, `false` for multi-line
+   */
+  blurOnSubmit: _propTypes.default.bool,
+  /**
+   * iOS and Web only, no effect on Android
+   */
+  clearTextOnFocus: _propTypes.default.bool,
+  /**
+   * Default is `true`. On web, this works by mapping to input's `readonly` attribute
+   */
+  editable: _propTypes.default.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,
+  /**
+   * Uses native tools (no flicker) to cap the maximum number of characters.
+   * On Web, works via `maxlength` attr.
+   */
+  maxLength: _propTypes.default.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,
+  /**
+   * Web and Android only, requires `multiline` to be `true`.
+   */
+  numberOfLines: _propTypes.default.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,
+  /**
+   * Sets placeholder colour. On Web, uses `::placeholder { color: ... }` selector.
+   */
+  placeholderTextColor: _propTypes.default.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,
+  /**
+   * Obscures passwords and similar. Equivalent to type="password" on Web.
+   * Does not work if multiline is true.
+   */
+  secureTextEntry: _propTypes.default.bool,
+  /**
+   * If true, all text will automatically be selected on focus.
+   */
+  selectTextOnFocus: _propTypes.default.bool,
+  /**
+   * Web and iOS. On iOS, default inherits from `autoCorrect`.
+   * On Web, equivalent to `spellcheck` attr.
+   */
+  spellCheck: _propTypes.default.bool
+};
+
+/**
+ * These web-only props all control HTML `input` attributes of the same name.
+ * 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,
+  /**
+   * 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
+};
+
+/**
+ * These props are supported in React Native but not React Native Web.
+ *
+ * React Native text inputs can be quirky, so a full set of props should be allowed to handle edge cases.
+ * Refer to React Native documentation for details, allowed values, and Android/iOS support and versions:
+ * https://reactnative.dev/docs/textinput
+ *
+ * Beware that many React Native text input props apply via complicated logic that chooses a built-in
+ * native component based on the values of multiple boolean flags, and may sometimes appear to pick an
+ * 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
+};
+var _default = exports.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.
+   */
+  types: {
+    ...crossPlatform,
+    ...webOnly,
+    ...nativeOnly
+  },
+  /**
+   * Filters a props object. Return only platform-appropriate TextInput props, native inputs
+   * may throw errors on receiving unknown props.
+   */
+  select: (0, _getPropSelector.default)({
+    ...crossPlatform,
+    ..._Platform.default.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};

package/lib/cjs/utils/props/textProps.js

@@ -0,0 +1,67 @@
+"use strict";
+
+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(e) { return e && e.__esModule ? e : { default: e }; }
+// 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,
+  /**
+   * Default is true on web and false on native
+   */
+  selectable: _propTypes.default.bool
+};
+
+/**
+ * See React Native docs for latest details on these.
+ * 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
+};
+
+/**
+ * These set HTML attributes of the same name.
+ */
+const webOnly = {
+  dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
+  lang: _propTypes.default.string
+};
+var _default = exports.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: (0, _getPropSelector.default)({
+    ...crossPlatform,
+    ..._Platform.default.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};

package/lib/cjs/utils/props/tokens.js

@@ -0,0 +1,140 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+// 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];
+  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
+ */
+exports.getTokenNames = getTokenNames;
+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')
+ * }
+ */
+exports.selectTokens = selectTokens;
+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])
+    }, 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]))))
+      }, 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
+ */
+exports.getTokensPropType = getTokensPropType;
+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
+  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.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
+};
+exports.getTokensSetPropType = getTokensSetPropType;

package/lib/cjs/utils/props/variantProp.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
+ * @typedef {AppearanceSet} VariantProp
+ */
+var _default = exports.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.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))
+};

package/lib/cjs/utils/props/viewProps.js

@@ -0,0 +1,28 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+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
+};
+var _default = exports.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)
+};

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

@@ -0,0 +1,55 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let cleanStyles;
+  const ids = {};
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!stylesWithQuery?.[key]) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
+    cleanStyles = JSON.parse(JSON.stringify(stylesWithQuery));
+    mediaQueriesAndPseudoClasses.forEach(str => {
+      if ((0, _common.isMedia)(str)) {
+        const mqStr = str.replace('@media', '');
+        const {
+          width,
+          height
+        } = _Dimensions.default.get('window');
+        const isMatchingMediaQuery = _cssMediaquery.default.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
+  };
+};
+var _default = exports.default = createStyleSheet;

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createStylesheetMobile = _interopRequireDefault(require("./create-stylesheet-mobile"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _createStylesheetMobile.default;

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createStylesheetMobile = _interopRequireDefault(require("./create-stylesheet-mobile"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _createStylesheetMobile.default;

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

@@ -0,0 +1,42 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const createStyleSheet = stylesWithQuery => {
+  if (!stylesWithQuery) return {
+    ids: {},
+    styles: {},
+    fullStyles: {}
+  };
+  let ids = {};
+  const cleanStyles = (0, _common.deepClone)(stylesWithQuery);
+  Object.keys(stylesWithQuery).forEach(key => {
+    if (!stylesWithQuery?.[key]) return;
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(_common.isMediaOrPseudo);
+    mediaQueriesAndPseudoClasses.forEach(query => {
+      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);
+      delete cleanStyles[key][query];
+      ids = {
+        ...ids,
+        [key]: `${ids?.[key] ? `${ids[key]} ` : ''}${stringHash}`
+      };
+    });
+  });
+  return {
+    ids,
+    styles: cleanStyles,
+    fullStyles: stylesWithQuery
+  };
+};
+var _default = exports.default = createStyleSheet;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = hash;
+/* eslint-disable no-bitwise */
+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/cjs/utils/ssr-media-query/index.js

@@ -0,0 +1,18 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const StyleSheet = exports.StyleSheet = {
+  create: _createStylesheet.default
+};

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

@@ -0,0 +1,44 @@
+"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}"]`;
+  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.
+ */
+exports.createCssRule = createCssRule;
+const sanitizeStyle = style => {
+  const sanitizedStyle = {
+    ...style
+  };
+  Object.keys(sanitizedStyle).forEach(property => {
+    if (typeof sanitizedStyle[property] === 'function') {
+      sanitizedStyle[property] = sanitizedStyle[property].toString();
+    }
+  });
+  return sanitizedStyle;
+};
+exports.sanitizeStyle = sanitizeStyle;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _createReactDOMStyle = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle"));
+var _prefixStyles = _interopRequireDefault(require("react-native-web/dist/cjs/modules/prefixStyles"));
+var _hyphenateStyleName = _interopRequireDefault(require("./hyphenate-style-name"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const createDeclarationBlock = style => {
+  const domStyle = (0, _prefixStyles.default)((0, _createReactDOMStyle.default)(style));
+  const declarationsString = Object.keys(domStyle).map(property => {
+    const value = domStyle[property];
+    const prop = (0, _hyphenateStyleName.default)(property);
+    if (Array.isArray(value)) {
+      return value.map(v => `${prop}:${v}`).join(';');
+    }
+    return `${prop}:${value} !important`;
+  }).sort().join(';');
+  return `{${declarationsString};}`;
+};
+var _default = exports.default = createDeclarationBlock;