@rescui/menu 0.10.9 → 0.10.11-RUI-226-Update-card-cn-6e43cc89.60

package/lib/parts/menu-item.js

@@ -1,87 +1,60 @@
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "tag", "children", "icon", "size", "mode", "theme", "disabled", "disableCursor", "selected", "highlighted", "iconPlacement"],
-    _excluded2 = ["unregisterItem", "registerItem", "activeItemRef", "isKeyboardNavigating", "wrapWithLi"];
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useState, useEffect, cloneElement } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import styles from '../index.p.module.css.js';
 import { useMenuContext } from './menu-context.js';
-var ICON_PLACEMENT_STYLES = {
+const ICON_PLACEMENT_STYLES = {
   left: styles.iconPlacementLeft,
   right: styles.iconPlacementRight
 };
-var MODE_STYLES = {
+const MODE_STYLES = {
   classic: styles.modeClassic,
   clear: styles.modeClear,
   rock: styles.modeRock
 };
-var SIZE_STYLES = {
+const SIZE_STYLES = {
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
 };
-var THEME_STYLES = {
+const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 }; // eslint-disable-next-line complexity
 
-var MenuItemInner = function MenuItemInner(_ref, ref) {
-  var _menuContext$theme, _ref2, _menuContext$itemTag, _ref3, _menuContext$iconPlac, _menuContext$mode, _menuContext$size, _menuContext$disableC;
-
-  var className = _ref.className,
-      tag = _ref.tag,
-      children = _ref.children,
-      icon = _ref.icon,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
-      theme = _ref.theme,
-      disabled = _ref.disabled,
-      disableCursor = _ref.disableCursor,
-      selected = _ref.selected,
-      highlighted = _ref.highlighted,
-      _ref$iconPlacement = _ref.iconPlacement,
-      iconPlacement = _ref$iconPlacement === void 0 ? 'left' : _ref$iconPlacement,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  var _useMenuContext = useMenuContext(),
-      unregisterItem = _useMenuContext.unregisterItem,
-      registerItem = _useMenuContext.registerItem,
-      activeItemRef = _useMenuContext.activeItemRef,
-      isKeyboardNavigating = _useMenuContext.isKeyboardNavigating,
-      wrapWithLi = _useMenuContext.wrapWithLi,
-      menuContext = _objectWithoutProperties(_useMenuContext, _excluded2);
-
-  var actualTheme = useThemeWithUndefined((_menuContext$theme = menuContext.theme) !== null && _menuContext$theme !== void 0 ? _menuContext$theme : theme);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      thisRef = _useState2[0],
-      setThisRef = _useState2[1];
-
-  useEffect(function () {
-    return function () {
-      return unregisterItem(thisRef);
-    };
+const MenuItemInner = (_ref, ref) => {
+  let {
+    className,
+    tag,
+    children,
+    icon,
+    size = 'm',
+    mode = 'classic',
+    theme,
+    disabled,
+    disableCursor,
+    selected,
+
+    /* @private */
+    highlighted,
+    iconPlacement = 'left',
+    ...restProps
+  } = _ref;
+  const {
+    unregisterItem,
+    registerItem,
+    activeItemRef,
+    isKeyboardNavigating,
+    wrapWithLi,
+    ...menuContext
+  } = useMenuContext();
+  const actualTheme = useThemeWithUndefined(menuContext.theme ?? theme);
+  const [thisRef, setThisRef] = useState(null);
+  useEffect(() => {
+    return () => unregisterItem(thisRef);
   }, [unregisterItem, thisRef]);
-  var autoTag = 'span';
+  let autoTag = 'span';
 
   if (restProps.href) {
     autoTag = 'a';
@@ -89,28 +62,29 @@ var MenuItemInner = function MenuItemInner(_ref, ref) {
     autoTag = 'button';
   }
 
-  var Tag = (_ref2 = (_menuContext$itemTag = menuContext.itemTag) !== null && _menuContext$itemTag !== void 0 ? _menuContext$itemTag : tag) !== null && _ref2 !== void 0 ? _ref2 : autoTag;
-  var actualIconPlacement = (_ref3 = (_menuContext$iconPlac = menuContext.iconPlacement) !== null && _menuContext$iconPlac !== void 0 ? _menuContext$iconPlac : iconPlacement) !== null && _ref3 !== void 0 ? _ref3 : 'left';
-  var actualMode = (_menuContext$mode = menuContext.mode) !== null && _menuContext$mode !== void 0 ? _menuContext$mode : mode;
-  var actualSize = (_menuContext$size = menuContext.size) !== null && _menuContext$size !== void 0 ? _menuContext$size : size;
-  var actualDisableCursor = (_menuContext$disableC = menuContext.disableCursor) !== null && _menuContext$disableC !== void 0 ? _menuContext$disableC : disableCursor;
-  var iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon)
+  const Tag = menuContext.itemTag ?? tag ?? autoTag;
+  const actualIconPlacement = menuContext.iconPlacement ?? iconPlacement ?? 'left';
+  const actualMode = menuContext.mode ?? mode;
+  const actualSize = menuContext.size ?? size;
+  const actualDisableCursor = menuContext.disableCursor ?? disableCursor;
+  const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
+    className: cn(icon.props.className, styles.icon),
+    'data-render-all-sizes': true
   }) : null;
-  var actualHighlighted = highlighted || activeItemRef === thisRef && isKeyboardNavigating;
+  const actualHighlighted = highlighted || activeItemRef === thisRef && isKeyboardNavigating;
 
-  var handleRef = function handleRef(r) {
+  const handleRef = r => {
     registerItem(r);
     setThisRef(r);
 
     if (typeof ref === 'function') {
       ref(r);
-    } else if (ref != null && _typeof(ref) === 'object') {
+    } else if (ref != null && typeof ref === 'object') {
       ref.current = r;
     }
   };
 
-  var handleKeyDown = function handleKeyDown(e) {
+  const handleKeyDown = e => {
     if (isKeyboardNavigating && (e.key === ' ' || e.key === 'Enter')) {
       e.preventDefault();
 
@@ -120,24 +94,25 @@ var MenuItemInner = function MenuItemInner(_ref, ref) {
     }
   };
 
-  var Wrapper = wrapWithLi ? 'li' : 'div';
+  const Wrapper = wrapWithLi ? 'li' : 'div';
   return /*#__PURE__*/React.createElement(Wrapper, {
     className: cn(styles.wrapper, className, ICON_PLACEMENT_STYLES[actualIconPlacement], MODE_STYLES[actualMode], SIZE_STYLES[actualSize], THEME_STYLES[actualTheme]),
     "data-test": 'menu-item__wrapper',
     "data-rs-internal": 'menu__menu-item'
-  }, /*#__PURE__*/React.createElement(Tag, _objectSpread({
+  }, /*#__PURE__*/React.createElement(Tag, {
     onKeyDown: handleKeyDown,
     ref: handleRef,
     className: cn(styles.menuItem, (menuContext.disabled || disabled) && styles.disabled, selected && styles.selected, actualHighlighted && styles.highlighted, actualDisableCursor && styles.disableCursor),
     "data-test": 'menu-item',
     "data-rs-internal": 'menu__menu-item__inner',
-    tabIndex: 0
-  }, restProps), iconElement, /*#__PURE__*/React.createElement("span", {
+    tabIndex: 0,
+    ...restProps
+  }, iconElement, /*#__PURE__*/React.createElement("span", {
     className: styles.content
   }, children)));
 };
 
-var MenuItem = /*#__PURE__*/React.forwardRef(MenuItemInner);
+const MenuItem = /*#__PURE__*/React.forwardRef(MenuItemInner);
 MenuItem.propTypes = {
   size: PropTypes.oneOf(['l', 'm', 's']),
   mode: PropTypes.oneOf(['clear', 'classic', 'rock']),

package/lib/parts/navigation-utils.js

@@ -1,5 +1,3 @@
-import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
-
 function getFirstItem(sortedItems) {
   return sortedItems[0];
 }
@@ -9,11 +7,8 @@ function getLastItem(sortedItems) {
 }
 
 function getNextItem(sortedItems, activeItem) {
-  var focusedIndex = _findIndexInstanceProperty(sortedItems).call(sortedItems, function (el) {
-    return el === activeItem;
-  });
-
-  var indexToFocus = focusedIndex + 1;
+  const focusedIndex = sortedItems.findIndex(el => el === activeItem);
+  const indexToFocus = focusedIndex + 1;
 
   if (indexToFocus < sortedItems.length) {
     return sortedItems[indexToFocus];
@@ -23,11 +18,8 @@ function getNextItem(sortedItems, activeItem) {
 }
 
 function getPrevItem(sortedItems, activeItem) {
-  var focusedIndex = _findIndexInstanceProperty(sortedItems).call(sortedItems, function (el) {
-    return el === activeItem;
-  });
-
-  var indexToFocus = focusedIndex - 1;
+  const focusedIndex = sortedItems.findIndex(el => el === activeItem);
+  const indexToFocus = focusedIndex - 1;
 
   if (indexToFocus >= 0) {
     return sortedItems[indexToFocus];

package/lib/parts/use-menu-keyboard-navigation.js

@@ -1,62 +1,49 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
-import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import { useRef, useState, useCallback, useEffect } from 'react';
 import { getLastItem, getFirstItem, getPrevItem, getNextItem, htmlElementsComparator } from './navigation-utils.js';
 
 function debounce(callback, timeout) {
-  var id;
+  let id;
   return function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
     clearTimeout(id);
-    id = setTimeout(function () {
-      return callback.apply(void 0, args);
-    }, timeout);
+    id = setTimeout(() => callback(...args), timeout);
     return id;
   };
 }
 
 function getSortedItems(itemsSet) {
-  var _context;
-
-  return _sortInstanceProperty(_context = _Array$from(_valuesInstanceProperty(itemsSet).call(itemsSet))).call(_context, htmlElementsComparator);
+  return Array.from(itemsSet.values()).sort(htmlElementsComparator);
 }
 
 function useMenuKeyboardNavigation(_ref) {
-  var enableKeyboardNavigation = _ref.enableKeyboardNavigation,
-      activateFirstItem = _ref.activateFirstItem,
-      returnFocusOnUnmount = _ref.returnFocusOnUnmount;
-  var activeItemRef = useRef(null);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      setDummyState = _useState2[1];
-
-  var setActiveItemRef = useCallback(function (ref) {
+  let {
+    enableKeyboardNavigation,
+    activateFirstItem,
+    returnFocusOnUnmount
+  } = _ref;
+  const activeItemRef = useRef(null);
+  const [, setDummyState] = useState(false);
+  const setActiveItemRef = useCallback(ref => {
     activeItemRef.current = ref;
 
     if (ref) {
       ref.focus();
     }
 
-    setDummyState(function (t) {
-      return !t;
-    });
+    setDummyState(t => !t);
   }, [setDummyState]);
-  var menuItemsSet = useRef(new _Set());
-  useEffect(function () {
+  const menuItemsSet = useRef(new Set());
+  useEffect(() => {
     if (!enableKeyboardNavigation || !activateFirstItem || !returnFocusOnUnmount) {
       return;
     }
 
-    var lastFocusedEl = document.activeElement; // eslint-disable-next-line consistent-return
+    const lastFocusedEl = document.activeElement; // eslint-disable-next-line consistent-return
 
-    return function () {
+    return () => {
       if (lastFocusedEl) {
         lastFocusedEl.focus({
           preventScroll: true
@@ -64,11 +51,11 @@ function useMenuKeyboardNavigation(_ref) {
       }
     };
   }, []);
-  var debouncedActivateFirstItem = debounce(function () {
-    var items = getSortedItems(menuItemsSet.current);
+  const debouncedActivateFirstItem = debounce(() => {
+    const items = getSortedItems(menuItemsSet.current);
     setActiveItemRef(getFirstItem(items));
   }, 50);
-  var registerItem = useCallback(function (ref) {
+  const registerItem = useCallback(ref => {
     if (ref && !menuItemsSet.current.has(ref)) {
       menuItemsSet.current.add(ref);
 
@@ -77,16 +64,11 @@ function useMenuKeyboardNavigation(_ref) {
       }
     }
   }, []);
-  var unregisterItem = useCallback(function (ref) {
+  const unregisterItem = useCallback(ref => {
     menuItemsSet.current.delete(ref);
   }, []);
-
-  var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isKeyboardNavigating = _useState4[0],
-      setIsKeyboardNavigating = _useState4[1];
-
-  var handleMouseMove = useCallback(function () {
+  const [isKeyboardNavigating, setIsKeyboardNavigating] = useState(true);
+  const handleMouseMove = useCallback(() => {
     if (menuItemsSet.current.has(document.activeElement) && document.activeElement.blur) {
       document.activeElement.blur();
     }
@@ -95,22 +77,20 @@ function useMenuKeyboardNavigation(_ref) {
     setIsKeyboardNavigating(false);
   }, []); // eslint-disable-next-line consistent-return
 
-  useEffect(function () {
+  useEffect(() => {
     if (isKeyboardNavigating) {
       document.addEventListener('mousemove', handleMouseMove);
-      return function () {
-        return document.removeEventListener('mousemove', handleMouseMove);
-      };
+      return () => document.removeEventListener('mousemove', handleMouseMove);
     }
   }, [handleMouseMove, isKeyboardNavigating]);
-  useEffect(function () {
+  useEffect(() => {
     if (!enableKeyboardNavigation) {
       return;
     }
 
-    var handler = function handler(e) {
+    const handler = e => {
       setIsKeyboardNavigating(true);
-      var items = getSortedItems(menuItemsSet.current);
+      const items = getSortedItems(menuItemsSet.current);
 
       switch (e.key) {
         case 'ArrowDown':
@@ -137,15 +117,15 @@ function useMenuKeyboardNavigation(_ref) {
 
     document.addEventListener('keydown', handler, true); // eslint-disable-next-line consistent-return
 
-    return function () {
+    return () => {
       document.removeEventListener('keydown', handler, true);
     };
   }, [enableKeyboardNavigation]);
   return {
-    activeItemRef: activeItemRef,
-    registerItem: registerItem,
-    unregisterItem: unregisterItem,
-    isKeyboardNavigating: isKeyboardNavigating
+    activeItemRef,
+    registerItem,
+    unregisterItem,
+    isKeyboardNavigating
   };
 }
 

package/lib/public-api.p.css

@@ -3,7 +3,7 @@
     --_rs-menu-mi-icon-offset:8px;
     --_rs-menu-mi-vertical-padding:6px;
     --_rs-menu-mi-horizontal-padding:8px;
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -39,7 +39,7 @@
   & [data-rs-internal="menu__group-header"]{
     --_rs-menu-gh-vertical-padding:6px;
     --_rs-menu-gh-horizontal-padding:8px;
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -75,7 +75,7 @@
     --_rs-menu-mi-icon-offset:8px;
     --_rs-menu-mi-vertical-padding:8px;
     --_rs-menu-mi-horizontal-padding:16px;
-    --_rs-typography-letter-spacing:0.0015em;
+    --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -103,20 +103,23 @@
     --_rs-typography-text-auto-offset:16px;
     --_rs-typography-ul-list-li-padding-left:22px;
     --_rs-typography-ol-list-li-padding-left:26px;
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text,
+    16px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
   & [data-rs-internal="menu__menu-item"]{
-    --_rs-typography-list-li-margin-top-from-text:12px;
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
   & [data-rs-internal="menu__group-header"]{
     --_rs-menu-gh-vertical-padding:8px;
     --_rs-menu-gh-horizontal-padding:16px;
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -152,7 +155,7 @@
     --_rs-menu-mi-icon-offset:16px;
     --_rs-menu-mi-vertical-padding:12px;
     --_rs-menu-mi-horizontal-padding:16px;
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -180,20 +183,23 @@
     --_rs-typography-text-auto-offset:32px;
     --_rs-typography-ul-list-li-padding-left:26px;
     --_rs-typography-ol-list-li-padding-left:32px;
-    --_rs-typography-list-li-margin-top-from-text:24px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text,
+    24px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
   & [data-rs-internal="menu__menu-item"]{
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
   & [data-rs-internal="menu__group-header"]{
     --_rs-menu-gh-vertical-padding:12px;
     --_rs-menu-gh-horizontal-padding:16px;
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -288,7 +294,7 @@
     --_rs-menu-mi-icon-offset:8px;
     --_rs-menu-mi-vertical-padding:6px;
     --_rs-menu-mi-horizontal-padding:8px;
-    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -327,7 +333,7 @@
     --_rs-menu-mi-icon-offset:8px;
     --_rs-menu-mi-vertical-padding:8px;
     --_rs-menu-mi-horizontal-padding:16px;
-    --_rs-typography-letter-spacing:0.0015em;
+    --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -355,14 +361,17 @@
     --_rs-typography-text-auto-offset:16px;
     --_rs-typography-ul-list-li-padding-left:22px;
     --_rs-typography-ol-list-li-padding-left:26px;
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text,
+    16px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
   &[class]{
-    --_rs-typography-list-li-margin-top-from-text:12px;
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
 }
@@ -371,7 +380,7 @@
     --_rs-menu-mi-icon-offset:16px;
     --_rs-menu-mi-vertical-padding:12px;
     --_rs-menu-mi-horizontal-padding:16px;
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -399,14 +408,17 @@
     --_rs-typography-text-auto-offset:32px;
     --_rs-typography-ul-list-li-padding-left:26px;
     --_rs-typography-ol-list-li-padding-left:32px;
-    --_rs-typography-list-li-margin-top-from-text:24px;
+    --_rs-typography-list-li-margin-top-from-text:var(
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text,
+    24px
+  );
     --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
     @media screen and (max-width: 640px){
   &[class]{
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
 }
@@ -473,7 +485,7 @@
   &[class]{
     --_rs-menu-gh-vertical-padding:6px;
     --_rs-menu-gh-horizontal-padding:8px;
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -508,7 +520,7 @@
   &[class]{
     --_rs-menu-gh-vertical-padding:8px;
     --_rs-menu-gh-horizontal-padding:16px;
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(
@@ -543,7 +555,7 @@
   &[class]{
     --_rs-menu-gh-vertical-padding:12px;
     --_rs-menu-gh-horizontal-padding:16px;
-    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
     --_rs-typography-font-family:var(