@telus-uds/components-base 2.0.0 → 2.0.1

package/src/index.js

@@ -1,20 +1,33 @@
 export { default as A11yText } from './A11yText'
+export { default as ActionCard } from './ActionCard'
 export { default as ActivityIndicator } from './ActivityIndicator'
+export { default as Autocomplete } from './Autocomplete'
 export { default as Box } from './Box'
+export { default as Badge } from './Badge'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
+export { default as CardGroup } from './CardGroup'
 export * from './Carousel'
+export { default as FileUpload } from './FileUpload'
+export { default as Listbox } from './Listbox'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
+export { default as CheckboxCard } from './CheckboxCard'
+export { default as CheckboxCardGroup } from './CheckboxCardGroup'
+export { default as ColourToggle } from './ColourToggle'
+export { default as DownloadApp } from './DownloadApp'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
 export { default as Fieldset } from './Fieldset'
 export { default as FlexGrid } from './FlexGrid'
-export { default as HorizontalScroll } from './HorizontalScroll'
-export * from './HorizontalScroll'
-export { default as Icon } from './Icon'
-export * from './Icon'
+export { default as Footnote } from './Footnote'
+export {
+  default as HorizontalScroll,
+  horizontalScrollUtils,
+  HorizontalScrollButton
+} from './HorizontalScroll'
+export { default as Icon, IconText, iconComponentPropTypes } from './Icon'
 export { default as IconButton } from './IconButton'
 export { default as InputLabel } from './InputLabel'
 export { default as InputSupports } from './InputSupports'
@@ -23,14 +36,16 @@ export { default as List, ListItem, ListBase } from './List'
 export { default as Modal } from './Modal'
 export { default as MultiSelectFilter } from './MultiSelectFilter'
 export { default as Notification } from './Notification'
+export { default as OrderedList } from './OrderedList'
 export { default as Pagination } from './Pagination'
+export { default as PriceLockup } from './PriceLockup'
+export { default as ProductCard } from './ProductCard'
+export { default as ProductCardGroup } from './ProductCardGroup'
 export { default as Progress } from './Progress'
 export { default as QuickLinks } from './QuickLinks'
 export { default as QuickLinksFeature } from './QuickLinksFeature'
-export { default as Radio } from './Radio'
-export * from './Radio'
-export { default as RadioCard } from './RadioCard'
-export * from './RadioCard'
+export { default as Radio, RadioGroup } from './Radio'
+export { default as RadioCard, RadioCardGroup } from './RadioCard'
 export { default as Responsive } from './Responsive'
 export { default as Search } from './Search'
 export { default as Select } from './Select'
@@ -38,10 +53,11 @@ export { default as SideNav } from './SideNav'
 export { default as Skeleton } from './Skeleton'
 export { default as SkipLink } from './SkipLink'
 export { default as Spacer } from './Spacer'
-export { default as StackView } from './StackView'
-export * from './StackView'
+export { default as StackView, StackWrap, getStackedContent } from './StackView'
+export { default as Status } from './Status'
 export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'
+export { default as TabBar } from './TabBar'
 export { default as Tags } from './Tags'
 export * from './TextInput'
 export { default as Timeline } from './Timeline'
@@ -53,17 +69,20 @@ export { default as Typography } from './Typography'
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
 export { useHydrationContext } from './BaseProvider/HydrationContext'
+export { default as Validator } from './Validator'
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider'
 export {
   default as ThemeProvider,
   useTheme,
   useSetTheme,
   useThemeTokens,
+  useThemeTokensCallback,
   getThemeTokens,
   applyOuterBorder,
   applyTextStyles,
-  applyShadowToken
+  applyShadowToken,
+  useResponsiveThemeTokens
 } from './ThemeProvider'
 
 export * from './utils'
-export { Portal } from '@gorhom/portal'
+export { default as Portal } from './Portal'

package/src/server.js

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

package/src/utils/BaseView/BaseView.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { View as NativeView, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTheme } from '../../ThemeProvider'
@@ -7,7 +7,7 @@ import { useTheme } from '../../ThemeProvider'
  * Identical to React Native's View and supporting all the same props, but with:
  *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
  */
-const BaseView = forwardRef(({ children, style, ...rest }, ref) => {
+const BaseView = React.forwardRef(({ children, style, ...rest }, ref) => {
   const { themeOptions } = useTheme()
   const styleProp = Array.isArray(style) ? [...style] : [style]
 

package/src/utils/a11y/semantics.js

@@ -22,8 +22,7 @@ import { Platform } from 'react-native'
  * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js
  */
 // Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
-// eslint-disable-next-line prettier/prettier
-const rolesToTags = /** @type {const} */ ({
+const rolesToTags = /** @type {const} */ {
   article: 'article',
   banner: 'header',
   blockquote: 'blockquote',
@@ -44,8 +43,7 @@ const rolesToTags = /** @type {const} */ ({
 
   // Add special cases that are in RNW's function logic but not in its mapping object
   label: 'label'
-  // eslint-disable-next-line prettier/prettier
-})
+}
 
 // Invert React Native Web's mapping, so a tag gets the role that gets that tag
 export const tagsToRoles = Object.fromEntries(
@@ -56,8 +54,7 @@ export const tagsToRoles = Object.fromEntries(
  * Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
  * to headings on web but without the expectation of a hierarchy of headings within one screen.
  */
-// eslint-disable-next-line prettier/prettier
-export const headingTags = /** @type {const} */ (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+export const headingTags = /** @type {const} */ ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
 /**
  * @typedef {typeof headingTags[number]} HeadingTag
  */
@@ -80,8 +77,7 @@ export const supportedTags = [...Object.keys(tagsToRoles), ...headingTags]
  *
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
-// eslint-disable-next-line prettier/prettier
-export const layoutTags = /** @type {const} */ ([
+export const layoutTags = /** @type {const} */ [
   ...headingTags,
   'article',
   'aside',
@@ -96,8 +92,7 @@ export const layoutTags = /** @type {const} */ ([
   'nav',
   'section',
   'label'
-  // eslint-disable-next-line prettier/prettier
-])
+]
 /**
  * @typedef {typeof layoutTags[number]} LayoutTag
  */
@@ -107,8 +102,7 @@ export const layoutTags = /** @type {const} */ ([
  *
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
-// eslint-disable-next-line prettier/prettier
-export const textTags = /** @type {const} */ ([
+export const textTags = /** @type {const} */ [
   ...headingTags,
   'blockquote',
   'code',
@@ -118,8 +112,7 @@ export const textTags = /** @type {const} */ ([
   'li',
   'strong',
   'label'
-  // eslint-disable-next-line prettier/prettier
-])
+]
 /**
  * @typedef {typeof layoutTags[number]} TextTag
  */

package/src/utils/animation/useVerticalExpandAnimation.js

@@ -53,8 +53,8 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
 
   if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (Platform.OS === 'web') {
-      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
-      containerStyles.visibility = 'hidden'
+      // Without `display: 'none', descendents are focusable on web even when collapsed.
+      containerStyles.display = 'none'
     } else {
       // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
       // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
@@ -68,7 +68,7 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
       // on web we can hide the contents until we have the container measured and avoid occasional jitter
       // this won't work on native platforms
       containerStyles.height = 0
-      containerStyles.visibility = 'hidden'
+      containerStyles.display = 'none'
     }
   } else if (Platform.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration

package/src/utils/children.jsx

@@ -1,4 +1,4 @@
-import React, { Children, Fragment } from 'react'
+import React from 'react'
 import { Text } from 'react-native'
 import A11yText from '../A11yText'
 
@@ -36,10 +36,10 @@ import A11yText from '../A11yText'
  */
 export const unpackFragment = (child) => {
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment)
+  if (React.Children.count(child) > 1) return React.Children.map(child, unpackFragment)
 
   // When a fragment is found, unpack its children to the top level and check them
-  if (child?.type === Fragment) return unpackFragment(child.props?.children)
+  if (child?.type === React.Fragment) return unpackFragment(child.props?.children)
 
   // Stop unpacking as soon as any non-fragment child is found
   return child
@@ -81,7 +81,7 @@ const wrapChild = (child, wrappedText) => {
  * @returns {ReactChildren}
  */
 export const wrapStringsInText = (children, textProps = {}) => {
-  const childrenArray = unpackFragment(Children.toArray(children))
+  const childrenArray = unpackFragment(React.Children.toArray(children))
 
   // Group adjacent wrapable children together in one Text element to create as few Text elements
   // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>

package/src/utils/convertFromMegaByteToByte.js

@@ -0,0 +1,11 @@
+/**
+ * Converts a value from megabytes to bytes.
+ *
+ * @param {number} megaByte - The value in megabytes to be converted.
+ * @returns {number} The converted value in bytes.
+ */
+const BYTES_IN_A_MEGABYTE = 1024 * 1024
+
+export default function convertFromMegaByteToByte(megaByte) {
+  return megaByte * BYTES_IN_A_MEGABYTE
+}

package/src/utils/formatImageSource.js

@@ -0,0 +1,29 @@
+// react native source for Image and ImageBackground needs proper formatting to work
+// remote sources that start with 'http' and base64 encoded sources that start with 'data:' need be wrapped in uri when passing source prop for Image and ImageBackground ie. source={ uri: image }
+// local source for image can be passed normally without wrapping in uri ie. source={ image }
+
+/**
+ *  example code from react native docs: https://reactnative.dev/docs/imagebackground
+ *
+ *  const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}
+ *
+ *  const App = () => (
+ *    <View style={styles.container}>
+ *      <ImageBackground source={image} resizeMode="cover" style={styles.image}>
+ *        <Text style={styles.text}>Inside</Text>
+ *      </ImageBackground>
+ *    </View>
+ *  )
+ */
+
+/**
+ * Formats the image source for React Native Image and ImageBackground components.
+ * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
+ * @returns {object|string} - The formatted image source.
+ */
+const formatImageSource = (source) =>
+  typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:'))
+    ? { uri: source }
+    : source
+
+export default formatImageSource

package/src/utils/htmlAttrs.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+
+const htmlAttrTypes = {
+  dataSet: PropTypes.object,
+  id: PropTypes.string,
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  // @todo figure out if we need to enum all the possible roles or maybe use
+  // an npm package
+  role: PropTypes.string,
+  src: PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  testID: PropTypes.string,
+  title: PropTypes.string
+}
+
+export default {
+  types: htmlAttrTypes,
+  select: (props) =>
+    Object.entries(props).reduce(
+      (items, [key, value]) =>
+        Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key)
+          ? {
+              ...items,
+              [key]: value
+            }
+          : items,
+      {}
+    )
+}

package/src/utils/index.js

@@ -4,12 +4,13 @@ export * from './children'
 export * from './input'
 export * from './pressability'
 export * from './props'
-
+export * from './ssr-media-query'
 export { default as info } from './info'
 export { default as useCopy } from './useCopy'
 export { default as useHash } from './useHash'
 export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
+export { default as useOverlaidPosition } from './useOverlaidPosition'
 export { default as useSafeLayoutEffect } from './useSafeLayoutEffect'
 export { default as useScrollBlocking } from './useScrollBlocking'
 export * from './useResponsiveProp'
@@ -18,3 +19,7 @@ export { default as withLinkRouter } from './withLinkRouter'
 export * from './ssr'
 export { default as containUniqueFields } from './containUniqueFields'
 export { default as BaseView } from './BaseView'
+export { default as htmlAttrs } from './htmlAttrs'
+export { transformGradient } from './transformGradient'
+export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte'
+export { default as formatImageSource } from './formatImageSource'

package/src/utils/props/handlerProps.js

@@ -65,7 +65,11 @@ const textInputHandlerProps = {
     /**
      * onKeyDown handler (only supported on Web)
      */
-    onKeyDown: PropTypes.func
+    onMouseOver: PropTypes.func,
+    /**
+     * onKeyDown handler (only supported on Web)
+     */
+    onMouseOut: PropTypes.func
   }
 }
 const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types)

package/src/utils/props/inputSupportsProps.js

@@ -23,6 +23,14 @@ export default {
      * Visual variant is determined based on the `validation` prop.
      */
     feedback: PropTypes.string,
+    /**
+     * Tokens to be passed to the feedback component.
+     */
+    feedbackTokens: PropTypes.object,
+    /**
+     * Props to be passed to the feedback component.
+     */
+    feedbackProps: PropTypes.object,
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
@@ -32,13 +40,25 @@ export default {
      */
     validation: PropTypes.oneOf(['error', 'success'])
   },
-  select: ({ copy, label, hint, hintPosition, feedback, tooltip, validation }) => ({
+  select: ({
+    copy,
+    label,
+    hint,
+    hintPosition,
+    feedback,
+    feedbackTokens,
+    feedbackProps,
+    tooltip,
+    validation
+  }) => ({
     supportsProps: {
       copy,
       label,
       hint,
       hintPosition,
       feedback,
+      feedbackTokens,
+      feedbackProps,
       tooltip,
       validation
     }

package/src/utils/props/textInputProps.js

@@ -20,6 +20,7 @@ const textProps = {
  */
 const inputValueProps = {
   value: PropTypes.string,
+  type: PropTypes.string,
   initialValue: PropTypes.string,
   readOnly: PropTypes.bool,
   inactive: PropTypes.bool

package/src/utils/props/tokens.js

@@ -122,7 +122,7 @@ export const getTokensPropType =
  * 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]
@@ -142,7 +142,9 @@ export const getTokensSetPropType = (
           ? tokenValueType
           : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
             (props, propName, ...args) =>
-              props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)
+              props[propName] !== null &&
+              props[propName] !== undefined &&
+              tokenValueType.isRequired(props, propName, ...args)
       ])
     )
   )

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

@@ -0,0 +1,41 @@
+import mediaQuery from 'css-mediaquery'
+import { Dimensions } from 'react-native'
+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?.[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/src/utils/ssr-media-query/create-stylesheet/index.android.js

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

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

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

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

@@ -0,0 +1,35 @@
+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?.[key]) return
+
+    const mediaQueriesAndPseudoClasses = Object.keys(stylesWithQuery[key]).filter(isMediaOrPseudo)
+    mediaQueriesAndPseudoClasses.forEach((query) => {
+      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?.[key] ? `${ids[key]} ` : ''}${stringHash}`
+      }
+    })
+  })
+
+  return { ids, styles: cleanStyles, fullStyles: stylesWithQuery }
+}
+
+export default createStyleSheet

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+import { viewports } from '@telus-uds/system-constants'
+
+const inherit = ({ xs, sm = xs, md = sm, lg = md, xl = lg }) => ({ 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, shouldInherit = true) {
+  const effectiveStyles = shouldInherit ? inherit(viewportStyles) : viewportStyles
+  const viewportsArray = viewports.keys
+  const mediaQueries = Object.entries(effectiveStyles).reduce((acc, [viewport, styles]) => {
+    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/src/utils/ssr-media-query/utils/hyphenate-style-name.js

@@ -0,0 +1,15 @@
+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