@rescui/chip-list 0.11.1 → 0.11.3-RUI-226-Update-card-cn-6e43cc89.60

package/lib/parts/chip-list-base.js

@@ -4,59 +4,56 @@ import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { ChipListContext } from './chip-list-context.js';
 import styles from './chip-list.p.module.css.js';
 import { useItemsIds } from './use-items-ids.js';
-var STYLES_SIZES = {
+const STYLES_SIZES = {
   xs: styles.sizeXs,
   s: styles.sizeS,
   m: styles.sizeM,
   l: styles.sizeL
 };
-var ALIGN_ITEMS_STYLES = {
+const ALIGN_ITEMS_STYLES = {
   left: styles.alignLeft,
   center: styles.alignCenter,
   right: styles.alignRight
 };
 
 function ChipListBase(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      _ref$sparse = _ref.sparse,
-      sparse = _ref$sparse === void 0 ? false : _ref$sparse,
-      _ref$compact = _ref.compact,
-      compact = _ref$compact === void 0 ? false : _ref$compact,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      className = _ref.className,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
-      _ref$alignItems = _ref.alignItems,
-      alignItems = _ref$alignItems === void 0 ? 'left' : _ref$alignItems,
-      themeFromProps = _ref.theme,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      compareValues = _ref.compareValues,
-      children = _ref.children,
-      e2eId = _ref['data-e2e'];
-  var theme = useThemeWithUndefined(themeFromProps);
-
-  var _useItemsIds = useItemsIds({
-    children: children,
-    compareValues: compareValues,
-    value: value
-  }),
-      childrenWithValues = _useItemsIds.childrenWithValues,
-      selectedIds = _useItemsIds.selectedIds;
-
+  let {
+    size = 'm',
+    sparse = false,
+    compact = false,
+    disabled = false,
+    className,
+    mode = 'classic',
+    alignItems = 'left',
+    theme: themeFromProps,
+    value,
+    onChange,
+    compareValues,
+    children,
+    ['data-e2e']: e2eId,
+    style
+  } = _ref;
+  const theme = useThemeWithUndefined(themeFromProps);
+  const {
+    childrenWithValues,
+    selectedIds
+  } = useItemsIds({
+    children,
+    compareValues,
+    value
+  });
   return /*#__PURE__*/React.createElement(ChipListContext.Provider, {
     value: {
-      onChange: onChange,
-      selectedIds: selectedIds,
-      disabled: disabled
+      onChange,
+      selectedIds,
+      disabled
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, compact && styles.compact, disabled && styles.disabled, ALIGN_ITEMS_STYLES[alignItems], className),
-    "data-e2e": e2eId ? "".concat(e2eId, "__chips-container") : null,
+    "data-e2e": e2eId ? `${e2eId}__chips-container` : null,
     "data-rs-internal": 'chip-list',
-    "data-test": 'chip-list'
+    "data-test": 'chip-list',
+    style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.chipsContainer
   }, childrenWithValues)));

package/lib/parts/chip-list-context.js

@@ -1,13 +1,11 @@
 import { createContext, useContext } from 'react';
-var ChipListContext = /*#__PURE__*/createContext({
+const ChipListContext = /*#__PURE__*/createContext({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: function onChange() {},
+  onChange: () => {},
   selectedIds: [],
   disabled: false
 });
 
-var useChipListContext = function useChipListContext() {
-  return useContext(ChipListContext);
-};
+const useChipListContext = () => useContext(ChipListContext);
 
 export { ChipListContext, useChipListContext };

package/lib/parts/chip-list.p.module.css.js

@@ -1,26 +1,26 @@
 var styles = {
-  "light": "_light_5opd7e_8",
-  "dark": "_dark_5opd7e_11",
-  "alignLeft": "_alignLeft_5opd7e_15",
-  "alignCenter": "_alignCenter_5opd7e_18",
-  "alignRight": "_alignRight_5opd7e_21",
-  "sizeXs": "_sizeXs_5opd7e_25",
-  "sizeS": "_sizeS_5opd7e_28",
-  "sizeM": "_sizeM_5opd7e_31",
-  "sizeL": "_sizeL_5opd7e_34",
-  "innerOffsetL": "_innerOffsetL_5opd7e_38",
-  "innerOffsetM": "_innerOffsetM_5opd7e_41",
-  "classic": "_classic_5opd7e_45",
-  "rock": "_rock_5opd7e_48",
-  "compact": "_compact_5opd7e_52",
-  "main": "_main_5opd7e_56",
-  "chipsContainer": "_chipsContainer_5opd7e_62",
-  "alignIconLeft": "_alignIconLeft_5opd7e_72",
-  "alignIconRight": "_alignIconRight_5opd7e_75",
-  "chip": "_chip_5opd7e_62",
-  "selected": "_selected_5opd7e_172",
-  "disabled": "_disabled_5opd7e_179",
-  "icon": "_icon_5opd7e_212",
-  "withoutText": "_withoutText_5opd7e_223"
+  "light": "_light_ss5fh1_8",
+  "dark": "_dark_ss5fh1_11",
+  "alignLeft": "_alignLeft_ss5fh1_15",
+  "alignCenter": "_alignCenter_ss5fh1_18",
+  "alignRight": "_alignRight_ss5fh1_21",
+  "sizeXs": "_sizeXs_ss5fh1_25",
+  "sizeS": "_sizeS_ss5fh1_28",
+  "sizeM": "_sizeM_ss5fh1_31",
+  "sizeL": "_sizeL_ss5fh1_34",
+  "innerOffsetL": "_innerOffsetL_ss5fh1_38",
+  "innerOffsetM": "_innerOffsetM_ss5fh1_41",
+  "classic": "_classic_ss5fh1_45",
+  "rock": "_rock_ss5fh1_48",
+  "compact": "_compact_ss5fh1_52",
+  "main": "_main_ss5fh1_56",
+  "chipsContainer": "_chipsContainer_ss5fh1_62",
+  "alignIconLeft": "_alignIconLeft_ss5fh1_72",
+  "alignIconRight": "_alignIconRight_ss5fh1_75",
+  "chip": "_chip_ss5fh1_62",
+  "selected": "_selected_ss5fh1_172",
+  "disabled": "_disabled_ss5fh1_179",
+  "icon": "_icon_ss5fh1_212",
+  "withoutText": "_withoutText_ss5fh1_223"
 };
 export { styles as default };

package/lib/parts/chip.js

@@ -1,98 +1,85 @@
-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 _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-var _excluded = ["value", "className", "children", "icon", "iconPosition", "itemId", "onClick", "onKeyDown", "data-e2e"];
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-
-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, { forwardRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './chip-list.p.module.css.js';
 import { useChipListContext } from './chip-list-context.js';
-var ChipTag = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useChipListContext = useChipListContext(),
-      disabled = _useChipListContext.disabled;
+const ChipTag = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    disabled
+  } = useChipListContext();
 
   if (typeof props.href !== 'undefined') {
-    return /*#__PURE__*/React.createElement("a", _objectSpread(_objectSpread({
-      ref: ref
-    }, props), {}, {
+    return /*#__PURE__*/React.createElement("a", {
+      ref: ref,
+      ...props,
       tabIndex: disabled ? -1 : props.tabIndex
-    }), props.children);
+    }, props.children);
   }
 
-  return /*#__PURE__*/React.createElement("button", _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    ...props,
     disabled: disabled,
     type: "button"
-  }), props.children);
+  }, props.children);
 });
 ChipTag.displayName = 'ChipTag'; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
 
-var isWithoutChildren = function isWithoutChildren(children) {
-  return children === null || typeof children === 'undefined' || children === false || children === true || children === '';
-};
-
-var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _cn, _restProps$tabIndex;
-
-  var value = _ref.value,
-      className = _ref.className,
-      children = _ref.children,
-      icon = _ref.icon,
-      _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
-      itemId = _ref.itemId,
-      _onClick = _ref.onClick,
-      _onKeyDown = _ref.onKeyDown,
-      e2eId = _ref['data-e2e'],
-      restProps = _objectWithoutProperties(_ref, _excluded);
+const isWithoutChildren = children => children === null || typeof children === 'undefined' || children === false || children === true || children === '';
 
-  var _useChipListContext2 = useChipListContext(),
-      onChange = _useChipListContext2.onChange,
-      selectedIds = _useChipListContext2.selectedIds;
+const Chip = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    value,
+    className,
+    children,
+    icon,
+    iconPosition = 'left',
+    itemId,
+    onClick,
+    onKeyDown,
+    ['data-e2e']: e2eId,
+    ...restProps
+  } = _ref;
+  const {
+    onChange,
+    selectedIds
+  } = useChipListContext();
 
-  var selected = _includesInstanceProperty(selectedIds).call(selectedIds, itemId);
+  const selected = _includesInstanceProperty(selectedIds).call(selectedIds, itemId);
 
-  var isWithoutText = isWithoutChildren(children);
-  return /*#__PURE__*/React.createElement(ChipTag, _objectSpread(_objectSpread({}, restProps), {}, {
-    className: cn(styles.chip, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.withoutText, isWithoutText), _cn), iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, className),
-    onClick: function onClick(e) {
-      if (_onClick) {
-        _onClick(e);
+  const isWithoutText = isWithoutChildren(children);
+  return /*#__PURE__*/React.createElement(ChipTag, { ...restProps,
+    className: cn(styles.chip, {
+      [styles.selected]: selected,
+      [styles.withoutText]: isWithoutText
+    }, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, className),
+    onClick: e => {
+      if (onClick) {
+        onClick(e);
       }
 
       onChange(value);
     },
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: e => {
       if (e.key === ' ') {
         e.target.click();
         e.preventDefault();
       }
 
-      if (_onKeyDown) {
-        _onKeyDown(e);
+      if (onKeyDown) {
+        onKeyDown(e);
       }
     },
     role: "tab",
-    tabIndex: (_restProps$tabIndex = restProps.tabIndex) !== null && _restProps$tabIndex !== void 0 ? _restProps$tabIndex : 0,
+    tabIndex: restProps.tabIndex ?? 0,
     ref: ref,
     "data-e2e": e2eId,
-    "data-test": "chip".concat(selected ? ' chip-selected' : ''),
+    "data-test": `chip${selected ? ' chip-selected' : ''}`,
     "data-rs-internal": 'chip-list__chip'
-  }), icon && /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon)
+  }, icon && /*#__PURE__*/cloneElement(icon, {
+    className: cn(icon.props.className, styles.icon),
+    'data-render-all-sizes': true
   }), !isWithoutText && /*#__PURE__*/React.createElement("span", null, children));
 });
 Chip.displayName = 'Chip';

package/lib/parts/deep-map.js

@@ -1,12 +1,9 @@
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { isValidElement, cloneElement } from 'react';
 
 function deepMap(children, fn) {
-  var _context;
-
-  var processChild = function processChild(child) {
-    var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var returnChild = child;
+  const processChild = function (child) {
+    let i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let returnChild = child;
 
     if (! /*#__PURE__*/isValidElement(returnChild)) {
       return returnChild;
@@ -26,7 +23,7 @@ function deepMap(children, fn) {
     return processChild(children);
   }
 
-  return _mapInstanceProperty(_context = React.Children).call(_context, children, processChild);
+  return React.Children.map(children, processChild);
 }
 
 export { deepMap };

package/lib/parts/use-items-ids.js

@@ -1,47 +1,47 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.promise.js";
 import React, { useMemo, cloneElement } from 'react';
 import { deepMap } from './deep-map.js';
 import Chip from './chip.js';
 
 function patchItemIfNeeded(_ref) {
-  var child = _ref.child,
-      itemId = _ref.itemId,
-      childValue = _ref.childValue;
+  let {
+    child,
+    itemId,
+    childValue
+  } = _ref;
   return /*#__PURE__*/cloneElement(child, {
-    itemId: itemId,
+    itemId,
     value: childValue
   });
 }
 
-var hasElValue = function hasElValue(el) {
+const hasElValue = el => {
   var _el$props, _el$props2;
 
   return ((_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.value) !== null && typeof ((_el$props2 = el.props) === null || _el$props2 === void 0 ? void 0 : _el$props2.value) !== 'undefined';
 };
 
-var useItemsIds = function useItemsIds(_ref2) {
-  var children = _ref2.children,
-      compareValues = _ref2.compareValues,
-      value = _ref2.value;
-
-  var _useMemo = useMemo(function () {
-    var counter = 0;
-    var currentSelectedItemIds = [];
-    var items = deepMap(children, function (child) {
+const useItemsIds = _ref2 => {
+  let {
+    children,
+    compareValues,
+    value
+  } = _ref2;
+  const [childrenWithValues, selectedIds] = useMemo(() => {
+    let counter = 0;
+    const currentSelectedItemIds = [];
+    const items = deepMap(children, child => {
       if (child.type === Chip) {
-        var childValue = hasElValue(child) ? child.props.value : counter;
-        var isSelectedItem = compareValues(value, childValue);
+        const childValue = hasElValue(child) ? child.props.value : counter;
+        const isSelectedItem = compareValues(value, childValue);
 
         if (isSelectedItem) {
           currentSelectedItemIds.push(counter);
         }
 
-        var patchedItem = patchItemIfNeeded({
-          child: child,
+        const patchedItem = patchItemIfNeeded({
+          child,
           itemId: counter,
-          childValue: childValue
+          childValue
         });
         counter += 1;
         return patchedItem;
@@ -50,14 +50,10 @@ var useItemsIds = function useItemsIds(_ref2) {
       }
     });
     return [React.Children.toArray(items), currentSelectedItemIds];
-  }, [children, value, compareValues]),
-      _useMemo2 = _slicedToArray(_useMemo, 2),
-      childrenWithValues = _useMemo2[0],
-      selectedIds = _useMemo2[1];
-
+  }, [children, value, compareValues]);
   return {
-    childrenWithValues: childrenWithValues,
-    selectedIds: selectedIds
+    childrenWithValues,
+    selectedIds
   };
 };
 

package/lib/public-api.p.css

@@ -44,7 +44,7 @@
     --_rs-cl-sparse-horizontal-gap:12px;
   }
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_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(
@@ -94,7 +94,7 @@
     --_rs-cl-sparse-horizontal-gap:12px;
   }
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_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(
@@ -144,7 +144,7 @@
     --_rs-cl-sparse-horizontal-gap:16px;
   }
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_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(
@@ -172,14 +172,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){
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_rs-typography-list-li-margin-top-from-text:12px;
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
 }
@@ -204,7 +207,7 @@
   }
   }
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_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(
@@ -232,14 +235,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){
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
 }
@@ -319,7 +325,7 @@
     --_rs-cl-sparse-horizontal-gap:12px;
   }
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_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(
@@ -369,7 +375,7 @@
     --_rs-cl-sparse-horizontal-gap:12px;
   }
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_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(
@@ -419,7 +425,7 @@
     --_rs-cl-sparse-horizontal-gap:16px;
   }
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_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(
@@ -447,14 +453,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){
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_rs-typography-list-li-margin-top-from-text:12px;
+    --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
   }
   }
 }
@@ -479,7 +488,7 @@
   }
   }
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_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(
@@ -507,14 +516,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){
     &:not(html) [data-rs-internal='chip-list__chip']{
-    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
   }
   }
 }